@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/newsreader-300-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Newsreader";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/newsreader-300-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/hanken-grotesk-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Newsreader Fallback";src:local("Georgia");size-adjust:90.3%;ascent-override:82%;descent-override:28.8%;line-gap-override:0%}@font-face{font-family:"Hanken Fallback";src:local("Arial");size-adjust:99.5%;ascent-override:100.5%;descent-override:30.2%;line-gap-override:0%}:root{color-scheme:dark;--bg:#05070d;--bg-0:#02040a;--bg-lift:#090d18;--navy-1:#070d1a;--navy-2:#0b1530;--navy-3:#0f1f3d;--grade:#0d2250;--ink:#e8ecf3;--ink-2:#b3bdd0;--mute:#8f9bb3;--line:rgba(232,236,243,.1);--line-2:rgba(232,236,243,.3);--blue:#5b8def;--serif:"Newsreader","Newsreader Fallback",Georgia,serif;--sans:"Hanken Grotesk","Hanken Fallback",Arial,sans-serif;--fs-label:12px;--fs-text:16px;--fs-sub:clamp(22px,2.1vw,30px);--fs-display:clamp(40px,5.4vw,84px);--fs-hero:clamp(48px,8.8vw,152px);--fs-plate:clamp(44px,7vw,108px);--fs-also:clamp(26px,3.2vw,46px);--lh-text:1.7;--lh-display:1.04;--s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;--gutter:clamp(20px,4vw,56px);--sec:clamp(96px,18vh,200px);--btn-h:52px;--radius:2px;--ease:cubic-bezier(.2,.6,.2,1);--ease-lux:cubic-bezier(.16,.84,.24,1);--ease-io:cubic-bezier(.76,0,.24,1);--t-hover:250ms;--t-sheen:900ms;--t-mask:1100ms;--t-focus:1500ms;--t-plate:1800ms;--t-reveal:1000ms;--stagger-line:90ms;--stagger-word:110ms;--stagger:100ms}*,*::before,*::after{box-sizing:border-box}html{background:var(--bg);color:var(--ink);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:transparent;font:400 var(--fs-text)/var(--lh-text) var(--sans);text-align:center;font-kerning:normal;font-feature-settings:"kern","liga","calt";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}ul,ol{list-style:none}img,picture{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}main:focus{outline:0}h1,h2,h3{font-family:var(--serif);font-weight:300;font-style:normal;line-height:var(--lh-display);letter-spacing:-.014em;text-wrap:balance;color:var(--ink);font-variant-ligatures:common-ligatures}h1{font-size:var(--fs-hero);letter-spacing:-.022em}h2{font-size:var(--fs-display)}h3{font-size:var(--fs-sub);line-height:1.2;letter-spacing:-.005em}p{text-wrap:balance}.hang{margin-right:-.12em}.label{font:400 var(--fs-label)/1.6 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}.kapitel{color:var(--ink);display:flex;align-items:center;justify-content:center;gap:var(--s-3);width:100%;max-width:560px;margin-left:auto;margin-right:auto}.kapitel::before,.kapitel::after{content:"";flex:1 1 0;height:1px;background:var(--line-2);opacity:.7}.kapitel::before{transform-origin:100% 50%}.kapitel::after{transform-origin:0 50%}:focus-visible{outline:2px solid var(--blue);outline-offset:4px}::selection{background:rgba(91,141,239,.32);color:var(--ink)}.skip{position:absolute;left:-9999px;top:var(--s-1);z-index:400;padding:10px 16px;background:var(--ink);color:var(--bg);font-size:14px}.skip:focus{left:var(--s-1)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.ln{display:block;overflow:hidden;padding:.16em 0 .2em;margin:-.16em 0 -.2em}.ln__i{display:block}.w{display:inline-block}@media (prefers-reduced-motion:no-preference){.js [data-r]{opacity:0;transform:translate3d(0,14px,0);transition:opacity var(--t-reveal) var(--ease-lux),transform var(--t-reveal) var(--ease-lux);transition-delay:calc(var(--i,0) * var(--stagger) + var(--fx-delay,0ms))}.js [data-r].in{opacity:1;transform:none}.js [data-fx]{visibility:hidden}.js [data-fx].is-split{visibility:visible}.js [data-fx="lines"] .ln__i{transform:translate3d(0,108%,0);transition:transform var(--t-mask) var(--ease-lux);transition-delay:calc(var(--li,0) * var(--stagger-line) + var(--fx-delay,0ms))}.js [data-fx="lines"].in .ln__i{transform:none}.js [data-fx="focus"] .w{opacity:0;filter:blur(14px);transform:scale(1.06);transition:opacity var(--t-focus) var(--ease-lux),filter var(--t-focus) var(--ease-lux),transform var(--t-focus) var(--ease-lux);transition-delay:calc(var(--wi,0) * var(--stagger-word) + var(--fx-delay,0ms))}.js [data-fx="focus"].in .w{opacity:1;filter:none;transform:none}.js [data-rise]:not(.in)>*{opacity:0}.js [data-rise].in>*{animation:rise var(--t-reveal) var(--ease-lux) calc(var(--i,0) * var(--stagger)) backwards}@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}}.js .kapitel::before,.js .kapitel::after{transform:scaleX(0);transition:transform 1.6s var(--ease-lux) .2s}.js .kapitel.in::before,.js .kapitel.in::after{transform:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none !important;transition:none !important}}.sec{padding:var(--sec) var(--gutter) 0}@media (max-width:700px){:root{--sec:96px;--fs-display:clamp(34px,9vw,84px);--fs-hero:clamp(42px,12vw,120px);--fs-plate:clamp(42px,11.4vw,108px)}}.backdrop{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse 90% 70% at 50% 34%,#0a1428 0%,rgba(10,20,40,0) 70%),linear-gradient(180deg,var(--bg-0),var(--bg) 40%,var(--bg-0))}.feed{position:absolute;inset:-26%;opacity:0;background-repeat:repeat;-webkit-mask-image:radial-gradient(ellipse 50% 44% at 50% 46%,transparent 0,rgba(0,0,0,.35) 50%,#000 100%);mask-image:radial-gradient(ellipse 50% 44% at 50% 46%,transparent 0,rgba(0,0,0,.35) 50%,#000 100%)}.feed--far{--feed-o:.34;animation:feed-drift 170s linear infinite}.feed--near{--feed-o:.30;animation:feed-drift 110s linear infinite reverse}.feed--mid{display:none}@keyframes feed-drift{to{transform:translate3d(var(--d),var(--e),0)}}@media (prefers-reduced-motion:no-preference){.js .feed{opacity:var(--feed-o,.3);transition:opacity 3s var(--ease)}}@media (prefers-reduced-motion:reduce){.feed{opacity:var(--feed-o,.3)}}.field-on .feed{opacity:0 !important;visibility:hidden;animation-play-state:paused;transition:opacity 1.4s var(--ease),visibility 0s linear 1.4s}.field{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(80,120,210,.09),transparent 70%),radial-gradient(ellipse 120% 100% at 50% 46%,transparent 38%,rgba(2,4,10,.72) 100%)}.fx{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}.fx::before{content:"";position:absolute;inset:-200px;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .88 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
.fx::after {             
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 100% at 50% 46%, transparent 52%, rgba(2, 4, 10, .5) 100%);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
  .fx::before { animation: grain 1.1s steps(1) infinite; }
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 17% { transform: translate3d(-60px, 40px, 0); } 33% { transform: translate3d(30px, -80px, 0); }
  50% { transform: translate3d(-110px, -30px, 0); } 67% { transform: translate3d(70px, 90px, 0); } 83% { transform: translate3d(-30px, 60px, 0); }
}


.cursor { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js.has-cursor .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none;
    width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid rgba(255, 255, 255, .48); border-radius: 50%;
    opacity: 0;   
    transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) scale(var(--cs, 1));
    transition: opacity .5s var(--ease), width .5s var(--ease-lux), height .5s var(--ease-lux), margin .5s var(--ease-lux), border-color .3s;
  }
  .js.has-cursor .cursor.is-on { opacity: 1; }
  .js.has-cursor .cursor.is-big { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: rgba(255, 255, 255, .55); }
  .js.has-cursor .cursor.is-down { --cs: .82; }
}


