*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030303;color:#f5f3ef;font-family:Arial,Helvetica,sans-serif}.topbar{height:72px;position:absolute;z-index:30;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;padding:0 2.5vw}.topbar i{height:1px;background:#7777}.topbar nav{display:flex;gap:16px}.topbar button{border:0;background:none;color:#eee;font-size:10px;letter-spacing:.27em;padding:8px 0;cursor:pointer}.hero{min-height:100svh;position:relative;overflow:hidden;padding-top:95px;background:radial-gradient(circle at 50% 25%,#48082044,transparent 28%),#030303}
.logo-trigger{display:block;position:relative;z-index:15;width:min(760px,65vw);margin:0 auto;border:0;background:none;padding:0;cursor:pointer}.logo-trigger img{display:block;width:100%;filter:drop-shadow(0 0 25px #ff2a7940)}
.fan{height:0;opacity:0;overflow:hidden;position:relative;z-index:5;margin:0 auto;width:100%;transition:height .95s cubic-bezier(.2,.75,.2,1),opacity .55s}
.hero.open .fan{height:min(41.4vw,636px);opacity:1}
.fan-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.zones{position:absolute;inset:0;display:grid;grid-template-columns:20% 20% 20% 20% 20%;padding:0 2.8vw}
.zone{border:0;background:transparent;color:#fff;cursor:pointer;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 1.9vw 4.0vw;min-width:0;text-shadow:0 2px 12px #000;transition:background .3s,transform .3s}.zone:hover,.zone:focus-visible{outline:none;background:linear-gradient(transparent 45%,#0000002c);transform:translateY(-6px)}.zone strong{font-size:clamp(12px,1.08vw,18px);font-weight:500;letter-spacing:.14em;white-space:nowrap}.dash{display:block;width:28px;height:1px;background:#fff;margin:14px 0 14px;transform-origin:left center;transition:width .35s ease}.zone:hover .dash,.zone:focus-visible .dash{width:72px}.zone small{font-size:clamp(9px,.76vw,13px);line-height:1.48;letter-spacing:.055em;opacity:.94;text-align:left}
.hint{position:absolute;z-index:20;left:2.6vw;bottom:2.3vw;display:flex;align-items:center;gap:16px;background:#050505;padding:8px 15px 8px 8px;font-size:11px;line-height:1.5;letter-spacing:.055em}.hint p{margin:0}.hint>span{width:46px;height:46px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:18px}
.projects{min-height:92vh;padding:110px 5vw 130px;border-top:1px solid #ffffff1f;background:#080808}.project-head{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:end;margin-bottom:60px}.project-head h1{font-size:clamp(70px,11vw,180px);font-weight:400;letter-spacing:-.055em;line-height:.8;margin:.15em 0}.project-head>p{font-size:clamp(16px,1.45vw,23px);line-height:1.55;color:#c9c7c1;max-width:680px}.eyebrow{font-size:10px;letter-spacing:.27em;opacity:.58}.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:15px}.card{grid-column:span 4;min-height:450px;position:relative;overflow:hidden;border:1px solid #ffffff25;background:radial-gradient(circle at 70% 20%,var(--glow),transparent 34%),linear-gradient(145deg,#151515,#050505);padding:28px;display:flex;flex-direction:column;justify-content:flex-end}.card:nth-child(2){grid-column:span 5}.card:nth-child(3){grid-column:span 3}.card small{letter-spacing:.18em;opacity:.65}.card h3{font-size:clamp(26px,3vw,48px);font-weight:400;margin:.3em 0}.card p{color:#bbb;line-height:1.55}.contact{min-height:70vh;padding:110px 5vw;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 78% 45%,#b8ff1b1f,transparent 30%),radial-gradient(circle at 30% 50%,#ff19712b,transparent 35%),#030303}.contact h2{font-size:clamp(64px,10vw,155px);line-height:.82;font-weight:400;letter-spacing:-.05em;margin:.2em 0 .35em}.contact a{align-self:flex-start;color:white;text-decoration:none;border-bottom:1px solid white;padding-bottom:7px}
@media(max-width:800px){.topbar{height:60px;display:block;padding:18px 14px;overflow:hidden}.topbar i{display:none}.topbar nav{overflow-x:auto;gap:11px}.topbar button{font-size:8px;white-space:nowrap}.hero{padding-top:92px}.logo-trigger{width:90vw}.hero.open .fan{height:0;opacity:0;overflow:hidden;position:relative;z-index:5;margin:0 auto;width:100%;transition:height .95s cubic-bezier(.2,.75,.2,1),opacity .55s}
.hero.open .fan{height:min(41.4vw,636px);opacity:1}
.fan-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.zones{position:absolute;inset:0;display:grid;grid-template-columns:20% 20% 20% 20% 20%;padding:0 2.8vw}
.zone{justify-content:center;padding:12px 18px;border-bottom:1px solid #ffffff2b;background:#05050555;backdrop-filter:blur(2px)}.zone:hover{transform:none}.zone small{font-size:11px}.dash{margin:9px 0}.hint{left:14px;right:auto;bottom:8px;white-space:normal}.project-head{grid-template-columns:1fr;gap:18px}.cards{display:block}.card{min-height:360px;margin-bottom:12px}.projects,.contact{padding:80px 22px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Prototype 05: fixed baseline and image-relative positioning */
.zone{position:relative}
.zone strong{min-height:22px;display:flex;align-items:flex-end}
.zone .dash{flex:0 0 auto}
.zone small{min-height:62px}
.hint{bottom:8px;left:2.6vw;right:auto;white-space:nowrap}
.contact a{font-size:18px}
@media (min-width:801px){
  .zones{padding-left:2.8vw;padding-right:2.8vw}
  .zone{padding-bottom:3.5vw}
}

/* Prototype 06 refinements */
.hint { display:none !important; }

/* Move only CULTURE and EXPERIENCES slightly to the right while keeping
   all five headings on the same baseline. */
@media (min-width:801px){
  .zone:nth-child(4){ transform:translateX(1.15vw); }
  .zone:nth-child(5){ transform:translateX(1.55vw); }
  .zone:nth-child(4):hover,.zone:nth-child(4):focus-visible{
    transform:translate(1.15vw,-6px);
  }
  .zone:nth-child(5):hover,.zone:nth-child(5):focus-visible{
    transform:translate(1.55vw,-6px);
  }
}

/* ===== Prototype 07: one-page project accordion ===== */
.cards{display:none}
.project-list{border-top:1px solid rgba(255,255,255,.25)}
.project-item{border-bottom:1px solid rgba(255,255,255,.25)}
.project-toggle{width:100%;border:0;background:transparent;color:#fff;display:grid;grid-template-columns:72px minmax(220px,1.3fr) 1fr auto;gap:24px;align-items:center;text-align:left;padding:27px 4px;cursor:pointer;transition:padding .35s,background .35s}
.project-toggle:hover,.project-toggle:focus-visible{outline:none;background:linear-gradient(90deg,rgba(255,25,113,.09),rgba(217,255,50,.04),transparent);padding-left:18px;padding-right:18px}
.project-no{font-size:10px;letter-spacing:.22em;opacity:.55}
.project-toggle h3{margin:0;font-size:clamp(24px,3vw,48px);font-weight:400;letter-spacing:-.025em}
.project-teaser{font-size:13px;line-height:1.5;color:#bdbdb8;max-width:520px}
.project-plus{width:40px;height:40px;border:1px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;font-size:23px;font-weight:200;transition:transform .4s,background .3s,color .3s}
.project-item.open .project-plus{transform:rotate(45deg);background:#fff;color:#050505}
.project-detail{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .65s cubic-bezier(.2,.75,.2,1),opacity .45s}
.project-item.open .project-detail{grid-template-rows:1fr;opacity:1}
.project-detail-inner{overflow:hidden}
.project-detail-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:5vw;padding:18px 4px 70px}
.project-visual{min-height:480px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.18);background:
 radial-gradient(circle at 30% 35%,var(--c1),transparent 24%),
 radial-gradient(circle at 70% 50%,var(--c2),transparent 30%),
 linear-gradient(145deg,#171717,#050505)}
.project-visual:before,.project-visual:after{content:"";position:absolute;inset:-15%;border:1px solid rgba(255,255,255,.2);transform:rotate(22deg) skewX(-12deg)}
.project-visual:after{transform:rotate(-17deg) skewX(18deg);inset:8% -22%}
.project-visual span{position:absolute;left:28px;bottom:24px;font-size:10px;letter-spacing:.24em;opacity:.7}
.project-copy{display:flex;flex-direction:column;justify-content:space-between;gap:45px}
.project-copy .body{font-size:clamp(16px,1.25vw,20px);line-height:1.65;color:#d3d1cc}
.meta{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.2)}
.meta-row{display:grid;grid-template-columns:155px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.meta dt{font-size:9px;letter-spacing:.2em;opacity:.5;text-transform:uppercase}
.meta dd{margin:0;font-size:13px;line-height:1.5}
.project-links{display:flex;flex-wrap:wrap;gap:9px}
.project-links a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);padding:9px 12px;font-size:10px;letter-spacing:.12em}
.project-links a:hover{background:#fff;color:#050505}
@media(max-width:800px){
 .project-toggle{grid-template-columns:38px 1fr auto;gap:12px;padding:20px 0}
 .project-teaser{display:none}.project-toggle h3{font-size:28px}
 .project-detail-grid{grid-template-columns:1fr;padding:8px 0 50px;gap:28px}
 .project-visual{min-height:330px}.meta-row{grid-template-columns:115px 1fr}
}

/* ===== Prototype 08: visual project gallery ===== */
.project-list{display:grid;grid-template-columns:repeat(12,1fr);gap:52px 18px;border-top:0}
.project-item{border:0;grid-column:span 4;min-width:0}
.project-item:nth-child(3n+2){grid-column:span 5}
.project-item:nth-child(3n+3){grid-column:span 3}
.project-toggle{display:block;padding:0;background:transparent!important}
.project-toggle:hover,.project-toggle:focus-visible{padding:0}
.project-thumb{aspect-ratio:4/3;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:#111}
.project-item:nth-child(3n+2) .project-thumb{aspect-ratio:5/4}
.project-item:nth-child(3n+3) .project-thumb{aspect-ratio:3/4}
.project-thumb-inner{position:absolute;inset:0;background:
 radial-gradient(circle at 28% 32%,var(--c1),transparent 26%),
 radial-gradient(circle at 72% 54%,var(--c2),transparent 30%),
 linear-gradient(135deg,#161616,#050505);transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .5s}
.project-thumb-inner:before,.project-thumb-inner:after{content:"";position:absolute;inset:-20%;border:1px solid rgba(255,255,255,.2);transform:rotate(22deg) skewX(-14deg)}
.project-thumb-inner:after{transform:rotate(-16deg) skewX(17deg);inset:10% -24%}
.project-thumb-label{position:absolute;left:18px;top:17px;font-size:9px;letter-spacing:.2em;opacity:.62}
.project-thumb-arrow{position:absolute;right:16px;top:13px;width:36px;height:36px;border:1px solid rgba(255,255,255,.75);border-radius:50%;display:grid;place-items:center;font-size:18px;transition:background .3s,color .3s,transform .4s}
.project-caption{padding-top:15px;text-align:left}
.project-caption h3{font-size:clamp(22px,2.2vw,36px);font-weight:400;letter-spacing:-.02em;margin:0 0 8px}
.project-caption p{font-size:12px;line-height:1.5;color:#aaa;margin:0;max-width:430px}
.project-item.open{grid-column:1/-1!important}
.project-item.open .project-toggle{display:grid;grid-template-columns:minmax(280px,.8fr) 1fr;gap:28px;align-items:end}
.project-item.open .project-thumb{aspect-ratio:16/7}
.project-item.open .project-caption{padding:0 0 4px}
.project-item.open .project-thumb-arrow{transform:rotate(45deg);background:#fff;color:#050505}
.project-detail{grid-column:1/-1}
.project-item.open .project-detail{margin-top:32px}
.project-detail-grid{grid-template-columns:1.15fr .85fr}
.media-stack{display:grid;gap:14px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gallery-shot{min-height:260px;border:1px solid rgba(255,255,255,.15);position:relative;overflow:hidden;background:
 radial-gradient(circle at var(--gx) var(--gy),var(--gc),transparent 34%),linear-gradient(145deg,#141414,#060606)}
.gallery-shot:nth-child(2){margin-top:60px}
.video-placeholder{min-height:340px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 50%,rgba(255,25,113,.17),transparent 32%),#080808}
.play{width:72px;height:72px;border:1px solid white;border-radius:50%;display:grid;place-items:center;font-size:24px;padding-left:5px}
.video-placeholder small{position:absolute;left:18px;bottom:16px;letter-spacing:.18em;opacity:.6}
@media (hover:hover) and (pointer:fine){
 .project-toggle:hover .project-thumb-inner{transform:scale(1.035);filter:saturate(1.18) brightness(1.08)}
 .project-toggle:hover .project-thumb-arrow{background:#fff;color:#050505}
}
@media(max-width:800px){
 .project-list{display:block}.project-item{margin-bottom:46px}
 .project-item .project-thumb,.project-item:nth-child(n) .project-thumb{aspect-ratio:4/3}
 .project-item.open .project-toggle{display:block}
 .project-item.open .project-caption{padding-top:15px}
 .project-detail-grid{grid-template-columns:1fr}
 .gallery-shot{min-height:210px}.gallery-shot:nth-child(2){margin-top:25px}
 .video-placeholder{min-height:260px}
}

/* CMS media */
.project-thumb>img,.gallery-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.project-thumb>img{transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .5s}
.gallery-image{background:#080808}
.video-placeholder{text-decoration:none;color:inherit}
.meta-row a{color:inherit;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.project-toggle:hover .project-thumb>img{transform:scale(1.035);filter:saturate(1.08) brightness(1.04)}}

/* CMS live preview: same website, only motion is suppressed for editing. */
.cms-preview-mode{scroll-behavior:auto!important}
.cms-preview-mode *{scroll-behavior:auto!important}
.cms-preview-mode .hero,.cms-preview-mode .fan,.cms-preview-mode .project-detail{transition:none!important}