/* Influencer Marketing · a constellation of creators in the hero, reach as rings that light up outward,
   casting as a ledger with drawn checks, every form of collaboration on one sheet, the campaign as a runway */

/* ——— hero ——— */
.inf-hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;
  padding:clamp(140px,15vw,190px) var(--gutter) clamp(70px,8vw,110px);max-width:1440px;margin:0 auto}
.inf-hero .col{display:grid;gap:clamp(22px,3vw,34px)}
.inf-hero h1{margin:0;font:300 clamp(52px,8.2vw,132px)/.92 var(--serif);letter-spacing:-.03em}
.sky{position:relative;justify-self:end;width:100%;max-width:620px;aspect-ratio:1}
.sky canvas{position:absolute;inset:0;width:100%;height:100%}
.sky .core{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--champagne);box-shadow:0 0 0 1px rgba(201,184,148,.35)}
.sky .halo{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;border:1px solid var(--champagne);animation:inf-halo 3.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes inf-halo{0%{transform:scale(.4);opacity:.8}100%{transform:scale(3.4);opacity:0}}
.sky .core-l{position:absolute;left:50%;top:calc(50% + 16px);transform:translateX(-50%);font:500 8.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
@media (max-width:860px){.inf-hero{grid-template-columns:1fr}.sky{justify-self:start;max-width:460px}}

/* ——— intro ——— */
.inf-intro{max-width:1440px;margin:0 auto;padding:clamp(80px,10vw,150px) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(30px,6vw,110px);border-top:1px solid var(--line)}
@media (max-width:860px){.inf-intro{grid-template-columns:1fr}}

/* ——— reach: rings that light up outward as the page scrolls ——— */
.reach{border-top:1px solid var(--line);background:var(--bg-2)}
.reach .pin{height:260vh}                                   /* the chart stays put while the four rings light up, one per quarter of the scroll */
.reach .sticky{position:sticky;top:0;min-height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:center;
  max-width:1440px;margin:0 auto;padding:clamp(90px,10vw,120px) var(--gutter) 40px}
.reach-copy{display:grid;gap:clamp(22px,3vw,34px)}
.reach-copy p{margin:0;color:var(--ink-2);max-width:48ch}
.tiers{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tiers li{display:grid;grid-template-columns:3ch 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);cursor:default}
.tiers .k{font:500 10px var(--sans);letter-spacing:.18em;color:var(--ink-3);padding-top:.7em;transition:color .6s var(--ease)}
.tiers b{display:block;font:300 clamp(20px,2vw,28px)/1.1 var(--serif);color:var(--ink-2);transition:color .6s var(--ease)}
.tiers small{display:block;font-size:14px;line-height:1.5;color:var(--ink-3);margin-top:4px;transition:color .6s var(--ease)}
.tiers li.on .k{color:var(--champagne)}.tiers li.on b{color:var(--ink)}.tiers li.on small{color:var(--ink-2)}
.orbit{width:100%;max-width:780px;justify-self:center}
.orbit svg{width:100%;height:auto;overflow:visible}
.orbit .ring{fill:none;stroke:rgba(236,232,225,.16);stroke-width:1;transition:stroke .9s var(--ease)}
.orbit .spoke{stroke:rgba(201,184,148,0);stroke-width:.7;transition:stroke .9s var(--ease)}
.orbit .node{fill:rgba(236,232,225,.3);transition:fill .9s var(--ease),opacity .8s var(--ease)}
.orbit text{font:500 8.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;fill:var(--ink-3);transition:fill .9s var(--ease)}
.orbit .ring-l{font-size:9px;letter-spacing:.28em}
.orbit g.on .ring{stroke:rgba(201,184,148,.75)}
.orbit g.on .spoke{stroke:rgba(201,184,148,.3)}
.orbit g.on .node{fill:var(--champagne)}
.orbit g.on text{fill:var(--ink)}
.orbit g.on .ring-l{fill:var(--champagne)}
.orbit .core{fill:var(--champagne)}
.orbit .core-l{fill:var(--ink-2);letter-spacing:.24em}
.orbit .halo{fill:none;stroke:var(--champagne);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:inf-halo 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.js .orbit[data-reveal] .ring{stroke-dasharray:2500;stroke-dashoffset:2500;transition:stroke-dashoffset 2.4s var(--ease) var(--d,0s),stroke .9s var(--ease)}
.js .orbit[data-reveal] .node,.js .orbit[data-reveal] .spoke,.js .orbit[data-reveal] text{opacity:0;transition:opacity .8s var(--ease) var(--d,0s),fill .9s var(--ease),stroke .9s var(--ease)}
.js .orbit.in .ring{stroke-dashoffset:0}
.js .orbit.in .node,.js .orbit.in .spoke,.js .orbit.in text{opacity:1}
@media (max-width:860px){.reach .pin{height:auto}.reach .sticky{position:static;grid-template-columns:1fr;min-height:0;padding-bottom:clamp(70px,10vw,110px)}.orbit{max-width:560px;justify-self:start}}

/* ——— casting: a ledger of criteria, each checked as it comes into view ——— */
.casting{max-width:1440px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gutter)}
.casting-head,.runway-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:end}
.casting-head .label,.runway-head .label,.ways .label{display:block;margin-bottom:22px}
.casting-head p,.runway-head p{margin:0;color:var(--ink-2);max-width:48ch}
.casting-head p{font:300 clamp(22px,2.2vw,30px)/1.3 var(--serif);color:var(--ink)}
.crit{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,5vw,90px);border-top:1px solid var(--line)}
.crit li{display:grid;grid-template-columns:28px 1fr;gap:18px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.crit svg{width:22px;height:22px;margin-top:6px;overflow:visible}
.crit svg circle{fill:none;stroke:var(--line);stroke-width:1}
.crit svg path{fill:none;stroke:var(--champagne);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .9s var(--ease) var(--d,0s)}
.crit li.in svg path{stroke-dashoffset:0}
.crit h3{margin:0 0 6px;font:300 clamp(22px,2.2vw,30px)/1.1 var(--serif)}
.crit p{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:860px){.casting-head{grid-template-columns:1fr}.crit{grid-template-columns:1fr}}

/* ——— ways of working: six forms on one sheet ——— */
.ways{border-top:1px solid var(--line);background:var(--bg-2)}
.ways .wrap{padding-top:clamp(90px,11vw,160px);padding-bottom:clamp(90px,11vw,160px)}
.ways ol{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,4vw,60px);border-top:1px solid var(--line)}
.ways li{padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start}
.ways .n{font:500 10px var(--sans);letter-spacing:.18em;color:var(--champagne)}
.ways h3{margin:0;font:300 clamp(24px,2.6vw,38px)/1.1 var(--serif);transition:color .6s var(--ease)}
.ways li:hover h3{color:var(--champagne)}
.ways p{margin:0;color:var(--ink-2);font-size:15px;max-width:32ch}
@media (max-width:960px){.ways ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ways ol{grid-template-columns:1fr}}

