/* Four genuinely different hero templates for local concept review. */
.hero--concepts{display:block;min-height:100svh;padding:0;isolation:isolate}
.hero--concepts::before,.hero--concepts::after{display:none}
.hero-layout{position:relative;display:none;min-height:100svh;padding:142px 0 76px;overflow:hidden}
:root[data-hero-style="showcase"] .hero-layout--showcase,:root[data-hero-style="manifesto"] .hero-layout--manifesto,:root[data-hero-style="system"] .hero-layout--system,:root[data-hero-style="poster"] .hero-layout--poster{display:block}
.hero-layout h1{margin:0;font-weight:700;line-height:.88;letter-spacing:-.075em}
.hero-intro{max-width:360px;margin:30px 0 0;color:var(--muted);font-size:16px;line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:25px;margin-top:28px}
.hero-actions .text-link{font-size:13px;font-weight:700}
.hero-scroll{position:absolute;bottom:28px;left:max(24px,calc((100vw - min(100% - 48px,var(--max)))/2));z-index:2;padding-left:13px;color:var(--dim);font-size:9px;font-weight:700;letter-spacing:.16em}
.hero-scroll::before{position:absolute;top:-7px;bottom:-7px;left:0;width:1px;background:currentColor;content:""}
.hero-index{position:absolute;right:max(24px,calc((100vw - min(100% - 48px,var(--max)))/2));bottom:30px;color:var(--dim);font-size:10px;font-weight:700;letter-spacing:.12em}

/* 01 — editorial project collage */
.hero-layout--showcase{background:var(--hero-showcase-bg)}
.hero-editorial-copy{position:relative;z-index:3;padding-top:12vh}
.hero-editorial-copy h1{max-width:580px;font-size:clamp(62px,7vw,112px)}
.hero-editorial-copy h1 em{color:var(--accent);font-style:normal}
.hero-layout--showcase .hero-intro{color:var(--hero-showcase-copy)}
.hero-layout--showcase .button--accent{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.editorial-collage{position:absolute;top:112px;right:5vw;bottom:55px;width:min(51vw,760px);z-index:1}
.collage-piece{position:absolute;overflow:hidden;margin:0;background:var(--hero-showcase-piece)}
.collage-piece img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.06)}
.collage-piece--phone{top:0;left:2%;width:31%;height:62%;clip-path:polygon(5% 0,100% 0,93% 100%,0 100%)}
.collage-piece--food{top:0;right:18%;width:31%;height:39%}
.collage-piece--landscape{bottom:0;left:0;width:61%;height:43%}
.collage-piece--landscape::after{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.76));content:""}
.collage-piece--landscape figcaption{position:absolute;right:22px;bottom:20px;z-index:1;color:#fff;font:700 15px var(--display-font);letter-spacing:.04em}
.collage-piece--landscape i{display:inline-grid;width:34px;height:34px;margin-left:12px;place-items:center;border:1px solid #fff;border-radius:50%;font-style:normal}
.collage-piece--app{right:0;bottom:0;width:28%;height:61%}

/* 02 — deliberately light, type-first composition */
.hero-layout--manifesto{color:var(--ink);background:var(--ground)}
.hero-layout--manifesto .eyebrow{color:var(--accent)}
.hero-layout--manifesto .hero-intro{color:var(--muted)}
.hero-layout--manifesto .button{border-color:var(--accent);color:var(--accent-ink);background:var(--accent)}
.hero-layout--manifesto .text-link{color:var(--ink)}
.minimal-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr);align-items:center;min-height:calc(100svh - 218px);gap:40px}
.minimal-copy{position:relative;z-index:2;padding-left:4vw}
.minimal-copy h1{max-width:770px;font-size:clamp(56px,6.7vw,104px)}
.minimal-copy h1 em{color:var(--accent);font-style:normal}
.minimal-cutout{position:relative;justify-self:end;width:min(37vw,500px);height:min(61vw,690px);margin:0;overflow:hidden;clip-path:polygon(30% 0,100% 0,73% 100%,0 100%,18% 47%)}
.minimal-cutout img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.05)}
.minimal-cutout::after{position:absolute;inset:0;background:linear-gradient(145deg,var(--hero-minimal-overlay),transparent 52%);content:""}
.minimal-cutout figcaption{position:absolute;right:11%;bottom:14%;z-index:1;color:var(--ink);font:700 clamp(11px,1vw,15px)/1.55 var(--display-font);letter-spacing:.07em}
.hero-layout--manifesto .hero-scroll,.hero-layout--manifesto .hero-index{color:var(--dim)}