.intro { display: none; }
.intro-on .intro {
  display: block; position: fixed; inset: 0; z-index: 500; pointer-events: auto; cursor: default;
  animation: intro-gone 0s linear 1.9s forwards;
}
.intro__p { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--bg-0); will-change: transform; }
.intro__p--t { top: 0; animation: intro-top 1.9s cubic-bezier(.77, 0, .175, 1) both; }
.intro__p--b { bottom: 0; animation: intro-bot 1.9s cubic-bezier(.77, 0, .175, 1) both; }
.intro__logo {
  position: absolute; left: 50%; top: 50%; width: clamp(150px, 16vw, 230px); height: auto; margin: 0;
  transform: translate3d(-50%, calc(-50% - 22px), 0); animation: intro-logo 1.9s var(--ease-lux) both;
}
.intro__line {
  position: absolute; left: 6vw; right: 6vw; top: 50%; height: 1px; margin-top: -.5px;
  background: rgba(232, 236, 243, .32); transform-origin: 50% 50%; animation: intro-line 1.9s var(--ease-lux) both;
}
@keyframes intro-top {
  0%, 47% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, -101%, 0); }
}
@keyframes intro-bot {
  0%, 47% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 101%, 0); }
}
@keyframes intro-logo {
  0%, 3% { opacity: 0; filter: blur(12px); }
  22% { opacity: 1; filter: blur(0); }
  46% { opacity: 1; filter: blur(0); }
  58%, 100% { opacity: 0; filter: blur(6px); }
}
@keyframes intro-line {
  0%, 12% { transform: scaleX(0); opacity: 1; }
  40% { transform: scaleX(1); opacity: 1; }
  52%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes intro-gone { to { visibility: hidden; pointer-events: none; } }
.intro.is-skip { animation: none; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; pointer-events: none; }
.intro.is-skip * { animation: none !important; }


.chapters { display: none; }
@media (min-width: 1100px) {
  .chapters {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    position: fixed; right: clamp(12px, 1.8vw, 30px); top: 50%; z-index: 45; transform: translate3d(0, -50%, 0);
  }
  .chapters a {
    display: flex; align-items: center; justify-content: center; min-width: 44px; padding: 14px 0;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font: 400 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
    color: var(--ink); opacity: calc(.62 + .38 * var(--on, 0));
    transition: color var(--t-hover), opacity var(--t-hover);
  }
  .chapters a::after {       
    content: ""; position: absolute; top: 14px; bottom: 14px; left: 18px; width: 1px;
    background: var(--ink); transform: scaleY(var(--on, 0)); transform-origin: 50% 50%; opacity: .6;
  }
  .chapters a { position: relative; }
  .chapters a:hover, .chapters a:focus-visible { opacity: 1; }
  .chapters a:active { color: #fff; }
  .js:not(.is-ready) .chapters { opacity: 0; }
  .chapters { transition: opacity 1.4s var(--ease) .4s; }
  
  .chapters::before { content: ""; position: absolute; z-index: -1; top: -14vh; bottom: -14vh; left: -34px; right: -46px; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 100% 50%, rgba(2, 4, 10, .72), transparent 74%); }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .js:not(.past-hero) .chapters { opacity: 0; pointer-events: none; }
  .js.past-hero .chapters { transition-delay: 0s; transition-duration: .9s; }
}
.no-chapters .chapters { display: none; }



.feed--far { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='504'%3E%3Cg fill='%230d1b3c' stroke='%23b8cdfa' stroke-opacity='.14'%3E%3Crect x='25.5' y='37.5' width='33' height='59' rx='2' fill-opacity='0.48'/%3E%3Crect x='122.5' y='92.5' width='39' height='70' rx='2' fill-opacity='0.85'/%3E%3Crect x='253.5' y='41.5' width='27' height='49' rx='2' fill-opacity='0.58'/%3E%3Crect x='393.5' y='5.5' width='37' height='67' rx='2' fill-opacity='0.1'/%3E%3Crect x='505.5' y='66.5' width='30' height='54' rx='2' fill-opacity='0.14'/%3E%3Crect x='49.5' y='189.5' width='23' height='42' rx='2' fill-opacity='0.76'/%3E%3Crect x='148.5' y='270.5' width='32' height='58' rx='2' fill-opacity='0.35'/%3E%3Crect x='259.5' y='212.5' width='36' height='65' rx='2' fill-opacity='0.22'/%3E%3Crect x='348.5' y='251.5' width='36' height='65' rx='2' fill-opacity='0.53'/%3E%3Crect x='459.5' y='202.5' width='33' height='59' rx='2' fill-opacity='0.77'/%3E%3Crect x='33.5' y='342.5' width='33' height='59' rx='2' fill-opacity='0.72'/%3E%3Crect x='153.5' y='386.5' width='25' height='45' rx='2' fill-opacity='0.14'/%3E%3Crect x='235.5' y='370.5' width='26' height='47' rx='2' fill-opacity='0.63'/%3E%3Crect x='385.5' y='407.5' width='27' height='49' rx='2' fill-opacity='0.72'/%3E%3Crect x='475.5' y='340.5' width='33' height='59' rx='2' fill-opacity='0.31'/%3E%3C/g%3E%3C/svg%3E"); background-size: 560px 504px; --d: -560px; --e: -504px; }
.feed--near { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='690' height='660'%3E%3Cg fill='%230d1b3c' stroke='%23b8cdfa' stroke-opacity='.14'%3E%3Crect x='80.5' y='69.5' width='82' height='147' rx='2' fill-opacity='0.1'/%3E%3Crect x='396.5' y='122.5' width='54' height='97' rx='2' fill-opacity='0.27'/%3E%3Crect x='569.5' y='156.5' width='81' height='145' rx='2' fill-opacity='0.34'/%3E%3Crect x='108.5' y='355.5' width='57' height='102' rx='2' fill-opacity='0.84'/%3E%3Crect x='356.5' y='372.5' width='82' height='147' rx='2' fill-opacity='0.11'/%3E%3Crect x='524.5' y='377.5' width='66' height='118' rx='2' fill-opacity='0.11'/%3E%3C/g%3E%3C/svg%3E"); background-size: 690px 660px; --d: -690px; --e: -660px; }





.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  min-height: var(--btn-h); padding: 0 var(--s-4);
  font: 400 var(--fs-text)/1.2 var(--sans); letter-spacing: .03em; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .6s var(--ease-lux), background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover);
}
.btn::after {   
  content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 34%; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0, rgba(255, 255, 255, .5) 50%, transparent 100%);
  transform: translate3d(-170%, 0, 0) skewX(-20deg);
}
.btn:hover::after, .btn:focus-visible::after { animation: sheen var(--t-sheen) var(--ease-lux) 1 both; }
@keyframes sheen {
  0% { opacity: 1; transform: translate3d(-170%, 0, 0) skewX(-20deg); }
  100% { opacity: 1; transform: translate3d(440%, 0, 0) skewX(-20deg); }
}
.btn:active { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.982); transition-duration: .12s, var(--t-hover), var(--t-hover), var(--t-hover); }
.btn--fill { background: #d8dfeb; color: var(--bg); }
.btn--fill::after { background: linear-gradient(100deg, transparent 0, rgba(255, 255, 255, .95) 50%, transparent 100%); }
.btn--fill:hover, .btn--fill:focus-visible { background: #f2f5fb; }
.btn--line { border-color: var(--line-2); color: var(--ink); }
.btn--line::after { background: linear-gradient(100deg, transparent 0, rgba(190, 210, 255, .2) 50%, transparent 100%); }
.btn--line:hover, .btn--line:focus-visible { border-color: rgba(232, 236, 243, .75); }
.btn--sm { min-height: 44px; padding: 0 var(--s-3); }


.link, .lnk, .cookie__lnk {
  position: relative; display: inline-flex; align-items: center; min-height: var(--btn-h);
  color: var(--ink-2); letter-spacing: .03em; text-decoration: none;
  transition: color var(--t-hover);
}
.link::before, .link::after, .lnk::before, .lnk::after, .cookie__lnk::before, .cookie__lnk::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 15px); height: 1px; pointer-events: none;
}
.link::before, .lnk::before, .cookie__lnk::before { background: var(--line-2); }
.link::after, .lnk::after, .cookie__lnk::after { background: var(--ink); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .7s var(--ease-lux); }
.link:hover, .link:focus-visible, .lnk:hover, .lnk:focus-visible, .cookie__lnk:hover, .cookie__lnk:focus-visible { color: var(--ink); }
.link:hover::after, .link:focus-visible::after, .lnk:hover::after, .lnk:focus-visible::after, .cookie__lnk:hover::after, .cookie__lnk:focus-visible::after { transform: none; }
.link:active, .lnk:active, .cookie__lnk:active, .top__nav a:active, .foot a:active, .foot button:active { color: #fff; }

.actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-2) var(--s-3);
}

.actions .btn { min-width: 304px; }


.top {
  position: fixed; left: 0; right: 0; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr; justify-items: center;
  padding: 14px var(--gutter) 0; pointer-events: none;
}
.top > * { pointer-events: auto; }
.top::before {   
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 128px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(2, 4, 10, .94), rgba(2, 4, 10, .84) 40%, rgba(2, 4, 10, 0));
  opacity: .0; transition: opacity .8s var(--ease);
}
.is-scrolled .top::before { opacity: 1; }
.top__logo { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-height: 48px; padding: 6px 20px; }   
.top__logo img { width: 144px; height: auto; opacity: .95; transform-origin: 50% 0; transition: opacity var(--t-hover), transform .8s var(--ease-lux); }
.top__logo:hover img, .top__logo:focus-visible img { opacity: 1; }
.top__nav { grid-column: 1; grid-row: 2; display: flex; justify-content: center; gap: var(--s-4); transition: opacity .6s var(--ease), transform .8s var(--ease-lux); }
.top__nav a, .top__btn { color: var(--mute); }
.top__nav a { position: relative; display: inline-flex; align-items: center; min-height: 46px; letter-spacing: .03em; transition: color var(--t-hover); }
.top__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .7s var(--ease-lux); }
.top__nav a:hover, .top__nav a:focus-visible { color: var(--ink); }
.top__nav a:hover::after, .top__nav a:focus-visible::after { transform: none; }
.top__btn { position: absolute; right: var(--gutter); top: 14px; transition: transform .6s var(--ease-lux), background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover); }
.top__btn.btn { color: var(--ink); border-color: var(--line-2); }
.top__btn.btn:hover { border-color: rgba(232, 236, 243, .75); }
.is-down .top__nav { opacity: 0; transform: translate3d(0, -8px, 0); pointer-events: none; }
.is-down .top__logo img { transform: scale(.82); }
@media (prefers-reduced-motion: no-preference) {
  .js:not(.is-ready) .top { opacity: 0; }
  .js .top { transition: opacity 1.4s var(--ease) .3s; }
}


.foot {
  position: relative; margin-top: 0; padding: var(--s-2) var(--gutter);
  border-top: 1px solid var(--line); background: linear-gradient(to bottom, rgba(2, 4, 10, .6), var(--bg-0));
  font-size: var(--fs-label); letter-spacing: .06em; color: var(--mute);
}
.foot__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--s-4); }
.foot__in > a, .foot__in > button { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
.foot__in > span { padding: 10px 0; }
.foot a, .foot button { color: var(--mute); letter-spacing: .06em; transition: color var(--t-hover); }
.foot a::after, .foot button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .7s var(--ease-lux); }
.foot a:hover, .foot button:hover, .foot a:focus-visible, .foot button:focus-visible { color: var(--ink); }
.foot a:hover::after, .foot button:hover::after, .foot a:focus-visible::after, .foot button:focus-visible::after { transform: none; }


.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--bg-lift); border-top: 1px solid var(--line);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--t-reveal) var(--ease-lux), visibility 0s linear var(--t-reveal);
}
.cookie.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.cookie__in { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); max-width: 640px; margin: 0 auto; }
.cookie__t { color: var(--ink-2); }
.cookie__b { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1) var(--s-2); }
.cookie__lnk, .cookie .lnk { color: var(--mute); min-height: 44px; }
.cookie__lnk::before, .cookie__lnk::after, .cookie .lnk::before, .cookie .lnk::after { bottom: calc(50% - 12px); }
.cookie__panel { max-width: 640px; margin: var(--s-3) auto 0; padding-top: var(--s-3); border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.cookie__panel[hidden] { display: none; }
.cookie__row { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cookie__rt { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--ink); }
.cookie__row p { color: var(--mute); max-width: 52ch; }
.cookie input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }


.wafb {
  position: fixed; left: 50%; bottom: var(--s-3); z-index: 70;
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  padding: var(--s-4) var(--s-3) var(--s-3);
  background: var(--bg-lift); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  opacity: 0; visibility: hidden; transform: translate(-50%, 14px);
  transition: opacity var(--t-reveal) var(--ease-lux), transform var(--t-reveal) var(--ease-lux), visibility 0s linear var(--t-reveal);
}
.wafb.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.wafb__h { font: 300 var(--fs-sub)/1.2 var(--serif); color: var(--ink); }
.wafb__a { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); }
.wafb__x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; }
.wafb__x::before, .wafb__x::after { content: ""; position: absolute; left: 14px; top: 21px; width: 16px; height: 1px; background: var(--mute); transition: background-color var(--t-hover), transform .5s var(--ease-lux); }
.wafb__x::before { transform: rotate(45deg); }
.wafb__x::after { transform: rotate(-45deg); }
.wafb__x:hover::before, .wafb__x:hover::after, .wafb__x:focus-visible::before, .wafb__x:focus-visible::after { background: var(--ink); }
.wafb__x:hover::before { transform: rotate(135deg); }
.wafb__x:hover::after { transform: rotate(45deg); }


.toast {
  position: fixed; left: 50%; top: var(--s-3); z-index: 80; max-width: calc(100vw - 2 * var(--gutter));
  padding: 12px var(--s-3); background: var(--bg-lift); border: 1px solid var(--line); color: var(--ink);
  opacity: 0; visibility: hidden; transform: translate(-50%, -12px);
  transition: opacity 500ms var(--ease-lux), transform 500ms var(--ease-lux), visibility 0s linear 500ms;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }

@media (max-width: 700px) {
  .top { padding-top: var(--s-1); }
  .top__logo img { width: 128px; }
  .top__nav { gap: var(--s-3); }
  .top__btn { display: none; }
  .foot__in { gap: 0 var(--s-3); }
  .foot__in > span { flex-basis: 100%; }
  .actions { flex-direction: column; gap: var(--s-1); }
  .actions .btn { min-width: min(304px, calc(100vw - 2 * var(--gutter))); padding: 8px var(--s-3); line-height: 1.25; }
  .wafb__a { flex-direction: column; align-items: stretch; width: 100%; }
}

.cookie { max-height: 92vh; max-height: 92svh; overflow-y: auto; overscroll-behavior: contain; }




.plate { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.plate__media { position: absolute; inset: 0; overflow: hidden; background: var(--bg-0); }
.plate__media picture { display: contents; }
.plate__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  filter: saturate(.72) contrast(1.1) brightness(.92);
  transform: scale(1.04);
}
.plate__grade { position: absolute; inset: 0; background: var(--grade); mix-blend-mode: color; opacity: .42; pointer-events: none; }
.plate__vig {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 92% 80% at 50% 50%, transparent 38%, rgba(2, 4, 10, .72) 100%),
    linear-gradient(to bottom, var(--bg-0) 0, rgba(2, 4, 10, .5) 9%, transparent 26%, transparent 58%, rgba(2, 4, 10, .72) 86%, var(--bg-0) 100%);
}
.plate__light {
  position: absolute; inset: -10% -40%; pointer-events: none; opacity: .0;
  background: linear-gradient(var(--la, 100deg), transparent 40%, rgba(160, 192, 255, var(--lo, .08)) 50%, transparent 60%);
  transform: translate3d(-55%, 0, 0);
}
.plate__body {
  position: relative; z-index: 3; width: 100%; padding: calc(var(--sec) * .8) var(--gutter);
  display: flex; flex-direction: column; align-items: center;
}

.plate__scrim { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 62% 46% at 50% 54%, rgba(2, 4, 10, .5), transparent 74%); }