/* ——— runway: six steps on one line ——— */
.runway{max-width:1440px;margin:0 auto;padding:clamp(90px,11vw,160px) var(--gutter)}
.steps{list-style:none;margin:clamp(40px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.steps::after{content:"";position:absolute;left:0;top:9px;height:1px;width:100%;background:var(--champagne);transform:scaleX(0);transform-origin:0 50%;transition:transform 2.2s var(--ease) .2s}
.steps.in::after{transform:scaleX(1)}
.steps li{position:relative;padding:34px 18px 0 0}
.steps li::before{content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;border:1px solid var(--ink-3);background:var(--bg);transition:border-color .6s var(--ease),background .6s var(--ease);transition-delay:var(--d,0s)}
.steps.in li::before{border-color:var(--champagne);background:var(--champagne)}
.steps .n{font:500 10px var(--sans);letter-spacing:.18em;color:var(--ink-3)}
.steps h3{margin:6px 0 8px;font:300 clamp(22px,2.2vw,30px)/1.1 var(--serif)}
.steps p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55;max-width:22ch}
@media (max-width:960px){
  .runway-head{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
  .steps::before,.steps::after{display:none}
  .steps li{padding-top:22px;border-top:1px solid var(--line)}
  .steps li::before{top:-6px}
}

.quote{padding:clamp(90px,12vw,170px) var(--gutter);max-width:1440px;margin:0 auto;border-top:1px solid var(--line)}
.quote blockquote{margin:0;font:300 clamp(34px,5vw,76px)/1.05 var(--serif);letter-spacing:-.015em;max-width:18ch;text-wrap:balance}