/* v14: Figma-style case boards, homepage hero entrance, and fixes that let the restored v11 motion
   coexist with the v13 layout. Board entrances are gated by html.motion and .is-pending (set by JS),
   so without JS or with reduced motion everything is simply visible. */
:root{--fig-canvas:#171c19;--fig-dot:#2f3832;--fig-sel:#5aa9ff;--fig-flag:#ff8f7e;--fig-gap:48px}

/* ---------- Board shell ---------- */
.campaign-journey{overflow:hidden}
.fig-board{position:relative;margin-top:40px;border:1px solid #2e3831;border-radius:16px;background:var(--fig-canvas);overflow:hidden;box-shadow:0 40px 80px -48px rgba(0,0,0,.9)}
.fig-bar{display:flex;align-items:center;gap:16px;height:48px;padding:0 16px;background:#1f2622;border-bottom:1px solid #2e3831;font-size:13px;color:#aab3ad}
.fig-menu{display:grid;grid-template-columns:repeat(3,4px);gap:3px}.fig-menu i{width:4px;height:4px;border-radius:1px;background:#8d978f}
.fig-file b{color:var(--ink);font-weight:600}
.fig-tools{display:flex;gap:4px;margin:0 auto}
.fig-tools svg{width:28px;height:28px;padding:5px;border-radius:6px;fill:none;stroke:#aab3ad;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fig-tools svg:first-child{background:var(--fig-sel);stroke:#0d1a28}
.fig-people{display:flex}.fig-people .fig-av+.fig-av{margin-left:-6px}
.fig-zoom{font-variant-numeric:tabular-nums}
.fig-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font:700 11px/1 Arial,sans-serif;color:#122018;border:2px solid #1f2622;flex:none}
.fig-av--j{background:#ffd76a}.fig-av--s{background:var(--blue)}

.fig-canvas{position:relative;padding:56px 40px 48px;background:radial-gradient(circle,var(--fig-dot) 1px,transparent 1.3px) 0 0/20px 20px}

/* ---------- Flow ---------- */
.fig-flow,.fig-branch{list-style:none;margin:0;padding:0}
.fig-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.25fr);gap:var(--fig-gap);align-items:start}
.fig-board[data-layout=branch] .fig-flow{grid-template-columns:minmax(0,1fr) minmax(0,3.3fr) minmax(0,1.05fr)}
.fig-frame,.fig-section{position:relative;min-width:0}
.fig-label{display:flex;gap:8px;align-items:baseline;margin:0 0 8px;font-size:12px;line-height:1.3;color:#9aa39d;letter-spacing:.02em}
.fig-label span{color:var(--blue);font-variant-numeric:tabular-nums}
.fig-art{position:relative}
.fig-art .image-open{border-radius:4px;background:#101411}
.fig-art img{aspect-ratio:4/5;object-fit:cover}
.fig-brief{aspect-ratio:4/5;border-radius:4px;background:#f3f0e6;color:#16201a;padding:16px;display:flex;flex-direction:column;gap:12px}
.fig-brief span{font-size:11px;font-weight:700;letter-spacing:.14em;color:#4b6a53}
.fig-brief strong{font:italic clamp(17px,1.5vw,21px)/1.15 Georgia,serif;letter-spacing:-.01em}
.fig-brief ul{margin:auto 0 0;padding:0;list-style:none;font-size:12px;line-height:1.4}
.fig-brief li{padding:6px 0;border-top:1px solid #d9d4c4}
.fig-plan{background:#e6f1e8}

/* Selection + flagged states */
.is-final .fig-art{outline:1.5px solid var(--fig-sel);outline-offset:4px;border-radius:4px}
.fig-handles i{position:absolute;width:8px;height:8px;background:#fff;border:1.5px solid var(--fig-sel)}
.fig-handles i:nth-child(1){top:-8px;left:-8px}.fig-handles i:nth-child(2){top:-8px;right:-8px}
.fig-handles i:nth-child(3){bottom:-8px;left:-8px}.fig-handles i:nth-child(4){bottom:-8px;right:-8px}
.fig-size{display:table;margin:12px auto 0;padding:2px 8px;border-radius:4px;background:var(--fig-sel);color:#0d1a28;font-size:11px;font-weight:700}
.is-flagged .fig-art{outline:1.5px dashed var(--fig-flag);outline-offset:4px;border-radius:4px}
.is-flagged .fig-size{background:var(--fig-flag);color:#2a100b}

/* Sticky notes */
.fig-sticky{position:relative;z-index:2;width:92%;margin:-20px 0 0 8%;padding:14px 14px 16px;font-size:14px;line-height:1.45;color:#1c211d;border-radius:2px;box-shadow:0 12px 24px -12px rgba(0,0,0,.8);transform:rotate(var(--r,-1.5deg))}
.fig-size+.fig-sticky{margin-top:12px}
.fig-frame:nth-child(even) .fig-sticky{--r:1.8deg}
.fig-sticky--yellow{background:#ffe38f}.fig-sticky--pink{background:#ffc7d4}.fig-sticky--mint{background:#c9e6d0}.fig-sticky--lilac{background:#dcd0ff}

/* Comment pin */
.fig-comment{position:absolute;z-index:3;top:44px;right:-20px;display:flex;align-items:flex-start;gap:6px;max-width:190px;margin:0}
.fig-comment .fig-av{border-radius:50% 50% 50% 0;border-color:#fff;width:28px;height:28px}
.fig-comment>span:last-child{padding:8px 10px;border-radius:10px;background:#fff;color:#1c211d;font-size:12px;line-height:1.35;box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}

/* Extra finals under the selected frame */
.fig-more{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:center;margin-top:20px}
.fig-more>span{font-size:11px;color:#9aa39d;line-height:1.3;max-width:7ch}
.fig-more .image-open{border-radius:4px}.fig-more img{aspect-ratio:4/5;object-fit:cover}

/* Figma section around parallel routes */
.fig-section{padding:36px 20px 20px;border:1.5px dashed #56645a;border-radius:12px;background:rgba(201,230,208,.03)}
.fig-section-tab{position:absolute;top:-12px;left:16px;margin:0;padding:2px 10px;border-radius:6px;background:#2a332d;color:var(--blue);font-size:12px;font-weight:700}
.fig-branch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* Connectors */
.fig-link{position:absolute;z-index:1;left:100%;top:calc(20px + 24%);width:var(--fig-gap);height:24px;overflow:visible;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fig-link circle{fill:var(--blue);stroke:none}
.fig-section>.fig-link{top:40%}

/* Multiplayer cursors */
.fig-cursor{position:absolute;z-index:4;pointer-events:none;display:flex;align-items:flex-start}
.fig-cursor svg{width:16px;height:20px;stroke:#111;stroke-width:1}
.fig-cursor b{margin:14px 0 0 -2px;padding:2px 8px;border-radius:4px 10px 10px 10px;font-size:12px;font-weight:700;color:#111;white-space:nowrap}
.fig-cursor--j svg{fill:#ffd76a}.fig-cursor--j b{background:#ffd76a}
.fig-cursor--s svg{fill:var(--blue)}.fig-cursor--s b{background:var(--blue)}

/* Brief → Thinking → Result */
.board-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.board-summary .eyebrow{margin-bottom:12px;font-size:12px}
.board-summary p:not(.eyebrow){font-size:17px;line-height:1.6;color:#d3d8d4;max-width:42ch}
.board-summary div:nth-child(2) p:not(.eyebrow){color:var(--ink)}

/* ---------- Board entrance (plays once) ---------- */
html.motion:not(.motion-paused) .fig-board.is-pending .fig-frame,
html.motion:not(.motion-paused) .fig-board.is-pending .fig-section{opacity:0;transform:translateY(24px) scale(.97)}
html.motion:not(.motion-paused) .fig-board.is-pending .fig-sticky{opacity:0;transform:translateY(-16px) rotate(calc(var(--r,-1.5deg) * 4))}
html.motion:not(.motion-paused) .fig-board.is-pending .fig-wire,
html.motion:not(.motion-paused) .fig-board.is-pending .fig-head{stroke-dashoffset:80}
html.motion:not(.motion-paused) .fig-board.is-pending .fig-comment,
html.motion:not(.motion-paused) .fig-board.is-pending .fig-size{opacity:0;transform:scale(.6)}
html.motion:not(.motion-paused) .fig-board.is-pending .fig-cursor{opacity:0;translate:-60px 40px}
.fig-board.is-live .fig-frame,.fig-board.is-live .fig-section{transition:opacity 500ms var(--m-out),transform 600ms var(--m-out);transition-delay:calc(var(--i) * 260ms)}
.fig-board.is-live .fig-sticky{transition:opacity 300ms ease-out,transform 520ms cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * 260ms + 300ms)}
.fig-wire,.fig-head{stroke-dasharray:80}
.fig-board.is-live .fig-wire,.fig-board.is-live .fig-head{transition:stroke-dashoffset 500ms ease-out;transition-delay:calc(var(--i) * 260ms + 420ms)}
.fig-board.is-live .fig-comment,.fig-board.is-live .fig-size{transition:opacity 240ms ease-out,transform 360ms cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * 260ms + 700ms);transform-origin:0 100%}
.fig-board.is-live .fig-cursor{transition:opacity 300ms ease-out,translate 1400ms var(--m-out);transition-delay:1600ms}
.fig-board.is-live .fig-cursor--j{transition-delay:2000ms}

/* ---------- Homepage hero entrance (the v11 rules targeted the old .intro block) ---------- */
html.motion .home-hero .eyebrow{animation:m-fade var(--m-ui) var(--m-out) both}
html.motion .home-hero .personal-name{animation:m-rise var(--m-hero) var(--m-out) 100ms both}
html.motion .home-hero .h1-line{display:inline-block;animation:m-rise var(--m-hero) var(--m-out) 320ms both}
html.motion .home-hero .hero-copy>p:not(.eyebrow):not(.personal-name),html.motion .home-hero .hero-actions{animation:m-fade var(--m-ui) var(--m-out) 900ms both}
.home-hero .h1-swap>.k-word.is-cycling{color:var(--blue)}

/* Project covers deal like the other image groups */
.project-grid>.deal-pending>.project-cover,.project-grid>.is-dealing>.project-cover{opacity:1}
.is-dealing .project-cover{box-shadow:0 24px 50px -24px rgba(0,0,0,.9)}
@media(hover:hover){html.motion .project-cover{transition:transform var(--m-fast) ease-out}html.motion .project-cover:hover{transform:translateY(-6px)}}

/* Notes inside the v13 compact heads and the hero */
.hero-copy .studio-note{margin:24px 0 0;justify-content:flex-start;flex-direction:row-reverse}
.hero-copy .studio-thought::before{right:auto;left:-6px}.hero-copy .studio-thought::after{right:auto;left:-16px}
.about-compact .studio-note{justify-content:flex-start;margin:8px 0 16px}

/* Pausing motion must never leave something hidden mid-entrance */
html.motion-paused .deal-pending,html.motion-paused .deal-pending>*,html.motion-paused .is-dealing>*,html.motion-paused .v-pending>article,html.motion-paused .is-parked,html.motion-paused .is-hidden{opacity:1!important;visibility:visible!important;transform:none!important}
html.motion-paused .studio-thought{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .fig-canvas{padding:40px 24px}
  .fig-flow,.fig-board[data-layout=branch] .fig-flow{grid-template-columns:1fr;gap:56px;max-width:720px;margin:0 auto}
  .fig-frame{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 24px;align-items:start}
  .fig-frame>.fig-label{grid-column:1/-1}
  .fig-frame>.fig-art{grid-column:1;grid-row:2/5}
  .fig-frame>.fig-size{grid-column:2;margin:0 0 12px;justify-self:start}
  .fig-frame>.fig-sticky,.fig-size+.fig-sticky{grid-column:2;width:100%;margin:8px 0 0}
  .fig-frame>.fig-more{grid-column:2}
  .fig-frame>.fig-comment{position:static;grid-column:2;max-width:none;margin:16px 0 0}.fig-comment>span:last-child{flex:1}
  .fig-link{display:none}
  .fig-flow>li:not(:last-child)::after{content:"";position:absolute;left:22%;top:calc(100% + 10px);height:34px;border-left:1.6px solid var(--blue)}
  .fig-flow>li:not(:last-child)::before{content:"";position:absolute;left:calc(22% - 5px);top:calc(100% + 40px);border-style:solid;border-width:7px 5.8px 0;border-color:var(--blue) transparent transparent}
  .fig-section{padding:36px 16px 16px}
  .fig-branch{grid-template-columns:1fr;gap:32px}
  .fig-tools{display:none}.fig-zoom{margin-left:auto}.fig-people{margin-left:auto}
}
@media(max-width:700px){
  .fig-board{margin:24px -8px 0}
  .fig-canvas{padding:32px 16px}
  .fig-frame{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 14px}
  .fig-sticky{font-size:13px;padding:10px 10px 12px}
  .fig-brief{padding:10px;gap:6px}.fig-brief strong{font-size:16px}.fig-brief ul{font-size:10px}.fig-brief li{padding:3px 0}.fig-brief span{font-size:9px}
  .fig-cursor{display:none}
  .fig-zoom{display:none}
  .fig-bar{font-size:12px}
  .board-summary{grid-template-columns:1fr;gap:24px}
  .board-summary p:not(.eyebrow){font-size:16px}
  .hero-copy .studio-note{display:none}
}
@media(prefers-reduced-motion:reduce){.fig-board *{transition:none!important}}

/* ---------- Wide (landscape) board frame: the Coke moodboard ---------- */
.fig-board[data-layout=linear] .fig-flow:has(.is-wide){grid-template-columns:minmax(0,1fr) minmax(0,1.75fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr)}
.is-wide .fig-art img{aspect-ratio:5/4}

/* ---------- Campaign rollout wall ---------- */
.campaign-rollout h2{max-width:26ch}
.rollout-wall{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 40px;margin-top:48px;align-items:start}
.rollout-group{min-width:0}
.rollout-group .eyebrow{font-size:12px;margin-bottom:12px}
.rollout-group h3{font-size:22px;margin:0 0 8px}
.rollout-head p{color:var(--muted);font-size:15px;line-height:1.6;max-width:46ch;margin:0 0 20px}
.rollout-images{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.rollout-images img{aspect-ratio:4/5;object-fit:cover}
.rollout-images figcaption{font-size:13px}
.rollout-group--key{grid-column:1/8;grid-row:span 2}
.rollout-group--key .rollout-images{grid-template-columns:1fr}
.rollout-group--side{grid-column:8/13}
.rollout-wall--sunshift .rollout-group--ads{grid-column:1/6}
.rollout-group--carousel{grid-column:6/13}
.rollout-group--carousel .rollout-images,.rollout-group--ads:has(figure:nth-child(3)) .rollout-images{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rollout-wall--coke .rollout-group--scenes{grid-column:1/6}
.rollout-wall--coke .rollout-group--ads{grid-column:6/13}
.rollout-group--mood{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:0 48px;padding:32px;border:1px solid #2e3831;border-radius:16px;background:var(--fig-canvas) radial-gradient(circle,var(--fig-dot) 1px,transparent 1.3px) 0 0/20px 20px}
.rollout-group--mood>.rollout-head{grid-column:1;grid-row:1}
.rollout-group--mood>.rollout-notes{grid-column:1;grid-row:2}
.rollout-group--mood>.rollout-images{grid-column:2;grid-row:1/3;grid-template-columns:1fr}
.rollout-group--mood .rollout-images img{aspect-ratio:auto;object-fit:contain}
.rollout-notes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.rollout-notes li{padding:12px 14px;border-radius:2px;background:#ffe38f;color:#1c211d;font-size:14px;line-height:1.45;transform:rotate(-1deg);box-shadow:0 12px 24px -12px rgba(0,0,0,.8)}
.rollout-notes li:nth-child(even){background:#c9e6d0;transform:rotate(1.2deg)}
.rollout-notes strong{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px}
.rollout-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}
.rollout-foot .disclosure{margin:0;max-width:70ch}
@media(hover:hover){html.motion .rollout-images .image-open{transition:transform var(--m-fast) ease-out,box-shadow var(--m-fast) ease-out}html.motion .rollout-images .image-open:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.85)}}

@media(max-width:1180px){.fig-board[data-layout=linear] .fig-flow:has(.is-wide){grid-template-columns:1fr}.is-wide{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
@media(max-width:900px){
  .rollout-wall{grid-template-columns:minmax(0,1fr);gap:48px}
  .rollout-wall>.rollout-group{grid-column:1/-1!important;grid-row:auto}
  .rollout-group--key .rollout-images{max-width:520px}
  .rollout-group--mood{display:block;padding:20px}
  .rollout-group--mood .rollout-notes{grid-template-columns:1fr 1fr;margin:20px 0 0}
}
@media(max-width:560px){
  .rollout-group h3{font-size:20px}
  .rollout-images{gap:12px}
  .rollout-group--carousel .rollout-images,.rollout-group--ads:has(figure:nth-child(3)) .rollout-images{gap:8px}
  .rollout-group--mood .rollout-notes{grid-template-columns:1fr}
  .rollout-foot{display:block}.rollout-foot .disclosure{margin-bottom:16px}
}
.rollout-group--ads img{object-fit:contain;background:#101411}

/* ---------- Studio + process (homepage) ---------- */
.studio-page{position:relative}
.studio-top{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.studio-page .studio-mark{align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
.studio-page .studio-symbol{margin:0 0 24px;min-height:190px}
.studio-page .studio-symbol .m-card{width:140px}
.studio-page .studio-symbol .m-bubble{width:120px;left:calc(100% + 8px);font-size:14px}
.studio-page .studio-mark h2{font-size:clamp(28px,3vw,40px);line-height:1.18}
.studio-page .studio-copy>p{font-size:18px;line-height:1.7;max-width:60ch;margin:0}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.role{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.role .eyebrow{font-size:12px;margin-bottom:16px}
.role ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.role li{position:relative;padding-left:24px;font-size:15px;line-height:1.5}
.role li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:50%;border:2px solid var(--blue)}
.role--me li::before{background:#ffd76a;border-color:#ffd76a}
.role--me .eyebrow{color:#ffd76a}

.process-block{margin-top:80px;padding-top:56px;border-top:1px solid var(--line)}
.process-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.process-head h3{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.02em;line-height:1.15;margin:0}
.process-head>p{color:var(--muted);max-width:52ch;margin:0}
.process-flow{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.p-step{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 20px;border:1px solid #2e3831;border-radius:16px;background:var(--fig-canvas) radial-gradient(circle,var(--fig-dot) 1px,transparent 1.3px) 0 0/20px 20px;min-width:0}
.p-step:not(:last-child)::after{content:"";position:absolute;z-index:1;top:44px;right:-20px;width:16px;height:2px;background:var(--blue)}
.p-step:not(:last-child)::before{content:"";position:absolute;z-index:1;top:40px;right:-22px;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent var(--blue)}
.p-num{font:italic 36px/1 Georgia,serif;color:var(--blue)}
.p-step h3{font-size:19px;margin:0}
.p-step>p:not(.p-proof){font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.p-who{margin:0;display:grid;gap:8px;padding-top:12px;border-top:1px solid #2e3831}
.p-who>div{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;padding:0;border:0}
.p-who dt{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#ffd76a;color:#111}
.p-who>div:nth-child(2) dt{background:var(--blue)}
.p-who dd{font-size:13px;line-height:1.45;color:#d3d8d4;margin:0}
.p-proof{margin:auto 0 0;padding:12px 12px 14px;background:#ffe38f;color:#1c211d;font-size:13px;line-height:1.45;border-radius:2px;transform:rotate(-1.2deg);box-shadow:0 12px 24px -12px rgba(0,0,0,.8)}
.p-step:nth-child(even) .p-proof{transform:rotate(1.2deg);background:#ffc7d4}
.p-proof span{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;opacity:.7}
.process-loop{margin:24px 10% 0;padding:10px 0 0;border:1.5px dashed #56645a;border-top:0;border-radius:0 0 24px 24px;height:36px;display:flex;align-items:flex-end;justify-content:center;gap:8px;font-size:14px;color:var(--blue);transform:translateY(0)}
.process-loop span{font-size:18px}
.process-block .mascot-stage{margin-top:8px}
.process-links{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 40px;margin-top:40px}
.process-links details{max-width:60ch}
@media(max-width:1180px){
  .process-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-step::after,.p-step::before{display:none}
  .process-flow>.p-step:last-child{grid-column:1/-1}
  .process-loop{margin:24px 0 0;border:0;height:auto;justify-content:flex-start}
}
@media(max-width:900px){
  .studio-top,.process-head{grid-template-columns:1fr;gap:24px}
  .studio-page .studio-mark{display:grid;grid-template-columns:110px 1fr;column-gap:20px;align-items:center;padding:24px}
  .studio-page .studio-symbol{grid-row:1/3;min-height:145px;width:110px;margin:0}
  .studio-page .studio-symbol .m-card{width:100px}.studio-page .studio-symbol .m-bubble{display:none}
  .studio-page .studio-mark .eyebrow{margin:0}.studio-page .studio-mark h2{font-size:26px}
  .studio-page .studio-copy>p{font-size:16px}
}
@media(max-width:620px){
  .roles{grid-template-columns:1fr}
  .process-block{margin-top:48px;padding-top:40px}
  .process-flow{grid-template-columns:1fr;gap:28px}
  .process-flow>.p-step:not(:last-child)::after{display:block;top:auto;bottom:-22px;left:36px;right:auto;width:2px;height:14px}
  .process-flow>.p-step:not(:last-child)::before{display:block;top:auto;bottom:-27px;left:31px;right:auto;border-width:7px 6px 0;border-color:var(--blue) transparent transparent}
  .process-links{display:block}.process-links details{margin-top:24px}
}
#studio>#process.process-block{position:relative;top:auto;left:auto;width:auto;height:auto}
main .process-flow p.p-proof{color:#1c211d}
main .process-flow .p-proof span{color:#1c211d;opacity:.65}

/* ---------- Studio quality loop ---------- */
.qa-panel{margin-top:56px;padding:40px;border:1px solid #2e3831;border-radius:20px;background:var(--fig-canvas) radial-gradient(circle,var(--fig-dot) 1px,transparent 1.3px) 0 0/20px 20px}
.qa-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
.qa-head>p{color:var(--muted);margin:0;max-width:52ch}
.qa-flow{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;gap:72px 40px}
.qa-node{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;border:1.5px solid #3a463e;border-radius:14px;background:#1d2420;transition:border-color 240ms ease-out,box-shadow 240ms ease-out,transform 240ms var(--m-out)}
.qa-node strong{font-size:17px}
.qa-node>span:not(.qa-k):not(.qa-gate){font-size:13.5px;line-height:1.5;color:var(--muted)}
.qa-k{font:italic 22px/1 Georgia,serif;color:var(--blue)}
.qa-node ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.qa-node li{position:relative;padding-left:20px;font-size:13px;line-height:1.4;color:#d3d8d4}
.qa-node li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
.qa-node--gate{align-items:center;text-align:center;justify-content:center;border-style:dashed}
.qa-gate{width:26px;height:26px;transform:rotate(45deg);border:2px solid #ffd76a;border-radius:4px;margin:4px 0 6px}
.qa-yes,.qa-no{font-size:12px;font-weight:700;padding:2px 8px;border-radius:4px}
.qa-yes{background:var(--blue);color:#111}.qa-no{background:var(--fig-flag);color:#2a100b}
.qa-node--ready{border-color:var(--blue)}
.qa-node--me{background:#ffd76a;border-color:#ffd76a;color:#141a16}
.qa-node--me>span:not(.qa-k){color:#2a2f2b!important}.qa-node--me .qa-k{color:#6b5410}
.qa-node--fix{grid-column:2/4;grid-row:2;border:1.5px dashed var(--fig-flag);background:rgba(255,143,126,.06)}
.qa-node--fix strong{color:var(--fig-flag)}
/* forward arrows on row 1 */
.qa-node:not(.qa-node--me):not(.qa-node--fix)::after{content:"";position:absolute;top:50%;right:-34px;width:26px;height:2px;background:var(--blue)}
.qa-node:not(.qa-node--me):not(.qa-node--fix)::before{content:"";position:absolute;top:calc(50% - 5px);right:-40px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--blue)}
/* loop arrows: gate down into fix, fix back up into review */
.qa-node--fix::before{content:"";position:absolute;left:22%;top:-66px;height:60px;border-left:2px dashed var(--fig-flag)}
.qa-node--fix::after{content:"";position:absolute;left:calc(22% - 6px);top:-72px;border-style:solid;border-width:0 7px 9px;border-color:transparent transparent var(--fig-flag)}
.qa-down{position:absolute;right:20%;top:-66px;height:60px;border-left:2px dashed var(--fig-flag)}
.qa-down::after{content:"";position:absolute;left:-8px;bottom:-4px;border-style:solid;border-width:9px 7px 0;border-color:var(--fig-flag) transparent transparent}
.qa-example{margin:32px 0 0;padding:14px 16px 16px;max-width:760px;background:#ffc7d4;color:#1c211d!important;font-size:14px;line-height:1.5;border-radius:2px;transform:rotate(-.6deg);box-shadow:0 12px 24px -12px rgba(0,0,0,.8)}
.qa-example span{display:block;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin-bottom:4px}
/* one-time walkthrough highlight */
.qa-node.is-on{border-color:#ffd76a;box-shadow:0 0 0 4px rgba(255,215,106,.18);transform:translateY(-4px)}
.qa-node--fix.is-on{border-color:var(--fig-flag);box-shadow:0 0 0 4px rgba(255,143,126,.2)}
.qa-flow.is-walking .qa-node{opacity:.55}
.qa-flow.is-walking .qa-node.is-on,.qa-flow.is-walking .qa-node.was-on{opacity:1}
.qa-flow.says-no .qa-yes,.qa-flow.says-yes .qa-no{opacity:.3}
@media(max-width:1180px){
  .qa-flow{grid-template-columns:1fr 1fr;gap:40px 24px}
  .qa-node--fix{grid-column:1/-1;grid-row:auto}
  .qa-node::after,.qa-node::before,.qa-down{display:none!important}
}
@media(max-width:900px){.qa-head{grid-template-columns:1fr;gap:16px}.qa-panel{padding:24px}}
@media(max-width:620px){
  .qa-panel{padding:20px 16px;margin-top:40px}
  .qa-flow{grid-template-columns:1fr;gap:16px}
  .qa-node--fix{order:3;margin-left:24px}
  .qa-node--ready{order:4}.qa-node--me{order:5}
}
@media(prefers-reduced-motion:reduce){.qa-node{transition:none}}

/* ---------- Homepage: compact "How I work" ---------- */
.howiwork .process-flow{margin-top:40px}
.p-step--compact{padding:20px 18px;gap:8px}
.p-step--compact>p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.p-step--compact .p-num{font-size:30px}
.howiwork-foot{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:40px;flex-wrap:wrap}
.studio-mini{display:flex;align-items:center;gap:16px;padding:12px 24px 12px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);max-width:640px}
.studio-mini .studio-symbol{position:relative;flex:none;width:92px;min-height:112px;margin:0;font-size:64px;line-height:1}
.studio-mini .studio-symbol .m-card{width:80px}
.studio-mini .studio-symbol .m-bubble{display:none}
.studio-mini .eyebrow{font-size:11px;margin:0 0 4px}
.studio-mini h3{font-size:20px;margin:0 0 4px}
.studio-mini p:not(.eyebrow){font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.howiwork .mascot-stage{margin-top:8px}

/* ---------- process.html ---------- */
.p-tools{margin:0;padding-top:10px;border-top:1px solid #2e3831;font-size:12.5px;line-height:1.5;color:#d3d8d4}
.p-tools span{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:4px;background:#2a332d;color:var(--blue);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.p-proof--link a{color:inherit;font-weight:700}
.process-page .process-flow .p-step>p:not(.p-proof):not(.p-tools){font-size:14px;line-height:1.55;color:var(--muted);margin:0}
.process-page .qa-panel{margin-top:0}
.studio-page details{margin-top:24px}
@media(max-width:700px){
  .howiwork-foot{display:block}.howiwork-foot .primary{margin-top:20px}
  .studio-mini{padding:12px 16px 12px 8px}
  .studio-mini .studio-symbol{width:72px;min-height:96px}.studio-mini .studio-symbol .m-card{width:64px}
}
.studio-mini .studio-symbol{background:var(--blue);border-radius:12px;display:grid;place-items:center;overflow:hidden}.studio-mini .studio-symbol .m-card{position:relative;left:auto;bottom:auto}

/* ---------- Homepage: Ads + Social ---------- */
.ads-intro{color:var(--muted);max-width:46ch;margin:0}
#ads .compact-head,#social .compact-head{align-items:end}
.ads-sub{margin-top:48px}
.ads-sub+.ads-sub{margin-top:72px;padding-top:48px;border-top:1px solid var(--line)}
.ads-subhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 32px;flex-wrap:wrap;margin-bottom:24px}
.ads-subhead h3{font-size:24px;margin:0 0 4px}
.ads-subhead p{color:var(--muted);margin:0;font-size:15px}
.ad-picks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.ad-picks .image-open,.social-slides .image-open,.social-grid .image-open{aspect-ratio:4/5;background:#101411}
.ad-picks img,.social-slides img,.social-grid img{width:100%;height:100%;object-fit:contain}
.social-grid img{object-fit:cover}
.ad-picks figcaption,.social-grid figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--ink)}
.ad-angle{display:inline-block;margin:0 8px 6px 0;padding:2px 8px;border-radius:4px;background:#2a332d;color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}
.social-carousel{margin-top:40px;padding:24px;border:1px solid #2e3831;border-radius:16px;background:var(--fig-canvas) radial-gradient(circle,var(--fig-dot) 1px,transparent 1.3px) 0 0/20px 20px}
.social-carousel>.ad-angle{margin-bottom:16px}
.social-slides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:900px}
.social-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px}
@media(hover:hover){html.motion :is(.ad-picks,.social-slides,.social-grid) .image-open{transition:transform var(--m-fast) ease-out,box-shadow var(--m-fast) ease-out}html.motion :is(.ad-picks,.social-slides,.social-grid) .image-open:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.85)}}
@media(max-width:1000px){.ad-picks,.social-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
  .ad-picks,.social-grid{grid-template-columns:1fr 1fr;gap:28px 14px}
  .ad-picks figcaption,.social-grid figcaption{font-size:13.5px}
  .ads-sub+.ads-sub{margin-top:48px;padding-top:32px}
  .social-carousel{padding:14px}.social-slides{gap:8px}
  .ads-subhead h3{font-size:21px}
}

/* ---------- Five-up video rows + fashion stills ---------- */
#ads .featured-videos,.ugc-videos{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
#ads .featured-videos h3{font-size:18px}
#ads .featured-videos article>p:last-child{font-size:14px}
.ugc-videos video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#090a09;border-radius:12px;display:block}
.ugc-videos p{margin:10px 0 0}
.ugc-sub{margin-top:40px}
.ugc-sub+.ugc-sub{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.fashion-stills{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:28px}
.fashion-stills .image-open{aspect-ratio:9/16;background:#101411}
.fashion-stills img{width:100%;height:100%;object-fit:cover}
.fashion-stills figcaption{font-size:13.5px}
@media(max-width:1000px){#ads .featured-videos,.ugc-videos{grid-template-columns:repeat(5,42%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px}#ads .featured-videos article,.ugc-videos article{scroll-snap-align:start}.fashion-stills{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){#ads .featured-videos,.ugc-videos{grid-template-columns:repeat(5,72%)}.fashion-stills{grid-template-columns:1fr 1fr;gap:16px 12px}.fashion-stills figure:last-child{grid-column:1/-1;max-width:50%;justify-self:center;width:100%}}

/* ---------- v14 critique fixes: one system across every page ---------- */
/* The library's old #video-work background must not tint the homepage block that shares the id */
#ads #video-work{background:none}
/* One section-header component: headline left, supporting line or link right */
.compact-head,.section-head,.process-head,.qa-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px 48px;align-items:end;margin:0 0 40px}
.compact-head>:not(:first-child),.section-head>:not(:first-child),.process-head>:not(:first-child),.qa-head>:not(:first-child){max-width:46ch;margin:0;color:var(--muted)}
.compact-head>a.text-link{justify-self:end;color:var(--ink)}
.compact-head .eyebrow,.section-head .eyebrow,.process-head .eyebrow,.qa-head .eyebrow{margin:0 0 16px}
.compact-head h2,.qa-head h2{max-width:24ch;margin:0}
.campaign-journey>.compact-head,.campaign-rollout>.compact-head{margin-bottom:32px}
/* Three corner sizes: 4px board frames, 12px images and cards, 16px panels */
.qa-panel{border-radius:16px}.qa-node{border-radius:12px}
/* Nothing readable below 12px */
.fig-brief li,.fig-brief span,.p-tools span,.p-proof span,.p-who dt,.ad-angle,.fig-size,.qa-yes,.qa-no,.fig-more>span,.rollout-notes strong,.studio-mini .eyebrow,.fig-label,.fig-section-tab,.board-summary .eyebrow,.role .eyebrow,.rollout-group .eyebrow{font-size:12px!important}
/* Step titles are h3 now (no heading-level skip) */
.p-step h3{font-size:19px;line-height:1.3;margin:0}
.p-step--compact h3{font-size:18px}
/* Case-study endings */
.next-project{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin:24px;padding:32px 40px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.next-project>a:first-child{display:grid;gap:4px;text-decoration:none}
.next-project .eyebrow{margin:0}
.next-project strong{font-size:clamp(26px,3vw,36px);font-weight:400;letter-spacing:-.02em}
.next-project>a:first-child span:last-child{color:var(--muted)}
.next-project>a:first-child:hover strong{color:var(--blue)}
.finished-ads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:860px}
.finished-ads .image-open{aspect-ratio:1/1}
.finished-ads figcaption{margin-top:12px;font-size:15px;color:var(--ink)}
.ugc-more{display:inline-block;margin-top:24px}
.ugc-personal-head{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
@media(max-width:700px){
  .compact-head,.section-head,.process-head,.qa-head{grid-template-columns:1fr;gap:12px;margin-bottom:28px}
  .compact-head>a.text-link{justify-self:start}
  .next-project{margin:16px;padding:24px}
  .finished-ads{grid-template-columns:1fr;gap:28px}
}
.qa-example span{font-size:12px}
@media(max-width:700px){
  /* Phone length: projects become a swipe row, the compact process becomes two columns */
  #work .project-grid{display:grid;grid-template-columns:repeat(3,82%);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  #work .project-card{scroll-snap-align:start}
  #work .project-cover{max-width:none;margin-bottom:12px}
  #work .project-card h3{font-size:22px}
  #work .project-card>p:not(.eyebrow):not(.small){font-size:14px}
  .howiwork .process-flow{grid-template-columns:1fr 1fr;gap:12px}
  .howiwork .process-flow>.p-step:last-child{grid-column:1/-1}
  .howiwork .process-flow>.p-step::before,.howiwork .process-flow>.p-step::after{display:none!important}
  .howiwork .p-step--compact{padding:16px 14px}
}
/* Phones show the six most distinct static ads; the full eight on larger screens */
@media(max-width:700px){.ad-picks>figure:nth-child(n+7){display:none}}
.ads-links{display:flex;flex-wrap:wrap;gap:8px 24px}
#formats .explorer{padding-bottom:0}
#formats .research-path{margin-bottom:8px}
#system .primary{margin-top:8px}

/* ---------- Process page: the same process, applied ---------- */
.applied{border:1px solid #2e3831;border-radius:16px;background:var(--fig-canvas) radial-gradient(circle,var(--fig-dot) 1px,transparent 1.3px) 0 0/20px 20px;padding:32px}
.applied-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.applied-tabs [role=tab]{min-height:44px;padding:8px 18px;border-radius:24px;border:1px solid #3a463e;background:transparent;color:var(--ink);font-size:15px}
.applied-tabs [role=tab][aria-selected=true]{background:var(--blue);border-color:var(--blue);color:#132018;font-weight:700}
.applied-tabs [role=tab]:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.applied-lede{font-size:18px;line-height:1.6;max-width:62ch;margin:0 0 28px;color:var(--ink)}
.applied-panel h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 16px}
.mini-steps{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.mini-steps li{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:18px;border:1px solid #3a463e;border-radius:12px;background:#1d2420}
.mini-steps .p-num{font-size:24px}
.mini-steps strong{display:block;font-size:16px;margin-bottom:4px}
.mini-steps p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.mini-steps--strategy li:nth-child(3){background:#232b26;border-color:var(--blue)}
.applied-branches{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;padding-top:28px;border-top:1px dashed #56645a}
.applied-branches .mini-steps{grid-template-columns:1fr}
.applied-note{margin:28px 0 0}
@media(max-width:700px){.applied{padding:20px 16px}.applied-branches{grid-template-columns:1fr}.applied-lede{font-size:16px}.applied-tabs [role=tab]{font-size:14px;padding:8px 14px}}

/* ---------- Ad strategy (Eureka) ---------- */
.image-open{position:relative}
.has-strategy{position:absolute;z-index:3;top:-11px;left:12px;padding:3px 9px;border-radius:12px;background:#ffd76a;color:#141a16;font:700 12px/1.4 Arial,sans-serif;letter-spacing:.02em;box-shadow:0 6px 14px -6px rgba(0,0,0,.7)}
.strategy-list{margin:0;display:grid;gap:0}
.strategy-list>div{display:grid;grid-template-columns:minmax(120px,.34fr) 1fr;gap:4px 16px;padding:10px 0;border-top:1px solid #2e3831}
.strategy-list dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.strategy-list dd{margin:0;font-size:14px;line-height:1.5;color:var(--ink)}
.lightbox-strategy{margin-top:20px;padding-top:16px;border-top:1px solid #3a463e}
.lightbox-strategy .eyebrow{font-size:12px;margin:0 0 8px}
.video-strategy{margin-top:12px;border:1px solid #2e3831;border-radius:12px;padding:10px 14px;background:var(--surface)}
.video-strategy summary{cursor:pointer;font-size:14px;font-weight:700;color:#ffd76a;min-height:32px;display:flex;align-items:center}
.video-strategy .strategy-list>div{grid-template-columns:1fr}
.eureka-steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;padding:0;counter-reset:e}
.eureka-steps li{counter-increment:e;padding:8px 14px;border:1px solid #3a463e;border-radius:24px;font-size:14px;background:#1d2420}
.eureka-steps li::before{content:counter(e,decimal-leading-zero) " · ";color:var(--blue);font-weight:700}
.strategy-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start;padding:32px;border:1px solid #2e3831;border-radius:16px;background:var(--fig-canvas) radial-gradient(circle,var(--fig-dot) 1px,transparent 1.3px) 0 0/20px 20px}
.strategy-card .image-open{aspect-ratio:1/1}
.strategy-card .eyebrow{margin:0 0 12px}
.strategy-results{margin:16px 0 0;padding:12px 14px;border:1px dashed #56645a;border-radius:12px;font-size:14px;color:var(--muted)}
.strategy-results span{display:inline-block;margin-right:10px;padding:1px 8px;border-radius:4px;background:#2a332d;color:var(--blue);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.applied-eureka{margin:24px 0 0;font-size:15px}
@media(max-width:800px){.strategy-card{grid-template-columns:1fr;padding:20px 16px;gap:20px}.strategy-card figure{max-width:420px}.strategy-list>div{grid-template-columns:1fr;gap:2px}}
:is(figure,li,article,div):has(> .has-strategy),.ad-picks>figure,.finished-ads>figure,.rollout-images>figure,.strategy-card figure{position:relative}