.plate__t { font-size: var(--fs-plate); line-height: 1; letter-spacing: -.024em; margin: 0; }
.scope {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: clamp(24px, 3.4vh, 36px);
  font: 400 13px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2);
}
.scope li { position: relative; padding: 10px clamp(14px, 1.9vw, 26px); transition: color var(--t-hover), opacity .5s var(--ease); }
.scope li + li::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--line-2); }
.scope li > span, .scope li > a { position: relative; display: inline-block; padding: 6px 0; }
.scope li > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .8s var(--ease-lux); }
.scope li:hover { color: var(--ink); }
.scope li:hover > span::after { transform: none; }
.scope:hover li:not(:hover) { opacity: .45; }
.plate__s { max-width: 36ch; margin-top: clamp(20px, 3vh, 32px); font: 300 var(--fs-sub)/1.4 var(--serif); letter-spacing: -.004em; color: var(--ink-2); }


.field-on .plate__media { opacity: var(--plate-o, .68); }


@media (prefers-reduced-motion: no-preference) {
  .js .plate__media { clip-path: inset(15% 11% 15% 11%); transform: scale(1.08); transition: clip-path var(--t-plate) var(--ease-lux), transform calc(var(--t-plate) * 1.3) var(--ease-lux); }
  .js .plate.has-in .plate__media { clip-path: inset(0); transform: none; }
  .plate__media img {
    transform: translate3d(0, calc((var(--sp, .5) - .5) * -3%), 0) scale(calc(1.04 + var(--sp, .5) * .08));
  }
  
  .plate.is-vis .plate__media img { will-change: transform; }
  .plate.is-vis .plate__light { opacity: 1; animation: plate-light var(--ld, 17s) var(--ease-io) infinite; }
  @keyframes plate-light {
    0% { transform: translate3d(-55%, 0, 0); }
    42%, 100% { transform: translate3d(55%, 0, 0); }
  }
  .plate::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--bg-0); opacity: calc(var(--ex, 0) * .94); }
  .plate:not(.is-leaving)::after { display: none; }   
  
  .plate.is-leaving .plate__body { opacity: calc(1 - var(--ex, 0) * 1.4); }
  
  .plate .plate__body { isolation: isolate; transform: translate3d(0, calc((var(--sp, .5) - .5) * -36px), 0); }
  .plate.is-vis .plate__body { will-change: transform; }
  @supports (transform: translate3d(0, round(nearest, 1.4px, 1px), 0)) {
    .plate .plate__body { transform: translate3d(0, round(nearest, calc((var(--sp, .5) - .5) * -36px), var(--q, 1px)), 0); }
  }
  @media (min-resolution: 2dppx) { .plate { --q: .5px; } }
}
@media (max-width: 700px) {
  .scope { font-size: 12px; letter-spacing: .2em; }
  .scope li { padding: 8px 12px; }
  .plate__body { padding-top: 120px; padding-bottom: 96px; }
  .plate__media img { filter: saturate(.72) contrast(1.1) brightness(.84); }
}
@media (max-width: 520px) {
  .scope li + li::before { display: none; }
  .scope li { padding: 8px 14px; }
}




:root { --hdr: 108px; }
.hero { position: relative; }
.hero__pin { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding-top: var(--hdr); }
.hero__media { position: absolute; inset: 0; }
.hero__plate { position: absolute; inset: 0; }
.hero__plate picture { display: contents; }
.hero__plate img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: saturate(.74) contrast(1.1) brightness(.82); transform: scale(1.04);
}
.hero__smoke {
  position: absolute; inset: -12%; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 26% at 26% 72%, rgba(120, 150, 215, .08), transparent 70%),
    radial-gradient(ellipse 30% 24% at 74% 64%, rgba(100, 135, 205, .07), transparent 70%),
    radial-gradient(ellipse 40% 30% at 52% 84%, rgba(90, 120, 190, .07), transparent 72%);
}
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 50% at 50% 52%, rgba(2, 4, 10, .66), transparent 76%),
    radial-gradient(ellipse 96% 84% at 50% 50%, transparent 40%, rgba(2, 4, 10, .74) 100%),
    linear-gradient(to bottom, rgba(2, 4, 10, .7), transparent 22%, transparent 70%, rgba(2, 4, 10, .78));
}

.field-on .hero__shade {
  background:
    radial-gradient(ellipse 62% 48% at 50% 50%, rgba(2, 4, 10, .34), transparent 78%),
    radial-gradient(ellipse 100% 90% at 50% 50%, transparent 46%, rgba(2, 4, 10, .66) 100%),
    linear-gradient(to bottom, rgba(2, 4, 10, .6), transparent 20%, transparent 74%, rgba(2, 4, 10, .72));
}
.hero__card { position: relative; z-index: 3; width: 100%; max-width: 1560px; padding: 0 var(--gutter); margin-top: 0; }

.hero h1 { font-size: clamp(50px, min(9.6vw, 19vh), 156px); line-height: .98; letter-spacing: -.03em; max-width: 11.4em; margin: 0 auto; --stagger-word: 70ms; --t-focus: 900ms; }
.js .hero h1[data-fx="focus"] .w { transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
.hero .actions { margin-top: clamp(36px, 7vh, 88px); }
.hero__cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; width: 1px; height: 64px; margin-left: -.5px; background: rgba(232, 236, 243, .16); overflow: hidden; }
.hero__cue i { position: absolute; left: 0; top: 0; width: 1px; height: 26px; background: rgba(232, 236, 243, .8); transform: translate3d(0, -110%, 0); }

@media (prefers-reduced-motion: no-preference) {
  
  .js .hero { height: calc(100vh + 60vh); height: calc(100svh + 60vh); }
  .js .hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; }
  
  .js .hero__media { animation: hero-in 2.6s var(--ease-lux) both; }
  .intro-on .hero__media { animation-delay: .9s; }
  @keyframes hero-in { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
  .js:not(.is-ready) .hero__cue { opacity: 0; }
  .js .hero__cue { transition: opacity 2s var(--ease) 1.6s; }
  .hero__cue i { animation: cue 3.4s var(--ease-io) infinite; }
  @keyframes cue { 0% { transform: translate3d(0, -110%, 0); } 60%, 100% { transform: translate3d(0, 250%, 0); } }
  .hero__smoke { animation: smoke 26s ease-in-out infinite alternate; }
  @keyframes smoke { from { transform: translate3d(-2.5%, 1%, 0) scale(1); } to { transform: translate3d(2.5%, -1.5%, 0) scale(1.06); } }

  
  .hero__plate img { transform: scale(calc(1.04 + var(--sp, 0) * .42)); transform-origin: 50% 42%; }
  .hero__smoke, .hero .plate__light { opacity: calc(var(--hk, 1) * (1 - clamp(0, (var(--sp, 0) - .6) * 2.8, 1))); }
  
  .hero__plate { opacity: calc(max(var(--hk, 1), clamp(0, (var(--sp, 0) - .3) * 2.4, 1)) * (1 - clamp(0, (var(--sp, 0) - .84) * 6.5, 1))); }
  
  .js .hero + .refs { margin-top: -50vh; margin-top: -50svh; }
  
  .hero.is-live .hero__plate img { will-change: transform; }
  .hero.is-live .plate__light { animation: plate-light 17s var(--ease-io) infinite; }
  .hero__card { opacity: calc(1 - clamp(0, (var(--sp, 0) - .28) * 2.3, 1)); transform: translate3d(0, calc(var(--sp, 0) * -64px), 0); }
  
  .hero__shade { opacity: calc(1 - clamp(0, (var(--sp, 0) - .78) * 4, 1)); }
  .hero__cue { opacity: calc(1 - var(--sp, 0) * 6); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  
  .js .hero { height: calc(100vh + 40vh); height: calc(100svh + 40vh); }
  .js .hero + .refs { margin-top: -55vh; margin-top: -55svh; }
}

.top__nav a { min-width: 46px; justify-content: center; }
@media (max-width: 400px) { .top__nav { gap: 12px; } }
@media (max-width: 700px) {
  .brd { display: none; }
  .hero__card { margin-top: 0; }
  .hero__plate img { object-position: 50% 22%; }
}
@media (max-height: 600px) {
  .js .hero { height: auto; }
  .js .hero__pin { position: relative; height: auto; min-height: 100vh; min-height: 100svh; padding: var(--hdr) 0 0; }
}



.butce {
  --bs: min(calc((100vw - 2 * var(--gutter)) / 7.2), 24vh);    
  --ch: 1.1em;      
  --bl: .9em;       
  --ax: .95em;      
  --cw: .566em;     
  --pw: .2em;       
  --uw: .566em;     
  --fig: #c6cfde;      
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 7vh) var(--gutter) 7vh; overflow: hidden;
}

.butce__bg, .butce__beam, .butce__vig {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
}

.butce__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 44% at 50% 52%, rgba(13, 28, 64, .5), transparent 74%),
    linear-gradient(to bottom, rgba(2, 4, 10, .5), rgba(2, 4, 10, .18) 40%, rgba(2, 4, 10, .5));
}
.butce__beam {   
  position: absolute; left: 50%; top: -6%; width: min(1100px, 150vw); height: 96%; pointer-events: none; translate: -50% 0;
  background: radial-gradient(ellipse 25% 76% at 50% 0%, rgba(124, 164, 238, .16), transparent 74%);
}
.butce__vig {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 78% 68% at 50% 50%, transparent 38%, rgba(2, 4, 10, .72) 100%);
}
.butce__stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }
.butce__label {
  max-width: 36em; margin: 0 0 clamp(22px, 4.6vh, 56px); padding-left: .3em;
  font-size: clamp(12px, min(.95vw, 1.8vh), 15px); letter-spacing: .3em; line-height: 1.7; color: var(--ink-2);
}


.butce__fig {
  position: relative; max-width: 100%; margin: 0 0 .3em;
  font: 300 var(--bs)/var(--ch) var(--serif); font-variant-numeric: lining-nums tabular-nums; font-kerning: none;
  letter-spacing: 0; white-space: nowrap; color: var(--fig);
}
.butce__row { position: relative; display: flex; justify-content: center; height: var(--ch); line-height: 1.32em; }
.butce__pool {   
  position: absolute; left: 50%; top: var(--ax); width: 150%; height: 1.1em; translate: -50% 0; pointer-events: none; opacity: .6;
  background: radial-gradient(ellipse 46% 100% at 50% 0%, rgba(112, 152, 228, .14), transparent 72%);
}
.butce__rule {   
  position: absolute; left: -4%; right: -4%; top: var(--ax); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(232, 236, 243, .34) 16%, rgba(232, 236, 243, .34) 84%, transparent);
  transform-origin: 50% 50%;
}


.od { display: inline-flex; height: var(--ch); }
.od__c {
  position: relative; display: block; flex: none; width: var(--cw); height: var(--ch); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.od__s { display: block; transform: translate3d(0, calc(var(--ch) * var(--n, 0) * -1), 0); }   
.od__s i { display: block; height: var(--ch); font-style: normal; line-height: 1.32em; text-align: center; }
.od__p, .od__u { display: block; flex: none; height: var(--ch); line-height: 1.32em; text-align: center; }
.od__p { width: var(--pw); }
.od__u { width: var(--uw); }


.butce__sheen {
  position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; height: var(--ch); line-height: 1.32em; color: #fff; pointer-events: none; opacity: 0;
  -webkit-mask-image: linear-gradient(104deg, transparent 43%, #000 50%, transparent 57%); mask-image: linear-gradient(104deg, transparent 43%, #000 50%, transparent 57%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 100% 0; mask-position: 100% 0;
}

.butce__floor, .butce:not(.is-od) .butce__row::after {
  position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; height: var(--ch); line-height: 1.32em; color: var(--fig); pointer-events: none;
  transform-origin: 50% var(--ax); transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, .3) 86.3%, transparent 86.4%);
          mask-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, .3) 86.3%, transparent 86.4%);
}
.butce:not(.is-od) .butce__row::after { content: attr(data-text); text-align: center; display: block; }

