/* =========================================================
   Section 1 — Hero "The Index"
   Desktop ≥900: 12-col Swiss grid. Name fills the width, photo sits
   in cols 1–3 beside line 2, facts run along the bottom like a spec sheet.
   Mobile <900: 4 cols. Name stacks, tagline + photo side by side,
   full-width CTA at the bottom within thumb reach.
   ========================================================= */

.hero{
	--hc:4;
	--name-size:20.5vw;
	position:relative;
	isolation:isolate;
	min-height:100vh;
	min-height:100svh;
	display:grid;
	grid-template-columns:repeat(var(--hc),minmax(0,1fr));
	grid-template-rows:auto auto auto 1fr;
	column-gap:var(--gutter);
	padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + 8px) var(--margin) calc(20px + env(safe-area-inset-bottom,0px));
	overflow:hidden;
}

/* visible column grid */
.hero__grid{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(var(--hc),minmax(0,1fr));column-gap:var(--gutter);padding:0 var(--margin);pointer-events:none}
.hero__grid span{border-left:1px solid rgba(242,240,234,.06);transform-origin:top}
.hero__grid span:nth-child(n+5){display:none}
.hero__grid span:nth-child(4){border-right:1px solid rgba(242,240,234,.06)}

/* name */
.hero__name{grid-column:1/-1;grid-row:1;font-family:var(--f-display);font-weight:700;font-size:var(--name-size);letter-spacing:-.065em;line-height:.8;text-transform:uppercase;white-space:nowrap;position:relative;z-index:2}
.hero__line{display:block;overflow:hidden;padding-top:.07em;margin-top:-.07em}
.hero__line--2{display:flex;align-items:flex-start}
.hero__word{display:inline-block}
.hero__word .ch{display:inline-block;transition:color .3s}
.hero__word .ch:hover{color:var(--acid)}
.hero__reg{font-size:.2em;letter-spacing:0;color:var(--acid);margin:.38em 0 0 .15em;line-height:1}

/* photo */
.hero__pic{grid-column:2/-1;grid-row:3;position:relative;overflow:hidden;aspect-ratio:4/5;margin-top:20px;background:var(--ink-2);z-index:1}
.hero__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pic-pos,50% 20%);filter:grayscale(1) contrast(1.3) brightness(.9)}
.hero__duo{position:absolute;inset:0;clip-path:circle(0px at 50% 50%);isolation:isolate;pointer-events:none}
.hero__duo img{filter:grayscale(1) contrast(1.25) brightness(1.15)}
.hero__duo::after{content:"";position:absolute;inset:0;background:var(--acid);mix-blend-mode:multiply}
.hero__fig{position:absolute;left:10px;bottom:8px;z-index:2;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);mix-blend-mode:difference}

/* tagline */
.hero__tagline{grid-column:1/-1;grid-row:2;align-self:start;padding-top:20px;font-size:15px;line-height:1.45;max-width:34ch;position:relative;z-index:2}
.hero__tagline em{font-style:normal;color:var(--acid)}
.hero__tagline p{margin:0}
.hero__clients{margin-top:14px!important;font-size:13px;line-height:1.5;color:var(--paper)}
.hero__clients .hero__k{margin-bottom:4px}
@media (max-width:899px){.hero__clients{display:none}}

/* meta row */
.hero__meta{grid-column:1/-1;grid-row:4;align-self:end;display:grid;grid-template-columns:repeat(var(--hc),minmax(0,1fr));column-gap:var(--gutter);row-gap:16px;padding-top:28px;position:relative;z-index:2}
.hero__cell{border-top:1px solid var(--line-strong);padding-top:10px;font-size:14px;line-height:1.4;min-width:0}
.hero__cell p{margin:0}
.hero__k{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2);margin-bottom:6px}
.hero__dim{color:var(--mute-2)}
.hero__cell--role{grid-column:1/-1}
.hero__cell--based{grid-column:1/span 2}
.hero__cell--exp{grid-column:3/span 2}
.hero__cell--cta{grid-column:1/-1;border-top:0;padding-top:0;display:flex;flex-direction:column;gap:10px}

