.hero{
  --header-h:72px;
  position:relative;
  isolation:isolate;
  height:calc(100svh - var(--header-h));
  min-height:620px;
  max-height:calc(100svh - var(--header-h));
  margin-top:var(--header-h);
  overflow:hidden;
  background:var(--base);
}
.hero-grid{position:absolute;z-index:-5;inset:0;background-image:linear-gradient(to right,transparent calc(100% - 1px),rgba(17,17,16,.075) 1px);background-size:calc(100% / 12) 100%}
.hero-meta{position:absolute;z-index:20;top:24px;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);display:flex;justify-content:space-between;font:400 9px/1 var(--m);letter-spacing:.12em}

/* Vertical identity rail fills the negative space without competing with the main copy. */
.hero-side-rail{position:absolute;z-index:12;left:clamp(20px,8.2vw,158px);top:30%;display:flex;align-items:center;gap:11px;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--muted);font:500 clamp(8px,.58vw,10px)/1 var(--m);letter-spacing:.15em;white-space:nowrap}
.hero-side-rail i{font-style:normal;color:var(--signal)}
.hero-side-rail span:last-child{color:var(--signalText)}

/* Pixel-perfect marquee. JS measures one group and animates by that exact number of pixels. */
.hero-marquee{position:absolute;left:0;right:0;overflow:hidden;white-space:nowrap;pointer-events:none;contain:paint;transform:translateZ(0)}
.hero-marquee-inner{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0);backface-visibility:hidden}
.hero-marquee-group{display:flex;flex:none;align-items:center;padding-right:.34em}
.hero-marquee-group span{display:block;flex:none;font-size:clamp(82px,13.2vw,214px);font-weight:800;letter-spacing:-.075em;line-height:.8;text-rendering:auto}
.hero-marquee--back{z-index:-2;top:18%;color:var(--ink)}
.hero-marquee--front{z-index:8;bottom:3.2%;color:transparent;-webkit-text-stroke:1.65px var(--signal)}
.hero-marquee--front .hero-marquee-group{padding-right:.42em}
.hero-marquee--front .hero-marquee-group span{font-size:clamp(48px,7.2vw,114px);letter-spacing:-.06em}