/* 03 — layered interface and controlled motion */
.hero-layout--system{background:var(--hero-system-bg)}
.system-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(450px,1.12fr);align-items:center;min-height:calc(100svh - 218px);gap:36px}
.system-copy{position:relative;z-index:3}
.system-copy h1{max-width:580px;font-size:clamp(56px,6.2vw,98px)}
.system-copy h1 em{color:var(--accent);font-style:normal}
.system-copy .hero-intro{color:var(--hero-system-copy)}
.system-copy .button--accent{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.kinetic-stage{position:relative;height:min(50vw,600px);min-height:460px;overflow:hidden}
.kinetic-orbit{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 68%,transparent);border-radius:50%;transform:rotate(-14deg)}
.kinetic-orbit--one{top:7%;left:7%;width:83%;height:80%}
.kinetic-orbit--two{top:19%;left:17%;width:65%;height:57%;border-color:color-mix(in srgb,var(--accent) 34%,transparent);animation:hero-orbit-spin 24s linear infinite}
.kinetic-dot{position:absolute;z-index:2;display:block;width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:0 0 32px var(--accent)}
.kinetic-dot--one{top:9%;left:34%;animation:hero-float 4s ease-in-out infinite}
.kinetic-dot--two{bottom:13%;left:17%;width:14px;height:14px;animation:hero-float 5s -1s ease-in-out infinite}
.device{position:absolute;z-index:1;margin:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 54%,transparent);border-radius:10px;background:var(--hero-device-bg);box-shadow:0 35px 70px var(--hero-device-shadow)}
.device img{width:100%;height:100%;object-fit:cover;opacity:.9}
.device--laptop{top:27%;left:20%;width:66%;height:55%;transform:rotate(-12deg)}
.device--mobile{top:25%;right:1%;width:21%;height:54%;transform:rotate(7deg)}
.kinetic-list{position:absolute;top:8%;right:3%;z-index:3;margin:0;padding:0;list-style:none;color:var(--muted);font:500 11px/1.7 var(--display-font)}
@keyframes hero-orbit-spin{to{transform:rotate(346deg)}}
@keyframes hero-float{50%{transform:translateY(-15px)}}

/* 04 — full-bleed visual / video-ready template with static fallback */
.hero-layout--poster{display:none;background:var(--hero-poster-bg)}
.poster-background{position:absolute;inset:0;margin:0}
.poster-background::after{position:absolute;inset:0;background:var(--hero-poster-overlay);content:""}
.poster-background img{width:100%;height:100%;object-fit:cover;filter:var(--hero-poster-image-filter)}
.poster-copy{position:relative;z-index:2;padding-top:17vh}
.poster-copy h1{max-width:630px;font-size:clamp(57px,6.4vw,100px)}
.poster-copy h1 em{color:var(--accent);font-style:normal}
.poster-copy .hero-intro{color:var(--hero-poster-copy)}
.poster-copy .button{border-color:var(--hero-poster-button-bg);color:var(--hero-poster-button-ink);background:var(--hero-poster-button-bg)}
.poster-copy .text-link{color:var(--hero-poster-link)}
.poster-watch{position:absolute;right:max(24px,calc((100vw - min(100% - 48px,var(--max)))/2));bottom:29px;z-index:2;color:var(--hero-poster-meta);font-size:10px;font-weight:700;letter-spacing:.08em}

@media (max-width:800px){
  .hero-layout{min-height:790px;padding:126px 0 70px}.hero-layout h1{font-size:clamp(48px,13.2vw,72px)}.hero-intro{max-width:300px;margin-top:23px;font-size:14px}.hero-actions{gap:18px;margin-top:23px}.hero-scroll{bottom:22px}.hero-index,.poster-watch{right:24px;bottom:23px}
  .hero-editorial-copy{padding-top:100px}.editorial-collage{top:75px;right:-38px;bottom:auto;width:260px;height:360px;opacity:.56}.collage-piece--phone{height:56%}.collage-piece--food{right:5%;height:34%}.collage-piece--landscape{width:65%;height:39%}.collage-piece--landscape figcaption{right:8px;bottom:8px;font-size:8px}.collage-piece--landscape i{width:19px;height:19px;margin-left:4px}.collage-piece--app{height:56%}
  .minimal-grid{display:block;min-height:0}.minimal-copy{padding-top:94px;padding-left:0}.minimal-cutout{position:absolute;top:90px;right:-44px;width:230px;height:330px;opacity:.4}.minimal-cutout figcaption{display:none}.hero-layout--manifesto .hero-intro{max-width:280px}
  .system-grid{display:block;min-height:0}.system-copy{padding-top:92px}.kinetic-stage{position:absolute;top:72px;right:-70px;width:315px;height:365px;min-height:0;opacity:.57}.device--laptop{top:30%;left:14%;width:69%;height:45%}.device--mobile{top:25%;right:3%;width:22%;height:48%}.kinetic-list{font-size:8px}.kinetic-dot--one{width:14px;height:14px}.kinetic-dot--two{width:9px;height:9px}
  .poster-copy{padding-top:175px}.poster-copy .hero-intro{max-width:285px}.poster-background img{object-position:65% center}.poster-background::after{background:var(--hero-poster-overlay-mobile)}
}
@media (prefers-reduced-motion:reduce){.kinetic-orbit--two,.kinetic-dot{animation:none}}