/* rotating titles */
.hero__roles{position:relative;height:1.3em;overflow:hidden;font-family:var(--f-display);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.3}
.hero__roles span{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(110%)}
.hero__roles span.is-on{transform:none}

/* status + CTA */
.hero__status{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)}
.hero__dot{width:8px;height:8px;border-radius:50%;background:var(--mute)}
.hero__status.is-live{color:var(--paper)}
.hero__status.is-live .hero__dot{background:var(--acid);animation:ma-pulse 1.6s infinite}
@keyframes ma-pulse{50%{opacity:.25}}
.hero__cta{position:relative;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--acid);color:var(--ink);padding:16px 18px;font-family:var(--f-display);font-weight:700;font-size:20px;letter-spacing:-.03em;line-height:1;text-transform:uppercase;overflow:hidden;isolation:isolate}
.hero__cta::before{content:"";position:absolute;inset:0;background:var(--paper);transform:translateY(101%);transition:transform .55s var(--expo);z-index:-1}
.hero__cta:hover::before,.hero__cta:focus-visible::before{transform:none}
.hero__cta-ar{font-family:var(--f-mono);font-weight:400;transition:transform .55s var(--expo)}
.hero__cta:hover .hero__cta-ar{transform:translate(4px,-4px)}
.hero__cv{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line-strong);padding-bottom:8px;transition:color .3s,border-color .3s}
.hero__cv:hover{color:var(--acid);border-color:var(--acid)}

/* crosshair (desktop mouse only, shown by JS) */
.hero__xh{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s}
.hero.is-pointer .hero__xh{opacity:1}
.hero__vx{position:absolute;top:0;bottom:0;left:0;width:1px;background:rgba(199,255,53,.45)}
.hero__hx{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(199,255,53,.45)}
.hero__rd{position:absolute;left:0;top:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--acid);background:var(--ink);padding:3px 6px;white-space:nowrap}

/* ---------- desktop ---------- */
@media (min-width:900px){
	.hero{--hc:12;--name-size:19.5vw;grid-template-rows:auto auto minmax(0,1fr) auto}
	.hero__grid span:nth-child(n+5){display:block}
	.hero__grid span:nth-child(4){border-right:0}
	.hero__grid span:nth-child(12){border-right:1px solid rgba(242,240,234,.06)}

	.hero__name{grid-row:1/3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}
	.hero__line--1{grid-column:1/-1;grid-row:1}
	.hero__line--2{grid-column:4/-1;grid-row:2;justify-self:end}

	.hero__name{mix-blend-mode:difference}
	.hero__pic{grid-column:1/span 4;grid-row:2/5;aspect-ratio:auto;min-height:clamp(320px,34vw,760px);margin-top:.9vw}
	.hero__tagline{grid-column:5/span 4;grid-row:3;padding-top:clamp(16px,1.6vw,32px);font-size:clamp(15px,1.15vw,20px)}

	.hero__meta{display:contents}
	.hero__cell{grid-row:4;align-self:start;margin-top:clamp(20px,2vw,40px)}
	.hero__cell{font-size:clamp(14px,1.05vw,18px)}
	.hero__cell--role{grid-column:5/span 3}
	.hero__cell--based{grid-column:8/span 2}
	.hero__cell--exp{grid-column:10/span 3}
	.hero__cell--cta{grid-column:9/span 4;grid-row:3;align-self:end;margin-top:0;z-index:2}
	.hero__roles{font-size:clamp(16px,1.35vw,24px)}
	.hero__cta{font-size:clamp(18px,1.75vw,32px);padding:clamp(14px,1.1vw,22px) clamp(16px,1.3vw,26px)}
}

/* intro: hidden only while JS is about to animate; failsafe shows everything after 4s */
.js .hero [data-intro]{visibility:hidden;animation:ma-show 0s 4s forwards}
@keyframes ma-show{to{visibility:visible}}

@media (prefers-reduced-motion:reduce){
	.js .hero [data-intro]{visibility:visible;animation:none}
	.hero__roles{height:auto}
	.hero__roles span{position:static;display:none;transform:none}
	.hero__roles span.is-on{display:block}
}