/* Portrait. Image begins on the same visual edge as the red field, so the original crop reads as intentional. */
.portrait{position:absolute;z-index:3;left:57%;bottom:0;transform:translate3d(-50%,0,0);width:min(43vw,665px);height:calc(100% - 40px);margin:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;overflow:visible}
.portrait-field{position:absolute;z-index:-1;inset:7% -5% 0 -3%;background:var(--signal);clip-path:polygon(7% 5%,100% 0,92% 100%,0 100%)}
.portrait img{position:relative;z-index:2;width:auto;height:99%;max-width:none;object-fit:contain;object-position:center bottom;transform:translate3d(-3.5%,0,0);transform-origin:50% 100%;animation:portraitReveal .9s cubic-bezier(.16,1,.3,1) both;filter:saturate(.92) contrast(1.04) drop-shadow(0 18px 24px rgba(17,17,16,.12))}
@keyframes portraitReveal{from{opacity:0;transform:translate3d(-3.5%,50px,0) scale(.985);clip-path:inset(20% 0 0)}to{opacity:1;transform:translate3d(-3.5%,0,0) scale(1);clip-path:inset(0)}}
.portrait-stamp{position:absolute;z-index:5;right:3%;bottom:20px;background:var(--ink);color:#fff;padding:7px 9px;font:400 8px/1 var(--m);letter-spacing:.12em}

.hero-copy{position:absolute;z-index:14;left:clamp(20px,3vw,48px);bottom:clamp(112px,15vh,150px);width:min(34vw,540px)}
.positioning{margin:0 0 18px;max-width:58ch;text-transform:uppercase}.positioning strong{display:block;margin-bottom:7px;color:var(--ink);font:700 clamp(11px,.82vw,14px)/1.15 var(--m);letter-spacing:.1em}.positioning span{display:block;color:var(--signalText);font:500 clamp(9.5px,.69vw,11px)/1.6 var(--m);letter-spacing:.075em}
.statement{display:flex;flex-direction:column}.statement small{margin-bottom:8px;color:var(--muted);font:500 10px/1.2 var(--m);letter-spacing:.12em}.statement strong{font-size:clamp(40px,4.25vw,68px);font-weight:800;line-height:.88;letter-spacing:-.06em;color:var(--signal);min-height:.9em;will-change:transform,opacity;transition:opacity .26s ease,transform .36s cubic-bezier(.16,1,.3,1)}.statement strong.out{opacity:0;transform:translate3d(0,8px,0)}
.intro{max-width:43ch;margin:18px 0 22px;color:var(--muted);font-size:clamp(14.5px,1.02vw,17.5px);line-height:1.5}.actions{position:relative;z-index:22;display:flex;align-items:center;gap:20px}.btn{font:500 10px/1 var(--m);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}.btn.primary{padding:14px 20px;background:var(--ink);color:#fff;border:2px solid var(--ink)}.btn.primary:hover{background:var(--signal);border-color:var(--signal)}.btn.link{color:var(--ink);padding:5px 0;border-bottom:2px solid var(--signal)}
.hero-bottom{position:absolute;z-index:15;left:clamp(20px,3vw,48px);right:clamp(20px,3vw,48px);bottom:12px;display:flex;justify-content:space-between;font:400 8px/1 var(--m);letter-spacing:.11em}

@media(max-width:1180px){.portrait{width:min(47vw,620px);left:59%}.hero-copy{width:min(38vw,500px);bottom:128px}.hero-side-rail{left:7vw}}

@media(max-width:820px){
  .hero{--header-h:64px;height:calc(100svh - var(--header-h));min-height:0;max-height:calc(100svh - var(--header-h));margin-top:var(--header-h);display:grid;grid-template-rows:48px minmax(230px,43%) 40px minmax(0,1fr) 24px;padding:0 18px}
  .hero-grid{background-size:25% 100%}
  .hero-meta{position:relative;z-index:20;top:auto;left:auto;right:auto;grid-row:1;align-self:center}.hero-meta span:last-child{display:none}
  .hero-side-rail{display:none}
  .hero-marquee--back{top:15.5%;left:-18px;right:-18px}.hero-marquee--back .hero-marquee-group span{font-size:clamp(50px,14vw,74px);letter-spacing:-.055em}.hero-marquee--back .hero-marquee-group{padding-right:.4em}
  .portrait{position:relative;grid-row:2;left:auto;bottom:auto;width:100%;height:100%;transform:none;justify-self:center;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
  .portrait-field{inset:6% 8% 0 8%;clip-path:polygon(8% 5%,100% 0,92% 100%,0 100%)}
  .portrait img{height:100%;width:auto;max-width:94vw;transform:translate3d(0,0,0);object-position:center bottom}.portrait-stamp{display:none}
  @keyframes portraitReveal{from{opacity:0;transform:translate3d(0,32px,0) scale(.99);clip-path:inset(16% 0 0)}to{opacity:1;transform:translate3d(0,0,0) scale(1);clip-path:inset(0)}}
  .hero-marquee--front{position:relative;grid-row:3;top:auto;bottom:auto;left:-18px;right:-18px;z-index:10;align-self:center;height:40px;display:flex;align-items:center}.hero-marquee--front .hero-marquee-group span{font-size:clamp(30px,9.6vw,46px);-webkit-text-stroke-width:1.1px}.hero-marquee--front .hero-marquee-group{padding-right:.48em}
  .hero-copy{position:relative;grid-row:4;left:auto;right:auto;bottom:auto;width:auto;align-self:start;padding-top:10px;min-height:0}.positioning{margin-bottom:10px}.positioning strong{font-size:10.5px;margin-bottom:5px}.positioning span{font-size:9px;line-height:1.45;max-width:46ch}.statement small{font-size:8.5px;margin-bottom:6px}.statement strong{font-size:clamp(34px,10vw,46px);line-height:.88}.intro{font-size:14px;line-height:1.4;margin:10px 0 14px;max-width:35ch}.actions{gap:14px}.btn.primary{padding:11px 14px}.btn{font-size:9px}
  .hero-bottom{position:relative;grid-row:5;left:auto;right:auto;bottom:auto;align-self:center}.hero-bottom span:first-child{display:none}
}
@media(max-width:460px){.hero{padding-inline:16px;grid-template-rows:44px minmax(220px,42%) 36px minmax(0,1fr) 22px}.hero-marquee--back{left:-16px;right:-16px;top:15%}.hero-marquee--front{left:-16px;right:-16px;height:36px}.portrait-field{inset:7% 6% 0 6%}.portrait img{max-width:98vw}.positioning span{font-size:8.6px}.statement strong{font-size:9.6vw}.intro{font-size:13.6px;margin:9px 0 12px}.actions{gap:12px}}
@media(max-height:720px) and (min-width:821px){.hero-copy{bottom:98px}.positioning{margin-bottom:12px}.intro{margin:14px 0 18px}.portrait{height:calc(100% - 24px)}.hero-marquee--back{top:15%}}
@media(prefers-reduced-motion:reduce){.portrait img{animation:none!important}.statement strong{transition:none!important}.hero-marquee-inner{transform:none!important}}