/* Homepage only: Grid Motion-inspired gallery, without a React dependency. */
.hero.hero-motion{position:relative;isolation:isolate;overflow:hidden;background:#111014;color:#fff;padding:0;min-height:660px;min-height: min(780px,calc(100svh - 108px));display:grid;place-items:center;text-align:center}
.hero-copy{position:relative;z-index:2;padding-block:100px 112px;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero-motion .eyebrow{color:#e7e2df;font-size:11px;letter-spacing:2.6px;margin-bottom:24px}
.hero-motion .red-dot{background:#ff6757;box-shadow:0 0 16px #ff675780}
.hero-motion h1{font-size:clamp(58px,5.4vw,88px);line-height:1.07;letter-spacing:-4px;text-shadow:0 4px 32px #0005}
.hero-motion h1 span{color:#fff0e6}
.hero-motion .hero-description{color:#e0dcdb;font-size:17px;line-height:1.8;max-width:660px;margin:25px auto 28px;text-shadow:0 2px 12px #000}
.hero-motion .button{padding:15px 24px;font-size:14px;min-height:52px;border-radius:9px;box-shadow:0 8px 24px #0002}
.hero-motion .button.secondary{color:white;background:#ffffff0d;border-color:#ffffff50;backdrop-filter:blur(14px)}
.hero-motion .button.secondary:hover{background:#ffffff20;border-color:#ffffff80}
.hero-motion .hero-facts{color:#d2cecf;font-size:12px;margin:28px 0 0}
.hero-motion .hero-facts span+span:before{color:#8c8587}
.hero-wall{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);--tile-w:clamp(240px,24vw,440px);--tile-h:calc(var(--tile-w)/1.33);--wall-gap:16px}
.hero-wall-plane{position:absolute;left:50%;top:50%;width:130%;transform:translate(-50%,-50%) rotate(-12deg)}
.hero-wall-row{display:flex;width:max-content;gap:var(--wall-gap);margin-bottom:var(--wall-gap);transform:translate3d(var(--row-shift,0px),0,0)}
.hero-wall-group{display:flex;gap:var(--wall-gap);flex:none;animation:hero-gallery-drift 70s linear infinite;animation-play-state:paused}
.hero-wall-row:nth-child(even) .hero-wall-group{animation-direction:reverse;animation-duration:82s}
.hero-wall-row:nth-child(3) .hero-wall-group{animation-delay:-24s}
.hero-wall-row:nth-child(4) .hero-wall-group{animation-delay:-38s}
.hero-wall-tile{width:var(--tile-w);height:var(--tile-h);flex:none;overflow:hidden;border-radius:14px;background:#242229;opacity:.75;border:1px solid #ffffff12}
.hero-wall-tile img{width:100%;height:100%;object-fit:cover;user-select:none}
.hero-wall-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at var(--spot-x,50%) var(--spot-y,50%),transparent 0%,#11101435 48%,#111014a8 100%),radial-gradient(ellipse at center,#111014db 0%,#111014a1 28%,#11101420 68%),linear-gradient(to bottom,#11101460,transparent 28%,transparent 65%,#111014dc)}
.hero-motion-toggle{position:absolute;right:24px;bottom:20px;z-index:3;border:1px solid #ffffff38;border-radius:30px;color:#ddd7d5;background:#11101480;font-size:11px;line-height:1.5;padding:8px 13px;backdrop-filter:blur(12px)}
.hero-motion-toggle:hover{color:white;border-color:#ffffff80}
.hero-motion a:focus-visible,.hero-motion-toggle:focus-visible{outline-color:#fff;outline-offset:5px}
.hero-motion.is-animating .hero-wall-group{animation-play-state:running}
.studio-section{padding-top:48px;text-align:center}
@keyframes hero-gallery-drift{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--wall-gap)))}}
@media(min-width:1800px){.hero-wall{--tile-w:24vw}}
@media(max-width:700px){.hero.hero-motion{min-height:610px}.hero-copy{padding:84px 16px 100px}.hero-motion h1{font-size:clamp(44px,10vw,62px);letter-spacing:-2.5px}.hero-motion .hero-description{font-size:15px;max-width:390px;margin:23px auto}.hero-motion .eyebrow{font-size:9px;letter-spacing:2px}.hero-motion .button{padding:13px 16px;font-size:12px;min-height:48px}.hero-motion .hero-facts{font-size:9px;flex-wrap:wrap}.hero-wall{--tile-w:250px;--wall-gap:12px}.hero-wall-tile{border-radius:12px}.hero-wall-shade{background:radial-gradient(ellipse at center,#111014e0,#11101480 65%,#11101450),linear-gradient(to bottom,#11101450,transparent,#111014b0)}.hero-motion-toggle{right:16px;bottom:16px;font-size:10px}.studio-section{padding-top:28px}}
@media(prefers-reduced-motion:reduce){.hero-wall-group{animation:none!important}.hero-wall-row{transform:none}.hero-motion-toggle{display:none}}

/* Extend the homepage artwork behind the transparent navigation. */
body:has(main[data-page="home"]) .site-header{margin-bottom:-78px;border-bottom:0;background:transparent}
body main[data-page="home"] .hero.hero-motion{padding-top:132px;min-height:100svh}
@media(max-width:760px){
 body:has(main[data-page="home"]) .site-header{margin-bottom:-64px}
 body main[data-page="home"] .hero.hero-motion{padding-top:118px}
}
@media(max-width:700px){body main[data-page="home"] .hero.hero-motion{padding-top:100px}}
/* Drift Wall adaptation: alternating perspective columns around a quiet reading area.
   Reference: https://reactbits.dev/components/drift-wall */
body .hero.hero-motion{background:#080809}
body .hero-wall{perspective:1200px;perspective-origin:50% 50%;mask-image:linear-gradient(to bottom,#000 85%,transparent 100%);--tile-w:max(240px,28vw);--tile-h:calc(var(--tile-w)*.72);--wall-gap:18px}
body .hero-wall-plane{display:flex;gap:var(--wall-gap);width:max-content;height:160%;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.18) rotateX(calc(16deg + var(--wall-py,0deg))) rotateY(calc(-14deg + var(--wall-px,0deg))) rotateZ(0deg) translateZ(-120px);transform-style:preserve-3d}
body .hero-wall-row{display:flex;flex-direction:column;gap:var(--wall-gap);width:var(--tile-w);height:max-content;margin:0;transform:translate3d(0,var(--row-shift,0px),0)}
body .hero-wall-group{flex-direction:column;gap:var(--wall-gap);animation:hero-column-drift 80s linear infinite;animation-play-state:paused}
body .hero-wall-row:nth-child(even) .hero-wall-group{animation-direction:reverse;animation-duration:96s}
body .hero-wall-tile{opacity:.72;border-radius:14px}
body .hero-wall-shade{background:radial-gradient(ellipse 520px 470px at 50% 48%,#080809f5 0%,#080809e8 58%,#08080980 80%,transparent 100%),linear-gradient(to bottom,transparent 75%,#080809 100%)}
body .hero-copy{pointer-events:auto;padding-inline:20px}
body .hero-motion h1{color:#fff;text-shadow:none;white-space:normal;text-wrap:balance}
body .hero-motion h1 span{color:#fff}
body .hero-motion .hero-description{color:#e1e1e8;text-shadow:none}
body .hero-motion .hero-facts{color:#d4d4de;text-shadow:none}
body .hero-motion .hero-facts>div>span{color:#c9c9d4}
body .hero-motion .button.secondary{background:#1b1b22;border-color:#656570;backdrop-filter:none}
body:has(.hero-motion) .site-header{background:#0b0b0ef5}
@keyframes hero-column-drift{from{transform:translateY(0)}to{transform:translateY(calc(-100% - var(--wall-gap)))}}
@media(max-width:700px){body .hero-wall{--tile-w:190px;--wall-gap:12px}body .hero-wall-shade{background:linear-gradient(#080809d9,#080809ed 35%,#080809e6 75%,#080809),linear-gradient(90deg,#08080940,#08080990,#08080940)}body .hero-copy{padding-inline:0}}
@media(prefers-reduced-motion:reduce){body .hero-wall-group{animation:none!important}body .hero-wall-row{transform:none}}

/* Keep the desktop headline on one line and lift the hero content. */
body .hero.hero-motion{padding-top:24px;align-items:start}
@media(min-width:701px){body .hero-motion h1{white-space:nowrap;text-wrap:nowrap;font-size:clamp(28px,3.6vw,48px);letter-spacing:-1.8px}}
@media(max-width:700px){body .hero.hero-motion{padding-top:20px}}
/* Stable hover: brightness changes only; geometry and stacking never change. */
body .hero-wall{pointer-events:auto}
body .hero-wall-tile{position:relative;opacity:1;filter:none;transform:none;transition:none;background:transparent;border:0}
body .hero-wall-tile::after{display:none}
body .hero-wall-visual{position:relative;width:100%;height:100%;overflow:hidden;border-radius:14px;background:#242229;opacity:.55;pointer-events:none;transition:opacity 100ms linear}
body .hero-wall-visual::after{content:"";position:absolute;inset:0;background:#060010;opacity:.42;transition:opacity 100ms linear}
body .hero-motion .hero-layout,body .hero-motion .hero-copy{pointer-events:none}
body .hero-motion .hero-copy a,body .hero-motion .hero-studio{pointer-events:auto}
body .hero-wall-tile.is-hovered .hero-wall-visual{opacity:1}
body .hero-wall-tile.is-hovered .hero-wall-visual::after{opacity:0}
body .hero-motion.is-wall-hovered .hero-wall-group{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){body .hero-wall-visual,body .hero-wall-visual::after{transition:none}}/* DriftWall structure: a stationary tile includes its gap, and only its inner
   artwork lifts. One RAF-driven track owns all copies; no CSS animation resets. */
body .hero-wall-plane{align-items:flex-start;gap:0;will-change:transform;transform-style:preserve-3d}
body .hero-wall-row{position:relative;display:flex;flex-direction:column;width:calc(var(--tile-w) + var(--wall-gap));gap:0;margin:0;transform-style:preserve-3d;will-change:transform}
body .hero-wall-group{display:flex;flex-direction:column;gap:0;animation:none!important;transform:none;transform-style:preserve-3d}
body .hero-wall-tile{position:relative;display:block;width:calc(var(--tile-w) + var(--wall-gap));height:calc(var(--tile-h) + var(--wall-gap));overflow:visible;transform-style:preserve-3d;opacity:1;filter:none;transform:none;z-index:auto;border:0;background:transparent}
body .hero-wall-visual{position:absolute;inset:calc(var(--wall-gap)/2);width:auto;height:auto;pointer-events:none;transform:translateZ(0);opacity:.55;transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .18s ease,box-shadow .42s cubic-bezier(.22,1,.36,1)}
body .hero-wall-visual img{display:block;filter:saturate(.92);transition:filter .18s ease}
body .hero-wall-tile.is-hovered .hero-wall-visual{opacity:1;transform:translateZ(64px);box-shadow:0 24px 60px -18px #000b}
body .hero-wall-tile.is-hovered img{filter:saturate(1.05)}
@media(prefers-reduced-motion:reduce){body .hero-wall-tile.is-hovered .hero-wall-visual{transform:none}body .hero-wall-visual{transition:none}}
/* Single-line desktop headline, without a separate dark backdrop. */
body .hero-motion .hero-copy::before{content:none}
body .hero-motion h1{max-width:none;margin-inline:auto;font-size:clamp(28px,3.5vw,56px);font-weight:800;line-height:1.12;letter-spacing:-.035em;white-space:nowrap;text-wrap:nowrap;color:#fff;text-shadow:0 2px 12px #0008}
body .hero-motion h1 span{display:inline;margin:0;font:inherit;letter-spacing:inherit;color:#fff}
body .hero-motion .eyebrow{color:#e5eeee;letter-spacing:3px;font-weight:700}
body .hero-motion .hero-description{color:#e4e5e9;text-shadow:0 2px 8px #0009}
@media(max-width:700px){body .hero-motion h1{font-size:clamp(30px,7vw,44px);white-space:normal;text-wrap:balance}}/* A slow highlight sweeps across the red brand lettering. */
body .hero-motion h1 .hero-title-brand{color:#ff4057;text-shadow:0 0 22px #f12c4433}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 body .hero-motion h1 .hero-title-brand{background:linear-gradient(110deg,#ed2442 0%,#ff4359 36%,#ffb0b8 46%,#fff2f3 50%,#ffb0b8 54%,#ff4359 64%,#ed2442 100%);background-size:260% 100%;background-position:150% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hero-brand-shine 5s ease-in-out infinite;text-shadow:none}
}
@keyframes hero-brand-shine{0%,15%{background-position:150% 0}70%,100%{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){body .hero-motion h1 .hero-title-brand{animation:none;background:none;color:#ff4057;-webkit-text-fill-color:#ff4057}}
/* Mobile: keep the artwork visible instead of stacking near-opaque masks. */
@media(max-width:700px){
 body .hero-wall-visual{opacity:.85}
 body .hero-wall-visual::after{opacity:.12}
 body .hero-wall-shade{background:linear-gradient(to bottom,#08080935 0%,#08080980 18%,#08080988 44%,#08080930 72%,#080809 100%)}
 body .hero-motion h1{text-shadow:0 2px 12px #000b}
 body .hero-motion .hero-description,body .hero-motion .hero-facts{text-shadow:0 2px 8px #000}
}