@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');
*{box-sizing:border-box}html{background:#050506;scroll-behavior:auto}body{margin:0;background:#050506;color:#f1f0ef;font-family:Manrope,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}#space,.texture{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#space{z-index:0;display:block}.texture{z-index:2;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}.nav{position:fixed;inset:0 0 auto;z-index:10;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:26px clamp(22px,4vw,76px);height:94px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}.wordmark{font-size:20px;text-transform:none;font-weight:600;letter-spacing:-.07em}.wordmark span{color:#aaa49a}.nav-center{justify-self:center;display:flex;gap:34px}.nav-center a{opacity:.48;transition:opacity .2s}.nav-center a:hover,.nav-center .current{opacity:1}.nav-contact{justify-self:end;border-bottom:1px solid rgba(250,250,250,.46);padding:12px 0;white-space:nowrap}.nav-contact span{margin-left:22px}.side-counter{position:fixed;top:50%;right:35px;z-index:8;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;align-items:center;font-size:9px;color:#bbb7b1;letter-spacing:.12em;writing-mode:vertical-rl}.side-counter i{height:42px;width:1px;background:#605e61}.side-caption{position:fixed;left:33px;top:50%;z-index:8;transform:translate(-50%,-50%) rotate(-90deg);font-size:8px;letter-spacing:.27em;opacity:.36;white-space:nowrap}.scroll-hint{position:fixed;z-index:8;bottom:35px;left:clamp(28px,6vw,110px);display:flex;align-items:center;gap:22px;font-size:9px;letter-spacing:.24em;color:#c8c6c6}.scroll-hint b{font-size:19px;font-weight:300;animation:down 1.8s ease-in-out infinite}@keyframes down{50%{transform:translateY(7px)}}#journey{position:relative;z-index:3}.stop{min-height:105vh;position:relative;display:flex;align-items:center;justify-content:center;padding:125px max(8vw,35px);perspective:1200px}.stop:first-child{height:120vh}.stop:last-child{min-height:105vh}.intro{justify-content:flex-start}.intro-inner{position:relative;width:min(720px,100%);margin-left:5vw;transform-origin:left center}.eyebrow,.number,.visual-label{display:block;font-size:10px;font-weight:500;letter-spacing:.24em;color:#a2a0a1;text-transform:uppercase}.intro h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(90px,13.6vw,240px);font-weight:400;letter-spacing:-.085em;line-height:.86;margin:25px 0 26px;color:#e5e3e5}.intro h1 em,.stop h2 em{font-weight:400;color:#a6a1aa}.intro p{line-height:2.05;font-size:13px;color:#97949a;margin:0;max-width:420px}.small-rule{width:52px;height:1px;background:#717078;margin:45px 0 25px}.number{font-size:9px}.floating-card{background:linear-gradient(140deg,rgba(29,29,33,.75),rgba(12,12,15,.63));border:1px solid rgba(255,255,255,.09);box-shadow:0 35px 120px rgba(0,0,0,.25);backdrop-filter:blur(12px)}.philosophy{justify-content:flex-end}.text-card{width:min(590px,100%);padding:clamp(36px,5.5vw,90px);transform:rotateY(-4deg)}.stop h2{font-size:clamp(45px,5.6vw,93px);font-family:'Playfair Display',Georgia,serif;line-height:1.08;letter-spacing:-.06em;font-weight:400;margin:32px 0}.stop h2 em{font-style:italic}.stop p{font-size:clamp(13px,1vw,16px);line-height:2.1;color:#aaa6ae;max-width:470px}.side-note{position:absolute;bottom:25%;left:8%;font-size:10px;letter-spacing:.3em;line-height:2.2;color:#79757f}.message{justify-content:space-around;gap:4vw}.visual-frame{flex:0 1 440px;height:min(550px,55vw);min-height:350px;border:1px solid rgba(255,255,255,.13);position:relative;background:radial-gradient(ellipse at 48% 45%,#38343f 0%,#18181e 40%,#09090d 80%);transform:rotateY(10deg) rotateZ(-3deg);box-shadow:30px 45px 100px #0006;overflow:hidden}.portrait-art{position:absolute;inset:0;filter:contrast(1.3)}.orb{position:absolute;border-radius:50%;filter:blur(3px)}.orb-a{height:280px;width:280px;top:22%;left:14%;background:radial-gradient(circle at 35% 30%,#8d8690 0%,#31323b 34%,#0e0e15 72%);box-shadow:-15px -20px 35px #bbb4cd15}.orb-b{height:160px;width:160px;top:46%;left:51%;background:radial-gradient(circle at 30% 30%,#7b7d8a,#10111b 68%);box-shadow:0 0 75px #67627555}.strand{position:absolute;width:150%;height:40%;top:30%;left:-30%;border:2px solid #b2aab1;border-radius:50%;transform:rotate(-31deg);filter:drop-shadow(0 0 12px #fff5)}.visual-label{position:absolute;bottom:25px;left:25px;font-size:9px}.message-card{flex:0 1 540px;padding:clamp(34px,4vw,70px);transform:rotateY(-7deg)}.signature{display:block;margin-top:36px;color:#d2d0d1;font-family:'Playfair Display',serif;font-style:italic;font-size:30px}.works{flex-direction:column;align-items:stretch;gap:40px}.section-lead{padding-left:4%}.work-panels{display:grid;grid-template-columns:1fr 1fr;gap:32px;perspective:1000px}.work-tile{display:flex;flex-direction:column;gap:13px;transition:transform .4s}.work-tile:hover{transform:translateY(-12px)}.tile-art{display:grid;place-items:center;height:clamp(250px,26vw,430px);background:linear-gradient(128deg,#2a2b30,#101016);border:1px solid #ffffff26;position:relative;overflow:hidden}.tile-art:before{content:"";position:absolute;width:70%;height:70%;border:1px solid #c7c1ca88;border-radius:50%;transform:rotate(-35deg) scale(1.5,.6);box-shadow:0 0 65px #a1a0b322}.tile-two:before{border-radius:0;transform:rotate(37deg) scale(.7,1.1)}.tile-art b{font-family:'Playfair Display',serif;font-size:clamp(100px,16vw,260px);font-weight:400;color:#ffffff0f}.work-tile strong{font-size:18px;font-weight:400}.work-tile small{font-size:9px;letter-spacing:.2em;color:#8e8d95}.company{width:min(100%,1050px);margin:auto;padding:65px;background:rgba(18,18,22,.73);border:1px solid #ffffff13;backdrop-filter:blur(16px)}.details{display:grid;grid-template-columns:1fr 1fr;gap:30px 60px;margin:50px 0 60px}.details div{display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #ffffff24;padding-bottom:20px}.details span{font-size:10px;letter-spacing:.15em;color:#8c8993}.details strong{font-size:15px;font-weight:400}.big-link{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff6b;padding-top:24px;font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,65px)}.big-link span{font:30px Manrope}.reveal{opacity:0;transform:translate3d(0,65px,-110px) rotateX(5deg);filter:blur(4px);transition:opacity 1s,transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.1s}.reveal.visible{opacity:1;transform:translate3d(0,0,0) rotateX(0);filter:blur(0)}@media(max-width:800px){.nav{grid-template-columns:1fr auto;gap:10px;padding:20px;height:auto}.nav-center{grid-column:1/3;grid-row:2;gap:18px;justify-self:start;font-size:10px}.nav-contact{font-size:10px}.side-caption,.side-counter{display:none}.stop{padding:145px 25px 90px;min-height:100svh}.intro-inner{margin:0}.intro h1{font-size:clamp(82px,20vw,155px)}.message{flex-direction:column}.visual-frame{width:100%;height:300px;flex:none}.message-card{width:100%;flex:none}.work-panels{grid-template-columns:1fr}.company{padding:28px}.details{grid-template-columns:1fr}.scroll-hint{bottom:20px;left:25px}.text-card{padding:33px}.stop h2{font-size:clamp(42px,11vw,75px)}}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;filter:none;transition:none}.scroll-hint b{animation:none}}

/* v14 — actual perspective choreography for foreground planes */
@media (min-width:801px){
  #journey{perspective:1050px;perspective-origin:50% 48%;transform-style:preserve-3d}
  .stop{perspective:1050px;perspective-origin:50% 50%;transform-style:preserve-3d;overflow:visible}
  .floating-card,.visual-frame,.work-tile,.company,.intro-inner,.section-lead{
    transform-style:preserve-3d;will-change:transform,opacity;
    transition:none!important;filter:none!important;
    backface-visibility:visible;
    transform:translate3d(var(--tx,0px),var(--ty,0px),var(--tz,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,1))!important;
    opacity:var(--visibility,1)!important;
  }
  .floating-card,.visual-frame,.work-tile,.company{border-color:rgba(255,255,255,.19);box-shadow:24px 35px 70px rgba(0,0,0,.45),-1px -1px 0 rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.13)}
  .floating-card:after,.company:after,.visual-frame:after,.tile-art:after{content:"";position:absolute;left:100%;top:9px;height:calc(100% - 9px);width:18px;background:linear-gradient(90deg,#303039,#09090c);transform-origin:left center;transform:rotateY(85deg);pointer-events:none;opacity:.7}
  .floating-card:before,.company:before{content:"";position:absolute;top:100%;left:9px;width:calc(100% - 9px);height:17px;background:linear-gradient(#18171d,#070708);transform-origin:center top;transform:rotateX(-82deg);pointer-events:none;opacity:.68}
  .floating-card,.visual-frame,.company,.tile-art{position:relative}
  .floating-card>*,.company>*,.visual-frame>*,.tile-art>*{transform:translateZ(16px);position:relative}
  .message .visual-frame{z-index:2}
  .message .message-card{z-index:3}
  .stop:before{content:"";position:absolute;inset:5% 4%;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(110,108,136,.055),transparent 65%);opacity:var(--section-glow,.3)}
}
@media (max-width:800px){.reveal{filter:none}}
/* v15: centered focal plane and restrained depth shading */
@media(min-width:801px){
  #journey,.stop{perspective:1300px;perspective-origin:50% 50%}
  .floating-card,.visual-frame,.company{box-shadow:16px 25px 90px rgba(0,0,0,.53),0 0 1px rgba(250,250,255,.22),inset 0 1px 0 rgba(255,255,255,.13)}
  .floating-card:after,.company:after,.visual-frame:after{width:12px;opacity:.62}
  .floating-card:before,.company:before{height:12px;opacity:.6}
}

/* V16: continuous spatial camera, consistent single vanishing point */
@media(min-width:801px){
 #journey{perspective:none;transform-style:flat}
 .stop{perspective:1100px;perspective-origin:50% 50%;transform-style:preserve-3d;isolation:auto}
 .stop:after{content:"";position:absolute;inset:12% 5%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 52%,rgba(144,153,185,.035),transparent 64%)}
 .floating-card,.visual-frame,.work-tile,.company,.intro-inner,.section-lead{transform-origin:50% 50%;backface-visibility:visible;transition:none!important;transform:translate3d(var(--tx,0px),var(--ty,0px),var(--tz,0px)) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) rotateZ(var(--rz,0deg)) scale(var(--sc,1))!important;opacity:var(--visibility,1)!important;filter:none!important}
 .floating-card,.visual-frame,.company{box-shadow:0 50px 125px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.14),0 0 55px rgba(115,112,143,.055)}
 .floating-card:after,.visual-frame:after,.company:after{width:15px;opacity:.74;background:linear-gradient(90deg,rgba(64,64,76,.84),rgba(9,9,14,.96));transform:rotateY(83deg)}
 .floating-card:before,.company:before{height:15px;opacity:.78}
 .work-tile:hover{filter:none;}
}