@media (prefers-reduced-motion: no-preference) {
  
  .js .hero + .butce { margin-top: -50vh; margin-top: -50svh; }

  
  .js .butce.is-od .butce__label {
    opacity: 0; filter: blur(14px); transform: scale(1.05);
    transition: opacity 1.5s var(--ease-lux), filter 1.5s var(--ease-lux), transform 1.5s var(--ease-lux);
  }
  .js .butce.is-on .butce__label { opacity: 1; filter: none; transform: none; }
  .js .butce.is-od .butce__rule { transform: scaleX(0); transition: transform 1.9s var(--ease-lux) .45s; }
  .js .butce.is-on .butce__rule { transform: none; }
  .js .butce.is-od .butce__row, .js .butce.is-od .butce__floor { opacity: 0; }
  .js .butce.is-od.is-roll .butce__row { opacity: 1; transition: opacity 1.1s var(--ease-lux) calc(var(--base, 1.1s) - .2s); }
  .js .butce.is-od.is-roll .butce__floor { opacity: 1; transition: opacity 1.6s var(--ease-lux) calc(var(--base, 1.1s) + .2s); }
  .js .butce.is-od .butce__pool { opacity: 0; transition: opacity 2.4s var(--ease-lux) .8s; }
  .js .butce.is-on .butce__pool { opacity: .6; }
  .js .butce.is-od .butce__beam { opacity: .5; scale: 1.5 1; transition: opacity 2.8s var(--ease-lux), scale 2.8s var(--ease-lux); }

  .js .butce.is-od .od__s { transform: translate3d(0, 0, 0); }   
  
  .js .butce.is-roll .od__s {
    transform: translate3d(0, calc(var(--ch) * var(--n) * -1), 0);
    transition: transform var(--dur) cubic-bezier(.16, 1, .3, 1) calc(var(--base, 1.1s) + var(--dly));
  }
  
  .js .butce.is-roll .od__c { animation: bt-fast calc(var(--dur) * .42) cubic-bezier(.2, .6, .2, 1) calc(var(--base, 1.1s) + var(--dly)) 1; }
  @keyframes bt-fast { from { filter: blur(2.6px); } to { filter: blur(0); } }

  
  .js .butce.is-landed .butce__beam { opacity: 1; scale: 1 1; animation: bt-breathe 9s ease-in-out 2.8s infinite alternate; }
  .js .butce.is-landed .butce__pool { opacity: 1; animation: bt-pool 9s ease-in-out 2.4s infinite alternate; }
  .js .butce.is-landed .butce__sheen { animation: bt-pass 2.9s cubic-bezier(.45, .05, .2, 1) .15s 1 both, bt-pass-rare 30s linear 16s infinite; }
  .js .butce:not(.is-live) .butce__beam, .js .butce:not(.is-live) .butce__pool, .js .butce:not(.is-live) .butce__sheen { animation-play-state: paused; }
  @keyframes bt-breathe { from { opacity: .82; } to { opacity: 1; } }
  @keyframes bt-pool { from { opacity: .72; } to { opacity: 1; } }
  @keyframes bt-pass {
    0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    100% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  }
  @keyframes bt-pass-rare {
    0% { opacity: .5; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    11% { opacity: .5; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
    11.1%, 100% { opacity: 0; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  }

  
  .butce__stage { --xx: clamp(0, (var(--sp, .5) - .5) * 3.2, 1); opacity: calc(1 - var(--xx) * .92); transform: scale(calc(1 + var(--xx) * .04)); }
}
@media (min-width: 1100px) {   
  .butce { --bs: min(calc((100vw - 192px) / 7.2), 24vh); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  .js .hero + .butce { margin-top: -55vh; margin-top: -55svh; }
}
@media (prefers-reduced-motion: no-preference) and (max-height: 600px) {
  .js .hero + .butce { margin-top: 0; }
}
@media (max-width: 700px) {
  .butce { --bs: min(calc((100vw - 2 * var(--gutter)) / 7), 24vh); padding-top: calc(var(--hdr) + 5vh); padding-bottom: 5vh; }
  .butce__label { letter-spacing: .24em; }
  .butce__beam { width: 170vw; }
}
@media (max-width: 480px) { .butce__label { max-width: 21em; } }



.refs { position: relative; padding: var(--s-6) var(--gutter) var(--sec); }
.refs__plumb { display: block; width: 1px; height: var(--s-7); margin: 0 auto var(--s-5); background: var(--line-2); opacity: 1; transform-origin: 50% 0; }
.refs .kapitel { margin-bottom: clamp(var(--s-5), 7vh, 72px); }


.logos {
  --cols: 6; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  max-width: 1260px; margin: 0 auto; padding: 0 1px 1px 0;
}
.logos li {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  flex: 0 0 calc((100% + var(--cols) * 1px) / var(--cols)); min-height: 118px; padding: var(--s-3) var(--s-2);
  border: 1px solid; border-color: var(--line) rgba(232, 236, 243, .05); margin: 0 -1px -1px 0;
}
.logos picture { display: contents; }
.logos img { width: var(--w); height: var(--h); max-width: 100%; object-fit: contain; transition: opacity .6s var(--ease), transform .8s var(--ease-lux); }
.wordmark { font: 300 21px/1.15 var(--serif); letter-spacing: .03em; color: var(--mute); white-space: nowrap; transition: opacity .6s var(--ease), transform .8s var(--ease-lux); }
.wordmark br { display: none; }
.logos li::after {   
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 0, rgba(190, 212, 255, .13) 50%, transparent 100%);
  transform: translate3d(-170%, 0, 0) skewX(-18deg);
}
.logos li:hover::after { animation: logo-sheen var(--t-sheen) var(--ease-lux) 1 both; }
@keyframes logo-sheen {
  0% { opacity: 0; transform: translate3d(-120%, 0, 0) skewX(-18deg); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(250%, 0, 0) skewX(-18deg); }
}

@media (hover: hover) {
  .logos:hover li:not(:hover) img, .logos:hover li:not(:hover) .wordmark { opacity: .35 !important; }
  .logos li:hover img { opacity: 1 !important; transform: translate3d(0, -4px, 0); }
  .logos li:hover .wordmark { color: var(--ink); transform: translate3d(0, -4px, 0); }
}

.logos-mirror { position: relative; max-width: 1260px; height: 92px; margin: 0 auto; overflow: hidden; pointer-events: none; padding-right: 1px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), transparent 92%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .3), transparent 92%); }
.logos-mirror__in { --cols: 6; display: flex; flex-wrap: wrap; justify-content: center; transform: scaleY(-1) translateY(-100%); transform-origin: 50% 0; }
.logos-mirror li { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 calc(100% / var(--cols)); min-height: 118px; padding: var(--s-3) var(--s-2); }
.logos-mirror picture { display: contents; }
.logos-mirror img { width: var(--w); height: var(--h); max-width: 100%; object-fit: contain; }

.refs::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; pointer-events: none; background: linear-gradient(to bottom, rgba(2, 4, 10, 0), var(--bg-0)); }


.logos::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(190, 212, 255, .07) 50%, transparent 58%); background-size: 260% 100%; background-position: 120% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .js .refs__plumb { transform: scaleY(0); transition: transform 2s var(--ease-lux); }
  .js .refs.has-in .refs__plumb { transform: none; }
  .js .logos:not(.in) img, .js .logos:not(.in) .wordmark { opacity: 0 !important; transform: translate3d(0, 12px, 0); }
  .js .logos img, .js .logos .wordmark { transition: opacity 1.3s var(--ease-lux) var(--d, 0s), transform 1.3s var(--ease-lux) var(--d, 0s); }
  .js .logos li:hover img, .js .logos li:hover .wordmark { transition-delay: 0s; transition-duration: .6s, .8s; }
  .js .logos.in::after { opacity: 1; animation: logo-light 16s var(--ease-io) .2s infinite; }
  
  .js .logos-mirror { transition: opacity 1.6s var(--ease-lux) 1.1s; }
  .js .logos:not(.in) + .logos-mirror { opacity: 0; transition: none; }
  @keyframes logo-light { 0% { background-position: 120% 0; } 18%, 100% { background-position: -20% 0; } }
}

@media (max-width: 1179px) {
  .logos, .logos-mirror__in { --cols: 4; }
  .logos { max-width: 940px; }
  .logos-mirror { max-width: 940px; }
}

@media (max-width: 759px) {
  .logos, .logos-mirror__in { --cols: 3; }
  .logos-mirror img { width: var(--wm); height: var(--hm); }
  .logos li, .logos-mirror li { min-height: 86px; padding: var(--s-2) 8px; }
  .wordmark { white-space: normal; }
  .wordmark br { display: inline; }
  .logos img { width: var(--wm); height: var(--hm); }
}

@media (max-width: 519px) {
  .logos, .logos-mirror__in { --cols: 2; }
}
@media (max-width: 700px) {
  .refs__plumb { height: var(--s-5); }
  .logos-mirror { height: 56px; }
}



.isler { --cw: min(62vw, 300px); --ch: calc(var(--cw) * 16 / 9); position: relative; }

.isler.is-deep { --v: 1vh; --travel: 130vh; --hdr-s: var(--hdr, 108px); --lab: 20px; --gap: clamp(20px, 4.6vh, 56px); --nm: 44px; }
@supports (height: 100svh) { .isler.is-deep { --v: 1svh; } }
.isler.is-deep {
  --ch: clamp(300px, calc(100 * var(--v) - var(--hdr-s) - 14 * var(--v) - var(--lab) - var(--gap) - var(--nm)), 760px); --cw: calc(var(--ch) * 9 / 16);
  --top: calc(var(--hdr-s) + (100 * var(--v) - var(--hdr-s) - var(--lab) - var(--gap) - var(--ch) - var(--nm)) / 2);
  --cy: calc(var(--top) + var(--lab) + var(--gap) + var(--ch) / 2);
}


.isler__pin { position: relative; }
.isler__stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(96px, 15vh, 150px) 0 var(--s-6); overflow: hidden; overflow: clip; }
.isler__h { position: relative; z-index: 5; margin-bottom: clamp(24px, 5vh, 56px); padding: 0 var(--gutter); }
.isler__room { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background:
    radial-gradient(ellipse 54% 62% at 50% -4%, rgba(110, 150, 230, .17), transparent 70%),
    radial-gradient(ellipse 46% 11% at 50% 86%, rgba(150, 185, 255, .09), transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(2, 4, 10, .6) 100%),
    linear-gradient(rgba(2, 4, 10, .34), rgba(2, 4, 10, .34)); }
.isler__spill { position: absolute; inset: -6% -10%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2.4s var(--ease);
  -webkit-mask-image: radial-gradient(ellipse 52% 56% at 50% 52%, #000 0, transparent 74%); mask-image: radial-gradient(ellipse 52% 56% at 50% 52%, #000 0, transparent 74%); }
.isler.has-in .isler__spill { opacity: 1; }
.isler__spill b { position: absolute; inset: 0; opacity: 0; background-size: cover; background-position: 50% 50%; transform: scale(1.12); filter: blur(34px) saturate(.8);
  transition: opacity 1.6s var(--ease); }
.isler__spill b::after { content: ""; position: absolute; inset: 0; background: var(--grade); mix-blend-mode: color; opacity: .78; }
.isler__spill b.on { opacity: .5; }

.reels { position: relative; z-index: 3; display: flex; align-items: flex-start; gap: 14px; width: 100%; margin: 0; padding: 20px calc(50% - var(--cw) / 2) 72px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reels::-webkit-scrollbar { display: none; }
.reel { position: relative; flex: 0 0 var(--cw); scroll-snap-align: center; }
.reel__a { position: relative; display: block; height: 100%; outline-offset: 8px; }
.reel__frame { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; overflow: hidden; background: var(--navy-2); border: 1px solid rgba(232, 236, 243, .13); border-radius: var(--radius); filter: blur(var(--bl, 0px)); }
.reel__frame::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--bg-0); opacity: var(--dk, 0); }
.reel__poster, .reel__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.reel__video { opacity: 0; transition: opacity .9s var(--ease-lux); }
.reel__video.is-playing { opacity: 1; }
.reel__grade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--grade); mix-blend-mode: color; opacity: var(--gr, .16); }
.reel__sheen { position: absolute; z-index: 5; top: -20%; bottom: -20%; left: 0; width: 46%; opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 0, rgba(200, 220, 255, .15) 50%, transparent 100%); transform: translate3d(-170%, 0, 0) skewX(-18deg); }
.reel__name { display: block; margin-top: 18px; padding: 0 4px; font: 400 var(--fs-label)/1.55 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-wrap: balance; opacity: var(--no, 1); }
.reel__a:hover .reel__name, .reel__a:focus-visible .reel__name { color: #fff; }
.reel__a:focus-visible { outline: 2px solid var(--blue); }
.reel__a:focus-visible .reel__frame { border-color: rgba(232, 236, 243, .5); }
.reel__a:active .reel__frame { transform: scale(.985); }
.reel__frame { transition: border-color var(--t-hover), transform .5s var(--ease-lux); }
.reel__a:hover .reel__frame { border-color: rgba(232, 236, 243, .34); }

.isler__pass { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 40%, rgba(170, 200, 255, .055) 50%, transparent 60%); background-size: 280% 100%; background-position: 130% 0; }


