/* Original concept gallery inspired by Vertex's curved showcase composition. */
.vertex-hero{padding:50px 0 24px;background:#050609;overflow:hidden;isolation:isolate}
.vertex-hero:before{display:none}
.vertex-heading{position:relative;z-index:2;text-align:center}
.studio-pill{display:inline-block;padding:7px 13px;border:1px solid #76b8fb40;border-radius:30px;background:#13223950;color:#b6cce5;font-size:10px;letter-spacing:.06em}
.vertex-hero h1{font-family:var(--font);font-size:clamp(38px,4.4vw,66px);font-weight:850;line-height:1.02;letter-spacing:-.055em;margin:23px 0 20px;color:#fff}
.vertex-hero h1 span{color:#e2eafa}
.vertex-heading p{font-size:14px;line-height:1.6;color:#a2abb9}
.vertex-hero .hero-cta{justify-content:center;align-items:center;gap:26px;margin-top:25px}
.vertex-hero .btn-primary{border:1px solid #7bb4ee80;border-radius:9px;background:linear-gradient(180deg,#172b40,#09121c 65%,#235477);box-shadow:0 4px 18px #5dc9ff24,inset 0 -2px 7px #76d2ff60;font-size:13px;padding:12px 18px;gap:18px}
.hero-work-link{font-size:12px;text-underline-offset:5px;color:#bec8d5;min-height:44px;display:inline-flex;align-items:center}

/* A scrollable gallery: every preview stays inside its own card. */
.showcase-stage{max-width:1440px;margin:38px auto 24px;position:relative}
.carousel-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;color:#a9b8cc;font-size:12px}
.carousel-arrows{display:flex;align-items:center;gap:14px;white-space:nowrap}
.carousel-arrows button{width:44px;height:44px;border:1px solid #41536b;border-radius:50%;background:#101a27;color:#e5efff;font:inherit;font-size:22px;cursor:pointer}
.carousel-arrows button:hover{background:#24364d;border-color:#a1ccff}
.carousel-arrows button:disabled{opacity:.35;cursor:default}
#conceptCount{font-variant-numeric:tabular-nums;font-size:11px;letter-spacing:.08em}
.concept-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scroll-padding-inline:24px;padding:8px 24px 24px;scrollbar-width:thin;scrollbar-color:#41536b #0b111c}
.concept-card{flex:0 0 min(76vw,650px);min-width:0;scroll-snap-align:start;background:#0b111c;border:1px solid #35465c;border-radius:14px;overflow:hidden;container-type:inline-size}
.concept-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;font-size:10px;letter-spacing:.06em;color:#b5c8df}
.concept-topline span:last-child{color:#96a9bf}
.concept-card>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.mini-site{aspect-ratio:3/2;position:relative;overflow:hidden;padding:6%;isolation:isolate}
.mini-nav,.mini-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:2}
.mini-nav b{font-size:2.4cqw;letter-spacing:-.04em}.mini-nav span,.mini-bottom{font-size:1.15cqw;letter-spacing:.08em}
.mini-copy{position:relative;z-index:2;margin-top:12%}.mini-copy small{font-size:1.3cqw;letter-spacing:.16em}.mini-copy h2{font-size:7cqw;line-height:1.02;letter-spacing:-.05em;margin:3% 0 6%;max-width:11ch}.mini-cta{display:inline-block;padding:2% 4%;font-size:1.6cqw;border-radius:30px;background:currentColor}.mini-bottom{position:absolute;bottom:6%;left:6%;right:6%}
.mini-roof{background:#192f42;color:#f5f0e2}.mini-roof .mini-cta{background:#f2b56b;color:#192f42}.roof-art{position:absolute;right:-7%;top:31%;width:55%;height:80%;transform:rotate(-30deg)}.roof-art i{display:block;height:20%;margin:4%;border:1px solid #a4bdc0;background:linear-gradient(130deg,#76929e,#223c50);box-shadow:0 12px 25px #0004}
.mini-food{background:#f47751;color:#412414}.mini-food .mini-nav b{font-family:Georgia,serif;font-size:4cqw}.mini-food .mini-copy h2{font-family:Georgia,serif;font-weight:400}.mini-food .mini-cta{background:#412414;color:#fff2dc}.food-art{position:absolute;right:-3%;top:26%;width:46%;height:60%;border-radius:50%;border:2px solid #412414;background:#f9d77b;display:grid;place-content:center;text-align:center;font-size:9cqw;line-height:.8;font-weight:900;transform:rotate(14deg);box-shadow:8px 9px 0 #412414}.food-art span{font-size:1.5cqw;line-height:3;letter-spacing:.1em}
.mini-fitness{background:#dddcca;color:#263b2e}.mini-fitness .mini-cta{background:#263b2e;color:#f0f5dd}.fitness-art{position:absolute;right:-4%;top:22%;width:48%;height:90%;transform:rotate(25deg)}.fitness-art i{display:block;width:100%;height:22%;border:18px solid #617c4f;border-radius:50%;margin-bottom:5%;box-shadow:12px 16px 20px #263b2e22}.fitness-art i:nth-child(2){border-color:#8ca776}.fitness-art i:nth-child(3){border-color:#b2c198}
.concept-controls{display:flex;justify-content:center;gap:8px;padding:0 20px;flex-wrap:wrap}
.concept-controls button{font:inherit;font-size:12px;min-height:44px;padding:10px 18px;border:1px solid #293443;border-radius:30px;background:#0d131b;color:#a9b8cc;cursor:pointer}
.concept-controls button[aria-pressed=true]{background:#dcecff;color:#102034;border-color:#dcecff}
.concept-controls button:hover{border-color:#a1ccff}
.showcase-caption{display:flex;justify-content:center;gap:25px;font-size:10px;color:#939fac;padding:20px 22px 0}.showcase-caption a{color:#c0d9f6;text-underline-offset:4px}
@media(max-width:700px){.vertex-hero{padding:30px 0 24px}.studio-pill{font-size:8px}.vertex-hero h1{font-size:clamp(27px,6.8vw,47px)!important;line-height:1.07}.vertex-heading p{font-size:12px;max-width:34ch;margin:auto}.vertex-heading p br{display:none}.hero-cta .btn{width:auto}.concept-track{gap:14px;padding-inline:16px;scroll-padding-inline:16px}.concept-card{flex-basis:88vw}.concept-topline{padding:12px;font-size:8px}.carousel-toolbar{font-size:11px}.carousel-arrows{gap:9px}.showcase-caption{font-size:9px;gap:10px;flex-wrap:wrap}.fitness-art i{border-width:10px}}
.studio-header{position:sticky;top:12px;max-width:1040px;margin:12px auto 0;background:#090f18e8;border:1px solid #51657950;border-radius:18px;box-shadow:0 10px 35px #0005;backdrop-filter:blur(20px)}
.studio-header .nav{height:62px;padding:0 18px;gap:20px}
.studio-header .brand{font-family:var(--font);font-size:14px;letter-spacing:-.05em;font-weight:650;gap:8px}
.studio-header .brand b{color:#becfe2;font-weight:650}.studio-header .brand .mark{width:25px;height:25px}
.studio-header .nav-links{gap:22px}.studio-header .nav-links a{font-size:12px;color:#adbbcd}
.studio-header .nav-cta .btn{background:linear-gradient(#24394f,#111f30);border:1px solid #7499bd75;box-shadow:inset 0 -2px 6px #69bdff30;font-size:12px;padding:10px 15px;border-radius:9px}
.studio-header .nav-cta .btn svg{display:none}.studio-header .lang{border:none;padding:0}.studio-header .lang button{font-size:10px;padding:5px 7px;min-width:30px}.studio-header .lang button[aria-pressed=true]{background:#24364d}
@media(max-width:1100px){.studio-header{margin:10px 16px 0}.studio-header .nav{gap:12px}}
@media(max-width:1000px){.studio-header .nav-links{top:70px;left:0;right:0;border:1px solid #51657950;border-radius:14px;background:#090f18fa}.studio-header .nav-links a{font-size:15px}.studio-header .navtoggle{border-color:#51657950}}
@media(max-width:700px){.concept-controls{gap:6px}.concept-controls button{font-size:11px;padding:9px 13px}.studio-header{top:8px;margin:8px 10px 0;border-radius:13px}.studio-header .nav{padding:0 10px;height:58px;gap:8px}.studio-header .brand>span{display:inline}.studio-header .brand{font-size:11px;gap:5px}.studio-header .brand .mark{width:20px;height:20px}.studio-header .nav-cta{gap:5px}.studio-header .nav-cta .btn{padding:9px 10px;font-size:10px}.studio-header .lang button{min-width:25px;padding:5px}.studio-header .navtoggle{width:36px;height:40px}.studio-header .nav-links{top:65px}}
/* Vertex's compact portrait-card arc: all seven designs share one stage. */
.showcase-stage{max-width:1600px;margin:42px auto 20px;background:radial-gradient(ellipse at 50% 75%,#16487936,transparent 65%)}
.carousel-toolbar{justify-content:center;margin-bottom:0}.carousel-toolbar>span{display:none}.carousel-arrows{gap:20px}
.concept-track{display:block;position:relative;height:440px;width:100%;overflow:visible;padding:0;perspective:1400px;touch-action:pan-y;scroll-snap-type:none;outline-offset:-5px}
.concept-card{position:absolute;left:50%;top:90px;width:13.2%;height:310px;border-radius:12px;transform:translateX(calc(-50% + var(--slot,0)*108%)) translateY(var(--rise,0px)) rotateY(var(--turn,0deg)) rotateZ(var(--tilt,0deg));transform-origin:center center;transition:transform .65s cubic-bezier(.22,.7,.22,1),border-color .3s;box-shadow:0 15px 40px #0008;cursor:pointer;container-type:inline-size;background:#111822}
.concept-card[aria-current=true]{border-color:#91bde8;box-shadow:0 0 25px #5098d32b,0 20px 40px #0008}
.concept-topline{padding:10px 9px;font-size:6px;gap:4px;letter-spacing:.02em;min-height:30px}.concept-topline span:last-child{display:none}
.concept-card>img{height:calc(100% - 30px);width:100%;object-fit:cover;object-position:50% top;aspect-ratio:auto}
.mini-site{height:calc(100% - 30px);aspect-ratio:auto;padding:10%}.mini-nav b{font-size:7cqw}.mini-nav span{display:none}.mini-copy{margin-top:25%;}.mini-copy small{font-size:3.5cqw}.mini-copy h2{font-size:13cqw;margin-top:10%;line-height:1.08}.mini-cta{font-size:3.5cqw;padding:7% 9%;margin-top:12%}.mini-bottom{font-size:3cqw;bottom:6%;left:10%;right:10%}.mini-bottom span:last-child:not(:first-child){display:none}
.roof-art{top:62%;right:-12%;width:85%;height:60%;opacity:.8}.food-art{top:61%;right:5%;width:66%;height:35%;font-size:17cqw}.food-art span{font-size:3cqw}.fitness-art{top:63%;right:0;width:85%;height:60%}.fitness-art i{border-width:10px}
.mini-salon{background:#dac1bc;color:#573f43}.mini-salon .mini-copy h2{font-family:Georgia,serif;font-weight:400}.mini-salon .mini-cta{background:#573f43;color:#fff2eb}.salon-art{position:absolute;right:12%;bottom:-10%;width:70%;height:45%;border-radius:50% 50% 0 0;background:linear-gradient(120deg,#f6e3d3,#a66f66);box-shadow:inset 10px 8px 25px #fff5}
@media(min-width:1400px){.concept-card{height:355px}.concept-track{height:485px}}
@media(max-width:1000px){.concept-track{width:1100px;left:50%;margin-left:-550px;height:410px}.concept-card{height:290px}.concept-controls{max-width:620px;margin:auto}}
@media(max-width:700px){.showcase-stage{margin-top:28px}.concept-track{width:850px;margin-left:-425px;height:350px}.concept-card{height:240px;top:70px;border-radius:8px}.concept-topline{font-size:5px;padding:8px 6px;min-height:25px}.concept-card>img,.mini-site{height:calc(100% - 25px)}.concept-controls button{font-size:10px;min-height:36px;padding:8px 11px}.carousel-arrows button{width:38px;height:38px}.fitness-art i{border-width:7px}}
@media(prefers-reduced-motion:reduce){.concept-card{transition:none}}
/* Generated mobile pages keep their full 1:2 composition, with no crop. */
.concept-card{height:auto;overflow:hidden}
.concept-card>img{display:block;width:100%;height:auto;aspect-ratio:1/2;object-fit:contain;object-position:center}
.concept-track{height:calc(26.4vw + 160px);max-height:583px}
@media(max-width:1000px){.concept-track{height:420px}}
@media(max-width:700px){.concept-track{height:355px}}

/* Header-free homepage: bring the hero forward and keep language in the footer. */
html{scroll-padding-top:24px}
.vertex-hero{padding-top:28px}
.vertex-hero h1{margin-top:18px}
.showcase-stage{margin-top:24px}
/* The perspective on .concept-track opens a stacking context, so a card's own
   z-index can never lift it past the hero copy — the stage itself has to rise.
   Scoped to the moment a card is actually lifted, so the resting fan stays
   behind the headline and can't sit over the CTA. */
.showcase-stage:has(.concept-card:hover),
.showcase-stage:has(.concept-card:focus-visible),
.showcase-stage:has(.concept-card.is-inspecting){z-index:3}

/* The two CTAs wrap onto separate lines on a phone, where a 26px gap between
   every element leaves the block feeling scattered. */
@media(max-width:700px){
  .vertex-hero .hero-cta{gap:14px;margin-top:20px}
  .vertex-heading .hero-contact-note{margin-top:12px}
  /* Both sit at 13-14px tall, which is a poor finger target for what is the
     tap-to-text number. Vertical padding on an inline link grows the hit area
     without changing the line box, so nothing shifts. */
  .hero-contact-note a,.showcase-caption a{padding:12px 6px}
}
.footer-language{display:flex;justify-content:flex-end;margin:16px 0}
@media(max-width:700px){.vertex-hero{padding-top:22px}.showcase-stage{margin-top:20px}}

.concept-card[data-outside="true"]{opacity:0;pointer-events:none}
.concept-card{transition:transform .85s cubic-bezier(.22,.7,.22,1),opacity .4s,border-color .3s}
#carouselPause{font-size:15px}
#carouselPause .play-symbol{display:none}
#carouselPause[aria-pressed="true"] .play-symbol{display:inline}
#carouselPause[aria-pressed="true"] .pause-symbol{display:none}
@media(prefers-reduced-motion:reduce){.concept-card{transition:none}}

/* Continuous movement is driven by elapsed time, without CSS step transitions. */
.concept-card{transition:border-color .2s;will-change:transform;cursor:zoom-in}
@media(prefers-reduced-motion:reduce){.concept-card{will-change:auto}}

/* Inspect a design in place: lift it gently without covering the gallery. */
/* The track carries perspective:1400px, so the third translate value pushes the
   hovered design physically toward the viewer rather than only scaling it. */
.concept-card{cursor:pointer;scale:1;translate:0 0 0;transition:scale .38s cubic-bezier(.22,.7,.22,1),translate .38s cubic-bezier(.22,.7,.22,1),border-color .25s,box-shadow .35s}
@media(hover:hover) and (pointer:fine){
  .concept-card:hover{scale:1.42;translate:0 -32px 120px;z-index:5;border-color:#cfe6ff;box-shadow:0 34px 80px #000c,0 0 42px #5098d34d}
}
.concept-card:focus-visible{scale:1.42;translate:0 -32px 120px;z-index:5}
@media(prefers-reduced-motion:reduce){.concept-card{transition:none}}

.concept-card.is-inspecting{scale:1.42;translate:0 -32px 120px;z-index:6;border-color:#cfe6ff;box-shadow:0 34px 80px #000c,0 0 46px #5098d34d}

.vertex-heading .hero-contact-note{font-size:11px;line-height:1.8;color:#a9b8cc;margin-top:14px}.hero-contact-note a{color:#c5d8ec;text-underline-offset:3px}
.vertex-heading .hero-contact-note{max-width:none}