@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/google-sans-400.woff2') format('woff2')}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/google-sans-500.woff2') format('woff2')}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/google-sans-600.woff2') format('woff2')}
:root{--fig-bg:#f3f3f4;--fig-dark:#111214;--fig-lime:#fafaf8;--fig-width:1216px;--body:'Google Sans','DM Sans',Arial,sans-serif;--display:'Google Sans','DM Sans',Arial,sans-serif}
body{background:var(--fig-bg)}.home-page{padding:0;max-width:none;background:var(--fig-bg)}
header.fig-header{height:112px;padding:24px max(24px,calc((100vw - var(--fig-width))/2));border:0;background:var(--fig-dark);position:absolute;top:0;left:0;width:100%;z-index:20;display:block;max-width:none}
.fig-header .brand{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:64px;height:64px}.fig-header .brand img{max-width:none;margin:0}.fig-header nav{height:64px;display:flex;align-items:center;gap:24px;font:500 14px/24px var(--body)}
.fig-header nav>a{padding:8px 17px;border:0;border-radius:999px;background:transparent;color:#fafaf8;white-space:nowrap}.fig-header nav>a:first-child{background:var(--fig-lime);color:#111214}.fig-header nav>a:last-of-type{background:transparent;color:#fafaf8;border:1px solid #ffffff29}.fig-header nav>a.fig-schedule{margin-left:auto;display:flex;gap:12px;align-items:center;padding:10px 17px}.fig-header nav .language-switch{gap:2px;padding:0;border:0;width:87px;height:32px;margin:0}.fig-header .language-switch a{width:42px;height:32px;min-width:0;padding:4px 8px;background:transparent;color:#c5c6ca;font-size:14px}.fig-header .language-switch a[aria-current]{background:#36383e;color:#fafaf8;text-decoration:none}
body:has(.case-page) .fig-header,body:has(.about) .fig-header{position:relative}
.fig-hero{height:800px;background:var(--fig-dark);color:#fafaf8;padding:232px 24px 0}.fig-hero-content{max-width:var(--fig-width);margin:auto;text-align:center;display:flex;align-items:center;flex-direction:column;gap:32px}.fig-hero-title{font:500 96px/96px var(--display);letter-spacing:0;width:100%;display:flex;flex-direction:column;gap:16px;margin:0}.fig-title-line{display:flex;align-items:center;justify-content:center;gap:24px;white-space:nowrap}.fig-idea-pill{display:block;flex:0 0 144px;height:96px;background:var(--fig-lime);border-radius:999px}.fig-hero-cloud{position:relative;display:block;flex:0 0 96px;height:96px;border-radius:36px;overflow:hidden}.fig-hero-cloud img{position:absolute;left:0;top:0;max-width:none}.fig-hero-cloud img:last-child{mix-blend-mode:plus-lighter}.fig-hero-description{font:400 18px/28px var(--body);color:#c5c6ca;margin:0}.fig-hero .pill{height:56px;padding:15px 24px;font-size:16px;border-color:#ffffff29;color:#fafaf8}.fig-hero .pill:hover{background:var(--fig-lime);color:var(--fig-dark)}
.fig-reel-stage{height:720px;position:relative;background:var(--fig-bg);padding:0 max(24px,calc((100vw - var(--fig-width))/2))}.fig-reel{position:relative;transform:translateY(-96px);aspect-ratio:1216/686;width:100%;box-shadow:0 24px 40px #1112141a;overflow:hidden}.fig-reel>img{width:100%;height:100%;object-fit:cover;display:block}.fig-reel-play{position:absolute;left:32px;bottom:32px;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--fig-lime);display:grid;place-items:center}.fig-reel-play img{max-width:none}.fig-reel-play[hidden],.fig-reel-video[hidden]{display:none}.fig-reel-video{position:absolute;inset:0;width:100%;height:100%;background:#111214;object-fit:contain}.fig-reel-label{position:absolute;right:20px;bottom:20px;padding:4px 10px;border-radius:20px;font-size:11px;background:#111214c9;color:white;pointer-events:none}
.fig-work{padding:96px max(24px,calc((100vw - var(--fig-width))/2));background:#e8e9ec}.fig-work-title{margin-bottom:48px}.fig-work-title h2{font:500 96px/96px var(--display);letter-spacing:0;margin:0 0 8px}.fig-work-title p{font:400 18px/28px var(--body)}.fig-projects{display:flex;flex-direction:column;gap:64px}.fig-project{width:100%;margin:0}.fig-project-goart,.fig-project-loops{width:65.789%;align-self:flex-end}.fig-project-genva{width:74.342%;align-self:flex-start}.fig-project-cover{position:relative;width:100%;aspect-ratio:1216/686;overflow:hidden;background:var(--fig-dark)}.fig-project-link{display:block}.fig-cover-image{position:absolute;width:100%;height:100%;object-fit:cover}.fig-project-meetsense .fig-cover-image{height:132.94%;object-fit:fill;top:.06%;left:0}.fig-gain-wall{position:absolute;width:142.516%;height:166.91%;left:-21.299%;top:-20.263%;object-fit:cover}.fig-gain-blur{position:absolute;width:134.704%;height:119.388%;left:-17.352%;top:0;object-fit:cover}.fig-project-loops .fig-project-cover{background:#fafaf8}.fig-loops-screen{position:absolute;left:7.375%;top:5.1%;width:85.25%;height:auto}.fig-media-placeholder{position:absolute;bottom:20px;left:24px;color:#92959d;font-size:11px}
.fig-project-info{display:flex;align-items:center;gap:24px;margin-top:48px;min-height:120px}.fig-app-icon{width:120px;height:120px;display:block;flex-shrink:0;position:relative}.fig-icon-raster{width:120px;height:120px;object-fit:cover;border-radius:32px}.fig-icon-composite{display:block;position:relative;width:120px;height:120px;overflow:hidden}.fig-icon-composite>img{position:absolute;left:0;top:0;max-width:none}.fig-icon-composite>.meet-symbol{left:20px;top:20px}.fig-project-title{flex:1}.fig-project-title p{font:400 14px/20px var(--body);margin-bottom:8px}.fig-project-title h3{font:600 32px/38px var(--display);letter-spacing:0;margin:0}.fig-year{display:flex;flex-direction:column;gap:8px;text-align:right;padding-right:16px;border-right:1px solid #92959d;min-width:74px}.fig-year span{font:400 14px/20px var(--body)}.fig-year strong{font:600 24px/32px var(--body)}.fig-project-genva .fig-project-info{max-width:800px}.genva-icon{border-radius:32px}.genva-icon>.genva-gradient{width:120px;height:120px;filter:blur(24px);opacity:.75}.genva-icon>.genva-g{left:18.93px;top:18.93px}.genva-icon>.genva-spark{left:50px;top:53px;width:60px;height:56px;object-fit:cover}.trio-icon{border-radius:26.667px;background:radial-gradient(ellipse at top,#ffaf65,#ff6842 34%,#ac3f8b 67%,#5917d5)}.trio-icon>.trio-symbol{left:16px;top:24px}.trio-icon>.trio-word{left:16px;top:91.332px}
.fig-concept{padding:96px 0;background:var(--fig-bg)}.fig-concept-heading{max-width:1216px;margin:0 auto 48px}.fig-concept-heading p{font:400 18px/28px var(--body);margin-bottom:8px}.fig-concept-heading h2{font:500 96px/96px var(--display);letter-spacing:0}.fig-trio-link{display:block}.fig-trio-cover{width:100%;aspect-ratio:1440/810;overflow:hidden;background:#fafaf8}.fig-trio-cover img{width:100%;height:100%;object-fit:cover}.fig-trio-link>.fig-project-info{max-width:1216px;margin:48px auto 0}
@media(min-width:1441px){.fig-hero{height:800px}.fig-reel-stage{height:720px}}
@media(max-width:1300px){.fig-hero-title{font-size:7vw;line-height:1}.fig-concept-heading,.fig-trio-link>.fig-project-info{margin-left:24px;margin-right:24px}.fig-header nav{gap:8px}.fig-header nav>a{padding:8px 12px}.fig-header nav>a.fig-schedule{gap:8px}.fig-hero{padding-top:220px}.fig-work-title h2,.fig-concept-heading h2{font-size:7vw;line-height:1}.fig-reel-stage{height:calc(56.4vw - 28px)}.fig-project-info{gap:20px}}
@media(max-width:800px){header.fig-header{height:148px;padding:16px 20px}.fig-header .brand{top:16px;left:20px;transform:none}.fig-header nav{padding-top:82px;height:auto;gap:4px}.fig-header nav>a{padding:8px 12px;font-size:13px}.fig-header nav>a.fig-schedule{position:absolute;right:116px;top:28px;padding:6px 12px;font-size:12px}.fig-header .language-switch{position:absolute;right:20px;top:32px}.fig-hero{height:600px;padding:220px 20px 0}.fig-hero-title{font-size:7.1vw;gap:12px}.fig-title-line{gap:10px}.fig-idea-pill{height:7.1vw;flex-basis:10.65vw}.fig-hero-cloud{height:7.1vw;flex-basis:7.1vw;border-radius:25%;overflow:hidden}.fig-hero-cloud img{transform:scale(calc(100vw / 1352px));transform-origin:top left}.fig-hero-content{gap:24px}.fig-hero-description{font-size:15px;line-height:24px;max-width:520px}.fig-reel-stage{padding:0 20px;height:calc(56.4vw + 36px)}.fig-reel{transform:translateY(-56px)}.fig-reel-play{left:16px;bottom:16px;width:44px;height:44px}.fig-reel-label{font-size:9px;right:12px;bottom:12px}.fig-work{padding:64px 20px}.fig-work-title h2,.fig-concept-heading h2{font-size:54px;line-height:1.04}.fig-work-title{margin-bottom:36px}.fig-projects{gap:48px}.fig-project-goart,.fig-project-loops,.fig-project-genva{width:100%}.fig-project-info{margin-top:24px;min-height:80px;gap:16px}.fig-app-icon{width:80px;height:80px}.fig-app-icon>*{transform:scale(.666667);transform-origin:top left}.fig-project-title p{font-size:12px;line-height:18px}.fig-project-title h3{font-size:25px;line-height:30px}.fig-year{min-width:48px;padding-right:8px;gap:4px}.fig-year span{font-size:11px}.fig-year strong{font-size:20px}.fig-concept{padding:64px 0}.fig-concept-heading{margin:0 20px 36px}.fig-concept-heading p{font-size:14px}.fig-trio-link>.fig-project-info{margin:24px 20px 0}.fig-trio-cover{aspect-ratio:1.3}.fig-trio-cover img{object-position:60% center}}
@media(max-width:430px){.fig-hero{height:530px;padding-top:205px}.fig-hero-description{font-size:14px}.fig-project-info{gap:12px}.fig-app-icon{width:64px;height:64px}.fig-app-icon>*{transform:scale(.533333)}.fig-project-title h3{font-size:23px}.fig-project-title p{font-size:10px;line-height:15px}.fig-concept-heading h2{font-size:48px}}
.home-page>.breadth,.home-page>.experience,.home-page>.contact{margin-left:0;margin-right:0;width:100%}.home-page>.learning{padding-left:var(--gutter);padding-right:var(--gutter)}
header.fig-header .brand img{width:auto;height:auto;filter:none;display:block}
header.fig-header nav>a:nth-child(3){background:transparent;color:#fafaf8;border:0}
header.fig-header nav .language-switch a[aria-current]{background:#36383e;color:#fafaf8;text-decoration:none;border-radius:999px}
html[lang=tr] .fig-hero-title{font-size:80px}
@media(max-width:1300px){html[lang=tr] .fig-hero-title{font-size:6vw}}
@media(max-width:800px){html[lang=tr] .fig-hero-title{font-size:5.9vw}.fig-header .brand img{transform:scale(.8);transform-origin:top left}}
.genva-icon .genva-soft-light{position:absolute;width:88.463px;height:60.207px;transform:rotate(29.52deg);mix-blend-mode:soft-light}.genva-soft-light.light-a{left:40.908px;top:35.904px}.genva-soft-light.light-b{left:16.908px;top:43.896px}.genva-soft-light>img{position:absolute;left:-110.11px;top:-53.56px;max-width:none}.genva-icon>.genva-gradient{opacity:1;filter:blur(24px)}.genva-logo-layer{position:absolute;width:88px;height:88px;left:16px;top:16px;filter:drop-shadow(0px 3px 3.5px #0000003b)}.genva-logo-layer>.genva-g{position:absolute;left:2.93px;top:2.93px;max-width:none}.genva-logo-layer>.genva-spark{position:absolute;left:39.98px;top:44px;width:45.084px;height:41.067px}.genva-spark-base{position:absolute;transform:rotate(180deg);max-width:none}.genva-spark-object{position:absolute;left:-5.356px;top:-3.125px;width:53.564px;height:48.656px;mask:url('/assets/figma/imgObject.svg') 5.356px 3.125px /45.084px 41.067px no-repeat}.genva-spark-object img{width:100%;height:100%;object-fit:cover;object-position:bottom}.genva-spark-light{position:absolute;left:19.19px;top:8.04px;transform:rotate(54.13deg);mix-blend-mode:soft-light;mask:url('/assets/figma/imgObject.svg') center /45.084px 41.067px no-repeat;width:35px;height:38px}.genva-spark-light img{max-width:none;position:absolute;left:-28px;top:-27px}.genva-spark-light.secondary{left:31.25px;top:25.45px;transform:rotate(-157.44deg) skewX(8.4deg);mix-blend-mode:normal}.genva-spark-light.secondary img{left:-17px;top:-20px}.genva-vector-highlight{position:absolute;left:42.22px;top:30.17px;transform:rotate(-90deg) scaleX(-1);max-width:none}
header.fig-header{position:relative}body:has(.home-page) header.fig-header{position:absolute}
header.fig-header nav .language-switch a[aria-current="true"]{background:#36383e!important;color:#fafaf8!important;border-radius:999px!important}
/* Header states match the filled navigation treatment. */
header.fig-header nav>a:hover,header.fig-header nav>a:focus-visible{background:var(--fig-lime);color:#111214;text-decoration:none}
header.fig-header nav>a.fig-schedule{background:#fafaf8;color:#111214;border-color:#fafaf8}
header.fig-header nav>a.fig-schedule img{filter:brightness(0)}
header.fig-header nav>a.fig-schedule:hover{background:var(--fig-lime);border-color:var(--fig-lime)}
.fig-hero-cloud{border-radius:0;overflow:visible}
.fig-hero-cloud img.hero-cycle-icon{width:96px;height:96px;max-width:none;border-radius:0;opacity:0;transform:translateY(12px) scale(.9);animation:hero-icon-cycle 12s cubic-bezier(.22,1,.36,1) infinite}
.fig-hero-cloud img.hero-cycle-icon:nth-child(1){animation-delay:0s;opacity:1}.fig-hero-cloud img.hero-cycle-icon:nth-child(2){animation-delay:4s}.fig-hero-cloud img.hero-cycle-icon:nth-child(3){animation-delay:8s;mix-blend-mode:normal}
@keyframes hero-icon-cycle{0%,30%{opacity:1;transform:translateY(0) scale(1)}33.333%,96.666%{opacity:0;transform:translateY(-8px) scale(.97)}96.667%{opacity:0;transform:translateY(8px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
.fig-hero-actions{display:flex;align-items:center;gap:14px}.fig-motion-control{width:32px;height:32px;border:1px solid #ffffff29;border-radius:50%;background:transparent;color:#c5c6ca;font-size:13px;padding:0}
.fig-icon-raster{border-radius:0}
.fig-reel-play{width:120px;height:120px;background:transparent;left:24px;bottom:24px;display:grid;place-items:center}
.showreel-ring{position:absolute;inset:0;width:120px;height:120px;animation:showreel-spin 14s linear infinite;overflow:visible;color:var(--fig-lime)}
.showreel-ring text{font:500 12px var(--body);letter-spacing:1px;fill:currentColor}.showreel-play-core{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--fig-lime);color:#111214;transition:transform .35s}.showreel-play-core svg{width:34px;height:34px;margin-left:4px}.fig-reel-play:hover .showreel-play-core{transform:scale(1.08)}
@keyframes showreel-spin{to{transform:rotate(360deg)}}
.fig-motion-card{transition:opacity .8s,transform 1s cubic-bezier(.22,1,.36,1);opacity:0;transform:translateY(65px)}.fig-motion-card.fig-in-view{opacity:1;transform:translateY(0)}
.fig-project-cover,.fig-trio-cover{transition:transform .65s cubic-bezier(.22,1,.36,1),box-shadow .65s}
.fig-project-cover>img,.fig-trio-cover>img{translate:0 var(--scroll-drift,0px);transition:scale .9s cubic-bezier(.22,1,.36,1);will-change:translate,scale}
.fig-project-link:hover .fig-project-cover,.fig-trio-link:hover .fig-trio-cover{transform:translateY(-8px);box-shadow:0 18px 35px #11121418}
.fig-project-link:hover .fig-project-cover>img,.fig-trio-link:hover .fig-trio-cover>img{scale:1.035}
.portfolio-motion-paused .hero-cycle-icon,.portfolio-motion-paused .showreel-ring,.hero-cycle-offscreen .hero-cycle-icon{animation-play-state:paused!important}
.portfolio-motion-paused .fig-motion-card{opacity:1;transform:none;transition:none}.portfolio-motion-paused .fig-project-cover>img,.portfolio-motion-paused .fig-trio-cover>img{translate:none;scale:1;transition:none}
@media(max-width:800px){.fig-hero-cloud img.hero-cycle-icon{width:7.1vw;height:7.1vw;transform:none}.fig-reel-play{width:96px;height:96px;left:12px;bottom:12px}.showreel-ring{width:96px;height:96px}.showreel-play-core{width:56px;height:56px}.showreel-play-core svg{width:28px;height:28px}.fig-reel-label{max-width:50%;text-align:right}}
@media(prefers-reduced-motion:reduce){.fig-hero-cloud img.hero-cycle-icon{animation:none;transform:none;opacity:0}.fig-hero-cloud img.hero-cycle-icon:first-child{opacity:1}.showreel-ring{animation:none}.fig-motion-card{opacity:1;transform:none;transition:none}.fig-project-cover,.fig-trio-cover,.fig-project-cover>img,.fig-trio-cover>img{transition:none!important;transform:none!important;translate:none!important;scale:1!important}}
/* Scroll-linked cover scale, with the image composition moving as a single layer. */
.works-scroll-card{opacity:1;transform:translate3d(0,var(--works-y,0px),0);transition:none;will-change:transform}
.works-motion-layer{position:absolute;inset:0;width:100%;height:100%;transform:scale(calc(var(--works-scale,1) + var(--works-hover,0)));transform-origin:center;transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform}
.works-motion-layer>img{display:block}.fig-project-cover{--works-hover:0;transition:none}
.fig-project-link:hover .fig-project-cover{transform:none;box-shadow:none}
@media(hover:hover){.fig-project-link:hover .fig-project-cover{--works-hover:.045}}
.fig-project-link:focus-visible .fig-project-cover{--works-hover:.045}
.portfolio-motion-paused .works-scroll-card{transform:none}.portfolio-motion-paused .works-motion-layer{transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.works-scroll-card{transform:none!important;will-change:auto}.works-motion-layer{transform:none!important;transition:none!important;will-change:auto}}
/* Showreel control matched to the supplied close-up. */
.fig-reel-play{width:224px;height:224px;left:24px;bottom:24px}
.showreel-ring{width:224px;height:224px;color:#fafaf8}
.showreel-ring text{font:500 10.5px var(--body);letter-spacing:2.1px;fill:currentColor}
.showreel-play-core{width:132px;height:132px;background:#fafaf8}
.showreel-play-core svg{width:52px;height:52px;margin-left:4px}
.fig-reel-play:hover .showreel-play-core{transform:scale(1.05)}
@media(max-width:800px){.fig-reel-play{width:132px;height:132px;left:12px;bottom:12px}.showreel-ring{width:132px;height:132px}.showreel-play-core{width:78px;height:78px}.showreel-play-core svg{width:32px;height:32px}}
header.fig-header nav>a.works-nav{display:inline-flex;align-items:center;gap:5px;background:var(--fig-lime);color:#111214;white-space:nowrap}
.works-count{position:relative;top:-.24em;font-size:.62em;line-height:1;font-weight:500;vertical-align:baseline}
/* Call CTA: outlined default, white fill on hover. */
header.fig-header nav>a.fig-schedule{background:transparent;color:#fafaf8;border:1px solid #36383e;gap:12px;padding:9px 17px;transition:background .25s,color .25s,border-color .25s}
.call-arrow-circle{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#36383e;color:#fafaf8;transition:background .25s}
.call-arrow-circle .call-arrow{width:12px;height:12px}
header.fig-header nav>a.fig-schedule:hover,header.fig-header nav>a.fig-schedule:focus-visible{background:#fafaf8;color:#111214;border-color:#fafaf8}
header.fig-header nav>a.fig-schedule:hover .call-arrow-circle,header.fig-header nav>a.fig-schedule:focus-visible .call-arrow-circle{background:#111214;color:#fafaf8}
@media(max-width:800px){header.fig-header nav>a.fig-schedule{padding:6px 12px;gap:8px}}

.fig-hero-cloud img.hero-cycle-icon{animation-timing-function:linear}
.fig-hero-cloud img.hero-cycle-icon:nth-child(1){animation-delay:0s}.fig-hero-cloud img.hero-cycle-icon:nth-child(2){animation-delay:-8s}.fig-hero-cloud img.hero-cycle-icon:nth-child(3){animation-delay:-4s}
/* Only the current section or hovered navigation item is highlighted. */
header.fig-header nav>a:not(.fig-schedule){background:transparent;color:#fafaf8;text-decoration:none;transition:background .2s,color .2s}
header.fig-header nav>a:not(.fig-schedule):is([aria-current="page"],:hover,:focus-visible){background:var(--fig-lime);color:#111214;text-decoration:none}
.fig-hero .pill:hover,.fig-hero .pill:focus-visible{background:#fafaf8;border-color:#fafaf8;color:#111214}

/* Showreel geometry from Figma 8:23, on the 1216 × 686 media frame. */
.fig-reel::before{content:"";position:absolute;inset:0;background:linear-gradient(194.236deg,rgba(0,0,0,0) 54.327%,#000 101.15%);pointer-events:none;z-index:1}
.fig-reel-play{width:162px;height:156px;left:22px;bottom:23px;background:transparent;display:block;z-index:2;border-radius:0}
.fig-reel-play .showreel-ring{position:absolute;inset:0;width:162px;height:156px;max-width:none}
.fig-reel-play .showreel-play-core{position:absolute;left:34px;top:27px;width:96px;height:96px;display:block;background:#fafaf8}
.showreel-play-core img{position:absolute;left:30px;top:28px;width:40px;height:40px;max-width:none}
.fig-reel-video{z-index:3}.fig-reel-label{z-index:4}
@media(max-width:800px){.fig-reel-play{left:12px;bottom:12px;transform:scale(.7);transform-origin:bottom left}}

/* Hero: staggered text reveal, followed by inline media opening. */
.fig-title-line{animation:hero-title-reveal .8s cubic-bezier(.16,1,.3,1) .4s backwards}
.fig-title-line:nth-child(2){animation-delay:.52s}
.fig-hero-description{animation:hero-title-reveal .7s ease-out .8s backwards}
.fig-hero-actions{animation:hero-title-reveal .7s ease-out .94s backwards}
.fig-idea-pill{--hero-slot-size:144px;animation:hero-slot-open .44s cubic-bezier(.16,1,.3,1) 1.4s backwards}
.fig-hero-cloud{--hero-slot-size:96px;animation:hero-slot-open .44s cubic-bezier(.16,1,.3,1) 1.46s backwards}
.fig-hero-cloud img.hero-cycle-icon{animation-name:hero-icon-soft-cycle;animation-timing-function:linear;will-change:transform,opacity,filter}
@keyframes hero-title-reveal{from{opacity:0;transform:translateY(32px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hero-slot-open{from{flex-basis:0;opacity:0;transform:scale(.78);filter:blur(7px)}to{flex-basis:var(--hero-slot-size);opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes hero-icon-soft-cycle{0%,29%{opacity:1;transform:scale(1);filter:blur(0)}33.333%,95.666%{opacity:0;transform:scale(.78);filter:blur(7px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@media(max-width:800px){.fig-idea-pill{--hero-slot-size:10.65vw}.fig-hero-cloud{--hero-slot-size:7.1vw}}
@media(prefers-reduced-motion:reduce){.fig-title-line,.fig-hero-description,.fig-hero-actions,.fig-idea-pill,.fig-hero-cloud,.fig-hero-cloud img.hero-cycle-icon{animation:none;filter:none;transform:none}.fig-hero-cloud img.hero-cycle-icon{opacity:0}.fig-hero-cloud img.hero-cycle-icon:first-child{opacity:1}}

/* Fixed navigation over a translucent hero-dark surface. */
body header.fig-header,body:has(.home-page) header.fig-header,body:has(.case-page) header.fig-header,body:has(.about) header.fig-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(17,18,20,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
body:has(.case-page),body:has(.about){padding-top:112px}
html{scroll-padding-top:128px}
@media(max-width:800px){body:has(.case-page),body:has(.about){padding-top:148px}html{scroll-padding-top:164px}}

.video-art.youtube-thumbnail{aspect-ratio:16/9;padding:0;overflow:hidden;background:#111214;border-radius:16px;display:block}
.youtube-thumbnail img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.video-card:hover .youtube-thumbnail img{transform:scale(1.035)}
@media(prefers-reduced-motion:reduce){.youtube-thumbnail img{transition:none}}

/* Compact fixed header. */
body header.fig-header{height:80px;padding-top:16px;padding-bottom:16px}
header.fig-header .brand{width:48px;height:48px;top:16px}
header.fig-header .brand img{width:48px;height:48px;transform:none}
header.fig-header nav{height:48px}
body:has(.case-page),body:has(.about){padding-top:80px}
html{scroll-padding-top:96px}
@media(max-width:800px){body header.fig-header{height:116px;padding-top:12px;padding-bottom:12px}header.fig-header .brand{top:12px}header.fig-header nav{padding-top:64px;height:auto}header.fig-header nav>a.fig-schedule{top:20px}header.fig-header .language-switch{top:24px}body:has(.case-page),body:has(.about){padding-top:116px}html{scroll-padding-top:132px}}

.career-company{display:flex;align-items:center;gap:20px}.company-logo{width:72px;height:56px;object-fit:contain;background:#fff;border-radius:8px;padding:8px;flex-shrink:0}.career-company h3{margin:0}

.company-logo[alt="Mobile Ocean logo"]{background:#111214;width:104px}

.fig-project-goart .fig-project-cover{background:#040218;aspect-ratio:800/451}

/* Logo contracts smoothly once the page leaves its opening position. */
header.fig-header .brand{width:64px;height:64px;top:8px;transition:width .25s ease,height .25s ease,top .25s ease}
header.fig-header .brand img{width:100%;height:100%;object-fit:contain}
header.fig-header.is-scrolled .brand{width:48px;height:48px;top:16px}
@media(max-width:800px){header.fig-header .brand{top:4px}header.fig-header.is-scrolled .brand{top:12px}}
@media(prefers-reduced-motion:reduce){header.fig-header .brand{transition:none}}

@media(max-width:800px){
.fig-app-icon{width:96px;height:96px}
.fig-app-icon>*{transform:scale(.8);transform-origin:top left}
.fig-project-info{min-height:96px}

}
/* Scale the complete project identity artwork at smaller viewport widths. */
@media(max-width:1300px){.fig-app-icon{width:72px;height:72px}.fig-app-icon>*{transform:scale(.6);transform-origin:top left}.fig-project-info{min-height:72px;margin-top:32px;gap:20px}}
@media(max-width:800px){.fig-app-icon{width:56px;height:56px}.fig-app-icon>*{transform:scale(.466667)}.fig-project-info{min-height:56px;margin-top:24px;gap:16px}}
@media(max-width:430px){.fig-app-icon{width:48px;height:48px}.fig-app-icon>*{transform:scale(.4)}.fig-project-info{min-height:48px;gap:12px}.fig-project-title h3{font-size:20px;line-height:25px}}

.fig-project-loops .fig-icon-raster{border-radius:32px}

/* Keep the year aligned to the cover edge and the category/title rows. */
@media(max-width:800px){
.fig-project-genva .fig-project-info{max-width:none;width:100%}
.fig-year{flex-shrink:0;gap:8px}
.fig-year strong{line-height:38px}
}
@media(max-width:800px){.fig-year{gap:8px}.fig-year span{line-height:18px}.fig-year strong{line-height:30px}}
@media(max-width:430px){.fig-year span{line-height:15px}.fig-year strong{line-height:25px}}

.mobile-menu-toggle,.mobile-call{display:none}
@media(max-width:800px){
 body header.fig-header{height:112px;padding:24px 16px;display:flex;align-items:center;justify-content:space-between}
 header.fig-header .brand{left:50%;top:24px;transform:translateX(-50%);width:64px;height:64px}
 header.fig-header.is-scrolled .brand{top:32px;width:48px;height:48px}
 .mobile-menu-toggle{display:flex;align-items:center;gap:4px;padding:8px 16px;border:0;border-radius:999px;background:#fafaf8;color:#111214;font:500 16px/24px var(--body);cursor:pointer}
 .mobile-menu-toggle img{width:24px;height:24px}.mobile-call{display:flex;align-items:center;gap:12px;padding:9px 16px;border:1px solid #ffffff29;border-radius:999px;font:500 16px/24px var(--body);color:#fafaf8}
 .mobile-call span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#36383e;font-size:14px}
 header.fig-header nav{display:none;position:absolute;top:112px;left:0;right:0;height:auto;padding:24px 16px 96px;background:rgba(17,18,20,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid #ffffff20;max-height:calc(100dvh - 112px);overflow:auto;box-shadow:0 24px 40px #0005}
 header.fig-header.mobile-menu-open nav{display:flex;flex-direction:column;align-items:stretch;gap:8px}
 header.fig-header nav>a:not(.fig-schedule){font-size:28px;line-height:36px;padding:16px 20px;border-radius:16px;border-bottom:1px solid #ffffff16;display:flex;align-items:center;gap:8px}
 header.fig-header nav>a.fig-schedule{position:static;align-self:flex-start;font-size:16px;margin:20px 0 0;padding:12px 20px}
 header.fig-header .language-switch{display:none;position:absolute;right:20px;top:auto;bottom:24px}
 header.fig-header.mobile-menu-open .language-switch{display:flex}
 body:has(.case-page),body:has(.about){padding-top:112px}html{scroll-padding-top:128px}
}

.hero-mobile-middle{display:none}
@media(max-width:800px){
 .fig-hero{height:720px;padding:208px 16px 0}
 .fig-hero-title{font-size:clamp(34px,11.16vw,48px);line-height:56px;gap:0;position:relative}
 .fig-title-line{gap:8px;min-height:64px}
 .hero-into,.hero-product-word{display:none}
 .hero-mobile-middle{display:block;order:1;line-height:56px}
 .fig-title-line:nth-child(2){order:2;gap:24px}
 .fig-idea-pill{height:64px;flex-basis:96px;--hero-slot-size:96px}
 .fig-hero-cloud{height:64px;flex-basis:64px;--hero-slot-size:64px}
 .fig-hero-cloud img.hero-cycle-icon{width:64px;height:64px}
 .fig-hero-description{font-size:16px;line-height:24px}
 .fig-hero-description br{display:none}
 .fig-hero-description span+span:before{content:' '}
 .fig-hero-content{gap:24px}.fig-hero-actions{margin-top:8px}
 header.fig-header nav>a:not(.fig-schedule){justify-content:center;text-align:center}
 header.fig-header nav>a.fig-schedule{align-self:center}
 header.fig-header .language-switch{right:50%;transform:translateX(50%)}
}
@media(max-width:380px){.fig-hero-title{font-size:9.8vw}.fig-idea-pill{flex-basis:80px;height:56px;--hero-slot-size:80px}.fig-title-line:nth-child(2){gap:16px}}

@media(max-width:800px){html[lang=tr] .fig-hero-title{font-size:7vw;line-height:1.2}html[lang=tr] .hero-mobile-middle{font-size:6vw}html[lang=tr] .hero-product-word{display:inline}html[lang=tr] .fig-title-line:nth-child(2){gap:8px}}

.language-full,.mobile-menu-overlay{display:none}
@media(max-width:800px){
 .language-switch .language-short{display:none}.language-switch .language-full{display:inline}
 .mobile-menu-overlay:not([hidden]){display:block;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.64);border:0;border-radius:0;padding:0;cursor:pointer}
}

.mobile-menu-toggle .menu-close-icon{display:none}
@media(max-width:800px){header.fig-header.mobile-menu-open .mobile-menu-toggle img{display:none}header.fig-header.mobile-menu-open .mobile-menu-toggle .menu-close-icon{display:block;flex-shrink:0}}

@media(max-width:800px){
 header.fig-header nav .language-switch{width:max-content;max-width:calc(100% - 32px);height:40px;gap:8px;align-items:center}
 header.fig-header nav .language-switch a,header.fig-header nav .language-switch a:last-child{width:auto;min-width:0;height:40px;flex:0 0 auto;padding:8px 16px!important;white-space:nowrap;font-size:14px;line-height:24px}
}

@keyframes mobile-menu-enter{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes mobile-overlay-enter{from{opacity:0}to{opacity:1}}
@media(max-width:800px){
 header.fig-header.mobile-menu-open nav{animation:mobile-menu-enter .4s cubic-bezier(.22,1,.36,1) both}
 .mobile-menu-overlay:not([hidden]){animation:mobile-overlay-enter .4s ease both}
}
@media(prefers-reduced-motion:reduce){header.fig-header.mobile-menu-open nav,.mobile-menu-overlay:not([hidden]){animation:none}}

@keyframes mobile-menu-item-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes mobile-language-enter{from{opacity:0;transform:translateX(50%) translateY(14px)}to{opacity:1;transform:translateX(50%) translateY(0)}}
@keyframes mobile-menu-exit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}
@keyframes mobile-overlay-exit{from{opacity:1}to{opacity:0}}
@media(max-width:800px){
 header.fig-header.mobile-menu-open nav>a,header.fig-header.mobile-menu-open nav>.language-switch{animation:mobile-menu-item-enter .4s cubic-bezier(.22,1,.36,1) both}
 header.fig-header.mobile-menu-open nav>a:nth-child(1){animation-delay:.04s}
 header.fig-header.mobile-menu-open nav>a:nth-child(2){animation-delay:.10s}
 header.fig-header.mobile-menu-open nav>a:nth-child(3){animation-delay:.16s}
 header.fig-header.mobile-menu-open nav>a:nth-child(4){animation-delay:.22s}
 header.fig-header.mobile-menu-open nav>.language-switch{animation-name:mobile-language-enter;animation-delay:.28s}
 header.fig-header.mobile-menu-closing nav{animation:mobile-menu-exit .4s ease both;pointer-events:none}
 header.fig-header.mobile-menu-closing nav>a,header.fig-header.mobile-menu-closing nav>.language-switch{animation:none}
 .mobile-menu-overlay.is-closing:not([hidden]){animation:mobile-overlay-exit .4s ease both}
}
@media(prefers-reduced-motion:reduce){header.fig-header.mobile-menu-open nav,header.fig-header.mobile-menu-open nav>a,header.fig-header.mobile-menu-open nav>.language-switch,.mobile-menu-overlay:not([hidden]){animation:none}}

.fig-header .brand picture{display:block}
@media(max-width:800px){
 header.fig-header .brand{width:56px;height:56px;top:28px}
 header.fig-header.is-scrolled .brand{width:48px;height:48px;top:32px}
 .mobile-menu-toggle{padding:10px 16px}
 .mobile-call>img{display:block;flex-shrink:0}
}

@media(max-width:800px){
 main>section:not(.fig-hero):not(.fig-reel-stage):not(.case-hero):not(.about-hero),.editorial-case>.editorial-section{padding-top:64px;padding-bottom:64px;margin-top:0;margin-bottom:0}
 .fig-reel-stage{height:auto}
 .fig-reel{margin-bottom:-56px}
 .fig-reel-play{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%) scale(.7);transform-origin:center}
 .fig-reel-label,.works-desktop-dash{display:none}
 .fig-work-title .works-mobile-count{display:inline}
}
.works-mobile-count{display:none}
.fig-work-title h2 sup{font-size:.4em;line-height:1;vertical-align:super;letter-spacing:0}
@media(max-width:800px){
 .fig-work-title h2{font-size:36px;line-height:42px;margin-bottom:12px}
 .fig-work-title p{font-size:16px;line-height:24px;margin:0}
 .fig-work-title{margin-bottom:32px}
}

@media(max-width:800px){.fig-work-title .works-mobile-count{display:inline}}

/* Showreel action stays centered on desktop and mobile. */
.fig-reel-play{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);transform-origin:center}
@media(max-width:800px){.fig-reel-play{transform:translate(-50%,-50%) scale(.7)}}

.fig-reel::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.008) 13.225%,rgba(0,0,0,.032) 23.987%,rgba(0,0,0,.07) 32.664%,rgba(0,0,0,.121) 39.637%,rgba(0,0,0,.181) 45.284%,rgba(0,0,0,.251) 49.984%,rgba(0,0,0,.328) 54.115%,rgba(0,0,0,.411) 58.057%,rgba(0,0,0,.497) 62.188%,rgba(0,0,0,.585) 66.888%,rgba(0,0,0,.674) 72.535%,rgba(0,0,0,.762) 79.508%,rgba(0,0,0,.846) 88.185%,rgba(0,0,0,.926) 98.947%,#000 112.17%)}

@media(min-width:801px){
 body header.fig-header{height:112px;padding-top:24px;padding-bottom:24px}
 header.fig-header nav{height:64px}
 header.fig-header .brand{top:24px}
 body header.fig-header.is-scrolled{height:80px;padding-top:16px;padding-bottom:16px}
 header.fig-header.is-scrolled nav{height:48px}
 header.fig-header.is-scrolled .brand{top:16px}
}

html[lang=tr] .tr-hero-title{font-size:clamp(40px,5.8vw,80px);line-height:1.15;gap:12px}
html[lang=tr] .tr-hero-title .fig-title-line{order:initial}
@media(max-width:800px){
 html[lang=tr] .tr-hero-title{font-size:clamp(26px,7vw,40px);line-height:1.2;gap:8px}
 html[lang=tr] .tr-hero-title .tr-product-line{gap:8px;white-space:normal;flex-wrap:wrap}
}

html[lang=tr] .tr-hero-title{font-size:clamp(40px,6.3vw,88px);line-height:1.1;gap:16px}
@media(max-width:800px){
 html[lang=tr] .tr-hero-title{font-size:clamp(24px,7vw,40px);line-height:1.2;gap:12px}
 html[lang=tr] .tr-hero-title .fig-title-line{min-height:56px;gap:8px}
 html[lang=tr] .tr-hero-title .fig-idea-pill{flex-basis:56px;height:40px;--hero-slot-size:56px}
 html[lang=tr] .tr-hero-title .fig-hero-cloud{flex-basis:48px;height:48px;--hero-slot-size:48px}
 html[lang=tr] .tr-hero-title .fig-hero-cloud img.hero-cycle-icon{width:48px;height:48px}
 html[lang=tr] .tr-hero-title .tr-product-line{white-space:nowrap;flex-wrap:nowrap}
}

@media(max-width:800px){html[lang=en] .hero-ideas{display:none}html[lang=en] .fig-title-line:nth-child(2){gap:8px}html[lang=en] .fig-title-line:nth-child(2){font-size:clamp(24px,7.4vw,42px)}}

.mobile-hero-title{display:none}
@media(max-width:800px){
 .fig-hero-title{display:none}
 .mobile-hero-title{display:flex;flex-direction:column;align-items:center;gap:0;margin:0;font:500 clamp(28px,8.37vw,36px)/44px var(--display);letter-spacing:0;width:100%}
 .mobile-title-row{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
 .mobile-title-row .fig-idea-pill{flex:0 0 96px;width:96px;height:64px;--hero-slot-size:96px}
 .mobile-title-row .fig-hero-cloud{flex:0 0 64px;width:64px;height:64px;--hero-slot-size:64px}
 .mobile-title-row .fig-hero-cloud img.hero-cycle-icon{width:64px;height:64px}
 .fig-hero-content{gap:24px}
 .fig-hero-actions{margin-top:8px}
 .fig-hero-description{font-size:16px;line-height:24px}
 .fig-hero-description span+span:before{content:' '}
}
@media(max-width:380px){.mobile-title-row .fig-idea-pill{flex-basis:80px;width:80px;height:56px;--hero-slot-size:80px}}

@media(max-width:800px){.fig-hero-description br+span:before{content:' '}}

@media(max-width:800px){.mobile-hero-title{gap:8px}}

@media(min-width:801px){
 header.fig-header nav>a:not(.fig-schedule){display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:10px 16px;border:0;border-radius:999px;font-size:16px;line-height:24px;box-sizing:border-box;gap:4px}
 header.fig-header nav>a:not(.fig-schedule):is(:hover,:focus-visible,[aria-current="page"]){padding:10px 16px;height:44px}
 header.fig-header .works-count{font-size:10.32px;line-height:24px;position:static;align-self:center}
}

/* Original Libraries.dev border-beam overlay; content stays above it. */
.fig-hero{position:relative;isolation:isolate}
.fig-hero::before,.fig-hero::after{content:none}
.fig-hero-content{position:relative;z-index:2}
.hero-beam-track{position:absolute;inset:0;pointer-events:none;z-index:1;display:block}

@property --metal-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes discover-metal{to{--metal-angle:360deg}}
.fig-hero .fig-hero-actions .pill{position:relative;isolation:isolate;background:linear-gradient(165deg,#303138,#111214 46%,#24252b);border-color:transparent;color:#fafaf8;box-shadow:inset 0 1px 0 #ffffff26,0 0 18px #9caeff1a;transition:box-shadow .3s,background .3s}
.fig-hero-actions .pill::before,.fig-hero-actions .pill::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--metal-angle),#535965,#e8eaf3 12%,#75879d 21%,#393d49 32%,#c9bfe5 44%,#fff 51%,#58657e 63%,#a6bce3 76%,#f5e9e8 88%,#535965);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:discover-metal 6s linear infinite}
.fig-hero-actions .pill::after{inset:-2px;padding:1.5px;filter:blur(5px);opacity:.2;z-index:-1}
.fig-hero .fig-hero-actions .pill:is(:hover,:focus-visible){background:linear-gradient(165deg,#444650,#17181e 48%,#333743);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 #ffffff45,0 0 26px #b4c4ff45}
.fig-hero-actions .pill:is(:hover,:focus-visible)::after{opacity:.4}
@media(prefers-reduced-motion:reduce){.fig-hero-actions .pill::before,.fig-hero-actions .pill::after{animation:none}}

/* Hero restored to its plain dark background. */
.hero-beam-track{display:none}
/* Home Page 1:4 — October 12 Figma update. */
.fig-hero .fig-idea-pill{background:#0e0d0d;border-radius:0;overflow:hidden;position:relative}
.fig-idea-pill>img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.fig-hero .fig-hero-actions .pill{background:transparent;border:1px solid #ffffff29;box-shadow:none}
.fig-hero-actions .pill::before,.fig-hero-actions .pill::after{content:none}
.fig-hero .fig-hero-actions .pill:is(:hover,:focus-visible){background:#fafaf8;color:#111214;box-shadow:none}
.fig-projects{gap:64px}
.fig-project-genva .fig-cover-image{width:102.53%;height:136.31%;left:-1.43%;top:-9.79%;object-fit:fill}
.fig-project-info{min-height:96px}
.fig-app-icon{width:96px;height:96px}
.fig-app-icon>.fig-icon-raster{width:96px;height:96px;border-radius:26px}
.fig-app-icon>.fig-icon-composite{transform:scale(.8);transform-origin:top left}
.fig-project-genva .fig-project-info{max-width:none}
.fig-breadth{margin:0;padding:96px max(24px,calc((100vw - 1216px)/2));background:#191a1d;color:#fafaf8;overflow:hidden}
.fig-breadth-heading{margin-bottom:48px}
.fig-breadth-heading>p{font:400 18px/28px var(--body);margin:0 0 8px}
.fig-breadth-heading h2{font:500 96px/96px var(--display);letter-spacing:0;margin:0}
.fig-breadth-row{display:flex;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid #ffffff14}
.fig-breadth-row:last-child{border-bottom:0}
.fig-breadth-identity{display:flex;align-items:center;gap:24px;flex:0 0 560px}
.fig-breadth-identity>img{width:96px;height:96px;object-fit:cover;flex-shrink:0}
.fig-breadth-identity p{font:400 14px/20px var(--body);margin:0 0 8px}
.fig-breadth-identity h3{font:600 32px/38px var(--display);letter-spacing:0;margin:0}
.fig-breadth-media{display:flex;gap:24px;overflow-x:auto;min-width:0;scrollbar-width:none}
.fig-breadth-media::-webkit-scrollbar{display:none}
.fig-breadth-tile{width:200px;height:200px;flex:0 0 200px;background:#36383f;overflow:hidden;position:relative}
.fig-breadth-tile.wide{width:355px;flex-basis:355px}
.fig-breadth-tile img{width:100%;height:100%;object-fit:cover;display:block}
.fig-breadth-tile.sentio-crop img{position:absolute;left:.16%;top:0;width:157.9%;height:100%;max-width:none}
@media(max-width:1300px) and (min-width:801px){.fig-breadth-identity{flex-basis:46%}.fig-breadth-heading h2{font-size:7vw;line-height:1}}
@media(max-width:800px){
 .fig-project-info{min-height:56px}.fig-app-icon{width:56px;height:56px}.fig-app-icon>.fig-icon-raster{width:56px;height:56px;border-radius:16px}.fig-app-icon>.fig-icon-composite{transform:scale(.466667)}
 .fig-breadth{padding:64px 20px}.fig-breadth-heading{margin-bottom:32px}.fig-breadth-heading>p{font-size:14px;line-height:20px}.fig-breadth-heading h2{font-size:36px;line-height:42px}
 .fig-breadth-row{flex-direction:column;align-items:stretch;gap:20px;padding:24px 0}.fig-breadth-identity{flex-basis:auto;gap:16px}.fig-breadth-identity>img{width:56px;height:56px}.fig-breadth-identity p{font-size:12px;line-height:18px;margin-bottom:4px}.fig-breadth-identity h3{font-size:24px;line-height:30px}
 .fig-breadth-media{gap:12px}.fig-breadth-tile{width:140px;height:140px;flex-basis:140px}.fig-breadth-tile.wide{width:249px;flex-basis:249px}
}
.fig-app-icon>.fig-icon-raster{transform:none}
@media(min-width:801px){.fig-breadth-media{flex:0 0 auto;overflow:visible}.fig-breadth-identity{min-width:0}}
/* Preserve archive expansion and horizontal browsing in the updated layout. */
button.fig-breadth-identity{background:none;color:inherit;border:0;padding:0;border-radius:0;text-align:left;cursor:pointer;font:inherit}
.fig-breadth-toggle{margin-left:auto;color:#92959d;font:400 24px/1 var(--body);padding-right:12px}
.fig-breadth-identity:focus-visible{outline:2px solid #fafaf8;outline-offset:6px}
.fig-breadth-media{flex:1 1 0;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#92959d transparent}
.fig-breadth-media::-webkit-scrollbar{display:block;height:4px}.fig-breadth-media::-webkit-scrollbar-thumb{background:#92959d;border-radius:4px}
.fig-breadth-row.is-expanded{flex-direction:column;align-items:stretch;gap:32px}
.fig-breadth-row.is-expanded .fig-breadth-identity{flex:0 0 auto;width:100%}
.fig-breadth-row.is-expanded .fig-breadth-media{flex:0 0 auto;width:100%}
.fig-breadth-tile{transition:height .4s cubic-bezier(.22,1,.36,1),flex-basis .4s cubic-bezier(.22,1,.36,1)}
.fig-breadth-row.is-expanded .fig-breadth-tile{height:360px;flex-basis:360px;width:360px}
.fig-breadth-row.is-expanded .fig-breadth-tile.wide{flex-basis:639px;width:639px}
@media(max-width:800px){.fig-breadth-media{flex:0 0 auto}.fig-breadth-row.is-expanded{gap:24px}.fig-breadth-row.is-expanded .fig-breadth-tile{height:280px;width:280px;flex-basis:280px}.fig-breadth-row.is-expanded .fig-breadth-tile.wide{width:497px;flex-basis:497px}}
@media(prefers-reduced-motion:reduce){.fig-breadth-tile{transition:none}}
/* Archive uses the viewport width rather than the centred content column. */
.fig-breadth{padding-left:24px;padding-right:0;margin-left:0;margin-right:0;width:100%;max-width:none;box-sizing:border-box}
.fig-breadth-heading{padding-right:24px}
.fig-breadth-list{width:100%;max-width:none}
.fig-breadth-row{width:100%;max-width:none}
.fig-breadth-identity{flex-basis:clamp(320px,39vw,560px)}
.fig-breadth-media{flex:1 1 0;max-width:none;padding-right:24px;box-sizing:border-box}
.fig-breadth-row.is-expanded .fig-breadth-identity{padding-right:24px;box-sizing:border-box}
@media(max-width:800px){.fig-breadth{padding-left:20px;padding-right:0}.fig-breadth-heading{padding-right:20px}.fig-breadth-identity{flex-basis:auto;padding-right:20px}.fig-breadth-media{padding-right:20px}.fig-breadth-row.is-expanded .fig-breadth-identity{padding-right:20px}}
/* Reference gallery rhythm: equal-height portrait and landscape previews. */
.fig-breadth-list{margin-left:-24px;width:calc(100% + 24px)}
.fig-breadth-row{padding:48px 0 48px 24px;box-sizing:border-box;border-bottom-color:#ffffff26;gap:24px}
.fig-breadth-tile{height:clamp(220px,16vw,300px);width:clamp(176px,12.8vw,240px);flex-basis:clamp(176px,12.8vw,240px)}
.fig-breadth-tile.wide{width:clamp(330px,24vw,450px);flex-basis:clamp(330px,24vw,450px)}
.fig-breadth-media{gap:20px;cursor:grab;scrollbar-width:none;touch-action:pan-x pan-y}
.fig-breadth-media::-webkit-scrollbar{display:none}
.fig-breadth-media.is-dragging{cursor:grabbing;user-select:none}
.fig-breadth-media img{-webkit-user-drag:none;user-select:none}
.fig-breadth-row.is-expanded .fig-breadth-tile{height:400px;width:320px;flex-basis:320px}
.fig-breadth-row.is-expanded .fig-breadth-tile.wide{width:600px;flex-basis:600px}
@media(max-width:800px){.fig-breadth-list{margin-left:-20px;width:calc(100% + 20px)}.fig-breadth-row{padding:24px 0 24px 20px}.fig-breadth-media{gap:12px}.fig-breadth-tile{height:200px;width:160px;flex-basis:160px}.fig-breadth-tile.wide{width:300px;flex-basis:300px}.fig-breadth-row.is-expanded .fig-breadth-tile{height:280px;width:224px;flex-basis:224px}.fig-breadth-row.is-expanded .fig-breadth-tile.wide{width:420px;flex-basis:420px}}
/* Staggered gallery starts while project identities remain on the left. */
@media(min-width:801px){
 .fig-breadth-row{--gallery-start:42vw;gap:24px}
 .fig-breadth-row:nth-child(5n+2){--gallery-start:32vw}
 .fig-breadth-row:nth-child(5n+3){--gallery-start:24vw}
 .fig-breadth-row:nth-child(5n+4){--gallery-start:35vw}
 .fig-breadth-row:nth-child(5n+5){--gallery-start:28vw}
 .fig-breadth-row:not(.is-expanded) .fig-breadth-identity{flex:0 0 calc(var(--gallery-start) - 48px);min-width:0;gap:16px}
 .fig-breadth-row:not(.is-expanded) .fig-breadth-identity>div{min-width:0;flex:1}
 .fig-breadth-row:not(.is-expanded) .fig-breadth-identity h3{font-size:clamp(20px,1.7vw,32px);line-height:1.2;overflow-wrap:anywhere}
 .fig-breadth-row:not(.is-expanded) .fig-breadth-identity p{font-size:clamp(11px,.85vw,14px)}
 .fig-breadth-toggle{flex-shrink:0;padding-right:0}
}
/* Pack short strips against the right edge; longer strips stay scrollable. */
.fig-breadth-tile:first-child{margin-left:auto}
.fig-breadth-media{padding-right:0}
.fig-breadth-details{display:none}
.fig-breadth-row.is-expanded .fig-breadth-details{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding-right:24px}
.fig-breadth-details>p{margin:0;font:400 20px/30px var(--body);color:#c5c6ca;max-width:680px}
.fig-breadth-links{display:flex;gap:12px;flex-wrap:wrap}
.fig-breadth-links>a{display:inline-flex;gap:24px;align-items:center;border:1px solid #ffffff29;padding:16px 20px;color:#fafaf8;font:500 14px/20px var(--body);border-radius:4px;text-decoration:none}
.fig-breadth-links>a:hover,.fig-breadth-links>a:focus-visible{background:#fafaf8;color:#111214}
@media(max-width:800px){.fig-breadth-row.is-expanded .fig-breadth-details{grid-template-columns:1fr;gap:20px;padding-right:20px}.fig-breadth-details>p{font-size:16px;line-height:24px}.fig-breadth-links{order:2}}
/* Desktop header fills the viewport with consistent side gutters. */
@media(min-width:801px){header.fig-header{width:100%;max-width:none;left:0;right:0;padding-left:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);box-sizing:border-box}header.fig-header nav{width:100%;max-width:none}}
/* Showreel fills the available viewport width. */
.fig-reel-stage{padding-left:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);height:auto;box-sizing:border-box;padding-bottom:64px}
.fig-reel{width:100%;max-width:none;margin-bottom:-96px}
@media(max-width:800px){.fig-reel-stage{padding-left:20px;padding-right:20px;padding-bottom:64px}.fig-reel{margin-bottom:-56px}}
/* October 13 design: project tags and leadership portrait. */
.fig-design-tags{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0;max-width:420px}
.fig-design-tags>span{background:#00000014;border-radius:32px;padding:4px 12px;font:400 12px/16px var(--body);white-space:normal}
.fig-project-info{align-items:flex-start}.fig-project-title{padding-top:8px}.fig-year{margin-top:8px}
.fig-breadth-identity{align-items:flex-start}.fig-breadth-identity>div{padding-top:8px}.fig-breadth-identity .fig-design-tags{max-width:100%}.fig-breadth-identity .fig-design-tags>span{color:#a0a2a8;background:#ffffff14}
.fig-breadth-row.is-expanded .fig-design-tags>span{color:#fafaf8;background:#ffffff29}
@media(min-width:801px){.fig-breadth-row{padding:16px 0 16px 48px;gap:48px}.fig-breadth-row:not(.is-expanded) .fig-breadth-identity{flex-basis:560px;gap:24px}.fig-breadth-row:not(.is-expanded) .fig-breadth-identity h3{font-size:24px;line-height:32px}.fig-breadth-row:not(.is-expanded) .fig-breadth-identity p{font-size:14px;line-height:20px}.fig-breadth-tile{height:160px;width:160px;flex-basis:160px}.fig-breadth-tile.wide{width:284px;flex-basis:284px}.fig-breadth-media{gap:24px}}
.fig-leadership{background:#f3f3f4;color:#111214;margin:0;padding:96px max(24px,calc((100vw - 1216px)/2));display:grid;grid-template-columns:minmax(0,768px) 416px;gap:32px;align-items:start}
.fig-leadership .eyebrow{font:400 18px/28px var(--body);color:#111214;letter-spacing:0;margin:0 0 8px}
.fig-leadership h2{font:500 96px/96px var(--display);letter-spacing:0;margin:0}
.fig-leadership-description{font:400 18px/28px var(--body);margin:24px 0 0;color:#111214}
.fig-leadership .proof-row{display:flex;gap:24px;margin:48px 0}
.fig-leadership .proof-row>div{flex:1;min-width:0;background:#0000000a;border:1px solid #0000000a;border-radius:16px;padding:24px 16px}
.fig-leadership .proof-row strong{font:500 56px/64px var(--display);color:#111214;letter-spacing:0}
.fig-leadership .proof-row span{font:400 18px/28px var(--body);color:#111214;margin-top:8px}
.fig-leadership .pill{border:1px solid #00000029;background:transparent;color:#111214;padding:15px 24px;font:500 16px/24px var(--body)}
.fig-leadership-portrait{position:relative;width:416px;height:480px;overflow:hidden}
.fig-leadership-portrait img{display:block;max-width:none}
.leadership-circle{position:absolute;left:62px;top:130px;width:292px;height:292px}.leadership-txt{position:absolute;left:83.24px;top:152px;width:249.183px;height:176.688px}
.leadership-person{position:absolute;left:0;top:64px;width:416px;height:416px;object-fit:cover}
.leadership-bg{position:absolute;left:49px;top:326px;width:96px;height:96px}.leadership-symbol{position:absolute;left:64px;top:341px;width:65.415px;height:65.752px}
.leadership-fade{position:absolute;left:0;top:368px;width:416px;height:112px;background:linear-gradient(180deg,#f3f3f400,#f3f3f4)}
@media(max-width:1200px){.fig-leadership{grid-template-columns:minmax(0,1fr) 416px}.fig-leadership h2{font-size:clamp(40px,6.5vw,80px);line-height:1.05}.fig-leadership .proof-row{gap:12px}.fig-leadership .proof-row span{font-size:14px;line-height:20px}}
@media(max-width:800px){.fig-project-title{padding-top:0}.fig-design-tags{gap:6px}.fig-design-tags>span{font-size:11px;line-height:16px;padding:3px 8px}.fig-leadership{grid-template-columns:1fr;padding:64px 20px;gap:24px}.fig-leadership h2{font-size:40px;line-height:44px}.fig-leadership .eyebrow{font-size:14px;line-height:20px}.fig-leadership-description{font-size:16px;line-height:24px}.fig-leadership .proof-row{margin:32px 0;gap:8px}.fig-leadership .proof-row>div{padding:16px 8px}.fig-leadership .proof-row strong{font-size:36px;line-height:44px}.fig-leadership .proof-row span{font-size:12px;line-height:18px}.fig-leadership-portrait{justify-self:center;max-width:100%;transform-origin:top center}}
@media(max-width:455px){.fig-leadership-portrait{width:416px;max-width:none;transform:scale(.8);margin:-40px -42px -80px}}
.fig-leadership p.fig-leadership-description{color:#111214;max-width:none}
@media(max-width:380px){.fig-leadership-portrait{transform:scale(.67);margin:-65px -69px -130px}}
/* Figma YouTube section 104:477. */
.fig-youtube{position:relative;background:#191a1d;color:#fafaf8;margin:0;padding:96px max(24px,calc((100vw - 1216px)/2));box-sizing:border-box}
.fig-youtube-heading{margin:0 0 48px;padding-right:160px}
.fig-youtube-heading>p{font:400 14px/20px var(--body);margin:0 0 8px;color:#fafaf8}
.fig-youtube-heading h2{font:500 96px/96px var(--display);letter-spacing:0;margin:0}
.fig-youtube-icon{position:absolute;right:calc(max(24px,(100vw - 1216px)/2) + 48px);top:96px;width:151px;height:152px;object-fit:contain;filter:drop-shadow(0 34px 34px #00000038)}
.fig-youtube .video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0 0 48px}
.fig-youtube .video-card{display:flex;flex-direction:column;gap:20px;color:#fafaf8;text-decoration:none;min-width:0}
.fig-youtube .video-art{border-radius:0;background:#36383f;aspect-ratio:16/9;overflow:hidden;margin:0;padding:0}
.fig-youtube .youtube-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}
.fig-video-copy{display:flex;flex-direction:column;gap:8px}
.fig-video-copy>p{font:500 12px/16px var(--body);color:#e8ff8b;margin:0}
.fig-youtube .fig-video-copy h3{font:500 18px/28px var(--body);letter-spacing:0;color:#fafaf8;margin:0}
.fig-youtube>.pill{font:500 16px/24px var(--body);padding:15px 24px;border:1px solid #ffffff29;color:#fafaf8;background:transparent}
.fig-youtube>.pill:is(:hover,:focus-visible){background:#fafaf8;color:#111214}
@media(max-width:1300px){.fig-youtube-heading h2{font-size:7vw;line-height:1}}
@media(max-width:800px){.fig-youtube{padding:64px 20px}.fig-youtube-heading{padding-right:72px;margin-bottom:32px}.fig-youtube-heading h2{font-size:36px;line-height:42px}.fig-youtube-heading>p{font-size:12px;line-height:18px}.fig-youtube-icon{width:64px;height:64px;top:64px;right:20px}.fig-youtube .video-grid{grid-template-columns:1fr;gap:32px;margin-bottom:32px}.fig-youtube .video-card{gap:16px}}
/* Shared fluid grid for feature, leadership and video sections. */
.fig-work,.fig-leadership,.fig-youtube{padding-left:clamp(24px,3vw,48px);padding-right:clamp(24px,3vw,48px);width:100%;max-width:none;box-sizing:border-box}
.fig-leadership{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}
.fig-leadership-copy{min-width:0}
.fig-leadership-portrait{justify-self:center}
.fig-leadership .proof-row>div{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.fig-leadership .proof-row strong,.fig-leadership .proof-row span{width:100%;text-align:center}
.fig-leadership .pill:is(:hover,:focus-visible){background:#111214;color:#fafaf8;border-color:#111214}
.fig-youtube-icon{right:calc(clamp(24px,3vw,48px) + 48px)}
@media(max-width:1000px) and (min-width:801px){.fig-leadership{grid-template-columns:minmax(0,1fr) 332px}.fig-leadership-portrait{transform:scale(.8);transform-origin:top center;margin-left:-42px;margin-right:-42px;margin-bottom:-96px}}
@media(max-width:800px){.fig-work,.fig-leadership,.fig-youtube{padding-left:20px;padding-right:20px}.fig-leadership{grid-template-columns:minmax(0,1fr)}.fig-youtube-icon{right:20px}}
/* Figma hero portrait: keep native layer sizes and scale the composition on mobile. */
.fig-hero .fig-idea-pill{background:radial-gradient(ellipse 144px 96px at 50% 0,#d8f780 26.035%,#baec4c 63.017%,#aae731 81.509%,#9be117 100%);border-radius:16px;overflow:visible}
.hero-portrait-layers{display:block;position:relative;width:144px;height:96px;border-radius:16px}
.hero-portrait-layers img{max-width:none;display:block}
.hero-portrait-circle{position:absolute;left:32px;top:0;width:78px;height:77px}
.hero-portrait-txt{position:absolute;left:38px;top:6px;width:66px;height:47px}
.hero-portrait-person{position:absolute;left:10px;top:-26px;width:122px;height:122px;object-fit:cover;border-radius:0 0 12px 12px}
.hero-portrait-bg{position:absolute;left:22px;top:49px;width:28px;height:28px}
.hero-portrait-symbol{position:absolute;left:26.52px;top:53.52px;width:19.871px;height:18.968px}
@media(max-width:800px){.hero-portrait-layers{transform:scale(.666667);transform-origin:top left}.fig-hero .fig-idea-pill{border-radius:11px}}
@media(max-width:380px){.hero-portrait-layers{transform:scale(.555556)}}
/* Restore the design's capped, responsive content widths. */
@media(min-width:801px){
 header.fig-header{padding-left:max(24px,calc((100vw - 1216px)/2));padding-right:max(24px,calc((100vw - 1216px)/2))}
 .fig-work,.fig-leadership,.fig-youtube,.fig-reel-stage{padding-left:max(24px,calc((100vw - 1216px)/2));padding-right:max(24px,calc((100vw - 1216px)/2))}
 .fig-leadership{grid-template-columns:minmax(0,768px) minmax(0,416px)}
 .fig-youtube-icon{right:calc(max(24px,(100vw - 1216px)/2) + 48px)}
 .fig-breadth{padding-left:0;padding-right:0}
 .fig-breadth-heading{max-width:1216px;margin-left:auto;margin-right:auto;padding:0 24px;box-sizing:content-box}
 .fig-breadth-list{width:100%;max-width:1440px;margin:0 auto}
 .fig-breadth-row{padding-left:clamp(24px,7.78vw,112px);gap:48px}
 .fig-breadth-row:not(.is-expanded) .fig-breadth-identity{flex-basis:min(560px,42vw)}
 .fig-breadth-row.is-expanded{background:#ffffff0a}
 .fig-breadth-row.is-expanded .fig-breadth-tile{width:200px;height:200px;flex-basis:200px}
 .fig-breadth-row.is-expanded .fig-breadth-tile.wide{width:355px;flex-basis:355px}
 .fig-breadth-heading h2,.fig-leadership h2,.fig-youtube-heading h2{font-size:56px;line-height:64px}
 .fig-breadth-heading>p{font-size:14px;line-height:20px}
 .fig-concept-heading h2{font-size:56px;line-height:64px}
 .fig-trio-link{max-width:1440px;margin-left:auto;margin-right:auto}
}
@media(min-width:801px) and (max-width:1263px){.fig-breadth-heading{margin-left:24px;margin-right:24px;padding:0;max-width:none}.fig-leadership{grid-template-columns:minmax(0,1fr) 332px}.fig-leadership-portrait{transform:scale(.8);transform-origin:top center;margin-left:-42px;margin-right:-42px;margin-bottom:-96px}}
@media(max-width:800px){.fig-breadth-heading h2,.fig-leadership h2,.fig-youtube-heading h2,.fig-concept-heading h2{font-size:36px;line-height:42px}}
@media(min-width:801px){main.home-page>section.learning.fig-youtube{padding-left:max(24px,calc((100vw - 1216px)/2));padding-right:max(24px,calc((100vw - 1216px)/2))}}

/* Align breadth content with the capped Trio cover while keeping galleries flush right. */
@media(min-width:801px){
 .fig-breadth-heading{max-width:none;margin-left:max(0px,calc((100vw - 1440px)/2));margin-right:0;padding:0;box-sizing:border-box}
 .fig-breadth-list{width:100%;max-width:none;margin:0}
 .fig-breadth-row{padding-left:max(0px,calc((100vw - 1440px)/2));padding-right:0;box-sizing:border-box}
}

/* Expanded project header matches the updated Figma composition. */
.fig-breadth-row.is-expanded{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:24px}
.fig-breadth-row.is-expanded .fig-breadth-identity{grid-column:1;grid-row:1;width:auto;padding-right:0;gap:24px}
.fig-breadth-row.is-expanded .fig-breadth-identity h3{font-size:24px;line-height:32px}
.fig-breadth-row.is-expanded .fig-breadth-toggle{display:none}
.fig-breadth-row.is-expanded .fig-breadth-details{display:contents}
.fig-breadth-row.is-expanded .fig-breadth-details>p{grid-column:2;grid-row:1;align-self:center;font-size:18px;line-height:28px;color:#fafaf8;padding-right:48px;max-width:none}
.fig-breadth-row.is-expanded .fig-breadth-links{grid-column:1 / -1;grid-row:2}
.fig-breadth-links>a{gap:12px;border-radius:999px;padding:11px 12px 11px 20px;font-size:16px;line-height:24px}
.fig-breadth-links>a>img{width:20px;height:20px;flex:none}
.fig-breadth-row.is-expanded .fig-breadth-media{grid-column:1 / -1;grid-row:3;margin-top:24px}
@media(max-width:800px){
 .fig-breadth-row.is-expanded{grid-template-columns:minmax(0,1fr);gap:20px}
 .fig-breadth-row.is-expanded .fig-breadth-details>p{grid-column:1;grid-row:2;padding-right:20px;font-size:16px;line-height:24px}
 .fig-breadth-row.is-expanded .fig-breadth-links{grid-row:3}
 .fig-breadth-row.is-expanded .fig-breadth-media{grid-row:4;margin-top:12px}
 .fig-breadth-row.is-expanded .fig-breadth-identity{gap:16px;padding-right:20px}
}

/* October 13 page update: YouTube gradient and contact footer. */
.fig-youtube{background:linear-gradient(25.8587574deg,#400606 4.6879%,#410707 18.031%,#450707 28.89%,#4b0808 37.645%,#540909 44.681%,#5e0a0a 50.378%,#6a0c0c 55.12%,#760d0e 59.288%,#840f0f 63.265%,#921111 67.434%,#a11213 72.175%,#b01415 77.873%,#be1617 84.908%,#cc1819 93.664%,#da191a 104.52%,#e61b1c 117.87%)}
.fig-video-copy>p{color:#f87171}
.fig-youtube-icon{width:183px;height:184px;top:64px}
.fig-leadership .proof-row{gap:32px}
.fig-contact{padding:96px max(24px,calc((100vw - 1216px)/2)) 0;background:#191a1d;color:#fafaf8;box-sizing:border-box}
.fig-contact-content{display:flex;gap:24px;align-items:stretch}
.fig-contact-title{flex:1;min-width:0}.fig-contact-title>p{font:400 14px/20px var(--body);margin:0 0 8px}
.fig-contact-title h2{font:500 56px/64px var(--display);letter-spacing:0;margin:0}
.fig-contact-actions{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.fig-contact-buttons{display:flex;gap:16px}
.fig-contact-buttons>a{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 16px;border:1px solid #ffffff29;border-radius:999px;color:#fafaf8;text-decoration:none;font:500 16px/24px var(--body);white-space:nowrap}
.fig-contact-buttons>a:hover{background:#ffffff14}
.fig-contact-social{display:flex;align-items:center;gap:32px;height:44px}
.fig-contact-social>a{display:flex;align-items:center;justify-content:center;width:24px;height:44px}
.fig-contact img{display:block;max-width:none}
.fig-contact-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff14;padding:32px 0;margin-top:48px;font:400 14px/20px var(--body);color:#a0a2a8}
.fig-contact-bottom>a{color:inherit;text-decoration:none}
body:has(main.home-page)>footer{display:none}
@media(max-width:800px){
 .fig-youtube-icon{width:80px;height:80px;top:48px}
 .fig-leadership .proof-row{gap:8px}
 .fig-contact{padding:64px 20px 0}.fig-contact-content{flex-direction:column;gap:32px}
 .fig-contact-title h2{font-size:36px;line-height:42px}
 .fig-contact-actions{align-items:flex-start;gap:24px}.fig-contact-buttons{gap:12px;flex-wrap:wrap}
 .fig-contact-buttons>a{font-size:14px;padding:9px 12px}.fig-contact-bottom{margin-top:32px;font-size:12px}
}

.fig-contact-buttons>a:is(:hover,:focus-visible){background:#fafaf8;color:#111214;border-color:#fafaf8}

/* Updated footer branding from Figma 117:767. */
.fig-contact{position:relative;overflow:hidden}
.fig-contact-content,.fig-contact-bottom{position:relative;z-index:1}
.fig-contact-logo{width:104px;flex:0 0 104px;align-self:stretch;display:block}
.fig-contact-logo img{width:80px;height:80px}
.fig-contact-wordmark{position:absolute;top:300px;left:50%;transform:translateX(-50%);width:1440px;height:112px;pointer-events:none}
.fig-contact-bottom{border-top:0}
@media(max-width:1000px){.fig-contact-content{flex-wrap:wrap}.fig-contact-title{flex-basis:calc(100% - 128px)}.fig-contact-actions{margin-left:128px;gap:24px}}
@media(max-width:800px){.fig-contact-content{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px}.fig-contact-logo{width:56px}.fig-contact-logo img{width:56px;height:56px}.fig-contact-title{min-width:0}.fig-contact-title h2{font-size:32px;line-height:38px}.fig-contact-actions{grid-column:1 / -1;margin-left:0}.fig-contact-wordmark{top:auto;bottom:0}}

/* Keep a single word-space before the hero illustrations open. */
.fig-hero .fig-idea-pill,.fig-hero .fig-hero-cloud{min-width:0;--hero-collapsed-margin:-12px;animation-name:hero-slot-open;animation-fill-mode:backwards}
@keyframes hero-slot-open{from{flex-basis:0;width:0;min-width:0;margin-left:var(--hero-collapsed-margin);margin-right:var(--hero-collapsed-margin);opacity:0;transform:scale(.78);filter:blur(7px)}to{flex-basis:var(--hero-slot-size);width:var(--hero-slot-size);min-width:0;margin-left:0;margin-right:0;opacity:1;transform:scale(1);filter:blur(0)}}
@media(max-width:800px){.fig-hero .fig-idea-pill,.fig-hero .fig-hero-cloud{--hero-collapsed-margin:-6px}}
@media(prefers-reduced-motion:reduce){.fig-hero .fig-idea-pill,.fig-hero .fig-hero-cloud{animation:none;margin-left:0;margin-right:0}}

.fig-breadth-row{border-bottom-color:rgba(255,255,255,.04)}

/* Updated list disclosure controls and muted category labels. */
button.fig-breadth-identity{position:relative}
.fig-breadth-identity p{color:#c5c6ca}
.fig-breadth-toggle,.fig-breadth-row.is-expanded .fig-breadth-toggle{position:absolute;left:404px;top:4px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:24px;background:#ffffff0a;padding:2px 0 0;box-sizing:border-box}
.fig-breadth-toggle img{display:block;width:16px;height:16px;max-width:none;transition:transform .3s ease}
.fig-breadth-row.is-expanded .fig-breadth-toggle{background:#ffffff29}
.fig-breadth-row.is-expanded .fig-breadth-toggle img{transform:scaleY(-1)}
@media(max-width:800px){.fig-breadth-toggle,.fig-breadth-row.is-expanded .fig-breadth-toggle{left:auto;right:20px}.fig-breadth-identity>div{padding-right:36px}}
@media(prefers-reduced-motion:reduce){.fig-breadth-toggle img{transition:none}}

.fig-breadth-links>a>img{background:#36383f;border-radius:50%}

.fig-breadth-links>a>img{background:#111214}

.breadth-call-arrow{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;border-radius:50%;background:#111214;color:#fafaf8}.breadth-call-arrow svg{width:16px;height:16px;display:block}

/* Match the header button's complete normal and hover treatment. */
.fig-breadth-links>a{gap:12px;padding:11px 12px 11px 20px;border:1px solid #ffffff29;background:transparent;color:#fafaf8;border-radius:999px;font:500 16px/24px var(--body)}
.fig-breadth-links>a .breadth-call-arrow{background:#36383f;color:#fafaf8;width:20px;height:20px}
.fig-breadth-links>a .breadth-call-arrow svg{width:12px;height:12px}
.fig-breadth-links>a:is(:hover,:focus-visible){background:#fafaf8;color:#111214;border-color:#fafaf8}
.fig-breadth-links>a:is(:hover,:focus-visible) .breadth-call-arrow{background:#111214;color:#fafaf8}

.fig-contact{background:#000000}

/* Updated list: details controls beneath the project identity, larger previews. */
.fig-breadth-identity,.fig-breadth-row.is-expanded .fig-breadth-identity{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:24px;row-gap:24px;align-items:start}
.fig-breadth-toggle,.fig-breadth-row.is-expanded .fig-breadth-toggle{position:static;grid-column:1 / -1;justify-self:start;display:inline-flex;gap:12px;width:auto;height:48px;padding:11px 24px;border:1px solid #ffffff29;border-radius:24px;background:transparent;font:500 16px/24px var(--body);color:#fafaf8}
.fig-breadth-identity:hover .fig-breadth-toggle{background:#ffffff0a}
.fig-breadth-row.is-expanded .fig-breadth-toggle{display:none}
.fig-breadth-row.is-expanded .fig-breadth-identity{cursor:pointer}
@media(min-width:801px){
 .fig-breadth-tile{width:200px;height:200px;flex-basis:200px}
 .fig-breadth-tile.wide{width:355px;flex-basis:355px}
 .fig-breadth-row.is-expanded .fig-breadth-tile{width:240px;height:240px;flex-basis:240px}
 .fig-breadth-row.is-expanded .fig-breadth-tile.wide{width:426px;flex-basis:426px}
 .fig-breadth-row.is-expanded .fig-breadth-tile:last-child.wide{width:355px;flex-basis:355px}
}
@media(max-width:800px){.fig-breadth-identity,.fig-breadth-row.is-expanded .fig-breadth-identity{grid-template-columns:56px minmax(0,1fr);gap:16px}.fig-breadth-identity>div{padding-right:20px}}

.fig-breadth-toggle{margin-left:0;margin-right:0}

.fig-breadth-row.is-expanded .fig-breadth-tile:first-child{margin-left:0}
.fig-breadth-row.is-expanded .fig-breadth-media{justify-content:flex-start}
.fig-breadth-close{display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:11px;border:1px solid #ffffff29;border-radius:999px;background:transparent;color:#fafaf8}
.fig-breadth-close img{display:block;width:24px;height:24px;max-width:none}
.fig-breadth-close:hover{background:#ffffff14}

.fig-breadth-row.is-expanded{padding-top:24px;padding-bottom:48px}

/* Shared section eyebrow typography from the current Figma body/small token. */
.fig-concept-heading>p,.fig-breadth-heading>p,.fig-leadership .eyebrow,.fig-youtube-heading>p,.fig-contact-title>p{font:400 14px/20px var(--body);letter-spacing:0;margin:0 0 8px}

.hero-depth-canvas{position:absolute;left:0;top:-36px;width:144px;height:148px;pointer-events:none}.hero-depth-ready>img,.hero-depth-ready>span{visibility:hidden}

.fig-leadership-portrait{height:616px}.leadership-person{height:552px;object-fit:contain;will-change:transform}.leadership-fade{top:500px;height:116px}

.scroll-reveal{opacity:0;translate:0 32px;transition:opacity .7s ease var(--reveal-delay,0ms),translate .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms)}
.scroll-reveal-visible{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;translate:none;transition:none}}

/* Leadership portrait placement from Figma 99:281. */
.fig-leadership-portrait{height:538px}.leadership-circle{top:92px}.leadership-txt{top:114px}.leadership-person{top:-14px;height:552px;object-fit:cover}.leadership-bg{top:240px}.leadership-symbol{top:255px}.leadership-fade{top:229px;height:309px;background:linear-gradient(180deg,rgba(243,243,244,0) 0%,rgba(243,243,244,.008) 11.79%,rgba(243,243,244,.032) 21.384%,rgba(243,243,244,.07) 29.12%,rgba(243,243,244,.121) 35.336%,rgba(243,243,244,.181) 40.37%,rgba(243,243,244,.251) 44.56%,rgba(243,243,244,.328) 48.243%,rgba(243,243,244,.411) 51.757%,rgba(243,243,244,.497) 55.44%,rgba(243,243,244,.585) 59.63%,rgba(243,243,244,.674) 64.664%,rgba(243,243,244,.762) 70.88%,rgba(243,243,244,.846) 78.616%,rgba(243,243,244,.926) 88.21%,#f3f3f4 100%)}

/* About / CV design 145:644. */
main.fig-about-page{padding:0;max-width:none;background:#fafaf8}
.fig-about-hero{height:664px;padding:232px max(24px,calc((100vw - 1216px)/2)) 0;background:#fafaf8}
.fig-about-hero ax-h1{font:500 clamp(56px,6.667vw,96px)/1 var(--display);letter-spacing:0;margin:0}
.fig-about-hero ax-h1 span{display:block;color:#64666c}.fig-about-hero ax-h1 span:last-child{color:#111214}
main.fig-about-page>.fig-about-intro{display:grid;grid-template-columns:minmax(0,488px) minmax(0,624px);gap:104px;min-height:720px;padding:96px max(24px,calc((100vw - 1216px)/2));background:#111214;color:#fafaf8;align-items:start;position:relative}
.fig-about-portrait{position:relative;width:488px;height:686px;margin-top:-160px;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#d8f780 26.035%,#baec4c 63.017%,#aae731 81.509%,#9be117 100%);box-shadow:0 14px 31px #00000012}
.fig-about-portrait img{position:absolute;display:block;max-width:none}
.about-circle{left:73px;top:136px}.about-ring-text{left:98px;top:163px}.about-person{left:0;top:13px;width:488px;height:647px;object-fit:cover}.about-star-bg{left:57px;top:310px}.about-star{left:76px;top:327px}
.about-portrait-fade{position:absolute;left:0;top:377px;width:488px;height:309px;background:linear-gradient(180deg,#c4ef5f00 0%,#b6e93d55 48%,#9ae017 100%)}
.fig-about-copy{min-width:0}.fig-about-copy>.eyebrow{font:400 14px/20px var(--body);letter-spacing:0;margin:0 0 8px}.fig-about-copy h2{font:500 56px/64px var(--display);letter-spacing:0;margin:0}
.fig-about-biography{margin-top:24px;font:400 18px/28px var(--body)}.fig-about-biography p+p{margin-top:28px}
.fig-about-copy .cv-downloads{display:flex;gap:32px;flex-wrap:wrap;margin-top:80px}.fig-about-copy .pill{height:48px;padding:11px 24px;border-color:#ffffff29;color:#fafaf8;font:500 16px/24px var(--body)}.fig-about-copy .pill:hover{background:#fafaf8;color:#111214}
.fig-about-page>.cv-section{padding:96px max(24px,calc((100vw - 1216px)/2))}
body:has(.fig-about-page) header.fig-header{background:#fafaf8ed;color:#111214}
body:has(.fig-about-page) header .brand img{filter:invert(1)}
body:has(.fig-about-page) header nav>a{color:#111214}body:has(.fig-about-page) header nav>a:is(:hover,[aria-current]){background:#111214;color:#fafaf8}
body:has(.fig-about-page)>footer{display:none}
@media(max-width:1200px) and (min-width:801px){main.fig-about-page>.fig-about-intro{grid-template-columns:390px minmax(0,1fr);gap:48px}.fig-about-portrait{transform:scale(.8);transform-origin:top left;margin-right:-98px;margin-bottom:-137px}.fig-about-copy h2{font-size:44px;line-height:52px}}
@media(max-width:800px){.fig-about-hero{height:auto;min-height:480px;padding:176px 20px 100px}.fig-about-hero ax-h1{font-size:clamp(32px,8vw,56px);line-height:1.12}main.fig-about-page>.fig-about-intro{grid-template-columns:minmax(0,1fr);gap:32px;padding:0 20px 64px}.fig-about-portrait{width:488px;transform:scale(.7);transform-origin:top left;margin-top:-48px;margin-right:-146px;margin-bottom:-206px;justify-self:center}.fig-about-copy h2{font-size:36px;line-height:42px}.fig-about-biography{font-size:16px;line-height:24px}.fig-about-copy .cv-downloads{margin-top:32px;gap:12px}.fig-about-copy .pill{font-size:14px;padding:11px 16px}.fig-about-page>.cv-section{padding:64px 20px}}
.about-portrait-fade{background:linear-gradient(180deg, rgba(196, 239, 95, 0) 0%, rgba(196, 239, 94, 0.008) 11.79%, rgba(195, 239, 93, 0.032) 21.384%, rgba(193, 238, 90, 0.07) 29.12%, rgba(191, 237, 86, 0.121) 35.336%, rgba(188, 236, 82, 0.181) 40.37%, rgba(185, 235, 77, 0.251) 44.56%, rgba(182, 234, 71, 0.328) 48.243%, rgba(179, 233, 65, 0.411) 51.757%, rgba(175, 232, 59, 0.497) 55.44%, rgba(171, 230, 53, 0.585) 59.63%, rgba(168, 229, 46, 0.674) 64.664%, rgba(164, 228, 40, 0.762) 70.88%, rgba(160, 226, 34, 0.846) 78.616%, rgba(157, 225, 28, 0.926) 88.21%, rgb(154, 224, 23) 100%)}
body:has(.fig-about-page) header.fig-header nav>a{color:#111214!important}
body:has(.fig-about-page) header.fig-header nav>a span:not(.call-arrow-circle){color:inherit}
body:has(.fig-about-page) header.fig-header nav>a.fig-schedule .call-arrow-circle{color:#fafaf8}
body:has(.fig-about-page) header.fig-header nav>a:is(:hover,[aria-current]){background:#111214!important;color:#fafaf8!important}
/* About header uses the same 1216px design grid as its content. */
@media(min-width:801px){
 body:has(.fig-about-page) header.fig-header{padding-left:max(24px,calc((100vw - 1216px)/2));padding-right:max(24px,calc((100vw - 1216px)/2))}
 body:has(.fig-about-page) header.fig-header nav{gap:24px;width:100%;max-width:1216px;margin:0 auto}
 body:has(.fig-about-page) header.fig-header nav>a:not(.fig-schedule){height:44px;padding:10px 16px;font:500 16px/24px var(--body)}
 body:has(.fig-about-page) header.fig-header nav>a[aria-current="page"]{background:#000000!important}
 body:has(.fig-about-page) header.fig-header nav>a.fig-schedule{padding:9px 16px;border-color:#00000029;height:44px;font:500 16px/24px var(--body)}
 body:has(.fig-about-page) header.fig-header .language-switch a:not([aria-current]){color:#111214}
}

.fig-about-hero ax-h1 span{animation:hero-title-reveal .8s cubic-bezier(.16,1,.3,1) .2s backwards}
.fig-about-hero ax-h1 span:nth-child(2){animation-delay:.38s}.fig-about-hero ax-h1 span:nth-child(3){animation-delay:.56s}
@media(prefers-reduced-motion:reduce){.fig-about-hero ax-h1 span{animation:none}}
/* Experience: Figma 145:844 / component 159:8296. */
.fig-about-page .fig-experience{background:#fafaf8;color:#111214;padding:96px max(24px,calc((100% - 1216px)/2));scroll-margin-top:112px}
.fig-experience-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:48px}
.fig-experience-heading h2{font-size:56px;line-height:64px;font-weight:500;margin:0}
.fig-experience-heading .pill{height:56px;padding:15px 24px;gap:12px;border:1px solid #00000029;display:inline-flex;align-items:center;background:transparent;color:#111214;font-size:16px;line-height:24px}
.fig-experience-heading .pill:hover{background:#111214;color:#fafaf8}.fig-experience-heading .pill:hover img{filter:invert(1)}
.fig-experience-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid #00000014;align-items:start}
.fig-experience-identity{display:flex;gap:24px;min-width:0}.fig-experience-identity>img,.experience-monogram{width:96px;height:96px;flex:0 0 96px;border:1px solid #00000014;border-radius:26px;object-fit:cover}
.experience-monogram{display:grid;place-items:center;background:#111214;color:#fafaf8;font-size:28px;font-weight:500}
.fig-experience-identity>div{padding-top:8px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fig-experience .experience-company{font-size:14px;line-height:20px;font-weight:500;margin:0}
.fig-experience-identity h3{font-size:24px;line-height:32px;font-weight:600;margin:0;overflow-wrap:anywhere}
.fig-experience .experience-meta{font-size:14px;line-height:20px;color:#64666c;margin:0}
.fig-experience-description{padding-top:8px;min-width:0;font-size:18px;line-height:28px}
.fig-experience .experience-summary,.fig-experience .experience-full p{font-size:18px;line-height:28px;margin:0}
.fig-experience .experience-full p+p{margin-top:28px}.experience-full strong{font-weight:600}
.experience-toggle{display:block;padding:0;margin-top:12px;border:0;background:transparent;font:500 16px/24px inherit;font-family:inherit;font-size:16px;line-height:24px;color:#64666c;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.experience-toggle:hover{color:#111214}.experience-toggle:focus-visible{outline:2px solid #111214;outline-offset:4px}
.fig-experience [hidden]{display:none!important}
@media(max-width:800px){.fig-about-page .fig-experience{padding:64px 24px}.fig-experience-heading{align-items:flex-start;flex-wrap:wrap;margin-bottom:32px}.fig-experience-heading h2{font-size:40px;line-height:48px}.fig-experience-row{grid-template-columns:1fr;gap:16px;padding:24px 0}.fig-experience-identity{gap:16px}.fig-experience-identity h3{font-size:22px;line-height:30px}.fig-experience-description{padding-top:0}.fig-experience-heading .pill{height:48px;padding:11px 20px}}
@media print{.fig-experience .experience-summary,.fig-experience .experience-toggle,.fig-experience-heading button{display:none!important}.fig-experience .experience-full[hidden]{display:block!important}.fig-experience-row{break-inside:avoid}.fig-experience .scroll-reveal{opacity:1;transform:none}}
/* Light About header: invert the arrow badge with the hovered call button. */
body:has(.fig-about-page) header.fig-header nav>a.fig-schedule:is(:hover,:focus-visible) .call-arrow-circle{background:#fafaf8;color:#111214}
/* Earlier career stays accessible without extending the initial page. */
.earlier-experience-toggle{width:100%;margin-top:32px;padding:28px 32px;display:flex;align-items:center;gap:32px;border:1px solid #00000014;border-radius:24px;background:#f0f1ec;color:#111214;font-family:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.earlier-experience-toggle:hover{background:#e8eddf;border-color:#00000029}.earlier-experience-toggle:focus-visible{outline:2px solid #111214;outline-offset:4px}
.earlier-logo-stack{display:flex;flex:none;padding-right:4px;isolation:isolate}.earlier-logo-stack img{width:56px;height:56px;object-fit:cover;border:3px solid #fafaf8;border-radius:16px;box-shadow:0 3px 8px #0000000a;transform:rotate(calc((var(--logo-index) - 3)*3deg));position:relative}.earlier-logo-stack img+img{margin-left:-24px}
.earlier-experience-copy{display:flex;flex-direction:column;gap:8px}.earlier-experience-copy strong{font-size:24px;line-height:32px;font-weight:500}.earlier-experience-label{font-size:16px;line-height:24px;color:#64666c}.earlier-experience-chevron{margin-left:auto;flex:none;transition:transform .25s}.earlier-experience-toggle[aria-expanded=true] .earlier-experience-chevron{transform:rotate(90deg)}
.earlier-experience-list{margin-top:24px}.earlier-experience-list .fig-experience-row{opacity:1;transform:none}.earlier-experience-list:not([hidden]){animation:earlier-experience-reveal .3s ease-out}@keyframes earlier-experience-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:800px){.earlier-experience-toggle{padding:24px;gap:20px;flex-wrap:wrap}.earlier-logo-stack{width:100%}.earlier-experience-copy{flex:1}.earlier-experience-copy strong{font-size:20px;line-height:28px}.earlier-experience-label{font-size:14px;line-height:20px}}
@media(prefers-reduced-motion:reduce){.earlier-experience-list:not([hidden]){animation:none}}
@media print{.earlier-experience-toggle{display:none!important}.fig-experience .earlier-experience-list[hidden]{display:block!important}}
/* Updated Experience component: description below the company header. */
.fig-experience-row{display:flex;flex-direction:column;gap:24px;align-items:stretch}
.fig-experience-header{display:flex;align-items:flex-start;gap:24px;width:100%}
.fig-experience-header .fig-experience-identity{flex:1;min-width:0}
.fig-experience-description{padding-top:0;padding-left:120px;width:100%;box-sizing:border-box}
.experience-awards{display:flex;gap:24px;align-items:flex-start;flex:none}
.experience-award{width:150px;height:85px;position:relative;margin:0;flex:none}
.experience-award img{position:absolute;height:72px;top:7px;object-fit:contain}
.experience-award.altin-orumcek img{width:138px;left:6px}
.experience-award.horizon-gold img{width:79px;left:35px}
@media(max-width:800px){.fig-experience-description{padding-left:0}.fig-experience-header{flex-wrap:wrap;gap:16px}.fig-experience-header .fig-experience-identity{flex-basis:100%}.experience-awards{gap:12px;margin-left:112px}.experience-award{width:120px;height:72px}.experience-award.altin-orumcek img{width:110px;left:5px;height:58px}.experience-award.horizon-gold img{width:64px;left:28px;height:58px}}
@media(max-width:460px){.experience-awards{margin-left:0}}
/* About portrait and biography join the opening title sequence. */
.fig-about-portrait{animation:about-portrait-enter 1.15s cubic-bezier(.16,1,.3,1) .65s backwards}
.fig-about-copy>.eyebrow,.fig-about-copy>h2,.fig-about-biography>p,.fig-about-copy>.cv-downloads{animation:about-copy-enter .9s cubic-bezier(.16,1,.3,1) backwards}
.fig-about-copy>.eyebrow{animation-delay:.8s}.fig-about-copy>h2{animation-delay:.92s}
.fig-about-biography>p:nth-child(1){animation-delay:1.04s}.fig-about-biography>p:nth-child(2){animation-delay:1.16s}.fig-about-biography>p:nth-child(3){animation-delay:1.28s}.fig-about-copy>.cv-downloads{animation-delay:1.4s}
@keyframes about-portrait-enter{from{opacity:0;translate:0 48px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes about-copy-enter{from{opacity:0;translate:0 24px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.fig-about-portrait,.fig-about-copy>.eyebrow,.fig-about-copy>h2,.fig-about-biography>p,.fig-about-copy>.cv-downloads{animation:none}}
@media print{.fig-about-portrait,.fig-about-copy>.eyebrow,.fig-about-copy>h2,.fig-about-biography>p,.fig-about-copy>.cv-downloads{animation:none}}
.fig-about-page .about-learning-section{padding:96px max(24px,calc((100% - 1216px)/2));background:#fafaf8;color:#111214;scroll-margin-top:96px}
.about-learning-section>h2{font-size:56px;line-height:64px;font-weight:500;margin:0 0 48px}
.fig-about-page .about-teaching{background:#191a1d;color:#fafaf8}.about-teaching>h2{margin-bottom:32px}
.about-learning-row{display:flex;flex-direction:column;gap:24px;padding:16px 0;border-bottom:1px solid #00000014}.about-learning-row:last-child{border:0}.about-teaching .about-learning-row{border-color:#ffffff14}
.about-learning-identity{display:flex;gap:24px;align-items:flex-start}.about-learning-identity>img,.education-monogram{width:96px;height:96px;flex:none;border:1px solid #00000014;border-radius:26px;object-fit:cover}.about-teaching .about-learning-identity>img{border-color:#ffffff14}
.about-learning-identity>div{padding-top:8px;display:flex;flex-direction:column;gap:8px;min-height:96px;justify-content:center;box-sizing:border-box}.about-learning-identity p{margin:0;font-size:14px;line-height:20px;font-weight:500}.about-learning-identity h3{margin:0;font-size:24px;line-height:32px;font-weight:600}.about-learning-identity .about-learning-meta{font-weight:400;color:#64666c}.about-teaching .about-learning-meta{color:#a0a2a8}
.about-learning-description{padding-left:120px;font-size:18px;line-height:28px}.about-learning-description p{margin:0}.about-learning-description a{display:inline-block;margin-top:12px;font-size:16px;line-height:24px;color:#a0a2a8;text-decoration:underline;text-underline-offset:3px}.about-learning-description a:hover{color:#fafaf8}
.education-monogram{display:grid;place-items:center;background:#e9ece6;color:#111214;font-size:28px;font-weight:500}
@media(max-width:800px){.fig-about-page .about-learning-section{padding:64px 24px}.about-learning-section>h2{font-size:40px;line-height:48px;margin-bottom:32px}.about-learning-identity{gap:16px}.about-learning-identity h3{font-size:22px;line-height:30px}.about-learning-description{padding-left:0}.about-learning-row{padding:24px 0}}
/* Figma 174:8953: compact earlier-experience disclosure. */
.earlier-experience-toggle{margin-top:48px;padding:16px 24px;gap:16px;border:0;border-radius:24px;background:#0000000a;min-height:98px;box-sizing:border-box}
.earlier-experience-toggle:hover{background:#00000012}
.earlier-logo-stack{display:block;position:relative;width:263px;height:66px;padding:0;flex:0 0 263px}
.earlier-logo-stack img{position:absolute;left:calc(5px + var(--logo-index)*32px);top:5px;width:56px;height:56px;border:1px solid #00000014;border-radius:16px;margin:0!important;box-shadow:0 8px 12px #00000017,0 6px 6.5px #0000001a;transform:rotate(0);box-sizing:border-box}
.earlier-logo-stack img:nth-child(1){transform:rotate(-5deg)}.earlier-logo-stack img:nth-child(2){transform:rotate(-4deg)}.earlier-logo-stack img:nth-child(3){transform:rotate(-3deg)}.earlier-logo-stack img:nth-child(5){transform:rotate(3deg)}.earlier-logo-stack img:nth-child(6){transform:rotate(4deg)}.earlier-logo-stack img:nth-child(7){transform:rotate(5deg)}
.earlier-experience-copy{gap:4px;flex:1;min-width:0}.earlier-experience-copy strong{font-size:20px;line-height:30px;font-weight:600}.earlier-experience-label{font-size:14px;line-height:20px}
.fig-experience-list>.fig-experience-row:nth-child(4) .fig-experience-description{padding-top:8px}.fig-experience-list>.fig-experience-row:nth-child(4) .experience-toggle{margin-top:8px}
@media(max-width:800px){.earlier-experience-toggle{padding:16px 20px;gap:16px}.earlier-logo-stack{flex-basis:263px;max-width:100%}.earlier-experience-copy{flex-basis:calc(100% - 40px)}.earlier-experience-copy strong{font-size:20px;line-height:30px}.earlier-experience-label{font-size:14px;line-height:20px}}
/* Print the complete career, regardless of on-screen disclosure states. */
@media print{
 .fig-experience .earlier-experience-list[hidden],.fig-experience .experience-full[hidden]{display:block!important}
 .fig-experience .experience-summary,.fig-experience .experience-toggle,.fig-experience .earlier-experience-toggle,.fig-experience-heading>button{display:none!important}
 .fig-experience .scroll-reveal{opacity:1!important;translate:none!important;transform:none!important;transition:none!important;animation:none!important}
 .fig-experience-row{break-inside:auto;page-break-inside:auto}
 .fig-experience-header{break-inside:avoid;break-after:avoid}
 .experience-full p{orphans:3;widows:3}
 .experience-full strong{break-after:avoid}
}

/* Match the defined Figma typography without inherited condensed tracking. */
.fig-about-page h1,.fig-about-page h2,.fig-about-page h3{letter-spacing:0}
/* Balance Google Sans Flex emphasis in the About career lists. */
.fig-experience-identity h3,.fig-experience .experience-summary strong,.fig-experience .experience-full strong,.about-learning-identity h3,.earlier-experience-copy strong{font-weight:500}
.fig-experience-description,.fig-experience .experience-summary,.fig-experience .experience-full p,.about-learning-description{font-weight:400}

/* Lighter descriptive copy across About, including expanded career content. */
.fig-about-page .fig-about-biography p,.fig-about-page .fig-experience-description p,.fig-about-page .about-learning-description p,.fig-about-page .capability-grid p,.fig-about-page .career-list p:not(.eyebrow){font-weight:300;font-synthesis:none}

/* Restore the Google Sans weights defined in the design. */
.fig-experience-identity h3,.fig-experience .experience-summary strong,.fig-experience .experience-full strong,.about-learning-identity h3,.earlier-experience-copy strong{font-weight:600}
.fig-about-page .fig-about-biography p,.fig-about-page .fig-experience-description p,.fig-about-page .about-learning-description p{font-weight:400;font-synthesis:none}
.about-education .about-learning-row{padding:32px 0}.about-education .about-learning-description{display:none}
.education-logo{position:relative;width:96px;height:96px;flex:none;border:1px solid #00000014;border-radius:26px;overflow:hidden}
.education-logo>img{width:100%;height:100%;object-fit:cover;display:block}
.education-logo.beykent>img{position:absolute;width:147.36%;height:115.07%;left:-25%;top:-8.41%;max-width:none}
.about-teaching .about-learning-row{padding:32px 0}
/* Recommendations: a dedicated, bilingual page. */
.recommendations-page .recommendations-intro{padding:216px max(24px,calc((100% - 1216px)/2)) 64px;background:#fafaf8}
.recommendations-intro .eyebrow{font-size:14px;line-height:20px;letter-spacing:0;margin-bottom:16px}
.recommendations-intro h1{font:500 clamp(40px,5vw,72px)/1.1 var(--display);letter-spacing:0;margin-bottom:24px}
.recommendations-intro>p:not(.eyebrow){font-size:20px;line-height:30px;max-width:680px;color:#64666c}
.recommendations-source{display:inline-flex;align-items:center;gap:12px;font-size:14px;line-height:20px;margin-top:24px;text-decoration:underline;text-underline-offset:4px}
.recommendations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding:0 max(24px,calc((100% - 1216px)/2)) 96px;background:#fafaf8}
.recommendation-card{padding:32px;border:1px solid #00000014;border-radius:24px;background:#f0f1ec;align-self:start;animation:about-copy-enter .8s ease backwards}
.recommendation-card:nth-child(2){animation-delay:.1s}.recommendation-card:nth-child(3){animation-delay:.2s}.recommendation-card:nth-child(4){animation-delay:.3s}.recommendation-card:nth-child(5){animation-delay:.4s}
.recommendation-card .recommendation-author{display:flex;position:static;align-items:flex-start;justify-content:flex-start;gap:16px;padding:0;border:0;background:transparent}
.recommendation-avatar{width:56px;height:56px;border-radius:50%;background:#111214;color:#fafaf8;flex:none;display:grid;place-items:center;font:500 18px/28px var(--body)}
.recommendation-author h2{font:500 20px/30px var(--body);letter-spacing:0;margin:0 0 4px}.recommendation-author p{font:400 14px/20px var(--body);color:#64666c;margin:0 0 8px;overflow-wrap:anywhere}.recommendation-author time{font-size:12px;line-height:16px;color:#64666c}
.recommendation-quote-mark{display:block;font:500 64px/56px var(--body);margin-top:24px;height:40px;color:#7b886b}
.recommendation-quote{margin:0;font:400 18px/28px var(--body)}.recommendation-quote p+p{margin-top:20px}
.recommendation-card:has(.recommendation-toggle):not(.expanded) .recommendation-quote{max-height:224px;overflow:hidden;mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%)}
.recommendation-toggle{border:0;background:transparent;padding:0;font:500 14px/20px var(--body);text-decoration:underline;text-underline-offset:4px;margin-top:16px;color:#111214}
.recommendation-language{font:400 12px/16px var(--body);color:#64666c;margin-top:24px;padding-top:16px;border-top:1px solid #00000014}
@media(min-width:801px){header.fig-header nav{gap:12px!important}header.fig-header nav>a:not(.fig-schedule){padding-left:12px!important;padding-right:12px!important}}
@media(max-width:800px){.recommendations-page .recommendations-intro{padding:168px 24px 40px}.recommendations-intro>p:not(.eyebrow){font-size:18px;line-height:28px}.recommendations-grid{grid-template-columns:1fr;padding:0 24px 64px}.recommendation-card{padding:24px}}
@media(prefers-reduced-motion:reduce){.recommendation-card{animation:none}}
@media print{.recommendation-card:has(.recommendation-toggle):not(.expanded) .recommendation-quote{max-height:none;overflow:visible;mask-image:none}.recommendation-toggle{display:none}.recommendation-card{animation:none;break-inside:avoid}}
.recommendation-card .recommendation-author h2{color:#111214}
/* Recommendations: one author and quote per row, using supplied portraits. */
.recommendations-grid{grid-template-columns:minmax(0,1fr);gap:0}
.recommendation-card{border:0;border-bottom:1px solid #00000014;border-radius:0;background:transparent;padding:40px 0;display:grid;grid-template-columns:320px minmax(0,1fr);column-gap:48px;row-gap:16px;width:100%}
.recommendation-card:last-child{border-bottom:0}
.recommendation-author{grid-column:1;grid-row:1/span 3}
.recommendation-quote-mark{display:none}
.recommendation-quote{grid-column:2;grid-row:1}
.recommendation-toggle{grid-column:2;grid-row:2;justify-self:start;margin-top:0}
.recommendation-avatar.recommendation-photo{width:72px;height:72px;background-color:#e9e9e9;background-repeat:no-repeat;flex:0 0 72px;display:block}
.photo-0{background-image:url('/assets/recommendations/authors-1.png');background-size:1225.5px 1125px;background-position:-52.5px -189.75px}
.photo-1{background-image:url('/assets/recommendations/authors-1.png');background-size:1225.5px 1125px;background-position:-52.5px -690px}
.photo-2{background-image:url('/assets/recommendations/authors-2.webp');background-size:1230px 1257px;background-position:-51px -33px}
.photo-3{background-image:url('/assets/recommendations/authors-2.webp');background-size:1230px 1257px;background-position:-51px -340.5px}
.photo-4{background-image:url('/assets/recommendations/authors-2.webp');background-size:1230px 1257px;background-position:-51px -582.75px}
@media(max-width:1000px){.recommendation-card{grid-template-columns:280px minmax(0,1fr);column-gap:32px}}
@media(max-width:800px){.recommendation-card{grid-template-columns:minmax(0,1fr);padding:32px 0;row-gap:24px}.recommendation-author{grid-column:1;grid-row:1}.recommendation-quote{grid-column:1;grid-row:2}.recommendation-toggle{grid-column:1;grid-row:3}.recommendation-card .recommendation-author{gap:16px}}
/* Testimonials supports the career story within About. */
.about-testimonials{padding:96px max(24px,calc((100% - 1216px)/2));background:#fafaf8;color:#111214;scroll-margin-top:112px}
.testimonials-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;margin-bottom:32px}
.testimonials-heading h2{font:500 56px/64px var(--display);letter-spacing:0;max-width:850px}
.testimonials-heading .recommendations-source{flex:none;margin-top:20px}
.about-testimonials .recommendations-grid{padding:0;background:transparent;display:block}
.about-testimonials .recommendation-card{animation:none}
.about-testimonials .recommendation-card:has(.recommendation-toggle):not(.expanded) .recommendation-quote{max-height:112px}
.more-testimonials[hidden]{display:none!important}.more-testimonials .recommendation-card:first-child{border-top:1px solid #00000014}
.about-testimonials .testimonials-more{margin-top:32px;height:48px;padding:11px 24px;font-size:16px;line-height:24px;background:transparent;color:#111214;border-color:#00000029}
.about-testimonials .testimonials-more:hover{background:#111214;color:#fafaf8}
@media(max-width:800px){.about-testimonials{padding:64px 24px}.testimonials-heading{flex-direction:column;gap:16px}.testimonials-heading h2{font-size:36px;line-height:44px}.testimonials-heading .recommendations-source{margin-top:0}.about-testimonials .recommendation-card:has(.recommendation-toggle):not(.expanded) .recommendation-quote{max-height:168px}}
@media print{.more-testimonials[hidden]{display:block!important}.testimonials-more{display:none!important}.about-testimonials .recommendation-card:has(.recommendation-toggle):not(.expanded) .recommendation-quote{max-height:none}}

/* Quiet interactive dot field, confined to the home opening. */
.home-page .fig-hero{position:relative;isolation:isolate;--dot-x:50%;--dot-y:45%;--dot-light:0}
.home-page .fig-hero::before,.home-page .fig-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:40px 40px;background-position:20px 20px}
.home-page .fig-hero::before{background-image:radial-gradient(circle,rgba(255,255,255,.13) .85px,transparent 1.1px);mask-image:linear-gradient(transparent,black 15%,black 85%,transparent)}
.home-page .fig-hero::after{background-image:radial-gradient(circle,rgba(255,255,255,.9) 1px,transparent 1.4px);opacity:var(--dot-light);mask-image:radial-gradient(circle 200px at var(--dot-x) var(--dot-y),black 0%,rgba(0,0,0,.8) 25%,transparent 100%)}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.home-page .fig-hero::after{display:none}}
@media print{.home-page .fig-hero::before,.home-page .fig-hero::after{display:none}}

/* Spectral light belongs to the reel; opening keeps its pointer-lit dot grid. */
.home-page .fig-reel{position:relative;isolation:isolate}
.home-page .fig-reel .opening-light-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;filter:none;opacity:.28}
.home-page .fig-reel .fig-reel-play{z-index:4}
@media print{.opening-light-canvas{display:none}}

/* Button labels slide up once and settle on an identical second line. */
.text-roll-button .text-roll{display:inline-block;overflow:hidden;vertical-align:bottom;line-height:1.4;white-space:pre;position:relative;color:inherit}
.text-roll-button .text-roll-track{display:block;position:relative;transition:transform .42s cubic-bezier(.22,.68,0,1.01);color:inherit}
.text-roll-button .text-roll-original{display:block;color:inherit}
.text-roll-button .text-roll-copy{display:block;position:absolute;left:0;top:110%;color:inherit}
@media(hover:hover) and (pointer:fine){.text-roll-button:hover .text-roll-track{transform:translateY(-110%)}}
.text-roll-button:focus-visible .text-roll-track{transform:translateY(-110%)}
@media(prefers-reduced-motion:reduce){.text-roll-button .text-roll-track{transition:none!important;transform:none!important}}
@media print{.text-roll-button .text-roll-track{transform:none!important}.text-roll-copy{display:none!important}}

/* Reel illumination is parked for now. */
.home-page .fig-reel .opening-light-canvas{display:none}

/* Semantic emphasis uses the site-wide semibold weight. */
b,strong{font-weight:600}

/* Editable case-study storyboards: media briefs are intentionally distinct from product UI. */
.visual-case-draft{background:#fafaf8;color:#111214;padding-top:112px}
.draft-case-opening,.draft-case-chapters,.draft-case-nav{max-width:1216px;margin:0 auto}
.draft-case-opening{padding:48px 0 0}
.draft-case-status{display:flex;gap:24px;align-items:flex-start;padding:20px 24px;background:#eef1e8;border:1px solid #dde2d4;border-radius:12px;margin:40px 0 64px}
.draft-case-status>span{font:600 13px/20px var(--body);white-space:nowrap;padding:4px 10px;background:#dde6ce;border-radius:5px}
.draft-case-status p{font:400 14px/22px var(--body);margin:0;max-width:760px;color:#54594e}
.draft-case-opening .eyebrow{font:500 13px/20px var(--body);margin-bottom:24px;letter-spacing:.06em}
.draft-case-opening h1{font:500 clamp(40px,4.6vw,72px)/1.08 var(--body);letter-spacing:-.025em;max-width:1050px;margin:0 0 28px}
.draft-case-intro{font:400 20px/32px var(--body);max-width:820px;color:#62656b;margin:0 0 40px}
.draft-case-scope{display:grid;grid-template-columns:1fr 1fr;gap:48px;border-top:1px solid #11121420;padding:24px 0 48px}
.draft-case-scope span{font:500 12px/20px var(--body);color:#787b80;display:block;margin-bottom:8px}
.draft-case-scope p{font:400 16px/24px var(--body);margin:0}
.case-media-slot{margin:0;border:1px dashed #afb5be;border-radius:14px;background:#f0f1f3;padding:24px;position:relative;overflow:hidden}
.case-media-slot-hero{padding:32px;background:#e9edf0}
.slot-top{display:flex;justify-content:space-between;gap:16px;font:500 11px/18px var(--body);letter-spacing:.06em;text-transform:uppercase;color:#6c747d}
.case-media-slot h3{font:500 25px/34px var(--body);margin:24px 0 0;letter-spacing:0;max-width:850px}
.case-media-slot-hero h3{font-size:32px;line-height:40px}
.draft-sketch{height:180px;display:flex;align-items:center;justify-content:center;gap:24px;opacity:.68;margin:16px 0 24px;pointer-events:none}
.case-media-slot-hero .draft-sketch{height:260px}
.draft-sketch-flow i{display:block;width:70px;height:132px;border:1.5px solid #aab2bc;border-radius:9px;background:linear-gradient(#dde2e8 0 0) 12px 20px/calc(100% - 24px) 30px no-repeat,linear-gradient(#e0e5ea 0 0) 12px 60px/calc(100% - 24px) 45px no-repeat,#f6f7f8}
.draft-sketch b{font:400 24px var(--body);color:#aab2bc}
.draft-sketch-video{border:1px solid #bbc2ca;border-radius:8px;width:min(100%,440px);margin:32px auto;background:#f6f7f8}
.draft-sketch-video i{font:400 44px var(--body);font-style:normal;color:#aab2bc}
.draft-sketch-layout i{display:block;width:200px;height:128px;border:1.5px solid #aab2bc;border-radius:8px;background:linear-gradient(#dde2e8 0 0) 12px 12px/55% 12px no-repeat,linear-gradient(#e0e5ea 0 0) 12px 36px/calc(100% - 24px) 72px no-repeat,#f6f7f8}
.draft-sketch-layout i+ i{width:72px;height:142px;transform:translate(-36px,20px)}
.slot-brief{border-top:1px solid #b9c0c84d;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;padding-top:24px}
.slot-brief h4{font:600 12px/20px var(--body);margin:0 0 8px;color:#69727b;letter-spacing:0}
.slot-brief p{font:400 15px/24px var(--body);margin:0;max-width:650px;color:#434b54}
.draft-case-nav{display:flex;gap:12px;flex-wrap:wrap;padding:28px 0 48px;border-bottom:1px solid #11121420}
.draft-case-nav a{font:400 12px/20px var(--body);color:#62656b;padding:6px 10px;border:1px solid #1112141a;border-radius:6px;text-decoration:none}
.draft-case-nav a:hover{background:#e8ebe4;color:#111214}
.draft-case-chapter{padding:72px 0;border-bottom:1px solid #11121420;scroll-margin-top:140px}
.draft-chapter-intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-bottom:40px}
.draft-chapter-intro h2{font:500 32px/40px var(--body);letter-spacing:-.015em;margin:0;max-width:490px}
.draft-chapter-intro>p{font:400 18px/28px var(--body);margin:0;color:#62656b}
.draft-chapter-media{display:grid;gap:24px}
.draft-source-notes{padding:48px 0 80px}
.draft-source-notes details{border:1px solid #11121420;border-radius:12px;padding:24px;margin-bottom:16px}
.draft-source-notes summary{font:500 18px/28px var(--body);cursor:pointer}
.draft-source-notes details>p,.draft-source-notes details>div{margin-top:24px}
.draft-source-notes h3{font:600 16px/24px var(--body);margin:0 0 8px}
.draft-source-notes p{font:400 16px/26px var(--body);max-width:850px;color:#62656b}
.draft-source-notes img{width:100%;height:auto;margin-top:24px;display:block}
@media(max-width:1280px){.draft-case-opening,.draft-case-chapters,.draft-case-nav{margin-left:24px;margin-right:24px}}
@media(max-width:800px){.visual-case-draft{padding-top:116px}.draft-case-opening{padding-top:24px}.draft-case-status{display:block;margin:24px 0 40px;padding:16px}.draft-case-status>span{display:inline-block;margin-bottom:12px;white-space:normal}.draft-case-opening h1{font-size:40px}.draft-case-intro{font-size:18px;line-height:28px}.draft-case-scope{grid-template-columns:1fr;gap:20px;padding-bottom:32px}.case-media-slot,.case-media-slot-hero{padding:20px}.slot-top{font-size:10px;gap:12px;flex-wrap:wrap}.case-media-slot h3,.case-media-slot-hero h3{font-size:23px;line-height:30px;margin-top:20px}.draft-sketch,.case-media-slot-hero .draft-sketch{height:160px;gap:10px}.draft-sketch-flow i{width:54px;height:110px}.draft-sketch-layout i{width:150px;height:100px}.draft-sketch-layout i+i{width:60px;height:120px;transform:translate(-20px,12px)}.slot-brief{grid-template-columns:1fr;gap:20px;padding-top:20px}.draft-chapter-intro{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.draft-chapter-intro h2{font-size:28px;line-height:36px}.draft-case-chapter{padding:48px 0}.draft-source-notes details{padding:18px}.draft-case-nav{padding:24px 0 32px}}
.draft-chapter-intro>div>p{font:400 18px/28px var(--body);margin:0;color:#34383d}
.draft-chapter-intro>div>p.draft-planning-note{font-size:14px;line-height:22px;color:#777f88;border-left:2px solid #cbd2dc;padding-left:16px;margin-top:20px}
.slot-existing-media{margin:0 0 24px;font:400 14px/22px var(--body);color:#626b75}
.slot-existing-media summary{cursor:pointer;padding:12px 0}
.slot-existing-media video{display:block;width:100%;aspect-ratio:16/9;margin-top:12px;background:#111214}

.visual-case-draft{padding-top:0}
@media(max-width:800px){.visual-case-draft{padding-top:0}}

.draft-sketch-platforms i{display:block;width:160px;height:100px;border:1.5px solid #aab2bc;border-radius:7px;background:#e0e5ea}
.draft-sketch-platforms i:nth-child(2){width:130px;height:90px;border-radius:4px}
.draft-sketch-platforms i:nth-child(3){width:50px;height:110px;border-radius:8px}
@media(max-width:800px){.draft-sketch-platforms i{width:105px;height:68px}.draft-sketch-platforms i:nth-child(2){width:85px;height:62px}.draft-sketch-platforms i:nth-child(3){width:38px;height:82px}}
/* Nested animated text must not inherit the mobile call icon's circle geometry. */
.mobile-call span.text-roll,.mobile-call .text-roll span{width:auto;height:auto;background:none;border-radius:0;font-size:inherit;place-items:normal}
.mobile-call span.text-roll{display:inline-block}.mobile-call .text-roll-track,.mobile-call .text-roll-original,.mobile-call .text-roll-copy{display:block}

/* Reader-facing case, with a separate optional production layer. */
.draft-case-tools{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:32px 0 56px}
.draft-case-tools>span{font:400 12px/20px var(--body);color:#777f88}
.draft-case-tools .pill{font:400 13px/20px var(--body);height:40px;padding:9px 16px;border:1px solid #11121426;color:#111214}
.visual-case-draft:not(.case-notes-visible) .draft-case-status,.visual-case-draft:not(.case-notes-visible) .slot-top,.visual-case-draft:not(.case-notes-visible) .slot-brief,.visual-case-draft:not(.case-notes-visible) .draft-planning-note,.visual-case-draft:not(.case-notes-visible) .draft-source-notes{display:none}
.case-notes-visible .draft-case-status{margin-top:-24px}
.hybrid-ownership{max-width:1216px;margin:64px auto 24px;padding:40px 0;border-top:1px solid #11121420;display:grid;grid-template-columns:1fr 1.3fr;gap:80px}
.hybrid-ownership .eyebrow{font:500 12px/20px var(--body);color:#777f88;margin:0 0 16px}
.hybrid-ownership h2{font:500 32px/40px var(--body);letter-spacing:0;margin:0}
.hybrid-ownership>div>p{font:400 18px/30px var(--body);color:#42464c;margin:0}
.hybrid-team{margin-top:28px;padding-top:20px;border-top:1px solid #11121416}
.hybrid-team span{font:500 12px/20px var(--body);color:#777f88}
.hybrid-team p{font:400 16px/24px var(--body);margin:8px 0 0}
.case-media-slot.has-original{padding:0;border:0;border-radius:0;background:none;overflow:visible}
.case-media-slot.has-original>h3{font:500 21px/28px var(--body);margin:0 0 24px}
.hybrid-real-image img{display:block;width:100%;height:auto;border:1px solid #11121412;border-radius:10px}
.case-media-slot-hero .hybrid-real-image img{max-height:640px;object-fit:cover;object-position:top}
.hybrid-media-caption{font:400 12px/20px var(--body);margin:12px 0 0;color:#777f88}
.hybrid-motion{display:block;width:100%;aspect-ratio:16/9;background:#111214;border-radius:10px}
.hybrid-real-flow{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.hybrid-asset-placeholder{position:relative}
.hybrid-asset-label{font:400 11px/18px var(--body);color:#8a919a;letter-spacing:.02em}
.case-media-slot.awaiting-original{background:#f2f3f4;border-color:#cbd0d6;padding:24px}
.hybrid-asset-placeholder>h3{font:400 20px/28px var(--body);color:#626b75;margin:12px 0 0}
.visual-case-draft:not(.case-notes-visible) .awaiting-original .draft-sketch{height:115px;margin:12px 0 0;opacity:.48}
.visual-case-draft:not(.case-notes-visible) .case-media-slot-hero.awaiting-original .draft-sketch{height:230px}
.case-notes-visible .case-media-slot.has-original .slot-top{padding:14px 0;margin-bottom:20px;border-top:1px dashed #aab2bc}
.case-notes-visible .case-media-slot.has-original .slot-brief{margin-top:24px;padding:24px;border:1px dashed #aab2bc;border-radius:8px;background:#f0f1f3}
.chapter-experience .draft-chapter-media:has(>.case-media-slot:nth-child(2)){grid-template-columns:1.4fr 1fr;align-items:start}
.hybrid-additional-material:empty{display:none}
.hybrid-additional-material{padding:64px 0;border-bottom:1px solid #11121420}
.hybrid-additional-material>h2{font:500 32px/40px var(--body);margin:0 0 20px;letter-spacing:0}
.hybrid-additional-material>p{font:400 18px/28px var(--body);color:#62656b;max-width:750px;margin:0 0 32px}
.hybrid-goart-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:1280px){.hybrid-ownership{margin-left:24px;margin-right:24px}}
@media(max-width:800px){.draft-case-tools{align-items:flex-start;margin:24px 0 40px;gap:12px}.draft-case-tools>span{max-width:110px}.draft-case-tools .pill{height:auto;min-height:40px;padding:9px 12px;text-align:center;white-space:normal}.hybrid-ownership{grid-template-columns:1fr;gap:24px;margin-top:40px;padding:28px 0}.hybrid-ownership h2{font-size:28px;line-height:36px}.hybrid-ownership>div>p{font-size:17px;line-height:28px}.hybrid-real-flow,.hybrid-goart-pair,.chapter-experience .draft-chapter-media:has(>.case-media-slot:nth-child(2)){grid-template-columns:1fr}.case-media-slot.awaiting-original{padding:20px}.case-media-slot-hero .hybrid-real-image img{max-height:440px}.hybrid-additional-material{padding:48px 0}}
/* Figma 172:8478 — horizontally browsable testimonial cards. */
.about-testimonials{background:#e8e9eb;overflow:hidden;padding:96px max(24px,calc((100% - 1216px)/2))}
.testimonials-heading{align-items:center}.testimonials-heading .recommendations-source{margin:0;height:44px;padding:9px 16px;display:flex;gap:12px;font:500 16px/24px var(--body);white-space:nowrap;color:#111214;border:1px solid #00000029}
.testimonials-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * max(24px,(100vw - 1216px)/2));padding-right:max(24px,calc((100vw - 1216px)/2));align-items:flex-start}
.testimonials-track::-webkit-scrollbar{display:none}
.about-testimonials .recommendation-card{display:flex;flex-direction:column;gap:24px;flex:0 0 464px;width:464px;padding:48px 32px;border:0;border-radius:24px;background:#fafaf8;scroll-snap-align:start;min-height:512px}
.about-testimonials .recommendation-card .recommendation-author{display:flex;flex-direction:column;gap:24px;width:100%}
.about-testimonials .recommendation-author>div{padding-top:8px;min-height:96px;display:flex;flex-direction:column;gap:8px}
.about-testimonials .recommendation-author p{font:500 14px/20px var(--body);color:#111214;margin:0}
.about-testimonials .recommendation-author h2{font:600 24px/32px var(--body);margin:0}
.about-testimonials .recommendation-author time{font:400 14px/20px var(--body);color:#64666c}
.about-testimonials .recommendation-photo{zoom:1.3333333333}
.about-testimonials .recommendation-quote{font:400 18px/28px var(--body);width:100%}
.about-testimonials .recommendation-card:has(.recommendation-toggle):not(.expanded) .recommendation-quote{max-height:196px;mask-image:none;overflow:hidden;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical}
.about-testimonials .recommendation-card:not(.expanded) .recommendation-quote p:not(:first-child){display:none}
.about-testimonials .recommendation-toggle{margin-top:-12px;text-decoration:none;color:#64666c;font:500 16px/24px var(--body);align-self:flex-start}
.testimonials-pagination{display:flex;gap:16px;justify-content:center;margin-top:32px}
.testimonial-dot{position:relative;width:8px;height:8px;border:0;border-radius:50%;background:#a1a3aa;padding:0;cursor:pointer}.testimonial-dot:before{content:'';position:absolute;inset:-12px}.testimonial-dot.active{background:#111214}
@media(max-width:800px){.about-testimonials{padding:64px 24px}.testimonials-heading{align-items:flex-start}.testimonials-track{margin-right:-24px;padding-right:24px;gap:20px}.about-testimonials .recommendation-card{flex-basis:min(464px,calc(100vw - 64px));width:min(464px,calc(100vw - 64px));padding:32px 24px;min-height:512px}.testimonials-heading h2{font-size:36px;line-height:44px}}
@media print{.testimonials-track{display:block;overflow:visible;margin:0;padding:0}.about-testimonials .recommendation-card{width:100%;min-height:0;margin-bottom:24px;break-inside:avoid}.about-testimonials .recommendation-card .recommendation-quote{display:block!important;max-height:none!important;overflow:visible!important}.about-testimonials .recommendation-card .recommendation-quote p{display:block!important}.testimonials-pagination,.recommendation-toggle{display:none!important}}

.about-testimonials .recommendation-card{min-height:560px}.about-testimonials .recommendation-card:not(.expanded){height:560px}.about-testimonials .recommendation-toggle{margin-top:auto}
@media print{.about-testimonials .recommendation-card{height:auto!important;min-height:0}}
/* Initial inset scrolls away with the first card; the viewport spans both edges. */
@media screen{.about-testimonials{--testimonial-inset:max(24px,calc((100vw - 1216px)/2))}.about-testimonials .testimonials-track{margin-left:calc(-1 * var(--testimonial-inset));margin-right:calc(-1 * var(--testimonial-inset));padding-left:var(--testimonial-inset);padding-right:var(--testimonial-inset);scroll-padding-left:0}}
/* Preserve the title-aligned initial position when scroll snapping initializes. */
@media screen{.testimonials-track>.recommendation-card:first-child{scroll-margin-left:var(--testimonial-inset)}}
@media screen{.about-testimonials .testimonials-track{scroll-padding-left:var(--testimonial-inset);padding-right:max(var(--testimonial-inset),calc(100vw - var(--testimonial-inset) - 464px))}.testimonials-track>.recommendation-card:first-child{scroll-margin-left:0}}
@media screen and (max-width:800px){.about-testimonials .testimonials-track{padding-right:40px}}
@media screen{.about-testimonials .testimonials-track{padding-right:var(--testimonial-inset)}}
.testimonial-dot[hidden]{display:none}
@media screen{.about-testimonials .testimonials-track{scroll-snap-type:none}.about-testimonials .recommendation-card{transition:opacity .25s ease}.about-testimonials .recommendation-card.is-clipped{opacity:.48}}
@media(prefers-reduced-motion:reduce){.about-testimonials .recommendation-card{transition:none}}
/* Square testimonial cards and the shared inverted call-to-action states. */
.about-testimonials .recommendation-card{border-radius:0}
.testimonials-heading .recommendations-source{background:transparent;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.testimonials-heading .recommendations-source .call-arrow-circle{background:#36383e;color:#fafaf8;width:20px;height:20px;flex:0 0 20px;text-decoration:none;transition:background .25s,color .25s}
.testimonials-heading .recommendations-source:is(:hover,:focus-visible){background:#111214;border-color:#111214;color:#fafaf8;text-decoration:none}
.testimonials-heading .recommendations-source:is(:hover,:focus-visible) .call-arrow-circle{background:#fafaf8;color:#111214}
.testimonials-carousel{position:relative}
.testimonial-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;padding:8px;border:0;border-radius:50%;background:#111214;display:grid;place-items:center;cursor:pointer;transition:background .2s}
.testimonial-arrow img{display:block;width:24px;height:24px;transform:rotate(-90deg)}
.testimonial-prev{left:0}.testimonial-prev img{transform:rotate(90deg)}.testimonial-next{right:-40px}
.testimonial-arrow:hover{background:#36383e}.testimonial-arrow:focus-visible{outline:2px solid #111214;outline-offset:4px}.testimonial-arrow[hidden]{display:none}
@media(max-width:800px){.testimonial-next{right:0}}
@media print{.testimonial-arrow{display:none!important}}
/* Keep navigation together below the content, without covering any card. */
.testimonials-controls{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:32px;min-height:40px}
.testimonials-controls .testimonials-pagination{margin:0}
.testimonials-controls .testimonial-arrow{position:static;transform:none;flex:0 0 40px}
.testimonials-controls .testimonial-arrow[hidden]{display:grid;visibility:hidden;pointer-events:none}
@media print{.testimonials-controls{display:none}}
/* Two complete cards and a deliberate preview of the third, as in the design. */
@media screen and (min-width:801px){.about-testimonials .recommendation-card{flex-basis:calc((100vw - var(--testimonial-inset) - 64px)/2.72);width:calc((100vw - var(--testimonial-inset) - 64px)/2.72)}}
.testimonials-controls{min-height:8px}
/* Footer 145:909 — clean black surface and five social platforms. */
.fig-contact{background:#000}
.fig-contact-social>a,.fig-contact-social>.footer-medium{width:24px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}
.fig-contact-social>a{transition:opacity .2s}.fig-contact-social>a:hover{opacity:.64}
.fig-contact-social img{flex:none}
.fig-contact-bottom>a{display:flex;align-items:center;gap:8px}
.fig-contact-bottom>a:hover{color:#fafaf8}
.fig-contact-buttons>a:is(:hover,:focus-visible)>img{filter:invert(1)}
/* Compact previews retain their geometry; full recommendations open separately. */
.about-testimonials .recommendation-card,.about-testimonials .recommendation-card:not(.expanded){height:460px;min-height:460px;padding-top:32px;padding-bottom:32px;gap:20px;opacity:1}
.about-testimonials .recommendation-card.is-clipped{opacity:1}
.about-testimonials .recommendation-card .recommendation-author{flex-direction:row;gap:16px;align-items:center}
.about-testimonials .recommendation-photo{zoom:1}
.about-testimonials .recommendation-author>div{padding-top:0;min-height:0;gap:4px}
.about-testimonials .recommendation-card:has(.recommendation-toggle):not(.expanded) .recommendation-quote{max-height:196px;-webkit-line-clamp:7}
.testimonial-dialog{position:fixed;inset:0;margin:auto;width:min(720px,calc(100% - 40px));max-height:calc(100dvh - 64px);overflow-y:auto;padding:48px;border:0;background:#fafaf8;color:#111214;box-shadow:0 24px 100px #0004;font:400 18px/28px var(--body)}
.testimonial-dialog::backdrop{background:#11121499;backdrop-filter:blur(5px)}
.testimonial-dialog .recommendation-author{display:flex;align-items:center;gap:16px;padding:0 32px 28px 0}
.testimonial-dialog .recommendation-author>div{display:flex;flex-direction:column;gap:4px}
.testimonial-dialog .recommendation-author h2{font:600 24px/32px var(--body);margin:0}
.testimonial-dialog .recommendation-author p{margin:0;font:500 14px/20px var(--body)}
.testimonial-dialog .recommendation-photo{zoom:1}
.testimonial-dialog .recommendation-quote{display:block;max-height:none;overflow:visible;mask:none;font:400 18px/28px var(--body)}
.testimonial-dialog-close{position:absolute;right:16px;top:16px;width:36px;height:36px;border:1px solid #0002;border-radius:50%;background:transparent;color:#111214;font:400 28px/32px var(--body);cursor:pointer}
.testimonial-dialog-close:hover{background:#111214;color:#fafaf8}
@media(max-width:800px){.testimonial-dialog{padding:48px 24px 28px}.about-testimonials .recommendation-author h2{font-size:22px;line-height:28px}.about-testimonials .recommendation-card{padding-left:24px;padding-right:24px}}
@media print{.about-testimonials .recommendation-card{height:auto!important;min-height:0!important}}
.testimonial-dialog header.recommendation-author{position:static;inset:auto;width:auto;height:auto;min-height:0;justify-content:flex-start;background:transparent;color:#111214;border:0;box-shadow:none;backdrop-filter:none;transform:none}
.testimonial-dialog header.recommendation-author h2{color:#111214}
.testimonial-dialog-close{display:grid;place-items:center;padding:0;line-height:1;box-sizing:border-box}
.testimonial-dialog-close::before,.testimonial-dialog-close::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:1.5px;border-radius:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.testimonial-dialog-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* Figma 104:468 — square statistic panels. */
.fig-leadership .proof-row>div{border-radius:0}
/* Two local placement studies, sharing one quiet monochrome logo row. */
.brand-strip{box-sizing:border-box;min-width:0;color:#64666c}
.brand-strip>p{font:400 14px/20px var(--body);text-align:center;margin:0 0 32px;letter-spacing:0}
.brand-strip-showreel{background:#fafaf8;padding:64px max(24px,calc((100vw - 1216px)/2)) 80px}
.brand-marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brand-marquee-track{display:flex;width:max-content;animation:brand-drift 54s linear infinite}
.brand-marquee-group{display:flex;flex-shrink:0;align-items:center;gap:64px;padding-right:64px}
.brand-logo{display:flex;flex:0 0 144px;width:144px;height:64px;align-items:center;justify-content:center}
.brand-logo img{display:block;width:144px;height:48px;object-fit:contain;filter:grayscale(1);opacity:.58}
.brand-marquee:hover .brand-marquee-track{animation-play-state:paused}
.fig-leadership>.brand-strip-leadership{grid-column:1/-1;align-self:end;width:100%;padding-top:56px;margin-top:8px}
@keyframes brand-drift{to{transform:translateX(-50%)}}
@media(max-width:800px){.home-page>.brand-strip-showreel{padding:48px 20px 56px}.brand-strip>p{font-size:12px;line-height:18px;margin-bottom:24px}.brand-marquee-group{gap:40px;padding-right:40px}.brand-logo{width:120px;flex-basis:120px;height:56px}.brand-logo img{width:120px;height:40px}.fig-leadership>.brand-strip-leadership{padding-top:24px;margin:0}}
@media(prefers-reduced-motion:reduce){.brand-marquee-track{animation:none}.brand-marquee{overflow-x:auto}}
.brand-logo img{filter:grayscale(1) brightness(.75);opacity:1}
.fig-leadership .brand-strip>p{width:100%;max-width:none;text-align:center;font:400 14px/20px var(--body);color:#64666c;margin:0 0 32px}
/* GAİN opening from Figma 217:9535; the existing case narrative follows below. */
.gain-case-page{padding-top:0;background:#fafaf8}
.gain-case-cover{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#111214;padding:0!important}
.gain-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gain-cover-shade{position:absolute;left:50%;top:0;transform:translateX(-50%);width:113.75%;height:100%;object-fit:cover;pointer-events:none}
.gain-cover-bottom{position:absolute;left:max(24px,calc((100% - 1216px)/2));right:max(24px,calc((100% - 1216px)/2));bottom:48px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.gain-cover-logo{width:144px;height:72px;flex:none}
.gain-cover-bottom .pill{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 20px;font:500 16px/24px var(--body);border:1px solid #ffffff29;color:#fafaf8;background:transparent;height:48px}
.gain-cover-bottom .pill:hover{background:#fafaf8;color:#111214}.gain-cover-bottom .pill:hover>img{filter:invert(1)}
.gain-case-overview{padding:96px max(24px,calc((100% - 1216px)/2)) 100px;background:#fafaf8}
.gain-overview-top{display:grid;grid-template-columns:minmax(0,800px) auto;gap:clamp(32px,6vw,152px);align-items:start}
.gain-overview-copy{min-width:0;display:flex;flex-direction:column;gap:24px}
.gain-breadcrumb{display:flex;align-items:center;gap:8px;font:400 14px/20px var(--body)}.gain-breadcrumb a{color:inherit;text-decoration:none}.gain-breadcrumb img{transform:rotate(-90deg)}
.gain-overview-copy h1{font:500 56px/64px var(--body);letter-spacing:0;margin:0}
.gain-overview-copy>p{font:400 18px/28px var(--body);margin:0}
.gain-platforms{display:flex;gap:24px;padding-top:0}.gain-platforms>div{display:flex;flex-direction:column;gap:8px;align-items:center;width:48px;flex:none}.gain-platforms img{width:48px;height:48px}.gain-platforms span{font:500 10px/14px var(--body);white-space:nowrap}
.gain-overview-meta{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px}.gain-overview-meta>div{padding:24px;background:#0000000a;border:1px solid #0000000a}.gain-overview-meta span{font:400 16px/24px var(--body)}.gain-overview-meta p{font:500 20px/30px var(--body);margin:8px 0 0}
body:has(.gain-case-page) header.fig-header{background:#11121455;color:#fafaf8}body:has(.gain-case-page) header.fig-header nav>a{color:#fafaf8}body:has(.gain-case-page) header.fig-header .works-nav{background:#fafaf8;color:#111214}
@media(max-width:1000px){.gain-overview-top{grid-template-columns:1fr;gap:32px}}
@media(max-width:800px){.gain-case-cover{min-height:360px}.gain-cover-bottom{bottom:24px;left:20px;right:20px;gap:16px}.gain-case-overview{padding:48px 20px 56px!important}.gain-overview-copy h1{font-size:36px;line-height:44px}.gain-overview-copy>p{font-size:16px;line-height:24px}.gain-overview-meta{grid-template-columns:1fr;gap:16px;margin-top:32px}.gain-cover-logo{width:144px;height:72px}.gain-cover-bottom .pill{font-size:14px;padding-left:14px}.gain-platforms{gap:24px}}
main.gain-case-page{max-width:none;width:100%;margin:0;padding:0!important}
.gain-case-page>.gain-case-cover{margin:0;max-width:none}
body:has(.gain-case-page) header.fig-header{background:rgba(17,18,20,.25);backdrop-filter:blur(12px)}
body:has(.gain-case-page){padding-top:0}
/* Opening frame: clear navigation and a cover short enough to reveal the story. */
body:has(.gain-case-page) header.fig-header:not(.is-scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
body:has(.gain-case-page) header.fig-header.is-scrolled{background:rgba(17,18,20,.55);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.gain-case-cover{aspect-ratio:auto;height:62svh;min-height:400px;max-height:812px}
.gain-cover-image{object-position:center center}
.gain-case-overview{padding-top:64px;padding-bottom:80px}
@media(max-width:800px){.gain-case-cover{height:52svh;min-height:320px;max-height:560px}.gain-case-overview{padding-top:40px!important}}
/* Updated GAİN identity overlaps the cover and the paper surface. */
.gain-case-cover{height:640px;max-height:62svh;overflow:visible;z-index:1}
.gain-cover-art{position:absolute;inset:0;overflow:hidden;background:#111214}
.gain-cover-art .gain-cover-image{width:100%;height:100%;object-fit:cover}
.gain-cover-art .gain-cover-shade{left:0;top:.02%;transform:none;width:100%;height:112.5%;object-fit:fill}
.gain-cover-bottom{height:144px;bottom:-32px;align-items:flex-start}
.gain-cover-identity{display:flex;align-items:flex-start;gap:24px;min-width:0;color:#fafaf8}
.gain-cover-app-icon{width:144px;height:144px;flex:none}
.gain-cover-identity>div{padding-top:24px;display:flex;flex-direction:column;gap:8px}
.gain-cover-identity p{font:400 14px/20px var(--body);margin:0}
.gain-cover-identity h2{font:600 32px/38px var(--body);letter-spacing:0;margin:0}
.gain-cover-bottom>.pill{margin-top:32px}
.gain-case-overview{padding-top:80px}
@media(max-width:800px){.gain-case-cover{height:52svh;min-height:320px;max-height:560px}.gain-cover-bottom{height:104px;bottom:-24px;gap:12px}.gain-cover-app-icon{width:104px;height:104px}.gain-cover-identity{gap:12px}.gain-cover-identity>div{padding-top:12px;gap:4px}.gain-cover-identity p{font-size:11px;line-height:16px;max-width:120px}.gain-cover-identity h2{font-size:24px;line-height:30px}.gain-cover-bottom>.pill{margin-top:10px;position:absolute;right:0;bottom:128px}.gain-case-overview{padding-top:64px!important}}
/* Use the supplied Figma image at the design's exact desktop banner height. */
@media(min-width:801px){.gain-case-page>.gain-case-cover{height:640px;min-height:640px;max-height:none}}
/* GAİN: one stable four-part narrative. */
.gain-four-intro,.gain-four-section,.gain-four-nav{width:min(1216px,calc(100% - 48px));margin:0 auto}
.gain-four-intro{display:grid;grid-template-columns:320px minmax(0,1fr);gap:96px;padding:88px 0 64px}
.gain-section-kicker{font:400 13px/20px var(--body);color:#64666c;margin:0 0 24px}
.gain-four-intro dl{display:flex;flex-direction:column;gap:24px;margin:0}.gain-four-intro dt{font:400 13px/20px var(--body);color:#64666c;margin-bottom:6px}.gain-four-intro dd{margin:0;font:400 16px/24px var(--body)}
.gain-four-intro h1{font:500 48px/56px var(--body);letter-spacing:-.02em;margin:0 0 28px}.gain-four-intro>div>p{font:400 18px/28px var(--body);margin:0 0 20px}
.gain-four-nav{display:flex;gap:24px;flex-wrap:wrap;padding:24px 0;border-top:1px solid #0002;border-bottom:1px solid #0002}.gain-four-nav a{font:400 14px/20px var(--body);color:#64666c;text-decoration:none}.gain-four-nav a:hover{color:#111214}
.gain-four-section{padding:80px 0;scroll-margin-top:96px}.gain-four-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:40px}.gain-four-heading h2{font:500 36px/44px var(--body);letter-spacing:-.02em;margin:0}.gain-four-heading p,.gain-decision p,.gain-tv-study p,.gain-delivery-grid p{font:400 18px/28px var(--body);margin:0 0 16px}
.gain-planned-media{margin:0 0 40px;background:#eeeeec;border:1px solid #0000000a}.gain-planned-media>div{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;gap:12px}.gain-planned-media span{font:400 13px/20px var(--body);color:#64666c}.gain-planned-media h3{font:500 24px/32px var(--body);margin:0;letter-spacing:0}.gain-planned-media figcaption{font:400 14px/22px var(--body);padding:20px 24px;border-top:1px solid #0000000a;color:#64666c}
.gain-tv-study{background:#111214;color:#fafaf8;margin:0 0 40px}.gain-tv-study>div{padding:32px}.gain-tv-study h3,.gain-decision h3,.gain-delivery-grid h3{font:500 24px/32px var(--body);margin:0 0 16px;letter-spacing:0}.gain-tv-study video{width:100%;display:block;aspect-ratio:16/9;object-fit:contain}
.gain-four-decisions{border-top:1px solid #0002}.gain-decision{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;margin-top:48px}.gain-decision .gain-planned-media{margin:0}.gain-decision .gain-planned-media>div{min-height:220px}.gain-delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}.gain-four-delivery{border-top:1px solid #0002}
@media(max-width:800px){.gain-four-intro{grid-template-columns:1fr;gap:32px;padding:64px 0 40px}.gain-four-intro>div{grid-row:1}.gain-four-intro h1{font-size:36px;line-height:44px}.gain-four-intro dl{display:grid;grid-template-columns:1fr 1fr;gap:24px}.gain-four-heading,.gain-decision,.gain-delivery-grid{grid-template-columns:1fr;gap:24px}.gain-four-heading h2{font-size:28px;line-height:36px}.gain-four-section{padding:48px 0}.gain-four-nav{gap:16px}.gain-planned-media>div{min-height:200px}}
/* Figma 217:9537 — quiet atmospheric opening with the standalone wordmark. */
.gain-cover-background{position:absolute;left:0;top:.02%;width:100%;height:112.5%;object-fit:fill}
.gain-cover-bottom{height:72px;bottom:48px;align-items:flex-end}
.gain-cover-bottom>.pill{margin-top:0}
.gain-cover-wordmark{position:relative;width:144px;height:72px;overflow:hidden;flex:none}
.gain-cover-wordmark img{position:absolute;left:4px;top:0;width:135.999px;height:71.9998px;mask-image:url('/assets/figma/gain-hero/logo-mask-v3.svg');mask-size:144px 72px;mask-position:-4px 0;mask-repeat:no-repeat}
@media(max-width:800px){.gain-cover-bottom{height:72px;bottom:24px;align-items:flex-end}.gain-cover-bottom>.pill{position:static;margin:0}.gain-four-intro{padding-top:48px}}
/* GENVA — Figma 231:10111. Existing story chapters continue below the new opening. */
.genva-cover-light{background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 640' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-16.4 -39.6 40.028 -16.577 1278 797)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(0,0,0,0.99161)' offset='0.1179'/><stop stop-color='rgba(0,0,0,0.96759)' offset='0.21384'/><stop stop-color='rgba(0,0,0,0.9296)' offset='0.2912'/><stop stop-color='rgba(0,0,0,0.87935)' offset='0.35336'/><stop stop-color='rgba(0,0,0,0.81852)' offset='0.4037'/><stop stop-color='rgba(0,0,0,0.7488)' offset='0.4456'/><stop stop-color='rgba(0,0,0,0.67188)' offset='0.48243'/><stop stop-color='rgba(0,0,0,0.58945)' offset='0.51757'/><stop stop-color='rgba(0,0,0,0.5032)' offset='0.5544'/><stop stop-color='rgba(0,0,0,0.41481)' offset='0.5963'/><stop stop-color='rgba(0,0,0,0.32599)' offset='0.64664'/><stop stop-color='rgba(0,0,0,0.2384)' offset='0.7088'/><stop stop-color='rgba(0,0,0,0.15375)' offset='0.78616'/><stop stop-color='rgba(0,0,0,0.073719)' offset='0.8821'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></radialGradient></defs></svg>"), url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 640' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(23.65 -45.3 45.79 23.906 140.5 815)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(0,0,0,0.99161)' offset='0.1179'/><stop stop-color='rgba(0,0,0,0.96759)' offset='0.21384'/><stop stop-color='rgba(0,0,0,0.9296)' offset='0.2912'/><stop stop-color='rgba(0,0,0,0.87935)' offset='0.35336'/><stop stop-color='rgba(0,0,0,0.81852)' offset='0.4037'/><stop stop-color='rgba(0,0,0,0.7488)' offset='0.4456'/><stop stop-color='rgba(0,0,0,0.67188)' offset='0.48243'/><stop stop-color='rgba(0,0,0,0.58945)' offset='0.51757'/><stop stop-color='rgba(0,0,0,0.5032)' offset='0.5544'/><stop stop-color='rgba(0,0,0,0.41481)' offset='0.5963'/><stop stop-color='rgba(0,0,0,0.32599)' offset='0.64664'/><stop stop-color='rgba(0,0,0,0.2384)' offset='0.7088'/><stop stop-color='rgba(0,0,0,0.15375)' offset='0.78616'/><stop stop-color='rgba(0,0,0,0.073719)' offset='0.8821'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></radialGradient></defs></svg>"), linear-gradient(179.99999999999983deg, rgb(0, 0, 0) 13.672%, rgba(0, 0, 0, 0.992) 8.1731%, rgba(0, 0, 0, 0.968) 3.6984%, rgba(0, 0, 0, 0.93) 0%, rgba(0, 0, 0, 0.879) 2.8092%, rgba(0, 0, 0, 0.819) 5.1571%, rgba(0, 0, 0, 0.749) 7.1112%, rgba(0, 0, 0, 0.672) 8.8289%, rgba(0, 0, 0, 0.589) 10.468%, rgba(0, 0, 0, 0.503) 12.186%, rgba(0, 0, 0, 0.415) 14.14%, rgba(0, 0, 0, 0.326) 16.488%, rgba(0, 0, 0, 0.238) 19.387%, rgba(0, 0, 0, 0.154) 22.995%, rgba(0, 0, 0, 0.074) 27.47%, rgba(0, 0, 0, 0) 32.969%)}

body:has(.genva-case-page){padding-top:0}
main.genva-case-page{width:100%;max-width:none;margin:0;padding:0!important;background:#fafaf8}
.genva-case-cover{position:relative;height:640px;overflow:hidden;background:#111214;padding:0!important}
.genva-cover-art{position:absolute;left:50%;top:0;transform:translateX(-50%);width:max(1440px,100%);height:640px;overflow:hidden;box-shadow:inset -24px 0 64px #fed78c1f}
.genva-cover-background{position:absolute;top:.05%;left:0;width:100%;height:117.89%;object-fit:fill}
.genva-cover-pink{position:absolute;inset:0;background:linear-gradient(#f67a8c,transparent 28.672%);mix-blend-mode:lighten}
.genva-cover-girl{position:absolute;left:0;top:0;width:100%;height:755px;object-fit:cover}
.genva-cover-light{position:absolute;inset:0}
.genva-cover-bottom{position:absolute;bottom:48px;left:max(24px,calc((100% - 1216px)/2));right:max(24px,calc((100% - 1216px)/2));display:flex;justify-content:space-between;align-items:flex-end;gap:24px;color:#fafaf8}
.genva-wordmark{width:268px;height:72px;position:relative}.genva-wordmark img{display:block;transform:scale(1.8);transform-origin:top left}
.genva-cover-bottom p{font:400 16px/24px var(--body);margin:12px 0 0}
.genva-cover-bottom .pill{display:flex;gap:12px;align-items:center;height:48px;padding:11px 12px 11px 20px;border:1px solid #ffffff29;background:#ffffff0a;backdrop-filter:blur(6px);color:#fafaf8;font:500 16px/24px var(--body)}
.genva-cover-bottom .pill:hover{background:#fafaf8;color:#111214}.genva-cover-bottom .pill:hover>img{filter:invert(1)}
.genva-case-overview{padding:96px max(24px,calc((100% - 1216px)/2))!important;display:grid;grid-template-columns:304px minmax(0,1fr);gap:96px}
.genva-case-overview dl{margin:0;display:flex;flex-direction:column;gap:40px}.genva-case-overview dt,.genva-overview-label{font:500 14px/20px var(--body);color:#64666c;margin:0 0 8px}.genva-case-overview dd{font:400 18px/28px var(--body);margin:0}
.genva-case-overview h1{font:500 56px/64px var(--body);letter-spacing:0;margin:24px 0}.genva-case-overview>div>p:last-child{font:400 18px/28px var(--body);margin:0}
.genva-feature-media{padding:96px max(24px,calc((100% - 1216px)/2))!important;background:radial-gradient(ellipse at 95% 100%,#f7f062aa,transparent 45%),radial-gradient(ellipse at 32% 85%,#fe0299,transparent 75%),#000}.genva-feature-media>img,.genva-feature-media>video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.genva-case-tools{max-width:1216px;margin:40px auto 0;display:flex;justify-content:flex-end}
body:has(.genva-case-page) header.fig-header{color:#fafaf8;background:transparent;backdrop-filter:none;box-shadow:none}body:has(.genva-case-page) header.fig-header nav>a{color:#fafaf8}body:has(.genva-case-page) header.fig-header .works-nav{background:#fafaf8;color:#111214}body:has(.genva-case-page) header.fig-header .brand img{filter:invert(1)}body:has(.genva-case-page) header.fig-header.is-scrolled{background:#111214aa;backdrop-filter:blur(20px)}
body:has(.genva-case-page)>footer{display:none}
@media(max-width:1000px){.genva-case-overview{grid-template-columns:220px minmax(0,1fr);gap:48px}.genva-case-overview h1{font-size:44px;line-height:52px}.genva-case-tools{margin-right:24px;margin-left:24px}}
@media(max-width:800px){.genva-case-cover{height:560px}.genva-cover-art{height:560px;width:1100px;left:58%}.genva-cover-background{height:100%}.genva-cover-girl{height:577px}.genva-cover-bottom{bottom:24px;left:20px;right:20px;align-items:flex-end;gap:12px}.genva-wordmark{width:201px;height:54px}.genva-wordmark img{transform:scale(1.35)}.genva-cover-bottom p{font-size:12px;line-height:20px}.genva-cover-bottom .pill{font-size:13px;gap:8px;padding-left:12px;flex:none}.genva-case-overview{padding:48px 24px!important;grid-template-columns:1fr;gap:40px}.genva-case-overview dl{display:grid;grid-template-columns:1fr 1fr;gap:24px}.genva-case-overview h1{font-size:36px;line-height:44px}.genva-case-overview dd,.genva-case-overview>div>p:last-child{font-size:16px;line-height:24px}.genva-feature-media{padding:48px 24px!important}}
body:has(.genva-case-page) header.fig-header .brand img{filter:none}

/* Dummy layout ideas + outcome blocks (2026-10-17) */
.hybrid-asset-placeholder.dummy-slot{display:grid;gap:20px;text-align:left}
.dummy-figure>.dummy-inner{display:grid;gap:20px;min-height:0;padding:clamp(16px,3vw,32px);text-align:left;align-items:stretch;justify-content:stretch}
.dummy-art{background:#f7f8f9;border:1px solid #0000000d;border-radius:14px;padding:clamp(10px,2vw,24px)}
.dummy-art svg{display:block;width:100%;height:auto}
.dummy-meta{display:grid;gap:8px;justify-items:start}
.dummy-meta h3{font:500 22px/30px var(--body);margin:0;color:#1d2025;letter-spacing:0}
.dummy-meta p{font:400 15px/24px var(--body);margin:0;color:#5d656e;max-width:720px}
.dummy-badge,.gain-planned-media .dummy-badge{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#dfff6a;background:#23262b;padding:7px 10px;border-radius:999px}
.dummy-art .d-frame{fill:#fff;stroke:#c9d0d7;stroke-width:2}
.dummy-art .d-sk{fill:#e2e6ea}
.dummy-art .d-ac{fill:#c9ef3f}
.dummy-art .d-ac2{fill:#dfff6a;opacity:.5}
.dummy-art .d-ink,.dummy-art .d-inkf,.dummy-art .d-pin{fill:#23262b}
.dummy-art .d-mid{fill:#565c65}
.dummy-art .d-dark{fill:#1b1e22}
.dummy-art .d-arrow{fill:none;stroke:#23262b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.dummy-art .d-line{fill:none;stroke:#9aa3ad;stroke-width:2;stroke-dasharray:6 7}
.dummy-art .d-focus{fill:none;stroke:#23262b;stroke-width:2.5;stroke-dasharray:9 7}
.dummy-art .d-pin-t{fill:#dfff6a;font:700 18px/1 sans-serif;text-anchor:middle}
.dummy-art .d-lbl{fill:#6b737c;font:600 18px/1 sans-serif;letter-spacing:.12em;text-anchor:middle}
.case-outcome{display:grid;gap:20px;margin-top:8px}
.case-outcome-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.case-outcome-stats>div{background:#1d1f23;border-radius:16px;padding:22px 20px;display:grid;gap:10px;align-content:start}
.case-outcome-stats strong{font:500 clamp(26px,3vw,40px)/1.1 var(--body);color:#dfff6a;letter-spacing:-.01em}
.case-outcome-stats span{font:400 14px/20px var(--body);color:#c7cbd1}
.case-outcome-delivered{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.case-outcome-delivered li{font:500 13px/1 var(--body);padding:9px 14px;border-radius:999px;background:#eceef0;color:#2a2e34}
.case-outcome p{font:400 17px/28px var(--body);margin:0;color:#2b2f35;max-width:720px}
.gain-outcome-section .case-outcome{margin-top:24px}
.case-outcome-stats:has(>div:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1100px){.case-outcome-stats:has(>div:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}}
.genva-feature-media{position:relative;isolation:isolate;background:none;background-image:linear-gradient(194.7492642929094deg, rgb(0, 0, 0) 26.483%, rgba(0, 0, 0, 0) 104.36%), url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 876' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(113.4 107.31 -78.4 155.22 438 202.57)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(10,0,6,1)' offset='0.058993'/><stop stop-color='rgba(19,0,11,1)' offset='0.11799'/><stop stop-color='rgba(40,0,24,1)' offset='0.21417'/><stop stop-color='rgba(61,0,37,1)' offset='0.29189'/><stop stop-color='rgba(84,1,50,1)' offset='0.35448'/><stop stop-color='rgba(106,1,64,1)' offset='0.40529'/><stop stop-color='rgba(129,1,78,1)' offset='0.44766'/><stop stop-color='rgba(150,1,91,1)' offset='0.48492'/><stop stop-color='rgba(171,1,103,1)' offset='0.52041'/><stop stop-color='rgba(191,2,115,1)' offset='0.55749'/><stop stop-color='rgba(208,2,126,1)' offset='0.59947'/><stop stop-color='rgba(224,2,135,1)' offset='0.64971'/><stop stop-color='rgba(236,2,143,1)' offset='0.71154'/><stop stop-color='rgba(246,2,148,1)' offset='0.78831'/><stop stop-color='rgba(252,2,152,1)' offset='0.88335'/><stop stop-color='rgba(254,2,153,1)' offset='1'/></radialGradient></defs></svg>")}
.genva-feature-media::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:color-dodge;background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 876' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-49.238 -119.1 425.35 -175.71 1288.5 1478.9)'><stop stop-color='rgba(247,240,98,1)' offset='0'/><stop stop-color='rgba(247,240,98,0.9917)' offset='0.11665'/><stop stop-color='rgba(247,240,98,0.96792)' offset='0.21169'/><stop stop-color='rgba(247,240,98,0.93029)' offset='0.28846'/><stop stop-color='rgba(247,240,98,0.88047)' offset='0.35029'/><stop stop-color='rgba(247,240,98,0.82011)' offset='0.40053'/><stop stop-color='rgba(247,240,98,0.75086)' offset='0.44251'/><stop stop-color='rgba(247,240,98,0.67437)' offset='0.47959'/><stop stop-color='rgba(247,240,98,0.5923)' offset='0.51508'/><stop stop-color='rgba(247,240,98,0.50629)' offset='0.55234'/><stop stop-color='rgba(247,240,98,0.41799)' offset='0.59471'/><stop stop-color='rgba(247,240,98,0.32906)' offset='0.64552'/><stop stop-color='rgba(247,240,98,0.24114)' offset='0.70811'/><stop stop-color='rgba(247,240,98,0.15589)' offset='0.78583'/><stop stop-color='rgba(247,240,98,0.074963)' offset='0.88201'/><stop stop-color='rgba(247,240,98,0)' offset='1'/></radialGradient></defs></svg>")}
.genva-cover-light{background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 640' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-16.4 -39.6 40.028 -16.577 1278 797)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(0,0,0,0.99161)' offset='0.1179'/><stop stop-color='rgba(0,0,0,0.96759)' offset='0.21384'/><stop stop-color='rgba(0,0,0,0.9296)' offset='0.2912'/><stop stop-color='rgba(0,0,0,0.87935)' offset='0.35336'/><stop stop-color='rgba(0,0,0,0.81852)' offset='0.4037'/><stop stop-color='rgba(0,0,0,0.7488)' offset='0.4456'/><stop stop-color='rgba(0,0,0,0.67188)' offset='0.48243'/><stop stop-color='rgba(0,0,0,0.58945)' offset='0.51757'/><stop stop-color='rgba(0,0,0,0.5032)' offset='0.5544'/><stop stop-color='rgba(0,0,0,0.41481)' offset='0.5963'/><stop stop-color='rgba(0,0,0,0.32599)' offset='0.64664'/><stop stop-color='rgba(0,0,0,0.2384)' offset='0.7088'/><stop stop-color='rgba(0,0,0,0.15375)' offset='0.78616'/><stop stop-color='rgba(0,0,0,0.073719)' offset='0.8821'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></radialGradient></defs></svg>"), url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 640' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(23.65 -45.3 45.79 23.906 140.5 815)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(0,0,0,0.99161)' offset='0.1179'/><stop stop-color='rgba(0,0,0,0.96759)' offset='0.21384'/><stop stop-color='rgba(0,0,0,0.9296)' offset='0.2912'/><stop stop-color='rgba(0,0,0,0.87935)' offset='0.35336'/><stop stop-color='rgba(0,0,0,0.81852)' offset='0.4037'/><stop stop-color='rgba(0,0,0,0.7488)' offset='0.4456'/><stop stop-color='rgba(0,0,0,0.67188)' offset='0.48243'/><stop stop-color='rgba(0,0,0,0.58945)' offset='0.51757'/><stop stop-color='rgba(0,0,0,0.5032)' offset='0.5544'/><stop stop-color='rgba(0,0,0,0.41481)' offset='0.5963'/><stop stop-color='rgba(0,0,0,0.32599)' offset='0.64664'/><stop stop-color='rgba(0,0,0,0.2384)' offset='0.7088'/><stop stop-color='rgba(0,0,0,0.15375)' offset='0.78616'/><stop stop-color='rgba(0,0,0,0.073719)' offset='0.8821'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></radialGradient></defs></svg>"), linear-gradient(180deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.75) 7.11%,rgba(0,0,0,.5) 12.186%,rgba(0,0,0,.238) 19.387%,rgba(0,0,0,.074) 27.47%,transparent 32.969%)}
.genva-cover-art{width:100%;height:640px}
.genva-cover-girl{height:auto;aspect-ratio:1440/755;object-fit:fill}
.genva-cover-background{height:auto;aspect-ratio:1440/755;object-fit:fill}
@media(max-width:800px){.genva-cover-art{width:1100px;height:560px}.genva-cover-girl,.genva-cover-background{height:auto}}

/* Original background supplied for the GENVA video section. */
.genva-feature-media{background:#000 url('/assets/figma/genva-oct17/video-background.webp') center/100% 100% no-repeat}
.genva-feature-media::before{content:none}

/* Works index (2026-10-17) */
.works-hero{background:#141518;color:#f4f5f2;padding:clamp(140px,16vw,200px) clamp(16px,5vw,80px) clamp(48px,6vw,80px)}
.works-eyebrow{font:500 13px/1 var(--body);letter-spacing:.12em;color:#9aa0a8;margin:0 0 24px}
.works-hero h1{font:500 clamp(88px,17vw,260px)/.86 var(--body);letter-spacing:-.05em;margin:0}
.works-hero h1 span{color:#dfff6a}
.works-hero-bottom{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:40px;align-items:end;margin-top:clamp(32px,5vw,64px);border-top:1px solid #ffffff1f;padding-top:32px}
.works-hero-bottom>p{font:400 clamp(20px,2.2vw,30px)/1.35 var(--body);margin:0;max-width:820px;color:#e4e6e9}
.works-hero-bottom ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(20px,3vw,48px)}
.works-hero-bottom li{display:grid;gap:6px}
.works-hero-bottom strong{font:500 clamp(28px,3vw,44px)/1 var(--body);color:#dfff6a}
.works-hero-bottom li span{font:400 13px/1.2 var(--body);color:#9aa0a8}
.works-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#141518;color:#f4f5f2;margin:clamp(40px,6vw,80px) 0}
.works-proof>div{padding:clamp(28px,4vw,56px) clamp(16px,4vw,48px);display:grid;gap:12px;border-left:1px solid #ffffff1a}
.works-proof>div:first-child{border-left:0}
.works-proof strong{font:500 clamp(28px,3.4vw,52px)/1.05 var(--body);color:#dfff6a;letter-spacing:-.02em}
.works-proof span{font:400 15px/1.4 var(--body);color:#c7cbd1;max-width:280px}
@media (max-width:820px){.works-hero-bottom{grid-template-columns:1fr}.works-proof{grid-template-columns:1fr}.works-proof>div{border-left:0;border-top:1px solid #ffffff1a}.works-proof>div:first-child{border-top:0}}

/* Genva Figma page — 231:10111 */
.genva-brand-grid{padding:78px max(24px,calc((100% - 1216px)/2)) 96px!important;background:#111214;display:grid;gap:32px}
.genva-brand-top{display:grid;grid-template-columns:382.097fr 801.903fr;gap:32px;height:326px}
.genva-brand-top>img{display:block;width:100%;height:326px;object-fit:cover}
.genva-brand-bottom{display:grid;grid-template-columns:1fr 1fr;gap:32px;height:362px}
.genva-brand-bottom>video{display:block;width:100%;height:362px;object-fit:cover;object-position:center 40%;background:#030508}
.genva-palette{display:grid;grid-template-columns:1fr 1fr;min-width:0}
.genva-secondary-swatches{display:grid;grid-template-rows:1fr 1fr;min-width:0}
.genva-swatch{position:relative;padding:24px;color:white;overflow:hidden}
.genva-swatch h3{font:700 24px/32px var(--body);margin:0}
.genva-swatch p{position:absolute;bottom:24px;right:24px;text-align:right;font:400 16px/24px var(--body);margin:0}
.genva-swatch.pink{background:#ff4fb2}.genva-swatch.black{background:#030508}.genva-swatch.gold{background:#ffbe4d;color:#262525}
.genva-role{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:96px max(24px,calc((100% - 1216px)/2))!important;background:#fafaf8;color:#111214}
.genva-role .eyebrow{margin:0 0 24px;color:#64666c;font:500 14px/20px var(--body)}
.genva-role h2,.genva-opportunity h2{font:500 56px/64px var(--body);margin:0;letter-spacing:0}
.genva-role>p,.genva-opportunity-heading>p{font:400 18px/28px var(--body);margin:0}
.genva-opportunity{overflow:hidden;padding:96px max(24px,calc((100% - 1216px)/2))!important;color:#fafaf8;background:linear-gradient(200deg,#000 27%,transparent 77%),linear-gradient(199deg,#000 26%,transparent 105%),radial-gradient(ellipse at 8% 80%,#000 0%,#540132 35%,#fe0299 100%)}
.genva-opportunity-heading{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-bottom:64px}
.genva-screen-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:min(-24px,calc((1216px - 100vw)/2));padding-right:max(24px,calc((100vw - 1216px)/2));overscroll-behavior-x:contain}
.genva-screen-track::-webkit-scrollbar{display:none}
.genva-screen{flex:0 0 316px;width:316px;height:684px;scroll-snap-align:start;background:#030508;overflow:hidden}
.genva-screen>img,.genva-screen>video{display:block;width:100%;height:100%;object-fit:cover}
.genva-carousel-dots{display:flex;justify-content:center;gap:16px;margin-top:48px;height:8px}
.genva-carousel-dots button{position:relative;width:8px;height:8px;border:0;border-radius:50%;padding:0;background:#ffffff66;cursor:pointer}
.genva-carousel-dots button::after{content:"";position:absolute;inset:-15px}
.genva-carousel-dots button[aria-pressed="true"]{background:#fff}
.genva-carousel-dots button:focus-visible,.genva-screen-track:focus-visible{outline:2px solid #ff4fb2;outline-offset:6px}
.genva-figma-page .genva-cover-light{background:linear-gradient(0deg,#000 0%,#000c 12%,transparent 55%),linear-gradient(180deg,#000c 0%,transparent 33%)}
.genva-figma-page .genva-case-overview dl{gap:0}.genva-figma-page .genva-case-overview dl>div{padding:16px 0;border-bottom:1px solid #00000014}.genva-figma-page .genva-case-overview dl>div:last-child{border:0}
@media(max-width:1000px){.genva-brand-top{height:auto}.genva-brand-top>img{height:auto;aspect-ratio:1.172/1}.genva-brand-top>img+img{aspect-ratio:2.46/1}.genva-brand-bottom{height:330px}.genva-brand-bottom>video{height:330px}.genva-swatch{padding:16px}.genva-swatch h3{font-size:20px;line-height:25px}.genva-swatch p{font-size:12px;line-height:18px;right:16px;bottom:16px}}
@media(max-width:800px){.genva-brand-grid{padding:48px 24px!important;gap:16px}.genva-brand-top{gap:16px}.genva-brand-bottom{grid-template-columns:1fr;height:auto;gap:16px}.genva-brand-bottom>video{height:auto;aspect-ratio:592/362}.genva-palette{height:300px}.genva-role,.genva-opportunity{padding:48px 24px!important}.genva-role,.genva-opportunity-heading{grid-template-columns:1fr;gap:24px}.genva-role h2,.genva-opportunity h2{font-size:36px;line-height:44px}.genva-role>p,.genva-opportunity-heading>p{font-size:16px;line-height:24px}.genva-opportunity-heading{margin-bottom:40px}.genva-screen-track{gap:20px;margin-right:-24px;padding-right:24px}.genva-screen{flex-basis:280px;width:280px;height:606px}.genva-carousel-dots{margin-top:32px}}

/* Match the testimonial gallery: let adjacent screens remain visible in the page gutters. */
.genva-opportunity{--genva-gallery-inset:max(24px,calc((100vw - 1216px)/2))}
.genva-opportunity .genva-screen-track{margin-left:calc(-1 * var(--genva-gallery-inset));margin-right:calc(-1 * var(--genva-gallery-inset));padding-left:var(--genva-gallery-inset);padding-right:var(--genva-gallery-inset);scroll-padding-left:var(--genva-gallery-inset);scroll-snap-type:none}

/* Decision-led case template (2026-10-17) */
.dc-page{--dc-gutter:clamp(16px,5vw,80px);--dc-max:1280px;background:#f4f4f1;color:#1d2025}
.dc-page>section:not(.gain-case-cover):not(.next-case){max-width:var(--dc-max);margin:0 auto;padding-left:var(--dc-gutter);padding-right:var(--dc-gutter);box-sizing:content-box}
.dc-kicker{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6a727b;margin:0 0 20px}
.dc-intro{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(32px,6vw,96px);padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(48px,6vw,80px)}
.dc-intro h1{font:500 clamp(34px,4.6vw,64px)/1.06 var(--body);letter-spacing:-.025em;margin:0 0 24px}
.dc-intro-copy>p:last-child{font:400 clamp(17px,1.5vw,20px)/1.55 var(--body);color:#3b424a;margin:0;max-width:640px}
.dc-meta{margin:0;display:grid;gap:0;align-content:start;border-top:1px solid #1d202526}
.dc-meta>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid #1d202526}
.dc-meta dt{font:500 13px/22px var(--body);color:#6a727b}
.dc-meta dd{margin:0;font:400 15px/22px var(--body);color:#1d2025}
.dc-meta a{color:inherit}
.dc-snapshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#1d202526;border:1px solid #1d202526;padding:0!important;margin-bottom:clamp(64px,9vw,128px)!important}
.dc-snapshot>div{background:#fff;padding:clamp(24px,3vw,40px)}
.dc-snapshot h2{font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#6a727b;margin:0 0 16px}
.dc-snapshot p{font:400 16px/1.55 var(--body);margin:0;color:#2b3036}
.dc-snapshot-result{background:#17181b!important}
.dc-snapshot-result h2{color:#9aa0a8}
.dc-snapshot-result p{display:grid;gap:4px;margin:0 0 18px;color:#c7cbd1}
.dc-snapshot-result strong{font:500 clamp(28px,3vw,40px)/1.05 var(--body);color:#dfff6a;letter-spacing:-.02em}
.dc-section-head{max-width:780px;margin-bottom:clamp(32px,4vw,56px)}
.dc-section-head h2{font:500 clamp(30px,3.6vw,48px)/1.1 var(--body);letter-spacing:-.02em;margin:0}
.dc-section-head p:not(.dc-kicker){font:400 18px/1.55 var(--body);color:#3b424a;margin:20px 0 0}
.dc-decision{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.7fr);gap:clamp(28px,4vw,64px);align-items:start;padding:clamp(40px,5vw,72px) 0;border-top:1px solid #1d202526}
.dc-decision:nth-of-type(even){grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr)}
.dc-decision:nth-of-type(even) .dc-decision-copy{order:2}
.dc-decision-copy{position:sticky;top:110px}
.dc-index{display:inline-block;font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#1d2025;background:#dfff6a;padding:7px 10px;border-radius:999px;margin-bottom:18px}
.dc-decision h3{font:500 clamp(24px,2.4vw,32px)/1.15 var(--body);letter-spacing:-.015em;margin:0 0 24px}
.dc-decision dl{margin:0;display:grid;gap:18px}
.dc-decision dt{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#6a727b;margin-bottom:8px}
.dc-decision dd{margin:0;font:400 16px/1.55 var(--body);color:#2b3036}
.dc-media{margin:0}
.dc-media img,.dc-media video{display:block;width:100%;height:auto;border-radius:16px;background:#e3e5e8}
.dc-media figcaption{font:400 14px/1.5 var(--body);color:#6a727b;margin-top:12px}
.dc-media-dummy{background:#fff;border:1px solid #1d20251a;border-radius:16px;padding:clamp(12px,2vw,24px)}
.dc-system,.dc-craft{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(24px,3vw,40px)}
.dc-outcome{padding-top:clamp(64px,8vw,112px);padding-bottom:clamp(64px,8vw,112px)}
.dc-outcome-body{max-width:780px;display:grid;gap:20px}
.dc-outcome-body>p{font:400 18px/1.6 var(--body);margin:0;color:#2b3036}
.dc-outcome blockquote{margin:12px 0 0;padding:24px 28px;background:#17181b;color:#f4f5f2;border-radius:16px;font:400 19px/1.55 var(--body)}
.dc-outcome blockquote span,.dc-team span{display:block;font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#dfff6a;margin-bottom:12px}
.dc-team{font:400 15px/1.5 var(--body)!important;color:#3b424a!important}
.dc-team span{color:#6a727b}
@media (max-width:900px){.dc-intro,.dc-snapshot,.dc-decision,.dc-decision:nth-of-type(even){grid-template-columns:1fr}.dc-decision:nth-of-type(even) .dc-decision-copy{order:0}.dc-decision-copy{position:static}}

.dc-page>.dc-intro{max-width:var(--dc-max)!important;margin-left:auto!important;margin-right:auto!important;padding-left:var(--dc-gutter)!important;padding-right:var(--dc-gutter)!important;box-sizing:content-box!important}

/* Give the whole screen room to grow without clipping its top and bottom. */
.genva-screen{position:relative;transition:transform .4s ease;transform-origin:center}
.genva-opportunity .genva-screen-track{padding-top:36px;padding-bottom:36px;margin-top:-36px;margin-bottom:-36px}
@media(hover:hover){.genva-screen:hover{transform:scale(1.1);z-index:1}}
@media(prefers-reduced-motion:reduce){.genva-screen{transition:none}}

/* Preserve the authoring guide below the completed Genva sections. */
.genva-reference-content{background:#fafaf8;color:#111214}
.genva-reference-content .draft-planning-note,.genva-reference-content .slot-brief{display:block}
.genva-reference-content .draft-case-nav{position:static}

.genva-brand-top>.genva-logo-motion{display:block;width:100%;height:326px;object-fit:contain;background:#000}
@media(max-width:1000px){.genva-brand-top>.genva-logo-motion{height:auto;aspect-ratio:802/326}}

/* Constrain intrinsic video dimensions to the two-column brand layout. */
.genva-brand-top{grid-template-columns:minmax(0,382.097fr) minmax(0,801.903fr)}
.genva-brand-top>*{min-width:0;max-width:100%}
.genva-brand-top>.genva-logo-motion{object-fit:cover;object-position:center}
.genva-figma-page [data-genva-video]::-webkit-media-controls{display:none!important}

/* ===== Motion layer: tokens ===== */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--dur-1:200ms;--dur-2:420ms;--dur-3:760ms}
/* Cross-document view transitions disabled 2026-10-24: Chrome left the page stuck under ::view-transition (endless loading, no clicks) on the Genva case. */
@view-transition{navigation:none}
@keyframes vt-out{to{opacity:0;transform:translate3d(0,-10px,0)}}
@keyframes vt-in{from{opacity:0;transform:translate3d(0,18px,0)}}
::view-transition-old(root){animation:vt-out 220ms var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in 480ms var(--ease-out) 120ms both}

/* Lenis */
html.has-lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* Cursor follower */
.mx-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity var(--dur-1) linear}
.mx-cursor.on{opacity:1}
.mx-cursor span{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid rgba(255,255,255,.9);mix-blend-mode:difference;display:grid;place-items:center;font:600 0/1 'Google Sans',system-ui,sans-serif;color:#0b0b0c;background:transparent;transition:width var(--dur-2) var(--ease-out),height var(--dur-2) var(--ease-out),margin var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.mx-cursor.link span{width:36px;height:36px;margin:-18px 0 0 -18px}
.mx-cursor.case span{width:84px;height:84px;margin:14px 0 0 14px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(18,18,20,.5);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);mix-blend-mode:normal;color:#fff;font-size:13px;font-weight:500;letter-spacing:0;text-align:center;white-space:nowrap;display:grid;place-items:center;animation:mx-pop var(--dur-2) var(--ease-out) both;box-shadow:0 8px 28px rgba(0,0,0,.35)}
@keyframes mx-pop{from{opacity:0;transform:scale(.6) translate(-10px,-10px)}to{opacity:1;transform:none}}
@media (hover:none),(prefers-reduced-motion:reduce){.mx-cursor{display:none}}
.mx-mag{transition:transform var(--dur-1) var(--ease-out)}

/* Hero entrance: first visit per session only */
@keyframes mx-rise{from{opacity:0;transform:translate3d(0,.5em,0);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
html:not(.seen) .fig-hero-title .fig-title-line,html:not(.seen) .mobile-hero-title .mobile-title-row{animation:mx-rise var(--dur-3) var(--ease-out) both}
html:not(.seen) .fig-hero-title .fig-title-line:nth-child(2),html:not(.seen) .mobile-hero-title .mobile-title-row:nth-child(2){animation-delay:.12s}
html:not(.seen) .fig-hero-title .fig-title-line:nth-child(3),html:not(.seen) .mobile-hero-title .mobile-title-row:nth-child(3){animation-delay:.24s}
html:not(.seen) .fig-hero-title .fig-title-line:nth-child(n+4),html:not(.seen) .mobile-hero-title .mobile-title-row:nth-child(n+4){animation-delay:.36s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html:not(.seen) .fig-hero-title .fig-title-line,html:not(.seen) .mobile-hero-title .mobile-title-row{animation:none}
}

/* Music video layered in the original screen's banner. */
.genva-screen-composite{position:relative;width:100%;height:100%;container-type:inline-size}
.genva-screen-composite>img{display:block;width:100%;height:100%;object-fit:cover}
.genva-music-banner{position:absolute;left:3.72093%;top:12.44635%;width:92.55814%;height:25.75107%;border-radius:3.72093cqw;overflow:hidden;background:#030508}
.genva-music-banner>video{display:block;width:100%;height:100%;object-fit:cover}
.genva-music-caption{position:absolute;inset:60% 0 0;background:linear-gradient(0deg,#000b,transparent);color:white;font-family:var(--body);pointer-events:none}
.genva-music-caption>span:first-child{position:absolute;left:3.72093cqw;bottom:5.11628cqw;font-size:4.65116cqw;line-height:6.51163cqw;font-weight:600;white-space:nowrap;letter-spacing:0;text-shadow:0 1px 2px #0004}
.genva-music-create{position:absolute;right:3.72093cqw;bottom:4.65116cqw;display:flex;align-items:center;gap:1.39535cqw;padding:1.86047cqw 3.72093cqw 1.86047cqw 2.7907cqw;border-radius:999px;background:#ff06b88f;font-size:3.25581cqw;line-height:4.65116cqw;font-weight:500}
.genva-music-create>img{flex:none;width:4.65116cqw;height:4.65116cqw}

/* Animated AI Video hero beneath the original navigation and prompt UI. */
.genva-ai-banner{position:absolute;left:0;top:6.43777%;width:100%;height:38.62661%;overflow:hidden;background:#060910}
.genva-ai-banner>video{display:block;width:100%;height:100%;object-fit:cover}
.genva-ai-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#060910 0%,#060910f5 5%,#060910d9 11%,#060910a6 18%,#06091066 25%,#06091026 33%,transparent 41%,transparent 48%,#0609100d 55%,#06091026 62%,#06091052 70%,#0609108c 79%,#060910c7 88%,#060910ed 95%,#060910 100%)}
.genva-ai-screen>img{position:relative;z-index:1;mask-image:linear-gradient(to bottom,#000 6.44%,#000000e6 8%,#000000a6 10%,#00000059 12%,#0000001a 14%,transparent 16%,transparent 32%,#0000001a 33%,#00000059 34.5%,#000000a6 36%,#000000e6 37%,#000 37.34%)}
.genva-ai-title{position:absolute;z-index:2;left:5.5814%;top:27.4678%;font:500 6.51163cqw/7.90698cqw var(--body);letter-spacing:0;color:#fff;text-shadow:0 1px 2px #0004;pointer-events:none;white-space:nowrap}

/* ===== GENVA case: film band, decisions, outcome ===== */
.gv-film{position:relative;background:#030508;line-height:0}
.gv-film video{width:100%;aspect-ratio:16/9;max-height:92vh;object-fit:cover;display:block}
.gv-film-btn{position:absolute;right:24px;bottom:24px;line-height:1;background:rgba(18,18,20,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border:1px solid rgba(255,255,255,.24)}
.gv-decisions{background:#030508;color:#fff;padding:clamp(72px,10vw,150px) clamp(20px,6vw,96px)}
.gv-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:0 0 18px}
.gv-dec-head{max-width:880px;margin:0 auto clamp(56px,8vw,120px)}
.gv-dec-head h2,.gv-outcome h2{font-size:clamp(34px,5.4vw,76px);line-height:1.02;letter-spacing:-.02em;margin:0 0 24px;font-weight:600}
.gv-dec-head p:not(.gv-eyebrow){font-size:clamp(17px,1.5vw,21px);line-height:1.5;opacity:.75;max-width:640px;margin:0}
.gv-dec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);max-width:1280px;margin:0 auto;padding:clamp(40px,6vw,88px) 0;border-top:1px solid rgba(255,255,255,.14)}
.gv-dec-text{position:sticky;top:112px;align-self:start}
.gv-num{display:block;font-size:14px;letter-spacing:.1em;color:#ff4fb2;margin-bottom:18px}
.gv-dec-text h3{font-size:clamp(26px,3vw,42px);line-height:1.08;letter-spacing:-.015em;margin:0 0 28px;font-weight:600}
.gv-dec-text div{margin-top:20px}
.gv-k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin:0 0 6px}
.gv-dec-text div p:not(.gv-k){font-size:17px;line-height:1.5;margin:0;opacity:.9}
.gv-dec-media{display:flex;justify-content:center;align-items:flex-start;min-height:560px}
.gv-phone{width:min(300px,100%);border-radius:36px;overflow:hidden;background:#0d0f14;box-shadow:0 30px 80px rgba(255,79,178,.18),0 0 0 1px rgba(255,255,255,.1)}
.gv-phone img,.gv-phone video{display:block;width:100%;height:auto}
.gv-pair{display:flex;gap:24px;justify-content:center;flex-wrap:wrap}
.gv-pair .gv-phone:nth-child(2){margin-top:64px}
.gv-wide{width:100%;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(255,79,178,.18),0 0 0 1px rgba(255,255,255,.1)}
.gv-wide video{display:block;width:100%;height:auto}
.gv-outcome{padding:clamp(72px,10vw,140px) clamp(20px,6vw,96px);max-width:1280px;margin:0 auto}
.gv-outcome .gv-eyebrow{opacity:.55}
@media (max-width:860px){.gv-dec{grid-template-columns:1fr}.gv-dec-text{position:static}.gv-dec-media{min-height:0}.gv-pair .gv-phone:nth-child(2){margin-top:0}.gv-film-btn{right:12px;bottom:12px}}

/* Cover entrance: one scale on the whole artwork, same easing as the home work cards */
@keyframes gv-scale{from{scale:1.08}to{scale:1}}
.genva-case-cover{overflow:hidden}
.genva-case-cover .genva-cover-art{transition:scale .9s cubic-bezier(.22,1,.36,1);will-change:scale}
.genva-case-cover:hover .genva-cover-art{scale:1.035}
@media (prefers-reduced-motion:no-preference){
  .genva-case-cover .genva-cover-art{animation:gv-scale 1.4s cubic-bezier(.22,1,.36,1) backwards}
  html.mx-js [data-reveal]{opacity:0;transform:translate3d(0,36px,0);transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
  html.mx-js [data-reveal].in{opacity:1;transform:none}
}

/* Updated Genva card artwork matches the Figma 904 × 603 composition. */
.fig-project-genva .fig-project-cover{aspect-ratio:904/603}

/* The new Genva artwork is already composed: remove the old source-image crop. */
.fig-project-genva .fig-cover-image{width:100%;height:100%;left:0;top:0;object-fit:contain;object-position:center}
.fig-project-genva .works-motion-layer{transform:none;will-change:auto}

/* Detail hero: retain Figma's 1440 × 640 frame and 1440 × 755 image layers. */
@media(min-width:801px){
 .genva-case-cover{height:640px;min-height:640px;max-height:640px}
 .genva-cover-art{width:max(1440px,100%);height:640px;left:50%;top:0;transform:translateX(-50%)}
 .genva-cover-background,.genva-cover-girl{width:100%;height:auto;aspect-ratio:1440/755;top:0;object-fit:fill}
}

/* Scale the desktop hero with the Figma frame instead of cropping at a fixed height. */
@media(min-width:801px){
 .genva-case-cover{height:auto;min-height:0;max-height:none;aspect-ratio:1440/640}
 .genva-cover-art{width:100%;height:100%;min-width:0}
 .genva-cover-background,.genva-cover-girl{width:100%;height:auto;aspect-ratio:1440/755}
 .genva-cover-bottom{bottom:7.5%}
}

/* GENVA cover: separated layers + mouse parallax (single entrance scale stays on .genva-cover-art) */
.genva-cover-objects{position:absolute;inset:0;pointer-events:none}
.gv-obj{position:absolute;display:block;translate:calc(var(--mx,0)*var(--d,10)*-1px) calc(var(--my,0)*var(--d,10)*-1px)}
.gv-obj img{display:block;width:100%;height:auto;animation:gv-float 7s ease-in-out infinite}
@keyframes gv-float{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-7px,0) rotate(1.2deg)}}
.genva-case-cover .genva-cover-background{scale:1.05;translate:calc(var(--mx,0)*-4px) calc(var(--my,0)*-3px)}
.genva-case-cover .genva-cover-girl{scale:1.025;transform-origin:50% 100%;translate:calc(var(--mx,0)*-8px) calc(var(--my,0)*-5px)}
@media (prefers-reduced-motion:reduce){.gv-obj img{animation:none}}

/* Separated parallax exports share a 1440 × 640 canvas (not the previous 755px source). */
.genva-case-cover .genva-cover-background,.genva-case-cover .genva-cover-girl{width:100%;height:100%;aspect-ratio:auto;object-fit:fill;top:0;left:0;transform-origin:center}
.genva-case-cover .genva-cover-background{scale:1.012;translate:calc(var(--mx,0)*-3px) calc(var(--my,0)*-2px)}
.genva-case-cover .genva-cover-girl{scale:1;translate:calc(var(--mx,0)*-4px) calc(var(--my,0)*-3px)}
.genva-case-cover:hover .genva-cover-art{scale:1}
.genva-cover-objects .gv-obj{translate:calc(var(--mx,0)*var(--d,10)*-.35px) calc(var(--my,0)*var(--d,10)*-.35px)}
@keyframes gv-scale{from{scale:1.015}to{scale:1}}
@media(max-width:800px){.genva-case-cover .genva-cover-art{width:1260px;height:560px;left:50%}}
@media(prefers-reduced-motion:reduce){.genva-case-cover .genva-cover-background,.genva-case-cover .genva-cover-girl,.genva-cover-objects .gv-obj{translate:none;scale:1}}

/* GENVA system & screens */
.gv-system{background:#030508;color:#fff;padding:0 clamp(20px,6vw,96px) clamp(72px,10vw,150px)}
.gv-sys-block{max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,96px) 0;border-top:1px solid rgba(255,255,255,.14)}
.gv-sys-head{max-width:640px;margin-bottom:36px}
.gv-sys-head h3{font-size:clamp(26px,3vw,42px);line-height:1.08;letter-spacing:-.015em;margin:0 0 14px;font-weight:600}
.gv-sys-head p:not(.gv-eyebrow){font-size:17px;line-height:1.5;opacity:.75;margin:0}
.gv-ds{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gv-ds img{width:100%;height:auto;border-radius:20px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.gv-strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:16px;margin-right:calc(-1*clamp(20px,6vw,96px));padding-right:clamp(20px,6vw,96px);scrollbar-width:thin}
.gv-strip figure{margin:0;flex:none;scroll-snap-align:start}
.gv-strip img{display:block;height:auto;border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.gv-strip-phone img{width:260px}
.gv-strip-mail img{width:300px;border-radius:14px}
.gv-strip figcaption{font-size:13px;opacity:.55;margin-top:10px}
.gv-ads{columns:3;column-gap:16px}
.gv-ads img{width:100%;height:auto;display:block;margin:0 0 16px;border-radius:16px;break-inside:avoid;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
@media (max-width:860px){.gv-ds{grid-template-columns:1fr}.gv-ads{columns:2}.gv-strip-phone img{width:200px}.gv-strip-mail img{width:240px}}

/* Genva editorial case structure. */
.gv-story,.gv-market,.gv-outcome{padding:80px max(24px,calc((100% - 1216px)/2))!important}
.gv-story{background:#fafaf8;color:#111214}.gv-story-dark,.gv-market{background:#030508;color:#fafaf8}
.gv-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;max-width:1080px;margin:auto}
.gv-flow figure,.gv-pattern-pair figure{margin:0;min-width:0}.gv-flow img,.gv-pattern-pair img{display:block;width:100%;height:auto;aspect-ratio:430/932;object-fit:cover}
.gv-flow figcaption,.gv-pattern-pair figcaption{font:400 15px/24px var(--body);margin-top:20px;max-width:320px}.gv-flow figcaption b{display:block;font-weight:600;margin-bottom:8px}
.gv-pattern-pair{display:grid;grid-template-columns:repeat(2,minmax(0,316px));justify-content:center;gap:64px;margin:0 auto 72px}
.gv-story .gv-ds{max-width:1216px;margin:auto}.gv-market>.gv-film{padding:0!important;margin:48px 0}.gv-market>.genva-brand-grid{padding:32px 0 64px!important;background:transparent}
.gv-marketing-examples .gv-strip{margin-right:0;padding-right:0}.gv-strip-ad img{width:300px;height:280px;object-fit:contain;border-radius:0;background:#111214}
.gv-more{margin-top:24px}.gv-more summary{cursor:pointer;font:500 15px/24px var(--body);padding:16px 0}.gv-more[open] summary{margin-bottom:16px}
.gv-contribution-copy{font:400 18px/28px var(--body);max-width:800px;margin:0 0 32px}.gv-takeaway{max-width:800px;margin-top:40px;border-top:1px solid #0002;padding-top:24px}.gv-takeaway h3{font:500 24px/32px var(--body);margin-bottom:12px}.gv-takeaway p{font:400 17px/28px var(--body)}
@media(max-width:800px){.gv-story,.gv-market,.gv-outcome{padding:48px 24px!important}.gv-flow{gap:28px;grid-template-columns:1fr}.gv-flow figure{max-width:340px;margin:auto}.gv-pattern-pair{gap:20px}.gv-flow figcaption,.gv-pattern-pair figcaption{font-size:14px;line-height:22px}.gv-market>.genva-brand-grid{padding:24px 0 48px!important}}

/* Eight chapters: product decisions and the full creative scope. */
.gv-chapter-nav{display:flex;gap:24px;overflow-x:auto;padding:22px max(24px,calc((100% - 1216px)/2));background:#fafaf8;border-block:1px solid #11121414;font:500 13px/20px var(--body);white-space:nowrap;scrollbar-width:thin}
.gv-copy-columns{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1080px;margin:0 auto 56px;font:400 18px/29px var(--body)}
.gv-copy-columns h3,.gv-editorial-note h3,.gv-category-map h3{font:600 22px/30px var(--body);letter-spacing:0;margin-bottom:12px}
.gv-editorial-note{max-width:800px;margin:0 auto 28px}.gv-editorial-note p{font:400 17px/28px var(--body);opacity:.8}
.gv-onboarding-study{display:grid;grid-template-columns:1fr 300px;align-items:center;gap:64px;max-width:1080px;margin:64px auto 0}.gv-onboarding-study video{width:100%;height:auto;display:block}
.gv-model-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1080px;margin:auto}.gv-model-focus{margin:0;overflow:hidden}.gv-model-focus img{display:block;width:100%;height:280px;object-fit:cover;object-position:center 55%}.gv-model-focus figcaption{font:400 14px/22px var(--body);opacity:.65;margin-top:16px}
.gv-category-map,.gv-system-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:1080px;margin:0 auto 56px}.gv-category-map>div{padding:24px;border:1px solid #11121420}.gv-category-map p{font:400 16px/25px var(--body)}
.gv-system-topics{margin-top:56px;margin-bottom:0}.gv-system-topics .gv-editorial-note{margin:0;padding-top:24px;border-top:1px solid #ffffff30}
.gv-creative-interlude{margin:64px auto 0;max-width:1080px}.gv-creative-interlude video{display:block;width:100%;height:auto;aspect-ratio:1790/1080;object-fit:cover}.gv-creative-interlude figcaption{font:400 15px/24px var(--body);max-width:800px;margin-top:18px;color:#64666c}
.gv-ownership-line{max-width:800px;font:400 18px/28px var(--body);margin:0 0 32px;opacity:.8}
.gv-story,.gv-market{scroll-margin-top:80px}
@media(max-width:800px){.gv-copy-columns,.gv-model-layout,.gv-onboarding-study,.gv-category-map,.gv-system-topics{grid-template-columns:1fr;gap:28px}.gv-copy-columns{font-size:16px;line-height:26px}.gv-onboarding-study>div:last-child{max-width:300px;margin:auto}.gv-chapter-nav{gap:20px;padding:18px 24px}.gv-model-focus img{height:240px}}

/* ===== Hero: A case slots (pill opens into an image slider) + B full stop → showreel (hero-reel.js) ===== */
:root{--hx-ease:cubic-bezier(.7,0,.2,1)}
.hx-cap,.hx-slides{display:none}
@keyframes hx-bar{to{transform:scaleX(1)}}
@media (hover:hover) and (pointer:fine) and (min-width:801px){
  .hx-a .fig-hero-title{gap:clamp(22px,2.2vw,32px)}
  .hx-a .fig-hero-content{gap:40px}
  .hx-a .fig-hero-title .fig-idea-pill,.hx-a .fig-hero-title .fig-hero-cloud{cursor:pointer;transition:flex-basis .7s var(--hx-ease),width .7s var(--hx-ease)}
  .hx-a .fig-hero-title .fig-idea-pill.hx-open{flex-basis:calc(var(--hero-slot-size) + 80px);width:calc(var(--hero-slot-size) + 80px)}
  .hx-a .fig-hero-title .fig-idea-pill .hero-portrait-layers{transition:transform .7s var(--hx-ease)}
  .hx-a .fig-hero-title .fig-idea-pill.hx-open .hero-portrait-layers{transform:translateX(40px)}
  .hx-a .fig-hero-title .fig-hero-cloud.hx-open{flex-basis:calc(var(--hero-slot-size) * 2.5);width:calc(var(--hero-slot-size) * 2.5)}
  .hx-a .fig-hero-title .fig-hero-cloud.hx-open .hero-cycle-icon{animation-play-state:paused!important;opacity:0!important}
  .hx-a .fig-hero-title [role="link"]:focus-visible{outline:2px solid #fafaf8;outline-offset:4px}
  .hx-a .hx-slides{display:block;position:absolute;inset:0;z-index:1;border-radius:24px;overflow:hidden;background:#1b1c20;opacity:0;transition:opacity .35s ease;pointer-events:none}
  .hx-a .hx-open>.hx-slides{opacity:1}
  .hx-a .hx-track{display:flex;width:100%;height:100%;transition:transform .8s var(--hx-ease)}
  .hx-a .fig-hero-cloud .hx-track img{position:static;flex:0 0 100%;width:100%;height:100%;max-width:none;object-fit:cover;transform:none;opacity:1;animation:none;mix-blend-mode:normal;border-radius:0}
  .hx-a .hx-cap{display:flex;position:absolute;left:50%;bottom:calc(100% + 12px);z-index:3;gap:10px;align-items:baseline;white-space:nowrap;font:500 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fafaf8;opacity:0;transform:translate(-50%,6px);transition:opacity .25s ease,transform .5s var(--hx-ease);pointer-events:none}
  .hx-a .hx-cap i{font-style:normal;font-weight:400;color:#fafaf88c}
  .hx-a .fig-idea-pill>.hx-cap{display:none}
  .hx-a .fig-hero-cloud>.hx-cap{left:16px;bottom:14px;flex-direction:column;align-items:flex-start;gap:5px;font-size:11px;transform:translateY(6px)}
  .hx-a .fig-hero-cloud>.hx-cap b{font-size:13px;letter-spacing:.06em}
  .hx-a .fig-hero-cloud.hx-open>.hx-cap{transform:none}
  .hx-a .hx-slides::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;background:linear-gradient(transparent,rgba(0,0,0,.62));pointer-events:none}
  .hx-a .hx-open>.hx-cap{opacity:1;transform:translate(-50%,0);transition:opacity .3s ease .15s,transform .5s var(--hx-ease) .12s}
}
@media (hover:hover) and (pointer:fine) and (min-width:801px) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  .hx-b .hx-pin{position:relative;height:240vh}
  .hx-b .hx-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--fig-dark,#111214)}
  .hx-b .hx-stage>.fig-hero{height:100%;box-sizing:border-box;padding:104px 24px 88px;display:flex;align-items:center;justify-content:center}
  .hx-b .hx-stage>.fig-hero>.fig-hero-content{margin:0 auto;width:100%}
  .hx-b .fig-reel-stage{display:none}
  .hx-dot{display:inline-block;width:.17em;height:.17em;margin-left:.04em;border-radius:50%;background:currentColor;vertical-align:baseline}
  .hx-reel{position:absolute;inset:0;z-index:5;clip-path:circle(0px at 50% 50%);background:#0b0b0c;pointer-events:none;will-change:clip-path}
  .hx-reel.hx-open{pointer-events:auto;cursor:pointer}
  .hx-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hx-reel-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 28%,transparent 58%,rgba(0,0,0,.6));pointer-events:none;transition:opacity .4s}
  .hx-wash{position:absolute;inset:0;background:#fafaf8;pointer-events:none}
  .hx-reel-meta{position:absolute;right:max(24px,calc((100vw - 1216px) / 2));bottom:40px;display:flex;gap:18px;align-items:center;font:500 13px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fafaf8;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s}
  .hx-rec::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff4d3d;margin-right:8px;vertical-align:1px;animation:hx-blink 1.2s steps(2) infinite}
  .hx-reel.hx-open .hx-reel-meta{opacity:1}
  .hx-reel .hx-reel-play{left:auto;right:max(24px,calc((100vw - 1216px) / 2 - 12px));bottom:64px;z-index:2;opacity:0;transform:scale(.85);transition:opacity .4s,transform .6s var(--hx-ease)}
  .hx-reel.hx-open .hx-reel-play{opacity:1;transform:none}
  .hx-reel.hx-sound{cursor:auto}
  .hx-reel.hx-sound .hx-reel-play,.hx-reel.hx-sound .hx-reel-meta,.hx-reel.hx-sound .hx-reel-shade{opacity:0;pointer-events:none}
  .hx-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;font:500 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#fafaf88c;pointer-events:none}
  .hx-hint::after{content:"";width:1px;height:36px;background:linear-gradient(#fafaf88c,transparent);transform-origin:top;animation:hx-drip 1.8s ease-in-out infinite}
}
@keyframes hx-drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes hx-blink{50%{opacity:0}}

.hx-dots{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:801px) and (prefers-reduced-motion:no-preference){
  .hx-dotsc .home-page .fig-hero::before,.hx-dotsc .home-page .fig-hero::after{content:none}
  .hx-dotsc .hx-dots{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
}

/* ===== About redesign (about-motion.js): .ax-* ===== */
.ax-h1{display:block}
.fig-about-hero ax-h1 .ax-l{display:flex;align-items:center;gap:.22em;flex-wrap:wrap}
.ax-pill{display:inline-flex;position:relative;flex:none;height:.78em;border-radius:999px;overflow:hidden;font-style:normal;vertical-align:middle}
.ax-p-portrait{width:1.1em;background:radial-gradient(ellipse at 50% 0,#d8f780 26%,#baec4c 63%,#9be117 100%)}
.ax-p-portrait img{position:absolute;left:50%;top:6%;width:128%;max-width:none;height:auto;transform:translateX(-50%)}
.ax-p-grid{width:1.3em;background:#1d1e23;padding:.1em;display:grid;grid-template-columns:repeat(2,1fr);gap:.07em;box-shadow:inset 0 0 0 1px #ffffff1f}
.ax-p-grid b{border-radius:.12em;background:#d8f780;animation:ax-cell 2.4s ease-in-out infinite}
.ax-p-grid b:nth-child(2){background:#fafaf8;animation-delay:.3s}.ax-p-grid b:nth-child(3){background:#fafaf8;animation-delay:.6s}.ax-p-grid b:nth-child(4){animation-delay:.9s}
@keyframes ax-cell{0%,100%{transform:scale(1)}50%{transform:scale(.55);border-radius:50%}}
.ax-p-cycle{width:1.1em;background:#1d1e23;box-shadow:inset 0 0 0 1px #ffffff1f}
.ax-p-cycle img{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;opacity:0;animation:ax-cycle 6.6s infinite}
.ax-p-cycle img:nth-child(2){animation-delay:2.2s}.ax-p-cycle img:nth-child(3){animation-delay:4.4s}
@keyframes ax-cycle{0%{opacity:0;transform:scale(.8)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:scale(1.1)}}
.ax-js .fig-about-hero ax-h1 .ax-l{color:inherit}
.ax-js .ax-w{color:#c1c3c8;transition:color .45s ease}.ax-js .ax-w.on{color:#111214}
@media(max-width:520px){.ax-pill{display:none}}
@media(prefers-reduced-motion:reduce){.ax-p-grid b,.ax-p-cycle img{animation:none}.ax-p-cycle img:first-child{opacity:1}}

/* portrait reveal */
.ax-js .fig-about-portrait{--ax-p:0;rotate:calc((1 - var(--ax-p)) * -4deg);scale:calc(.9 + var(--ax-p) * .1);transform-origin:50% 100%}
.ax-js .fig-about-portrait .about-person{filter:grayscale(calc(1 - var(--ax-p))) contrast(calc(1.1 - var(--ax-p) * .1))}

/* stats strip */
.ax-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:48px max(24px,calc((100% - 1216px)/2));background:#fafaf8;color:#111214;border-top:1px solid #00000014;border-bottom:1px solid #00000014}
.ax-stats>div{display:flex;flex-direction:column;gap:12px}
.ax-stats b{font:500 clamp(48px,6.2vw,88px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ax-stats span{font-size:16px;line-height:24px;color:#64666c;max-width:240px}
.ax-stats small{display:block;margin-top:4px;font-size:13px;line-height:18px;color:#8a8c92}
@media(max-width:800px){.ax-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding:40px 24px;row-gap:36px}}

/* experience timeline */
@media(min-width:801px){
  .fig-experience-row{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:24px;row-gap:24px;align-items:start}
  .fig-experience-row>.ax-year{grid-column:1;grid-row:1 / span 2;position:sticky;top:112px;align-self:start;font:500 32px/1 var(--display);letter-spacing:-.01em;color:#8a8c92;padding-top:12px;transition:color .3s}
  .fig-experience-row:hover>.ax-year{color:#111214}
  .fig-experience-row>.fig-experience-header,.fig-experience-row>.fig-experience-description{grid-column:2}
  .fig-experience-row>.fig-experience-description{grid-row:2}
  .fig-experience-row[data-peek]{cursor:none}
}
@media(max-width:800px){.ax-year{font:500 14px/20px var(--display);letter-spacing:.08em;color:#8a8c92}}
.earlier-experience-list .fig-experience-row>.ax-year{position:static}
.ax-peek{position:fixed;left:0;top:0;width:300px;aspect-ratio:16/10;border-radius:16px;overflow:hidden;pointer-events:none;z-index:60;opacity:0;box-shadow:0 24px 60px #0000003d;background:#1d1e23;transition:opacity .25s ease}
.ax-peek.on{opacity:1}.ax-peek img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}

/* testimonials: one large quote */
.ax-quotes{background:#e8e9eb;overflow:visible}
.ax-qstage{display:grid;margin-top:24px}
.ax-quote{grid-area:1/1;margin:0;display:flex;flex-direction:column;gap:40px;opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .6s ease,transform .8s var(--ease-out,cubic-bezier(.16,1,.3,1)),visibility 0s .6s}
.ax-quote.on{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease .1s,transform .8s var(--ease-out,cubic-bezier(.16,1,.3,1)) .1s,visibility 0s}
.ax-quote blockquote{margin:0;max-width:1000px}
.ax-qlead{margin:0;font:500 clamp(24px,3.1vw,42px)/1.22 var(--display);letter-spacing:-.01em;text-wrap:pretty}
.ax-qlead::before{content:"“"}.ax-qlead::after{content:"”"}
.ax-qrest{margin-top:24px;display:flex;flex-direction:column;gap:16px;max-width:760px}
.ax-qrest p{margin:0;font-size:18px;line-height:28px;color:#3d3f45}
.ax-qmore{margin-top:24px;background:none;border:0;border-bottom:1px solid #11121466;padding:0 0 2px;font:500 15px/24px var(--body);color:#111214;cursor:pointer}
.ax-qmore:hover{border-color:#111214}
.ax-quote figcaption{display:flex;align-items:center;gap:20px}
.ax-quote figcaption h3{font:600 20px/28px var(--body);margin:0}
.ax-quote figcaption p{margin:0;font-size:14px;line-height:20px;color:#64666c}
.ax-quote figcaption time{font-size:13px;line-height:20px;color:#8a8c92}
.ax-quote figcaption>div{display:flex;flex-direction:column;gap:2px}
.ax-qnav{display:flex;align-items:center;gap:20px;margin-top:48px}
.ax-qbtn{width:48px;height:48px;border-radius:50%;border:1px solid #00000029;background:transparent;color:#111214;display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
.ax-qbtn:hover{background:#111214;color:#fafaf8}
.ax-qcount{font:500 14px/1 var(--display);letter-spacing:.08em;color:#64666c;font-variant-numeric:tabular-nums}.ax-qcount b{color:#111214;font-weight:500}
@media(max-width:800px){.ax-quote{gap:28px}.ax-qlead{font-size:24px}}
@media(prefers-reduced-motion:reduce){.ax-quote,.ax-quote.on{transition:none;transform:none}}
@media print{.ax-quote{opacity:1!important;visibility:visible!important;grid-area:auto}.ax-qstage{display:block}.ax-qrest[hidden]{display:block!important}.ax-qnav,.ax-qmore{display:none!important}}

/* teaching & learning */
.ax-learn-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:96px;align-items:start}
.ax-sub{font:500 14px/20px var(--display);letter-spacing:.1em;text-transform:uppercase;color:#64666c;margin:0 0 8px}
.ax-trow{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:24px;padding:32px 0;border-top:1px solid #00000014}
.ax-big{font:500 clamp(44px,5vw,72px)/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ax-tid{display:flex;gap:16px;align-items:center}.ax-tid img,.ax-erow img{width:56px;height:56px;border-radius:12px;border:1px solid #00000014;flex:none;object-fit:cover}
.ax-tid p,.ax-erow p{margin:0;font-size:14px;line-height:20px}
.ax-tid h4,.ax-erow h4{margin:2px 0;font:600 18px/26px var(--body)}
.ax-meta{color:#64666c}
.ax-desc{margin:16px 0 0;font-size:16px;line-height:26px;color:#3d3f45}
.ax-link{display:inline-block;margin-top:12px;color:#111214;font-weight:500;border-bottom:1px solid #11121466}
.ax-erow{display:flex;gap:16px;align-items:center;padding:28px 0;border-top:1px solid #00000014}
.ax-erow .education-logo{display:block;flex:none}
@media(max-width:900px){.ax-learn-grid{grid-template-columns:1fr;gap:56px}.ax-trow{grid-template-columns:1fr;gap:12px}}

/* closing */
.ax-closing{padding:96px max(24px,calc((100% - 1216px)/2));background:#111214;color:#fafaf8;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.ax-closing h2{font:500 clamp(36px,5vw,72px)/1.05 var(--display);letter-spacing:-.01em;margin:0;max-width:820px}
.ax-closing p{margin:0;font-size:18px;line-height:28px;color:#fafaf8b3}
.ax-closing .cv-downloads{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}
.ax-closing .pill{background:#fafaf8;color:#111214;border-color:#fafaf8}
@media(max-width:800px){.ax-closing{padding:64px 24px}}
@media print{.ax-closing{display:none}}
.ax-trow{grid-template-columns:minmax(0,220px) minmax(0,1fr)}
.ax-big{font-size:clamp(36px,4vw,56px);white-space:nowrap}
.ax-erow .education-logo{width:56px;height:56px;border:0;background:none;padding:0;overflow:hidden;border-radius:12px}
.ax-erow .education-logo img{width:56px;height:56px}
@media(max-width:900px){.ax-trow{grid-template-columns:1fr}}
.ax-qrest[hidden]{display:none!important}
main.fig-about-page{overflow-x:clip}
@media(max-width:800px){.ax-js .fig-about-portrait{rotate:none;scale:1}}
@media(max-width:800px){main.fig-about-page>.fig-about-hero{padding-top:140px;padding-bottom:72px;min-height:0}}
@media(max-width:800px){main.fig-about-page>section.fig-about-hero:not(.a):not(.b):not(.c):not(.d){padding-top:140px;padding-bottom:72px}}
@media(max-width:800px){.fig-about-portrait,.ax-js .fig-about-portrait{rotate:none;scale:.74;transform-origin:0 0;margin:-40px 0 -178px;transform:none}}
@media(max-width:800px){main.fig-about-page>.fig-about-intro{justify-items:start}.fig-about-portrait,.ax-js .fig-about-portrait{margin-left:20px;margin-right:0;justify-self:start;left:0;right:auto}}
@media(max-width:800px){.fig-about-portrait,.ax-js .fig-about-portrait{scale:.68;margin:-40px 0 -220px}}
@media(max-width:800px){.fig-about-portrait,.ax-js .fig-about-portrait{margin-bottom:-196px}}
.ax-erow .education-logo{border:1px solid #00000014;background:#fff}
.ax-erow .education-logo>img{width:100%;height:100%}
.ax-erow .education-logo.beykent>img{width:147.36%;height:115.07%}

/* About hero: fixed stage on the right (replaces inline pills) */
.fig-about-hero{height:auto;min-height:664px;padding-bottom:72px;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:40px;align-items:center}
.fig-about-hero ax-h1{font-size:clamp(44px,5.3vw,78px)}
.ax-stage{--R1:178px;--R2:104px;position:relative;width:460px;height:460px;--mx:0;--my:0;--ax-rot:0deg}
.ax-stage::before,.ax-stage::after{content:"";position:absolute;border-radius:50%;border:1px dashed #00000022;pointer-events:none}
.ax-stage::before{inset:calc(230px - var(--R1))}.ax-stage::after{inset:calc(230px - var(--R2))}
.ax-glow{position:absolute;inset:25%;border-radius:50%;background:radial-gradient(circle,#d8f78099,#d8f78000 70%);filter:blur(8px)}
.ax-core{position:absolute;left:50%;top:50%;width:124px;height:124px;margin:-62px;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 50% 0,#d8f780 26%,#baec4c 63%,#9be117 100%);translate:calc(var(--mx) * 12px) calc(var(--my) * 12px);box-shadow:0 18px 40px #9be11744}
.ax-core img{position:absolute;left:50%;top:10%;width:130%;max-width:none;transform:translateX(-50%)}
.ax-ring{position:absolute;inset:0;rotate:var(--ax-rot);animation:ax-spin 40s linear infinite;translate:calc(var(--mx) * -8px) calc(var(--my) * -8px)}
.ax-r2{animation-direction:reverse;animation-duration:32s}
.ax-ring>i{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--R1) * -1))}
.ax-r2>i{transform:rotate(var(--a)) translateY(calc(var(--R2) * -1))}
.ax-in{position:absolute;display:grid;place-items:center;width:84px;height:84px;margin:-42px;border-radius:24px;background:#1d1e23;box-shadow:0 14px 30px #0000002e,inset 0 0 0 1px #ffffff1f;rotate:calc(var(--a) * -1 - var(--ax-rot) * -1 + var(--ax-rot) * -2);animation:ax-spin 40s linear infinite reverse}
.ax-r2 .ax-in{width:56px;height:56px;margin:-28px;border-radius:16px;animation-direction:normal;animation-duration:32s}
.ax-in img{width:74%;height:74%;object-fit:contain}
.ax-tgrid{display:grid!important;grid-template-columns:1fr 1fr;gap:5px;padding:12px}.ax-tgrid b{border-radius:5px;background:#d8f780}.ax-tgrid b:nth-child(2),.ax-tgrid b:nth-child(3){background:#fafaf8}
.ax-tstar{background:#bdee53!important}.ax-tstar img{width:80%;height:80%}
@keyframes ax-spin{to{transform:rotate(360deg)}}
@media(max-width:800px){
  main.fig-about-page>section.fig-about-hero:not(.a):not(.b):not(.c):not(.d){display:block}
  .ax-stage{transform:scale(.72);transform-origin:0 0;margin:40px 0 -128px}
}
@media(prefers-reduced-motion:reduce){.ax-ring,.ax-in{animation:none}}
.ax-tgrid{place-items:stretch!important;align-content:stretch}

/* About hero scene v2: looping product demo (about-motion.js) */
.fig-about-hero{grid-template-columns:minmax(0,1fr) 540px}
.fig-about-hero ax-h1{font-size:clamp(44px,5vw,72px)}
.ax-stage{width:540px;height:470px;rotate:none;translate:none}
.ax-stage::before,.ax-stage::after{display:none}
.ax-scene{position:absolute;left:0;top:0;width:100%;height:410px}
.ax-win{position:absolute;left:0;top:34px;width:410px;height:276px;border-radius:18px;background:#fff;border:1px solid #0000000f;box-shadow:0 20px 50px #0000001a;opacity:0;transform:scale(.94);transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1);overflow:hidden}
.ax-win::before{content:"";position:absolute;left:0;top:0;bottom:0;width:72px;background:#f3f4f2}
.ax-win i{position:absolute;top:14px;width:8px;height:8px;border-radius:50%;background:#0000001f}
.ax-win i:nth-child(1){left:14px}.ax-win i:nth-child(2){left:28px}.ax-win i:nth-child(3){left:42px}
.ax-win u{position:absolute;left:92px;height:10px;border-radius:5px;background:#0000000f}
.ax-win u:nth-of-type(1){top:56px;width:52%}.ax-win u:nth-of-type(2){top:82px;width:40%}.ax-win u:nth-of-type(3){top:108px;width:46%}
.ax-win s{position:absolute;left:92px;bottom:26px;width:130px;height:78px;border-radius:12px;background:linear-gradient(135deg,#d8f780,#9be117)}
.ax-hello{position:absolute;left:50%;top:46%;display:flex;flex-direction:column;align-items:center;gap:14px;transform:translate(-50%,-50%);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);opacity:0}
.ax-hello b{font:500 28px/1 var(--display);letter-spacing:-.01em;color:#111214}
.ax-disc{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 0,#d8f780 26%,#baec4c 63%,#9be117 100%);box-shadow:0 14px 34px #9be11766}
.ax-disc img{width:60%;height:60%}
.ax-card{position:absolute;left:50%;top:48%;width:332px;padding:16px;border-radius:22px;background:#fff;border:1px solid #0000000f;box-shadow:0 24px 60px #00000024;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:opacity .6s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.ax-ch{display:flex;align-items:center;gap:8px;font:500 13px/20px var(--body);color:#3d3f45}
.ax-dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#d8f780,#9be117)}.ax-dot img{width:62%;height:62%}
.ax-body{position:relative;min-height:216px;margin-top:12px}
.ax-p1,.ax-p2{position:absolute;inset:0;transition:opacity .45s ease}.ax-p1{opacity:0}
.ax-p2{display:grid;grid-template-rows:auto 1fr;align-content:start;opacity:0}
.ax-q{margin:0;font:500 15px/1.35 var(--body);color:#111214}.ax-q b{color:#3f7d00;font-weight:600}
.ax-sug{display:flex;align-items:center;gap:10px;margin-top:8px;padding:9px 12px;border-radius:12px;background:#f4f5f2;font:400 13px/18px var(--body);color:#2c2e33;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.ax-si{width:26px;height:26px;flex:none;border-radius:50%;background:#fff;display:grid;place-items:center;color:#3d3f45}
.ax-input{margin-top:12px;height:40px;border-radius:20px;background:#f4f5f2;padding:0 16px;display:flex;align-items:center;font:400 13px/20px var(--body);color:#111214;overflow:hidden;white-space:nowrap}
.ax-ph{color:#9a9ca1}.ax-typed:not(:empty)::after{content:"";display:inline-block;width:1px;height:15px;margin-left:1px;background:#111214;vertical-align:-3px;animation:ax-caret .8s steps(2) infinite}
@keyframes ax-caret{50%{opacity:0}}
.ax-bubble{margin:0 0 0 auto;max-width:86%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:#e9f9bd;font:400 13px/18px var(--body);color:#111214;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.ax-gen,.ax-res{grid-row:2;grid-column:1;margin-top:14px;opacity:0;transition:opacity .4s ease}
.ax-gen{display:flex;flex-direction:column;gap:8px}
.ax-spark{width:16px;height:16px;display:inline-block;animation:ax-spin 2.4s linear infinite;position:absolute}.ax-spark img{width:100%;height:100%}
.ax-gen em{font:400 12px/16px var(--body);font-style:normal;color:#64666c;padding-left:24px}
.ax-gen i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,#ebece8 25%,#d8f780 50%,#ebece8 75%);background-size:200% 100%;animation:ax-shim 1.4s linear infinite}
.ax-gen i:nth-of-type(2){width:82%}.ax-gen i:nth-of-type(3){width:56%}
@keyframes ax-shim{to{background-position:-200% 0}}
.ax-res p{margin:0 0 8px;font:500 13px/18px var(--body);color:#111214}
.ax-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ax-thumbs img{width:100%;height:56px;object-fit:cover;border-radius:8px;opacity:0;transform:scale(.92);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * .12s + .15s)}
.ax-src{display:flex;gap:6px;margin-top:8px}.ax-src span{font:500 11px/16px var(--body);padding:2px 9px;border-radius:999px;border:1px solid #00000014;color:#64666c}
.ax-badge{position:absolute;width:58px;height:58px;border-radius:17px;background:#1d1e23;display:grid;place-items:center;box-shadow:0 14px 30px #0000002e,inset 0 0 0 1px #ffffff1f;animation:ax-float 6s ease-in-out infinite}
.ax-badge img{width:72%;height:72%;object-fit:contain}
.ax-b1{left:6px;top:0}.ax-b2{right:0;top:38px;animation-delay:-2s}.ax-b3{right:34px;bottom:6px;animation-delay:-4s}
@keyframes ax-float{50%{transform:translateY(-8px)}}
/* steps */
.ax-stage[data-step="0"] .ax-hello,.ax-stage[data-step="1"] .ax-card,.ax-stage[data-step="2"] .ax-card,.ax-stage[data-step="3"] .ax-card,.ax-stage[data-step="4"] .ax-card,.ax-stage[data-step="5"] .ax-card{opacity:1}
.ax-stage[data-step="0"] .ax-hello{transform:translate(-50%,-50%)}
.ax-stage:not([data-step="0"]) .ax-hello{transform:translate(-50%,-62%)}
.ax-stage[data-step="1"] .ax-card,.ax-stage[data-step="2"] .ax-card,.ax-stage[data-step="3"] .ax-card,.ax-stage[data-step="4"] .ax-card{transform:translate(-50%,-50%) scale(1)}
.ax-stage[data-step="5"] .ax-card{transform:translate(calc(-50% + 92px),-50%) scale(.78)}
.ax-stage[data-step="5"] .ax-win{opacity:1;transform:none}
.ax-stage[data-step="1"] .ax-p1{opacity:1}
.ax-stage[data-step="1"] .ax-sug{opacity:1;transform:none;transition-delay:calc(var(--i) * .13s + .3s)}
.ax-stage[data-step="3"] .ax-p2,.ax-stage[data-step="4"] .ax-p2,.ax-stage[data-step="5"] .ax-p2{opacity:1}
.ax-stage[data-step="3"] .ax-bubble,.ax-stage[data-step="4"] .ax-bubble,.ax-stage[data-step="5"] .ax-bubble{opacity:1;transform:none}
.ax-stage[data-step="3"] .ax-gen{opacity:1}
.ax-stage[data-step="4"] .ax-res,.ax-stage[data-step="5"] .ax-res{opacity:1}
.ax-stage[data-step="4"] .ax-thumbs img,.ax-stage[data-step="5"] .ax-thumbs img{opacity:1;transform:none}
.ax-stage[data-step="2"] .ax-ph{display:none}
.ax-stage[data-step="3"] .ax-ph,.ax-stage[data-step="4"] .ax-ph,.ax-stage[data-step="5"] .ax-ph{opacity:.6}
/* play / pause with progress ring */
.ax-pp{position:absolute;left:50%;bottom:0;width:44px;height:44px;margin-left:-22px;padding:0;border:0;background:none;cursor:pointer;color:#111214}
.ax-pp svg{width:44px;height:44px;overflow:visible}
.ax-ring-bg,.ax-ring-fg{fill:none;stroke-width:2}.ax-ring-bg{stroke:#00000018}
.ax-ring-fg{stroke:#111214;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;transform:rotate(-90deg);transform-origin:20px 20px}
.ax-g-pause,.ax-g-play{stroke:#111214;stroke-width:2.4;stroke-linecap:round;fill:none}.ax-g-play{display:none;fill:#111214;stroke-linejoin:round}
.ax-paused .ax-g-pause{display:none}.ax-paused .ax-g-play{display:block}
.ax-pp:focus-visible{outline:2px solid #111214;outline-offset:2px;border-radius:50%}
@media(prefers-reduced-motion:reduce){.ax-badge,.ax-spark,.ax-gen i{animation:none}.ax-card,.ax-win,.ax-hello,.ax-sug,.ax-bubble,.ax-thumbs img{transition:none}}
@media(max-width:800px){.ax-stage{transform:scale(.6);transform-origin:0 0;margin:24px 0 -188px}}
.fig-about-hero ax-h1 .ax-w{display:inline;animation:none}
/* About hero: text-only fallback while alternatives are explored */
.ax-stage{display:none!important}
.fig-about-hero{display:block;grid-template-columns:none}
.fig-about-hero ax-h1{font-size:clamp(56px,6.667vw,96px)}
@media(max-width:800px){.fig-about-hero ax-h1{font-size:clamp(32px,8vw,56px)}}

/* About hero v3: rolling words (Option B) */
.fig-about-hero ax-h1 .ax-l .ax-g{display:inline!important;animation:none;color:inherit}
.fig-about-hero ax-h1 .ax-l .ax-g.tr,html[lang="tr"] .fig-about-hero ax-h1 .ax-l .ax-g.en{display:none!important}
html[lang="tr"] .fig-about-hero ax-h1 .ax-l .ax-g.tr{display:inline!important}
.fig-about-hero ax-h1 .ax-l .ax-fx{display:inline;animation:none;color:#9a9ca1}
.fig-about-hero ax-h1 .ax-l .ax-roll{display:inline-block;position:relative;height:1.12em;overflow:hidden;clip-path:inset(0);vertical-align:bottom;animation:none;color:#111214;transition:width .8s cubic-bezier(.7,0,.2,1)}
.fig-about-hero ax-h1 .ax-l .ax-roll::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.1em;border-radius:2px;background:#9be117;opacity:.9}
.fig-about-hero ax-h1 .ax-roll .ax-sz{display:block;visibility:hidden;text-decoration:none;white-space:nowrap;line-height:1.12em;height:1.12em}
.fig-about-hero ax-h1 .ax-roll i{position:absolute;left:0;top:0;display:block;font-style:normal;white-space:nowrap;line-height:1.12em;color:#111214;opacity:0;transform:translateY(100%);transition:transform .7s cubic-bezier(.7,0,.2,1),opacity .35s ease}
.fig-about-hero ax-h1 .ax-roll i.on{opacity:1;transform:none}
.fig-about-hero ax-h1 .ax-roll i.out{opacity:0;transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.fig-about-hero ax-h1 .ax-roll,.fig-about-hero ax-h1 .ax-roll i{transition:none}}
.fig-about-hero ax-h1 .ax-roll i{width:max-content}
.fig-about-hero ax-h1 .ax-l .ax-roll::after{display:none}

/* about v4: quotes readable, flat peek, stats in portrait section, teaching visuals */
.ax-peek{border-radius:0}
.ax-quote{grid-template-columns:minmax(0,280px) minmax(0,1fr);column-gap:72px;align-items:start;gap:0 72px}
.ax-quote blockquote{grid-column:2;grid-row:1;max-width:680px}
.ax-quote figcaption{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:16px}
.ax-qlead{font:400 clamp(18px,1.5vw,22px)/1.6 var(--body);letter-spacing:0;color:#1c1d21;text-wrap:pretty}
.ax-qrest p{font-size:16px;line-height:26px}
.ax-qmore{margin-top:20px}
.ax-qnav{margin-top:40px}
@media(max-width:800px){.ax-quote{grid-template-columns:1fr;gap:28px}.ax-quote blockquote,.ax-quote figcaption{grid-column:1}.ax-quote blockquote{grid-row:1}.ax-quote figcaption{grid-row:2;flex-direction:row;align-items:center}.ax-qlead{font-size:18px}}

main.fig-about-page>.fig-about-intro>.ax-stats{grid-column:1/-1;background:none;color:#fafaf8;border:0;border-top:1px solid #ffffff1f;padding:48px 0 0;margin-top:24px;gap:24px}
.fig-about-intro .ax-stats span{color:#fafaf8b3}.fig-about-intro .ax-stats small{color:#fafaf873}
@media(max-width:800px){main.fig-about-page>.fig-about-intro>.ax-stats{padding:40px 0 0;margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px;position:relative;z-index:1}}

.ax-learn-grid{grid-template-columns:1fr;gap:88px}
.ax-trow{grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;padding:40px 0;align-items:center}
.ax-tbody{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:start}
.ax-ticon{width:56px;height:56px;border-radius:12px;border:1px solid #00000014;object-fit:cover;display:block}
.ax-ttext{min-width:0}.ax-ttext p{margin:0;font-size:14px;line-height:20px}
.ax-ttext h4{margin:2px 0;font:600 18px/26px var(--body)}
.ax-ttext .ax-desc{margin:14px 0 0;font-size:16px;line-height:26px;max-width:560px}
.ax-tv{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:16/10;background:#111214}
.ax-tv.u{display:grid;grid-template-columns:repeat(6,28px);gap:16px;justify-content:center;align-content:center}
.ax-tv.u i{display:block;width:28px;height:28px;border-radius:50%;background:#d8f780;opacity:var(--o,1)}
.ax-tv.b{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:11% 10%;background:#b34f35}
.ax-tv.b span{display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.ax-tv.b b{display:block;background:#f6e3d8}.ax-tv.b span:nth-child(2) b:first-child{background:#111214}
.ax-yt-play{position:absolute;left:50%;top:42%;width:76px;height:54px;margin:-27px 0 0 -38px;background:#e8344e}
.ax-yt-play::after{content:"";position:absolute;left:50%;top:50%;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;transform:translate(-35%,-50%)}
.ax-yt-bar{position:absolute;left:8%;right:8%;bottom:26%;height:3px;background:#ffffff2e}.ax-yt-bar i{display:block;width:38%;height:100%;background:#e8344e}
.ax-yt-tags{position:absolute;left:8%;right:8%;bottom:9%;display:flex;flex-wrap:wrap;gap:4px 16px;font:500 11px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fafaf8b3}
.ax-elist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.ax-erow{align-items:flex-start}
.ax-edu .ax-sub{margin-bottom:0}
@media(max-width:900px){.ax-trow{grid-template-columns:1fr;gap:24px;align-items:start}.ax-elist{grid-template-columns:1fr}.ax-learn-grid{gap:56px}}
.ax-quote{display:grid}
main.fig-about-page>.fig-about-intro>.ax-stats{border-top:0;padding-top:24px}
.fig-about-intro .ax-stats>div{align-items:center;text-align:center}
.fig-about-intro .ax-stats span{max-width:none;text-align:center}
.ax-tv.b{display:block;padding:0;background:#af4f34}
.ax-tv.b img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:ax-brick 8s infinite}
.ax-tv.b img:nth-child(2){animation-delay:4s}
@keyframes ax-brick{0%{opacity:0}6%,46%{opacity:1}54%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ax-tv.b img{animation:none}.ax-tv.b img:first-child{opacity:1}}
.ax-tv.p{background:#111214}.ax-tv.p img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.ax-ticon.mono{display:flex;align-items:center;justify-content:center;background:#111214;color:#d8f780;font:600 18px/1 var(--display);letter-spacing:.02em}
.ax-tv.p{aspect-ratio:4/3}.ax-tv.p img{object-position:50% 26%}
.ax-tv.p img{opacity:0;object-position:50% 50%;animation:ax-gal 21s infinite;animation-delay:calc(var(--i) * 3.5s)}
.ax-tv.p img:first-child{opacity:1}
@keyframes ax-gal{0%{opacity:0}3%,16.67%{opacity:1}20.5%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ax-tv.p img{animation:none;opacity:0}.ax-tv.p img:first-child{opacity:1}}
.ax-tv.y{aspect-ratio:16/9;background:#111214}
.ax-tv.y img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:ax-gal 21s infinite;animation-delay:calc(var(--i) * 3.5s)}
.ax-tv.y img:first-child{opacity:1}
@media(prefers-reduced-motion:reduce){.ax-tv.y img{animation:none;opacity:0}.ax-tv.y img:first-child{opacity:1}}
.ax-tv.s{aspect-ratio:4/3;background:#b0503a}.ax-tv.s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ===== Genva · interactive Prompt Area (Learning from Vimo) ===== */
.gvp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;max-width:1120px;margin:48px auto 0;align-items:start;text-align:left}
.gvp-left{min-width:0}
.gvp-hint{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:500 13px/20px var(--body);color:rgba(250,250,248,.62)}
.gvp-dot{width:8px;height:8px;border-radius:50%;background:#b779ff;box-shadow:0 0 0 0 rgba(183,121,255,.6);animation:gvp-ping 2s infinite}
@keyframes gvp-ping{70%{box-shadow:0 0 0 9px rgba(183,121,255,0)}100%{box-shadow:0 0 0 0 rgba(183,121,255,0)}}
.gvp-types{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gvp-types::-webkit-scrollbar{display:none}
.gvp-types button{flex:none;appearance:none;border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(250,250,248,.72);font:500 13px/18px var(--body);padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.gvp-types button:hover{border-color:rgba(255,255,255,.34);color:#fff}
.gvp-types button[aria-selected=true]{background:#fafaf8;color:#0b0c10;border-color:#fafaf8}
.gvp button:focus-visible,.gvp textarea:focus-visible{outline:2px solid #b779ff;outline-offset:2px}
.gvp-body{position:relative;min-height:380px;border-radius:28px;background:radial-gradient(120% 90% at 20% 0%,#1a1226 0%,#0c0d12 60%);border:1px solid rgba(255,255,255,.08);padding:28px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.gvp-prompt{position:relative;background:#16171d;border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:16px;display:flex;flex-direction:column;gap:14px;transition:border-color .25s,box-shadow .35s}
.gvp-prompt.is-active{border-color:rgba(255,255,255,.88)}
.gvp-prompt.is-highlight{border-color:#c98bff;box-shadow:0 0 0 4px rgba(183,121,255,.22),0 0 40px rgba(183,121,255,.35);animation:gvp-shake .4s}
@keyframes gvp-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.gvp-prompt.is-busy{opacity:.7;pointer-events:none}
.gvp-texts{display:flex;align-items:flex-start;gap:12px}
.gvp-input{flex:1;min-width:0;resize:none;background:transparent;border:0;color:#fafaf8;font:400 16px/24px var(--body);padding:4px 0;min-height:48px;max-height:112px;outline:none}
.gvp-input::placeholder{color:rgba(250,250,248,.42)}
.gvp-dice{flex:none;appearance:none;background:transparent;border:0;color:rgba(250,250,248,.7);width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,transform .3s}
.gvp-dice:hover{background:rgba(255,255,255,.08);color:#fff;transform:rotate(18deg)}
.gvp-slot{flex:none;appearance:none;position:relative;width:64px;height:64px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.3);background:rgba(255,255,255,.04);color:rgba(250,250,248,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:600 9px/12px var(--body);letter-spacing:.08em;cursor:pointer;transition:border-color .2s,background .2s}
.gvp-slot:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.gvp-slot.has{border-style:solid;border-color:rgba(255,255,255,.25);padding:0;overflow:hidden}
.gvp-thumb{display:block;width:100%;height:100%;background:radial-gradient(60% 50% at 50% 30%,#ffb88a 0 40%,transparent 41%),linear-gradient(160deg,#6a1f3a,#2b0f24 55%,#140b17);position:relative}
.gvp-thumb:after{content:"";position:absolute;left:50%;bottom:-18%;width:70%;height:55%;transform:translateX(-50%);border-radius:50% 50% 0 0;background:#8d2a4a}
.gvp-thumb.sm{width:36px;height:36px;border-radius:8px;flex:none}
.gvp-x{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:grid;place-items:center}
.gvp-bar2{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gvp-settings{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap}
.gvp-c{appearance:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;border:0;background:rgba(255,255,255,.07);color:#fafaf8;font:500 14px/20px var(--body);cursor:pointer;white-space:nowrap;transition:background .2s}
.gvp-c:hover{background:rgba(255,255,255,.14)}
.gvp-c.gvp-arrow{background:transparent;padding:0 4px;color:rgba(250,250,248,.6);margin-left:-6px}
.gvp-sep{width:1px;height:20px;background:rgba(255,255,255,.14);margin:0 2px}
.gvp-c.pulse{box-shadow:0 0 0 0 rgba(183,121,255,.7);animation:gvp-pulse 2.2s infinite}
@keyframes gvp-pulse{70%{box-shadow:0 0 0 10px rgba(183,121,255,0)}100%{box-shadow:0 0 0 0 rgba(183,121,255,0)}}
.gvp-create{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:14px;font:600 15px/20px var(--body);color:rgba(255,255,255,.55);background:rgba(255,255,255,.1);transition:background .3s,color .3s,transform .15s,box-shadow .3s}
.is-active .gvp-create{color:#fff;background:linear-gradient(100deg,#ff6a8a 0%,#b45cff 100%);box-shadow:0 8px 24px rgba(180,92,255,.35)}
.gvp-create:active{transform:scale(.97)}
/* logos drawn in CSS */
.gvp-logo{display:inline-grid;place-items:center;flex:none;width:var(--z,20px);height:var(--z,20px);border-radius:calc(var(--z,20px)*.3);overflow:hidden;color:#fff}
.gvp-logo.kling{background:conic-gradient(from 210deg,#1fd1ff,#2d6bff,#8a5cff,#1fd1ff)}
.gvp-logo.veo{background:linear-gradient(135deg,#ffb347,#ff5e62 60%,#8e44ff)}
.gvp-logo.hailuo{background:linear-gradient(135deg,#ff5fa2,#ff2d6f)}
.gvp-logo.nano{background:linear-gradient(135deg,#ffe36a,#ffc400)}
.gvp-logo.seed{background:linear-gradient(135deg,#43e8a0,#0ba36a)}
.gvp-logo.flux{background:linear-gradient(135deg,#9b7bff,#4a2bd1)}
.gvp-logo.note{background:linear-gradient(135deg,hsl(var(--h) 80% 60%),hsl(calc(var(--h) + 40) 70% 40%))}
.gvp-logo.swatch{background:linear-gradient(135deg,hsl(var(--h) 45% 78%) 0 50%,hsl(var(--h) 40% 32%) 50%)}
.gvp-logo.kling:after,.gvp-logo.veo:after,.gvp-logo.hailuo:after,.gvp-logo.seed:after,.gvp-logo.flux:after{content:"";width:46%;height:46%;border-radius:50%;background:rgba(255,255,255,.92);clip-path:polygon(0 0,100% 50%,0 100%)}
/* result */
.gvp-result{min-height:0}
.gvp-note{margin:0;font:400 14px/22px var(--body);color:#ffb3c6}
.gvp-gen,.gvp-done{position:relative;border-radius:20px;overflow:hidden;min-height:96px;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(135deg,hsl(var(--h) 55% 28%),hsl(calc(var(--h) + 60) 50% 14%));border:1px solid rgba(255,255,255,.1)}
.gvp-gen p,.gvp-done p{position:relative;margin:0;font:500 14px/20px var(--body);display:flex;align-items:center;gap:8px;color:#fff}
.gvp-shimmer{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:200% 100%;animation:gvp-sh 1.2s linear infinite}
@keyframes gvp-sh{from{background-position:200% 0}to{background-position:-200% 0}}
.gvp-spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:gvp-rot .7s linear infinite}
@keyframes gvp-rot{to{transform:rotate(360deg)}}
.gvp-art2{position:absolute;inset:0;background:radial-gradient(50% 70% at 75% 30%,hsl(var(--h) 90% 70% / .55),transparent 70%)}
/* interior room */
.gvp-room{appearance:none;width:100%;border:1.5px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:#fafaf8;border-radius:20px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-family:var(--body);transition:border-color .2s,background .2s}
.gvp-room:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.gvp-room b{font:600 15px/22px var(--body)}.gvp-room small{font:400 13px/18px var(--body);color:rgba(250,250,248,.6)}
.gvp-room.has{flex-direction:row;justify-content:flex-start;gap:14px;border-style:solid;border-color:rgba(255,255,255,.88);padding:12px;min-height:0;cursor:default;flex-wrap:wrap;text-align:left}
.gvp-room.has:hover{background:rgba(255,255,255,.04)}
.gvp-room.has>div{flex:1;min-width:120px;display:flex;flex-direction:column}
.gvp-roomthumb{width:72px;height:72px;border-radius:14px;flex:none;background:linear-gradient(180deg,hsl(var(--h) 40% 80%) 0 55%,hsl(var(--h) 30% 30%) 55%)}
.gvp-room.has .gvp-model{margin-left:auto}
/* voice picks */
.gvp-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gvp-pick{appearance:none;position:relative;display:flex;align-items:center;gap:10px;min-height:64px;padding:10px 12px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:rgba(250,250,248,.85);font:500 13px/18px var(--body);cursor:pointer;text-align:left;min-width:0}
.gvp-pick:hover{border-color:#fff}
.gvp-pick.has{border-style:solid;border-color:rgba(255,255,255,.3)}
.gvp-pick b{display:block;font:600 13px/18px var(--body);color:#fff}.gvp-pick small{display:block;font:400 12px/16px var(--body);color:rgba(250,250,248,.55)}
.gvp-art{width:36px;height:36px;border-radius:8px;flex:none;background:linear-gradient(135deg,#ff6a8a,#6a3dff)}
.gvp-pick .gvp-x{top:6px;right:6px}
/* bottom sheet */
.gvp-scrim{position:absolute;inset:0;background:rgba(3,5,8,.55);opacity:0;transition:opacity .25s;z-index:2}
.gvp-scrim.open{opacity:1}
.gvp-sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;background:#1b1c23;border-top:1px solid rgba(255,255,255,.14);border-radius:28px 28px 0 0;padding:10px 20px 22px;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 50px rgba(0,0,0,.45)}
.gvp-sheet.open{transform:none}
.gvp-grab{display:block;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.28);margin:0 auto 10px}
.gvp-shead{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.gvp-shead b{font:600 17px/24px var(--body);color:#fff}
.gvp-sclose{appearance:none;border:0;background:rgba(255,255,255,.08);color:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.gvp-sclose:hover{background:rgba(255,255,255,.18)}
.gvp-opts{display:flex;flex-direction:column;gap:6px}
.gvp-opt{appearance:none;display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:16px;border:1px solid transparent;background:rgba(255,255,255,.04);color:#fafaf8;cursor:pointer;font-family:var(--body);transition:background .2s,border-color .2s}
.gvp-opt:hover{background:rgba(255,255,255,.09)}
.gvp-opt.is-sel{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.1)}
.gvp-otxt{flex:1;min-width:0;display:flex;flex-direction:column}
.gvp-otxt b{font:600 15px/22px var(--body)}.gvp-otxt small{font:400 13px/18px var(--body);color:rgba(250,250,248,.6)}
.gvp-ocheck{color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.gvp-opt.is-sel .gvp-ocheck{opacity:1;transform:none}
/* detail side */
.gvp-detail{position:sticky;top:96px;padding:4px 0 0;min-width:0}
.gvp-eyebrow{margin:0 0 10px;font:600 12px/16px var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,248,.5)}
.gvp-detail h3{margin:0 0 6px;font:600 28px/34px var(--display,var(--body));letter-spacing:-.01em;color:#fff}
.gvp-tag{margin:0 0 12px;font:400 16px/24px var(--body);color:rgba(250,250,248,.78)}
.gvp-state{display:inline-block;margin:0 0 22px;padding:4px 10px;border-radius:999px;font:500 12px/16px var(--body);background:rgba(255,255,255,.08);color:rgba(250,250,248,.7)}
.gvp-state.on{background:rgba(183,121,255,.2);color:#e1c4ff}
.gvp-meters{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px}
.gvp-meters li{display:flex;align-items:center;justify-content:space-between;gap:16px;font:400 14px/20px var(--body);color:rgba(250,250,248,.82)}
.gvp-pips{display:flex;gap:4px}
.gvp-pips i{width:26px;height:6px;border-radius:3px;background:rgba(255,255,255,.12);transition:background .35s}
.gvp-pips i.on{background:linear-gradient(90deg,#ff6a8a,#b45cff)}
.gvp-lab{margin:0 0 8px;font:500 13px/18px var(--body);color:rgba(250,250,248,.55)}
.gvp-langs{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gvp-langs li{padding:4px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.16);font:600 12px/16px var(--body);letter-spacing:.04em;color:rgba(250,250,248,.85)}
.gvp-best{margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font:400 15px/24px var(--body);color:rgba(250,250,248,.7)}
.gvp-notes{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1120px;margin:56px auto 0;text-align:left}
@media(max-width:900px){.gvp{grid-template-columns:1fr;gap:28px}.gvp-detail{position:static}.gvp-notes{grid-template-columns:1fr;gap:24px;margin-top:40px}}
@media(max-width:520px){.gvp-body{padding:14px;border-radius:22px;min-height:360px}.gvp-prompt{padding:12px;border-radius:20px}.gvp-sheet{padding:10px 14px 18px}.gvp-pair{grid-template-columns:1fr}.gvp-create{padding:0 16px}.gvp-detail h3{font-size:24px;line-height:30px}}
@media(prefers-reduced-motion:reduce){.gvp *,.gvp-dot,.gvp-c.pulse{animation:none!important;transition:none!important}}

/* ===== Genva · sticky sub-navigation (Figma "SubNav Menu") ===== */
.gv-chapter-nav{position:sticky;top:80px;z-index:60;display:flex;align-items:stretch;justify-content:space-between;gap:0;overflow-x:auto;padding:0 max(24px,calc((100% - 1216px)/2));background:#e8e9eb;border:0;font:500 16px/24px var(--body);color:#111214;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gv-chapter-nav::-webkit-scrollbar{display:none}
.gv-chapter-nav a{flex:none;display:flex;align-items:center;padding:11.5px 16px;color:#111214;text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .25s,color .25s,background .25s}
.gv-chapter-nav a:first-child{padding-left:16px}
.gv-chapter-nav a:hover{background:rgba(17,18,20,.05)}
.gv-chapter-nav a.is-active{border-bottom-color:#111214}
.gv-chapter-nav a:focus-visible{outline:2px solid #111214;outline-offset:-3px}
.genva-case-page main>section[id]{scroll-margin-top:var(--gv-sub-off,128px)}
@media(max-width:800px){.gv-chapter-nav{justify-content:flex-start;padding:0 8px;font-size:14px}.gv-chapter-nav a{padding:11px 14px}}
.gv-chapter-nav a,.gv-chapter-nav a:hover,.gv-chapter-nav a:focus,.gv-chapter-nav a.is-active,.gv-chapter-nav a[aria-current]{text-decoration:none!important;background-image:none!important}
.gv-chapter-nav a::before,.gv-chapter-nav a::after{content:none!important}
.gv-chapter-nav a:hover:not(.is-active){border-bottom-color:rgba(17,18,20,.3)}

/* Genva hub: 3D logo modules from Figma "Starting Point" */
.gv-hub{position:relative;z-index:3}
.gv-hub-logo,.gv-hub-star{position:absolute;pointer-events:none;user-select:none;max-width:none;height:auto}
.gv-hub-logo{left:max(0px,calc((100% - 1440px)/2));bottom:-709px;width:431px;z-index:2}
.gv-hub-star{right:0;top:42px;width:252px;z-index:0}
.gv-hub .gv-dec-head,.gv-hub .gv-copy-columns{position:relative;z-index:1}
@media(max-width:1100px){.gv-hub-logo{width:300px;bottom:-494px;left:-40px}.gv-hub-star{width:170px;top:28px}}
@media(max-width:700px){.gv-hub{padding-bottom:150px}.gv-hub-logo{width:220px;bottom:-362px;left:-30px}.gv-hub-star{width:120px;top:16px;opacity:.8}}
.gv-hub{overflow:hidden}
/* Genva hub: desktop layout matches Figma "Starting Point" (1440 × 636) */
@media(min-width:1200px){
section#hub.gv-story.gv-hub{padding:96px 0!important;min-height:636px;box-sizing:border-box}
.gv-story.gv-hub .gv-dec-head{width:800px;max-width:none;min-height:224px;margin:0 auto;padding:0;text-align:left;display:block}
.gv-story.gv-hub .gv-dec-head h2{font:500 56px/64px var(--display,var(--body));letter-spacing:-.01em;margin:16px 0 24px}
.gv-story.gv-hub .gv-dec-head p:not(.gv-eyebrow),.gv-story.gv-hub .gv-copy-columns p{font:400 18px/28px var(--body);margin:0;max-width:none}
.gv-story.gv-hub .gv-copy-columns{width:800px;max-width:none;min-height:188px;margin:32px auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.gv-story.gv-hub .gv-copy-columns p:first-child{padding-top:14px}
.gv-hub-logo{left:calc(50% - 720px);bottom:-709px}
.gv-hub-star{right:0}
}

/* Genva hub v2: Figma update (line icon, 16px columns, 592px section) */
.gv-hub-star{width:206px;height:auto;top:71.5px}
.gv-editorial-note h3{font:600 20px/30px var(--body)}
.gv-editorial-note p{font:400 16px/24px var(--body)}
@media(min-width:1200px){
section#hub.gv-story.gv-hub{min-height:592px}
.gv-story.gv-hub .gv-copy-columns{min-height:144px;align-items:start}
.gv-story.gv-hub .gv-copy-columns p,.gv-story.gv-hub .gv-copy-columns p:first-child{font:400 16px/24px var(--body);padding-top:0;margin-top:24px}
.gv-hub-logo{bottom:-714px}
.gv-hub-star{top:71.5px;width:206px}
}
@media(max-width:1100px){.gv-hub-star{width:140px;top:40px}}
@media(max-width:700px){.gv-hub-star{width:100px;top:24px;opacity:1}}
/* Sub-navigation: frosted glass once it sticks under the header */
.gv-chapter-nav{transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.gv-chapter-nav.is-stuck{background:rgba(250,250,248,.62);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 1px 0 rgba(17,18,20,.08),0 8px 24px rgba(17,18,20,.06)}

/* Genva hub: decorations stay locked to the 1440 design frame (centred), so proportions hold on wide screens */
@media(min-width:1200px){
.gv-hub-star{right:auto;left:calc(50% + 514px);width:260px;top:71.5px}
.gv-hub-logo{left:max(-40px,calc(50% - 720px))}
}
@media(max-width:1199px){.gv-hub-star{right:-60px;width:180px}}
@media(max-width:700px){.gv-hub-star{right:-50px;width:130px}}

/* Genva hub: animated logo construction (guides → circles → anchor points → outline), loops */
.gv-hub-star{display:none!important}
.gv-mark{position:absolute;pointer-events:none;z-index:0;overflow:visible;left:calc(50% + 474px);top:31.5px;width:313px;height:313px;animation:gm-all 10s linear infinite}
.gv-mark .gm-d{stroke-dasharray:1;stroke-dashoffset:1}
.gm-guides{opacity:.3;animation:gm-guides 10s linear infinite}
.gm-g1{animation:gm-a 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-g2{animation:gm-b 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-g4{animation:gm-b2 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-g5{animation:gm-a2 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-g3{animation:gm-c 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-cons{opacity:.26;animation:gm-cons 10s linear infinite}
.gm-c1{animation:gm-d1 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-c2{animation:gm-d2 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-c3,.gm-c4{animation:gm-d3 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-dots circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:gm-dot 10s ease-out infinite}
.gm-dots circle:nth-child(2){animation-delay:.12s}.gm-dots circle:nth-child(3){animation-delay:.24s}.gm-dots circle:nth-child(4){animation-delay:.36s}.gm-dots circle:nth-child(5){animation-delay:.48s}.gm-dots circle:nth-child(6){animation-delay:.6s}
.gm-form{stroke-opacity:.5}
.gm-form path{fill:#111214;fill-opacity:0}
.gm-p2{animation:gm-p2 10s cubic-bezier(.65,0,.35,1) infinite}
.gm-p1{animation:gm-p1 10s cubic-bezier(.65,0,.35,1) infinite}
@keyframes gm-all{0%,86%{opacity:1}95%,100%{opacity:0}}
@keyframes gm-a{0%,2%{stroke-dashoffset:1}12%,100%{stroke-dashoffset:0}}
@keyframes gm-b{0%,5%{stroke-dashoffset:1}15%,100%{stroke-dashoffset:0}}
@keyframes gm-b2{0%,10%{stroke-dashoffset:1}20%,100%{stroke-dashoffset:0}}
@keyframes gm-a2{0%,13%{stroke-dashoffset:1}23%,100%{stroke-dashoffset:0}}
@keyframes gm-c{0%,8%{stroke-dashoffset:1}20%,100%{stroke-dashoffset:0}}
@keyframes gm-guides{0%,60%{opacity:.3}70%,100%{opacity:0}}
@keyframes gm-cons{0%,62%{opacity:.26}72%,100%{opacity:0}}
@keyframes gm-d1{0%,14%{stroke-dashoffset:1}30%,100%{stroke-dashoffset:0}}
@keyframes gm-d2{0%,18%{stroke-dashoffset:1}32%,100%{stroke-dashoffset:0}}
@keyframes gm-d3{0%,22%{stroke-dashoffset:1}34%,100%{stroke-dashoffset:0}}
@keyframes gm-dot{0%,36%{opacity:0;transform:scale(0)}42%{opacity:.9;transform:scale(1.6)}46%{opacity:.8;transform:scale(1)}62%{opacity:.8}70%,100%{opacity:0;transform:scale(1)}}
@keyframes gm-p2{0%,36%{stroke-dashoffset:1;stroke-opacity:.5;fill-opacity:0}58%{stroke-dashoffset:0;stroke-opacity:.5;fill-opacity:0}72%,100%{stroke-dashoffset:0;stroke-opacity:.9;fill-opacity:.9}}
@keyframes gm-p1{0%,50%{stroke-dashoffset:1;stroke-opacity:.5;fill-opacity:0}64%{stroke-dashoffset:0;stroke-opacity:.5;fill-opacity:0}74%,100%{stroke-dashoffset:0;stroke-opacity:.9;fill-opacity:.9}}
@media(max-width:1199px){.gv-mark{left:auto;right:-120px;top:20px;width:208px;height:208px}}
@media(max-width:700px){.gv-mark{right:-110px;top:12px;width:170px;height:170px}}
@media(prefers-reduced-motion:reduce){.gv-mark,.gv-mark *{animation:none!important}.gm-form path{fill-opacity:.9}.gv-mark .gm-d{stroke-dashoffset:0}.gm-cons,.gm-dots{opacity:0}.gm-guides{opacity:0}}

/* Genva hub: decorations drift toward the viewport corners on wide screens + logo hover interaction */
@media(min-width:1200px){
.gv-hub-logo{left:max(-40px,calc(50% - 720px - max(0px,100vw - 1440px)*.3))!important}
.gv-mark{left:calc(50% + 474px + max(0px,100vw - 1440px)*.3)}
.gv-hub-logo{pointer-events:auto;cursor:pointer;transform-origin:50% 100%;transform:perspective(900px) translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.gv-hub-logo:hover{transform:perspective(900px) translateY(-44px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.03);filter:saturate(1.15) brightness(1.05)}
}
@media(prefers-reduced-motion:reduce){.gv-hub-logo{transition:none;transform:none!important}}

/* Genva hub: layered app icon (tile + star) so the star can spin on hover */
.gv-hub-logo{aspect-ratio:431/871;height:auto}
.gv-hub-logo>img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;pointer-events:none;user-select:none}
.gv-hub-glyph{transform-origin:43% 15%}
@keyframes gv-glyph-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(min-width:1200px) and (prefers-reduced-motion:no-preference){
.gv-hub-logo:hover .gv-hub-glyph{animation:gv-glyph-spin .9s cubic-bezier(.45,.05,.2,1) both}
}
/* right icon: same distance from the edge as the left icon on wide screens */
@media(min-width:1200px){
.gv-mark{left:calc(50% + 474px + max(0px,100vw - 1440px)*.3 - min(54px,max(0px,100vw - 1440px)*.1125))}
}

/* Genva Discovery & Navigation — Figma 298:1505 + looping slider */
section#starting.gv-disc{padding:96px max(24px,calc((100% - 1216px)/2))!important}
.gv-disc-head{width:100%;max-width:800px;margin:0 auto 32px;position:relative;left:0}
.gv-disc-head h2{font:500 56px/64px var(--display,var(--body));letter-spacing:-.01em;margin:24px 0 32px;text-wrap:balance}
.gv-disc-head p:not(.gv-eyebrow){font:400 18px/28px var(--body);margin:0;color:#1d1e21}
.gv-disc-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding:24px 0 0;margin:0 auto}
.gv-disc-col{min-width:0}
.gv-disc-frame{position:relative;aspect-ratio:576/592;overflow:hidden;container-type:inline-size;background:linear-gradient(180deg,#270027 0%,#270027 14%,#2a0029 26%,#410433 42%,#690846 59%,#ac1267 76%,#d4187a 93%,#e11b81 100%)}
.gv-disc-frame>img,.gv-slide>img:first-child:not(.gv-slide-screen img){display:block;width:100%;height:100%;object-fit:cover}
.gv-disc-txt{padding-top:16px}
.gv-disc-txt h3{font:500 20px/30px var(--body);margin:0 0 12px;color:#111214}
.gv-disc-txt p{font:400 16px/24px var(--body);margin:0;color:#2b2c30}
.gv-slides{position:absolute;inset:0}
.gv-slide{position:absolute;inset:0;opacity:0;transform:translateX(5%);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.gv-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.gv-slide.is-leaving{opacity:0;transform:translateX(-5%)}
.gv-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gv-slide-screen>img{left:16.15%;top:-48.3%;width:67.7%;height:auto;inset:auto;left:16.15%;top:-48.3%;border-radius:0 0 7.3cqw 7.3cqw;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px rgba(0,0,0,.35);object-fit:initial}
.gv-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:3}
.gv-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.4);cursor:pointer;transition:background .3s,width .3s;position:relative}
.gv-dots button::after{content:"";position:absolute;inset:-8px}
.gv-dots button[aria-current="true"]{background:#fff;width:22px;border-radius:4px}
.gv-dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:900px){section#starting.gv-disc{padding:56px 24px!important}.gv-disc-head h2{font-size:40px;line-height:48px}.gv-disc-grid{grid-template-columns:1fr;gap:48px}}
@media(prefers-reduced-motion:reduce){.gv-slide{transition:opacity .2s;transform:none!important}}

.gv-disc-txt h3{letter-spacing:0!important}
.gv-disc-frame.gv-disc-placeholder{background:#ffbbe6}

.gv-disc-video{display:block;width:100%;height:100%;object-fit:cover}

/* SubNav per Figma 295:1435: #fafaf8, 1px hairline, 64px items, 7 tabs */
.gv-chapter-nav{background:#fafaf8;border-top:1px solid rgba(0,0,0,.08)!important;border-bottom:1px solid rgba(0,0,0,.08)!important;align-items:stretch}
.gv-chapter-nav a{padding:19.25px 16px;min-height:64px;box-sizing:border-box}
@media(max-width:800px){.gv-chapter-nav a{padding:15px 14px;min-height:52px}}

/* SubNav shrinks to 48px item height when stuck; layout box stays 66px so content does not jump */
.gv-chapter-nav{--sn-item:64px;transition:background .3s,box-shadow .3s,backdrop-filter .3s,margin-bottom .3s ease}
.gv-chapter-nav a{min-height:var(--sn-item);padding-block:calc((var(--sn-item) - 25.5px)/2);transition:border-color .25s,color .25s,background .25s,min-height .3s ease,padding .3s ease}
.gv-chapter-nav.is-stuck{--sn-item:48px;margin-bottom:16px;border-top-color:transparent!important;border-bottom-color:transparent!important}
@media(max-width:800px){.gv-chapter-nav{--sn-item:52px}.gv-chapter-nav a{padding-inline:14px}.gv-chapter-nav.is-stuck{--sn-item:44px;margin-bottom:8px}}

/* Discovery: templates collage + onboarding row (Figma 298:1505) */
.gv-disc-frame.gv-disc-dark{background:#0f1114}
.gv-disc-frame.gv-disc-dark>img{display:block;width:100%;height:100%;object-fit:cover}
.gv-disc-row2{margin-top:64px}
.gv-disc-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.gv-disc-shots img{display:block;width:100%;height:auto;aspect-ratio:284.33/616.27;object-fit:cover;background:#111}
.gv-disc-row2 .gv-disc-txt{padding-top:24px}
@media(max-width:900px){.gv-disc-row2{margin-top:48px}.gv-disc-shots{grid-template-columns:repeat(2,1fr);gap:16px}}
.gv-disc-head h2{max-width:620px}
.gv-disc-txt{padding-top:24px}
@media(max-width:900px){.gv-disc-head h2{max-width:none}}
.gv-disc-row2 .gv-disc-txt{padding-bottom:24px}
/* Genva onboarding phones: video + Figma overlay (node 318:4235) */
.gv-onb{position:relative;container-type:inline-size;aspect-ratio:284.33/616.27;background:#000;overflow:hidden;color:#fff;font-family:'Google Sans',var(--body),sans-serif}
.gv-onb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gv-onb-ui{--p:calc(100cqw/284.33);position:absolute;inset:0;pointer-events:none}
.gv-onb-ui::before{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg,rgb(0,0,0) 4.2382%,rgba(0,0,0,.992) 1.6272%,rgba(0,0,0,.968) 6.4103%,rgba(0,0,0,.931) 10.279%,rgba(0,0,0,.881) 13.401%,rgba(0,0,0,.821) 15.944%,rgba(0,0,0,.752) 18.076%,rgba(0,0,0,.676) 19.965%,rgba(0,0,0,.594) 21.778%,rgba(0,0,0,.509) 23.684%,rgba(0,0,0,.42) 25.85%,rgba(0,0,0,.331) 28.444%,rgba(0,0,0,.243) 31.635%,rgba(0,0,0,.158) 35.589%,rgba(0,0,0,.076) 40.474%,rgba(0,0,0,0) 46.459%),linear-gradient(180deg,rgb(0,0,0) 0,rgba(0,0,0,.931) .99%,rgba(0,0,0,.881) 1.8309%,rgba(0,0,0,.821) 4.1291%,rgba(0,0,0,.752) 6.0558%,rgba(0,0,0,.676) 7.7627%,rgba(0,0,0,.594) 9.4015%,rgba(0,0,0,.509) 11.124%,rgba(0,0,0,.42) 13.081%,rgba(0,0,0,.331) 15.426%,rgba(0,0,0,.243) 18.309%,rgba(0,0,0,.158) 21.882%,rgba(0,0,0,.076) 26.297%,rgba(0,0,0,0) 31.706%)}
.gv-onb-ui>*{position:absolute}
.gv-onb-nav{left:0;top:0;width:calc(284.33*var(--p));height:auto;display:block}
.gv-onb-isl{left:calc(91.58*var(--p));top:calc(9.04*var(--p));width:calc(82.65*var(--p));height:calc(24.47*var(--p));border-radius:99px;background:#000}
.gv-onb-h{left:calc(15.87*var(--p));width:calc(252.59*var(--p));top:calc(var(--t)*var(--p));margin:0;text-align:center;font-size:calc(21.159*var(--p));line-height:calc(25.127*var(--p));font-weight:500;color:#fff;text-shadow:0 calc(.661*var(--p)) calc(1.322*var(--p)) rgba(0,0,0,.24)}
.gv-onb-btn{left:calc(15.87*var(--p));top:calc(532.95*var(--p));width:calc(252.59*var(--p));height:calc(42.48*var(--p));box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:calc(.661*var(--p)) solid rgba(255,255,255,.04);border-radius:99px;background:#fff;color:#090d18;font-size:calc(13.22*var(--p));line-height:1;font-weight:500}
.gv-onb-dots{left:calc(var(--l)*var(--p));top:calc(585.85*var(--p));width:calc(var(--w)*var(--p));height:calc(5.29*var(--p))}
.gv-onb-dots i{position:absolute;left:calc(var(--x)*var(--p));top:calc(var(--y)*var(--p));width:calc(var(--s)*var(--p));height:calc(var(--s)*var(--p));border-radius:50%;background:rgba(255,255,255,.3)}
.gv-onb-dots i.on{background:#fff}
.gv-onb-bar{left:calc(50% + .33*var(--p));bottom:calc(6.61*var(--p));width:calc(88.605*var(--p));height:calc(2.645*var(--p));transform:translateX(-50%);border-radius:99px;background:#fff}
.gv-disc-shots .gv-onb .gv-onb-nav{width:100%;height:auto;aspect-ratio:auto;object-fit:fill;background:none}
.gv-onb{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1);will-change:transform}
@media(hover:hover){.gv-onb:hover{transform:scale(1.1);z-index:2;box-shadow:0 24px 60px rgba(0,0,0,.28)}}
@media(prefers-reduced-motion:reduce){.gv-onb{transition:none}.gv-onb:hover{transform:none}}

section#models.gv-disc{padding:96px max(24px,calc((100% - 1216px)/2))!important}
.gv-models-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-top:24px;align-items:start}
.gv-models-frame{aspect-ratio:576/432}
.gv-models-txt{display:flex;flex-direction:column;gap:40px;padding-top:46px;min-width:0}
.gv-models-txt h3{font:500 20px/30px var(--body);letter-spacing:0;margin:0 0 12px;color:#111214}
.gv-models-txt p{font:400 16px/24px var(--body);margin:0;color:#2b2c30}
@media(max-width:900px){section#models.gv-disc{padding:56px 24px!important}.gv-models-row{grid-template-columns:1fr;gap:32px}.gv-models-txt{padding-top:0}}

section#models.gv-models{background:#000 url(/assets/figma/genva-page/models-bg.svg) center/100% 100% no-repeat;color:#fafaf8}
.gv-models .gv-disc-head h2{color:#fafaf8}
.gv-models .gv-disc-head p:not(.gv-eyebrow){color:#fafaf8}
.gv-models .gv-eyebrow{color:rgba(250,250,248,.6)}
.gv-models .gv-models-txt h3{color:#fafaf8}
.gv-models .gv-models-txt p{color:rgba(250,250,248,.72)}

/* Models v2 — Figma full-bleed composition */
section#models.gv-models{background:#000 url(/assets/figma/genva-page/models-bg-v1.webp) center top/1440px auto no-repeat;overflow:hidden}
.gv-models-row{padding-top:0;margin-top:0}
.gv-models-frame{aspect-ratio:576/432;position:relative}
.gv-models-frame img{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;display:block}
.gv-models-txt{gap:64px;padding-top:32px}
.gv-models-txt>div{min-height:114px;display:flex;flex-direction:column;justify-content:center}
.gv-models-txt h3{margin:0 0 12px}
@media(max-width:900px){
section#models.gv-models{background:#000 radial-gradient(120% 60% at 0% 100%,#8a0a58 0%,#2a0020 45%,#000 80%)}
.gv-models-frame{aspect-ratio:900/668;margin:0 -24px}
.gv-models-frame img{opacity:1;position:static;object-fit:cover}
.gv-models-txt>div{min-height:0}
.gv-models-txt{gap:32px}
.gv-models-row{display:flex;flex-direction:column;gap:32px}
}
.gv-models .gv-disc-head{margin-bottom:64px}
@media(max-width:900px){.gv-models .gv-disc-head{margin-bottom:32px}}

/* Models v3 — responsive glow background + separate hand/phone image */
section#models.gv-models{background:#000 url(/assets/figma/genva-page/models-glow-v1.webp) center/100% 100% no-repeat;position:relative}
.gv-models-frame{overflow:visible}
.gv-models-frame img{opacity:1;left:-56px;top:-144px;inset:auto;width:900px;height:760px;max-width:none;position:absolute;pointer-events:none}
.gv-models .gv-disc-head,.gv-models-txt{position:relative;z-index:1}
@media(max-width:900px){
section#models.gv-models{background:#000 url(/assets/figma/genva-page/models-glow-v1.webp) center/cover no-repeat}
.gv-models-frame{aspect-ratio:900/760;margin:0 -24px 0 -24px}
.gv-models-frame img{position:static;width:100%;height:auto;max-width:100%}
}
@media(max-width:900px){.gv-models-frame{margin-bottom:-24px}.gv-models-frame img{-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 96%);mask-image:linear-gradient(180deg,#000 80%,transparent 96%)}}
/* Models v4 — hand scales with its column so it never gets clipped at mid widths */
@media(min-width:901px){
.gv-models-frame{container-type:inline-size}
.gv-models-frame img{left:-9.72cqw;top:-25cqw;width:156.25cqw;height:131.94cqw}
section#models.gv-models{padding-bottom:max(48px,calc(100cqw*0 + 96px))!important}
}

/* Creation & Flows */
section#workflows.gv-flows{padding:96px max(24px,calc((100% - 1216px)/2))!important}
.gv-flows .gv-disc-head{margin-bottom:64px}
.gv-flows-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:96px;max-width:1216px;margin:0 auto}
.gv-flows-card img{display:block;width:100%;height:auto;aspect-ratio:1152/624}
.gv-flows-txt{padding:0 16px;display:flex;flex-direction:column;gap:8px}
.gv-flows-txt h3{font:700 24px/32px var(--body);margin:0}
.gv-flows-txt p{font:400 18px/28px var(--body);margin:0;color:#1d1e21}
@media(max-width:900px){section#workflows.gv-flows{padding:56px 24px!important}.gv-flows .gv-disc-head{margin-bottom:40px}.gv-flows-grid{grid-template-columns:1fr;row-gap:48px}}
/* During & after generation */
section#creation.gv-during{--u:min(.069444vw,1px);position:relative;overflow:hidden;background:#000 url(/assets/figma/genva-page/during-bg-v1.webp) center/100% 100% no-repeat;min-height:calc(var(--u)*1154);padding:96px max(24px,calc((100% - 800px)/2)) 0!important}
.gv-during .gv-disc-head{margin:0;position:relative;z-index:1}
.gv-during .gv-eyebrow{color:#a0a2a8}
.gv-during .gv-disc-head h2,.gv-during .gv-disc-head p:not(.gv-eyebrow){color:#fafaf8}
.gv-during-photo{position:absolute;right:0;top:calc(var(--u)*220.7);width:calc(var(--u)*914);height:calc(var(--u)*1044)}
.gv-during-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;pointer-events:none}
.gv-during-status{position:absolute;left:calc(var(--u)*-282);top:calc(var(--u)*248);width:calc(var(--u)*382);min-width:300px;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.gv-during-spark{position:relative;display:block;width:calc(var(--u)*200);height:calc(var(--u)*200);min-width:140px;min-height:140px}
.gv-during-spark picture{display:contents}.gv-during-spark img{position:relative;display:block;width:100%;height:100%;max-width:none}.gv-during-spark img.gv-during-glow{position:absolute;inset:-15%;width:130%;height:130%;filter:blur(30px) saturate(1.7);opacity:.62;pointer-events:none}
.gv-during-copy{display:flex;flex-direction:column;gap:8px;width:100%}
.gv-during-copy h3{font:500 24px/30px var(--body);color:#fff;margin:0}
.gv-during-copy p{font:400 16px/24px var(--body);color:#c8cdd8;margin:0}
.gv-during-copy .w{display:inline-block;will-change:transform,opacity,filter}
.gv-during-copy.is-split .w{opacity:0;transform:translateY(10px);filter:blur(6px)}
.gv-during-copy.is-split.is-in .w{opacity:1;transform:none;filter:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1) calc(var(--d)*1s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--d)*1s),filter .6s ease calc(var(--d)*1s)}
.gv-during-copy.is-split.is-out .w{opacity:0;transform:translateY(-10px);filter:blur(6px);transition:opacity .5s ease calc(var(--o)*1s),transform .5s ease calc(var(--o)*1s),filter .5s ease calc(var(--o)*1s)}
.gv-during-copy.is-split.is-reset .w{transition:none!important}
@media(prefers-reduced-motion:reduce){.gv-during-copy.is-split .w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}
.gv-during-note{position:absolute;top:calc(var(--u)*944);left:max(24px,calc((100% - 800px)/2));width:592px;max-width:calc(100% - 48px);z-index:3}
.gv-during-note h3{font:500 20px/30px var(--body);color:#fafaf8;margin:0 0 12px}
.gv-during-note p{font:400 16px/24px var(--body);color:rgba(255,255,255,.72);margin:0}
@media(max-width:900px){section#creation.gv-during{padding:56px 24px 0!important;min-height:0;display:flex;flex-direction:column;gap:32px}.gv-during-photo{position:relative;right:auto;top:auto;width:100%;height:auto;display:flex;flex-direction:column}.gv-during-status{position:static;order:-1;width:100%;min-width:0;margin-bottom:24px}.gv-during-spark{width:200px;height:200px}.gv-during-img{position:relative;inset:auto;width:100%;max-width:520px;height:auto;aspect-ratio:914/1044;margin:0 auto;-webkit-mask-image:linear-gradient(180deg,#000 80%,transparent 96%),linear-gradient(270deg,transparent,#000 14%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 80%,transparent 96%),linear-gradient(270deg,transparent,#000 14%);mask-composite:intersect}.gv-during-note{position:static;width:auto;max-width:none;padding-bottom:56px}}

/* Footer 2026-10-19: sitemap columns + full-width wordmark */
.fig-contact-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin:88px 0 0 128px;padding-top:40px;border-top:1px solid #ffffff14;position:relative;z-index:1}
.fig-contact-nav h3,.fig-contact-nav .fig-contact-nav-title{font:400 14px/20px var(--body);color:#a0a2a8;margin:0 0 16px;letter-spacing:0}
.fig-contact-nav a{display:block;width:fit-content;font:500 16px/24px var(--body);color:#fafaf8;text-decoration:none;padding:4px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s cubic-bezier(.22,1,.36,1),opacity .2s}
.fig-contact-nav a:is(:hover,:focus-visible){background-size:100% 1px}
.fig-contact .fig-contact-mark{display:block;width:100%;max-width:100%;height:auto;margin-top:96px;position:relative;z-index:1}
.fig-contact-mark.scroll-reveal{translate:0 64px;transition-duration:1s,1.4s}
.fig-contact-bottom{margin-top:24px}
@media(max-width:1000px){.fig-contact-nav{margin-left:128px}}
@media(max-width:800px){.fig-contact-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin:56px 0 0;padding-top:32px}.fig-contact-nav>div:nth-child(2){grid-row:span 2}.fig-contact-mark{margin-top:64px}}
.fig-contact-mark.scroll-reveal-visible{translate:0 0}

/* Featured works: pinned calm stack (desktop, motion allowed) — see works-stack.js */
.fig-stack{position:relative;height:calc(var(--stack-n,5)*100vh)}
.fig-stack-sticky{position:sticky;top:0;height:100vh;overflow:hidden;--stack-w:min(1216px,calc(100vw - 96px),calc((100vh - 380px)*1.7727))}
.fig-projects.is-stack{display:block;position:relative;height:100%;gap:0}
.fig-projects.is-stack>.fig-project{position:absolute;inset:0;width:100%;align-self:auto;display:flex;align-items:center;justify-content:center;padding:64px 0 36px;box-sizing:border-box;will-change:opacity,translate,scale}
.fig-projects.is-stack .fig-project-link{display:block;width:var(--stack-w)}
.fig-projects.is-stack .fig-project-info{margin-top:24px;max-width:none}
.fig-projects.is-stack .works-motion-layer{transform:scale(calc(1 + var(--works-hover,0)))}
.fig-stack-ui{position:absolute;left:calc((100vw - var(--stack-w))/2);bottom:28px;display:flex;align-items:center;gap:16px;font:500 14px/20px var(--body);color:#111214;z-index:2;pointer-events:none}
.fig-stack-count b{font-weight:600}
.fig-stack-bar{display:block;width:96px;height:1px;background:#11121426;position:relative;overflow:hidden}
.fig-stack-bar i{position:absolute;inset:0;background:#111214;transform-origin:0 50%;transform:scaleX(0)}

/* Home hero: case cards on a tilted 3D orbit (Anubi-style; desktop, motion allowed) — see hero-cards.js */
.fig-hero{position:relative;overflow:clip}
.fig-hero-content{position:relative;z-index:2}
.hero-cards{position:absolute;inset:0;z-index:1;pointer-events:none}
.fig-hero.is-dragging,.fig-hero.is-dragging *{cursor:grabbing!important;user-select:none}
.hero-card{--card-depth:.5;--inspect-scale:1.085;position:absolute;left:0;top:0;display:block;aspect-ratio:16/9;width:156px;pointer-events:auto;text-decoration:none;color:#fafaf8;will-change:transform,opacity;-webkit-user-drag:none}
.hero-card-inner{--tilt-x:0deg;--tilt-y:0deg;--image-x:0px;--image-y:0px;--light-x:0%;display:block;width:100%;height:100%;position:relative;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.hero-card-surface{display:block;width:100%;height:100%;position:relative;transform:perspective(850px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));transition:transform .4s cubic-bezier(.16,1,.3,1)}
.hero-card-img{position:absolute;inset:0;display:block;overflow:hidden;border-radius:6px;background:#1b1c20;box-shadow:0 0 0 1px #ffffff14,0 calc(9px + var(--card-depth)*15px) calc(18px + var(--card-depth)*24px) -12px rgb(0 0 0/calc(.45 + var(--card-depth)*.35));transition:box-shadow .4s}
.hero-card-img::before{content:"";position:absolute;inset:-50%;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgb(255 255 255/.22) 49%,transparent 65%);opacity:0;transform:translateX(var(--light-x));transition:opacity .3s}
.hero-card-img::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff12}
.hero-card-img img{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;translate:var(--image-x) var(--image-y);transition:transform .65s cubic-bezier(.16,1,.3,1),translate .3s ease-out}
.hero-card-label{position:absolute;left:0;right:0;top:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 1px 0;font:500 12px/1.25 var(--body);white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .3s cubic-bezier(.16,1,.3,1)}
.hero-card-label b{font-weight:500}.hero-card-label i{font-style:normal;font-size:16px;line-height:.8;color:#a0a2a8}
.hero-card:is(.is-active,:focus-visible) .hero-card-inner{transform:translateY(-8px) scale(var(--inspect-scale))}
.hero-card:is(.is-active,:focus-visible) .hero-card-img{box-shadow:0 0 0 1px #ffffff2e,4px 28px 40px -16px #000}
.hero-card:is(.is-active,:focus-visible) .hero-card-img::before{opacity:1}
.hero-card:is(.is-active,:focus-visible) .hero-card-img img{transform:scale(1.07)}
.hero-card:is(.is-active,:focus-visible) .hero-card-label{opacity:1;transform:none}
.hero-card:active .hero-card-inner{transform:translateY(-4px) scale(calc(var(--inspect-scale)*.97))}
.hero-card:focus-visible{outline:none}.hero-card:focus-visible .hero-card-img{outline:2px solid #fafaf8;outline-offset:5px}
.hero-ink{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;fill:none;stroke:#fafaf8;stroke-linecap:round}

/* Home hero v2 (2026-10-19): name + portrait in the centre, Anubi-style footer row, orbit cards over it */
.home-page .fig-hero{height:max(720px,100svh);padding:0 24px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.home-page .fig-hero .hero-cards{z-index:3}
.fig-hero-title.hero-name{display:flex!important}
.hero-name .fig-title-line{gap:28px}
.hero-foot{position:absolute;left:clamp(24px,3.2vw,64px);right:clamp(24px,3.2vw,64px);bottom:32px;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero-statement{margin:0;font:500 clamp(22px,2vw,30px)/1.06 var(--display);letter-spacing:-.03em;color:#fafaf8}
.hero-statement span{color:#8b8d93}
.hero-discover{display:inline-flex;align-items:center;gap:32px;min-height:48px;border-bottom:1px solid #fafaf8;color:#fafaf8;font:500 16px/1 var(--body);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.hero-discover-arrow{font-size:26px;line-height:1;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.hero-discover:hover .hero-discover-arrow{transform:translateY(3px)}
.home-page .fig-reel{transform:none}
.home-page .fig-reel-stage{height:auto;padding-top:96px;padding-bottom:96px}
.hero-card-img,.hero-card-img::after{border-radius:0}
.hero-card-img{box-shadow:0 0 0 1px #ffffff10,0 calc(10px + var(--card-depth)*14px) calc(20px + var(--card-depth)*22px) -8px rgb(0 0 0/calc(.5 + var(--card-depth)*.3))}
.hero-card:is(.is-active,:focus-visible) .hero-card-img{box-shadow:0 0 0 1px #ffffff26,0 26px 44px -12px #000}
@media(max-width:800px){
 .home-page .fig-hero{height:max(600px,86svh);padding:0 20px}
 .fig-hero-title.hero-name{font-size:12.5vw}
 .hero-name .fig-title-line{gap:12px}
 .hero-foot{left:20px;right:20px;bottom:24px}
 .hero-statement{font-size:20px}
 .hero-discover{font-size:14px;gap:16px;min-height:44px}
 .hero-discover-arrow{font-size:22px}
 .home-page .fig-reel-stage{padding-top:48px;padding-bottom:48px}
}

/* Featured works: Anubi-style spatial reel (desktop, motion allowed) — see works-reel.js */
.fig-work.has-reel3d{padding:0}
.fig-reel3d{position:relative}
.fig-reel3d-sticky{position:sticky;top:0;height:100vh;min-height:560px;overflow:clip;isolation:isolate;--reel-w:880px;--reel-gutter:clamp(24px,3.2vw,64px)}
.fig-reel3d-world{position:absolute;inset:0;perspective-origin:50% 46%;z-index:2}
.fig-projects.is-reel3d{position:absolute;inset:0;display:block;gap:0;transform-style:preserve-3d;margin:0}
.fig-projects.is-reel3d>.fig-project{position:absolute;left:50%;top:46%;width:var(--reel-w);margin:0;padding:0;transform-style:preserve-3d;will-change:transform,opacity;align-self:auto}
.fig-projects.is-reel3d .fig-project-link{display:block;width:100%}
.fig-projects.is-reel3d .fig-project-cover{box-shadow:0 30px 60px -30px #11121466}
.fig-projects.is-reel3d .fig-project-info{position:absolute;left:0;right:0;top:100%;margin:20px 0 0;max-width:none;min-height:0;gap:16px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1)}
.fig-projects.is-reel3d .is-current .fig-project-info{opacity:1;transform:none}
.fig-projects.is-reel3d .fig-app-icon{width:88px;height:88px;flex:0 0 88px}
.fig-projects.is-reel3d .fig-app-icon>*{transform:scale(.733333);transform-origin:top left}
.fig-projects.is-reel3d .fig-project-title h3{font-size:32px;line-height:36px}
.fig-projects.is-reel3d .fig-project-title p{font-size:12px;line-height:16px}
.fig-projects.is-reel3d .works-motion-layer{transform:scale(calc(1 + var(--works-hover,0)))}
.fig-work-title.is-reel-head{position:absolute;left:var(--reel-gutter);right:var(--reel-gutter);top:clamp(88px,11vh,120px);z-index:5;margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:24px;pointer-events:none}
.fig-work-title.is-reel-head h2{font-size:clamp(22px,2.15vw,34px);line-height:1.1;margin:0}
.fig-work-title.is-reel-head p{margin:0;font-size:14px;line-height:20px;color:#5c5e66}
.fig-reel3d-word{position:absolute;left:6%;right:6%;top:15%;z-index:1;display:flex;align-items:baseline;font:500 min(11vh,calc(110vw / var(--chars,8))) /1 var(--display);text-transform:uppercase;white-space:nowrap;color:#111214;pointer-events:none}
.fig-reel3d-word span{flex:1 1 0;min-width:0;text-align:center;opacity:.07}
.fig-reel3d-word span.sp{flex:.45 1 0}
.fig-reel3d-word.is-in span{animation:reel-letter .7s cubic-bezier(.16,1,.3,1) both}
.fig-reel3d-word.is-in span:nth-child(2n){animation-delay:.04s}.fig-reel3d-word.is-in span:nth-child(3n){animation-delay:.08s}
@keyframes reel-letter{from{opacity:0;transform:translateY(24%)}to{opacity:.07;transform:none}}
.fig-reel3d-ui{position:absolute;left:var(--reel-gutter);right:var(--reel-gutter);bottom:clamp(24px,4.5vh,44px);z-index:5;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:20px;color:#111214;font:500 13px/18px var(--body)}
.fig-reel3d-count{display:flex;align-items:baseline;gap:10px}
.fig-reel3d-count b{font-size:25px;line-height:1;font-weight:500;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fig-reel3d-count i{font-style:normal;color:#6b6d74;font-size:12px}
.fig-reel3d-bar{display:block;width:clamp(60px,10vw,164px);height:2px;background:#11121422;position:relative;overflow:hidden;border-radius:2px}
.fig-reel3d-bar i{position:absolute;inset:0;background:#111214;transform-origin:0 50%;transform:scaleX(0)}
.fig-reel3d-hint{justify-self:center;color:#6b6d74;letter-spacing:.06em;text-transform:uppercase;font-size:11px;display:flex;align-items:center;gap:14px}
.fig-reel3d-hint em,.fig-reel3d-all em{font-style:normal;color:#111214;font-size:22px;line-height:1}
.fig-reel3d-all{pointer-events:auto;color:#111214;text-decoration:none;display:flex;align-items:center;gap:12px}
.fig-reel3d-all:hover{text-decoration:underline;text-underline-offset:5px}

/* Hero v3: slogan in two lines ("Ideas [portrait] / into products.") — tighter ring hugs it */
.hero-slogan{gap:4px}
.hero-slogan .fig-title-line{gap:24px}
@media(max-width:800px){.fig-title-line,.hero-slogan .fig-title-line{gap:12px}.fig-hero-title.hero-slogan{font-size:12vw}}

/* Featured works reel on dark: focus on the work */
.fig-work.has-reel3d,.fig-work.has-reel3d .fig-reel3d-sticky{background:#111214;color:#fafaf8}
.fig-work.has-reel3d .fig-work-title p{color:#9a9ca3}
.fig-work.has-reel3d .fig-reel3d-word{color:#fafaf8}
.fig-work.has-reel3d .fig-reel3d-word span{opacity:.06}
@keyframes reel-letter-d{from{opacity:0;transform:translateY(24%)}to{opacity:.06;transform:none}}
.fig-work.has-reel3d .fig-reel3d-word.is-in span{animation-name:reel-letter-d}
.fig-work.has-reel3d .fig-reel3d-ui,.fig-work.has-reel3d .fig-reel3d-all,.fig-work.has-reel3d .fig-reel3d-hint em,.fig-work.has-reel3d .fig-reel3d-all em{color:#fafaf8}
.fig-work.has-reel3d .fig-reel3d-count i,.fig-work.has-reel3d .fig-reel3d-hint{color:#8b8d93}
.fig-work.has-reel3d .fig-reel3d-bar{background:#ffffff24}.fig-work.has-reel3d .fig-reel3d-bar i{background:#fafaf8}
.fig-work.has-reel3d .fig-project-cover{box-shadow:0 0 0 1px #ffffff12,0 40px 80px -30px #000}
.fig-work.has-reel3d .fig-project-info,.fig-work.has-reel3d .fig-project-title h3,.fig-work.has-reel3d .fig-year strong{color:#fafaf8}
.fig-work.has-reel3d .fig-project-title p,.fig-work.has-reel3d .fig-year span{color:#9a9ca3}
.fig-work.has-reel3d .fig-year{border-right-color:#ffffff30}

/* Breadth as an index (dark, big numbered names, cursor preview, opening rows) — see breadth-index.js */
.bx{background:#111214;color:#fafaf8;padding:clamp(96px,10vw,160px) clamp(24px,3.2vw,64px) clamp(96px,9vw,140px)}
.bx-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 0 clamp(40px,5vw,72px)}
.bx-eyebrow{margin:0 0 16px;font:500 12px/16px var(--body);letter-spacing:.12em;color:#8b8d93}
.bx-head h2{margin:0;font:500 clamp(44px,6vw,96px)/1 var(--display);letter-spacing:-.02em}
.bx-count{margin:0;font:500 clamp(44px,6vw,96px)/1 var(--display);color:#ffffff1f;font-variant-numeric:tabular-nums}
.bx-list{list-style:none;margin:0;padding:0;border-bottom:1px solid #ffffff1c}
.bx-row{border-top:1px solid #ffffff1c}
.bx-id{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(180px,.42fr) 40px;align-items:center;gap:24px;padding:clamp(18px,2vw,28px) 0}
.bx-id:focus-visible{outline:2px solid #fafaf8;outline-offset:4px}
.bx-num{align-self:start;padding-top:.7em;font:500 12px/1 var(--body);color:#8b8d93;font-variant-numeric:tabular-nums}
.bx-name{font:500 clamp(34px,4.6vw,72px)/1.02 var(--display);letter-spacing:-.025em;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s,color .35s;overflow-wrap:anywhere}
.bx-cat{font:400 14px/20px var(--body);color:#9a9ca3;transition:opacity .35s}
.bx-plus{position:relative;width:40px;height:40px;border:1px solid #ffffff2e;border-radius:50%;transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s}
.bx-plus::before,.bx-plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;translate:-50% -50%}
.bx-plus::after{rotate:90deg;transition:rotate .45s cubic-bezier(.16,1,.3,1)}
@media(hover:hover){
 .bx-list:hover .bx-row:not(.is-open) .bx-name{opacity:.3}
 .bx-list:hover .bx-row:not(.is-open) .bx-cat{opacity:.5}
 .bx-list .bx-row .bx-id:hover .bx-name{opacity:1;transform:translateX(14px)}
 .bx-list .bx-row .bx-id:hover .bx-cat{opacity:1}
 .bx-id:hover .bx-plus{background:#fafaf8;color:#111214;border-color:#fafaf8}
}
.bx-row.is-open .bx-plus{background:#fafaf8;color:#111214;border-color:#fafaf8}
.bx-row.is-open .bx-plus::after{rotate:0deg}
.bx-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.bx-row.is-open .bx-detail{grid-template-rows:1fr}
.bx-detail-inner{overflow:hidden;min-height:0;display:grid;grid-template-columns:minmax(240px,.32fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);padding-left:88px}
.bx-row.is-open .bx-detail-inner{padding-bottom:clamp(28px,3vw,44px)}
.bx-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.bx-row.is-open .bx-copy{opacity:1;transform:none;transition-delay:.12s}
.bx-icon{width:64px;height:64px;border-radius:16px}
.bx-copy p{margin:0;font:400 16px/26px var(--body);color:#c5c6ca}
.bx-copy .fig-design-tags span{color:#c5c6ca;border-color:#ffffff2e;background:transparent}
.bx-talk{display:inline-flex;align-items:center;gap:14px;padding-bottom:6px;border-bottom:1px solid #fafaf8;color:#fafaf8;text-decoration:none;font:500 15px/1 var(--body)}
.bx-talk span{font-size:20px;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.bx-talk:hover span{transform:translate(3px,-3px)}
.bx-media{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;cursor:grab;padding-bottom:2px;opacity:0;transform:translateX(24px);transition:opacity .45s,transform .7s cubic-bezier(.16,1,.3,1)}
.bx-media::-webkit-scrollbar{display:none}
.bx-media.is-dragging{cursor:grabbing}
.bx-row.is-open .bx-media{opacity:1;transform:none;transition-delay:.18s}
.bx-tile{flex:0 0 auto;margin:0;height:clamp(220px,24vw,340px);aspect-ratio:3/4;position:relative;overflow:hidden;background:#1b1c20;box-shadow:inset 0 0 0 1px #ffffff12}
.bx-tile.is-wide{aspect-ratio:16/10}
.bx-tile img,.bx-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.bx-tile.is-empty{display:flex;align-items:flex-end;padding:16px;box-sizing:border-box;background:repeating-linear-gradient(135deg,#17181c 0 12px,#1a1b1f 12px 24px)}
.bx-tile.is-empty span{font:500 12px/1 var(--body);color:#5c5e66;font-variant-numeric:tabular-nums}
.bx-float{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:260px;opacity:0;scale:.86;transition:opacity .25s,scale .45s cubic-bezier(.16,1,.3,1)}
.bx-float.is-on{opacity:1;scale:1}
.bx-float-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#1b1c20;box-shadow:0 0 0 1px #ffffff14,0 30px 50px -18px #000}
.bx-float-img img{width:100%;height:100%;object-fit:cover;display:block}
.bx-float.is-icon .bx-float-img{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#2a2c33,#16171a 70%)}
.bx-float.is-icon .bx-float-img img{width:88px;height:88px;object-fit:contain;border-radius:20px}
@media(max-width:800px){
 .bx{padding:72px 20px}
 .bx-head{margin-bottom:32px}
 .bx-id{grid-template-columns:28px minmax(0,1fr) 32px;gap:12px 14px;padding:18px 0}
 .bx-cat{grid-column:2;grid-row:2;font-size:13px;line-height:18px}
 .bx-plus{grid-column:3;grid-row:1;width:32px;height:32px}
 .bx-num{padding-top:.5em}
 .bx-name{font-size:30px}
 .bx-detail-inner{grid-template-columns:1fr;padding-left:0}
 .bx-tile{height:240px}
}

/* Showreel: the Watch showreel badge trails the pointer (cursor stays) and the header steps aside while the reel is full screen (hero-reel.js) */
.hx-reel.hx-follow .hx-reel-play{left:0;top:0;right:auto;bottom:auto;transition:opacity .4s,transform .6s var(--hx-ease,cubic-bezier(.16,1,.3,1))}
body header.fig-header{transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s}
html.hx-reel-full body header.fig-header{transform:translateY(-100%);opacity:0;pointer-events:none}

/* Works reel v2 (WebGL, Anubi path + bend) — overrides the first reel rules above; see works-reel.js */
.fig-reel3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.fig-reel3d-world{perspective-origin:50% 50%}
.fig-projects.is-reel3d>.fig-project{top:50%;transform-style:flat}
.fig-projects.is-reel3d .fig-project-link{height:100%}
.fig-projects.is-reel3d .fig-project-cover{width:100%;height:100%;aspect-ratio:auto;transition:opacity .3s}
.fig-projects.is-reel3d>.fig-project[data-gpu-ready] .fig-project-cover{background:transparent;box-shadow:none}.fig-projects.is-reel3d>.fig-project[data-gpu-ready] .fig-project-cover>.works-motion-layer{opacity:0}
.fig-projects.is-reel3d .fig-project-info{transition:none;transform:none}
.fig-reel3d-ui{grid-template-columns:auto auto 1fr}
.fig-reel3d-hint{position:absolute;left:50%;translate:-50% 0}
.fig-projects.is-reel3d .fig-design-tags{display:none}

/* Leadership + YouTube on dark (2026-10-19): same language as works/index — hairlines, no boxes, underline links */
.home-page .fig-leadership.fig-leadership,.home-page .fig-youtube.fig-youtube{background:#111214;color:#fafaf8;border-top:1px solid #ffffff14}
.home-page .fig-leadership .eyebrow,.home-page .fig-youtube-heading>p{font:500 12px/16px var(--body);letter-spacing:.12em;color:#8b8d93;margin:0 0 16px}
.home-page .fig-leadership h2,.home-page .fig-youtube-heading h2{color:#fafaf8;font-size:clamp(44px,6vw,96px);line-height:1;letter-spacing:-.02em}
.home-page .fig-leadership p.fig-leadership-description{color:#c5c6ca}
.home-page .fig-leadership .proof-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:48px 0;border-top:1px solid #ffffff1c;border-bottom:1px solid #ffffff1c}
.home-page .fig-leadership .proof-row>div{background:none;border:0;border-radius:0;padding:28px 24px;text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.home-page .fig-leadership .proof-row>div:first-child{padding-left:0}
.home-page .fig-leadership .proof-row>div+div{border-left:1px solid #ffffff1c}
.home-page .fig-leadership .proof-row strong{color:#fafaf8;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.home-page .fig-leadership .proof-row span{color:#8b8d93;font-size:14px;line-height:20px}
.home-page .fig-leadership .pill,.home-page .fig-youtube>.pill{display:inline-flex;align-items:center;gap:32px;padding:0 0 10px;min-height:0;height:auto;border:0;border-bottom:1px solid #fafaf8;border-radius:0;background:none;color:#fafaf8;font:500 16px/1 var(--body)}
.home-page .fig-leadership .pill::after,.home-page .fig-youtube>.pill::after{content:"↗";font-size:20px;line-height:1;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.home-page .fig-leadership .pill:is(:hover,:focus-visible),.home-page .fig-youtube>.pill:is(:hover,:focus-visible){background:none;color:#fafaf8}
.home-page .fig-leadership .pill:hover::after,.home-page .fig-youtube>.pill:hover::after{transform:translate(3px,-3px)}
.home-page .leadership-fade{background:linear-gradient(180deg,#11121400,#111214)}
.home-page .fig-leadership .brand-strip{color:#8b8d93;border-top:1px solid #ffffff14}
.home-page .fig-leadership .brand-logo img{filter:brightness(0) invert(1);opacity:.42;transition:opacity .3s}
.home-page .fig-leadership .brand-logo img:hover{opacity:.9}
.home-page .fig-youtube-icon{width:96px;height:96px;top:96px;filter:drop-shadow(0 20px 24px #0000008c);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.home-page .fig-youtube:hover .fig-youtube-icon{transform:rotate(-8deg) scale(1.04)}
.home-page .fig-youtube .video-grid{gap:24px}
.home-page .fig-youtube .video-card{gap:18px}
.home-page .fig-youtube .video-art{position:relative;box-shadow:0 0 0 1px #ffffff12,0 30px 60px -30px #000}
.home-page .fig-youtube .youtube-thumbnail img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.home-page .fig-youtube .video-card:is(:hover,:focus-visible) .youtube-thumbnail img{transform:scale(1.045)}
.home-page .fig-youtube .fig-video-copy{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid #ffffff1c}
.home-page .fig-youtube .fig-video-copy p{margin:0;font:500 11px/16px var(--body);letter-spacing:.12em;color:#ff5a4f}
.home-page .fig-youtube .fig-video-copy h3{font:500 18px/26px var(--body);color:#fafaf8}
@media(max-width:800px){
 .home-page .fig-leadership .proof-row{margin:32px 0}
 .home-page .fig-leadership .proof-row>div{padding:18px 12px}
 .home-page .fig-youtube-icon{width:64px;height:64px;top:64px}
}
.home-page .fig-leadership .proof-row>div>*{text-align:left}
.home-page .fig-leadership .leadership-person{-webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 86%);mask-image:linear-gradient(180deg,#000 52%,transparent 86%)}
.home-page .fig-leadership .leadership-bg{opacity:.18}
@media(max-width:800px){.home-page .fig-leadership .fig-leadership-portrait{margin-top:24px}}
/* footer links: only the animated underline (style.css adds a text underline to every nav a:hover) */
.fig-contact-nav a:is(:hover,:focus-visible,[aria-current]){text-decoration:none}
/* hero orbit: name tile for projects without an image yet (hero-cards.js, src:null) */
.hero-card.is-tile .hero-card-img{background:#0b0b0c;container-type:inline-size;display:grid;place-items:center;box-shadow:0 0 0 1px #ffffff1f,0 calc(10px + var(--card-depth)*14px) calc(20px + var(--card-depth)*22px) -8px rgb(0 0 0/calc(.5 + var(--card-depth)*.3))}
.hero-card-name{padding:0 10%;font:500 11cqw/1.05 var(--display);letter-spacing:-.02em;color:#fafaf8;text-align:center;text-wrap:balance}
/* orbit layering: back cards (z 10–15) pass under the headline, front cards (z 16–20) over it */
.home-page .fig-hero .hero-cards{z-index:auto}
.home-page .fig-hero .fig-hero-content{z-index:15}
.home-page .fig-hero .hero-foot{z-index:30}

/* One button style site-wide (2026-10-19): outlined pill like the header's "Schedule a call"; icon optional (.call-arrow-circle) */
.home-page .hero-discover,.home-page .fig-leadership .pill,.home-page .fig-youtube>.pill,.bx-talk{display:inline-flex;align-items:center;gap:14px;height:56px;min-height:0;box-sizing:border-box;padding:0 24px;border:1px solid #36383e;border-radius:999px;background:transparent;color:#fafaf8;font:500 16px/1 var(--body);letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.home-page .fig-leadership .pill::after,.home-page .fig-youtube>.pill::after{content:none}
.home-page .hero-discover:has(.call-arrow-circle),.home-page .fig-youtube>.pill.has-icon,.bx-talk{padding-right:12px}
:is(.home-page .hero-discover,.home-page .fig-leadership .pill,.home-page .fig-youtube>.pill,.bx-talk) .call-arrow-circle{flex:0 0 32px;width:32px;height:32px}
:is(.home-page .hero-discover,.home-page .fig-leadership .pill,.home-page .fig-youtube>.pill,.bx-talk) .call-arrow{width:16px;height:16px}
:is(.home-page .hero-discover,.home-page .fig-leadership .pill,.home-page .fig-youtube>.pill,.bx-talk):is(:hover,:focus-visible){background:#fafaf8;color:#111214;border-color:#fafaf8}
:is(.home-page .hero-discover,.home-page .fig-leadership .pill,.home-page .fig-youtube>.pill,.bx-talk):is(:hover,:focus-visible) .call-arrow-circle{background:#111214;color:#fafaf8}
.bx-talk span:not(.call-arrow-circle){font-size:inherit;transform:none!important}
@media(max-width:800px){.home-page .hero-discover,.home-page .fig-leadership .pill,.home-page .fig-youtube>.pill,.bx-talk{height:48px;padding:0 20px;font-size:14px}.home-page .fig-youtube>.pill.has-icon,.bx-talk{padding-right:8px}}

/* About page: same pill — dark sections keep the light outline, light sections get the dark variant */
.fig-about-page .pill,.fig-about-page .ax-qmore,.fig-about-page .ax-link{display:inline-flex;align-items:center;gap:14px;height:56px;min-height:0;box-sizing:border-box;padding:0 24px;border:1px solid #00000024;border-radius:999px;background:transparent;color:#111214;font:500 16px/1 var(--body);letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.fig-about-page :is(.pill,.ax-qmore,.ax-link):is(:hover,:focus-visible){background:#111214;color:#fafaf8;border-color:#111214;text-decoration:none}
.fig-about-page :is(.pill,.ax-qmore,.ax-link)::after{content:none}
.fig-about-page :is(.fig-about-intro,.ax-closing) .pill{border-color:#36383e;color:#fafaf8}
.fig-about-page :is(.fig-about-intro,.ax-closing) .pill:is(:hover,:focus-visible){background:#fafaf8;color:#111214;border-color:#fafaf8}
.fig-about-page .ax-qmore{height:44px;padding:0 18px;font-size:14px}
@media(max-width:800px){.fig-about-page :is(.pill,.ax-qmore,.ax-link){height:48px;padding:0 20px;font-size:14px}}

/* GENVA › During & after (2026-10-19): the composition scales with the screen and stays tied to the text column.
   Photo: right edge on the section edge, left edge 170 design-px right of the 800px text column, so
   914u + 170u = (W + 800) / 2  →  u = (W + 800) / 2168  (≈1 at the 1440 design, capped at 1.5).
   Status (spark + copy): its 200u spark starts exactly on the text column's left edge. */
@media(min-width:901px){
 section#creation.gv-during{--u:clamp(.6px,calc((100vw + 800px) / 2168),1.5px)}
 .gv-during .gv-during-status{left:calc(var(--u)*-261 - 64px)}   /* 64px further left (2026-10-19) */
}

/* GENVA › Feedback & support (Figma 385:10043): heading, four screens in a row, two notes under the row */
section#recovery.gv-recovery{padding:96px max(24px,calc((100% - 1216px)/2))!important}
.gv-recovery-screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;max-width:1216px;margin:56px auto 0}
.gv-recovery-screens figure{margin:0;aspect-ratio:285/617;background:#030508;overflow:hidden}
.gv-recovery-screens img{display:block;width:100%;height:100%;object-fit:cover}
.gv-recovery .gv-recovery-notes{max-width:1216px;width:auto;margin:24px auto 0;grid-template-columns:1fr 1fr;gap:64px}
.gv-recovery .gv-recovery-notes h3{font:500 20px/30px var(--body);margin:0 0 12px;color:#111214}
.gv-recovery .gv-recovery-notes p{font:400 16px/24px var(--body);margin:0;color:#111214}
@media(max-width:900px){
 .gv-recovery-screens{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin:40px -24px 0;padding:0 24px;scrollbar-width:none}
 .gv-recovery-screens::-webkit-scrollbar{display:none}
 .gv-recovery-screens figure{flex:0 0 min(64vw,285px);scroll-snap-align:start}
 .gv-recovery .gv-recovery-notes{grid-template-columns:1fr;gap:28px}
}
.gv-story.gv-recovery .gv-dec-head{width:800px;max-width:100%;margin:0 auto;padding:0;text-align:left;display:block}
.gv-story.gv-recovery .gv-dec-head .gv-eyebrow{font:500 14px/20px var(--body);color:#64666c;letter-spacing:0;margin:0}
.gv-story.gv-recovery .gv-dec-head h2{font:500 56px/64px var(--display,var(--body));letter-spacing:-.01em;margin:24px 0 32px;color:#111214}
.gv-story.gv-recovery .gv-dec-head p:not(.gv-eyebrow){font:400 18px/28px var(--body);max-width:none;margin:0;color:#111214}
@media(max-width:900px){.gv-story.gv-recovery .gv-dec-head h2{font-size:40px;line-height:46px;margin:16px 0 20px}.gv-story.gv-recovery .gv-dec-head p:not(.gv-eyebrow){font-size:16px;line-height:26px}}
/* support screens: same hover as the onboarding screens (.gv-onb) — whole card scales 10%, lifts above its neighbours */
.gv-recovery-screens figure{position:relative;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1);will-change:transform}
@media(hover:hover){.gv-recovery-screens figure:hover{transform:scale(1.1);z-index:2;box-shadow:0 24px 60px rgba(0,0,0,.28)}}
@media(prefers-reduced-motion:reduce){.gv-recovery-screens figure{transition:none}}

/* GENVA › Project overview (Figma 231:10153): soft shade toward the lower right */
.genva-case-overview{background:linear-gradient(194.41deg,rgba(0,0,0,0) 35.61%,rgba(0,0,0,.001) 47.02%,rgba(0,0,0,.004) 56.31%,rgba(0,0,0,.008) 63.79%,rgba(0,0,0,.014) 69.81%,rgba(0,0,0,.022) 74.68%,rgba(0,0,0,.03) 78.74%,rgba(0,0,0,.039) 82.3%,rgba(0,0,0,.049) 85.7%,rgba(0,0,0,.06) 89.27%,rgba(0,0,0,.07) 93.32%,rgba(0,0,0,.081) 98.19%,rgba(0,0,0,.091) 104.21%,rgba(0,0,0,.102) 111.7%,rgba(0,0,0,.111) 120.98%,rgba(0,0,0,.12) 132.39%),#fafaf8!important}

/* GENVA › Creation flows (Figma 342:8096): dark-pink gradient card, category home screen in a phone rising
   out of the top edge, category icon inside the card (bottom-left) */
.gv-flows-card{display:flex;flex-direction:column;gap:24px}
.gv-flows-img{position:relative;aspect-ratio:2/1;isolation:isolate;clip-path:inset(-48px 0 0 0)}
.gv-flows-img::before{content:"";position:absolute;inset:0;z-index:-1;
 background:url("data:image/svg+xml;utf8,<svg viewBox='0 0 576 288' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='100%' height='100%' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-8.379 25.13 -50.26 -19.569 288 90)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></radialGradient></defs></svg>") 0 0/100% 100%,
  url("data:image/svg+xml;utf8,<svg viewBox='0 0 576 288' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='100%' height='100%' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-13.975 32.361 -64.722 -32.638 288 90)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(0,0,0,0)' offset='1'/></radialGradient></defs></svg>") 0 0/100% 100%,
  url("data:image/svg+xml;utf8,<svg viewBox='0 0 576 288' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='100%' height='100%' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-27.43 48.951 -130.66 -85.496 268.1 41.61)'><stop stop-color='rgba(0,0,0,1)' offset='0'/><stop stop-color='rgba(19,0,11,1)' offset='0.118'/><stop stop-color='rgba(61,0,37,1)' offset='0.292'/><stop stop-color='rgba(106,1,64,1)' offset='0.405'/><stop stop-color='rgba(150,1,91,1)' offset='0.485'/><stop stop-color='rgba(191,2,115,1)' offset='0.557'/><stop stop-color='rgba(224,2,135,1)' offset='0.65'/><stop stop-color='rgba(246,2,148,1)' offset='0.788'/><stop stop-color='rgba(254,2,153,1)' offset='1'/></radialGradient></defs></svg>") 0 0/100% 100%}
.gv-flows-music .gv-flows-img::before,.gv-flows-image .gv-flows-img::before{transform:scaleX(-1)}
.gv-flows-phone{position:absolute;left:50%;top:-39px;width:31%;aspect-ratio:553/1200;translate:-50% 0;border-radius:16% / 7.4%;padding:2.2%;box-sizing:border-box;background:#16171b;box-shadow:inset 0 0 0 1px #ffffff26,0 30px 60px -20px #000;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.gv-flows-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:14.5% / 6.7%}
@media(hover:hover){.gv-flows-card:hover .gv-flows-phone{transform:translateY(-10px)}}
.gv-flows-card .gv-flows-img img{aspect-ratio:auto}
.gv-flows-icon{position:absolute;left:16px;bottom:24px;z-index:2;display:grid;place-items:center;width:48px;height:48px;box-sizing:border-box;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.04);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gv-flows-icon img{display:block;width:28px!important;height:28px!important;aspect-ratio:auto!important}
.gv-flows-icon i{position:absolute;width:10.3px;height:10.7px;background:url(/assets/figma/genva-page/flows-star.png) center/cover;-webkit-mask:url(/assets/figma/genva-page/flows-star-mask.png) center/100% 100% no-repeat;mask:url(/assets/figma/genva-page/flows-star-mask.png) center/100% 100% no-repeat}
.gv-flows-video .gv-flows-icon i{left:calc(10px + 28px*.0232);top:calc(10px + 28px*.0536)}
.gv-flows-music .gv-flows-icon i{left:calc(10px + 14.73px);top:calc(10px + 28px*.4643)}
.gv-flows-home .gv-flows-icon i{left:calc(10px + 14.05px);top:10px}
.gv-flows-image .gv-flows-icon i{left:calc(10px + 17.73px);top:10px}
.gv-flows-txt{gap:12px}
@media(prefers-reduced-motion:reduce){.gv-flows-phone{transition:none}}

/* GENVA › Creation flows v2 (Figma 342:8096, square cards): one exported image per card — gradient + tilted phone
   (the image is 39px taller than the card: the phone rises above its top edge) */
.gv-flows-img{aspect-ratio:1/1;clip-path:inset(-48px 0 0 0)}
.gv-flows-img::before{content:none}
.gv-flows-card .gv-flows-img img.gv-flows-art{position:absolute;left:0;top:-6.77%;width:100%;height:106.77%;aspect-ratio:auto;object-fit:cover;display:block}

/* GENVA › Design system (Figma 353:9904): exported gradient + grid background, 2×2 cards */
section#system.gv-ds-section{padding:96px max(24px,calc((100% - 1216px)/2))!important;background:#000 url(/assets/figma/genva-page/ds-section-bg.jpg) center top/cover no-repeat;color:#fafaf8}
.gv-ds-section .gv-dec-head{width:800px;max-width:100%;margin:0 auto;padding:0;text-align:left;display:block}
.gv-ds-section .gv-dec-head .gv-eyebrow{font:500 14px/20px var(--body);color:#a0a2a8;letter-spacing:0;margin:0}
.gv-ds-section .gv-dec-head h2{font:500 56px/64px var(--display,var(--body));letter-spacing:-.01em;margin:24px 0 32px;color:#fafaf8}
.gv-ds-section .gv-dec-head p:not(.gv-eyebrow){font:400 18px/28px var(--body);max-width:none;margin:0;color:#fafaf8}
.gv-ds-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:96px;max-width:1216px;margin:88px auto 0}
.gv-ds-card{display:flex;flex-direction:column;gap:24px;min-width:0}
.gv-ds-img{position:relative;aspect-ratio:2/1;background:#000;overflow:hidden}
.gv-ds-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gv-ds-txt{padding:0 16px;display:flex;flex-direction:column;gap:12px}
.gv-ds-txt h3{font:700 24px/32px var(--body);margin:0;color:#fafaf8}
.gv-ds-txt p{font:400 18px/28px var(--body);margin:0;color:#fafaf8}
@media(max-width:900px){
 section#system.gv-ds-section{padding:56px 24px!important}
 .gv-ds-section .gv-dec-head h2{font-size:40px;line-height:46px;margin:16px 0 20px}
 .gv-ds-section .gv-dec-head p:not(.gv-eyebrow){font-size:16px;line-height:26px}
 .gv-ds-grid{grid-template-columns:1fr;row-gap:48px;margin-top:48px}
 .gv-ds-txt h3{font-size:20px;line-height:28px}.gv-ds-txt p{font-size:16px;line-height:24px}
}

/* GENVA › Creation flows v3: background and app screen are separate so the screen can straighten on hover.
   Figma: screen 369.1×800 rotated 5° about its top-left at (155, 7−39.28) inside the 576 card; the visible part
   (607px) is clipped 39.28px above the card and at its bottom edge. */
.gv-flows-img{background:#000 url(/assets/figma/genva-page/flows-card-bg.jpg) center/cover no-repeat;clip-path:inset(-6.82% 0 0 0)}
.gv-flows-card .gv-flows-img img.gv-flows-screen{position:absolute;left:26.91%;top:-5.6%;width:64.08%;height:auto;aspect-ratio:739/1214;object-fit:cover;object-position:top;transform-origin:0 0;transform:rotate(5deg);transition:transform .7s cubic-bezier(.22,1,.36,1);will-change:transform;display:block}
@media(hover:hover){.gv-flows-card:hover .gv-flows-img img.gv-flows-screen{transform:rotate(0deg)}}
@media(prefers-reduced-motion:reduce){.gv-flows-card .gv-flows-img img.gv-flows-screen{transition:none}}
/* hover state = Figma frame "7" (410:9715): screen straight at x=103, y=−39.28 → from the tilted state move
   −52.0px (−14.09% of its width) and −7px (−1.14% of its height), rotate 0 */
.gv-flows-card .gv-flows-img img.gv-flows-screen{aspect-ratio:738/1228;transform:translate(0,0) rotate(5deg)}
@media(hover:hover){.gv-flows-card:hover .gv-flows-img img.gv-flows-screen{transform:translate(-14.09%,-1.14%) rotate(0deg)}}
/* flows screens re-cropped to 737px (the 739/738px exports carried a half-white last column = white line on the right edge) */
.gv-flows-card .gv-flows-img img.gv-flows-screen{width:63.98%;aspect-ratio:737/1228}
@media(hover:hover){.gv-flows-card:hover .gv-flows-img img.gv-flows-screen{transform:translate(-14.11%,-1.14%) rotate(0deg)}}
/* Design system cards: Figma 410:2916 images + hover (slow zoom inside the frame, image brightens) */
.gv-ds-img img{transform:scale(1);filter:brightness(.88);transition:transform .9s cubic-bezier(.22,1,.36,1),filter .6s ease;will-change:transform}
@media(hover:hover){.gv-ds-card:hover .gv-ds-img img{transform:scale(1.06);filter:brightness(1)}}
@media(hover:none){.gv-ds-img img{filter:none}}
@media(prefers-reduced-motion:reduce){.gv-ds-img img{transition:filter .3s ease}.gv-ds-card:hover .gv-ds-img img{transform:none}}
/* Brand & Launch = Figma 231:10191: 800px head, then logo row / 16:9 brand film / fly-girl + palette, 32px gaps, #111214 */
section#launch.gv-brand-section{padding:96px max(24px,calc((100% - 1216px)/2))!important;background:#111214}
.gv-brand-section .gv-dec-head{width:800px;max-width:100%;margin:0 auto;padding:0;text-align:left;display:block}
.gv-brand-section .gv-dec-head .gv-eyebrow{font:500 14px/20px var(--body);color:#a0a2a8;letter-spacing:0;margin:0}
.gv-brand-section .gv-dec-head h2{font:500 56px/64px var(--display,var(--body));letter-spacing:-.01em;margin:24px 0 32px;color:#fafaf8}
.gv-brand-section .gv-dec-head p:not(.gv-eyebrow){font:400 18px/28px var(--body);max-width:none;margin:0;color:#fafaf8}
.gv-brand-section>.genva-brand-grid{padding:0!important;margin:64px auto 0;max-width:1216px;gap:32px;background:transparent}
.gv-brand-section .genva-brand-grid>.gv-film{margin:0;padding:0!important}
.gv-brand-section .genva-brand-grid>.gv-film video{aspect-ratio:1216/684;max-height:none}
.gv-brand-section .gv-marketing-examples{margin-top:96px}
@media(max-width:800px){
 section#launch.gv-brand-section{padding:56px 24px!important}
 .gv-brand-section .gv-dec-head h2{font-size:40px;line-height:46px;margin:16px 0 20px}
 .gv-brand-section .gv-dec-head p:not(.gv-eyebrow){font-size:16px;line-height:26px}
 .gv-brand-section>.genva-brand-grid{margin-top:40px;gap:16px}
 .gv-brand-section .gv-marketing-examples{margin-top:56px}
}
/* GENVA › store + Google Ads loop gallery (genva-loop.js) — no copy, full-bleed, sharp corners */
.gv-loop{background:#111214;padding:0 0 128px;overflow:hidden;display:grid;gap:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.gv-loop-row{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gv-loop-row.is-dragging{cursor:grabbing}
.gv-loop-track{display:flex;column-gap:24px;width:max-content;will-change:transform}
.gv-loop-item{margin:0;flex:none;background:#030508;overflow:hidden}
.gv-loop-item img{display:block;height:100%;width:auto;pointer-events:none;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.is-store-row .gv-loop-item{height:520px}
.is-creative-row .gv-loop-item{height:340px}
@media(hover:hover){.gv-loop-item:hover img{transform:scale(1.04)}}
.gv-loop-row.is-static{overflow-x:auto;cursor:auto;scrollbar-width:none}.gv-loop-row.is-static::-webkit-scrollbar{display:none}
.gv-loop-row.is-static .gv-loop-track{padding:0 24px}
@media(max-width:800px){.gv-loop{padding-bottom:72px;gap:12px;-webkit-mask-image:none;mask-image:none}.gv-loop-track{column-gap:12px}.is-store-row .gv-loop-item{height:340px}.is-creative-row .gv-loop-item{height:200px}}
.gv-brand-section{padding-bottom:96px!important}

/* GENVA › outcome (replaces "My contribution": stat + delivered list + takeaway) */
section#outcome.gv-wrap{padding:128px max(24px,calc((100% - 1216px)/2))!important;max-width:none;background:#fafaf8;color:#111214}
.gv-wrap-head .gv-eyebrow{font:500 14px/20px var(--body);color:#6b6e75;letter-spacing:0;margin:0;opacity:1}
.gv-wrap-head h2{font:500 56px/64px var(--display,var(--body));letter-spacing:-.01em;margin:24px 0 0;color:#111214;max-width:800px}
.gv-wrap-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;margin-top:72px;padding-top:40px;border-top:1px solid rgba(17,18,20,.14)}
.gv-wrap-stat strong{display:block;font:500 160px/1 var(--display,var(--body));letter-spacing:-.04em;color:#111214}
.gv-wrap-stat span{display:block;margin-top:16px;font:400 18px/28px var(--body);color:#43464d;max-width:320px}
.gv-wrap-label{font:500 14px/20px var(--body);color:#6b6e75;margin:0 0 8px}
.gv-wrap-list ol{list-style:none;margin:0;padding:0}
.gv-wrap-list li{display:flex;align-items:baseline;gap:24px;padding:18px 0;border-bottom:1px solid rgba(17,18,20,.1);font:500 24px/32px var(--body);color:#111214}
.gv-wrap-list li span{font:500 14px/20px var(--body);color:#a0a2a8;min-width:24px}
.gv-wrap-quote{margin:96px 0 0;padding:0;max-width:960px}
.gv-wrap-quote p{font:500 36px/46px var(--display,var(--body));letter-spacing:-.01em;margin:0;color:#111214}
.gv-wrap-quote p::before{content:"“"}.gv-wrap-quote p::after{content:"”"}
.gv-wrap-quote cite{display:block;margin-top:20px;font:500 14px/20px var(--body);font-style:normal;color:#6b6e75}
@media(max-width:800px){section#outcome.gv-wrap{padding:64px 24px!important}.gv-wrap-head h2{font-size:40px;line-height:46px;margin-top:16px}.gv-wrap-grid{grid-template-columns:1fr;gap:40px;margin-top:40px;padding-top:32px}.gv-wrap-stat strong{font-size:112px}.gv-wrap-list li{font-size:20px;line-height:28px;padding:14px 0;gap:16px}.gv-wrap-quote{margin-top:56px}.gv-wrap-quote p{font-size:26px;line-height:34px}}

/* GENVA › previous / next project */
.gv-pn{display:grid;grid-template-columns:1fr 1fr;background:#fafaf8;border-top:1px solid rgba(17,18,20,.14)}
.gv-pn-link{position:relative;display:grid;gap:20px;padding:56px max(24px,calc((100vw - 1216px)/2));color:#111214;text-decoration:none!important;overflow:hidden;isolation:isolate}
.gv-pn-link.is-prev{padding-right:48px}
.gv-pn-link.is-next{padding-left:48px;border-left:1px solid rgba(17,18,20,.14);text-align:right;justify-items:end}
.gv-pn-link::before{content:"";position:absolute;inset:0;background:#111214;transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.22,1,.36,1);z-index:-1}
.gv-pn-label{font:500 14px/20px var(--body);color:#6b6e75;transition:color .4s}
.gv-pn-name{display:flex;align-items:center;gap:20px;font:500 48px/56px var(--display,var(--body));letter-spacing:-.01em;transition:transform .6s cubic-bezier(.22,1,.36,1),color .4s}
.gv-pn-link.is-next .gv-pn-name{flex-direction:row-reverse}
.gv-pn-icon{width:56px;height:56px;flex:none;overflow:hidden;position:relative;display:block}
.gv-pn-icon-in{position:absolute;left:0;top:0;width:120px;height:120px;transform:scale(.466667);transform-origin:0 0}
.gv-pn-icon-in>img{width:120px;height:120px;display:block}
.gv-pn-icon .fig-icon-composite{transform:none!important}
.gv-pn-arrow{position:absolute;top:56px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(17,18,20,.2);transition:transform .6s cubic-bezier(.22,1,.36,1),border-color .4s,color .4s}
.is-prev .gv-pn-arrow{right:48px;transform:rotate(-90deg)}
.is-next .gv-pn-arrow{left:48px}
@media(hover:hover){
 .gv-pn-link:hover::before{transform:scaleY(1)}
 .gv-pn-link:hover .gv-pn-label{color:#a0a2a8}
 .gv-pn-link:hover .gv-pn-name{color:#fafaf8}
 .gv-pn-link.is-prev:hover .gv-pn-name{transform:translateX(12px)}
 .gv-pn-link.is-next:hover .gv-pn-name{transform:translateX(-12px)}
 .gv-pn-link:hover .gv-pn-arrow{color:#fafaf8;border-color:rgba(250,250,248,.4)}
 .is-prev:hover .gv-pn-arrow{transform:rotate(-90deg) translate(4px,-4px)}
 .is-next:hover .gv-pn-arrow{transform:translate(4px,-4px)}
}
.gv-pn-link:focus-visible{outline:2px solid #111214;outline-offset:-4px}
@media(max-width:800px){.gv-pn{grid-template-columns:1fr}.gv-pn-link{padding:32px 24px!important;gap:12px}.gv-pn-link.is-next{border-left:0;border-top:1px solid rgba(17,18,20,.14)}.gv-pn-name{font-size:28px;line-height:36px;gap:14px}.gv-pn-icon{width:40px;height:40px}.gv-pn-icon-in{transform:scale(.333333)}.gv-pn-arrow{top:32px;width:40px;height:40px}.is-prev .gv-pn-arrow{right:24px}.is-next .gv-pn-arrow{left:24px}}
@media(prefers-reduced-motion:reduce){.gv-pn-link::before,.gv-pn-name,.gv-pn-arrow{transition:none}}
.gv-pn>.gv-pn-link{display:grid!important}
/* loop gallery edges: fade into the section colour (#111214) instead of masking the section (mask showed the light page behind) */
.gv-loop{position:relative;-webkit-mask-image:none!important;mask-image:none!important}
.gv-loop::before,.gv-loop::after{content:"";position:absolute;top:0;bottom:128px;width:min(14vw,200px);z-index:2;pointer-events:none}
.gv-loop::before{left:0;background:linear-gradient(90deg,#111214 0%,rgba(17,18,20,.85) 30%,rgba(17,18,20,0) 100%)}
.gv-loop::after{right:0;background:linear-gradient(270deg,#111214 0%,rgba(17,18,20,.85) 30%,rgba(17,18,20,0) 100%)}
@media(max-width:800px){.gv-loop::before,.gv-loop::after{bottom:72px;width:48px}}
/* the global nav gap (32px) left a light strip between prev/next — the halves must touch */
nav.gv-pn{gap:0!important;padding:0!important}

/* ── Case study template (caseTemplate in app.js; GAİN, GoArt, MeetSense, Loops, Trio) ── */
.cs-cover .cs-cover-art{position:absolute;inset:0}
.cs-cover .cs-cover-art img{width:100%;height:100%;object-fit:cover;display:block}
.cs-cover .cs-cover-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,18,20,.35) 0%,rgba(17,18,20,0) 28%,rgba(17,18,20,0) 52%,rgba(17,18,20,.78) 100%)}
.cs-cover .genva-cover-bottom{z-index:2}
.cs-wordmark{display:flex;align-items:center;gap:16px;font:600 48px/56px var(--display,var(--body));letter-spacing:-.02em;color:#fafaf8}
.cs-wordmark .gv-pn-icon{width:56px;height:56px}
.cs-page section.gv-story{padding:96px max(24px,calc((100% - 1216px)/2))!important}
.cs-page .gv-dec-head{width:800px;max-width:100%;margin:0 auto;padding:0;text-align:left;display:block}
.cs-page .gv-dec-head .gv-eyebrow{font:500 14px/20px var(--body);color:#6b6e75;letter-spacing:0;margin:0}
.cs-page .gv-story-dark .gv-dec-head .gv-eyebrow{color:#a0a2a8}
.cs-page .gv-dec-head h2{font:500 56px/64px var(--display,var(--body));letter-spacing:-.01em;margin:24px 0 32px}
.cs-page .gv-dec-head p:not(.gv-eyebrow){font:400 18px/28px var(--body);max-width:none;margin:0}
.cs-blocks{max-width:1216px;margin:64px auto 0;display:grid;gap:48px}
.cs-text{width:800px;max-width:100%;margin:0 auto;display:grid;gap:20px}
.cs-text p{font:400 18px/28px var(--body);margin:0;opacity:.8}
.cs-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.25);padding-top:32px}
.cs-points li span{font:500 14px/20px var(--body);opacity:.5}
.cs-points h3{font:600 24px/32px var(--body);margin:16px 0 12px}
.cs-points p{font:400 16px/26px var(--body);margin:0;opacity:.8}
.cs-chips{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;gap:8px;width:800px;max-width:100%}
.cs-chips li{font:500 14px/20px var(--body);padding:10px 16px;border:1px solid rgba(127,127,127,.3)}
.cs-media{margin:0}
.cs-media-frame{overflow:hidden;background:#111214}
.cs-media img,.cs-media video{display:block;width:100%;height:auto;transition:transform .9s cubic-bezier(.22,1,.36,1)}
.cs-media video{aspect-ratio:16/9;object-fit:cover;background:#030508}
.cs-media.is-narrow{max-width:560px;margin:0 auto;width:100%}
.cs-media.is-crop .cs-media-frame{aspect-ratio:4/5}
.cs-media.is-crop img{height:100%;object-fit:cover;object-position:top}
.cs-media figcaption{font:500 14px/20px var(--body);margin-top:16px;opacity:.6}
@media(hover:hover){.cs-media:hover .cs-media-frame img{transform:scale(1.03)}}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.cs-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin:0;border-top:1px solid rgba(127,127,127,.25);padding-top:32px}
.cs-team dt{font:500 14px/20px var(--body);opacity:.55}
.cs-team dd{font:500 20px/28px var(--body);margin:8px 0 0}
.cs-awards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.cs-awards li{display:flex;align-items:center;gap:20px;padding:24px;border:1px solid rgba(127,127,127,.25)}
.cs-awards img{width:56px;height:56px;object-fit:contain}
.cs-award-mark{width:56px;height:56px;display:grid;place-items:center;font-size:28px;border:1px solid rgba(127,127,127,.3)}
.cs-awards strong{display:block;font:600 20px/28px var(--body)}
.cs-awards span{font:400 14px/20px var(--body);opacity:.65}
.cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;margin-top:72px;border-top:1px solid rgba(17,18,20,.14)}
.cs-stats>div{padding:32px 32px 32px 0}
.cs-stats>div+div{padding-left:32px;border-left:1px solid rgba(17,18,20,.1)}
.cs-stats strong{display:block;font:500 48px/56px var(--display,var(--body));letter-spacing:-.02em;color:#111214}
.cs-stats span{display:block;margin-top:12px;font:400 16px/24px var(--body);color:#43464d}
.cs-outcome-body{display:grid;gap:20px;max-width:800px}
.cs-outcome-body p{font:400 18px/28px var(--body);margin:0;color:#2b2f35}
.cs-outcome>.cs-outcome-body{margin-top:40px}
.cs-wrap-grid{margin-top:40px}
.cs-wrap-grid:not(:has(.gv-wrap-list)){grid-template-columns:1fr}
.cs-wrap-grid:not(:has(.cs-outcome-body)){grid-template-columns:1fr}
@media(max-width:800px){
 .cs-wordmark{font-size:32px;line-height:40px;gap:12px}.cs-wordmark .gv-pn-icon{width:40px;height:40px}.cs-wordmark .gv-pn-icon-in{transform:scale(.333333)}
 .cs-page section.gv-story{padding:56px 24px!important}
 .cs-page .gv-dec-head h2{font-size:36px;line-height:42px;margin:16px 0 20px}
 .cs-page .gv-dec-head p:not(.gv-eyebrow),.cs-text p{font-size:16px;line-height:26px}
 .cs-blocks{margin-top:40px;gap:32px}
 .cs-points{grid-template-columns:1fr;gap:24px}
 .cs-pair{grid-template-columns:1fr;gap:24px}
 .cs-stats{grid-template-columns:1fr 1fr;margin-top:40px}.cs-stats>div,.cs-stats>div+div{padding:20px 16px 20px 0;border-left:0}.cs-stats strong{font-size:30px;line-height:36px}
}
.cs-cover .cs-cover-art{left:0!important;top:0!important;width:100%!important;height:100%!important;transform:none!important;translate:none!important}

/* ── About page aligned with the case-study language (eyebrows, palette, sharp corners, stat dividers) ── */
.fig-about-page .ax-head{display:flex;flex-direction:column;gap:24px}
.fig-about-page .ax-eyebrow{font:500 14px/20px var(--body);color:#6b6e75;letter-spacing:0;margin:0}
.fig-about-page .ax-head h2{margin:0}
.fig-about-page .ax-learn>.ax-head{margin-bottom:56px}
/* stats: dividers like the case Outcome band */
.fig-about-intro .ax-stats>div{min-width:0}
.fig-about-intro .ax-stats>div+div{border-left:1px solid #ffffff1f;padding-left:24px}
/* testimonials: on the site palette (dark band) instead of the off-palette grey */
.ax-quotes{background:#111214!important;color:#fafaf8}
.ax-quotes .ax-eyebrow{color:#a0a2a8}
.ax-quotes h2,.ax-quotes .ax-qlead,.ax-quotes .ax-quote figcaption h3,.ax-quotes .ax-qcount b{color:#fafaf8}
.ax-quotes .ax-qrest p{color:#fafaf8b3}
.ax-quotes .ax-quote figcaption p,.ax-quotes .ax-qcount{color:#a0a2a8}
.ax-quotes .ax-quote figcaption time{color:#8a8c92}
.ax-quotes .ax-qbtn{border-color:#ffffff33;color:#fafaf8}
.ax-quotes .ax-qbtn:hover{background:#fafaf8;color:#111214}
.fig-about-page .ax-quotes :is(.pill,.ax-qmore){border-color:#36383e;color:#fafaf8}
.fig-about-page .ax-quotes :is(.pill,.ax-qmore):is(:hover,:focus-visible){background:#fafaf8;color:#111214;border-color:#fafaf8}
.ax-quotes .recommendations-source .call-arrow-circle{background:#fafaf8;color:#111214}
.ax-quotes .recommendations-source:is(:hover,:focus-visible) .call-arrow-circle{background:#111214;color:#fafaf8}
/* sharp corners, as everywhere else */
.earlier-experience-toggle{border-radius:0!important;background:transparent!important}
.earlier-experience-toggle:hover{background:#f0f1ec!important}
/* closing CV block: light, 56/64 heading, so it no longer stacks dark-on-dark with the contact section */
.ax-closing{background:#fafaf8!important;color:#111214!important;border-top:1px solid #00000014;gap:24px!important}
.ax-closing h2{font:500 56px/64px var(--display,var(--body))!important;letter-spacing:-.01em}
.ax-closing p:not(.ax-eyebrow){color:#43464d!important}
.fig-about-page .ax-closing .pill{background:transparent!important;border-color:#00000024!important;color:#111214!important}
.fig-about-page .ax-closing .pill:is(:hover,:focus-visible){background:#111214!important;border-color:#111214!important;color:#fafaf8!important}
@media(max-width:800px){
 .ax-closing h2{font-size:36px!important;line-height:42px!important}
 .fig-about-intro .ax-stats>div:nth-child(odd){border-left:0;padding-left:0}
 .fig-about-page .ax-learn>.ax-head{margin-bottom:32px}
 .fig-about-page .ax-head{gap:16px}
}
/* hero portrait slot: fully rounded; the portrait is clipped only at the bottom corners so the head still rises above the top edge */
.fig-hero .fig-idea-pill{border-radius:999px!important;clip-path:inset(-80% 0 0 0 round 0 0 33.333% 33.333% / 0 0 50% 50%)}
.fig-hero .hero-portrait-layers{border-radius:999px}
/* radius = half the slot height (slot is 3:2, so size/3) — stays a true pill when the slot widens on hover */
.fig-hero .fig-idea-pill{clip-path:inset(-80% 0 0 0 round 0 0 calc(var(--hero-slot-size,144px) / 3) calc(var(--hero-slot-size,144px) / 3))}
/* home leadership stats: each figure centred in its cell, equal padding both sides */
.home-page .fig-leadership .proof-row>div,.home-page .fig-leadership .proof-row>div:first-child{align-items:center;justify-content:center;text-align:center;padding:32px 16px}
.home-page .fig-leadership .proof-row>div>*{text-align:center!important;width:100%}
@media(max-width:800px){.home-page .fig-leadership .proof-row>div,.home-page .fig-leadership .proof-row>div:first-child{padding:20px 8px}}

/* SEO / performance pass (2026-10-20) */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* Hero headline is the LCP element: keep it painted from the first frame (no opacity:0 start), animate transform/blur only. */
@keyframes hero-title-reveal{from{transform:translateY(32px);filter:blur(8px)}to{transform:translateY(0);filter:blur(0)}}
@keyframes mx-rise-lcp{from{transform:translate3d(0,.5em,0);filter:blur(6px)}to{transform:none;filter:none}}
html:not(.seen) .fig-hero-title .fig-title-line,html:not(.seen) .mobile-hero-title .mobile-title-row{animation-name:mx-rise-lcp}
@media(prefers-reduced-motion:reduce){html:not(.seen) .fig-hero-title .fig-title-line{animation:none}}
/* Static 404 (render.cjs route /404) */
.nf-page{max-width:var(--fig-width);margin:0 auto;padding:220px 24px 120px;color:#111214}
.nf-page .eyebrow{font:500 14px/20px var(--body);letter-spacing:.08em;color:#64666c;margin:0 0 16px}
.nf-page h1{font:500 clamp(48px,8vw,96px)/1 var(--display);margin:0 0 16px;letter-spacing:0}
.nf-page .nf-lead{font:400 20px/28px var(--body);color:#3b3d42;margin:0 0 40px}
.nf-links{list-style:none;margin:0 0 48px;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}
.nf-links a{font:500 20px/28px var(--body);color:inherit;text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.nf-page{padding:180px 20px 80px}}
/* QA 2026-10-21: case template blocks — grid items with width:800px+max-width:100% sized the implicit column to 800px on phones (header grew to 824px) */
.cs-blocks{grid-template-columns:minmax(0,1fr)}
/* QA 2026-10-21: TR "Görüşelim" pill touched the centred logo on 375px phones */
@media(max-width:400px){.mobile-call{padding:9px 12px;gap:8px}html[lang=tr] .mobile-call{font-size:14px}}
/* QA 2026-10-21: the generic mobile section rule (main>section:not(...)) beat .nf-page and pulled the 404 title under the fixed header */
@media(max-width:800px){main#main>section.nf-page{padding-top:176px;padding-bottom:80px}}

/* QA 2026-10-21: big section background loads only when the section nears the viewport (html.lazy-bg set inline in <head>, .bg-in by app.js) */
html.lazy-bg section#system.gv-ds-section:not(.bg-in){background-image:none}
/* QA 2026-10-21 · mobile covers from design (seo-gorseller/mobile-cover): <picture> swaps the source at <=480px.
   GENVA's layered cover (sky, girl, objects) is replaced by one image there; girl/objects get a 1px data source so they never download. */
picture.cover-pic{display:contents}
.fig-reel>picture>img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:480px){
 .home-page .fig-reel{aspect-ratio:1/1}
 main.genva-figma-page .genva-cover-art{left:0;transform:none;width:100%;height:100%}
 main.genva-figma-page .genva-cover-art .genva-cover-background{top:0;left:0;width:100%;height:100%;object-fit:cover}
 main.genva-figma-page .genva-cover-girl,main.genva-figma-page .genva-cover-objects,main.genva-figma-page .genva-cover-pink{display:none}
 main.cs-gain .gain-cover-art .gain-cover-background{top:0;height:100%;object-fit:cover}
}
/* QA2 2026-10-21: TR "Projeyi ziyaret et" pill touched the right edge on 375px phones */
@media(max-width:400px){html[lang=tr] .genva-cover-bottom .pill{font-size:12px;gap:6px;padding:11px 10px 11px 12px}.genva-cover-bottom>div:first-child{min-width:0}}
/* QA2: no-JS fallbacks (render.cjs adds <noscript> twins) */
html:not(.js) video[data-poster],html:not(.js) img[data-src]{display:none!important}
/* GoArt cover wordmark (Uğur's Figma 446:19240), 2026-10-21 */
.cs-wordmark-img{width:249px;height:64px}
.cs-wordmark-img img{display:block;width:100%;height:100%}
@media(max-width:800px){.cs-wordmark-img{width:187px;height:48px}}
/* GoArt mobile cover v2: square image on top, fading into the dark band where wordmark / category / button sit */
@media(max-width:480px){
 main.cs-goart .cs-cover .cs-cover-art img{height:auto;aspect-ratio:1/1;object-fit:cover;object-position:top}
 main.cs-goart .cs-cover .cs-cover-art::after{background:linear-gradient(180deg,rgba(17,18,20,.35) 0%,rgba(17,18,20,0) 22%,rgba(17,18,20,0) 46%,rgba(17,18,20,.85) 62%,#111214 70%,#111214 100%)}
}
/* SEO metinleri (2026-10-21): At a glance, availability, FAQ, 404 list */
.cs-glance{padding:0 max(24px,calc((100% - 1216px)/2)) 96px!important;background:inherit}
.cs-glance-title{font:500 14px/20px var(--body);color:#64666c;margin:0 0 16px;letter-spacing:0;text-transform:uppercase}
.cs-glance dl{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid #00000014}
.cs-glance dl>div{padding:20px 24px 0 0;border-right:1px solid #00000014;margin-right:24px}
.cs-glance dl>div:last-child{border-right:0;margin-right:0}
.cs-glance dt{font:500 14px/20px var(--body);color:#64666c;margin:0 0 8px}
.cs-glance dd{font:400 16px/24px var(--body);margin:0;color:#111214}
@media(max-width:1000px){.cs-glance dl{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-glance dl>div{border-right:0;margin-right:0;padding:16px 0;border-bottom:1px solid #00000014}.cs-glance dl>div:last-child{grid-column:1/-1}}
@media(max-width:800px){.cs-glance{padding:0 24px 48px!important}.cs-glance dl{grid-template-columns:1fr}.cs-glance dd{font-size:15px;line-height:22px}}
.fig-about-copy .availability{margin:28px 0 0;font:400 16px/24px var(--body);color:#fafaf8b8;max-width:560px}
.fig-contact-title>p.fig-contact-availability{margin:16px 0 0;font:400 16px/24px var(--body);color:#fafaf8b3}
.about-faq{padding:96px max(24px,calc((100% - 1216px)/2));background:#fafaf8;color:#111214}
.about-faq h2{font:500 clamp(32px,4vw,56px)/1.1 var(--display);margin:0 0 40px;letter-spacing:0}
.about-faq-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.about-faq-item{border-top:1px solid #00000014;padding-top:20px}
.about-faq-item h3{font:500 20px/28px var(--body);margin:0 0 12px}
.about-faq-item p{font:400 16px/24px var(--body);margin:0;color:#3b3d42}
@media(max-width:900px){.about-faq{padding:64px 24px}.about-faq-list{grid-template-columns:1fr;gap:24px}}
.nf-actions{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 48px}
.nf-list-title{font:500 14px/20px var(--body);color:#64666c;margin:0 0 16px;letter-spacing:0}
.nf-links{flex-direction:column;gap:0}
.nf-links li{border-top:1px solid #00000014}
.nf-links a{display:flex;justify-content:space-between;gap:16px;padding:14px 0;text-decoration:none}
.nf-links .nf-name{font:500 20px/28px var(--body)}
.nf-links .nf-desc{font:400 16px/28px var(--body);color:#64666c;text-align:right}
.nf-page h1{font-size:clamp(40px,6vw,80px);line-height:1.05}

/* GoArt cover (desktop): Figma 446:16000 has no legibility overlay; the site gradient dimmed the coins, their glows and ground shadows. Mobile keeps its dark text band. */
@media (min-width:481px){main.cs-goart .cs-cover .cs-cover-art::after{display:none}}

/* GoArt — Starting Point (Figma 446:16078) + Mobile App (Figma 446:16093), 2026-10-21.
   Replaces the time-travel block. Desktop is Figma 1:1 at 1440; <=1000px stacks text, scene, profile (site responsive language). */
.gsx-start{position:relative;overflow:hidden;height:1100px;background:#030303;color:#fafaf8;--gsx-ui:'Noto Sans',var(--body)}
.gsx-start-bg{position:absolute;top:0;left:50%;width:1440px;height:1100px;margin-left:-720px;pointer-events:none}
.gsx-canvas{position:absolute;left:0;top:0;width:1440px;height:1100px}
.gsx-scene{display:block;width:1440px;height:1100px;max-width:none}
@media(min-width:1441px){.gsx-start-bg{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}}
.gsx-start-head{position:relative;z-index:1;width:800px;margin-left:calc(50% - 376px);padding-top:96px}
.gsx-eyebrow{margin:0 0 24px;font:500 14px/20px var(--body);letter-spacing:0;color:#a0a2a8;text-transform:none;opacity:1}
.gsx-start h2,.gsx-mobile h2{margin:0;font:500 56px/64px var(--body);letter-spacing:0;color:#fafaf8}
.gsx-start-head>p:last-child{margin-top:32px;font:400 18px/28px var(--body);letter-spacing:0;color:rgba(255,255,255,.72)}
.gsx-profile{position:absolute;top:424px;left:50%;width:1440px;height:676px;margin-left:-720px;font-family:var(--gsx-ui);color:#fff;letter-spacing:0}
.gsx-profile p{margin:0}
.gsx-name{position:absolute;left:499.9px;top:538.1px;width:439.2px;padding:0 37.5px;text-align:center}
.gsx-name-title{height:36px;font-size:23.43px;line-height:35.14px;font-weight:500}
.gsx-name-user{display:flex;align-items:center;justify-content:center;gap:4.69px;height:24px;margin-top:4.69px!important;font-size:16.4px;line-height:23.43px;font-weight:500;color:#cbcbcb}
.gsx-name-user img{display:block;width:23.43px;height:23.43px}
.gsx-badges{position:absolute;left:426px;top:563.96px;width:636px;display:flex;align-items:center;justify-content:space-between}
.gsx-badge{position:relative;display:flex;gap:6px;height:64px}
.gsx-badge-icon{position:relative;flex:none;width:64px;height:64px}
.gsx-badge-icon img{position:absolute;left:-12px;top:-12px;width:88px;height:88px;max-width:none}
.gsx-badge-icon b{position:absolute;left:16px;top:11.1px;display:flex;align-items:center;justify-content:center;width:31.5px;height:31.5px;font-size:26.26px;line-height:32.82px;font-weight:700}
.gsx-badge-icon span{position:absolute;text-align:center;font-weight:500}
.gsx-badge-level .gsx-badge-icon span{left:17.8px;top:45.9px;width:29px;font-size:11.49px;line-height:14.77px}
.gsx-badge-energy .gsx-badge-icon span{left:12px;top:48px;width:40px;font-size:12px;line-height:16px}
.gsx-badge-text{position:relative;height:64px}
.gsx-badge-level .gsx-badge-text{width:98px}
.gsx-xp-pct{position:absolute;left:0;top:5px;font-size:14px;line-height:20px;font-weight:500}
.gsx-xp-pct small{font-size:12px;line-height:16px}
.gsx-xp-bar{position:absolute;left:0;top:29px;width:98px;height:10px}
.gsx-xp-bar::before{content:"";position:absolute;left:1px;top:1px;width:96px;height:8px;box-sizing:border-box;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:#1f1f1f}
.gsx-xp-bar i{position:absolute;left:2px;top:2px;width:70px;height:6px;border-radius:24px;background:linear-gradient(270deg,#e6e3ff .7%,#b5aeff 17.6%,#887dff 43.6%)}
.gsx-xp-num{position:absolute;left:0;top:43px;font-size:12px;line-height:16px;font-weight:400;color:#afafaf;white-space:nowrap}
.gsx-badge-energy .gsx-badge-text{width:78px;padding-top:4px}
.gsx-energy-val{font-size:14px;line-height:20px;font-weight:500}
.gsx-energy-val em{font-style:normal;font-family:inherit;color:#9eede3}
.gsx-time{display:inline-flex;align-items:center;gap:2px;height:18px;margin-top:2px!important;padding:2px 6px 2px 4px;border-radius:16px;background:#042e2c;box-shadow:inset 0 0 0 1px #2c788d;font-size:10px;line-height:14px;font-weight:500;color:#9eede3}
.gsx-time img{display:block;width:12px;height:12px}
.gsx-mobile{position:relative;overflow:hidden;isolation:isolate;padding:96px 0;background:#000;color:#fafaf8}
.gsx-mobile-bg{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;pointer-events:none}
.gsx-mobile-head{width:800px;max-width:calc(100% - 48px);margin:0 auto 64px}
.gsx-mobile-head>p:last-child{margin-top:32px;font:400 18px/28px var(--body);letter-spacing:0;color:#fafaf8}
.gsx-gallery{--gsx-inset:max(24px,calc((100vw - 1216px)/2))}
.gsx-gallery .genva-screen-track{margin:0 0 -128px;padding:0 var(--gsx-inset) 128px;scroll-padding-left:var(--gsx-inset);scroll-snap-type:none}
.gsx-gallery .genva-screen{box-shadow:0 8px 20px rgba(0,0,0,.1),0 24px 32px rgba(0,0,0,.07),0 40px 36px rgba(0,0,0,.03);transition:none}
.gsx-gallery .genva-screen:hover{transform:none}
.gsx-gallery .gsx-screen-stroke::after{content:"";position:absolute;inset:0;border:1px solid rgba(0,0,0,.88);pointer-events:none}
.gsx-gallery .genva-carousel-dots{margin-top:64px}
.gsx-gallery .genva-carousel-dots button{background:rgba(255,255,255,.48)}
.gsx-gallery .genva-carousel-dots button[aria-pressed="true"]{background:#fafaf8}
@media(max-width:1000px){
 .gsx-start{display:flex;flex-direction:column;height:auto;padding:48px 0}
 .gsx-start-head{order:0}
 .gsx-start-bg{order:1}
 .gsx-profile{order:2}
 .gsx-start-head{width:auto;max-width:848px;margin:0;padding:0 24px}
 .gsx-start-bg{--k:.609375;position:relative;left:auto;width:100%;height:calc(680px * var(--k));margin:16px 0 0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
 .gsx-canvas{left:50%;top:-360px;margin-left:-720px;transform-origin:720px 360px;transform:scale(var(--k))}
 .gsx-profile{position:relative;left:auto;top:auto;width:auto;height:auto;margin:-16px 0 0;padding:0 24px}
 .gsx-name{position:static;width:auto;padding:0}
 .gsx-badges{position:static;width:auto;margin:24px auto 0;justify-content:center;gap:32px}
}
@media(max-width:800px){
 .gsx-start h2,.gsx-mobile h2{font-size:36px;line-height:44px}
 .gsx-start-head>p:last-child,.gsx-mobile-head>p:last-child{margin-top:24px;font-size:16px;line-height:24px}
 .gsx-mobile{padding:48px 0}
 .gsx-mobile-head{margin-bottom:40px}
 .gsx-gallery .genva-carousel-dots{margin-top:32px}
}

/* GoArt Starting Point — wearable slots (Figma 496:15700-15712; 1.997px stroke drawn outside the 79.87px frame, as in Figma). Separate DOM boxes over the scene (scene export has the slots removed).
   Hover/focus: lift 4px + scale 1.04 (220ms ease-out), selected-style border, purple glow, brighter icon, lock shake. Touch: same state for 1s (app.js). */
.gsx-item{position:absolute;z-index:1;box-sizing:border-box;width:83.862px;height:83.862px;margin:-1.997px 0 0 -1.997px;padding:2.662px;border:1.997px solid rgba(255,255,255,.32);border-radius:13.311px;background:rgba(0,0,0,.48);filter:drop-shadow(0 11px 12px rgba(0,0,0,.1)) drop-shadow(0 43px 21.5px rgba(0,0,0,.09)) drop-shadow(0 98px 29.5px rgba(0,0,0,.05)) drop-shadow(0 174px 34.5px rgba(0,0,0,.01));pointer-events:auto;cursor:default;outline:none;transition:transform .22s ease-out,border-color .22s ease-out,box-shadow .22s ease-out;-webkit-tap-highlight-color:transparent}
.gsx-item.is-selected{border-color:rgba(255,255,255,.88)}
.gsx-item-in{position:relative;display:block;box-sizing:border-box;width:74.543px;height:74.543px;overflow:hidden;border:.518px solid #8f9191;border-radius:10.649px;background:#272727}
.gsx-item-in img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:bottom;transition:opacity .22s ease-out,filter .22s ease-out}
.gsx-item.is-locked .gsx-item-in{background:#3b3a3a}
.gsx-item.is-locked .gsx-item-in::before{content:"";position:absolute;inset:0;mix-blend-mode:overlay;background:radial-gradient(circle 50.7px at 39.05px 30.84px,#fff 0,rgba(255,255,255,.952) 17.9%,rgba(255,255,255,.884) 32.2%,rgba(255,255,255,.665) 49.1%,rgba(255,255,255,.432) 64.3%,rgba(255,255,255,.246) 81.9%,rgba(255,255,255,0) 100%)}
.gsx-item.is-locked .gsx-item-in::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.48)}
.gsx-item.is-locked .gsx-item-in img{z-index:1;object-position:center;opacity:.48}
.gsx-lock{position:absolute;right:8.872px;top:52.362px;z-index:2;display:flex;padding:1.331px;border:.887px solid #545454;border-radius:5.325px;box-shadow:0 .444px 3.55px rgba(127,127,127,.24);transform-origin:50% 20%}
.gsx-lock>span{display:flex;padding:1.775px;border-radius:3.55px;background:#1f1f1f}
.gsx-lock img{display:block;width:12.424px;height:12.424px}
@keyframes gsx-lock-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.gsx-item:focus-visible,.gsx-item.is-touched{transform:translateY(-4px) scale(1.04);border-color:rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(136,125,255,.35),0 0 18px 2px rgba(136,125,255,.45)}
.gsx-item:focus-visible .gsx-item-in img,.gsx-item.is-touched .gsx-item-in img{opacity:.78;filter:brightness(1.18)}
.gsx-item.is-selected:focus-visible,.gsx-item.is-selected.is-touched{box-shadow:0 0 0 1px rgba(136,125,255,.5),0 0 26px 5px rgba(136,125,255,.62)}
.gsx-item.is-selected:focus-visible .gsx-item-in img,.gsx-item.is-selected.is-touched .gsx-item-in img{opacity:1;filter:brightness(1.12)}
.gsx-item:focus-visible .gsx-lock,.gsx-item.is-touched .gsx-lock{animation:gsx-lock-shake .5s ease-out}
@media(hover:hover){
 .gsx-item:hover{transform:translateY(-4px) scale(1.04);border-color:rgba(255,255,255,.88);box-shadow:0 0 0 1px rgba(136,125,255,.35),0 0 18px 2px rgba(136,125,255,.45)}
 .gsx-item:hover .gsx-item-in img{opacity:.78;filter:brightness(1.18)}
 .gsx-item.is-selected:hover{box-shadow:0 0 0 1px rgba(136,125,255,.5),0 0 26px 5px rgba(136,125,255,.62)}
 .gsx-item.is-selected:hover .gsx-item-in img{opacity:1;filter:brightness(1.12)}
 .gsx-item:hover .gsx-lock{animation:gsx-lock-shake .5s ease-out}
}
@media(prefers-reduced-motion:reduce){
 .gsx-item,.gsx-item:hover,.gsx-item:focus-visible,.gsx-item.is-touched{transform:none;transition:border-color .22s ease-out,box-shadow .22s ease-out}
 .gsx-item .gsx-lock,.gsx-item:hover .gsx-lock,.gsx-item:focus-visible .gsx-lock,.gsx-item.is-touched .gsx-lock{animation:none}
 .gsx-item-in img{transition:none;filter:none!important;opacity:1!important}
 .gsx-item.is-locked .gsx-item-in img{opacity:.48!important}
}

/* GoArt only — chapter nav (Figma 446:16070 "SubNav Menu"): black bar, 1px rgba(255,255,255,.16) top/bottom, white labels 500 16/24, active 1.5px white underline. Other case pages keep the shared light nav. */
.cs-goart .gv-chapter-nav{background:#000;color:#fafaf8;justify-content:space-between;padding:0 max(24px,calc((100% - 1216px)/2));border-top:1px solid rgba(255,255,255,.16)!important;border-bottom:1px solid rgba(255,255,255,.16)!important;font:500 16px/24px var(--body);letter-spacing:0}
.cs-goart .gv-chapter-nav.is-stuck{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-top-color:transparent!important;border-bottom-color:rgba(255,255,255,.16)!important}
.cs-goart .gv-chapter-nav a{color:#fafaf8}
.cs-goart .gv-chapter-nav a:hover{background:transparent}
.cs-goart .gv-chapter-nav a:hover:not(.is-active){border-bottom-color:rgba(255,255,255,.32)}
.cs-goart .gv-chapter-nav a.is-active{border-bottom-color:#fafaf8}
.cs-goart .gv-chapter-nav a:focus-visible{outline-color:#fafaf8}
.cs-goart .gv-chapter-nav a[aria-disabled="true"],.cs-goart .gv-chapter-nav a[aria-disabled="true"]:hover{cursor:default;border-bottom-color:transparent}
@media(max-width:800px){.cs-goart .gv-chapter-nav{justify-content:flex-start;padding:0 8px;font-size:14px}}


/* GoArt Starting Point: the profile overlay (absolute, later in DOM) sat on top of the equipment boxes and swallowed pointer events in real browsers, so hover never reached them. */
main.cs-goart .gsx-profile{pointer-events:none}
main.cs-goart .gsx-item{pointer-events:auto}

/* GoArt Starting Point: interactive 3D avatar layers. Order: empty scene < floor glow < flattened avatar scene (fallback) < 3D canvas < equipment boxes. */
main.cs-goart .gsx-scene-empty{position:absolute;left:0;top:0;z-index:0;display:block;width:1440px;height:1100px;max-width:none}
main.cs-goart .gsx-glow{position:absolute;left:597px;top:812.3px;z-index:1;width:245px;height:151.3px;max-width:none;mix-blend-mode:screen;pointer-events:none}
main.cs-goart .gsx-scene{position:relative;z-index:2;transition:opacity .3s ease}
main.cs-goart .gsx-avatar{position:absolute;left:470px;top:410px;z-index:3;width:500px;height:580px;opacity:0;transition:opacity .3s ease;pointer-events:auto}
main.cs-goart .gsx-canvas.is-3d .gsx-scene{opacity:0}
main.cs-goart .gsx-canvas.is-3d .gsx-avatar{opacity:1}
main.cs-goart .gsx-item{z-index:4}
.gsx-avatar-canvas:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:-2px;border-radius:12px}
@media (prefers-reduced-motion:reduce){main.cs-goart .gsx-scene,main.cs-goart .gsx-avatar{transition:none}}

/* GoArt Starting Point: pulsing glow around/behind the 3D avatar (Uğur's reference: soft blue-white halo around head and shoulders) + livelier colours.
   Tune here: radial-gradient alphas (aura strength), drop-shadow values in @keyframes gsx-glow (outline glow), animation duration (pulse speed), saturate()/contrast() (colour punch). */
main.cs-goart .gsx-aura{position:absolute;left:470px;top:400px;z-index:2;width:500px;height:600px;pointer-events:none;opacity:0;mix-blend-mode:screen;
 background:radial-gradient(ellipse 50% 46% at 50% 36%,rgba(205,232,255,.85) 0%,rgba(140,150,255,.55) 36%,rgba(100,56,230,.24) 62%,rgba(100,56,230,0) 80%)}
main.cs-goart .gsx-canvas.is-3d .gsx-aura{animation:gsx-aura 3.6s ease-in-out .2s infinite both}
@keyframes gsx-aura{0%,100%{opacity:.55;transform:scale(.95)}50%{opacity:1;transform:scale(1.07)}}
main.cs-goart .gsx-canvas.is-3d .gsx-avatar-canvas{filter:saturate(1.3) contrast(1.06) drop-shadow(0 0 16px rgba(150,205,255,.7)) drop-shadow(0 0 40px rgba(125,105,255,.45));animation:gsx-glow 3.6s ease-in-out .2s infinite both}
@keyframes gsx-glow{0%,100%{filter:saturate(1.3) contrast(1.06) drop-shadow(0 0 9px rgba(140,200,255,.4)) drop-shadow(0 0 26px rgba(120,100,255,.25))}50%{filter:saturate(1.3) contrast(1.06) drop-shadow(0 0 20px rgba(175,222,255,.95)) drop-shadow(0 0 54px rgba(130,110,255,.65))}}
@media (prefers-reduced-motion:reduce){main.cs-goart .gsx-canvas.is-3d .gsx-aura{animation:none;opacity:.85}main.cs-goart .gsx-canvas.is-3d .gsx-avatar-canvas{animation:none}}

/* 2026-10-22 · GoArt Mobile App (Figma 446:16093, 1440×1300): background is now Figma's three linear gradients + the "Lights" layer (496:16105; live colours from the open file: #5E18FF + #918DD7, 72% opacity, raster of the blurred SVG, cropped to the section top). Screens 01/02/03/05/07 carry the 1px stroke (04/06 do not, as in Figma). */
main.cs-goart .gsx-mobile{background:linear-gradient(201.394deg,#000 26.505%,rgba(0,0,0,0) 91.749%),linear-gradient(201.34deg,#000 26.483%,rgba(0,0,0,0) 104.36%),linear-gradient(168.149deg,#000 14.001%,#5d52ce 106.78%)}
main.cs-goart .gsx-mobile-lights{position:absolute;left:calc(50% - 271.6px);top:0;z-index:-1;display:block;width:1891px;height:486px;max-width:none;pointer-events:none}

/* 2026-10-22 · GoArt Discovery & Navigation (Figma 446:16110, 1440×2084). Light section under Mobile App; sits under the "Mobile" chapter tab (Figma SubNav 446:16070 has no own label). */
main.cs-goart .gsx-disc{position:relative;padding:96px 0;background:#fafaf8;color:#111214}
main.cs-goart .gsx-disc-head{width:800px;max-width:calc(100% - 48px);margin:0 auto}
main.cs-goart .gsx-disc .gsx-eyebrow{color:#64666c}
main.cs-goart .gsx-disc h2{margin:0;font:500 56px/64px var(--body);letter-spacing:0;color:#111214}
main.cs-goart .gsx-disc-head>p:last-child{margin:32px 0 0;font:400 18px/28px var(--body);letter-spacing:0;color:#111214}
main.cs-goart .gsx-disc-body{width:1216px;max-width:calc(100% - 48px);margin:32px auto 0;padding:24px 0}
/* Figma: four screens 296/295/295/296 wide, 32px gaps = 1278px, centred on the 1216px column (31px over each side). */
main.cs-goart .gsx-disc-phones{display:flex;align-items:center;justify-content:center;gap:32px;margin:0 -31px;outline:none}
main.cs-goart .gsx-disc-phone{display:block;flex:0 1 296px;min-width:0;width:296px;height:auto;max-width:none}
main.cs-goart .gsx-disc-phone[width="295"]{flex-basis:295px;width:295px}
main.cs-goart .gsx-disc-phones:focus-visible{outline:2px solid #111214;outline-offset:4px}
main.cs-goart .gsx-disc-txt{margin-top:24px;color:#111214}
main.cs-goart .gsx-disc-txt h3{margin:0;font:500 20px/30px var(--body);letter-spacing:0;color:#111214}
main.cs-goart .gsx-disc-txt p{margin:12px 0 0;font:400 16px/24px var(--body);letter-spacing:0;color:#111214}
main.cs-goart .gsx-disc-pair{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:64px}
main.cs-goart .gsx-disc-card{min-width:0}
main.cs-goart .gsx-disc-panel{display:block;width:100%;height:auto;max-width:none;background:#111214}
@media(max-width:1340px){main.cs-goart .gsx-disc-phones{margin:0}}
@media(max-width:900px){main.cs-goart .gsx-disc-pair{grid-template-columns:1fr;gap:48px;margin-top:48px}}
@media(max-width:800px){
 main.cs-goart .gsx-disc{padding:48px 0}
 main.cs-goart .gsx-disc h2{font-size:36px;line-height:44px}
 main.cs-goart .gsx-disc-head>p:last-child{margin-top:24px;font-size:16px;line-height:24px}
 main.cs-goart .gsx-disc-body{margin-top:16px}
}
/* Phones: horizontal scroll strip on small screens (same idea as the Mobile App gallery). */
@media(max-width:700px){
 main.cs-goart .gsx-disc-phones{justify-content:flex-start;gap:16px;margin:0 -24px;padding:0 24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;scrollbar-width:none;overscroll-behavior-x:contain}
 main.cs-goart .gsx-disc-phones::-webkit-scrollbar{display:none}
 main.cs-goart .gsx-disc-phone,main.cs-goart .gsx-disc-phone[width="295"]{flex:0 0 240px;width:240px;scroll-snap-align:start}
 main.cs-goart .gsx-disc-phones:focus-visible{outline-offset:-2px}
}

/* Avatar discovery cue: appears only when the interactive model is ready. */
main.cs-goart .gsx-avatar-hint{position:absolute;z-index:4;left:50%;bottom:-95px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid rgba(255,255,255,.22);border-radius:24px;background:rgba(12,8,28,.75);color:#fff;font:400 14px/20px var(--body);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s ease}
main.cs-goart .gsx-avatar-hint.is-visible{opacity:1}
main.cs-goart .gsx-avatar-hint span{font-size:22px}
main.cs-goart .gsx-avatar-canvas:focus-visible{outline:2px solid #b5aeff!important;outline-offset:-4px}
@media(prefers-reduced-motion:reduce){main.cs-goart .gsx-avatar-hint{transition:none}}

/* GoArt website case sections — Figma 446:16201 and 523:39150. */
main.cs-goart .goart-web-home,main.cs-goart .goart-web-paths{position:relative;isolation:isolate;overflow:hidden;color:#fafaf8;padding:96px 0 72px;background:#080312}
main.cs-goart .goart-web-home{background:radial-gradient(ellipse at 95% 45%,#1b3b60 0,transparent 48%),radial-gradient(ellipse at 80% 70%,#29134d 0,transparent 48%),#080312}
main.cs-goart .goart-web-head{width:800px;max-width:calc(100% - 48px);margin:0 auto 56px}
main.cs-goart .goart-web-head .gv-eyebrow{color:#a1a3a9;font:400 14px/20px var(--body);margin:0 0 24px}
main.cs-goart .goart-web-head h2{font:500 56px/64px var(--body);letter-spacing:0;margin:0 0 32px;color:inherit}
main.cs-goart .goart-web-head>p:not(.gv-eyebrow){font:400 18px/28px var(--body);margin:0 0 32px}
main.cs-goart .goart-web-composition{width:88.888889%;max-width:1280px;margin:0 auto}
main.cs-goart .goart-web-composition img{display:block;width:100%;height:auto}
main.cs-goart .goart-web-paths{padding-bottom:0;background:radial-gradient(ellipse at 85% 90%,#40223f 0,transparent 65%),#030303}
main.cs-goart .goart-web-paths .goart-web-head{margin-bottom:56px}
main.cs-goart .goart-paths-art{position:relative;width:100%;aspect-ratio:1440/420;overflow:hidden}
main.cs-goart .goart-paths-art img{position:absolute;bottom:0;left:0;display:block;width:100%;height:auto;max-width:none}
@media(max-width:800px){main.cs-goart .goart-web-home,main.cs-goart .goart-web-paths{padding-top:48px}main.cs-goart .goart-web-head h2{font-size:36px;line-height:44px}main.cs-goart .goart-web-head>p:not(.gv-eyebrow){font-size:16px;line-height:24px;margin-bottom:24px}main.cs-goart .goart-web-head{margin-bottom:32px}main.cs-goart .goart-paths-art{width:180%;margin-left:-40%;aspect-ratio:1440/420}}

@media(max-width:800px){main.cs-goart .goart-web-composition{width:calc(100% - 48px)}}

/* Keep pointer depth on the image separate from the scroll entrance on its wrapper. */
main.cs-goart .goart-web-composition img,main.cs-goart .goart-paths-art img{transform-origin:50% 70%;transition:transform .55s cubic-bezier(.22,1,.36,1),filter .55s ease;backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){main.cs-goart .goart-web-composition img,main.cs-goart .goart-paths-art img{transition:none;transform:none!important;filter:none!important}}

/* Independent overlapping website screens, preserving the Figma composition. */
main.cs-goart .goart-paths-separate{width:100%;margin:0;aspect-ratio:1440/420;overflow:hidden}
main.cs-goart .goart-path-card{position:absolute;top:75px;width:30.22%;transform:rotate(-5deg);transform-origin:top left;transition:translate .55s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 12px 22px rgba(0,0,0,.25))}
main.cs-goart .goart-path-card img{position:static;width:100%;height:auto;transform:none!important;filter:none!important;transition:none}
main.cs-goart .goart-path-play{left:-2.33%;z-index:1}
main.cs-goart .goart-path-publish{left:21.78%;z-index:2}
main.cs-goart .goart-path-invest{left:44.70%;z-index:3}
main.cs-goart .goart-path-create{left:71.94%;z-index:4}
@media(hover:hover) and (pointer:fine){main.cs-goart .goart-path-card:hover{translate:0 -36px;z-index:5}}
@media(max-width:800px){main.cs-goart .goart-paths-separate{width:150%;margin-left:-25%;aspect-ratio:1440/500}main.cs-goart .goart-path-card{top:40px}}
@media(prefers-reduced-motion:reduce){main.cs-goart .goart-path-card{transition:none}main.cs-goart .goart-path-card:hover{translate:none}}

/* Supplied 2x composition: 2432 × 1746 pixels displayed at 1216 × 873. */
main.cs-goart .goart-web-composition{width:84.444444%;max-width:1216px}
@media(max-width:800px){main.cs-goart .goart-web-composition{width:calc(100% - 48px)}}

/* Inventory, wallet, profile and menu: independent 10% hover zoom. */
main.cs-goart .gsx-disc-phone{position:relative;transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){main.cs-goart .gsx-disc-phone:hover{transform:scale(1.1);z-index:2}}
@media(prefers-reduced-motion:reduce){main.cs-goart .gsx-disc-phone{transition:none}}

/* Time Traveler gallery: 10% independent hover zoom with room above the scroll track. */
.gsx-gallery .genva-screen-track{margin-top:-40px;padding-top:40px}
.gsx-gallery .genva-screen{position:relative;transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){.gsx-gallery .genva-screen:hover{transform:scale(1.1);z-index:2}}
@media(prefers-reduced-motion:reduce){.gsx-gallery .genva-screen{transition:none}}

/* Final GoArt Figma handoff: 1216px content = 112px insets on a 1440px canvas. */
main.cs-goart .gsx-disc-phones{gap:32px;margin-left:0;margin-right:0}
main.cs-goart .gsx-disc-phone,main.cs-goart .gsx-disc-phone[width="295"]{flex:1 1 0;width:0;min-width:0}
main.cs-goart .goart-web-home{padding-bottom:96px}
main.cs-goart .goart-web-head{margin-bottom:32px}
main.cs-goart .goart-web-paths .goart-web-head{margin-bottom:60px}
main.cs-goart .goart-office-final,main.cs-goart .goart-team-final,main.cs-goart .goart-outcome-final{position:relative;isolation:isolate;overflow:hidden;padding:96px 0;background:#fafaf8;color:#111214}
main.cs-goart .goart-final-head{width:800px;max-width:calc(100% - 48px);margin:0 auto}
main.cs-goart .goart-final-head>.gv-eyebrow{margin:0 0 24px;font:400 14px/20px var(--body);letter-spacing:0;color:#64666c;opacity:1}
main.cs-goart .goart-final-head h2{margin:0 0 32px;font:500 56px/64px var(--body);letter-spacing:0;color:inherit}
main.cs-goart .goart-final-head>p:not(.gv-eyebrow){margin:0 0 32px;font:400 18px/28px var(--body);color:inherit}
main.cs-goart .goart-final-head>p:last-child{margin-bottom:0}
main.cs-goart .goart-office-final{padding-bottom:0;min-height:948px}
main.cs-goart .goart-office-mark{position:absolute;z-index:-1;right:-144px;top:328px;width:535px;height:auto;pointer-events:none}
main.cs-goart .goart-office-art{position:relative;height:448px;margin-top:32px;overflow:hidden}
main.cs-goart .goart-office-shot{position:absolute;top:105px;width:41.1111%;max-width:none;height:auto;transform:rotate(-5deg);transform-origin:top left;box-shadow:0 12px 24px #00000012;transition:translate .5s cubic-bezier(.22,1,.36,1)}
main.cs-goart .goart-office-shot-1{left:-12.2222%;z-index:1}
main.cs-goart .goart-office-shot-2{left:26.1111%;z-index:2}
main.cs-goart .goart-office-shot-3{left:60.4167%;z-index:3}
main.cs-goart .goart-team-final{background:radial-gradient(ellipse 60% 60% at 50% 118%,#224872 0,#240954 40%,transparent 80%),#0a050b;color:#b7b5b8;padding-bottom:120px}
main.cs-goart .goart-team-final h2{color:#fafaf8}
main.cs-goart .goart-team-final .gv-eyebrow{color:#a1a3a9}
main.cs-goart .goart-final-awards{display:grid;grid-template-columns:1fr 1fr;gap:64px;width:1216px;max-width:calc(100% - 48px);margin:56px auto 0}
main.cs-goart .goart-final-awards figure{height:160px;margin:0;border:1px solid #ffffff14;background:#ffffff14;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
main.cs-goart .goart-final-awards img{width:272px;height:64px;object-fit:contain}
main.cs-goart .goart-final-awards figure:nth-child(2) img{width:184px;height:64px}
main.cs-goart .goart-final-awards figcaption{font:400 14px/20px var(--body);color:#d0cbd2}
main.cs-goart .goart-outcome-final{padding:96px max(24px,calc((100% - 1216px)/2))}
main.cs-goart .goart-outcome-final .goart-final-head{margin:0;max-width:100%}
main.cs-goart .goart-outcome-final h2{margin-bottom:0}
main.cs-goart .goart-final-delivered{margin-top:48px}
main.cs-goart .goart-final-delivered>p{font:400 14px/20px var(--body);color:#64666c;margin:0 0 16px}
main.cs-goart .goart-final-delivered ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
main.cs-goart .goart-final-delivered li{display:flex;gap:24px;font:400 18px/28px var(--body)}
main.cs-goart .goart-final-delivered li span{font:400 16px/24px var(--body);color:#64666c;min-width:22px}
main.cs-goart .goart-outcome-final blockquote{max-width:900px;margin:48px 0 0;font:400 32px/42px var(--body);letter-spacing:0}
@media(hover:hover) and (pointer:fine){main.cs-goart .goart-office-shot:hover{translate:0 -28px;z-index:4}}
@media(max-width:800px){main.cs-goart .goart-office-final,main.cs-goart .goart-team-final,main.cs-goart .goart-outcome-final{padding-top:48px;min-height:0}main.cs-goart .goart-final-head h2{font-size:36px;line-height:44px}main.cs-goart .goart-final-head>p:not(.gv-eyebrow){font-size:16px;line-height:24px;margin-bottom:24px}main.cs-goart .goart-office-art{height:300px;width:150%;margin-left:-25%}main.cs-goart .goart-office-shot{top:60px}main.cs-goart .goart-final-awards{gap:24px;grid-template-columns:1fr;margin-top:40px}main.cs-goart .goart-outcome-final blockquote{font-size:26px;line-height:36px}main.cs-goart .goart-final-delivered li{font-size:16px;line-height:24px}}
@media(max-width:700px){main.cs-goart .gsx-disc-phones{margin:0 -24px}main.cs-goart .gsx-disc-phone,main.cs-goart .gsx-disc-phone[width="295"]{flex:0 0 240px;width:240px}}
@media(prefers-reduced-motion:reduce){main.cs-goart .goart-office-shot{transition:none}}
main.cs-goart .goart-web-composition{padding-top:24px;padding-bottom:24px}
main.cs-goart .goart-office-mark{filter:brightness(0) invert(1)}

/* Hero role descriptor: quieter hierarchy beneath the title. */
.hero-statement span{display:inline-block;margin-top:8px;font:400 18px/26px var(--body);letter-spacing:0;color:#a1a3a9}
@media(max-width:800px){.hero-statement span{max-width:310px;font-size:14px;line-height:21px;margin-top:7px}}

.goart-web-excellence-wordmark{display:block;min-height:64px;text-align:center;font:500 25px/30px var(--body);letter-spacing:.06em;color:#fff}
.goart-web-excellence-wordmark small{font-size:12px;letter-spacing:.3em}

main.cs-goart .goart-final-awards figcaption{padding:0 16px;text-align:center}
@media(max-width:1100px){main.cs-goart .goart-final-awards figcaption{font-size:12px;line-height:18px}}

/* MeetSense compact decision narratives */
.cs-meetsense .meet-decision{max-width:1000px;margin:40px 0 8px}.cs-meetsense .meet-decision h3{font-size:clamp(24px,2.5vw,40px);line-height:1.2;margin:0 0 20px;letter-spacing:-.025em}.cs-meetsense .meet-decision p{font-size:clamp(18px,1.5vw,24px);line-height:1.55;margin:0}.cs-meetsense #decisions .cs-media{margin-bottom:64px}

.cs-meetsense .meet-decision p+p{margin-top:24px}

/* MeetSense: Figma 551:46161 / 551:46287. Scoped to this case only. */
main.cs-meetsense .cs-cover{height:640px;min-height:640px;background:#090313}
main.cs-meetsense .cs-cover-art img{object-position:center bottom}
main.cs-meetsense .cs-cover-art::after{background:linear-gradient(180deg,rgba(9,3,19,.45),transparent 40%,rgba(9,3,19,.12) 65%,rgba(240,89,36,.5))}
main.cs-meetsense .cs-wordmark-img{display:flex;align-items:center;gap:13px;width:298px;height:80px}
main.cs-meetsense .cs-wordmark-img::before{content:"";display:block;width:79.4667px;height:80px;flex:none;background:url('/assets/meetsense-case/logo-symbol.svg') no-repeat center}
main.cs-meetsense .cs-wordmark-img img{width:205.289px;height:28.3333px;object-fit:contain}
main.cs-meetsense .genva-cover-bottom{bottom:48px}
main.cs-meetsense .genva-cover-bottom>div>p{margin-top:12px}
main.cs-meetsense .meet-start{position:relative;isolation:isolate;overflow:hidden;background:#030303;color:#fafaf8;min-height:1336px;padding:96px 24px 560px;box-sizing:border-box;scroll-margin-top:66px}
main.cs-meetsense .meet-start-bg{position:absolute;z-index:-2;width:100%;height:100%;inset:0;object-fit:fill;transform:rotate(-90deg) scale(1.5);opacity:.9;mask-image:linear-gradient(180deg,transparent 25%,#000 56%,transparent 95%)}
main.cs-meetsense .meet-start::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#030303 26%,rgba(3,3,3,.5) 48%,transparent 70%,rgba(3,3,3,.8))}
main.cs-meetsense .meet-start-copy{position:relative;z-index:2;width:800px;max-width:100%;margin:0 auto}
main.cs-meetsense .meet-start .gv-eyebrow{font:500 14px/20px var(--body);color:#a0a2a8;margin:0 0 24px}
main.cs-meetsense .meet-start h2{font:500 56px/64px var(--body);letter-spacing:0;margin:0 0 32px;color:#fafaf8}
main.cs-meetsense .meet-start-copy>p:not(.gv-eyebrow){font:400 18px/28px var(--body);color:rgba(255,255,255,.72);margin:0 0 32px}
main.cs-meetsense .meet-start-laptop{position:absolute;top:701px;left:calc(50% - 433px);width:1488.162px;height:1151px;max-width:none;object-fit:cover}
main.cs-meetsense #research .gv-dec-head{width:800px;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}
@media(max-width:800px){
 main.cs-meetsense .cs-cover{height:560px;min-height:560px}
 main.cs-meetsense .cs-cover-art img{object-position:56% bottom}
 main.cs-meetsense .cs-wordmark-img{transform:scale(.75);transform-origin:left bottom;margin-right:-74px}
 main.cs-meetsense .meet-start{padding:48px 24px 340px;min-height:0}
 main.cs-meetsense .meet-start h2{font-size:36px;line-height:44px}
 main.cs-meetsense .meet-start-copy>p:not(.gv-eyebrow){font-size:16px;line-height:24px;margin-bottom:24px}
 main.cs-meetsense .meet-start-laptop{top:auto;bottom:-190px;left:6%;width:780px;height:auto}
}
@media(prefers-reduced-motion:reduce){main.cs-meetsense .meet-start *{animation:none!important}}
main.cs-meetsense .cs-cover{width:100%!important;max-width:100%!important}
@media(max-width:1000px){
 main.cs-meetsense .meet-start{padding:48px 24px 0;min-height:0}
 main.cs-meetsense .meet-start h2{font-size:36px;line-height:44px}
 main.cs-meetsense .meet-start-copy>p:not(.gv-eyebrow){font-size:16px;line-height:24px;margin-bottom:24px}
 main.cs-meetsense .meet-start-laptop{position:relative;top:auto;bottom:auto;left:auto;width:180%;height:auto;margin:32px 0 -24% 0}
}
main.cs-meetsense .meet-start .gv-eyebrow{letter-spacing:0}

/* User-supplied MeetSense case cover includes the final colour treatment. */
main.cs-meetsense .cs-cover .cs-cover-art::after{display:none}
main.cs-meetsense .cs-cover .cs-cover-art img{object-position:center}
main .fig-project-meetsense .fig-cover-image{object-fit:cover;object-position:center}

/* Exact Figma background fills: original crop + full gradient stack, 2x lossless. */
main.cs-meetsense .meet-start-bg{inset:0;left:50%;top:0;width:1440px;height:1336px;max-width:none;object-fit:fill;transform:translateX(-50%);opacity:1;mask-image:none}
main.cs-meetsense .meet-start::after{display:none}
@media(max-width:1000px){main.cs-meetsense .meet-start-bg{top:auto;bottom:0;width:1440px;height:1336px}}

/* Extend the exact light artwork across wide viewports without exposed edges. */
main.cs-meetsense .meet-start-bg{left:0;top:0;bottom:auto;width:100%;height:100%;object-fit:cover;object-position:center top;transform:none}

/* Updated 1920×1336 reference: Figma 561:53970. */
main.cs-meetsense .meet-start-bg{width:100%;height:100%;object-fit:cover;object-position:center top}
@media(min-width:1001px){main.cs-meetsense .meet-start-laptop{left:calc(50% - 673px);top:701px;width:1488.162px;height:1151px}}
@media(min-width:1001px) and (max-width:1919px){main.cs-meetsense .meet-start-laptop{left:14.9479167%;width:77.508417%;height:auto}}

/* Floating Figma card 568:115007; its full raster stays separate from the laptop. */
main.cs-meetsense .meet-start-device{position:absolute;top:701px;left:calc(50% - 673px);width:1488.162px;height:1151px;isolation:isolate}
main.cs-meetsense .meet-start-device .meet-start-laptop{position:static;display:block;width:100%;height:auto;max-width:none;margin:0;transform:none}
main.cs-meetsense .meet-start-floating-card{position:absolute;z-index:1;left:34%;top:19%;width:24.2%;height:auto;max-width:none;transform:matrix(.98,-.04,.2,1,0,0);transform-origin:top left;filter:drop-shadow(-12px 20px 18px rgba(0,0,0,.5));pointer-events:none}
@media(min-width:1001px) and (max-width:1919px){main.cs-meetsense .meet-start-device{left:14.9479167%;width:77.508417%;height:auto}}
@media(max-width:1000px){main.cs-meetsense .meet-start-device{position:relative;top:auto;left:auto;width:180%;height:auto;margin:32px 0 -24%}main.cs-meetsense .meet-start-floating-card{left:20%;top:19%;width:28%}}
/* Align the lifted card with its source card, rather than the side panel. */
main.cs-meetsense .meet-start-floating-card{left:25%;top:19%;width:19%;transform:matrix(.98,-.04,.2,1,0,0);filter:drop-shadow(-10px 16px 14px rgba(0,0,0,.5))}
@media(max-width:1000px){main.cs-meetsense .meet-start-floating-card{left:25%;top:19%;width:19%}}
/* Clip the exported card to its actual Figma corner radius before transforming it. */
main.cs-meetsense .meet-start-floating-card{border-radius:4.444444% / 6.20155%;overflow:hidden}
/* MeetSense layout pass 2026-10-23: Research (Figma 560:53329), Decisions (569:115082), Design Language. .meet-slot / .is-slot await Figma exports. */
main.cs-meetsense .meet-wrap{width:1216px;max-width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}
main.cs-meetsense .meet-research,main.cs-meetsense .meet-decisions,main.cs-meetsense .meet-language{padding:96px 24px;scroll-margin-top:80px}
main.cs-meetsense .meet-research{background:#fafaf8;color:#111214}
main.cs-meetsense .meet-decisions{background:linear-gradient(20.88deg,#dabba3 9.56%,#ef6406 25.56%,#c60f01 41.59%,#620301 61.5%,#060505 72.37%);color:#fafaf8}
main.cs-meetsense .meet-language{background:#030303;color:#fafaf8;padding-top:160px;padding-bottom:160px}
main.cs-meetsense .meet-head{width:800px;max-width:100%;margin:0 auto}
main.cs-meetsense .meet-head .gv-eyebrow{font:500 14px/20px var(--body);letter-spacing:0;text-transform:uppercase;opacity:1;color:#6b6d72;margin:0 0 24px}
main.cs-meetsense :is(.meet-decisions,.meet-language) .meet-head .gv-eyebrow{color:#a0a2a8}
main.cs-meetsense .meet-head h2{font:500 56px/64px var(--body);letter-spacing:0;margin:0 0 32px}
main.cs-meetsense .meet-head>p:not(.gv-eyebrow){font:400 18px/28px var(--body);margin:0}
main.cs-meetsense .meet-language .meet-head>p:not(.gv-eyebrow){color:rgba(255,255,255,.72)}
main.cs-meetsense .meet-language .meet-head{margin-bottom:96px}
/* Shared image slot + caption */
main.cs-meetsense .meet-slot{margin:0 0 24px;background:#111214;overflow:hidden}
main.cs-meetsense .meet-slot img{display:block;width:100%;height:100%;object-fit:cover}
main.cs-meetsense :is(.meet-card,.meet-dec) h3{font:500 20px/30px var(--body);letter-spacing:0;margin:0 0 12px}
main.cs-meetsense :is(.meet-card,.meet-dec) p{font:400 16px/24px var(--body);margin:0}
main.cs-meetsense .meet-dec p+p{margin-top:12px}
/* Research: three square cards */
main.cs-meetsense .meet-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:80px}
main.cs-meetsense .meet-card .meet-slot{aspect-ratio:1}
/* Decisions: wide row, then two halves */
main.cs-meetsense .meet-dec-rows{display:flex;flex-direction:column;gap:64px;margin-top:88px}
main.cs-meetsense .meet-dec-row.is-half{display:grid;grid-template-columns:1fr 1fr;gap:64px;color:#111214}
main.cs-meetsense .is-wide .meet-slot{aspect-ratio:1216/640}
main.cs-meetsense .is-half .meet-slot{aspect-ratio:576/592}
/* Design Language: bento of Figma slots */
main.cs-meetsense .meet-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:520px;gap:16px}
main.cs-meetsense .meet-tile{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#0f1013;border:1px solid rgba(255,255,255,.08)}
main.cs-meetsense .t-logo,main.cs-meetsense .t-components{grid-column:span 8}
main.cs-meetsense .t-color,main.cs-meetsense .t-type{grid-column:span 4}
main.cs-meetsense .t-themes,main.cs-meetsense .t-motion{grid-column:span 6;height:440px;align-self:start}
main.cs-meetsense .t-logo{display:flex;align-items:center;justify-content:center;gap:20px;background:radial-gradient(80% 90% at 50% 110%,rgba(240,89,36,.55),transparent 70%),linear-gradient(180deg,#090313,#14060f)}
main.cs-meetsense .meet-logo-symbol{width:120px;height:auto}
main.cs-meetsense .meet-logo-word{width:308px;height:auto}
main.cs-meetsense .meet-tile.is-slot{border:1px dashed rgba(255,255,255,.18);background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 12px,transparent 12px 24px),#0b0b0d}
main.cs-meetsense .meet-tile.is-slot::after{content:attr(data-slot);position:absolute;left:24px;bottom:20px;font:500 13px/20px var(--body);color:rgba(255,255,255,.45)}
@media(max-width:1000px){
 main.cs-meetsense .meet-research,main.cs-meetsense .meet-decisions{padding:64px 24px}
 main.cs-meetsense .meet-language{padding:96px 24px}
 main.cs-meetsense .meet-head h2{font-size:36px;line-height:44px;margin-bottom:24px}
 main.cs-meetsense .meet-head>p:not(.gv-eyebrow){font-size:16px;line-height:24px}
 main.cs-meetsense .meet-language .meet-head{margin-bottom:56px}
 main.cs-meetsense .meet-cards{grid-template-columns:1fr;gap:40px;margin-top:48px}
 main.cs-meetsense .meet-dec-rows{margin-top:48px;gap:40px}
 main.cs-meetsense .meet-dec-row.is-half{grid-template-columns:1fr;gap:40px}
 main.cs-meetsense .meet-decisions{background:linear-gradient(8deg,#dabba3 4%,#ef6406 18%,#c60f01 36%,#620301 58%,#060505 72%)}
 main.cs-meetsense .meet-slot{margin-bottom:20px}
 main.cs-meetsense .meet-bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:12px}
 main.cs-meetsense .meet-tile{grid-column:span 2!important;height:auto!important;aspect-ratio:16/10;border-radius:16px}
 main.cs-meetsense .t-color,main.cs-meetsense .t-type{grid-column:span 1!important;aspect-ratio:3/4}
 main.cs-meetsense .meet-logo-symbol{width:64px}
 main.cs-meetsense .meet-logo-word{width:170px}
 main.cs-meetsense .meet-tile.is-slot::after{left:16px;bottom:12px;font-size:12px;right:16px}
}
/* Floating card: corners are now transparent in the asset, so no CSS clip; scaled +10% around its centre. */
main.cs-meetsense .meet-start-floating-card{border-radius:0;overflow:visible;left:24.05%;top:18.12%;width:20.9%}
@media(max-width:1000px){main.cs-meetsense .meet-start-floating-card{left:24.05%;top:18.12%;width:20.9%}}
/* Floating card tilt is baked into the asset (high-quality resample); CSS only places it. Bounds = card 20.9% wide, tilted. */
main.cs-meetsense .meet-start-floating-card{left:24.05%;top:17.04%;width:23.48%;transform:none;border-radius:0;overflow:visible;filter:drop-shadow(-14px 24px 22px rgba(0,0,0,.55))}
@media(max-width:1000px){main.cs-meetsense .meet-start-floating-card{left:24.05%;top:17.04%;width:23.48%;filter:drop-shadow(-6px 10px 10px rgba(0,0,0,.5))}}

/* Four-corner reference mapping; unwarped transparent master is transformed once. */
main.cs-meetsense .meet-start-floating-card{left:25%;top:19%;width:20.9%;height:auto;transform-origin:0 0;transform:matrix(.88,-.033,.161,1.05,0,0);border-radius:0;overflow:visible;filter:drop-shadow(-10px 18px 15px rgba(0,0,0,.5))}
@media(max-width:1000px){main.cs-meetsense .meet-start-floating-card{left:25%;top:19%;width:20.9%}}
/* Lift the card independently of its four-corner perspective transform. */
main.cs-meetsense .meet-start-floating-card{top:16%;translate:0 -12px;filter:drop-shadow(-12px 28px 20px rgba(0,0,0,.58));animation:meet-card-hover 5s ease-in-out infinite}
@keyframes meet-card-hover{0%,100%{translate:0 -12px}50%{translate:0 -22px}}
@media(prefers-reduced-motion:reduce){main.cs-meetsense .meet-start-floating-card{animation:none;translate:0 -12px}}
@media(max-width:1000px){main.cs-meetsense .meet-start-floating-card{top:16%}}

/* Cover the source card while retaining the lifted perspective. */
main.cs-meetsense .meet-start-floating-card{left:23.5%;width:21.8%}
@media(max-width:1000px){main.cs-meetsense .meet-start-floating-card{left:23.5%;width:21.8%}}
/* MeetSense logo story (Design Language). .t-logo-steps awaits Uğur's construction visual. Bento rebalanced: 3 × span 4, then 2 × span 6. */
main.cs-meetsense .meet-logo-story{margin-bottom:120px}
main.cs-meetsense .meet-logo-copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end;margin-bottom:48px}
main.cs-meetsense .meet-logo-copy .gv-eyebrow{font:500 14px/20px var(--body);letter-spacing:0;text-transform:uppercase;opacity:1;color:#a0a2a8;margin:0 0 24px}
main.cs-meetsense .meet-logo-copy h3{font:500 40px/48px var(--body);letter-spacing:0;margin:0}
main.cs-meetsense .meet-logo-copy>p{font:400 18px/28px var(--body);color:rgba(255,255,255,.72);margin:0}
main.cs-meetsense .meet-logo-visuals{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;height:440px}
main.cs-meetsense .meet-logo-visuals .t-logo{grid-column:auto}
main.cs-meetsense .meet-bento .t-color,main.cs-meetsense .meet-bento .t-type,main.cs-meetsense .meet-bento .t-motion{grid-column:span 4;height:520px}
main.cs-meetsense .meet-bento .t-components,main.cs-meetsense .meet-bento .t-themes{grid-column:span 6;height:440px;align-self:start}
@media(max-width:1000px){
 main.cs-meetsense .meet-logo-story{margin-bottom:64px}
 main.cs-meetsense .meet-logo-copy{grid-template-columns:1fr;gap:16px;margin-bottom:32px}
 main.cs-meetsense .meet-logo-copy h3{font-size:28px;line-height:36px}
 main.cs-meetsense .meet-logo-copy>p{font-size:16px;line-height:24px}
 main.cs-meetsense .meet-logo-visuals{grid-template-columns:1fr;gap:12px;height:auto}
 main.cs-meetsense .meet-logo-visuals .meet-tile{aspect-ratio:16/10;height:auto}
 main.cs-meetsense .meet-bento .t-motion{grid-column:span 2!important}
}
/* MeetSense Research: tool logos float around the heading (Figma 560:53329, positions relative to the 1440 frame). */
main.cs-meetsense .meet-research{position:relative;overflow:hidden}
main.cs-meetsense .meet-research-floats{position:absolute;left:50%;top:0;width:1440px;height:100%;transform:translateX(-50%);pointer-events:none}
main.cs-meetsense .meet-research-floats img{position:absolute;display:block;max-width:none}
main.cs-meetsense .mf-otter{left:1166px;top:148px;width:172px;height:172px}
main.cs-meetsense .mf-tldv{left:1043px;top:56px;width:93px;height:97px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)) drop-shadow(0 15px 15px rgba(0,0,0,.16)) drop-shadow(0 33px 20px rgba(0,0,0,.09))}
main.cs-meetsense .mf-meetgeek{left:90px;top:127px;width:129px;height:127px;transform:rotate(-9.31deg);filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)) drop-shadow(0 15px 15px rgba(0,0,0,.16)) drop-shadow(0 33px 20px rgba(0,0,0,.09))}
@media(max-width:1279px){main.cs-meetsense .meet-research-floats{display:none}}
/* MeetSense Decisions (Figma 582:5378, 1920 layout) as a pinned three-step video sequence (dist/meetsense-scrub.js).
   Copy left (max 400px), media + navigator right; JS sets --mw so media fits under the header. Below 1001px: stacked list. */
main.cs-meetsense .meet-scrub{position:relative;margin-top:88px}
main.cs-meetsense .meet-scrub-frame{margin:0;background:#111214;overflow:hidden;border-radius:16px}
main.cs-meetsense .meet-scrub-frame :is(img,video){display:block;width:100%;height:100%;object-fit:cover}
main.cs-meetsense .meet-scrub-frame.has-video img{display:none}
main.cs-meetsense .meet-scrub-step h3{font:500 36px/44px var(--body);letter-spacing:0;margin:0 0 12px}
main.cs-meetsense .meet-scrub-step p{font:400 18px/28px var(--body);margin:0}
main.cs-meetsense .meet-scrub-step p+p{margin-top:28px}
/* Pinned. The Figma gradient is laid out at the Figma frame's 1920:1464 ratio and anchored to the stage bottom, so the copy column sits on its orange/beige zone; the top fades to the heading's black (no seam). */
main.cs-meetsense .meet-decisions:has(.is-scrub){background:#060505;padding-bottom:0}
main.cs-meetsense .meet-scrub.is-scrub{margin-left:-24px;margin-right:-24px}
main.cs-meetsense .meet-scrub.is-scrub .meet-scrub-stage{position:sticky;top:var(--gv-sub-off,130px);height:calc(100vh - var(--gv-sub-off,130px));box-sizing:border-box;padding:clamp(20px,3.5vh,40px) 48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#060505 0,rgba(6,5,5,.75) 12%,rgba(6,5,5,0) 42%) top/100% 100% no-repeat,linear-gradient(43.36deg,#dabba3 2%,#ef6406 17%,#c60f01 36%,#620301 62%,#060505 77%) left bottom/100% max(100%,76.25vw) no-repeat,#060505}
main.cs-meetsense .is-scrub .meet-scrub-inner{display:flex;align-items:center;justify-content:center;gap:64px;width:100%;max-width:1824px}
main.cs-meetsense .is-scrub .meet-scrub-copy{display:grid;flex:none;width:clamp(300px,27vw,400px);color:#111214}
main.cs-meetsense .is-scrub .meet-scrub-step{grid-area:1/1;align-self:center;opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
main.cs-meetsense .is-scrub .meet-scrub-step.is-active{opacity:1;transform:none;pointer-events:auto}
main.cs-meetsense .is-scrub .meet-scrub-step p{color:rgba(0,0,0,.72)}
main.cs-meetsense .is-scrub .meet-scrub-right{display:flex;flex-direction:column;gap:clamp(20px,3.5vh,48px);width:var(--mw,880px);flex:none}
main.cs-meetsense .is-scrub .meet-scrub-media{position:relative;width:100%;aspect-ratio:1440/900;filter:drop-shadow(0 11px 12px rgba(0,0,0,.1)) drop-shadow(0 43px 21.5px rgba(0,0,0,.09)) drop-shadow(0 98px 29.5px rgba(0,0,0,.05))}
main.cs-meetsense .is-scrub .meet-scrub-frame{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
main.cs-meetsense .is-scrub .meet-scrub-frame.is-active{opacity:1}
main.cs-meetsense .meet-scrub-progress{display:none;list-style:none;margin:0;padding:0;gap:24px;width:100%}
main.cs-meetsense .is-scrub .meet-scrub-progress{display:flex}
main.cs-meetsense .meet-scrub-progress li{flex:1;height:2px;background:rgba(0,0,0,.24);overflow:hidden}
main.cs-meetsense .meet-scrub-progress i{display:block;height:100%;background:#fafaf8;transform:scaleX(0);transform-origin:left}
/* Stacked (mobile, reduced motion, no JS) */
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-inner{display:grid;grid-template-columns:1fr}
main.cs-meetsense .meet-scrub:not(.is-scrub) :is(.meet-scrub-media,.meet-scrub-copy,.meet-scrub-right){display:contents}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame{aspect-ratio:1440/900;margin-bottom:20px}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-step{margin-bottom:48px}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-step:last-child{margin-bottom:0}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-step:nth-child(3){color:#111214}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame:nth-child(1){grid-row:1}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-step:nth-child(1){grid-row:2}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame:nth-child(2){grid-row:3}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-step:nth-child(2){grid-row:4}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame:nth-child(3){grid-row:5}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-step:nth-child(3){grid-row:6}
@media(max-width:1000px){main.cs-meetsense .meet-scrub{margin-top:48px}main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame{border-radius:12px}main.cs-meetsense .meet-scrub-step h3{font-size:24px;line-height:32px}main.cs-meetsense .meet-scrub-step p{font-size:16px;line-height:24px}main.cs-meetsense .meet-scrub-step p+p{margin-top:16px}}

/* MeetSense Starting Point + sub-navigation, synced with Figma 551:46287 / 551:46279 (2026-10-23).
   Black sub-nav as on GoArt; top-right glow (above the copy, as in Figma, so it tints the heading's end); outline logo
   behind the laptop (overlay blend, placed relative to the laptop box: left -29.70%, top -13.90%, width 45.36%). */
.cs-meetsense .gv-chapter-nav{background:#000;color:#fafaf8;justify-content:space-between;padding:0 max(24px,calc((100% - 1216px)/2));border-top:1px solid rgba(255,255,255,.16)!important;border-bottom:1px solid rgba(255,255,255,.16)!important;font:500 16px/24px var(--body);letter-spacing:0}
.cs-meetsense .gv-chapter-nav.is-stuck{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-top-color:transparent!important;border-bottom-color:rgba(255,255,255,.16)!important}
.cs-meetsense .gv-chapter-nav a{color:#fafaf8}
.cs-meetsense .gv-chapter-nav a:hover{background:transparent}
.cs-meetsense .gv-chapter-nav a:hover:not(.is-active){border-bottom-color:rgba(255,255,255,.32)}
.cs-meetsense .gv-chapter-nav a.is-active{border-bottom-color:#fafaf8}
.cs-meetsense .gv-chapter-nav a:focus-visible{outline-color:#fafaf8}
.cs-meetsense .gv-chapter-nav a[aria-disabled="true"],.cs-meetsense .gv-chapter-nav a[aria-disabled="true"]:hover{cursor:default;border-bottom-color:transparent}
@media(max-width:800px){.cs-meetsense .gv-chapter-nav{justify-content:flex-start;padding:0 8px;font-size:14px}}


main.cs-meetsense .meet-start-device{isolation:auto}
main.cs-meetsense .meet-start-outline{position:absolute;z-index:-1;left:-29.7%;top:-13.9%;width:45.36%;height:auto;max-width:none;mix-blend-mode:overlay;pointer-events:none}
main.cs-meetsense .meet-start-glow{position:absolute;z-index:3;right:0;top:0;width:720px;height:360px;max-width:100%;transform:scaleY(-1);pointer-events:none}
@media(max-width:1000px){main.cs-meetsense .meet-start-outline{display:none}main.cs-meetsense .meet-start-glow{z-index:0;width:min(720px,100%);height:auto;aspect-ratio:2/1}}

/* MeetSense Starting Point motion (dist/meetsense-start.js): live floating card + scroll depth. All sizes inside the card use cqw so they
   scale with the card; the card keeps the existing four-corner perspective transform (app.js) on .meet-start-floating-card. */
@property --mc-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes mc-spin{to{--mc-a:360deg}}
@keyframes mc-ring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.28,1.8)}}
@keyframes ms-breathe{0%,100%{opacity:.82}50%{opacity:1}}
main.cs-meetsense .msc{position:absolute;z-index:1;left:23.5%;top:16%;width:21.8%;pointer-events:none}
main.cs-meetsense .msc .meet-start-floating-card{position:relative;left:0;top:0;width:100%;height:auto;aspect-ratio:1440/1032;container-type:inline-size;pointer-events:auto}
main.cs-meetsense .mc-face{display:block;width:100%;height:100%;max-width:none}
main.cs-meetsense .mc-beam{position:absolute;inset:0;border-radius:4.4444%/6.2016%;padding:.55cqw;pointer-events:none;opacity:.9;background:conic-gradient(from var(--mc-a),transparent 0 56%,rgba(240,89,36,.3) 74%,rgba(255,146,86,.9) 90%,#fff2e4 98%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:mc-spin 5s linear infinite}
main.cs-meetsense .mc-beam.mc-glow{padding:1.2cqw;filter:blur(1.6cqw);opacity:.7}
main.cs-meetsense .meet-start-floating-card.is-hot .mc-beam{animation-duration:2.1s;opacity:1}
main.cs-meetsense .meet-start-floating-card.is-hot .mc-beam.mc-glow{opacity:.95}
main.cs-meetsense .mc-sw{position:absolute;left:83.3333%;top:86.0465%;width:12.2222%;height:9.3023%}
main.cs-meetsense .mc-sw::before{content:"";position:absolute;inset:-5% -3.2%;border-radius:999px;background:#1e1e1e}
main.cs-meetsense .mc-sw b{position:absolute;inset:0;border-radius:999px;background:#0e4632;transition:background-color .4s ease}
main.cs-meetsense .mc-sw i{position:absolute;top:8.3333%;left:50%;height:83.3333%;aspect-ratio:1;border-radius:50%;background:#141414;transition:left .42s cubic-bezier(.45,0,.2,1),background-color .4s ease}
main.cs-meetsense .mc-sw:not(.is-on) b{background:#3a3a3f}
main.cs-meetsense .mc-sw:not(.is-on) i{left:4.5455%;background:#a2a2a8}
main.cs-meetsense .is-joined .mc-sw::after{content:"";position:absolute;inset:-6% -4%;border-radius:999px;border:.4cqw solid #3ddba0;animation:mc-ring 1.1s ease-out forwards;pointer-events:none}
@media(prefers-reduced-motion:reduce){main.cs-meetsense .mc-beam{animation:none}main.cs-meetsense .meet-start-glow{animation:none}}
main.cs-meetsense .meet-start-glow{animation:ms-breathe 7s ease-in-out infinite}
/* Copy reveal */
html.ms-js main.cs-meetsense .ms-rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--ms-d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--ms-d,0s)}
html.ms-js main.cs-meetsense .ms-rv.ms-in{opacity:1;transform:none}
/* Scroll depth: laptop rises and settles, the card lifts off it faster, the outline logo drifts slower, background shifts a little. */
main.cs-meetsense .ms-live .meet-start-device .meet-start-laptop{transform:translate3d(0,var(--ms-ly,0px),0) scale(var(--ms-ls,1));transform-origin:50% 0;opacity:var(--ms-lo,1);will-change:transform,opacity}
main.cs-meetsense .ms-live .msc{translate:0 var(--ms-cy,0px);scale:var(--ms-cs,1);opacity:var(--ms-co,1);transform-origin:50% 100%;will-change:translate,scale,opacity}
main.cs-meetsense .ms-live .meet-start-outline{translate:0 var(--ms-oy,0px);opacity:var(--ms-oo,1)}
main.cs-meetsense .ms-live .meet-start-bg{transform:translate3d(0,var(--ms-by,0px),0) scale(1.08)}
main.cs-meetsense .ms-live .meet-start-glow{translate:0 var(--ms-gy,0px)}

/* MeetSense scroll reveals + tool-icon pointer parallax (dist/meetsense-sections.js). Hidden states only exist under html.mr-js. */
html.mr-js main.cs-meetsense .mr{opacity:0;transform:translate3d(0,32px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--mr-d,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--mr-d,0s)}
html.mr-js main.cs-meetsense .mr.mr-scale{transform:translate3d(0,26px,0) scale(.965)}
html.mr-js main.cs-meetsense .mr.mr-in{opacity:1;transform:none}
html.mr-js main.cs-meetsense .meet-research-floats img{opacity:0;scale:.7;transition:opacity .9s ease var(--mr-d,0s),scale 1.2s cubic-bezier(.2,1.25,.35,1) var(--mr-d,0s)}
html.mr-js main.cs-meetsense .meet-research-floats img.in{opacity:1;scale:1}
/* MeetSense header "Schedule a call" as in Figma 551:46240: 4% white fill + 6px blur, 16% white border, 16px label, dark 20px arrow disc.
   Scoped to this page (other pages keep the outlined variant); desktop header only. */
@media(min-width:801px){
 body:has(main.cs-meetsense) header.fig-header nav>a.fig-schedule{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);gap:12px;padding:9px 16px;height:44px;box-sizing:border-box;font:500 16px/24px var(--body);color:#fafaf8}
 body:has(main.cs-meetsense) header.fig-header nav>a.fig-schedule .call-arrow-circle{background:#111214;color:#fafaf8}
 body:has(main.cs-meetsense) header.fig-header nav>a.fig-schedule:is(:hover,:focus-visible){background:#fafaf8;border-color:#fafaf8;color:#111214}
}

/* MeetSense cover (Figma 551:46164): raw photo + the two live gradient layers, so they stay visible at any width instead of
   being cropped out of a baked export. ::before = dark navy fade from the top (under the header), ::after = "Light" layer
   (orange/yellow glow bottom right + dark fade), 360/640 of the cover height. Image is the raw photo cropped to the 1440:640 frame. */
main.cs-meetsense .cs-cover .cs-cover-art img{object-position:center}
main.cs-meetsense .cs-cover .cs-cover-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#090313 0,rgba(9,3,19,.968) 2.09%,rgba(9,3,19,.93) 2.13%,rgba(9,3,19,.879) 5.52%,rgba(9,3,19,.819) 8.26%,rgba(9,3,19,.749) 10.55%,rgba(9,3,19,.672) 12.56%,rgba(9,3,19,.589) 14.47%,rgba(9,3,19,.503) 16.48%,rgba(9,3,19,.415) 18.77%,rgba(9,3,19,.326) 21.51%,rgba(9,3,19,.238) 24.9%,rgba(9,3,19,.154) 29.12%,rgba(9,3,19,.074) 34.35%,rgba(9,3,19,0) 40.78%)}
main.cs-meetsense .cs-cover .cs-cover-art::after{display:block;content:"";position:absolute;left:0;right:0;bottom:0;top:auto;height:56.25%;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1440 360' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-48.413 -15.56 31.19 -18.511 1432.1 366.36)'%3E%3Cstop stop-color='rgba(255,199,0,1)' offset='0'/%3E%3Cstop stop-color='rgba(255,199,0,0.2042)' offset='0.57661'/%3E%3Cstop stop-color='rgba(255,199,0,0.074143)' offset='0.73463'/%3E%3Cstop stop-color='rgba(255,199,0,0)' offset='0.93274'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"),url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1440 360' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-78.12 -26.312 37.711 -26.335 1440 377.73)'%3E%3Cstop stop-color='rgba(240,89,36,1)' offset='0'/%3E%3Cstop stop-color='rgba(240,89,36,0)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"),url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 1440 360' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect x='0' y='0' height='100%25' width='100%25' fill='url(%23grad)' opacity='1'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-78.12 -26.312 37.711 -26.335 1440 377.73)'%3E%3Cstop stop-color='rgba(240,89,36,1)' offset='0'/%3E%3Cstop stop-color='rgba(240,89,36,0)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"),linear-gradient(177.897deg,rgba(9,3,19,0) 19.079%,rgba(9,3,19,.074) 35.82%,rgba(9,3,19,.154) 49.444%,rgba(9,3,19,.238) 60.429%,rgba(9,3,19,.326) 69.256%,rgba(9,3,19,.415) 76.405%,rgba(9,3,19,.503) 82.354%,rgba(9,3,19,.589) 87.584%,rgba(9,3,19,.672) 92.574%,rgba(9,3,19,.749) 97.804%,rgba(9,3,19,.819) 103.75%,rgba(9,3,19,.879) 110.9%,rgba(9,3,19,.93) 119.73%,rgba(9,3,19,.968) 130.71%,rgba(9,3,19,.992) 144.34%,#090313 161.08%);background-size:100% 100%;background-repeat:no-repeat;background-blend-mode:screen,normal,normal,normal}
/* Coming soon cases (2026-10-24): visible card, no link. List in projects.js → comingSoon */
.fig-project-link.is-soon,.fig-trio-link.is-soon{cursor:default}.fig-trio-cover{position:relative}.soon-badge{position:absolute;left:24px;bottom:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(17,18,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);color:#fff;font:500 13px/16px var(--body);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}.soon-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#ff8a3d}@media(max-width:800px){.soon-badge{left:12px;bottom:12px;padding:6px 10px;font-size:11px;gap:6px}}
/* Mobile hero (2026-10-24): headline sized to the screen (EN overflowed at 390px) + scattered cards (hero-cards.js → .hero-cards-m) */
@media(max-width:800px){.fig-hero .fig-hero-title.hero-slogan .fig-title-line:first-child{gap:8px}.fig-hero .fig-hero-title.hero-slogan{font-size:min(46.8px,calc((100vw - 170px)/6.9))}html[lang=tr] .fig-hero .fig-hero-title.hero-slogan{font-size:min(46.8px,calc((100vw - 170px)/7.5));line-height:1.2}.fig-hero .fig-hero-content,.fig-hero .hero-foot{z-index:2}}
.hero-cards-m{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero-card-m{position:absolute;display:block;width:calc(var(--w)*1%);aspect-ratio:16/10;pointer-events:auto;transform:rotate(var(--r));opacity:0;animation:hcm-in .9s cubic-bezier(.16,1,.3,1) var(--d) forwards}
.hero-card-m>span{display:block;width:100%;height:100%;overflow:hidden;background:#1b1c20;box-shadow:0 0 0 1px #ffffff14,0 16px 28px -10px rgb(0 0 0/.7);animation:hcm-float var(--f) ease-in-out calc(var(--d) + .9s) infinite alternate}
.hero-card-m img{width:100%;height:100%;object-fit:cover;display:block}
.hero-card-m:active>span{transform:scale(.96)}
@keyframes hcm-in{from{opacity:0;transform:translateY(18px) rotate(var(--r)) scale(.92)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes hcm-float{from{translate:0 0}to{translate:0 -6px}}
@media(min-width:600px){.hero-card-m{width:calc(var(--w)*.72%)}}
@media(prefers-reduced-motion:reduce){.hero-card-m{animation:none;opacity:1}.hero-card-m>span{animation:none}}

/* Mobile QA: shared navigation rules, including short landscape screens. */
@media(max-width:800px){
 header.fig-header nav{padding-bottom:24px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 header.fig-header nav .language-switch{position:static;transform:none;align-self:center;margin:20px auto 0;height:auto;min-height:44px;flex-shrink:0}
 header.fig-header nav .language-switch a{min-height:44px;height:44px}
 .fig-contact-nav a{min-height:44px;padding-top:10px;padding-bottom:10px}
 .gsx-activate{display:block;min-width:44px;min-height:44px;margin:0 auto 24px;padding:10px 20px;border:1px solid #ffffff50;border-radius:999px;background:#24202e;color:#fafaf8;font:500 14px/24px var(--body)}
}
@media(max-width:360px){
 .fig-hero .fig-hero-title.hero-slogan,html[lang=tr] .fig-hero .fig-hero-title.hero-slogan{font-size:clamp(28px,8.2vw,30px)}
 .fig-hero .fig-hero-title.hero-slogan .fig-title-line:first-child{gap:6px}
 .fig-hero .fig-idea-pill{flex-basis:60px;width:60px;height:44px;--hero-slot-size:60px}
}
@media(max-width:360px){.gsx-start-bg{--k:.46}}
/* Design tags stay on one line (2026-10-24, long platform tag wrapped into a tall pill) */
.fig-design-tags>span{white-space:nowrap}
/* Phone orbit: cards bleed off the edges like anubi.io; clip them so the page never scrolls sideways */
@media(max-width:1000px){.fig-hero .hero-cards{overflow:hidden}}
/* Phones: tags get the full card width under the icon/title/year row, so long tags stay on one line (2026-10-24) */
@media(max-width:800px){.fig-project-info{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:16px;row-gap:0;align-items:center}.fig-project-info>.fig-app-icon{grid-row:1/3}.fig-project-title{display:contents}.fig-project-title>p{grid-column:2;grid-row:1;align-self:end;margin-bottom:4px}.fig-project-title>h3{grid-column:2;grid-row:2;align-self:start}.fig-project-info>.fig-year{grid-column:3;grid-row:1/3}.fig-project-info .fig-design-tags{grid-column:1/-1;grid-row:3;max-width:none;padding:16px 0 0}}

@media(max-width:1000px){
 .mobile-call,.fig-contact-buttons a{min-height:44px}
 .fig-contact-nav a,.fig-contact-bottom a{min-width:44px;min-height:44px}
 .fig-contact-bottom a{display:inline-flex;align-items:center}
 .genva-carousel-dots{gap:0}
 .genva-carousel-dots button,.gsx-gallery .genva-carousel-dots button{flex:0 0 44px;width:44px;height:44px;background:transparent}
 .genva-carousel-dots button::after{content:none}
 .genva-carousel-dots button::before{content:"";position:absolute;width:8px;height:8px;left:18px;top:18px;border-radius:50%;background:rgba(255,255,255,.48)}
 .genva-carousel-dots button[aria-pressed="true"],.gsx-gallery .genva-carousel-dots button[aria-pressed="true"]{background:transparent}
 .genva-carousel-dots button[aria-pressed="true"]::before{background:#fafaf8}

}

@media(max-width:360px){.fig-hero .fig-idea-pill .hero-portrait-layers{transform:scale(.416667)}}
/* Muted showreel loop fills the frame like desktop; with sound + controls it shows the whole picture */
.fig-reel-video:not([controls]){object-fit:cover}
/* Keep the role readable on narrow phones instead of squeezing it beside the CTA. */
@media(max-width:390px){
 .home-page .hero-foot{flex-wrap:wrap;gap:16px}
 .home-page .hero-statement{flex:1 0 100%;max-width:100%}
 .home-page .hero-statement span{max-width:100%}
 .home-page .hero-discover{height:48px}
}
.cs-goart .gsx-activate{display:block;min-width:44px;min-height:44px;margin:0 auto 24px;padding:10px 20px;border:1px solid #ffffff50;border-radius:999px;background:#24202e;color:#fafaf8;font:500 14px/24px var(--body)}
@media(max-width:1000px){.genva-carousel-dots{flex-wrap:wrap;max-width:100%}}

@media(pointer:coarse){
 header.fig-header .language-switch a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(pointer:coarse){header.fig-header nav>a.fig-schedule{min-height:44px}}
@media(pointer:coarse){.experience-toggle{min-height:44px;min-width:44px}}
@media(max-width:370px){.fig-about-portrait,.ax-js .fig-about-portrait{scale:.64;margin-bottom:-223px}}
@media(max-width:340px){.fig-about-portrait,.ax-js .fig-about-portrait{scale:.57;margin-bottom:-271px}}
@media(max-width:800px){
 .fig-about-page .pill{max-width:100%;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;white-space:normal}
 .fig-about-page .pill .text-roll,.fig-about-page .pill .text-roll-track,.fig-about-page .pill .text-roll-original,.fig-about-page .pill .text-roll-copy{white-space:normal;min-width:0}
}

/* Phones: GoArt "Four paths" and Back Office compositions are zoomed in so the screens stay readable, with the middle screens centered and the neighbours peeking (2026-10-24) */
@media(max-width:800px){
main.cs-goart .goart-paths-separate{width:230%;margin-left:-65%;aspect-ratio:1440/430}
main.cs-goart .goart-path-card{top:17.4%}
main.cs-goart .goart-office-art{width:200%;margin-left:-45%;height:280px;margin-top:40px}
main.cs-goart .goart-office-shot{top:57px}
}

/* Pills: the rolling label sat on the bottom of its 24px line box, ~3px below the arrow; center it in the button instead (2026-10-24) */
.text-roll-button>span:has(>.text-roll){display:inline-flex;align-items:center;align-self:stretch}
.text-roll-button>span>.text-roll{vertical-align:middle}

/* MeetSense start, phones/tablets: crop more of the keyboard so the screen leads, not the laptop (2026-10-24) */
@media(max-width:1000px){main.cs-meetsense .meet-start-device{margin-bottom:-44%}}

/* MeetSense Decisions on small laptops (801–1200px): wider, tighter copy so each step fits the pinned stage (2026-10-24) */
@media(min-width:801px) and (max-width:1200px){
 main.cs-meetsense .is-scrub .meet-scrub-copy{width:clamp(340px,38vw,420px)}
 main.cs-meetsense .is-scrub .meet-scrub-inner{gap:40px}
 main.cs-meetsense .is-scrub .meet-scrub-stage{padding-left:32px;padding-right:32px}
 main.cs-meetsense .is-scrub .meet-scrub-step h3{font-size:22px;line-height:28px;margin-bottom:8px}
 main.cs-meetsense .is-scrub .meet-scrub-step p{font-size:15px;line-height:22px}
 main.cs-meetsense .is-scrub .meet-scrub-step p+p{margin-top:12px}
}

/* GoArt phones: the Four paths and Back Office art bleed off the section's bottom edge like desktop; a generic 64px bottom padding left them cut short above an empty band (2026-10-24) */
@media(max-width:800px){
 /* outranks the generic phone section padding (main>section:not(...)x4) */
 main.cs-goart.cs-goart>section.goart-web-paths:not(.fig-hero):not(.case-hero),main.cs-goart.cs-goart>section.goart-office-final:not(.fig-hero):not(.case-hero){padding-bottom:0}
 main.cs-goart .goart-office-art{margin-bottom:0}
}

/* MeetSense Decisions: white copy and square-cornered media, scrub and stacked (2026-10-24) */
main.cs-meetsense .meet-scrub .meet-scrub-step,main.cs-meetsense .meet-scrub .meet-scrub-step :is(h3,p),main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-step:nth-child(3){color:#fafaf8}
main.cs-meetsense .meet-scrub .meet-scrub-frame,main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame,main.cs-meetsense .meet-scrub .meet-scrub-frame :is(img,video){border-radius:0}

/* 3D works reel: Safari draws a waiting card's Coming soon badge over the front card (2026-10-24) */
.fig-projects.is-reel3d>.fig-project:not(.is-current) .soon-badge{visibility:hidden}
/* GoArt Starting Point: the stacked drop-shadow filter on the item slots made Safari paint a white block over the top-left
   of the page (filter inside the 3D canvas). Same shadow as box-shadow; the hover/selected rules above still override it (2026-10-24) */
.gsx-item{filter:none;box-shadow:0 11px 12px rgba(0,0,0,.1),0 43px 21.5px rgba(0,0,0,.09),0 98px 29.5px rgba(0,0,0,.05),0 174px 34.5px rgba(0,0,0,.01)}
/* MeetSense brand reference 593:5863, 2026-10-24. */
main .fig-project-meetsense .fig-cover-image{height:100%;top:0;left:0;object-fit:contain;object-position:center}
main .fig-project-meetsense .fig-project-cover{aspect-ratio:16/9}
main.cs-meetsense .cs-cover .cs-cover-art::before,main.cs-meetsense .cs-cover .cs-cover-art::after{display:none}
main.cs-meetsense .meet-language{background:#fafaf8;color:#111214;padding:96px max(24px,calc((100vw - 1216px)/2))}
main.cs-meetsense .meet-language .meet-head{margin-bottom:32px}
main.cs-meetsense .meet-language .meet-head .gv-eyebrow{color:#64666c}
main.cs-meetsense .meet-language .meet-head>p:not(.gv-eyebrow){color:#111214}
.ms-brand-content{display:flex;flex-direction:column;gap:64px;padding:24px 0}
.ms-brand-opening,.ms-brand-grid{display:flex;flex-direction:column;gap:32px;width:100%}
.ms-brand-panel{height:400px;background:#0e0d0d}
.ms-brand-gradient{background:radial-gradient(ellipse 46% 66% at 100% 105%,#ffc700 0%,rgba(255,199,0,.2) 58%,transparent 94%),radial-gradient(ellipse 51% 86% at 100% 105%,#f05924,transparent 100%),linear-gradient(187.5145deg,#1e1e1e 44.571%,#0e0d0d 64.075%)}
.ms-brand-story{width:800px;max-width:100%;margin:auto;display:flex;flex-direction:column;gap:12px}
.ms-brand-story .gv-eyebrow{font:500 14px/20px var(--body);color:#64666c;margin:0 0 12px}
.ms-brand-story h3{font:500 36px/44px var(--body);margin:0;color:#111214}
.ms-brand-story>p{font:400 18px/28px var(--body);color:rgba(0,0,0,.72);margin:0}
.ms-brand-row{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.ms-brand-row-phone{grid-template-columns:400px 1fr}
.ms-brand-row .ms-brand-panel{background:#111214}
.ms-brand-phone{position:relative;overflow:hidden;margin:0;height:400px}
.ms-brand-phone img{position:absolute;height:144.5%;width:108.39%;max-width:none;left:-6.13%;top:-14.5%}
.ms-brand-palette{height:400px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.ms-swatch{position:relative;overflow:hidden;font-family:var(--body)}
.ms-swatch h4{position:absolute;left:24px;top:24px;font:700 24px/32px var(--body);margin:0}
.ms-swatch p{position:absolute;bottom:24px;right:24px;font:400 16px/24px var(--body);text-align:right;margin:0}
.ms-orange{background:#ff4900;color:#fff;grid-row:span 2}
.ms-burgundy{background:#620013;color:#fff}
.ms-gold{background:#ffc400;color:#262525}
@media(max-width:800px){
 main.cs-meetsense .meet-language{padding:64px 24px}
 main.cs-meetsense .meet-language .meet-head h2{font-size:36px;line-height:44px}
 .ms-brand-content{gap:40px}.ms-brand-opening,.ms-brand-grid{gap:20px}
 .ms-brand-row,.ms-brand-row-phone{grid-template-columns:1fr;gap:20px}
 .ms-brand-panel{height:auto;aspect-ratio:1216/400;min-height:160px}
 .ms-brand-phone{height:auto;aspect-ratio:1;max-width:400px;width:100%}
 .ms-brand-row-phone .ms-brand-panel{min-height:240px}
 .ms-brand-palette{height:400px}.ms-brand-story h3{font-size:28px;line-height:36px}
 .ms-swatch h4{left:16px;font-size:20px;line-height:26px}.ms-swatch p{right:12px;font-size:13px;line-height:20px}
}
.ms-brand-row>*{min-width:0}
.ms-brand-palette{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:800px){.ms-brand-row,.ms-brand-row-phone{grid-template-columns:minmax(0,1fr)}}
.ms-brand-panel{width:100%;min-width:0;box-sizing:border-box}

/* Figma MeetSense product design panels, 593:5863. */

.ms-design-grid{display:flex;flex-direction:column;gap:32px;width:100%}
.ms-design-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.ms-design-row-first{grid-template-columns:minmax(0,400fr) minmax(0,784fr)}
.ms-design-frame{margin:0;position:relative;overflow:hidden;width:100%;min-width:0}
.ms-design-canvas{position:absolute;left:0;top:0;transform:scale(var(--art-scale,1));transform-origin:0 0;pointer-events:none;font:400 16px/normal var(--body)}
.ms-design-canvas *{box-sizing:border-box;border-width:0;border-style:solid}
.ms-design-canvas p{margin:0;letter-spacing:0}
.ms-design-canvas img{display:block;max-width:100%}
.ms-design-canvas>div{width:100%;height:100%;flex:none}
main.cs-meetsense .ms-outcome-v2{background:#111214;color:#fafaf8;padding:96px max(24px,calc((100vw - 1216px)/2));scroll-margin-top:80px}
.ms-outcome-heading{margin-bottom:48px}
.ms-outcome-heading .gv-eyebrow{margin:0 0 24px;color:#64666c;font:500 14px/20px var(--body);letter-spacing:0}
.ms-outcome-heading h2{margin:0;font:500 56px/64px var(--body);letter-spacing:0}
.ms-outcome-columns{display:grid;grid-template-columns:480px minmax(0,1fr);gap:64px}
.ms-outcome-columns>p{font:400 18px/28px var(--body);margin:0}
.ms-outcome-delivered>p{margin:0 0 12px;font:500 14px/normal var(--body);color:#63666b}
.ms-outcome-delivered ol{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}
.ms-outcome-delivered li{display:flex;gap:24px;padding:16px 0;border-bottom:1px solid #ffffff14;font:400 18px/normal var(--body)}
.ms-outcome-delivered li span{font:500 16px/normal var(--body);color:#63666b;flex-shrink:0}
@media(max-width:800px){
 .ms-design-row,.ms-design-row-first{grid-template-columns:minmax(0,1fr);gap:20px}
 .ms-design-grid{gap:20px}
 main.cs-meetsense .ms-outcome-v2{padding:64px 24px}
 .ms-outcome-heading h2{font-size:36px;line-height:44px}
 .ms-outcome-columns{grid-template-columns:minmax(0,1fr);gap:32px}
}

.ms-design-image{margin:0;min-width:0;width:100%}.ms-design-image img,.ms-design-image video{display:block;width:100%;height:auto}
.ms-outcome-heading h2{max-width:800px}

@media(min-width:801px) and (max-width:1100px){.ms-outcome-columns{grid-template-columns:minmax(0,480fr) minmax(0,672fr);gap:40px}}

.ms-brand-intro{display:flex;flex-direction:column;gap:32px;width:100%}
@media(max-width:800px){.ms-brand-intro{gap:24px}}

/* Match Figma 598:10622: 704 + 32 + 480, equal 600px panel height. */
.ms-design-row-cards{grid-template-columns:minmax(0,704fr) minmax(0,480fr)}
@media(max-width:800px){.ms-design-row-cards{grid-template-columns:minmax(0,1fr)}}
.ms-design-row-cards video{aspect-ratio:1408/1200;object-fit:cover}
.ms-design-row:not(.ms-design-row-first):not(.ms-design-row-cards) video{aspect-ratio:1184/960;object-fit:cover}
/* MeetSense research cards: side-panel sliders (Figma 560:53335, 2026-10-25). Card 384x576, sizes in cqw so they scale with the slot. */
main.cs-meetsense .meet-card .meet-slot{aspect-ratio:2/3;background:var(--ms-bg,#111214)}
main.cs-meetsense .meet-slot:has(.ms-panels){container-type:inline-size;position:relative}
main.cs-meetsense .ms-panels{position:absolute;inset:0;outline:none;isolation:isolate}
main.cs-meetsense .ms-track{position:relative;z-index:0;display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
main.cs-meetsense .ms-track::-webkit-scrollbar{display:none}
main.cs-meetsense .ms-slide{flex:0 0 100%;scroll-snap-align:start;margin:0;padding-top:8.33cqw;box-sizing:border-box}
main.cs-meetsense .ms-slide img{display:block;height:auto;margin:0 auto;object-fit:initial;width:83.33cqw;image-rendering:auto}
main.cs-meetsense .ms-slide.is-wide img{width:91.67cqw}
main.cs-meetsense .ms-panels::after{content:"";z-index:1;position:absolute;left:0;right:0;bottom:-1px;height:31%;background:linear-gradient(to bottom,rgb(var(--ms-rgb)/0.000) 0.0%,rgb(var(--ms-rgb)/0.002) 4.2%,rgb(var(--ms-rgb)/0.011) 8.3%,rgb(var(--ms-rgb)/0.027) 12.5%,rgb(var(--ms-rgb)/0.050) 16.7%,rgb(var(--ms-rgb)/0.081) 20.8%,rgb(var(--ms-rgb)/0.118) 25.0%,rgb(var(--ms-rgb)/0.162) 29.2%,rgb(var(--ms-rgb)/0.212) 33.3%,rgb(var(--ms-rgb)/0.266) 37.5%,rgb(var(--ms-rgb)/0.325) 41.7%,rgb(var(--ms-rgb)/0.387) 45.8%,rgb(var(--ms-rgb)/0.451) 50.0%,rgb(var(--ms-rgb)/0.516) 54.2%,rgb(var(--ms-rgb)/0.581) 58.3%,rgb(var(--ms-rgb)/0.646) 62.5%,rgb(var(--ms-rgb)/0.708) 66.7%,rgb(var(--ms-rgb)/0.767) 70.8%,rgb(var(--ms-rgb)/0.823) 75.0%,rgb(var(--ms-rgb)/0.872) 79.2%,rgb(var(--ms-rgb)/0.915) 83.3%,rgb(var(--ms-rgb)/0.951) 87.5%,rgb(var(--ms-rgb)/0.977) 91.7%,rgb(var(--ms-rgb)/0.994) 95.8%,rgb(var(--ms-rgb)/1.000) 100.0%);pointer-events:none}
main.cs-meetsense .ms-dots{position:absolute;left:0;right:0;bottom:6.25cqw;z-index:3;display:flex;justify-content:center;gap:16px}
main.cs-meetsense .ms-dots button{position:relative;overflow:hidden;width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--ms-dot,rgba(250,250,248,.55));cursor:pointer;transition:width .5s cubic-bezier(.22,1,.36,1),background .3s}
main.cs-meetsense .ms-dots button[aria-current=true]{background:var(--ms-dot-on,#fafaf8)}
main.cs-meetsense .ms-dots button i{position:absolute;inset:0;border-radius:inherit;background:var(--ms-dot-on,#fafaf8);transform:scaleX(0);transform-origin:left center;pointer-events:none}
main.cs-meetsense .ms-panels[data-auto] .ms-dots button[aria-current=true]{width:30px;background:var(--ms-dot,rgba(250,250,248,.55))}
/* motion layers */
main.cs-meetsense .ms-ghost{position:absolute;left:0;right:0;top:0;z-index:-1;pointer-events:none}
main.cs-meetsense .ms-panels[data-tilt]{perspective:1100px}
main.cs-meetsense .ms-panels[data-tilt] .ms-slide{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-origin:50% 35%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
main.cs-meetsense .ms-slide img{will-change:transform;backface-visibility:hidden}
main.cs-meetsense .ms-arrow{position:absolute;top:42%;z-index:3;width:36px;height:36px;margin-top:-18px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .2s,background .2s}
main.cs-meetsense .ms-arrow:hover{background:rgba(0,0,0,.45)}
main.cs-meetsense .ms-arrow:disabled{display:none}
main.cs-meetsense .ms-prev{left:10px}
main.cs-meetsense .ms-next{right:10px}
main.cs-meetsense .ms-arrow svg{width:16px;height:16px}
main.cs-meetsense .meet-slot:hover .ms-arrow,main.cs-meetsense .ms-panels:focus-within .ms-arrow{opacity:1}
@media(hover:none){main.cs-meetsense .ms-arrow{display:none}}
/* QA fixes 2026-10-25 */
main.cs-meetsense .ms-panels:focus-visible{outline:2px solid var(--ms-ring,#fafaf8);outline-offset:-6px}
main.cs-meetsense .ms-pause{position:absolute;bottom:calc(6.25cqw - 12px);right:6.25cqw;z-index:3;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:rgba(17,18,20,.72);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s}
main.cs-meetsense .ms-pause:hover{background:rgba(17,18,20,.9)}
main.cs-meetsense .ms-pause:focus-visible,main.cs-meetsense .ms-dots button:focus-visible,main.cs-meetsense .ms-arrow:focus-visible{outline:2px solid var(--ms-ring,#fafaf8);outline-offset:2px}
main.cs-meetsense .ms-pause svg{width:14px;height:14px}
main.cs-meetsense .ms-arrow{background:rgba(17,18,20,.72)}
main.cs-meetsense .ms-arrow:hover{background:rgba(17,18,20,.9)}
main.cs-meetsense .ms-panels[data-paused] .ms-dots button[aria-current=true]{background:var(--ms-dot-on,#fafaf8)}
/* dot + focus-ring colours follow each card's ground (WCAG 1.4.11, >=3:1): dark ground keeps the light set, orange and pale cards use the dark ink */
main.cs-meetsense .meet-slot[style*="#f05924"]{--ms-dot:rgba(17,18,20,.7);--ms-dot-on:#111214;--ms-ring:#111214}
main.cs-meetsense .meet-slot[style*="#b9cdcc"]{--ms-dot:rgba(17,18,20,.6);--ms-dot-on:#111214;--ms-ring:#111214}
@media(min-width:600px) and (max-width:1000px){main.cs-meetsense .meet-card{max-width:480px;margin-left:auto;margin-right:auto;width:100%}}

/* MeetSense Decisions: one looping film per decision. Controls have their own row,
   outside the 2432:1520 picture, including in stacked and reduced-motion layouts. */
main.cs-meetsense .meet-scrub-frame.md-stage{position:relative;isolation:isolate}
main.cs-meetsense .meet-scrub.is-scrub .meet-scrub-frame.md-stage{position:absolute}
main.cs-meetsense .meet-scrub .md-film{display:flex;flex-direction:column;aspect-ratio:auto;background:transparent;overflow:visible}
main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame.md-film{aspect-ratio:auto}
main.cs-meetsense .meet-scrub .md-video{width:100%;height:auto;aspect-ratio:2432/1520;object-fit:contain;background:#111214;border-radius:16px}
main.cs-meetsense .md-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:44px;padding-top:4px}
main.cs-meetsense .md-pause{position:relative;z-index:1;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(17,18,20,.8);color:#fff;cursor:pointer;display:grid;place-items:center}
main.cs-meetsense .md-controls .md-dot{display:grid;place-items:center;width:32px;height:40px;padding:0;border:0;background:none;cursor:pointer}
main.cs-meetsense .md-dot span{width:8px;height:8px;background:#fff;border:1px solid #111214;border-radius:50%}
main.cs-meetsense .md-dot[aria-current=true] span{width:20px;border-radius:6px}
main.cs-meetsense .md-controls .md-dot:first-child{margin-left:auto}
main.cs-meetsense .md-controls .md-pause{margin-left:auto}
main.cs-meetsense .is-scrub .md-dot{display:none}
main.cs-meetsense .md-dot:focus-visible{outline:2px solid #fafaf8;outline-offset:2px}
main.cs-meetsense .meet-scrub-frame.md-film:not(.is-ready){transition:none}
main.cs-meetsense .md-pause:hover{background:#111214}
main.cs-meetsense .md-pause svg{width:16px;height:16px}
main.cs-meetsense .md-pause:focus-visible{outline:2px solid #fafaf8;outline-offset:2px}
main.cs-meetsense .is-scrub .meet-scrub-media{aspect-ratio:auto;height:calc(var(--mw,880px) * .625 + 48px)}
main.cs-meetsense .is-scrub .meet-scrub-frame{visibility:hidden;pointer-events:none}
main.cs-meetsense .is-scrub .meet-scrub-frame.is-active{visibility:visible;pointer-events:auto}
main.cs-meetsense .is-scrub .meet-scrub-step{visibility:hidden;max-height:var(--ms-room);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
main.cs-meetsense .is-scrub .meet-scrub-step.is-active{visibility:visible}
main.cs-meetsense .is-scrub .meet-scrub-inner{gap:clamp(24px,3.3vw,64px);min-height:0}
main.cs-meetsense .is-scrub .meet-scrub-copy{min-height:0}
@media(min-width:1201px) and (max-height:850px){
 main.cs-meetsense .is-scrub .meet-scrub-step h3{font-size:30px;line-height:36px}
 main.cs-meetsense .is-scrub .meet-scrub-step p{font-size:16px;line-height:24px}
 main.cs-meetsense .is-scrub .meet-scrub-step p+p{margin-top:16px}
}
@media(max-width:1200px){
 main.cs-meetsense .meet-scrub-step h3{font-size:28px;line-height:36px}
 main.cs-meetsense .meet-scrub-step p{font-size:17px;line-height:26px}
 main.cs-meetsense .meet-scrub-step p+p{margin-top:20px}
}
@media(max-width:800px){
 main.cs-meetsense .meet-scrub:not(.is-scrub) .meet-scrub-frame.md-film{aspect-ratio:auto}
main.cs-meetsense .meet-scrub .md-video{border-radius:12px}
 main.cs-meetsense .meet-scrub-step h3{font-size:24px;line-height:32px}
 main.cs-meetsense .meet-scrub-step p{font-size:16px;line-height:24px}
}
@media(prefers-reduced-motion:reduce){
 main.cs-meetsense .meet-scrub :is(.meet-scrub-frame,.meet-scrub-step){transition:none;transform:none}
}

/* Loops case: scoped additions to the shared case template */
.cs-loops .loops-wireframes{width:100%;max-width:1216px;margin:auto}
.cs-loops .loops-wireframes details{border-top:1px solid #d7d7d4;padding:20px 0}
.cs-loops .loops-wireframes summary{cursor:pointer;font-size:20px;line-height:1.5}
.cs-loops .loops-wireframes details p{font-size:13px;margin:15px 0}
.cs-loops .loops-wireframes details a{text-decoration:underline;text-underline-offset:4px}
.cs-loops .loops-wireframes iframe{display:block;width:100%;height:560px;border:1px solid #dededb;border-radius:10px;background:white}
.cs-loops .loops-models{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:760px;margin:40px auto 0}
.cs-loops .loops-models figure{margin:0}
.cs-loops .loops-models video{display:block;width:100%;height:auto;border-radius:20px;background:#e7eaea}
.cs-loops .loops-models figcaption{font-size:12px;color:#666;margin-top:12px;line-height:1.6}
@media(max-width:800px){.cs-loops .loops-models{gap:16px}.cs-loops .loops-wireframes iframe{height:420px}.cs-loops .loops-wireframes summary{font-size:17px}}

/* Loops case 2026-10-25 */
.lc-page{--lc-ink:#111214;--lc-paper:#fafaf8;--lc-accent:#ff6f00;--lc-soft:#ffe0b2;background:var(--lc-paper);color:var(--lc-ink)}
main#main.lc-page .lc-section{padding:112px max(24px,calc((100% - 1216px)/2))}
.lc-page :is(figure,dl){margin:0}
.lc-page :is(button,a):focus-visible{outline:3px solid #247bff;outline-offset:5px;box-shadow:0 0 0 2px #fff}
.lc-page button{font:500 14px/20px var(--body);cursor:pointer;color:inherit}
.lc-page button:disabled{cursor:default}
.lc-page [hidden]{display:none!important}
.lc-page .lc-eyebrow{font:500 14px/20px var(--body);margin:0 0 24px;color:#64666c}
.lc-page .lc-eyebrow:empty{display:none}
.lc-page .lc-head{max-width:800px}
.lc-page .lc-head h2{font:500 56px/1.14 var(--body);letter-spacing:-.025em;margin:0 0 28px}
.lc-page .lc-head>p:last-child:not(.lc-eyebrow){font:400 18px/28px var(--body);margin:0;max-width:680px}
main#main.lc-page .lc-hero{position:relative;height:640px;min-height:460px;overflow:hidden;padding:0;background:#0a3835;color:#fff;isolation:isolate}
.lc-page .lc-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.lc-page .lc-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#052b2ce8,transparent 85%);z-index:-1}
.lc-page .lc-hero-bottom{position:absolute;bottom:48px;left:max(24px,calc((100% - 1216px)/2));right:max(24px,calc((100% - 1216px)/2));display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.lc-page .lc-hero-logo{display:block;width:56px;height:56px;object-fit:contain;margin-bottom:24px}
.lc-page .lc-hero h1{font:500 clamp(64px,7vw,104px)/1 var(--body);letter-spacing:-.045em;margin:0 0 20px}
.lc-page .lc-hero-bottom p{font:400 18px/28px var(--body);margin:0}
.lc-page .lc-cta{display:flex;align-items:center;gap:36px;min-height:48px;padding:12px 18px;border:1px solid #ffffff66;background:#ffffff12;color:#fff;font:500 16px/24px var(--body);text-decoration:none;backdrop-filter:blur(8px)}
.lc-page .lc-cta:hover{background:#fff;color:#0a3835}
.lc-page .lc-meta{display:grid;grid-template-columns:.8fr 1.6fr .8fr 1fr;gap:40px;padding:48px max(24px,calc((100% - 1216px)/2)) 56px}
.lc-page .lc-meta dt{font:500 12px/20px var(--body);color:#64666c;margin-bottom:12px}
.lc-page .lc-meta dd{font:400 16px/24px var(--body);margin:0}
.lc-page .lc-nav{background:#000000;color:#fafaf8;border-block:1px solid #ffffff26}
.lc-page .lc-nav.is-stuck{background:#000000;backdrop-filter:none}
.lc-page .lc-nav a{color:#fafaf8}
.lc-page .lc-nav a.is-active{border-bottom-color:#fafaf8}
.lc-page .lc-nav a:focus-visible{outline-color:#fff;outline-offset:-5px;box-shadow:none}
.lc-page :is(#start,#flow,#system,#brands,#tryon,#brand,#outcome){scroll-margin-top:var(--gv-sub-off,144px)}
.lc-page .lc-start{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;background:#111214;color:#fafaf8;overflow:hidden;min-height:760px}
.lc-page .lc-start .lc-eyebrow{color:#a7aaa9}
.lc-page .lc-start .lc-head>p:last-child{color:#d2d5d4}
.lc-page .lc-floats{display:flex;align-items:center;justify-content:center;position:relative;min-width:0;padding:44px 0}
.lc-page .lc-phone{width:290px;max-width:100%;aspect-ratio:750/1624;border:6px solid #202426;border-radius:32px;background:#fff;overflow:hidden;box-shadow:0 20px 70px #0002}
.lc-page .lc-phone img{display:block;width:100%;height:100%;object-fit:contain}
.lc-page .lc-float{flex:none;width:42%;transform:translateY(0) rotate(-8deg)}
.lc-page .lc-float:nth-child(2){position:relative;z-index:2;margin:0 -15%;transform:translateY(-24px);box-shadow:0 24px 64px #0007}
.lc-page .lc-float:nth-child(3){transform:translateY(32px) rotate(8deg)}
.lc-page .lc-floats.is-visible .lc-float{animation:lc-float-in 4s cubic-bezier(.22,1,.36,1) both}
.lc-page .lc-floats.is-visible .lc-float:nth-child(2){animation-delay:.12s}
.lc-page .lc-floats.is-visible .lc-float:nth-child(3){animation-delay:.24s}
@keyframes lc-float-in{from{opacity:.4;translate:0 35px}to{opacity:1;translate:0 0}}
.lc-page .lc-screen{position:relative;isolation:isolate}
.lc-page .lc-screen>img{display:block;width:100%;height:100%;object-fit:contain}
.lc-page .lc-screen .lc-incoming{position:absolute;inset:0;z-index:2;background:white}
.lc-page .lc-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px;min-height:44px}
.lc-page .lc-controls button{display:grid;place-items:center;flex:none;min-width:44px;min-height:44px;border:1px solid #11121430;background:transparent;font-size:22px}
.lc-page .lc-controls button:hover{background:#111214;color:#fff}
.lc-page .lc-caption{font:400 13px/20px var(--body);margin:0;text-align:center;min-width:120px}
.lc-page .lc-load-note{font:400 13px/20px var(--body);color:#64666c;text-align:center;margin-top:16px}
.lc-page .lc-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Crop to the first real product card, excluding the placeholder and Figma set border. */
.lc-page .lc-flow{position:relative;--lc-soft:#d3efe3;background:#e1ebe3}
.lc-page .lc-flow-stage{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:center;gap:64px;padding:64px max(24px,calc((100% - 1216px)/2))}
.lc-page .lc-flow-copy>img{width:150px;height:48px;object-fit:contain;object-position:left;margin-bottom:36px}
.lc-page .lc-flow-copy h3{font:500 40px/1.15 var(--body);letter-spacing:-.025em;margin:0 0 24px}
.lc-page .lc-flow-copy p{font:400 17px/26px var(--body);margin:0;max-width:400px}
.lc-page .lc-scroll-hint{display:block;margin-top:32px;font:400 12px/20px var(--body);color:#64666c}
.lc-page .lc-flow-right{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;position:relative}
.lc-page .lc-flow-right .lc-screen{flex:none;width:290px;max-width:100%;margin:auto}
.lc-page .lc-flow-right .lc-controls{margin:0}
.lc-page .lc-progress{width:min(100%,420px);height:2px;flex:none;background:#11121420;overflow:hidden}
.lc-page .lc-progress i{display:block;height:100%;background:#111214;transform:scaleX(0);transform-origin:left}
.lc-page .lc-flow.is-pinned .lc-flow-stage{position:sticky;top:var(--gv-sub-off,144px);height:calc(100svh - var(--gv-sub-off,144px));min-height:0;padding-block:32px}
.lc-page .lc-flow.is-pinned .lc-flow-right{height:100%;justify-content:center}
.lc-page .lc-flow.is-pinned .lc-screen{width:var(--lc-media-width,270px)}
.lc-page .lc-language{background:#fafaf8}
.lc-page .lc-water{margin-top:48px;overflow:hidden;aspect-ratio:2/1;background:#0a3835}
.lc-page .lc-water img{display:block;width:100%;height:100%;object-fit:cover}
.lc-page .lc-identity{display:grid;grid-template-columns:1.1fr .6fr 1.3fr;gap:24px;margin-top:24px}
.lc-page .lc-identity>figure{display:grid;place-items:center;min-height:200px;background:#e9ece9;padding:32px}
.lc-page .lc-identity>figure img{width:100%;height:auto;max-height:96px;object-fit:contain}
.lc-page .lc-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch}
.lc-page .lc-palette span{font:400 10px/18px var(--body);display:flex;flex-direction:column;gap:10px;min-width:0}
.lc-page .lc-palette i{display:block;flex:1;background:var(--lc-swatch);min-height:120px}
.lc-page .lc-credit{font:400 13px/20px var(--body);color:#64666c;margin:24px 0 0}
.lc-page .lc-outcome{display:grid;grid-template-columns:1fr 1fr;gap:48px 80px;background:#111214;color:#fafaf8}
.lc-page .lc-outcome .lc-eyebrow{color:#a7aaa9}
.lc-page .lc-outcome ul{padding:0;margin:0;list-style:none;align-self:center}
.lc-page .lc-outcome li{padding:22px 0;border-bottom:1px solid #ffffff26;font:400 20px/28px var(--body)}
.lc-page .lc-rights{grid-column:1/-1;font:400 12px/20px var(--body);color:#a7aaa9;margin:16px 0 0}
@media(min-width:901px) and (max-height:830px){
 .lc-page .lc-flow.is-pinned .lc-flow-stage{padding-block:20px;gap:40px}
 .lc-page .lc-flow-copy>img{height:36px;margin-bottom:20px}
 .lc-page .lc-flow-copy h3{font-size:32px;margin-bottom:16px}
 .lc-page .lc-flow-copy p{font-size:15px;line-height:23px}
 .lc-page .lc-scroll-hint{margin-top:16px}
 .lc-page .lc-flow-right{gap:10px}
}
@media(min-width:901px) and (max-height:580px){
 .lc-page .lc-flow-copy h3{font-size:26px}
 .lc-page .lc-flow-copy p{font-size:14px;line-height:21px}
 .lc-page .lc-flow-copy>img{height:28px;margin-bottom:12px}
 .lc-page .lc-scroll-hint{display:none}
}
@media(max-width:1200px){
 main#main.lc-page .lc-section{padding-block:88px}
 .lc-page .lc-start{gap:32px;grid-template-columns:1fr 1fr;min-height:640px}
 .lc-page .lc-start .lc-head h2{font-size:44px}
 .lc-page .lc-flow-stage{gap:40px;grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr)}
 .lc-page .lc-meta{gap:24px}
 .lc-page .lc-identity{grid-template-columns:1fr .6fr 1.2fr;gap:16px}
}
@media(max-width:900px){
 main#main.lc-page .lc-hero{height:560px}
 .lc-page .lc-head h2{font-size:44px;line-height:1.15}
 .lc-page .lc-meta{grid-template-columns:1fr 1fr;padding-block:40px}
 .lc-page .lc-start{grid-template-columns:1fr;gap:32px}
 .lc-page .lc-start .lc-head{max-width:680px}
 .lc-page .lc-floats{max-width:600px;width:100%;margin:auto}
 .lc-page .lc-float{width:32%}
 .lc-page .lc-float:nth-child(2){margin:0 -2%}
 .lc-page .lc-flow-stage{grid-template-columns:1fr;gap:40px;padding-block:64px}
 .lc-page .lc-flow-copy{max-width:640px}
 .lc-page .lc-flow-copy p{max-width:600px}
 .lc-page .lc-flow-right .lc-screen{width:310px}
 .lc-page .lc-scroll-hint{display:none}
 .lc-page .lc-identity{grid-template-columns:1fr 1fr}
 .lc-page .lc-palette{grid-column:1/-1;min-height:160px}
 .lc-page .lc-outcome{grid-template-columns:1fr;gap:32px}
}
@media(max-width:600px){
 main#main.lc-page .lc-section{padding:64px 20px}
 main#main.lc-page .lc-hero{height:540px;min-height:0}
 .lc-page .lc-hero-art{object-position:62% center}
 .lc-page .lc-hero-bottom{left:20px;right:20px;bottom:32px;display:block}
 .lc-page .lc-hero-logo{width:44px;height:44px;margin-bottom:20px}
 .lc-page .lc-hero h1{font-size:64px}
 .lc-page .lc-hero-bottom p{font-size:16px;line-height:24px}
 .lc-page .lc-cta{width:max-content;margin-top:28px}
 .lc-page .lc-meta{padding:32px 20px;gap:28px 20px}
 .lc-page .lc-meta dd{font-size:14px;line-height:22px}
 .lc-page .lc-meta dt{margin-bottom:8px}
 .lc-page .lc-head h2,.lc-page .lc-start .lc-head h2{font-size:36px;line-height:42px;letter-spacing:-.02em;margin-bottom:24px}
 .lc-page .lc-head>p:last-child:not(.lc-eyebrow){font-size:16px;line-height:25px}
 .lc-page .lc-eyebrow{font-size:12px;margin-bottom:20px}
 .lc-page .lc-floats{padding:16px 0;min-height:320px}
 .lc-page .lc-float{width:41%;border-width:3px;border-radius:18px}
 .lc-page .lc-float:nth-child(2){margin:0 -15%;transform:translateY(-12px)}
 .lc-page .lc-float:nth-child(3){transform:translateY(16px) rotate(8deg)}
 .lc-page .lc-flow-stage{padding:48px 20px;gap:32px}
 .lc-page .lc-flow-copy h3{font-size:32px;line-height:38px}
 .lc-page .lc-flow-copy>img{margin-bottom:24px}
 .lc-page .lc-flow-copy p{font-size:16px;line-height:25px}
 .lc-page .lc-flow-right .lc-screen{width:280px}
 .lc-page .lc-water{margin-top:32px;aspect-ratio:1.25}
 .lc-page .lc-identity>figure{min-height:140px;padding:24px}
 .lc-page .lc-identity>figure img{max-height:64px}
 .lc-page .lc-palette{min-height:140px}
 .lc-page .lc-outcome li{font-size:18px;line-height:26px;padding-block:20px}
}
@media(prefers-reduced-motion:reduce){
 .lc-page .lc-floats .lc-float{animation:none!important;opacity:1;translate:none}
 .lc-page .lc-hero-art{transform:none!important}
}

/* Loops mobile case: model video showcase (second pass). */
.lc-page .lc-tryon{background:#e9ece9}
.lc-page .lc-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.lc-page .lc-video-card{min-width:0}
.lc-page .lc-video-stage{position:relative;aspect-ratio:498/1080;overflow:hidden;background:#edf0ef}
.lc-page .lc-video-stage :is(video,.lc-video-poster){display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.lc-page .lc-video-alpha .lc-video-stage{background:linear-gradient(145deg,#75d2ce,#a8e0a4 52%,#20867b)}
.lc-page .lc-video-alpha .lc-video-stage::before{content:'';position:absolute;inset:0;background:url('/assets/loops-case/prep/brand/water--Loops_key_visual_4.webp') center/cover;opacity:.8}
.lc-page .lc-video-poster{z-index:1;pointer-events:none}
.lc-page .lc-video-playing .lc-video-poster{visibility:hidden}
.lc-page .lc-video-card figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;font:400 14px/22px var(--body)}
.lc-page .lc-video-card button{min-height:44px;min-width:76px;background:#111214;color:#fff;border:1px solid #111214;padding:10px 14px;flex:none}
.lc-page .lc-video-card button:hover{background:#fff;color:#111214}
.lc-page .lc-video-status{font:400 12px/20px var(--body);margin:12px 0 0}
.lc-page .lc-video-status:empty{display:none}
.lc-page .lc-video-note{font:400 14px/22px var(--body);color:#64666c;margin:32px 0 0}
@media(max-width:900px){.lc-page .lc-video-grid{gap:16px}.lc-page .lc-video-card figcaption{flex-direction:column;align-items:flex-start;gap:10px}}
@media(max-width:600px){.lc-page .lc-video-grid{grid-template-columns:1fr;gap:36px;margin-top:32px}.lc-page .lc-video-card{width:100%;max-width:390px;margin-inline:auto}.lc-page .lc-video-card figcaption{flex-direction:row;align-items:center}.lc-page .lc-video-note{font-size:13px}}

/* Loops case: a single Lacoste flow, shared components, compact client references. */
.lc-page .lc-lacoste{background:#e1ebe3;padding:0}
main#main.lc-page .lc-lacoste>.lc-section{padding-bottom:40px}
.lc-page .lc-lacoste .lc-head{max-width:800px;margin:auto}
.lc-page .lc-tryon-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;margin-top:20px;color:#00431f;text-underline-offset:5px;font:500 14px/22px var(--body)}
.lc-page .lc-system{background:#fafaf8}
.lc-page .lc-system .lc-head h2{font-size:40px;line-height:1.15}
.lc-page .lc-component-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin-top:40px;max-width:100%;min-width:0}
.lc-page .lc-component-strip>figure{min-width:0}
.lc-page .lc-component-art{position:relative;height:180px;background:#e9ece9;display:grid;place-items:center;overflow:hidden}
.lc-page .lc-component-art img{width:94%;height:90%;object-fit:contain}
.lc-page .lc-component-product-card img{position:absolute;height:246px;width:411px;max-width:none;left:calc(50% - 57px);top:-14px;object-fit:initial;clip-path:inset(14px 312px 54px 14px)}
.lc-page .lc-component-strip figcaption{font:400 13px/20px var(--body);margin-top:12px;color:#64666c}
main#main.lc-page .lc-client-brands{padding-block:64px;background:#e9ece9}
.lc-page .lc-client-brands .lc-head h2{font-size:36px;line-height:1.2}
.lc-page .lc-client-brands .lc-head>p:last-child{font-size:16px;line-height:25px}
.lc-page .lc-brand-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:32px}
.lc-page .lc-brand-card{display:flex;flex-direction:column;align-items:center;min-width:0;padding:18px 12px 14px;background:#fafaf8;outline-offset:4px}
.lc-page .lc-brand-card:focus-visible{outline:3px solid #247bff}
.lc-page .lc-brand-logo{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:32px;margin-bottom:16px}
.lc-page .lc-brand-logo img{display:block;width:min(100px,80%);height:28px;object-fit:contain}
.lc-page .lc-brand-logo i{display:block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--lc-brand-color)}
.lc-page .lc-brand-thumb{width:72px;max-width:100%;aspect-ratio:750/1624;overflow:hidden;border:2px solid #202426;border-radius:10px;background:white}
.lc-page .lc-brand-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.lc-page .lc-brand-name{font:500 12px/18px var(--body);margin-top:12px;text-align:center;opacity:0;transform:translateY(3px);transition:opacity .2s,transform .2s}
.lc-page .lc-brand-card:is(:hover,:focus-visible) .lc-brand-name{opacity:1;transform:none}
@media(max-width:900px){
 .lc-page .lc-component-strip{display:flex;overflow-x:auto;padding:4px 2px 16px;gap:16px;scroll-snap-type:x proximity;scrollbar-width:thin}
 .lc-page .lc-component-strip>figure{flex:0 0 220px;scroll-snap-align:start}
 .lc-page .lc-brand-logo img{width:min(84px,75%)}
}
@media(max-width:600px){
 main#main.lc-page .lc-lacoste{padding:0}
 main#main.lc-page .lc-lacoste>.lc-section{padding-bottom:24px}
 .lc-page .lc-system .lc-head h2{font-size:32px;line-height:38px}
 main#main.lc-page .lc-client-brands{padding-block:48px}
 .lc-page .lc-client-brands .lc-head h2{font-size:30px;line-height:36px}
 .lc-page .lc-brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .lc-page .lc-brand-card{padding:14px 8px 12px}
 .lc-page .lc-brand-logo{gap:4px;margin-bottom:12px}
 .lc-page .lc-brand-logo img{width:calc(100% - 12px);max-width:80px;height:24px}
 .lc-page .lc-brand-thumb{width:56px;border-radius:8px}
 .lc-page .lc-brand-name{opacity:1;transform:none;font-size:11px;line-height:16px}
}
@media(hover:none){.lc-page .lc-brand-name{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lc-page .lc-brand-name{transition:none;transform:none}}
/* Loops case: shared cover/overview template (2026-10-26). Wordmark is wider than MeetSense's. */
main.cs-loops .cs-wordmark-img{width:358px;height:64px}
@media(max-width:800px){main.cs-loops .cs-wordmark-img{width:270px;height:48px}}
/* Loops QA fixes 2026-10-26 */
.lc-page .lc-component-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.lc-page .lc-video-stage{height:min(844px,calc(100vh - 220px));width:auto;max-width:100%;margin-inline:auto}
@media(max-width:600px){main.cs-loops .cs-wordmark-img{width:210px;height:38px}main.cs-loops .genva-cover-bottom{gap:16px}}
.lc-page .lc-component-art:not(.lc-component-product-card) img{width:auto;height:auto;max-width:94%;max-height:162px;object-fit:contain}

/* Loops lower-section alignment 2026-10-26. Scoped equivalents of MeetSense's
   section rhythm, headings, outcome and one-shot reveals; cover/overview untouched. */
main#main.cs-loops .lc-section{padding:96px 24px}
main.cs-loops .lc-wrap{width:1216px;max-width:100%;margin-inline:auto;box-sizing:border-box;min-width:0}
main#main.cs-loops .lc-head{width:800px;max-width:100%;margin:0 auto}
main#main.cs-loops .lc-head .lc-eyebrow{font:500 14px/20px var(--body);letter-spacing:0;text-transform:uppercase;opacity:1;color:#6b6d72;margin:0 0 24px}
main#main.cs-loops .lc-head h2{font:500 56px/64px var(--body);letter-spacing:0;margin:0 0 32px}
main#main.cs-loops .lc-head>p:not(.lc-eyebrow){font:400 18px/28px var(--body);max-width:none;margin:0}
main#main.cs-loops :is(.lc-start,.lc-language) .lc-head .lc-eyebrow{color:#a0a2a8}
main#main.cs-loops :is(.lc-start,.lc-language) .lc-head>p:not(.lc-eyebrow){color:#d2d5d4}
main.cs-loops .lc-start{display:block;min-height:0;background:#111214;color:#fafaf8}
main.cs-loops .lc-floats{width:100%;max-width:800px;margin:80px auto 0;padding:32px 0 48px;min-height:0}
main.cs-loops .lc-float{width:32%}
main.cs-loops .lc-float:nth-child(2){margin-inline:-2%}
main.cs-loops .lc-lacoste{background:#fafaf8;color:#111214}
main#main.cs-loops .lc-lacoste>.lc-section{padding:96px 24px 64px}
main.cs-loops .lc-flow{background:linear-gradient(160deg,#f0f5ef,#d3e9dd 65%,#a9d8c9)}
main.cs-loops .lc-flow-stage{width:1264px;max-width:100%;margin-inline:auto;padding:64px 24px;box-sizing:border-box}
main.cs-loops .lc-flow-right{min-height:0}
main.cs-loops .lc-flow-right .lc-screen{margin:0;box-sizing:border-box}
main.cs-loops .lc-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;width:min(420px,100%)}
main.cs-loops .lc-caption{min-width:0;overflow-wrap:anywhere}
main.cs-loops .lc-flow-right:focus-visible,main.cs-loops .lc-component-strip:focus-visible{outline:3px solid #247bff;outline-offset:5px;box-shadow:0 0 0 2px #fff}
main.cs-loops .lc-system{background:#fafaf8;color:#111214}
main.cs-loops .lc-component-strip{margin-top:80px}
main#main.cs-loops .lc-client-brands{padding:96px 24px;background:linear-gradient(160deg,#e9f3e9,#b8ddd3 65%,#74b8ad);color:#111214}
main.cs-loops .lc-brand-grid{margin-top:80px}
main.cs-loops .lc-brand-name{opacity:1;transform:none;font:500 14px/20px var(--body);margin-top:16px}
main.cs-loops .lc-tryon{background:#fafaf8;color:#111214}
main.cs-loops .lc-video-grid{margin-top:80px;align-items:start;gap:32px}
main.cs-loops .lc-video-card{width:100%;min-width:0;margin:0 auto}
main.cs-loops .lc-video-stage{height:auto;width:min(100%,calc((100svh - var(--gv-sub-off,144px) - 112px)*498/1080));aspect-ratio:498/1080;max-width:100%;margin-inline:auto}
/* Trim the encoded edge rows without changing the approved video assets. */
main.cs-loops .lc-video-stage :is(video,.lc-video-poster){transform:scale(1.01)}
main.cs-loops .lc-video-alpha .lc-video-stage::before{background:none}
main.cs-loops .lc-language{background:#030303;color:#fafaf8}
main.cs-loops .lc-water{margin-top:96px}
main.cs-loops .lc-identity{margin-top:24px}
main.cs-loops .lc-identity>figure{background:#dcebe4}
main.cs-loops :is(.lc-credit,.lc-rights){color:#a0a2a8}
main.cs-loops .lc-outcome{display:block;background:#111214;color:#fafaf8}
main#main.cs-loops .lc-outcome .lc-head .lc-eyebrow{color:#a0a2a8}
main#main.cs-loops .lc-outcome .lc-head h2{margin-bottom:0}
main.cs-loops .lc-outcome-delivered{width:800px;max-width:100%;margin:48px auto 0}
main.cs-loops .lc-outcome ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
main.cs-loops .lc-outcome li{font:400 18px/28px var(--body);padding:16px 0;border-bottom:1px solid #ffffff24}
main.cs-loops .lc-rights{width:800px;max-width:100%;margin:32px auto 0;font:400 14px/22px var(--body)}
/* Reserve the full eight-step runway in CSS, before any async manifest fetch or
   browser scroll restoration. Height remains identical when JS becomes ready. */
@media(min-width:1001px) and (prefers-reduced-motion:no-preference){
 main.cs-loops .lc-flow{height:calc(max(460px,100svh - var(--gv-sub-off,144px)) + 368svh)}
 main.cs-loops .lc-flow[data-lc-flow] .lc-flow-stage{position:sticky;top:var(--gv-sub-off,144px);height:max(460px,calc(100svh - var(--gv-sub-off,144px)));min-height:0;padding-block:32px}
 main.cs-loops .lc-flow .lc-flow-right{height:100%;justify-content:center}
 main.cs-loops .lc-flow .lc-screen{width:var(--lc-media-width,160px);min-width:160px}
}
@media(min-width:1001px) and (max-height:830px) and (prefers-reduced-motion:no-preference){
 main.cs-loops .lc-flow[data-lc-flow] .lc-flow-stage{padding-block:20px}
}
@media(max-width:1000px){
 main#main.cs-loops .lc-section,main#main.cs-loops .lc-client-brands{padding:64px 24px}
 main#main.cs-loops .lc-lacoste>.lc-section{padding:64px 24px 48px}
 main#main.cs-loops .lc-head h2{font-size:36px;line-height:44px;margin-bottom:24px}
 main#main.cs-loops .lc-head>p:not(.lc-eyebrow){font-size:16px;line-height:24px}
 main.cs-loops .lc-flow-stage{grid-template-columns:1fr;gap:40px;padding:48px 24px 64px}
 main.cs-loops .lc-flow-copy{max-width:640px;margin-inline:auto;width:100%}
 main.cs-loops .lc-flow-copy p{max-width:600px}
 main.cs-loops .lc-scroll-hint{display:none}
 main.cs-loops .lc-flow-right .lc-screen{width:310px}
 main.cs-loops .lc-floats{margin-top:48px}
 main.cs-loops :is(.lc-component-strip,.lc-brand-grid,.lc-video-grid){margin-top:48px}
 main.cs-loops .lc-component-strip{display:flex;overflow-x:auto;padding:4px 2px 16px;gap:16px;scroll-snap-type:x proximity;scrollbar-width:thin}
 main.cs-loops .lc-component-strip>figure{flex:0 0 220px;scroll-snap-align:start}
 main.cs-loops .lc-water{margin-top:56px}
 main.cs-loops .lc-outcome-delivered{margin-top:32px}
}
@media(max-width:600px){
 main.cs-loops .lc-floats{padding:16px 0 24px}
 main.cs-loops .lc-float{width:41%}
 main.cs-loops .lc-float:nth-child(2){margin-inline:-15%}
 main.cs-loops .lc-flow-stage{gap:32px}
 main.cs-loops .lc-flow-right .lc-screen{width:280px}
 main.cs-loops .lc-brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 main.cs-loops .lc-brand-name{font-size:13px;line-height:20px}
 main.cs-loops .lc-video-grid{grid-template-columns:1fr;gap:40px}
 main.cs-loops .lc-video-card{max-width:390px}
 main.cs-loops .lc-water{aspect-ratio:1.25}
 main.cs-loops .lc-identity{gap:16px}
}
main.cs-loops .lc-reveal{opacity:0;transform:translate3d(0,32px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--lc-delay,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--lc-delay,0s)}
main.cs-loops .lc-reveal-scale{transform:translate3d(0,26px,0) scale(.965)}
main.cs-loops .lc-reveal-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 main.cs-loops :is(.lc-reveal,.lc-reveal-scale,.lc-reveal-in){opacity:1;transform:none;transition:none}
}
.lc-page .lc-cover-badge{display:block;width:230px;height:32px;margin-bottom:12px}
.lc-page .lc-cover-badge{display:block;width:230px;height:32px;margin:0 0 12px}
@media(max-width:600px){.lc-page .lc-cover-badge{width:172px;height:auto;margin-bottom:10px}}
/* Loops cover: responsive first paint and an independent animation control. */
.lc-page .lc-cover-background{position:absolute;inset:0;display:block}
.lc-page .lc-cover-actions{display:flex;align-items:center;gap:12px;flex:none}
.lc-page .lc-cover-toggle{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:1px solid #ffffff80;border-radius:50%;background:#111214cc;color:#fff;font:500 16px/1 var(--body)}
.lc-page .lc-cover-toggle:hover{background:#111214}
.lc-page .lc-cover-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #111214}
@media(max-width:600px){
 main.cs-loops .genva-cover-bottom{display:flex;flex-direction:column;align-items:stretch;gap:16px;bottom:24px}
 main.cs-loops .genva-cover-bottom>:is(.pill,.lc-cover-actions){align-self:flex-end}
 .lc-page .lc-cover-toggle{width:36px;height:36px}
}
/* Loops: ripple field behind Starting Point — scroll, light and optional AI video (2026-10-27).
   The copy mask is measured on resize, never animated. Every moving layer uses transform/opacity. */
.lc-page .lc-start{position:relative;overflow:hidden;isolation:isolate}
.lc-page .lc-start>*:not(.lc-rings){position:relative;z-index:1}
.lc-page .lc-rings{--lc-p:.5;--lc-energy:0;position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent var(--lc-copy-stop,45%),#000 calc(var(--lc-copy-stop,45%) + 120px));mask-image:linear-gradient(180deg,transparent var(--lc-copy-stop,45%),#000 calc(var(--lc-copy-stop,45%) + 120px))}
.lc-page .lc-rings-field{position:absolute;inset:0;transform:scale(calc(.94 + var(--lc-p)*.18));transform-origin:50% 62%;opacity:calc(.66 + var(--lc-p)*.14 + var(--lc-energy)*.14)}
.lc-page .lc-rings-field>b{position:absolute;left:50%;top:62%;width:min(1350px,160vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 47% 50%,#36ba9e30,transparent 62%),radial-gradient(ellipse at 60% 57%,#73b77518,transparent 56%);transform:translate(-50%,-50%) scale(.94);opacity:.8;animation:lc-ripple-core 8s ease-in-out infinite}
.lc-page .lc-rings-field>i,.lc-page .lc-rings-wave{position:absolute;left:50%;top:62%;width:min(2200px,230vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.08);opacity:0;animation:lc-ripple-orbit 14.4s cubic-bezier(.2,.5,.3,1) infinite}
/* Static gradient edges and a softly blurred duplicate are rasterised once, then composited. */
.lc-page .lc-rings-field>i::before,.lc-page .lc-rings-field>i::after,.lc-page .lc-rings-wave::before,.lc-page .lc-rings-wave::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from 25deg,#78e2d29e,#89dca36b 32%,#a6a0d647 53%,#62c7b480 72%,#78e2d29e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lc-page .lc-rings-field>i::after,.lc-page .lc-rings-wave::after{inset:-2px;padding:4px;filter:blur(5px);opacity:.5}
.lc-page .lc-rings-field>i:nth-of-type(1){animation-delay:0s;--lc-static:.14}
.lc-page .lc-rings-field>i:nth-of-type(2){animation-delay:-1.8s;--lc-static:.26}
.lc-page .lc-rings-field>i:nth-of-type(3){animation-delay:-3.6s;--lc-static:.4}
.lc-page .lc-rings-field>i:nth-of-type(4){animation-delay:-5.4s;--lc-static:.54}
.lc-page .lc-rings-field>i:nth-of-type(5){animation-delay:-7.2s;--lc-static:.68}
.lc-page .lc-rings-field>i:nth-of-type(6){animation-delay:-9s;--lc-static:.8}
.lc-page .lc-rings-field>i:nth-of-type(7){animation-delay:-10.8s;--lc-static:.9}
.lc-page .lc-rings-field>i:nth-of-type(8){animation-delay:-12.6s;--lc-static:1}
.lc-page .lc-rings-wave{animation:none}
.lc-page .lc-rings.is-born .lc-rings-wave{animation:lc-ripple-birth 2.6s cubic-bezier(.16,.65,.25,1) both}
.lc-page .lc-rings.is-born .lc-rings-wave:last-child{animation-delay:.2s}
.lc-page .lc-rings-wave::before{padding:2.5px}
.lc-page .lc-rings-wave::after{padding:6px;opacity:.7}
.lc-page .lc-rings-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.lc-page .lc-rings:not(.is-active) .lc-rings-field>:is(b,i,em){animation-play-state:paused}
.lc-page .lc-rings.is-active .lc-rings-field>:is(b,i,em){animation-play-state:running}
.lc-page .lc-rings.is-active .lc-rings-field,.lc-page .lc-rings.is-active :is(b,i){will-change:transform,opacity}
.lc-page .lc-rings.is-active.is-born .lc-rings-wave{will-change:transform,opacity}
@keyframes lc-ripple-orbit{0%{transform:translate(-50%,-50%) scale(.08);opacity:0}12%{opacity:.9}48%{opacity:.55}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes lc-ripple-core{0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.65}50%{transform:translate(-50%,-50%) scale(1.06);opacity:.95}}
@keyframes lc-ripple-birth{0%{transform:translate(-50%,-50%) scale(.07);opacity:0}14%{opacity:1}100%{transform:translate(-50%,-50%) scale(.94);opacity:0}}
@media(max-width:700px){
 .lc-page .lc-rings-field{transform-origin:50% 70%}
 .lc-page .lc-rings-field>:is(b,i,em){top:70%}
 .lc-page .lc-rings-field>i,.lc-page .lc-rings-wave{width:300vw}
 .lc-page .lc-rings-field>i:nth-of-type(n+6){display:none;animation:none}
 .lc-page .lc-rings-field>i:nth-of-type(2){animation-delay:-2.88s}
 .lc-page .lc-rings-field>i:nth-of-type(3){animation-delay:-5.76s}
 .lc-page .lc-rings-field>i:nth-of-type(4){animation-delay:-8.64s}
 .lc-page .lc-rings-field>i:nth-of-type(5){animation-delay:-11.52s}
}
@media(prefers-reduced-motion:reduce){
 .lc-page .lc-rings .lc-rings-field{transform:none;opacity:.76;will-change:auto}
 .lc-page .lc-rings :is(b,i,em){animation:none!important;will-change:auto!important}
 .lc-page .lc-rings-field>b{transform:translate(-50%,-50%);opacity:.75}
 .lc-page .lc-rings-field>i{opacity:.4;transform:translate(-50%,-50%) scale(var(--lc-static,.5))}
 .lc-page .lc-rings-wave{display:none}
}
/* Loops Starting Point: phones composition as in the design, layers enter one by one (2026-10-26) */
main.cs-loops .lc-start{padding-bottom:0}
main.cs-loops .lc-start .lc-start-stage{position:relative;display:block;width:min(960px,100%);aspect-ratio:1920/1084;margin:32px auto 0}
main.cs-loops .lc-start .lc-start-art{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.js main.cs-loops .lc-start-stage .lc-start-art{opacity:0;transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.15s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.js main.cs-loops .lc-start-stage .lc-start-phone{transform:translateY(90px) scale(.95);transition-duration:1.1s,1.25s}
.js main.cs-loops .lc-start-stage .lc-start-left{transform:translateX(150px) scale(.94) rotate(2deg);transition-delay:.7s}
.js main.cs-loops .lc-start-stage .lc-start-right{transform:translateX(-150px) scale(.94) rotate(-2deg);transition-delay:.85s}
.js main.cs-loops .lc-start-stage.is-in .lc-start-art{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js main.cs-loops .lc-start-stage .lc-start-art{opacity:1;transform:none;transition:none}}
@media(max-width:700px){main.cs-loops .lc-start .lc-start-stage{margin-top:24px;width:min(560px,calc(100% + 24px));margin-inline:-12px auto}}
main#main.cs-loops .lc-start{padding-bottom:0!important}
main#main.cs-loops .lc-start>.lc-wrap{padding-bottom:0;margin-bottom:0}
main#main.cs-loops .lc-start .lc-start-stage{margin-bottom:-1px}
main#main.cs-loops .lc-start .lc-head>p:not(.lc-eyebrow)+p{margin-top:28px}
/* Loops Lacoste flow film: sticky scene, video plays while pinned (2026-10-26) */
.lc-page .lc-film{position:relative;background:#e1ebe3;color:#111214;height:calc(100svh + 2100px)}
.lc-page .lc-film-stage{position:sticky;top:var(--gv-sub-off,144px);height:calc(100svh - var(--gv-sub-off,144px));display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);align-items:center;gap:64px;padding:24px max(24px,calc((100% - 1216px)/2));box-sizing:border-box}
.lc-page .lc-film-copy>img{display:block;width:150px;height:48px;object-fit:contain;object-position:left;margin-bottom:36px}
.lc-page .lc-film-steps{position:relative;min-height:240px}
.lc-page .lc-film-step{position:absolute;inset:0 auto auto 0;max-width:420px;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .45s}
.lc-page .lc-film-step.is-on{opacity:1;visibility:visible;transform:none;transition-delay:.12s,.12s,0s}
.lc-page .lc-film-step h3{font:500 40px/1.15 var(--body);letter-spacing:-.025em;margin:0 0 20px}
.lc-page .lc-film-step p{font:400 17px/26px var(--body);margin:0}
.lc-page .lc-film-right{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;height:100%;min-height:0}
.lc-page .lc-film-phone{margin:0;height:min(100%,calc(100svh - var(--gv-sub-off,144px) - 90px));width:auto;max-width:100%;aspect-ratio:750/1624;flex:none;position:relative;overflow:hidden;box-sizing:border-box}
.lc-page .lc-film-phone video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.lc-page .lc-film-bar{width:min(300px,70%);height:2px;background:#11121426;overflow:hidden}
.lc-page .lc-film-bar i{display:block;height:100%;background:#111214;transform:scaleX(0);transform-origin:left}
.lc-page .lc-film-pause{position:absolute;right:max(0px,calc(50% - 250px));bottom:0;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#111214;color:#fff;display:grid;place-items:center;cursor:pointer}
.lc-page .lc-film-pause svg{width:14px;height:14px}
.lc-page .lc-film-pause:focus-visible{outline:2px solid #111214;outline-offset:3px}
@media(max-width:1000px){
 .lc-page .lc-film{height:auto}
 .lc-page .lc-film-stage{position:static;height:auto;grid-template-columns:1fr;gap:28px;padding-block:48px}
 .lc-page .lc-film-steps{min-height:170px}
 .lc-page .lc-film-step h3{font-size:30px}
 .lc-page .lc-film-phone{height:auto;width:min(290px,78vw)}
 .lc-page .lc-film-pause{right:calc(50% - min(145px,39vw) - 40px);bottom:30px}
}
@media(prefers-reduced-motion:reduce){.lc-page .lc-film-step{transition:none}}