.isler.is-deep .isler__pin { height: calc(100vh + var(--travel)); height: calc(100svh + var(--travel)); }
.isler.is-deep .isler__stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; padding: 0; overflow: hidden; overflow: clip; perspective: 1700px; perspective-origin: 50% var(--cy); }
.is-deep .isler__h { position: absolute; left: 0; right: 0; top: var(--top); margin: 0 auto; }
.is-deep .reels { position: absolute; inset: 0; display: block; padding: 0; overflow: visible; scroll-snap-type: none; transform-style: preserve-3d; }
.is-deep.is-live .reel { will-change: transform, opacity; }
.is-deep .reel { position: absolute; left: 50%; top: var(--cy); width: var(--cw); height: var(--ch); margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2); opacity: 0; transform-origin: 50% 50%; }
.is-deep .reel__frame { height: 100%; aspect-ratio: auto; }
.is-deep .reel__name { position: absolute; left: -34%; right: -34%; top: 100%; }
.is-deep .reel::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: -18px; height: 30px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .6), transparent 72%); opacity: var(--no, 1); }

.is-deep .isler__room { opacity: calc(.9 * (1 - var(--ex, 0))); }
.isler.is-deep.has-in .isler__spill { opacity: calc(1 - var(--ex, 0)); }
.reel.is-centre .reel__frame { border-color: rgba(232, 236, 243, .3); }

@media (prefers-reduced-motion: no-preference) {
  .reel.is-centre .reel__sheen { animation: reel-sheen 1.7s var(--ease-lux) .3s 1 both; }
  .reel__a:hover .reel__sheen { animation: reel-sheen var(--t-sheen) var(--ease-lux) 1 both; }
  @keyframes reel-sheen {
    0% { opacity: 0; transform: translate3d(-120%, 0, 0) skewX(-18deg); }
    16% { opacity: 1; }
    84% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(330%, 0, 0) skewX(-18deg); }
  }
  
  .isler.is-live .reel__a { animation: reel-float 9s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
  @keyframes reel-float { from { transform: translate3d(0, -3px, 0); } to { transform: translate3d(0, 4px, 0); } }
  .isler.is-live .isler__pass { opacity: 1; animation: isler-pass 15s var(--ease-io) 1.2s infinite; }
  @keyframes isler-pass { 0% { background-position: 130% 0; } 30%, 100% { background-position: -30% 0; } }
}


.lb { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; opacity: 0; visibility: hidden; overscroll-behavior: contain;
  transition: opacity .6s var(--ease), visibility 0s linear .65s; }
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.lb__scrim { position: absolute; inset: 0; background: rgba(2, 4, 10, .97); }
.lb__box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: var(--s-3) var(--gutter); max-height: 100vh; max-height: 100svh; }
.lb__media { position: relative; height: min(78vh, 820px); height: min(78svh, 820px); aspect-ratio: 9 / 16; background: var(--bg-0); overflow: hidden; border: 1px solid rgba(232, 236, 243, .14); border-radius: var(--radius);
  transition: transform .95s var(--ease-lux), opacity .6s var(--ease); }
.lb__poster, .lb__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lb__video { opacity: 0; transition: opacity .8s var(--ease-lux); background: var(--bg-0); }
.lb__video.is-playing { opacity: 1; }
.lb__name { margin: 0; min-height: 1.6em; color: var(--ink-2); }
.lb__bar { display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.lb__b { position: relative; min-width: 44px; min-height: 44px; padding: 0 var(--s-1); font: 400 var(--fs-label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); transition: color var(--t-hover); }
.lb__b::after { content: ""; position: absolute; left: var(--s-1); right: var(--s-1); bottom: 9px; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .7s var(--ease-lux); }
.lb__b:hover, .lb__b:focus-visible { color: var(--ink); }
.lb__b:hover::after, .lb__b:focus-visible::after { transform: none; }
.lb__b:active { color: #fff; }
.lb__b:disabled { opacity: .25; pointer-events: none; }
.lb__play { position: absolute; left: 50%; top: 50%; z-index: 3; min-width: 120px; min-height: 52px; margin: -26px 0 0 -60px; padding: 0 var(--s-3); font: 400 var(--fs-label)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  background: rgba(2, 4, 10, .55); border: 1px solid var(--line-2); border-radius: var(--radius); transition: border-color var(--t-hover), background-color var(--t-hover); }
.lb__play:hover, .lb__play:focus-visible { border-color: rgba(232, 236, 243, .75); background: rgba(2, 4, 10, .75); }
.lb__play[hidden] { display: none; }
.lb__x { position: fixed; top: 10px; right: 10px; z-index: 5; width: 56px; height: 56px; }
.lb__x::before, .lb__x::after { content: ""; position: absolute; left: 17px; top: 27px; width: 22px; height: 1px; background: var(--ink-2); transition: background-color var(--t-hover), transform .5s var(--ease-lux); }
.lb__x::before { transform: rotate(45deg); }
.lb__x::after { transform: rotate(-45deg); }
.lb__x:hover::before, .lb__x:hover::after, .lb__x:focus-visible::before, .lb__x:focus-visible::after { background: var(--ink); }
.lb__x:hover::before { transform: rotate(135deg); }
.lb__x:hover::after { transform: rotate(45deg); }
.lb__b:focus-visible, .lb__x:focus-visible, .lb__play:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .lb:not(.is-open) .lb__media { transform: scale(.94); }
  .lb.is-swap .lb__media { opacity: .0; transition-duration: .25s; }
}

@media (max-width: 700px) {
  .isler__stage { padding-top: 104px; padding-bottom: var(--s-6); }
  .reels { gap: 0; padding-bottom: 24px; }
  .reel + .reel { margin-left: -18px; }
  .isler { --cw: min(60vw, 300px); }
  .lb__box { position: absolute; inset: 0; justify-content: flex-end; gap: 0; padding: 0; max-height: none; }
  .lb__media { position: absolute; inset: 0; height: auto; width: auto; aspect-ratio: auto; border: 0; border-radius: 0; }
  .lb__name, .lb__bar { position: relative; z-index: 4; width: 100%; }
  .lb__box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 3; pointer-events: none; background: linear-gradient(to top, rgba(2, 4, 10, .88), rgba(2, 4, 10, .5) 46%, rgba(2, 4, 10, 0)); }
  .lb__name { padding: var(--s-5) var(--gutter) 0; min-height: 0; }
  .lb__bar { gap: var(--s-4); padding: var(--s-1) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); }
  .lb__x { top: max(6px, env(safe-area-inset-top)); right: 6px; }
  .lb__x::before, .lb__x::after { background: var(--ink); }
}




.services { position: relative; }
.services .plate { --ph: 96vh; min-height: max(var(--ph), 560px); isolation: isolate; }
@supports (height: 100svh) { .services .plate { --ph: 96svh; } }
.services .plate__media { isolation: isolate; }


.plate__bg { position: absolute; inset: 0; pointer-events: none; background: var(--bgc, radial-gradient(ellipse 80% 70% at 50% 44%, rgba(14, 32, 74, .5), rgba(3, 6, 14, .8) 74%)); }
.plate--sosyal { --bgc: radial-gradient(ellipse 76% 70% at 30% 46%, rgba(18, 40, 90, .55), rgba(3, 6, 14, .78) 72%); --plate-o: .62; --pos: 30% 50%; }
.plate--produksiyon { --bgc: radial-gradient(ellipse 90% 60% at 50% 52%, rgba(10, 22, 52, .5), rgba(2, 4, 10, .88) 76%); --plate-o: .74; --pos: 38% 50%; }
.plate--reklam { --bgc: radial-gradient(ellipse 66% 56% at 50% 26%, rgba(40, 52, 82, .34), rgba(3, 6, 14, .84) 74%); --plate-o: .9; }
.plate--strateji { --bgc: radial-gradient(ellipse 60% 56% at 50% 50%, rgba(16, 34, 72, .4), rgba(3, 6, 14, .86) 70%); --plate-o: .9; }
.plate--kampanya { --bgc: radial-gradient(ellipse 70% 64% at 50% 52%, rgba(14, 34, 80, .5), rgba(2, 4, 10, .86) 74%); --plate-o: .72; --pos: 50% 54%; }
.plate--web { --bgc: linear-gradient(180deg, rgba(3, 6, 14, .94), rgba(7, 14, 32, .82) 50%, rgba(3, 6, 14, .94)); --plate-o: .95; }
.plate--icerik { --bgc: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(10, 24, 56, .5), rgba(2, 4, 10, .86) 76%); --plate-o: .9; }


.services .plate__media img { object-position: var(--pos, 50% 50%); }
.services .plate__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .87 0 0 0 0 1 0 0 0 .85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.plate--kampanya .plate__media img { object-position: 50% 85%; transform: scale(1.9); transform-origin: 50% 90%; }
.plate--kampanya .plate__grade, .plate--strateji .plate__grade { display: none; }

.approach .plate__media img, .contact .plate__media img { filter: none; }
@media (max-width: 700px) { .approach .plate__media::after, .contact .plate__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: #000; opacity: .087; } }

.services .plate--kampanya .plate__media img, .services .plate--strateji .plate__media img, .services .plate--sosyal .plate__media img, .services .plate--produksiyon .plate__media img, .services .plate--produksiyon .plate__drone img { filter: none; }
.plate--sosyal .plate__grade, .plate--produksiyon .plate__grade { display: none; }   



.pz { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 16; width: 100%; background: #070c1a; border: 1px solid rgba(150, 182, 255, .11); border-radius: 2px; }
.pz img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--po, .5);
  filter: grayscale(.2) sepia(1) hue-rotate(184deg) saturate(1.5) brightness(.62) contrast(1.14);
}
.pz--live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s var(--ease); filter: grayscale(.2) sepia(1) hue-rotate(184deg) saturate(1.5) brightness(.7) contrast(1.12); }
.pz--live video.is-playing { opacity: .95; }