/* v17: camera-stage precision and believable in-depth card relief */
@media(min-width:801px){
 .stop{perspective:1200px;perspective-origin:50% 50%}
 .floating-card,.visual-frame,.company{box-shadow:0 42px 100px #0009,0 0 0 1px #ffffff09,inset 0 1px 0 #ffffff22}
 .floating-card:after,.visual-frame:after,.company:after{width:12px;transform:rotateY(88deg);background:linear-gradient(90deg,#55535e,#15151b);opacity:.72}
 .floating-card:before,.company:before{height:12px;transform:rotateX(-88deg);background:linear-gradient(#323039,#0b0b10)}
}


/* v18: optical depth inside each scene; foreground typography floats over the plane. */
@media (min-width:801px){
  .spatial-mode .floating-card,
  .spatial-mode .visual-frame,
  .spatial-mode .company,
  .spatial-mode .work-tile,
  .spatial-mode .intro-inner,
  .spatial-mode .section-lead { transform-style:preserve-3d; }
  .spatial-mode .floating-card > *,
  .spatial-mode .visual-frame > *,
  .spatial-mode .company > *,
  .spatial-mode .work-tile > *,
  .spatial-mode .intro-inner > *,
  .spatial-mode .section-lead > * {
    transform: translate3d(var(--relief-x,0px),var(--relief-y,0px),28px);
    backface-visibility:hidden;
    transition:none!important;
  }
  .spatial-mode .visual-frame .portrait-art{transform:translate3d(calc(var(--relief-x,0px) * -1.8),calc(var(--relief-y,0px) * -1.8),14px) scale(1.055)}
  .spatial-mode .visual-frame .visual-label{transform:translate3d(var(--relief-x,0px),var(--relief-y,0px),46px)}
  .spatial-mode .tile-art{transform:translate3d(var(--relief-x,0px),var(--relief-y,0px),22px)}
  .spatial-mode .work-tile strong,.spatial-mode .work-tile small{transform:translate3d(var(--relief-x,0px),var(--relief-y,0px),42px)}
  .spatial-mode .floating-card:before,.spatial-mode .floating-card:after,
  .spatial-mode .company:before,.spatial-mode .company:after,
  .spatial-mode .visual-frame:after{backface-visibility:visible}
  .spatial-mode .floating-card,.spatial-mode .company{background:linear-gradient(145deg,rgba(29,29,34,.83),rgba(11,11,17,.77));}
}

/* v18 sequence fix: sufficient scroll runway for two and three distinct panels. */
@media (min-width:801px){
  .stop.message{min-height:225vh;}
  .stop.works{min-height:335vh;}
  .stop.contact{min-height:140vh;}
  .spatial-mode .reveal{pointer-events:none;}
  .spatial-mode .reveal[style*="--visibility: 1"]{pointer-events:auto;}
}

/* v18: wider philosophy card, so its headline has comfortable line length. */
@media (min-width:801px){
  .philosophy .text-card{width:min(700px,100%);padding:clamp(36px,4.5vw,72px)}
  /* The last panel now reaches its focus point exactly at the end of scrolling.
     First focal point = .60vh, second = 1.725vh, stride = 1.125vh.
     Final eighth focal point = 8.475vh. The full document needs 9.475vh. */
  .stop.contact{min-height:117vh}
}

/* v25 – Roscherk accent type, matching the first Elemedia scene */
@font-face{font-family:'Roscherk';src:url('fonts/RoscherkSHA.otf') format('opentype');font-display:swap}
.intro h1 em,.stop h2 em,.signature{font-family:'Roscherk','Playfair Display',serif!important;font-weight:400;font-style:normal!important;letter-spacing:0!important}
.big-link{font-family:'Roscherk','Playfair Display',serif}
.project-art{padding:0;border-radius:4px;background:#141417;display:block}
.project-art:before,.project-art:after{display:none!important}
.project-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:3px;transition:transform .6s ease}
.project-tile:hover .project-art img{transform:scale(1.045)}
.project-tile strong{display:flex;align-items:center;justify-content:space-between;gap:10px}
.project-tile strong span{font-size:19px;color:#afa8bb}
.contact-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:42px 0}
.contact-details div{min-width:0}
.contact-details strong{overflow-wrap:anywhere}
.contact-details a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.phone-pending{color:#9d99a5!important;font-size:13px!important}
.contact-cta{justify-content:center;gap:30px;text-align:center;padding:22px 28px;border:1px solid rgba(255,255,255,.4);border-radius:16px;background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(255,255,255,.025));font-family:Manrope,sans-serif;font-weight:600;font-size:clamp(24px,3vw,42px);transition:background .3s,transform .3s}
.contact-cta:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.contact-cta span{font-size:clamp(23px,3vw,35px)}
@media(max-width:800px){.contact-details{grid-template-columns:1fr}.project-art{height:auto;aspect-ratio:1.5}.contact-cta{gap:14px;padding:18px}}

/* v26: rounded spatial cards and readable message layout */
.intro h1{font-family:'Roscherk','Playfair Display',serif!important;font-weight:400!important;font-style:normal!important;letter-spacing:0!important;font-size:clamp(90px,13vw,215px)}
.floating-card,.company,.tile-art,.project-art,.project-art img{border-radius:22px;}
.floating-card:before,.floating-card:after,.company:before,.company:after{border-radius:0 10px 10px 0;}
.message{justify-content:center;}
.message-card{width:min(780px,100%);flex:0 1 780px;padding:clamp(36px,4.3vw,70px)}
.message-card h2{font-size:clamp(44px,5vw,82px)}
@media(max-width:800px){.message-card{flex:0 0 auto;width:100%}.intro h1{font-size:clamp(76px,18vw,125px)}}

/* v28: keep the final focus reachable, with standard section spacing */
@media(min-width:801px){.stop.contact{min-height:117vh}}
.project-tile:first-child small{display:block;font-size:clamp(15px,1.5vw,19px);font-weight:650;line-height:1.4;letter-spacing:-.015em;text-transform:none;color:#f3f0f4;max-width:100%;text-wrap:balance}