/* ═══ SOCIAL · SECTION 1 — HERO (type-led, with the CSS feed grid) ═══ */
.hero{position:relative;overflow:hidden;min-height:clamp(540px,92svh,940px);
  display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--nav-h) + clamp(34px,6vh,70px)) var(--gut) 0}
.hero .cut{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hero .cut line{stroke:var(--cut);stroke-width:2.6;fill:none;
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:draw 1.25s cubic-bezier(.65,0,.35,1) .3s forwards}

/* the feed: a 4x4 grid of tiles that fill in like a posting schedule — no image files needed */
.feed{position:absolute;right:calc(var(--gut) * -0.4);top:50%;translate:0 -50%;
  z-index:1;display:grid;grid-template-columns:repeat(4,clamp(58px,6.4vw,108px));
  gap:clamp(6px,.7vw,12px);transform:rotate(-8deg);opacity:.9;pointer-events:none}
@media(max-width:1000px){.feed{opacity:.28;right:-14vw}}
@media(max-width:700px){.feed{display:none}}
.cell{aspect-ratio:1;background:var(--surface);border:1px solid var(--border);
  opacity:0;transform:scale(.9);
  animation:pop .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.cell.on{background:var(--surface-alt)}
.cell.lime{background:var(--cut);border-color:var(--cut)}
.cell.half{background:linear-gradient(135deg,var(--surface-alt) 50%,var(--cut) 50%)}
.cell.vid{position:relative}
.cell.vid::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:0;height:0;border-left:9px solid rgba(245,244,239,.42);
  border-top:6px solid transparent;border-bottom:6px solid transparent}

.hero-main{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center}
.crumb{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.18em;
  color:var(--dim);margin-bottom:clamp(18px,3vh,32px);opacity:0;animation:fade .8s ease .1s forwards}
.crumb a:hover{color:var(--text)}
.crumb i{font-style:normal;color:var(--cut)}
.hero h1{font-size:clamp(2.2rem,7.4vw,7rem);line-height:.88;max-width:12ch}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .row > span{display:block;transform:translateY(104%);
  animation:rise .95s cubic-bezier(.16,1,.3,1) forwards}
.hero h1 .row:nth-child(1) > span{animation-delay:.05s}
.hero h1 .row:nth-child(2) > span{animation-delay:.13s}
.hero h1 .row:nth-child(3) > span{animation-delay:.21s}
.hero h1 .dot{color:var(--cut)}
.hero .sub{margin-top:clamp(22px,3.6vh,38px);max-width:44ch;
  font-size:clamp(.96rem,1.16vw,1.16rem);line-height:1.6;color:var(--muted);
  opacity:0;animation:fade .85s ease .58s forwards}
.hero-foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,64px);
  padding:clamp(18px,3vh,26px) 0;border-top:1px solid var(--border);
  opacity:0;animation:fade .85s ease .8s forwards}
.hero-foot div b{display:block;font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.03em;line-height:1}
.hero-foot div i{display:block;font-style:normal;font-size:10px;letter-spacing:.16em;
  color:var(--dim);margin-top:7px}

@media(prefers-reduced-motion:reduce){
  .hero h1 .row > span{transform:none}
  .crumb,.hero .sub,.hero-foot,.cell{opacity:1;transform:none}
  .hero .cut line{stroke-dashoffset:0}
}