.plate__sig { position: absolute; inset: 0; pointer-events: none; }
.plate__rule { display: block; width: clamp(64px, 9vw, 132px); height: 1px; margin-top: clamp(22px, 3.4vh, 34px); background: var(--line-2); transform-origin: 50% 50%; transition: width .9s var(--ease-lux), background-color var(--t-hover); }
.plate__body:hover .plate__rule { width: clamp(96px, 14vw, 200px); background: rgba(232, 236, 243, .55); }
.services .plate__body { justify-content: center; padding: calc(var(--sec) * .9) var(--gutter); }
.services .plate__body .scope { margin-top: clamp(20px, 3vh, 30px); color: #d3dae8; }
.plate__k { margin-bottom: clamp(36px, 7vh, 72px); }
.plate__t { transition: color var(--t-hover); }
.plate__t:hover { color: #fff; }
.scope [data-hot] { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; padding: 0 6px; }
.scope [data-hot]::after { bottom: 8px; left: 6px; right: 6px; }
.plate.is-drone .scope [data-hot] { color: var(--ink); }
.scope li > span:focus-visible { outline-offset: 6px; }


.reelcol {
  position: absolute; top: -6%; bottom: -6%; width: clamp(96px, 11vw, 168px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
}
.reelcol--l { left: clamp(10px, 5.6vw, 110px); }
.reelcol--r { right: clamp(10px, 5.6vw, 110px); }
.reelcol--r .reelcol__t { margin-top: -22vh; }
.reelcol__t > li { margin-bottom: clamp(10px, 1.3vw, 18px); }
.plate--sosyal .plate__sig { opacity: .92; }
.plate--sosyal .plate__scrim { background: radial-gradient(ellipse 54% 44% at 50% 52%, rgba(2, 4, 10, .6), transparent 76%); }

.plate--sosyal[data-hv] .reelcol__t { animation-play-state: paused; }
.plate--sosyal[data-hv] .pz img { --po: .72; }


.plate--produksiyon { --lb: max(0px, calc((100% - 41.8vw) / 2)); --dg: clamp(130px, 22vw, 330px); }
.plate--produksiyon .plate__vig { background: radial-gradient(ellipse 92% 80% at 50% 50%, transparent 42%, rgba(2, 4, 10, .7) 100%), linear-gradient(to bottom, var(--bg-0) 0, rgba(2, 4, 10, .4) 8%, transparent 16%, transparent 84%, rgba(2, 4, 10, .4) 92%, var(--bg-0) 100%); }
.plate--produksiyon .plate__media { clip-path: inset(var(--lb) 0); }
.plate--produksiyon .plate__media img { object-position: 38% 50%; }
.bar { position: absolute; left: 0; right: 0; height: var(--lb); overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }
.bar--t { top: 0; }
.bar--b { bottom: 0; }
.bar__t { display: flex; align-items: center; height: 100%; width: max-content; margin: 0 auto; }
.bar__t > li { flex: none; height: 66%; width: auto; margin-right: clamp(10px, 1.2vw, 18px); --po: .86; }
.bar--t .bar__t > li { align-self: flex-end; margin-bottom: 4%; }
.bar--b .bar__t > li { align-self: flex-start; margin-top: 4%; }
.plate__drone { position: absolute; inset: 0; pointer-events: none; clip-path: circle(0px at var(--hx, 50%) var(--hy, 66%)); transition: clip-path 1.9s var(--ease-lux); }
.plate__drone picture { display: contents; }
.services .plate__drone > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: scale(1.06); }
.dreel { position: absolute; top: calc(var(--lb) + 46px); height: calc(100% - 2 * var(--lb) - 92px); aspect-ratio: 9 / 16; overflow: hidden; background: #050914; border: 1px solid rgba(150, 182, 255, .16); border-radius: 2px; }
.dreel--l { right: calc(50% + var(--dg, 300px)); }
.dreel--r { left: calc(50% + var(--dg, 300px)); }
.dreel img, .dreel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) sepia(1) hue-rotate(184deg) saturate(1.45) brightness(.56) contrast(1.12); }
.dreel video { opacity: 0; transition: opacity 1.6s var(--ease); }
.dreel video.is-playing { opacity: 1; }
.plate.is-drone .plate__drone { clip-path: circle(150vmax at var(--hx, 50%) var(--hy, 66%)); }


.plate--reklam .plate__media { background: transparent; }
.fog { position: absolute; inset: -20%; background-repeat: repeat; opacity: .36;
  -webkit-mask-image: radial-gradient(ellipse 58% 66% at 50% 38%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse 58% 66% at 50% 38%, #000 18%, transparent 78%); }
.fog--a { background-size: 900px 900px; }
.fog--b { background-size: 1400px 1400px; opacity: .24; transform: scaleX(-1); }
.plate.is-live .fog, .plate.has-in .fog { background-image: url(../img/atmosphere/fog-blue.png); }
.plate--reklam .plate__media::after { opacity: .06; }
.cone { overflow: visible; }
.cone__sway, .cone__aim { position: absolute; left: 50%; top: -4%; width: min(1500px, 150vw); height: 100%; margin-left: calc(min(1500px, 150vw) / -2); transform-origin: 50% 0; }
.cone__aim { top: 0; margin-left: 0; left: 0; transform: skewX(var(--aim, 0deg)); transition: transform 1.6s var(--ease-lux); }
.cone__fs { position: absolute; inset: 0; filter: blur(7px); }
.cone__fs--core { filter: blur(3px); }
.plate--reklam .plate__sig .cone__aim { opacity: .62; filter: saturate(.4); }
.cone__f { position: absolute; left: 0; right: 0; top: 0; height: 100%; }
.cone__f--1 { clip-path: polygon(16% 0, 84% 0, 50.9% 74%, 49.1% 74%); background: linear-gradient(180deg, rgba(120, 160, 250, .06), rgba(120, 160, 250, .15) 45%, rgba(130, 170, 255, .16) 62%, rgba(150, 188, 255, .34) 74%); }
.cone__f--2 { clip-path: polygon(25% 0, 75% 0, 50.6% 74%, 49.4% 74%); background: linear-gradient(180deg, rgba(130, 170, 255, .07), rgba(140, 180, 255, .19) 45%, rgba(145, 185, 255, .2) 62%, rgba(170, 205, 255, .44) 74%); }
.cone__f--3 { clip-path: polygon(35% 0, 65% 0, 50.4% 74%, 49.6% 74%); background: linear-gradient(180deg, rgba(160, 198, 255, .03), rgba(165, 202, 255, .17) 50%, rgba(170, 206, 255, .18) 62%, rgba(205, 226, 255, .6) 74%); }
.cone__tip { position: absolute; left: 50%; top: 75%; width: min(520px, 70vw); height: 8px; margin: -4px 0 0 calc(min(520px, 70vw) / -2); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(196, 220, 255, .34), transparent 74%); }
.mote { position: absolute; left: 50%; top: 0; width: 3px; height: 3px; border-radius: 50%; background: rgba(196, 218, 255, .8); opacity: 0; }
.plate--reklam .plate__scrim { background: radial-gradient(ellipse 50% 32% at 50% 53%, rgba(2, 4, 10, .7), transparent 78%); }

.plate--reklam[data-hv="1"] { --aim: -17deg; }
.plate--reklam[data-hv="3"] { --aim: 17deg; }
.plate--reklam[data-hv] .cone__tip { opacity: 1; }


.plate--strateji .plate__media { background: transparent; }
.plate--strateji { --pos: 50% 0%; --Rx: clamp(340px, 66vw, 1080px); --Ry: clamp(280px, 70vh, 700px); --ph-y: 58%; }

.plate--strateji.plate--photo { align-items: start; }

.plate--strateji.plate--photo { --pt: calc(var(--hdr, 108px) + 5vh); --sh: calc(var(--pt) - max(84px, 11vh)); }
.services .plate--strateji.plate--photo .plate__body { padding-top: var(--pt); padding-bottom: 0; }
.plate--strateji.plate--photo .iris__img { transform: translate3d(0, var(--sh), 0); }
.iris-open { position: absolute; inset: 0; transition: transform 1.8s var(--ease-lux); }
.plate--strateji[data-hv] .iris-open { transform: scale(1.07); }
.iris__win {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse var(--Rx) var(--Ry) at 50% var(--ph-y), #000 34%, rgba(0, 0, 0, .62) 56%, rgba(0, 0, 0, .2) 80%, transparent 100%);
          mask-image: radial-gradient(ellipse var(--Rx) var(--Ry) at 50% var(--ph-y), #000 34%, rgba(0, 0, 0, .62) 56%, rgba(0, 0, 0, .2) 80%, transparent 100%);
}
.iris__img { position: absolute; inset: 0; }
.iris__img picture { display: contents; }
.services .plate--strateji .iris__img img { transform-origin: 50% 62%; }
.plate--strateji .plate__scrim { background: radial-gradient(ellipse 50% 34% at 50% 52%, rgba(2, 4, 10, .5), transparent 78%); }
.plate--strateji.plate--photo .plate__scrim { background: radial-gradient(ellipse 46% 26% at 50% 24%, rgba(2, 4, 10, .62), transparent 78%); }

.pool { position: absolute; inset: 0; }
.pool__floor { position: absolute; left: 50%; top: 64%; width: min(1180px, 124vw); height: min(420px, 50vh); margin: calc(min(420px, 50vh) / -2) 0 0 calc(min(1180px, 124vw) / -2); border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(176, 204, 255, .2), rgba(120, 160, 240, .08) 48%, transparent 72%); }
.pool__beam { position: absolute; left: 50%; top: -6%; width: min(1000px, 120vw); height: 74%; margin-left: calc(min(1000px, 120vw) / -2); filter: blur(26px); }
.pool__beam i { position: absolute; inset: 0; clip-path: polygon(41% 0, 59% 0, 84% 100%, 16% 100%); background: linear-gradient(180deg, rgba(150, 185, 255, 0), rgba(150, 185, 255, .07) 40%, rgba(160, 195, 255, .14)); }


.drape__p {
  position: absolute; top: -2%; bottom: -2%; width: 53%;
  background:
    linear-gradient(to bottom, rgba(2, 4, 10, .78) 0, transparent 28%, transparent 66%, rgba(2, 4, 10, .5) 100%),
    repeating-linear-gradient(90deg, #040812 0, #0c1936 2.4%, #16295a 4.6%, #0c1936 6.8%, #040812 9.2%);
  transform: scaleX(calc(1 - var(--en, 1) * .8));
}
.drape__p::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.drape__p--l { left: 0; transform-origin: 0 50%; }
.drape__p--r { right: 0; transform-origin: 100% 50%; }
.drape__p--l::after { background: linear-gradient(to right, transparent 82%, rgba(0, 0, 0, .55)); }
.drape__p--r::after { background: linear-gradient(to left, transparent 82%, rgba(0, 0, 0, .55)); }
.drape__top { position: absolute; left: 0; right: 0; top: 0; height: 12%; background: linear-gradient(to bottom, var(--bg-0), rgba(3, 6, 14, .9) 62%, transparent); }
.plate--kampanya .plate__scrim { background: radial-gradient(ellipse 56% 40% at 50% 54%, rgba(2, 4, 10, .55), transparent 76%); }


.plate--web .plate__media { background: transparent; }
.wgrid { --cw: calc((100vw - 2 * max(48px, 5vw)) / 12); position: absolute; inset: 0 max(48px, 5vw); }
.wg { position: absolute; display: block; opacity: var(--wo, .7); }
.wg--v { top: 0; bottom: 0; width: 1px; left: calc(var(--i) * 100% / 12);
  background: linear-gradient(to bottom, transparent 0, rgba(150, 184, 255, .3) 24%, rgba(150, 184, 255, .4) 50%, rgba(150, 184, 255, .3) 76%, transparent 100%); transform-origin: 50% 50%; }
.wg--h { left: 0; right: 0; height: 1px; top: calc(50% + (var(--i) - 2.5) * var(--cw));
  background: linear-gradient(to right, transparent 0, rgba(150, 184, 255, .22) 16%, rgba(150, 184, 255, .3) 50%, rgba(150, 184, 255, .22) 84%, transparent 100%); transform-origin: 50% 50%; }
.wlight { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 54% 50% at 28% 2%, rgba(176, 206, 255, .26), transparent 72%),
    radial-gradient(ellipse 70% 30% at 50% 108%, rgba(120, 160, 240, .12), transparent 76%); }
.plate--web .plate__scrim { background: radial-gradient(ellipse 52% 34% at 50% 52%, rgba(2, 4, 10, .8), rgba(2, 4, 10, .46) 46%, transparent 78%); }
.plate--web .plate__media::after { opacity: .06; }
.plate--web .plate__vig { background: radial-gradient(ellipse 94% 84% at 50% 50%, transparent 40%, rgba(2, 4, 10, .72) 100%), linear-gradient(to bottom, var(--bg-0) 0, rgba(2, 4, 10, .5) 9%, transparent 24%, transparent 62%, rgba(2, 4, 10, .72) 88%, var(--bg-0) 100%); }


.wshot { position: relative; z-index: 2; width: min(62vw, calc((100vh - 460px) * 1.6), 1040px); min-width: min(100%, 320px); aspect-ratio: 16 / 10; margin-top: clamp(26px, 4.2vh, 44px); overflow: hidden;
  background: #060b18; border: 1px solid rgba(150, 182, 255, .17); border-radius: 2px; }
.wshot__f { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.wshot__s { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 1.6s var(--ease); }
.wshot__s:first-child { opacity: 1; }
.js .wshot__s:first-child { opacity: 0; }
.js .wshot__s.is-on { opacity: 1; }
.wshot__s img { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; filter: saturate(.88) brightness(.94) contrast(1.02); }
.wshot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(2, 4, 10, .34) 0, transparent 9%, transparent 91%, rgba(2, 4, 10, .34) 100%); }


.strips { position: absolute; inset: -26% -16%; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.4vw, 34px); transform: rotate(-7deg); }
.srow { display: flex; width: max-content; margin: 0 auto; }
.srow > li { flex: none; width: auto; aspect-ratio: 9 / 16; margin-right: clamp(12px, 1.4vw, 20px); height: var(--rh, 30vh); }
.srow--a { --rh: 25vh; }
.srow--b { --rh: 36vh; --po: .58; }
.srow--c { --rh: 25vh; }
.srow--a, .srow--c { filter: blur(1.4px); }
.plate--icerik .plate__scrim { background: radial-gradient(ellipse 58% 30% at 50% 50%, rgba(2, 4, 10, .84), transparent 80%); }
.plate--icerik .plate__media::after { opacity: .05; }


.rail { display: none; }
.js .rail {
  display: block; position: fixed; left: 50%; bottom: clamp(16px, 3vh, 32px); z-index: 42; width: min(720px, 92vw); margin-left: calc(min(720px, 92vw) / -2);
  height: 44px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1s var(--ease);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}
.js .rail { background: linear-gradient(to bottom, rgba(2, 4, 10, 0), rgba(2, 4, 10, .72) 30%, rgba(2, 4, 10, .72) 70%, rgba(2, 4, 10, 0)); visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.js .rail.is-on { opacity: var(--ro, 1); visibility: visible; transition: opacity .22s linear, visibility 0s; }
.rail ul { display: flex; align-items: center; width: max-content; height: 44px; margin-left: 50%; transform: translate3d(var(--rx, 0px), 0, 0); }
.rail li { flex: none; opacity: var(--o, .3); }
.rail a {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 clamp(18px, 2.6vw, 34px); pointer-events: none;
  font: 400 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap; color: var(--ink); transition: color var(--t-hover);
}
.rail.is-on a { pointer-events: auto; }
.rail a::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 0; height: 1px; margin-left: 0; background: var(--ink); transition: width .9s var(--ease-lux), margin-left .9s var(--ease-lux); }
.rail li.is-cur a::after, .rail a:hover::after, .rail a:focus-visible::after { width: 48px; margin-left: -24px; }
.rail a:hover, .rail a:focus-visible { color: #fff; }
.rail li:hover, .rail li:focus-within { opacity: 1; }


@media (prefers-reduced-motion: no-preference) {
  
  .js .plate--produksiyon .plate__media { clip-path: inset(50% 0); transform: none; transition: clip-path 2.3s var(--ease-io); }
  .js .plate--produksiyon.has-in .plate__media { clip-path: inset(var(--lb) 0); }
  .js .plate--reklam .plate__media, .js .plate--strateji .plate__media, .js .plate--web .plate__media, .js .plate--icerik .plate__media { clip-path: none; transform: none; transition: none; }
  .js .plate--sosyal .plate__media { clip-path: inset(0 18% 0 18%); transition: clip-path 2.2s var(--ease-lux), transform 2.4s var(--ease-lux); }
  .js .plate--sosyal.has-in .plate__media { clip-path: inset(0); }
  .js .plate--kampanya .plate__media { clip-path: inset(18% 0 18% 0); }
  .js .plate--kampanya.has-in .plate__media { clip-path: inset(0); }
  .js .plate--kampanya.is-open .plate__media, .js .plate--sosyal.is-open .plate__media { clip-path: none; transition: none; }   

  
  .services .plate__media img { transform: translate3d(calc(var(--px, 0) * -.9% + var(--dx, 0%)), calc((var(--sp, .5) - .5) * -3% + var(--py, 0) * -.7%), 0) scale(calc(1.06 + var(--sp, .5) * .08)); }
  .plate--produksiyon { --dx: 0%; }
  .services .plate--produksiyon .plate__media img { transform: translate3d(calc((var(--sp, .5) - .5) * -3% + var(--px, 0) * -.9%), calc(var(--py, 0) * -.6%), 0) scale(1.14); }
  .services .plate--kampanya .plate__media img { transform: scale(1.9); transform-origin: 50% 90%; }
  .services .plate--kampanya.is-vis .plate__media img { will-change: auto; }   
  .plate__sig { transform: translate3d(calc(var(--px, 0) * -1.2%), calc(var(--py, 0) * -.9%), 0); }
  .plate--kampanya .plate__sig, .plate--produksiyon .plate__sig { transform: none; }

  
  .js .plate__rule[data-r] { opacity: 1; transform: scaleX(0); transition: transform 1.7s var(--ease-lux) calc(var(--i, 0) * var(--stagger) + 300ms), width .9s var(--ease-lux), background-color var(--t-hover); }
  .js .plate__rule[data-r].in { transform: none; }

  
  .services .plate:not(.is-vis) *, .services .plate:not(.is-vis) *::before, .services .plate:not(.is-vis) *::after { animation-play-state: paused !important; }
  .plate.is-live .is-loop { will-change: transform; }
  
  .scope li:not(:hover) > [data-hot]::after { transform: scaleX(.3); animation: hot-hint 4.4s ease-in-out infinite alternate; }
  .plate.is-drone .scope li > [data-hot]::after { animation: none; transform: none; }
  @keyframes hot-hint { from { transform: scaleX(.22); opacity: .5; } to { transform: scaleX(.5); opacity: 1; } }
  .reelcol__t.is-loop { animation: col-up 96s linear infinite; }
  .reelcol--r .reelcol__t.is-loop { animation: col-down 118s linear infinite; margin-top: 0; }
  @keyframes col-up { to { transform: translate3d(0, -50%, 0); } }
  @keyframes col-down { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
  .bar__t.is-loop { animation: row-left 130s linear infinite; margin: 0; }
  .bar--b .bar__t.is-loop { animation-name: row-right; animation-duration: 150s; }
  .srow.is-loop { margin: 0; animation: row-left 150s linear infinite; }
  .srow--b.is-loop { animation-name: row-right; animation-duration: 120s; }
  @keyframes row-left { to { transform: translate3d(-50%, 0, 0); } }
  @keyframes row-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
  
    
  .reelcol .pz:nth-child(2n) img, .bar .pz:nth-child(3n) img, .srow .pz:nth-child(3n + 1) img { animation: pz-lit 15s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 1.1s); }
  @keyframes pz-lit { 0%, 22%, 100% { opacity: var(--po, .5); } 8%, 14% { opacity: .96; } }
  .srow--b .pz:nth-child(3n + 1) img { animation-duration: 17s; }
  
  .fog--a { animation: fog-a 150s linear infinite; }
  .fog--b { animation: fog-b 210s linear infinite; }
  @keyframes fog-a { to { background-position: -900px 450px; } }
  @keyframes fog-b { to { background-position: 1400px -700px; } }
  .cone__sway { animation: cone-sway 11s ease-in-out infinite alternate; }
  @keyframes cone-sway { from { transform: skewX(-2.2deg); } to { transform: skewX(2.2deg); } }
  .mote { animation: mote var(--t, 14s) linear var(--d, 0s) infinite; }
  @keyframes mote {
    0% { transform: translate3d(var(--x0), -2vh, 0) scale(1.2); opacity: 0; }
    12% { opacity: .75; }
    88% { opacity: .6; }
    100% { transform: translate3d(0, 62vh, 0) scale(.45); transform: translate3d(0, 62svh, 0) scale(.45); opacity: 0; }
  }
  .plate--reklam.has-in .cone__aim, .plate--reklam .cone__aim { opacity: 1; }
  
  .js .plate--strateji .iris__win { clip-path: ellipse(12% 9% at 50% var(--ph-y)); opacity: 0; transition: clip-path 2.8s var(--ease-lux), opacity 2.4s var(--ease-lux) .15s; }
  .js .plate--strateji.has-in .iris__win { clip-path: ellipse(120% 120% at 50% var(--ph-y)); opacity: 1; }
  .js .plate--strateji.is-open .iris__win { clip-path: none; transition: none; }   
  .js .plate--strateji .pool { opacity: 0; transition: opacity 2.6s var(--ease-lux); }
  .js .plate--strateji.has-in .pool { opacity: 1; }
  .plate--strateji.is-vis .iris-open, .plate--strateji.is-vis .pool { animation: iris-breathe 12s ease-in-out infinite alternate; }
  @keyframes iris-breathe { from { transform: scale(.985); } to { transform: scale(1.02); } }
  
  
  .plate--kampanya.is-vis .drape__p { will-change: transform; }
  .plate--kampanya.is-vis .drape__top { animation: drape-breathe 9s ease-in-out infinite alternate; }
  @keyframes drape-breathe { from { opacity: .94; } to { opacity: 1; } }
  
  .js .wg--v { transform: scaleY(0); transition: transform 2.4s var(--ease-lux); transition-delay: calc(var(--s) * 110ms + 200ms); }
  .js .wg--h { transform: scaleX(0); transition: transform 2.6s var(--ease-lux); transition-delay: calc(var(--i) * 120ms + 500ms); }
  .js .plate--web.has-in .wg { transform: none; }
  .plate--web.is-live .wg--v { animation: wg-lit 15s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
  @keyframes wg-lit { 0%, 26%, 100% { opacity: .7; } 10%, 15% { opacity: 1; } }
  .plate--web.is-live .wlight { animation: wlight-drift 26s ease-in-out infinite alternate; }
  @keyframes wlight-drift { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(5%, 0, 0); } }
  .js .wlight { opacity: 0; transition: opacity 3s var(--ease-lux) .4s; }
  .js .plate--web.has-in .wlight { opacity: 1; }
  .js .wshot { clip-path: inset(0 50% 0 50%); transition: clip-path 2.2s var(--ease-lux) .9s; }
  .js .plate--web.has-in .wshot { clip-path: inset(0); }
  .wshot__s.is-on img { animation: wshot-scroll var(--d, 16s) linear forwards; will-change: transform; }
  .plate--web:not(.is-live) .wshot__s.is-on img { animation-play-state: paused; }
  .wshot__s.is-out img { transform: translate3d(0, calc(var(--k, 0%) * -1), 0); }
  @keyframes wshot-scroll { 0%, 5% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 95%, 100% { transform: translate3d(0, calc(var(--k, 0%) * -1), 0); } }
  .js .strips { opacity: 0; transition: opacity 2s var(--ease-lux); }
  .js .plate--icerik.has-in .strips { opacity: 1; }
  .js .reelcol, .js .bar { opacity: 0; transition: opacity 2s var(--ease-lux) .3s; }
  .js .plate--sosyal.has-in .reelcol, .js .plate--produksiyon.has-in .bar { opacity: 1; }
}


@media (max-width: 700px) {
  .services .plate { --ph: 92vh; }
  @supports (height: 100svh) { .services .plate { --ph: 92svh; } }
  .reelcol { width: clamp(44px, 13vw, 90px); }
  .reelcol--l { left: 6px; }
  .reelcol--r { right: 6px; }
  .plate--sosyal .scope { letter-spacing: .14em; }
  .plate--sosyal .plate__sig { opacity: .62; }
  .plate--produksiyon { --lb: max(0px, calc((100% - 62vh) / 2)); --dg: 36px; }
  @supports (height: 100svh) { .plate--produksiyon { --lb: max(0px, calc((100% - 62svh) / 2)); } }
  .dreel { height: calc(100% - 2 * var(--lb) - 150px); top: calc(var(--lb) + 75px); opacity: .62; }
  .plate--produksiyon .plate__scrim { background: radial-gradient(ellipse 96% 44% at 50% 53%, rgba(2, 4, 10, .84), transparent 82%); }
  .bar__t > li { height: 72%; }
  .cone__fs { filter: blur(9px); }
  .drape__p { width: 54%; }
  .plate--strateji { --Rx: 130vw; --Ry: 62vh; }
  .plate--strateji.plate--photo { --sh: calc(var(--pt) - 96px); }
  .wg--v:nth-child(2n) { display: none; }
  .wgrid { inset: 0 16px; --cw: calc((100vw - 32px) / 6); }
  .services .plate--kampanya .plate__media img { transform: scale(1.7); }
  
  .reelcol .pz img, .bar .pz img, .srow .pz img { animation: none; }
  .motes, .mote:nth-child(n+9) { display: none; }
  .srow--a, .srow--c { --rh: 21vh; }
  .srow--b { --rh: 29vh; }
  .js .rail { display: none; }   
}
@media (max-width: 520px) {
  .plate--sosyal .plate__sig { opacity: .5; }
}


.plate--sosyal { --la: 100deg; --lo: .08; --ld: 17s; }
.plate--produksiyon { --la: 90deg; --lo: .06; --ld: 21s; }
.plate--reklam { --la: 82deg; --lo: .07; --ld: 15s; }
.plate--strateji { --la: 122deg; --lo: .07; --ld: 19s; }
.plate--kampanya { --la: 100deg; --lo: .1; --ld: 23s; }
.plate--web { --la: 116deg; --lo: .06; --ld: 13s; }
.plate--icerik { --la: 72deg; --lo: .07; --ld: 16s; }
@supports (height: 100svh) { .wshot { width: min(62vw, calc((100svh - 460px) * 1.6), 1040px); } }
@media (max-width: 700px) { .wshot { width: 100%; min-width: 0; margin-top: 30px; } }



.approach { --pos: 56% 50%; }

.approach .plate__body { padding-block: calc(var(--hdr) + 7vh) 7vh; }
.approach h2 { max-width: 20ch; margin: 0 auto; font-size: clamp(40px, min(6vw, 12vh), 96px); letter-spacing: -.026em; }
.approach__rule { display: block; width: min(220px, 40vw); height: 1px; margin: clamp(26px, 4.6vh, 46px) auto 0; background: var(--line-2); transform-origin: 50% 50%; }
.approach__text { position: relative; max-width: 46ch; margin: clamp(22px, 3.6vh, 36px) auto 0; color: #dce2ee; font-size: 18px; line-height: 1.65; }
.approach__text::before { content: ""; position: absolute; z-index: -1; inset: -44px -96px; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(4, 6, 10, .55), transparent 72%); }
.approach__text p { transition: color var(--t-hover); }
.approach__text p:hover { color: var(--ink); }
.approach__text p + p { margin-top: var(--s-2); color: inherit; }
.approach__text p + p:hover { color: var(--ink); }
.approach .actions { margin-top: clamp(34px, 5.4vh, 56px); }
.approach__flare {
  position: absolute; z-index: 2; left: -10%; right: -10%; top: 50%; height: 22%; margin-top: -11%; pointer-events: none; opacity: .0;
  background: radial-gradient(ellipse 36% 5% at 50% 50%, rgba(150, 190, 255, .16), transparent 80%);
}
@media (prefers-reduced-motion: no-preference) {
  .js .approach .plate__media, .js .approach.has-in .plate__media {
    clip-path: circle(calc(max(0, min(var(--en, 0), 1 - var(--ex, 0))) * 76%) at 50% 50%);
    transform: none; transition: none;
  }
  .js .approach__rule { transform: scaleX(0); transition: transform 1.8s var(--ease-lux) .5s; }
  .js .approach__rule.in { transform: none; }
  .js .approach.has-in .approach__flare { opacity: calc(var(--c, 0) * 1); animation: flare-breathe 11s ease-in-out infinite alternate; }
  @keyframes flare-breathe { from { transform: scaleX(.78) translate3d(-3%, 0, 0); } to { transform: scaleX(1.06) translate3d(3%, 0, 0); } }
  .js .approach:not(.is-live) .approach__flare { animation-play-state: paused; }
}
@media (max-width: 700px) {
  .approach { --pos: 60% 50%; }
  .approach h2 { font-size: clamp(36px, 11vw, 64px); }
  .approach__text { font-size: 17px; }
  .approach__text::before { inset: -36px -24px; }
}




.berke { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 6vh) var(--gutter) 10vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (max-height: 700px) and (max-width: 700px) { .berke { padding-block: calc(var(--hdr) + 1.5vh) 10vh; } }   
.berke::before, .berke::after { content: ""; position: absolute; left: 0; right: 0; height: 20vh; z-index: 1; pointer-events: none; }
.berke::before { top: 0; background: linear-gradient(to bottom, var(--bg-0), rgba(2, 4, 10, 0)); }
.berke::after { bottom: 0; background: linear-gradient(to top, var(--bg-0), rgba(2, 4, 10, 0)); }
.berke__beam {
  position: absolute; left: 50%; top: -4%; width: min(1000px, 130vw); height: 100%; margin-left: calc(min(1000px, 130vw) / -2); pointer-events: none;
  background: radial-gradient(ellipse 26% 70% at 50% 0%, rgba(120, 160, 235, .17), transparent 74%);
}
.berke__floor {
  position: absolute; left: 50%; bottom: 3%; width: min(900px, 120vw); height: 34%; margin-left: calc(min(900px, 120vw) / -2); pointer-events: none;
  background: radial-gradient(ellipse 40% 36% at 50% 100%, rgba(110, 150, 225, .1), transparent 72%);
}
.founder__photo {
  --ph: clamp(180px, 42vh, 487px);
  position: relative; z-index: 2; width: min(clamp(240px, 27vw, 390px), calc(var(--ph) * .8)); aspect-ratio: 4 / 5; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 50%, transparent 98%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 46%, #000 50%, transparent 98%);
}
.founder__photo picture { display: contents; }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.14) brightness(.92) blur(0px); }
.founder__photo::after { content: "";position:absolute;inset:0;background:var(--grade);mix-blend-mode:color;opacity:.5;pointer-events:none}.founder__pass{position:absolute;inset:-20% -60%;pointer-events:none;opacity:0;z-index:2;background:linear-gradient(100deg,transparent 42%,rgba(170,200,255,.22) 50%,transparent 58%);transform:translate3d(-60%,0,0)}.founder__note{margin-top:var(--s-1);font-size:var(--fs-label);letter-spacing:.04em;color:var(--mute)}.berke__q{position:relative;z-index:2;margin:clamp(-48px,-4vh,-16px) 0 0;width:100%}.quote p{max-width:none;font:300 clamp(26px,min(3.9vw,5.6vh),60px)/1.2 var(--serif);letter-spacing:-.016em;color:var(--ink);text-wrap:balance;transition:color .6s var(--ease)}.quote{transition:opacity .6s var(--ease)}.quote .hq{margin-left:-.06em}.quote .hc{margin-right:-.06em}.berke__rule{display:block;width:min(120px,30vw);height:1px;margin:clamp(18px,3.4vh,44px) auto 0;background:var(--line-2);transform-origin:50% 50%}.who{margin-top:clamp(14px,2.6vh,32px)}.who__name{font:300 clamp(22px,min(2.3vw,3.8vh),34px)/1.15 var(--serif);letter-spacing:.01em;color:var(--ink-2)}.who__role{margin-top:var(--s-1)}@media (prefers-reduced-motion:no-preference){.js .founder__photo img{opacity:0;transform:scale(1.05);filter:grayscale(1) contrast(1.14) brightness(.45) blur(12px);transition:opacity 2.4s var(--ease-lux),transform 2.8s var(--ease-lux),filter 2.8s var(--ease-lux)}.js .berke.has-in .founder__photo img{opacity:1;transform:none;filter:grayscale(1) contrast(1.14) brightness(.92) blur(0px);transition-delay:.25s}.js .berke.has-in .founder__photo:hover img{filter:grayscale(1) contrast(1.12) brightness(1.06) blur(0px);transition:filter 1.4s var(--ease-lux);transition-delay:0s}.js .berke.has-in .founder__photo img{translate:0 calc((var(--sp,.5) - .5) * -14px)}.js .berke.has-in .founder__pass{animation:exposure-pass 2.8s var(--ease-io) 1.9s 1 both,founder-pass 15s var(--ease-io) 8s infinite}@keyframes exposure-pass{0%{opacity:1;transform:translate3d(-60%,0,0)}100%{opacity:1;transform:translate3d(60%,0,0)}}@keyframes founder-pass{0%{opacity:1;transform:translate3d(-60%,0,0)}30%,100%{opacity:1;transform:translate3d(60%,0,0)}}.js .berke__beam,.js .berke__floor{opacity:.0;transition:opacity 3s var(--ease) .1s}.js .berke.has-in .berke__beam{opacity:1;animation:beam-breathe 9s ease-in-out 3s infinite alternate}.js .berke.has-in .berke__floor{opacity:1;transition-delay:1.6s}.js .berke:not(.is-live) .berke__beam,.js .berke:not(.is-live) .founder__pass{animation-play-state:paused}.js .berke__rule{transform:scaleX(0);transition:transform 1.8s var(--ease-lux) 1.1s}.js .berke__rule.in{transform:none}.quote:hover p{color:#fff}.berke.is-leaving .founder__photo,.berke.is-leaving .berke__q{opacity:calc(1 - var(--ex,0) * 1.25)}.berke.is-leaving .berke__q{filter:blur(calc(var(--ex,0) * 8px))}}@media (prefers-reduced-motion:reduce){.berke__beam,.berke__floor{opacity:1}}@media (max-width:700px){.founder__photo{--ph:clamp(150px,36vh,300px);width:min(240px,62vw,calc(var(--ph) * .8))}.berke__q{margin-top:-12px}.quote p{font-size:clamp(28px,7.6vw,44px)}}@media (max-height:600px){.founder__photo{--ph:150px}.quote p{font-size:23px}.berke__rule{margin-top:14px}.who{margin-top:10px}}@media (min-height:601px) and (max-height:700px) and (max-width:700px){.founder__photo{--ph:clamp(150px,30vh,300px)}}.contact{--pos:50% 74%;min-height:100vh;min-height:100svh}.contact h2 .mbr{display:none}@media (max-width:480px){.contact h2 .mbr{display:inline}.contact h2{text-wrap:balance}}.contact .plate__media img{transform-origin:50% 70%}.contact__line{display:block;width:min(340px,56vw);height:1px;margin:0 auto clamp(28px,5vh,52px);background:var(--line-2);transform-origin:50% 50%}.contact .plate__body{padding-block:calc(var(--hdr) + 7vh) 7vh}@media (max-height:640px){.contact .plate__body{padding-block:calc(var(--hdr) + 1vh) 5vh}}.contact h2{max-width:none;font-size:clamp(42px,min(6.4vw,13vh),108px);letter-spacing:-.026em;--stagger-word:200ms;--t-focus:1600ms}.contact__pool{position:absolute;z-index:2;left:50%;bottom:4%;width:min(1100px,130vw);height:38%;margin-left:calc(min(1100px,130vw) / -2);pointer-events:none;opacity:.55;background:radial-gradient(ellipse 42% 38% at 50% 100%,rgba(120,160,235,.13),transparent 74%)}.contact .actions{margin-top:clamp(36px,6vh,60px)}.reach{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;margin-top:clamp(24px,4vh,40px);color:var(--ink)}.reach .link,.reach .label{color:var(--ink)}.reach .link:hover,.reach .link:focus-visible{color:#fff}.reach .link{min-height:48px;font-size:18px;letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums}.reach .label{display:inline-flex;align-items:center;min-height:40px}@media (prefers-reduced-motion:no-preference){.js .contact.is-live .contact__pool{animation:pool-breathe 9s ease-in-out infinite alternate}@keyframes pool-breathe{from{opacity:.35;transform:scale(.92)}to{opacity:.85;transform:scale(1.04)}}.js .contact__line{transform:scaleX(0);transition:transform 2.2s var(--ease-lux) .2s}.js .contact.has-in .contact__line{transform:none}}.page{position:relative;overflow:hidden;padding:calc(var(--s-7) + 72px) var(--gutter) 0}.page>.label{margin-bottom:var(--s-3)}.page h1{font-size:clamp(40px,6vw,88px)}.page .lead{max-width:52ch;margin:var(--s-3) auto 0;color:var(--ink-2)}.page .actions{margin-top:var(--s-5)}.page--404{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-bottom:var(--s-6)}.page__beam{position:absolute;left:50%;top:0;width:min(900px,120vw);height:100%;margin-left:calc(min(900px,120vw) / -2);pointer-events:none;background:radial-gradient(ellipse 28% 70% at 50% 0%,rgba(110,150,230,.12),transparent 72%)}.page>*{position:relative}.page>.page__beam{position:absolute}.prose{max-width:34rem;margin:var(--s-6) auto 0;text-align:left}.prose section{padding-top:var(--s-5);margin-top:var(--s-5);border-top:1px solid var(--line)}.prose section:first-child{border-top:0;margin-top:0;padding-top:0}.prose section{scroll-margin-top:140px}.prose h2{font-size:var(--fs-sub);line-height:1.2;text-align:center;margin-bottom:var(--s-3)}.prose p{text-wrap:pretty;color:var(--ink-2);hyphens:manual}.prose p + p{margin-top:var(--s-2)}.prose p.short{text-align:center}.page__back{margin-top:var(--s-6);padding-bottom:var(--s-2)}@media (prefers-reduced-motion:no-preference){.page__beam{animation:beam-breathe 9s ease-in-out infinite alternate}}