/* Naspen — site stylesheet. Design system: the "Stillness Engine" concept, applied site-wide. */

@font-face{font-family:"Garmani";src:url(/assets/fonts/Garmani.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"Helvena";src:url(/assets/fonts/Helvena-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Helvena";src:url(/assets/fonts/Helvena-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Helvena";src:url(/assets/fonts/Helvena-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Helvena";src:url(/assets/fonts/Helvena-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

/* Tokens — a studio's light: cyclorama white, velvet black, the 18% gray card, one signal. */
:root{
  --cyc:#FFFFFF;
  --velvet:#0E0E0E;
  --gray:#767676;          /* 18% middle gray; also the exact AA floor on white */
  --haze:#CFCFC9;
  --focus:#16955A;         /* focus-confirm green: the camera's "locked" signal. Naspen's only colour. */
  --focus-ink:#0E7A49;     /* the same signal, for small text on white */
  --focus-halo:rgba(22,149,90,.18);
  /* the feed's own colours (notification pink, link blue) live only in the noise sprites, in the script */
  --rule:rgba(14,14,14,.11);
  --signal:"Garmani","Iowan Old Style",Georgia,serif;
  --sans:"Helvena",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,4vw,48px);
  --shell:min(1240px,calc(100% - 2*var(--gut)));
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--cyc);color:var(--velvet);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
p,li,dd,figcaption{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.shell{width:var(--shell);margin-inline:auto}
.label{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

/* ---------- Nav ---------- */
.nav{position:absolute;inset:0 0 auto;z-index:10}
.nav-in{width:var(--shell);margin-inline:auto;height:76px;display:flex;align-items:center;gap:20px}
.mark{font:700 1.4rem/1 var(--sans);letter-spacing:-.035em}
.mark span{color:var(--focus)}
.links{margin-left:auto;display:flex;align-items:center;gap:28px}
.links>a,.dd-t{font:400 .92rem/1 var(--sans);color:var(--velvet);opacity:.7;background:none;border:0;cursor:pointer;transition:opacity .2s}
.links>a:hover,.dd-t:hover,.dd:focus-within .dd-t{opacity:1}
.dd{position:relative}
.dd::before{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:16px}
.dd-m{position:absolute;top:calc(100% + 14px);left:-14px;min-width:230px;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:8px;box-shadow:0 22px 44px -22px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .2s,transform .2s,visibility .2s}
.dd:hover .dd-m,.dd:focus-within .dd-m{opacity:1;visibility:visible;transform:none}
.dd-m a{display:block;padding:10px 12px;border-radius:8px;font-size:.92rem}
.dd-m a:hover{background:#f3f3f1}
.cta{margin-left:24px;font:500 .9rem/1 var(--sans);background:var(--velvet);color:#fff;padding:12px 18px;border-radius:999px;white-space:nowrap}
.mm{display:none}
@media (max-width:980px){
  .links{display:none}
  .mm{display:block;margin-left:auto}
  .cta{margin-left:0}
  .mm summary{list-style:none;cursor:pointer;font:500 .9rem/1 var(--sans);padding:12px 4px}
  .mm summary::-webkit-details-marker{display:none}
  .mm-p{position:absolute;left:var(--gut);right:var(--gut);top:70px;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:18px 20px;box-shadow:0 22px 44px -22px rgba(0,0,0,.22);display:grid;gap:2px}
  .mm-p .label{margin:10px 0 4px}
  .mm-p a{padding:9px 0;font-size:1.05rem}
}

/* ---------- Hero: the stillness field ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:center;background:var(--cyc)}
.noise{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 76px,#000 150px,#000 calc(100% - 210px),transparent calc(100% - 124px));
  mask-image:linear-gradient(180deg,transparent 0,transparent 76px,#000 150px,#000 calc(100% - 210px),transparent calc(100% - 124px))}
.hero-c{position:relative;z-index:1;text-align:center;padding:0 var(--gut)}
.signal{font:400 clamp(2.7rem,5.5vw,6.4rem)/1.04 var(--signal);letter-spacing:-.01em;max-width:16em;margin:0 auto;text-wrap:balance}
.br-d{display:none}
@media (min-width:900px){.br-d{display:inline}}
.js .signal{opacity:0}
.js .signal.ready{opacity:1}
.signal .w{display:inline-block;white-space:nowrap}
.signal .c{display:inline-block}
.signal-sub{margin-top:1.7rem;font:400 clamp(1rem,1.35vw,1.18rem)/1.5 var(--sans);color:var(--gray);text-wrap:balance}
.js .signal-sub{opacity:0}
.hud{position:absolute;left:var(--gut);bottom:clamp(22px,4vw,40px);z-index:2;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray);display:grid;gap:10px;width:220px}
.hud-row{display:flex;justify-content:space-between;gap:24px}
.hud b{font-weight:500;color:var(--velvet);font-variant-numeric:tabular-nums}
.hud-bar{height:2px;background:var(--haze);overflow:hidden}
.hud-bar i{display:block;height:100%;background:var(--velvet);clip-path:inset(0 100% 0 0)}
.hud-tally{display:flex;align-items:center;gap:8px;color:var(--gray)}
.hud-tally i{width:6px;height:6px;border-radius:50%;background:var(--haze);transition:background .4s,box-shadow .4s}
.hero.in-focus .hud-tally{color:var(--focus-ink)}
.hero.in-focus .hud-tally i{background:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
.signal .c.dot{transition:color .45s ease}
.hero.in-focus .signal .c.dot{color:var(--focus)}
.exhibit .dot,.close .dot{color:var(--focus)}
.hint{position:absolute;right:var(--gut);bottom:clamp(22px,4vw,40px);z-index:2;display:flex;align-items:center;gap:10px;font:500 15px/1 var(--sans)}
.hint i{width:7px;height:7px;border-radius:50%;background:var(--velvet)}
html:not(.js) .hud,html:not(.js) .hint{display:none}
@media (max-width:640px){
  .hud{width:150px;gap:8px;font-size:10px}
  .hint{font-size:14px}
}

/* ---------- Exhibit ---------- */
.exhibit{position:relative;background:var(--velvet);color:#fff;overflow:hidden}
.exhibit img{width:100%;height:auto;aspect-ratio:1672/941;object-fit:cover}
.exhibit::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.5),rgba(10,10,10,0) 55%);pointer-events:none}
.ex-copy{position:absolute;left:0;right:0;bottom:clamp(28px,6vw,84px);margin-inline:auto;z-index:1}
.ex-copy .label{color:rgba(255,255,255,.6)}
.ex-a{margin-top:1rem;font:300 clamp(1.35rem,2.5vw,2.35rem)/1.2 var(--sans);letter-spacing:-.012em;color:rgba(255,255,255,.84);max-width:17em}
.ex-b{margin-top:.35rem;font:400 clamp(2.5rem,5.6vw,5.2rem)/1.02 var(--signal);color:#fff;max-width:8.6em;text-wrap:balance}
@media (max-width:760px){
  .exhibit img{aspect-ratio:auto;height:86svh;object-position:73% center}
  .exhibit::after{background:linear-gradient(180deg,rgba(10,10,10,0) 38%,rgba(10,10,10,.88))}
}

/* ---------- Sections ---------- */
.sec{padding:clamp(96px,13vw,176px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(48px,7vw,96px)}
.sec-head .label{grid-column:1/-1}
h2{font:400 clamp(2.2rem,4.2vw,4rem)/1.04 var(--sans);letter-spacing:-.035em}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.55;color:var(--gray);max-width:32em}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;align-items:start}}

/* The math */
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .axis{fill:none;stroke:var(--rule);stroke-width:1.5}
.chart .chase{fill:none;stroke:var(--gray);stroke-width:2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s linear}
.chart .build{fill:none;stroke:var(--focus);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.4s cubic-bezier(.75,0,.25,1) .6s}
.chart text{font:500 13px var(--mono);letter-spacing:.12em;opacity:0;transition:opacity .8s}
.chart .t-chase{fill:var(--gray)}
.chart .t-axis{fill:var(--gray)}
.chart .t-build{fill:var(--focus-ink)}
.chart.in .chase,.chart.in .build{stroke-dashoffset:0}
.chart.in .t-axis{opacity:1}
.chart.in .t-chase{opacity:1;transition-delay:1.3s}
.chart.in .t-build{opacity:1;transition-delay:3.8s}
.chart figcaption{margin-top:20px}
@media (max-width:760px){
  .chart text{font-size:38px}
  .chart .chase{stroke-width:5}
  .chart .build{stroke-width:8}
  .chart .axis{stroke-width:4}
}

/* Work */
.formats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px)}
@media (max-width:1100px) and (min-width:861px){.formats{grid-template-columns:repeat(2,1fr);row-gap:56px}}
.fmt-img{overflow:hidden;aspect-ratio:4/3;background:#eceae6}
.fmt-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.fmt:hover .fmt-img img{transform:scale(1.04)}
.fmt h3{margin-top:22px;display:flex;justify-content:space-between;gap:16px;font:500 1.28rem/1.2 var(--sans);letter-spacing:-.015em}
.fmt h3::after{content:"→";color:var(--gray);transition:transform .3s var(--ease),color .3s}
.fmt:hover h3::after{transform:translateX(4px);color:var(--velvet)}
.fmt p{margin-top:8px;color:var(--gray);font-size:1rem;line-height:1.5;max-width:30em}
@media (max-width:860px){.formats{grid-template-columns:1fr;gap:48px}}

/* Who it's for */
.who-grid{display:grid;grid-template-columns:1fr 1fr}
.who-col{padding-right:clamp(0px,4vw,56px)}
.who-col+.who-col{border-left:1px solid var(--rule);padding-left:clamp(24px,4vw,56px);padding-right:0}
.who-col h3{margin-top:14px;font:400 clamp(1.7rem,2.8vw,2.5rem)/1.08 var(--sans);letter-spacing:-.03em;max-width:13em}
@media (min-width:861px){.who-col h3{min-height:2.16em}}
.who-col ul{list-style:none;margin-top:32px}
.who-col li{padding:16px 0;border-top:1px solid var(--rule);font-size:1.02rem;line-height:1.5}
.more{display:inline-block;margin-top:26px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}
@media (max-width:860px){
  .who-grid{grid-template-columns:1fr}
  .who-col+.who-col{border-left:0;padding-left:0;margin-top:64px}
  .who-col+.who-col{margin-top:72px;padding-top:44px;border-top:1px solid var(--velvet)}
  .who-col{padding-right:0}
}

/* Proof */
.proof{padding-top:0}
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px clamp(24px,5vw,80px);align-items:baseline;margin-top:22px;padding-top:30px;border-top:1px solid var(--rule)}
.proof-k{font-size:1.1rem;color:var(--gray)}
.clients{list-style:none;display:flex;flex-wrap:wrap;gap:12px clamp(28px,5vw,72px)}
.clients li{font:500 clamp(2rem,4.4vw,3.8rem)/1.05 var(--sans);letter-spacing:-.04em}
.proof-note{margin-top:clamp(40px,5vw,64px);max-width:36em;font-size:1.15rem;line-height:1.55;color:var(--gray)}
.proof-note a{color:var(--velvet);border-bottom:1px solid currentColor}
@media (max-width:860px){.proof-grid{grid-template-columns:1fr}}

/* Close */
.close{background:var(--velvet);color:#fff}
.close-in{text-align:center;padding:clamp(120px,16vw,220px) 0 clamp(96px,12vw,160px)}
.close-h{font:400 clamp(3rem,7vw,7.6rem)/1 var(--signal);letter-spacing:-.01em;max-width:14em;margin:0 auto;text-wrap:balance}
.btn{display:inline-block;margin-top:clamp(40px,5vw,56px);background:#fff;color:var(--velvet);font:500 1rem/1 var(--sans);padding:18px 30px;border-radius:999px;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.close-note{margin-top:22px;font:500 12px/1.6 var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.55)}

@media (prefers-reduced-motion:reduce){
  .chart .chase,.chart .build,.chart text{transition:none}
  .fmt-img img,.btn,.dd-m,.signal .c.dot,.hud-tally i{transition:none}
}

/* ============================================================
   Site system — inner pages, journal, contact, footer
   Same rules as the home: one green (points of light only),
   Garmani only for each page's signature line, mono for labels.
   ============================================================ */
.dot{color:var(--focus)}
.links>a[aria-current="page"]{opacity:1;font-weight:500}
.dd-m a[aria-current="page"]{font-weight:500}
.mm-p a[aria-current="page"]{font-weight:500}

/* ---------- Inner page hero (light) ---------- */
.page-hero{padding:clamp(150px,22vh,220px) 0 clamp(56px,8vw,96px);background:var(--cyc)}
.ph-index{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.ph-title{margin-top:22px;font:400 clamp(2.6rem,6vw,5.6rem)/1.04 var(--signal);letter-spacing:-.01em;max-width:15em;text-wrap:balance}
.ph-sub{margin-top:24px;font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.5;color:var(--gray);max-width:36em;text-wrap:pretty}
.art-back{display:inline-flex;gap:8px;margin-bottom:28px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.art-back:hover{color:var(--velvet)}
.ph-title.art-h1{font-size:clamp(2.3rem,4.8vw,4.2rem);max-width:17em}
.ph-title.art-h1.is-long{font-size:clamp(2rem,4.2vw,3.6rem);max-width:19em}
.art-dek{margin-top:22px;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5;color:var(--gray);max-width:36em}
.art-meta{margin-top:26px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}

/* ---------- Image band ---------- */
.media-band{overflow:hidden;background:var(--velvet)}
.media-band img{display:block;width:100%;height:clamp(300px,56vh,600px);object-fit:cover}

/* ---------- Section rhythm ---------- */
.section{padding:clamp(96px,13vw,176px) 0}
.page-hero + .section,.page-hero + .sec{padding-top:clamp(8px,2vw,24px)}
.pg-lede{font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.42;letter-spacing:-.01em;max-width:30em;text-wrap:pretty}
.pg-lede em{font-style:normal;color:var(--gray)}

/* ---------- Rows: title | text + plain list ---------- */
.rows{margin-top:clamp(48px,7vw,88px)}
.rowi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:14px clamp(24px,5vw,72px);padding:clamp(30px,4vw,46px) 0;border-top:1px solid var(--rule)}
.rowi h3{font:500 clamp(1.4rem,2.2vw,1.85rem)/1.15 var(--sans);letter-spacing:-.02em}
.rowi p{font-size:1.07rem;line-height:1.62;color:#2B2B2B;max-width:36em}
.ticks{list-style:none;margin-top:18px;display:grid;gap:9px}
.ticks li{position:relative;padding-left:22px;font-size:.98rem;line-height:1.5;color:var(--gray)}
.ticks li::before{content:"";position:absolute;left:0;top:.66em;width:10px;height:1px;background:var(--velvet)}
@media (max-width:860px){.rowi{grid-template-columns:1fr}}

/* ---------- Notes and the one-line "ask" ---------- */
.note{margin-top:clamp(40px,6vw,72px);padding:26px 28px;border:1px solid var(--rule);border-radius:14px;max-width:44rem}
.note .label{margin-bottom:10px}
.note p{font-size:1.05rem;line-height:1.58}
.note a,.ulink{border-bottom:1px solid currentColor;padding-bottom:1px}
.ask{margin-top:clamp(48px,7vw,80px);display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;padding-top:28px;border-top:1px solid var(--rule)}
.ask p{color:var(--gray);font-size:1.03rem}
.ask a{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- Process steps (a real sequence, so numbered) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(40px,6vw,72px)}
.step{padding-top:22px;border-top:1px solid var(--velvet)}
.step-no{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--gray)}
.step h3{margin-top:14px;font:500 1.3rem/1.2 var(--sans);letter-spacing:-.015em}
.step p{margin-top:10px;font-size:.98rem;line-height:1.55;color:var(--gray)}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Photo cards ---------- */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,28px);margin-top:20px}
.wk-card{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:#111;border-radius:4px}
.wk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.wk-card:hover .wk-img{transform:scale(1.04)}
.wk-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.35),rgba(10,10,10,0) 38%,rgba(10,10,10,.78))}
.wk-body{position:absolute;inset:0;padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.wk-cat{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.wk-foot{display:flex;flex-direction:column;gap:8px}
.wk-title{font:500 clamp(1.25rem,1.8vw,1.6rem)/1.1 var(--sans);letter-spacing:-.02em}
.wk-cta{font-size:.86rem;color:rgba(255,255,255,.86)}
@media (max-width:760px){.cards2{grid-template-columns:1fr}}

/* ---------- Journal cards (home strip + journal index) ---------- */
.hj-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,56px)}
.hj-head h2{margin-top:18px}
.hj-all{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
.hj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.jr-item{display:block;padding-top:24px;border-top:1px solid var(--rule)}
.jr-top{display:flex;justify-content:space-between;gap:16px;margin-bottom:14px}
.jr-cat,.jr-date{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.jr-item-title{font:500 clamp(1.22rem,1.8vw,1.5rem)/1.2 var(--sans);letter-spacing:-.02em;transition:color .25s}
.jr-item:hover .jr-item-title{color:var(--focus-ink)}
.jr-item-dek{margin-top:10px;font-size:1rem;line-height:1.52;color:var(--gray);max-width:34em}
.jr-item-more{display:inline-block;margin-top:14px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:900px){.hj-grid{grid-template-columns:1fr}}

.journal.section{padding-top:clamp(8px,2vw,24px)}
.jr-lead{padding:clamp(28px,4vw,40px) 0 clamp(40px,6vw,64px);border-top:1px solid var(--velvet);border-bottom:1px solid var(--rule)}
.jr-lead-cat{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.jr-lead-title{margin-top:18px;font:400 clamp(2rem,4.4vw,3.6rem)/1.06 var(--sans);letter-spacing:-.035em;max-width:16em}
.jr-lead-title a{transition:color .25s}
.jr-lead-title a:hover{color:var(--focus-ink)}
.jr-lead-dek{margin-top:18px;font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.5;color:var(--gray);max-width:36em}
.jr-lead-foot{margin-top:26px;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.jr-meta{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.jr-read{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}
.jr-more{margin-top:clamp(48px,7vw,80px)}
.jr-more-head{margin-bottom:28px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.jr-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px) clamp(28px,5vw,72px)}
@media (max-width:760px){.jr-grid{grid-template-columns:1fr}}

/* ---------- Article ---------- */
.article.section{padding-top:clamp(8px,2vw,24px)}
.art-tldr{max-width:42rem;margin:0 auto clamp(36px,5vw,56px);padding:24px 26px;border:1px solid var(--rule);border-radius:14px}
.t-label{margin-bottom:10px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.art-tldr p:not(.t-label){font-size:1.04rem;line-height:1.6}
.prose{max-width:42rem;margin:0 auto}
.prose>p{margin-bottom:1.4em;font-size:1.14rem;line-height:1.75;color:#262626}
.prose>p:first-of-type{font-size:1.28rem;line-height:1.6;color:var(--velvet)}
.prose h2{margin:2.4em 0 .8em;font:500 clamp(1.4rem,2.2vw,1.8rem)/1.2 var(--sans);letter-spacing:-.02em}
.prose h3{margin:2em 0 .6em;font:500 1.25rem/1.25 var(--sans)}
.prose ul{list-style:none;margin:0 0 1.4em}
.prose li{position:relative;margin-bottom:.7em;padding-left:22px;font-size:1.1rem;line-height:1.65;color:#262626}
.prose li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;background:var(--velvet)}
.prose ol{list-style:none;margin:0 0 1.4em;counter-reset:step}
.prose ol>li{counter-increment:step;padding-left:2.6em}
.prose ol>li::before{content:counter(step,decimal-leading-zero);top:.5em;width:auto;height:auto;background:none;font:500 .72rem/1 var(--mono);letter-spacing:.06em;color:var(--gray)}
.prose p.src{margin:-.6em 0 1.6em;font:400 .76rem/1.55 var(--mono);letter-spacing:.02em;color:var(--gray)}
.prose p.src a{border-bottom-color:var(--haze)}
.prose .tbl{margin:.4em 0 1.8em;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table{width:100%;min-width:34rem;border-collapse:collapse;font-size:.98rem;line-height:1.5}
.prose th,.prose td{padding:.9em 1.1em .9em 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.prose thead th{font:500 .68rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray);border-bottom-color:var(--velvet)}
.prose tbody th{font-weight:500;color:var(--velvet)}
.prose td{color:#262626}
.prose blockquote{margin:2.4em 0;padding:1.3em 0;border-top:1px solid var(--velvet);border-bottom:1px solid var(--rule)}
.prose blockquote p{font:400 clamp(1.6rem,3vw,2.2rem)/1.2 var(--signal);color:var(--velvet)}
.prose a{border-bottom:1px solid currentColor}
.prose strong{font-weight:500;color:var(--velvet)}
.art-faq{max-width:42rem;margin:clamp(48px,7vw,72px) auto 0;padding-top:28px;border-top:1px solid var(--rule)}
.art-faq-head{margin-bottom:22px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.art-faq dt{margin-top:26px;font:500 1.12rem/1.35 var(--sans)}
.art-faq dt:first-child{margin-top:0}
.art-faq dd{margin-top:8px;font-size:1.05rem;line-height:1.65;color:#262626}
.art-related{max-width:42rem;margin:clamp(48px,7vw,72px) auto 0}
.art-related-head{margin-bottom:10px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.art-related a{display:block;padding:18px 0;border-top:1px solid var(--rule)}
.rl-cat{display:block;margin-bottom:6px;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.rl-title{font:500 1.15rem/1.3 var(--sans);letter-spacing:-.01em;transition:color .25s}
.art-related a:hover .rl-title{color:var(--focus-ink)}
.art-foot{max-width:42rem;margin:clamp(48px,7vw,72px) auto 0;padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.art-sign{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.art-back2{font-weight:500;border-bottom:1px solid currentColor}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(40px,7vw,104px);align-items:start}
.contact-form{display:grid;gap:28px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cf-field{display:grid;gap:10px}
.cf-field span{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.cf-field em{font-style:normal;text-transform:none;letter-spacing:0}
.cf-field input,.cf-field select,.cf-field textarea{font:400 1.05rem/1.4 var(--sans);color:var(--velvet);background:transparent;border:0;border-bottom:1px solid rgba(14,14,14,.25);border-radius:0;padding:10px 0;transition:border-color .2s}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;border-bottom-color:var(--focus)}
.cf-field textarea{resize:vertical;min-height:132px}
.cf-submit{justify-self:start;background:var(--velvet);color:#fff;border:0;border-radius:999px;padding:17px 30px;font:500 1rem/1 var(--sans);cursor:pointer;transition:transform .3s var(--ease)}
.cf-submit:hover{transform:translateY(-2px)}
.cf-note{min-height:1.4em;font-size:.95rem;color:var(--gray)}
.contact-aside{display:grid;gap:32px;padding-top:4px}
.ca-label{margin-bottom:10px;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.ca-email{font-size:1.2rem;font-weight:500;border-bottom:1px solid currentColor}
.ca-text{line-height:1.55;color:var(--gray);max-width:24em}
.ca-social{display:flex;gap:18px}
.ca-social a{color:var(--velvet);border-bottom:1px solid var(--haze);transition:border-color .2s}
.ca-social a:hover{border-bottom-color:var(--focus-ink)}
@media (max-width:860px){.contact-grid,.cf-row{grid-template-columns:1fr}}

/* ---------- Footer: content over the crowd, giant wordmark ---------- */
.site-foot{position:relative;overflow:hidden;background:var(--velvet);color:#fff;padding:clamp(64px,8vw,96px) 0 0}
.foot-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.foot-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(9,9,9,.97) 0%,rgba(9,9,9,.9) 32%,rgba(9,9,9,.55) 58%,rgba(9,9,9,.12) 82%,rgba(9,9,9,.35) 100%)}
.site-foot .shell{position:relative;z-index:2}
.foot-top{display:grid;grid-template-columns:1.5fr .8fr .8fr;gap:clamp(32px,5vw,72px);align-items:start}
.site-foot .mark{color:#fff}
.foot-tag{margin-top:16px;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fc-head{margin-bottom:16px;font:500 11px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-col a{font-size:.98rem;color:rgba(255,255,255,.78);transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-col .fc-sub{margin-top:18px}
.foot-bottom{margin-top:clamp(40px,5vw,56px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.foot-legal{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.foot-mark{position:relative;z-index:2;width:fit-content;margin:clamp(72px,12vw,160px) auto 0;transform:translateY(15%);font:700 clamp(4rem,17vw,16rem)/.82 var(--sans);letter-spacing:-.05em;color:#fff;white-space:nowrap}
.foot-mark span{color:var(--focus)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   Landing system: Brands, Creators, and the answer-first
   sections used site-wide. Same rules: one green, used as
   points of light; Garmani only for the page's headline.
   ============================================================ */
.skip{position:absolute;left:-999px;top:10px;z-index:50;background:var(--velvet);color:#fff;padding:10px 14px;border-radius:8px;font-size:.9rem}
.skip:focus{left:10px}

/* hero actions */
.ph-actions{margin-top:38px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
.btn-dark{display:inline-block;background:var(--velvet);color:#fff;font:500 1rem/1 var(--sans);padding:17px 28px;border-radius:999px;transition:transform .3s var(--ease)}
.btn-dark:hover{transform:translateY(-2px)}
.tlink{font-weight:500;border-bottom:1px solid currentColor;padding-bottom:2px}

/* every headline locks focus: its full stop turns green a beat after load */
.js .ph-title .dot{animation:dotlock 1.2s .3s both}
@keyframes dotlock{0%,55%{color:var(--haze)}100%{color:var(--focus)}}

/* sections: content, gap, hairline, gap */
.ls{padding:clamp(80px,10vw,136px) 0}
.ls+.ls{padding-top:0}
.ls+.ls>.shell{border-top:1px solid var(--rule);padding-top:clamp(64px,9vw,120px)}
.ls.dark{background:var(--velvet);color:#fff;padding:clamp(88px,11vw,150px) 0}
.ls.dark>.shell{border-top:0;padding-top:0}
.ls.dark+.ls{padding-top:clamp(80px,10vw,136px)}
.ls.dark+.ls>.shell{border-top:0;padding-top:0}
.ls.dark .label{color:rgba(255,255,255,.55)}

/* section heads: label, question, short answer */
.lhead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px clamp(24px,5vw,80px);align-items:end}
.lhead .label{grid-column:1/-1}
.lhead h2{font:400 clamp(2rem,3.7vw,3.4rem)/1.06 var(--sans);letter-spacing:-.032em;max-width:15em;text-wrap:balance}
.lhead .lead{font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.58;color:var(--gray);max-width:34em}
.lhead .lead a{color:var(--velvet)}
.ls.dark .lhead .lead{color:rgba(255,255,255,.66)}
@media (max-width:860px){.lhead{grid-template-columns:1fr;align-items:start}}

/* In short: the one-paragraph answer, plus a spec sheet */
.is-p{margin-top:22px;font:400 clamp(1.45rem,2.5vw,2.15rem)/1.3 var(--sans);letter-spacing:-.02em;max-width:27em;text-wrap:pretty}
.spec{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:24px clamp(20px,3vw,40px)}
.spec div{padding-top:18px;border-top:1px solid var(--rule)}
.spec dt{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.spec dd{margin-top:10px;font-size:1.02rem;line-height:1.45}
@media (max-width:900px){.spec{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.spec{grid-template-columns:1fr}}

.rlink{display:inline-flex;gap:6px;margin-top:20px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--rule);padding-bottom:5px;transition:border-color .2s}
.rlink:hover{border-color:var(--velvet)}

/* ---------- Casting board: sort by followers, then by fit ---------- */
.board{margin-top:clamp(40px,6vw,72px)}
.board-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-bottom:24px}
.seg{display:inline-flex;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:999px}
.seg button{background:none;border:0;cursor:pointer;padding:11px 18px;border-radius:999px;font:500 .9rem/1 var(--sans);color:rgba(255,255,255,.68);transition:background .25s,color .25s}
.seg button:hover{color:#fff}
.seg button[aria-pressed="true"]{background:#fff;color:var(--velvet)}
.board-read{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.board-read i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .4s,box-shadow .4s}
.board[data-sort="fit"] .board-read{color:#fff}
.board[data-sort="fit"] .board-read i{background:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
html:not(.js) .board-tools{display:none}
.cast-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.cast-card{order:var(--of)}
.board[data-sort="fit"] .cast-card{order:var(--om)}
.cast-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1b1b1b;border-radius:3px}
.cast-frame>img,.ph-port{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .5s var(--ease),opacity .5s var(--ease),transform .5s var(--ease)}
.ph-port{display:grid;place-items:end center;background:#d9d9d4}
.ph-port svg{width:72%;height:auto;fill:#c4c4be}
.ph-note{position:absolute;left:12px;top:12px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#85857f}
.af{position:absolute;inset:var(--af,14% 24% 42% 24%);pointer-events:none}
.af i{position:absolute;width:clamp(12px,1.6vw,20px);height:clamp(12px,1.6vw,20px);border:0 solid #fff;opacity:0;transform:translate(var(--tx),var(--ty));transition:opacity .2s,transform .2s,border-color .2s}
.af i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;--tx:-12px;--ty:-12px}
.af i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;--tx:12px;--ty:-12px}
.af i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px;--tx:-12px;--ty:12px}
.af i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0;--tx:12px;--ty:12px}
.board[data-sort="fit"] .is-fit .af i{opacity:1;transform:none;border-color:var(--focus);transition:opacity .3s .7s,transform .55s .7s var(--ease),border-color .25s 1.2s}
.cast-tag{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:7px 11px 7px 9px;border-radius:999px;background:rgba(14,14,14,.84);color:#fff;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.cast-tag::before{content:"";width:6px;height:6px;background:var(--focus)}
.board[data-sort="fit"] .is-fit .cast-tag{opacity:1;transform:none;transition:opacity .35s 1.25s,transform .35s 1.25s var(--ease)}
.board[data-sort="fit"] .cast-card:not(.is-fit) .cast-frame>img,
.board[data-sort="fit"] .cast-card:not(.is-fit) .ph-port{filter:blur(8px) grayscale(1);opacity:.24;transform:scale(1.08);transition:filter .9s .2s var(--ease),opacity .9s .2s var(--ease),transform .9s .2s var(--ease)}
.cast-meta{margin-top:14px;transition:opacity .6s}
.board[data-sort="fit"] .cast-card:not(.is-fit) .cast-meta{opacity:.38}
.cm-top{display:flex;justify-content:space-between;gap:12px;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cm-top span:last-child{color:#fff}
.cm-match{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.92rem;color:rgba(255,255,255,.72)}
.cm-match b{font:500 .92rem/1 var(--mono);color:#fff;font-variant-numeric:tabular-nums;transition:color .3s}
.cm-bar{display:block;margin-top:9px;height:2px;background:rgba(255,255,255,.14)}
.cm-bar i{display:block;height:100%;background:rgba(255,255,255,.62);transition:background .3s}
.board[data-sort="fit"] .is-fit .cm-bar i{background:var(--focus);transition-delay:1.2s}
.board[data-sort="fit"] .is-fit .cm-match b{color:var(--focus);transition-delay:1.2s}
.board-cap{margin-top:28px;font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
@media (max-width:760px){
  .cast-grid{grid-template-columns:1fr 1fr}
  .cm-top{flex-direction:column;gap:4px}
  .seg button{padding:10px 13px;font-size:.84rem}
}

/* ---------- Fit: yes / no ---------- */
.fit2{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:1fr 1fr}
.fit-col{padding-right:clamp(0px,4vw,56px)}
.fit-col+.fit-col{border-left:1px solid var(--rule);padding-left:clamp(24px,4vw,56px);padding-right:0}
.fit-col h3{font:500 1.15rem/1.3 var(--sans);letter-spacing:-.01em}
.fit-col ul{list-style:none;margin-top:18px}
.fit-col li{position:relative;padding:15px 0 15px 26px;border-top:1px solid var(--rule);font-size:1.02rem;line-height:1.5}
.fit-col li::before{content:"";position:absolute;left:1px;top:calc(15px + .52em);width:7px;height:7px}
.fit-yes li::before{background:var(--focus)}
.fit-no li{color:var(--gray)}
.fit-no li::before{top:calc(15px + .76em);width:9px;height:1px;background:var(--gray)}
@media (max-width:860px){.fit2{grid-template-columns:1fr}.fit-col{padding-right:0}.fit-col+.fit-col{border-left:0;padding-left:0;margin-top:48px}}

/* ---------- Numbered factors (pricing, deal filter) ---------- */
.factors{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.factors.f3{grid-template-columns:repeat(3,1fr)}
.fac{padding-top:22px;border-top:1px solid var(--rule)}
.fac-no{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--gray)}
.fac h3{margin-top:14px;font:500 1.22rem/1.25 var(--sans);letter-spacing:-.015em}
.f3 .fac h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.2;max-width:12em}
.fac p{margin-top:10px;font-size:.98rem;line-height:1.55;color:var(--gray)}
.fine{margin-top:clamp(28px,4vw,40px);font-size:.95rem;color:var(--gray)}
@media (max-width:900px){.factors,.factors.f3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.factors,.factors.f3{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
:root{interpolate-size:allow-keywords}
.faq{margin-top:clamp(36px,5vw,64px);border-bottom:1px solid var(--rule)}
.faq-i{border-top:1px solid var(--rule)}
.faq-i summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px 0}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i h3{font:500 clamp(1.08rem,1.5vw,1.28rem)/1.35 var(--sans);letter-spacing:-.01em;max-width:40em;transition:color .2s}
.faq-i summary:hover h3{color:var(--focus-ink)}
.faq-i summary i{position:relative;flex:none;width:14px;height:14px;margin-top:.42em}
.faq-i summary i::before,.faq-i summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transition:transform .3s var(--ease)}
.faq-i summary i::after{transform:rotate(90deg)}
.faq-i[open] summary i::after{transform:rotate(0deg)}
.faq-a{padding:0 0 26px;max-width:46em}
.faq-a p{font-size:1.05rem;line-height:1.65;color:#2B2B2B}
.faq-i::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.faq-i[open]::details-content{block-size:auto}

/* ---------- Promises (dark) ---------- */
.promises{margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,5vw,80px)}
.pr{padding:28px 0 30px;border-top:1px solid rgba(255,255,255,.16)}
.pr h3{display:flex;align-items:center;gap:14px;font:500 clamp(1.3rem,2vw,1.6rem)/1.2 var(--sans);letter-spacing:-.02em}
.pr h3::before{content:"";flex:none;width:8px;height:8px;background:var(--focus)}
.pr p{margin-top:10px;padding-left:22px;font-size:1.04rem;line-height:1.6;color:rgba(255,255,255,.7);max-width:30em}
@media (max-width:760px){.promises{grid-template-columns:1fr}}

/* ---------- Focus pull: brackets hunt, then lock on the person ---------- */
.af-band{position:relative;overflow:hidden;background:var(--velvet)}
.af-img{display:block;width:100%;height:auto;aspect-ratio:1672/941;max-height:88vh;object-fit:cover;object-position:78% 30%;transition:filter .7s var(--ease),transform .7s var(--ease)}
.js .af-band:not(.locked) .af-img{filter:blur(7px);transform:scale(1.03)}
.af-box{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;transition:left .5s var(--ease),top .5s var(--ease),width .5s var(--ease),height .5s var(--ease),opacity .3s}
.af-box i{position:absolute;width:clamp(16px,2vw,28px);height:clamp(16px,2vw,28px);border:0 solid #fff;transition:border-color .25s}
.af-box i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.af-box i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.af-box i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}
.af-box i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
.af-band.hunting .af-box,.af-band.locked .af-box{opacity:1}
.af-band.locked .af-box i{border-color:var(--focus)}
.af-hud{position:absolute;left:var(--gut);top:clamp(18px,3vw,32px);display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);opacity:0;transition:opacity .4s}
.af-hud i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .3s,box-shadow .3s}
.af-band.hunting .af-hud,.af-band.locked .af-hud{opacity:1}
.af-band.locked .af-hud{color:#fff}
.af-band.locked .af-hud i{background:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
html:not(.js) .af-box,html:not(.js) .af-hud{display:none}
@media (max-width:760px){.af-img{aspect-ratio:auto;height:62svh;max-height:none;object-position:96% 30%}}

/* ---------- Reveal: only what starts below the fold waits ---------- */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv-wait{opacity:0;transform:translateY(18px)}
.rv-zoom{transition:transform 1.8s var(--ease)}
.rv-zoom.rv-wait{opacity:1;transform:scale(1.06)}
.step{position:relative;border-top:0}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--velvet);transform-origin:left;transition:transform 1s var(--ease)}
.steps .step:nth-child(2)::before{transition-delay:.12s}
.steps .step:nth-child(3)::before{transition-delay:.24s}
.steps .step:nth-child(4)::before{transition-delay:.36s}
.steps.rv-wait .step::before{transform:scaleX(0)}

@media (prefers-reduced-motion:reduce){
  .js .ph-title .dot{animation:none}
  .rv,.rv-zoom,.step::before,.cast-frame>img,.ph-port,.af i,.cast-tag,.af-img,.af-box,.faq-i::details-content{transition:none!important}
  .rv-wait{opacity:1;transform:none}
}
.note p.label{font-size:11px;line-height:1.3}

/* home: what Naspen is, above the line (the page's H1) */
.hero-eye{display:inline-flex;align-items:center;gap:9px;margin:0 auto clamp(22px,2.6vw,34px);padding:9px 15px 9px 13px;background:#fff;border:1px solid var(--rule);border-radius:999px;box-shadow:0 10px 30px -18px rgba(0,0,0,.25);font:500 .86rem/1.2 var(--sans);letter-spacing:0;color:var(--velvet)}
.hero-eye::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--haze);transition:background .45s,box-shadow .45s}
.hero.in-focus .hero-eye::before{background:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
@media (max-width:640px){.hero-eye{font-size:.78rem;padding:8px 12px 8px 11px}}
/* contact: the "what happens next" steps sit under the form */
.sec.contact+.ls{padding-top:0}
.sec.contact+.ls>.shell{border-top:1px solid var(--rule);padding-top:clamp(64px,9vw,120px)}

/* ============================================================
   Brands services: rack focus through what each stage delivers.
   Five documents from one example campaign sit in a studio frame;
   scrolling the list pulls focus from one to the next.
   ============================================================ */
.svc{--u:clamp(12px,calc((100vh - 170px) / 31),16px);margin-top:clamp(40px,6vw,72px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0 clamp(40px,6vw,96px);align-items:start}
.svc-stage{position:sticky;top:max(16px,calc(50vh - (var(--u) * 31 + 150px) / 2));height:calc(var(--u) * 31 + 150px);overflow:hidden;border-radius:4px;container-type:inline-size}
.svc-frame{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 30%,#fff 0%,#f6f6f6 52%,#e9e9e9 100%)}
.svc-frame::after{content:"";position:absolute;left:22%;right:22%;bottom:calc(50% - var(--u) * 15.5 - 22px);height:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(14,14,14,.2),transparent);filter:blur(5px)}
.svc-cap{position:absolute;left:22px;right:22px;top:18px;z-index:30;font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.svc-hud{position:absolute;left:22px;right:22px;bottom:18px;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.svc-now{display:flex;align-items:center;gap:9px;white-space:nowrap}
.svc-now i{width:7px;height:7px;border-radius:50%;background:var(--focus);box-shadow:0 0 0 3px var(--focus-halo)}
.svc-now span{color:var(--velvet)}
.svc-seg{display:flex;gap:5px}
.svc-seg i{width:20px;height:2px;background:var(--haze);transition:background .4s}
.svc-seg i.done{background:var(--velvet)}
.svc-seg i.on{background:var(--focus)}

/* the documents (all sizes in em, so one font-size scales a whole card) */
.art{--d:0;position:absolute;left:50%;top:50%;width:26em;height:31em;margin:-15.5em 0 0 -13em;font-size:var(--u);display:flex;flex-direction:column;padding:1.5em 1.6em 1.25em;background:#fff;color:var(--velvet);border:1px solid rgba(14,14,14,.07);border-radius:.45em;box-shadow:0 2.4em 4.4em -2.2em rgba(14,14,14,.34),0 .15em .5em rgba(14,14,14,.05);overflow:hidden;
  transform:translate3d(calc(var(--d) * 6.5%),calc(var(--d) * -5%),0) scale(calc(1 - var(--d) * .06));
  filter:blur(calc(var(--d) * 3.2px));opacity:calc(1 - var(--d) * .22);
  transition:transform .9s var(--ease),filter .9s var(--ease),opacity .7s var(--ease);will-change:transform,filter,opacity}
@supports (width:1cqw){.art{font-size:min(var(--u),3.25cqw)}}
/* focus has moved deeper: the finished document drifts toward the lens, out of focus, and fades */
.art.is-past{transform:translate3d(-12%,9%,0) scale(1.14);filter:blur(12px);opacity:0}
.art-h{display:flex;justify-content:space-between;gap:1em;padding-bottom:1em;border-bottom:1px solid var(--rule);font:500 .64em/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.art-h span:first-child{color:var(--velvet)}
.art-f{margin-top:auto;padding-top:.95em;border-top:1px solid var(--rule);font-size:.74em;line-height:1.4;color:var(--gray)}
.ap-t,.ar-t{margin-top:1.05em;font-size:1.32em;font-weight:500;line-height:1.15;letter-spacing:-.02em}

/* 01 the plan */
.ap-f{margin-top:.8em}
.ap-f div{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:.8em;padding:.68em 0;border-bottom:1px solid var(--rule)}
.ap-f dt{padding-top:.3em;font:500 .6em/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.ap-f dd{font-size:.86em;line-height:1.38}
.ap-sign{margin-top:auto;display:flex;align-items:center;gap:.75em;padding-top:1em;font:500 .6em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.ap-sign>i{position:relative;flex:none;width:1.6em;height:1.6em;background:var(--focus)}
.ap-sign>i::after{content:"";position:absolute;left:.56em;top:.26em;width:.42em;height:.8em;border:solid #fff;border-width:0 .17em .17em 0;transform:rotate(45deg)}
.ap-sign>span:nth-child(2){color:var(--velvet)}
.ap-sign .ln{position:relative;flex:1;height:1px;background:rgba(14,14,14,.4)}
.ap-sign .ln svg{position:absolute;left:10%;bottom:-.35em;width:60%;height:auto;fill:none;stroke:var(--velvet);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 02 the shortlist */
.as-l{list-style:none;margin-top:.35em}
.as-l li{display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;grid-template-areas:"av n tag" "av r r";column-gap:.8em;row-gap:.22em;align-items:center;padding:.66em 0;border-bottom:1px solid var(--rule)}
.as-av{grid-area:av;align-self:start;width:2.4em;height:2.4em;border-radius:50%;background:#ddd 50% 22%/cover no-repeat}
.as-cut .as-av{background:radial-gradient(circle at 50% 40%,#c4c4c0 0 21%,transparent 22%),radial-gradient(60% 46% at 50% 100%,#c4c4c0 0 99%,transparent 100%),#e2e2e0}
.as-n{grid-area:n;display:flex;align-items:baseline;gap:.5em;min-width:0;font-size:.88em;font-weight:500}
.as-n small{font:500 .78em/1 var(--mono);letter-spacing:.04em;color:var(--gray)}
.as-tag{grid-area:tag;display:inline-flex;align-items:center;gap:.5em;padding:.5em .75em .5em .6em;border-radius:99px;background:var(--velvet);color:#fff;font:500 .56em/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.as-tag::before{content:"";width:.7em;height:.7em;background:var(--focus)}
.as-r{grid-area:r;font-size:.72em;line-height:1.38;color:var(--gray)}
.as-cut .as-n{color:var(--gray);text-decoration:line-through;text-decoration-thickness:1px}
.as-cut .as-tag{background:none;color:var(--gray);box-shadow:inset 0 0 0 1px var(--rule)}
.as-cut .as-tag::before{background:var(--haze)}

/* 03 the call sheet */
.ac-slate{flex:none;height:1.4em;margin:-1.5em -1.6em 1.15em;background:repeating-linear-gradient(-45deg,var(--velvet) 0 .9em,#fff .9em 1.8em);border-bottom:1px solid var(--velvet)}
.ac-g{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2em;margin-top:.35em}
.ac-g div{padding:.68em 0;border-bottom:1px solid var(--rule)}
.ac-g dt{font:500 .58em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.ac-g dd{margin-top:.5em;font-size:.9em;font-weight:500}
.ac-s{list-style:none;margin-top:.9em}
.ac-s li{display:grid;grid-template-columns:3.3em 4.2em minmax(0,1fr);column-gap:.7em;align-items:baseline;padding:.58em 0;border-bottom:1px dashed rgba(14,14,14,.16)}
.ac-t{font:500 .72em/1 var(--mono);color:var(--gray)}
.ac-s b{font-size:.8em;font-weight:500}
.ac-s li>span:last-child{font-size:.8em;line-height:1.35;color:#3A3A3A}

/* 04 the partnership ad */
.ad-top{display:flex;align-items:center;gap:.7em;margin-top:1em}
.ad-av{flex:none;width:2.3em;height:2.3em;border-radius:50%;background:url(/assets/cast-4.jpg) 50% 22%/cover;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--focus)}
.ad-who{display:flex;flex-direction:column;gap:.18em;min-width:0;font-size:.82em;line-height:1.2}
.ad-who b{font-weight:500}
.ad-who small{font-size:.86em;color:var(--gray)}
.ad-dots{margin-left:auto;display:flex;gap:.2em}
.ad-dots i{width:.22em;height:.22em;border-radius:50%;background:var(--velvet)}
.ad-m{flex:none;height:13.2em;margin:.85em -1.6em 0;overflow:hidden;background:#e5e5e5}
.ad-m img{width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.ad-i{display:flex;gap:.85em;margin-top:.75em}
.ad-i svg{width:1.3em;height:1.3em;fill:none;stroke:var(--velvet);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ad-i .ad-sv{margin-left:auto}
.ad-c{margin-top:.5em;font-size:.8em;line-height:1.4}
.ad-c b{font-weight:500;margin-right:.35em}
.ad-b{margin-top:auto;display:flex;align-items:center;gap:.65em;padding-top:.85em;border-top:1px solid var(--rule);font:500 .58em/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.ad-b i{flex:none;width:.85em;height:.85em;border-radius:50%;background:var(--focus);box-shadow:0 0 0 .35em var(--focus-halo)}
.ad-b span:nth-of-type(1){color:var(--velvet)}
.ad-b span:nth-of-type(2){margin-left:auto}

/* 05 the report */
.ar-ch{display:block;flex:none;width:100%;height:6.4em;margin-top:1.1em;overflow:visible}
.ar-ch line,.ar-ch path{fill:none;vector-effect:non-scaling-stroke}
.ar-ch line{stroke:var(--rule);stroke-width:1.5}
.ar-ch .ar-sp{stroke:var(--haze);stroke-width:1.5}
.ar-ch .ar-bu{stroke:var(--focus);stroke-width:2.5;stroke-linecap:round}
.ar-cap{margin-top:.7em;font:500 .58em/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.ar-l{list-style:none;margin-top:.85em}
.ar-l li{display:grid;grid-template-columns:5em minmax(0,1fr);column-gap:.6em;padding:.62em 0;border-top:1px solid var(--rule);font-size:.82em;line-height:1.38}
.ar-l b{display:flex;align-items:center;gap:.55em;font:500 .72em/1.9 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ar-l b::before{content:"";flex:none;width:.75em;height:.75em}
.ar-y b::before{background:var(--focus)}
.ar-n b::before{height:1px;background:var(--gray)}
.ar-x b::before{width:.55em;height:.55em;margin:0 .1em;border:solid var(--velvet);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}

/* creators 01: the inbox, filtered */
.ib-l{list-style:none;margin-top:.4em}
.ib-l li{display:grid;grid-template-columns:.6em minmax(0,1fr) auto;column-gap:.85em;align-items:center;padding:.8em 0;border-bottom:1px solid var(--rule)}
.ib-l li>i{width:.6em;height:.6em;border-radius:50%;box-shadow:inset 0 0 0 1px var(--haze)}
.ib-l li.ib-in>i{background:var(--focus);box-shadow:0 0 0 .25em var(--focus-halo)}
.ib-m{display:flex;flex-direction:column;gap:.24em;min-width:0}
.ib-m b{font-size:.88em;font-weight:500}
.ib-m span{font-size:.74em;line-height:1.3;color:var(--gray)}
.ib-tag{display:inline-flex;align-items:center;gap:.5em;padding:.5em .75em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--rule);font:500 .56em/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ib-tag.fit{padding-left:.6em;background:var(--velvet);color:#fff;box-shadow:none}
.ib-tag.fit::before{content:"";width:.7em;height:.7em;background:var(--focus)}
.ib-out{opacity:.5}
.ib-out .ib-m b{text-decoration:line-through;text-decoration-thickness:1px}

/* creators 02: the deal terms (the plan's form, a contract's content) */
.art-terms .ap-f dd{font-size:.84em}

/* creators 03: the point of view */
.pv-q{margin-top:1.15em;font-size:1.48em;font-weight:500;line-height:1.16;letter-spacing:-.025em}
.pv-h{margin-top:2.6em;font:500 .6em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.pv-f{list-style:none;margin-top:.7em;border-top:1px solid var(--rule)}
.pv-f li{display:flex;align-items:center;gap:.7em;padding:.7em 0;border-bottom:1px solid var(--rule);font-size:.88em}
.pv-f li::before{content:"";flex:none;width:.62em;height:.62em;background:var(--focus)}
.pv-x{list-style:none;margin-top:.75em;display:flex;flex-wrap:wrap;gap:.45em}
.pv-x li{padding:.42em .78em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--rule);font-size:.76em;color:var(--gray);text-decoration:line-through;text-decoration-thickness:1px}

/* creators 04: the studio booking (the viewfinder locks on the face from the photo above) */
.bk-v{position:relative;flex:none;height:10.5em;margin-top:1em;overflow:hidden;border-radius:.25em;background:#1b1b1b}
.bk-v img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.bk-af{position:absolute;left:67.5%;top:10.5%;width:20%;height:47.6%}
.bk-af i{position:absolute;width:.8em;height:.8em;border:0 solid var(--focus)}
.bk-af i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}
.bk-af i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}
.bk-af i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px}
.bk-af i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0}
.bk-t,.bk-r{position:absolute;bottom:.75em;font:500 .56em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.bk-t{left:.95em}
.bk-r{right:.95em}
.art-book .ac-g{margin-top:.55em}

/* creators 05: the series plan */
.sr-row{display:flex;gap:1.3em;align-items:flex-start;margin-top:1em}
.sr-cal{flex:none;display:grid;grid-template-rows:repeat(7,1em);grid-auto-columns:1em;grid-auto-flow:column;gap:.3em .4em}
.sr-cal i{border-radius:.15em;background:#efefef}
.sr-cal i.sh,.sr-key i.sh{background:var(--haze)}
.sr-cal i.ep,.sr-key i.ep{background:var(--velvet)}
.sr-cal i.nw,.sr-key i.nw{background:var(--focus)}
.sr-txt{min-width:0}
.sr-txt>p:first-child{font-size:.84em;line-height:1.42}
.sr-key{margin-top:1.1em;display:grid;gap:.6em;font:500 .58em/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.sr-key span{display:flex;align-items:center;gap:.6em}
.sr-key i{width:.95em;height:.95em;border-radius:.15em}
.sr-ch{height:6.2em}

/* the list: whatever sits at the middle of the screen is in focus */
.svc-list{border-bottom:1px solid var(--rule)}
.svc-item{display:flex;flex-direction:column;justify-content:center;min-height:max(44vh,340px);padding:clamp(40px,6vh,64px) 0;border-top:1px solid var(--rule);transition:opacity .5s var(--ease)}
.svc-no{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--gray);transition:color .4s}
.svc-item h3{margin-top:14px;font:500 clamp(1.5rem,2.3vw,2rem)/1.12 var(--sans);letter-spacing:-.02em}
.svc-item>p:not(.svc-no){margin-top:14px;font-size:1.05rem;line-height:1.62;color:#2B2B2B;max-width:34em}
.svc-item .rlink{align-self:flex-start}
.svc[data-live] .svc-item{opacity:.3}
.svc[data-live] .svc-item.is-on{opacity:1}
.svc[data-live] .svc-item.is-on .svc-no{color:var(--focus-ink)}

/* phones and small tablets: each document sits above its own text, in focus */
@media (max-width:900px){
  .svc{display:flex;flex-direction:column}
  .svc-stage,.svc-list{display:contents}
  .svc-frame,.svc-hud{display:none}
  .svc-cap{position:static;order:0;margin:0}
  .art{position:relative;left:auto;top:auto;z-index:auto!important;margin:52px 0 0;font-size:clamp(10.5px,3.3vw,14px);align-self:flex-start;transform:none!important;filter:none!important;opacity:1!important;transition:none;will-change:auto}
  .svc-item{min-height:0;padding:26px 0 0;border-top:0;opacity:1!important}
  .svc-stage .art:nth-of-type(1){order:1;margin-top:16px}.svc-item:nth-of-type(1){order:2}
  .svc-stage .art:nth-of-type(2){order:3}.svc-item:nth-of-type(2){order:4}
  .svc-stage .art:nth-of-type(3){order:5}.svc-item:nth-of-type(3){order:6}
  .svc-stage .art:nth-of-type(4){order:7}.svc-item:nth-of-type(4){order:8}
  .svc-stage .art:nth-of-type(5){order:9}.svc-item:nth-of-type(5){order:10}
  .svc-stage .art:nth-of-type(6){order:11}.svc-item:nth-of-type(6){order:12}
}
@media (prefers-reduced-motion:reduce){.art,.svc-item,.svc-seg i,.svc-no{transition:none!important}}

/* ---------- Journal covers: one thin drawing per post, each sketching its argument ---------- */
.jr-cover,.art-cover{position:relative;display:block;overflow:hidden;border-radius:3px;background:radial-gradient(120% 150% at 50% 38%,#fff 0%,#f4f4f4 58%,#e8e8e8 100%)}
.jr-cover{aspect-ratio:2.4/1;margin-bottom:20px}
.jr-cover .cv,.art-cover .cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.jr-item.has-cover{padding-top:0;border-top:0}
.jr-lead .jr-cover{aspect-ratio:3/1;margin-bottom:clamp(24px,3vw,36px)}
.art-cover{aspect-ratio:3.2/1;margin:0 0 clamp(40px,6vw,64px)}
/* on hover the clutter steps back and the point comes into focus */
.cv-oof{transition:opacity .5s var(--ease)}
.cv-halo{opacity:0;transition:opacity .45s var(--ease)}
.cv-af,.cv-frame{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease)}
.jr-item:hover .cv-oof,.jr-lead:hover .cv-oof{opacity:.4}
.jr-item:hover .cv-halo,.jr-lead:hover .cv-halo{opacity:1}
.jr-item:hover .cv-af,.jr-lead:hover .cv-af{transform:scale(.9)}
.jr-item:hover .cv-frame,.jr-lead:hover .cv-frame{transform:scale(.96)}
@media (max-width:760px){.jr-lead .jr-cover,.art-cover{aspect-ratio:2.4/1}}
@media (prefers-reduced-motion:reduce){.cv-oof,.cv-halo,.cv-af,.cv-frame{transition:none}}

/* who it's for: each audience gets a clear marker (a velvet tag with the green point), so the two never blur together on a phone */
.who-col>.label{display:inline-flex;align-items:center;gap:9px;padding:8px 13px 8px 11px;border-radius:999px;background:var(--velvet);color:#fff}
.who-col>.label::before{content:"";width:7px;height:7px;background:var(--focus)}

/* brands 04: the content calendar */
.sc-l{list-style:none;margin-top:.6em}
.sc-l li{display:grid;grid-template-columns:4.4em minmax(0,1fr) auto;column-gap:.8em;align-items:center;padding:.66em 0;border-bottom:1px solid var(--rule)}
.sc-w{display:flex;flex-direction:column;gap:.3em}
.sc-w span{font:500 .58em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.sc-w b{font-size:.8em;font-weight:500}
.sc-t{font-size:.76em;line-height:1.35;color:#3A3A3A}
.sc-s{display:inline-flex;align-items:center;gap:.45em;padding:.5em .7em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--rule);font:500 .54em/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gray);white-space:nowrap}
.sc-s.on{background:var(--velvet);color:#fff;box-shadow:none}
.sc-s.on::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--focus)}

/* buttons stay velvet; on hover or tap they confirm focus in the darker green (white text stays AA-legible) */
.btn-dark,.cta,.cf-submit{transition:transform .3s var(--ease),background .25s}
.btn-dark:hover,.btn-dark:focus-visible,.cta:hover,.cta:focus-visible,.cf-submit:hover,.cf-submit:focus-visible{background:var(--focus-ink)}
.btn{transition:transform .3s var(--ease),background .25s,color .25s}
.btn:hover,.btn:focus-visible{background:var(--focus-ink);color:#fff}
@media (max-width:640px){
  .ph-actions{margin-top:28px;gap:14px 22px}
  .btn-dark,.cf-submit{padding:13px 20px;font-size:.92rem}
  .btn{padding:15px 24px;font-size:.95rem}
  .cta{padding:10px 14px;font-size:.84rem}
}

/* focus confirm: one ping when focus locks, then stillness (never an endless pulse; the site is about not chasing attention) */
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(22,149,90,.5)}70%{box-shadow:0 0 0 10px rgba(22,149,90,0)}100%{box-shadow:0 0 0 3px var(--focus-halo)}}
.hero.in-focus .hero-eye::before,.hero.in-focus .hud-tally i{animation:ping 1.1s var(--ease) both}
.af-band.locked .af-hud i{animation:ping 1.1s var(--ease) .15s both}
.board[data-sort="fit"] .board-read i{animation:ping 1.1s var(--ease) 1.2s both}
@media (prefers-reduced-motion:reduce){.hero.in-focus .hero-eye::before,.hero.in-focus .hud-tally i,.af-band.locked .af-hud i,.board[data-sort="fit"] .board-read i{animation:none}}