:root{
    --bg: #050708;
    --fg: #f4f7f8;
    --muted: rgba(244, 247, 248, .58);
    --line: rgba(255,255,255,.1);
    --cyan: #00e5ff;
    --accent: #00e5ff;
    --accent-rgb: 0,229,255;
}
*{box-sizing:border-box}html{scroll-behavior:auto;background:var(--bg);scroll-snap-type:none}body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}em{font-style:normal;color:var(--accent)}.mono{font-family:"IBM Plex Mono",monospace}.preloader{position:fixed;inset:0;z-index:9999;background:#050708;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;animation:preloaderFailsafe 0s linear 4s forwards}.preloader__logo img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 30px rgba(0,229,255,.12))}.preloader__copy{width:min(520px,80vw);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.16em;color:#9ea7aa}.preloader__line{width:min(520px,80vw);height:1px;background:#202629;overflow:hidden}.preloader__line i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--cyan)}#webgl{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}.global-grid,
.global-grain,
.global-vignette{position:fixed;inset:0;pointer-events:none}.global-grid{z-index:1;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.15))}.global-grain{z-index:3;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.global-vignette{z-index:2;background:radial-gradient(circle at 50% 45%,transparent 36%,rgba(0,0,0,.46) 100%)}.cursor{position:fixed;left:0;top:0;z-index:1000;width:58px;height:58px;border:1px solid rgba(255,255,255,.24);border-radius:50%;pointer-events:none;display:grid;place-items:center;transform:translate(-50%,-50%);mix-blend-mode:difference}.cursor span{font:500 8px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;color:white}.site-header{position:fixed;z-index:50;left:0;right:0;top:0;padding:18px 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;pointer-events:none}.site-header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;width:max-content}.brand img{width:42px;height:42px;object-fit:contain}.brand strong{display:block;font:600 13px/1 Space Grotesk,sans-serif;letter-spacing:.18em}.brand strong span{color:var(--accent-readable)}.brand small{display:block;margin-top:5px;font-size:7px;letter-spacing:.13em;color:#7e898d}.site-nav{display:flex;gap:28px;font-size:9px;letter-spacing:.13em}.site-nav a{opacity:.62;transition:.2s}.site-nav a:hover{opacity:1;color:var(--accent-readable)}.availability{justify-self:end;font-size:8px;letter-spacing:.13em;color:#8a969a}.availability i{display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#69ffb0;box-shadow:0 0 14px #69ffb0}main{position:relative;z-index:4}.hero{min-height:100svh;padding:140px 5vw 44px;display:flex;align-items:center}.hero__inner{width:100%}.hero__kicker{font-size:9px;letter-spacing:.16em;color:#829095;margin-bottom:42px}.hero__title{margin:0;display:flex;flex-direction:column;font-family:Space Grotesk,sans-serif;font-size:clamp(72px,11vw,190px);line-height:.75;letter-spacing:-.075em;font-weight:600}.hero__foot{margin-top:72px;display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:8vw;align-items:end}.hero__foot p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}.hero__enter{justify-self:end;padding-bottom:8px;border-bottom:1px solid var(--accent-readable);font-size:10px;letter-spacing:.14em}.hero__side{position:absolute;right:24px;bottom:28px;display:flex;gap:28px;font-size:8px;letter-spacing:.14em;color:#657075}.statement{padding:16vh 8vw 24vh}.statement__inner{max-width:1280px;margin:auto}.statement span{font-size:9px;letter-spacing:.16em;color:#7d898d}.statement p{margin:28px 0 0;font-family:Space Grotesk,sans-serif;font-size:clamp(38px,5.6vw,88px);line-height:1.02;letter-spacing:-.055em;color:#858f92}.statement p strong{color:white;font-weight:500}.work{position:relative}.work-intro{min-height:94vh;padding:12vh 8vw;display:flex;flex-direction:column;justify-content:flex-end}.work-intro>span{font-size:9px;letter-spacing:.16em;color:#7b878b}.work-intro h2{font-family:Space Grotesk,sans-serif;font-size:clamp(74px,12vw,180px);line-height:.78;letter-spacing:-.07em;margin:28px 0 34px}.work-intro p{max-width:560px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.work-rail{position:fixed;z-index:25;top:50%;right:18px;transform:translateY(-50%);width:150px;opacity:0;pointer-events:none;transition:.35s}.work-rail.is-visible{opacity:1;pointer-events:auto}.work-rail__title{display:block;margin-bottom:14px;font-size:7px;letter-spacing:.16em;color:#5f696d}.work-rail button{appearance:none;border:0;background:none;color:#667074;padding:4px 0;width:100%;display:flex;align-items:center;gap:7px;font:500 7px/1 "IBM Plex Mono";letter-spacing:.08em;cursor:pointer;text-align:left}.work-rail button i{width:10px;height:1px;background:#444;transition:.25s}.work-rail button.is-active{color:white}.work-rail button.is-active i{width:28px;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.5)}.case-chapter{position:relative;min-height:145vh}.case-stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:80px 5vw 46px;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr;align-items:center;gap:4vw}.case-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 62% 46%,rgba(var(--accent-rgb),.12),transparent 34%);opacity:.75;pointer-events:none}.case-media{position:relative;width:100%;height:min(72vh,760px);overflow:hidden;border-radius:2px;background:#111;box-shadow:0 40px 100px rgba(0,0,0,.28);clip-path:inset(0 0 0 0 round 2px)}.case-media::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.1);pointer-events:none}.case-media video,
.case-media img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}.case-media img{background:#0c1012}.browser-chrome{position:absolute;z-index:3;top:0;left:0;right:0;height:28px;padding:0 11px;display:flex;align-items:center;gap:5px;background:rgba(7,9,10,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}.browser-chrome i{width:5px;height:5px;border-radius:50%;background:#596164}.browser-chrome span{margin-left:7px;font:400 7px/1 "IBM Plex Mono";letter-spacing:.08em;color:#818b8e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.case-copy{position:relative;z-index:3;align-self:center}.case-copy__index{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;font-size:8px;letter-spacing:.16em;color:#7b8689}.case-copy__index b{color:var(--accent);font-weight:500}.case-copy h3{margin:0;font-family:Space Grotesk,sans-serif;font-size:clamp(58px,7vw,118px);line-height:.82;letter-spacing:-.07em;font-weight:600;word-break:break-word}.case-copy__role{display:block;margin-top:26px;font:500 9px/1.5 "IBM Plex Mono";letter-spacing:.12em;color:var(--accent);text-transform:uppercase}.case-copy p{max-width:470px;margin:20px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.case-copy__meta{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:14px}.case-copy__meta span{font:400 8px/1.5 "IBM Plex Mono";letter-spacing:.08em;color:#6e797d}.case-copy__meta strong{display:block;color:#dfe5e7;font-size:10px;margin-top:4px;font-weight:500}.case-open{margin-top:34px;border:1px solid rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.06);color:white;padding:13px 18px;font:500 9px/1 "IBM Plex Mono";letter-spacing:.12em;cursor:pointer}.case-watermark{position:absolute;z-index:1;left:2vw;bottom:-.08em;font-family:Space Grotesk,sans-serif;font-size:clamp(110px,18vw,300px);line-height:.8;letter-spacing:-.08em;color:rgba(255,255,255,.025);pointer-events:none;white-space:nowrap}.layout-right .case-media{order:2}.layout-right .case-copy{order:1}.layout-portrait{grid-template-columns:.72fr 1.28fr}.layout-portrait .case-media{width:min(52vw,620px);height:76vh;justify-self:center}.layout-wide{grid-template-columns:1fr}.layout-wide .case-media{height:60vh;width:86vw;justify-self:center}.layout-wide .case-copy{position:absolute;left:7vw;bottom:8vh;max-width:560px;background:rgba(5,7,8,.56);backdrop-filter:blur(16px);padding:24px}.layout-wide .case-copy h3{font-size:clamp(54px,6vw,94px)}.layout-offset .case-media{transform:translateY(-4vh)}.layout-offset .case-copy{transform:translateY(8vh)}.capabilities{padding:18vh 7vw 12vh;background:rgba(242,245,244,.96);color:#0b0e0f}.capabilities__intro{display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;align-items:end}.capabilities__intro>span{grid-column:1/-1;font-size:9px;letter-spacing:.16em;color:#667174}.capabilities__intro h2{margin:24px 0 0;font-family:Space Grotesk,sans-serif;font-size:clamp(72px,10vw,160px);line-height:.78;letter-spacing:-.07em}.capabilities__intro h2 em{color:#0b0e0f;-webkit-text-stroke:1px #0b0e0f}.capabilities__intro p{margin:0 0 10px;color:#566064;line-height:1.8}.capabilities__ticker{margin:12vh -7vw 9vh;display:flex;overflow:hidden;border-top:1px solid #c9cecf;border-bottom:1px solid #c9cecf;padding:18px 0;font:500 14px/1 "IBM Plex Mono";letter-spacing:.12em;white-space:nowrap}.capabilities__ticker div{animation:ticker 30s linear infinite}.capabilities__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#cbd0d1}.capabilities__grid article{background:#f2f5f4;padding:34px;min-height:250px}.capabilities__grid span{font-size:8px;color:#6c7578}.capabilities__grid strong{display:block;margin-top:58px;font-family:Space Grotesk,sans-serif;font-size:54px;letter-spacing:-.05em}.capabilities__grid p{color:#60696c;max-width:25ch}.process{padding:16vh 7vw 18vh}.process__head span{font-size:9px;letter-spacing:.16em;color:#687477}.process__head h2{margin:28px 0 12vh;font-family:Space Grotesk,sans-serif;font-size:clamp(72px,10vw,150px);line-height:.78;letter-spacing:-.07em}.process__line{height:1px;background:#252b2d;position:relative}.process__line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent-readable),rgba(var(--accent-readable-rgb),.28));transform:scaleX(0);transform-origin:left}.process__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;margin-top:40px}.process__steps article{padding-top:22px;border-top:1px solid #252b2d}.process__steps span{font-size:8px;color:#657073}.process__steps h3{font:500 38px/1 Space Grotesk;margin:50px 0 16px}.process__steps p{color:var(--muted);line-height:1.7}.contact{min-height:100svh;padding:15vh 7vw 28px;display:flex;flex-direction:column;justify-content:flex-end}.contact__mark img{width:120px;height:120px;object-fit:contain;opacity:.9}.contact>span{margin-top:40px;font-size:9px;letter-spacing:.16em;color:#6d797c}.contact h2{margin:28px 0 70px;font-family:Space Grotesk,sans-serif;font-size:clamp(78px,12vw,190px);line-height:.76;letter-spacing:-.075em}.contact__links{border-top:1px solid #242a2c}.contact__links a{display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid #242a2c}.contact__links span{font:400 8px/1 "IBM Plex Mono";letter-spacing:.13em;color:#6d787b}.contact__links strong{font:500 22px/1.1 Space Grotesk}.contact__links i{font-style:normal}.site-footer{display:flex;justify-content:space-between;margin-top:70px;font-size:8px;color:#5d676a}@keyframes ticker{to{transform:translateX(-100%)}}@keyframes preloaderFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}.statement__orb{display:block}@media(max-width:1100px){.statement__orb{display:none}.site-nav{display:none}.site-header{grid-template-columns:1fr auto}.availability{display:none}.case-stage{grid-template-columns:1fr;padding:86px 22px 34px}.case-media{height:55vh}.case-copy{align-self:end}.layout-right .case-media,
.layout-right .case-copy{order:initial}.layout-portrait{grid-template-columns:1fr}.layout-portrait .case-media{width:100%;height:58vh}.layout-wide .case-media{width:100%;height:54vh}.layout-wide .case-copy{position:relative;left:auto;bottom:auto;max-width:none;background:none;padding:0}.layout-offset .case-media,
.layout-offset .case-copy{transform:none}.work-rail{display:none}.capabilities__intro{grid-template-columns:1fr}.capabilities__grid,
.process__steps{grid-template-columns:1fr}.cursor{display:none}}@media(max-width:700px){.hero{padding:120px 20px 34px}.hero__title{font-size:clamp(62px,22vw,108px);line-height:.78}.hero__foot{grid-template-columns:1fr;gap:34px}.hero__enter{justify-self:start}.statement{padding:14vh 20px 20vh}.statement p{font-size:11vw}.work-intro{padding:12vh 20px}.work-intro h2{font-size:20vw}.case-chapter{min-height:130vh}.case-media{height:48vh}.case-copy h3{font-size:17vw}.case-copy__meta{grid-template-columns:1fr}.capabilities{padding:14vh 20px 10vh}.capabilities__intro h2,
.process__head h2{font-size:18vw}.capabilities__ticker{margin-left:-20px;margin-right:-20px}.process{padding:14vh 20px}.contact{padding:12vh 20px 24px}.contact h2{font-size:20vw}.contact__links a{grid-template-columns:1fr auto}.contact__links span{grid-column:1/-1}.contact__links strong{font-size:17px}.global-grid{background-size:44px 44px}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none}*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}

.hero__title span,
.hero__kicker,
[data-reveal]{display:block;overflow:hidden}.statement__inner p .line-wrap,
.work-intro h2 .line-wrap,
.capabilities__intro h2 .line-wrap,
.process__head h2 .line-wrap,
.contact h2 .line-wrap{display:block;overflow:hidden;padding-bottom:.06em}.statement__inner p .line,
.work-intro h2 .line,
.capabilities__intro h2 .line,
.process__head h2 .line,
.contact h2 .line{display:block;will-change:transform,opacity}.statement__orb{position:absolute;width:120px;height:120px;border-radius:50%;border:1px solid rgba(255,255,255,.14);left:10vw;top:22vh;pointer-events:none;box-shadow:0 0 40px rgba(var(--accent-rgb),.08) inset}.work{scroll-margin-top:0}.work-intro,
.case-chapter,
.capabilities,
.process,
.contact,
.statement,
.hero{scroll-snap-align:none;scroll-snap-stop:normal}.case-chapter{min-height:100svh;scroll-snap-align:none;scroll-snap-stop:normal}.case-stage{height:100svh}.case-stage::after{content:"";position:absolute;inset:auto 7vw 9vh auto;width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.7),transparent);opacity:.7}.case-copy>*{will-change:transform,opacity}.case-copy h3 .char{display:inline-block;will-change:transform,opacity}.case-media{transform-style:preserve-3d;backdrop-filter:blur(0px)}.case-media::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 28%,transparent 72%,rgba(255,255,255,.04));mix-blend-mode:screen;opacity:.45;pointer-events:none}.case-open{transition:border-color .3s ease,background .3s ease,transform .3s ease}.case-open:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.8);background:rgba(var(--accent-rgb),.15)}.case-stage.is-active .case-media{box-shadow:0 42px 120px rgba(0,0,0,.34),0 0 0 1px rgba(var(--accent-rgb),.12)}.case-stage.is-active .case-watermark{color:rgba(255,255,255,.04)}.snap-hint{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:40;padding:8px 12px;border:1px solid rgba(255,255,255,.1);background:rgba(8,10,12,.52);backdrop-filter:blur(12px);font:500 8px/1 "IBM Plex Mono";letter-spacing:.14em;color:#93a0a4;opacity:0;pointer-events:none;transition:opacity .25s}.snap-hint.is-visible{opacity:1}

@media(max-width:1100px){html{scroll-snap-type:none}.statement__orb,
.snap-hint{display:none!important}.case-stage{height:auto}.case-chapter{scroll-snap-stop:normal}}
@media(max-width:700px){.case-chapter{min-height:130vh}}


/* ===== V7 TYPOGRAPHY + CASE READABILITY ===== */
:root{
    --ui-xs: 10px;
    --ui-sm: 11px;
    --body-size: 15px;
}

.site-header{
    padding: 22px 28px;
}

.brand img{
    width: 50px;
    height: 50px;
}

.brand strong{
    font-size: 15px;
    letter-spacing: .16em;
}

.brand small{
    margin-top: 6px;
    font-size: 8px;
    letter-spacing: .15em;
}

.site-nav{
    gap: 34px;
    font-size: 10px;
}

.availability{
    font-size: 9px;
}

.hero__kicker,
.statement__meta > span,
.work-intro>span,
.capabilities__intro>span,
.process__head span,
.contact>span{
    font-size: 10px;
    line-height: 1.45;
}

.hero__foot p,
.work-intro p,
.case-copy p,
.capabilities__intro p,
.process__steps p{
    font-size: 15px;
    line-height: 1.75;
}

.hero__enter{
    font-size: 11px;
}

.hero__side{
    font-size: 9px;
}

.work-rail{
    width: 184px;
    right: 24px;
}

.work-rail__title{
    font-size: 8px;
    margin-bottom: 16px;
}

.work-rail button{
    padding: 5px 0;
    gap: 9px;
    font-size: 8px;
    line-height: 1.25;
}

.work-rail button i{
    width: 14px;
}

.work-rail button.is-active i{
    width: 34px;
}

.case-stage{
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: clamp(42px, 5vw, 84px);
}

.case-copy{
    max-width: 620px;
    opacity: 1;
}

.case-copy__index{
    margin-bottom: 28px;
    font-size: 9px;
}

.case-copy h3{
    font-size: clamp(64px, 7.25vw, 122px);
    line-height: .84;
}

.case-copy__role{
    margin-top: 28px;
    font-size: 10px;
    line-height: 1.6;
}

.case-copy p{
    max-width: 520px;
    margin-top: 22px;
    color: rgba(244,247,248,.72);
}

.case-copy__meta{
    margin-top: 32px;
    padding-top: 18px;
    gap: 22px;
}

.case-copy__meta span{
    font-size: 9px;
    line-height: 1.6;
}

.case-copy__meta strong{
    font-size: 11px;
    line-height: 1.5;
    margin-top: 6px;
}

.case-open{
    margin-top: 36px;
    padding: 15px 20px;
    font-size: 10px;
}

.browser-chrome{
    height: 32px;
}

.browser-chrome span{
    font-size: 8px;
}

.snap-hint{
    font-size: 9px;
    padding: 10px 14px;
}

.capabilities__grid span,
.process__steps span,
.contact__links span,
.site-footer{
    font-size: 9px;
}

.capabilities__grid p{
    font-size: 14px;
    line-height: 1.65;
}

.process__steps h3{
    font-size: 42px;
}

.contact__links strong{
    font-size: 24px;
}

/* Keep every case readable even before/after exact scrub positions */
.case-stage.is-active .case-copy,
.case-stage.is-active .case-copy__role,
.case-stage.is-active .case-copy p,
.case-stage.is-active .case-copy__meta span,
.case-stage.is-active .case-open{
    visibility: visible;
}

/* More balanced dark plate behind text only on layouts that overlap media */
.layout-wide .case-copy{
    padding: 30px 32px;
    background: rgba(5,7,8,.72);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

@media (max-width: 1100px){
    .site-header{ padding: 18px 20px; }
    .brand img{ width: 44px; height: 44px; }
    .brand strong{ font-size: 14px; }
    .case-stage{ grid-template-columns: 1fr; gap: 28px; }
    .case-copy{ max-width: 100%; opacity: 1 !important; }
    .case-copy h3{ font-size: clamp(54px, 9vw, 94px); }
    .case-copy p{ font-size: 14px; }
}

@media (max-width: 700px){
    .brand strong{ font-size: 13px; }
    .brand small{ font-size: 7px; }
    .hero__kicker,
.statement__meta > span,
.work-intro>span,
.capabilities__intro>span,
.process__head span,
.contact>span{ font-size: 9px; }
    .case-copy h3{ font-size: clamp(46px, 16vw, 74px); }
    .case-copy__role{ font-size: 9px; }
    .case-copy p{ font-size: 14px; line-height: 1.65; }
    .case-copy__index,
.case-copy__meta span{ font-size: 8px; }
    .case-copy__meta strong{ font-size: 10px; }
    .case-open{ font-size: 9px; }
    .contact__links strong{ font-size: 18px; }
}


/* ==============================
   V8 / POLISH & READABILITY
   ============================== */
:root{
    --header-pad-x: clamp(22px, 2.1vw, 38px);
}

.site-header{
    padding: 22px var(--header-pad-x);
}
.brand img{ width: 54px; height: 54px; }
.brand strong{ font-size: 16px; letter-spacing: .155em; }
.brand small{ font-size: 9px; letter-spacing: .14em; }
.site-nav{ gap: 38px; font-size: 11px; }
.availability{ font-size: 10px; }

.hero__kicker,
.statement__meta > span,
.work-intro > span,
.capabilities__intro > span,
.process__head > span,
.contact > span{
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .15em;
}
.hero__foot p,
.work-intro p,
.capabilities__intro p,
.process__steps p{ font-size: 16px; }
.hero__enter{ font-size: 12px; }
.hero__side{ font-size: 10px; }

/* Approach: deterministic big lines, no SplitText font inheritance bug */
.statement{
    position: relative;
    min-height: 100svh;
    padding: 18vh 7vw 14vh;
    display: flex;
    align-items: center;
}
.statement__inner{
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}
.statement__meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    margin-bottom: clamp(30px, 4vh, 54px);
    color: #7d898d;
}
.statement__copy{
    margin: 0;
    font-family: Space Grotesk, sans-serif;
    font-size: clamp(46px, 5.35vw, 92px);
    line-height: .99;
    letter-spacing: -.052em;
    font-weight: 400;
    color: rgba(213, 221, 223, .52);
}
.statement__line{
    display: block;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    overflow: hidden;
    width: max-content;
    max-width: 100%;
    padding: .04em 0 .07em;
    will-change: transform, opacity, filter;
}
.statement__line strong{
    color: #f5f8f9;
    font-weight: 500;
}
.statement__line:nth-child(2){ margin-left: 3.5vw; }
.statement__line:nth-child(3){ margin-left: 7vw; }
.statement__line:nth-child(4){ margin-left: 10.5vw; }
.statement__orb{
    width: clamp(100px, 8vw, 148px);
    height: clamp(100px, 8vw, 148px);
    left: 4vw;
    top: 22vh;
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 0 50px rgba(var(--accent-rgb),.10) inset, 0 0 70px rgba(var(--accent-rgb),.035);
}

/* Work intro */
.work-intro{ min-height: 100svh; }
.work-intro h2{ max-width: 10ch; }

/* Snap case experience */
.case-chapter{
    min-height: 100svh;
    scroll-margin-top: 0;
}
.case-stage{
    height: 100svh;
    padding: clamp(86px, 9vh, 112px) 5.5vw clamp(44px, 6vh, 72px);
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
    gap: clamp(44px, 5.2vw, 92px);
}
.case-stage::before{
    background:
        radial-gradient(circle at 64% 45%, rgba(var(--accent-rgb), .15), transparent 31%),
        radial-gradient(circle at 24% 72%, rgba(var(--accent-rgb), .035), transparent 24%);
    transition: opacity .55s ease;
}
.case-stage:not(.is-active)::before{ opacity: .45; }
.case-media{
    height: min(70vh, 760px);
    box-shadow: 0 42px 110px rgba(0,0,0,.31);
    transition: box-shadow .45s ease, transform .45s ease;
}
.case-stage.is-active .case-media{
    box-shadow: 0 48px 130px rgba(0,0,0,.38), 0 0 0 1px rgba(var(--accent-rgb),.17), 0 0 70px rgba(var(--accent-rgb),.055);
}
.case-copy{
    max-width: 650px;
}
.case-copy__index{
    margin-bottom: 30px;
    font-size: 10px;
}
.case-copy h3{
    font-size: clamp(70px, 7.1vw, 126px);
    line-height: .82;
}
.case-copy__role{
    margin-top: 30px;
    font-size: 11px;
    letter-spacing: .105em;
}
.case-copy p{
    max-width: 540px;
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.72;
    color: rgba(244,247,248,.72);
}
.case-copy__meta{
    margin-top: 32px;
    padding-top: 19px;
}
.case-copy__meta span{ font-size: 10px; }
.case-copy__meta strong{ font-size: 12px; line-height: 1.5; }
.case-open{ font-size: 11px; padding: 15px 21px; }
.browser-chrome span{ font-size: 9px; }

.layout-portrait .case-media{ height: 72vh; }
.layout-wide .case-media{ height: 62vh; }
.layout-wide .case-copy{
    padding: 32px 34px;
    background: linear-gradient(135deg, rgba(5,7,8,.88), rgba(5,7,8,.64));
    border-color: rgba(var(--accent-rgb),.15);
}

.work-rail{
    width: 205px;
    right: 24px;
}
.work-rail__title{ font-size: 9px; }
.work-rail button{
    padding: 6px 0;
    font-size: 9px;
    line-height: 1.2;
}
.work-rail button span{ opacity: .64; transition: opacity .25s ease, transform .25s ease; }
.work-rail button.is-active span{ opacity: 1; transform: translateX(3px); }

.case-progress{
    position: fixed;
    z-index: 24;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(6,9,10,.58);
    backdrop-filter: blur(16px);
    font-size: 9px;
    letter-spacing: .12em;
    color: #8d989b;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
.case-progress.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); }
.case-progress > i{
    display: block;
    width: clamp(100px, 10vw, 170px);
    height: 1px;
    background: rgba(255,255,255,.12);
    overflow: hidden;
}
.case-progress > i > b{
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(calc(1 / 11));
    transform-origin: left;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb),.5);
}

.snap-hint{
    bottom: 66px;
    font-size: 9px;
    color: #a5afb2;
}

/* More depth in the light profile section */
.capabilities{
    position: relative;
    overflow: hidden;
}
.capabilities::before{
    content: "HR";
    position: absolute;
    right: -2vw;
    top: 2vh;
    font: 600 clamp(180px, 28vw, 480px)/1 Space Grotesk, sans-serif;
    letter-spacing: -.12em;
    color: rgba(10,14,15,.025);
    pointer-events: none;
}
.capabilities__grid article{
    transition: transform .35s ease, background .35s ease;
}
.capabilities__grid article:hover{
    transform: translateY(-5px);
    background: white;
}

/* Process / contact typography readability */
.process__steps span,
.capabilities__grid span,
.contact__links span,
.site-footer{ font-size: 10px; }
.process__steps p{ font-size: 15px; }
.contact__links strong{ font-size: clamp(21px, 1.7vw, 28px); }

@media (max-width: 1100px){
    html{ scroll-snap-type: none; }
    .statement{ padding: 15vh 5vw; }
    .statement__copy{ font-size: clamp(40px, 6vw, 72px); }
    .statement__line:nth-child(n){ margin-left: 0; width: auto; }
    .statement__meta{ align-items: flex-start; }
    .statement__meta span:last-child{ text-align: right; }
    .case-stage{ height: auto; min-height: 100svh; grid-template-columns: 1fr; gap: 26px; }
    .case-media{ height: 54vh; }
    .case-copy h3{ font-size: clamp(58px, 10vw, 94px); }
    .case-copy p{ font-size: 15px; }
    .case-progress,
.snap-hint{ display: none !important; }
}

@media (max-width: 700px){
    .site-header{ padding: 15px 16px; }
    .brand img{ width: 43px; height: 43px; }
    .brand strong{ font-size: 13px; }
    .brand small{ font-size: 7px; }
    .statement{ min-height: auto; padding: 16vh 20px 18vh; }
    .statement__meta{ display: grid; gap: 10px; margin-bottom: 34px; }
    .statement__meta span:last-child{ text-align: left; }
    .statement__copy{ font-size: clamp(36px, 10.5vw, 54px); line-height: 1.02; }
    .statement__line{ width: auto; }
    .case-chapter{ min-height: 125vh; }
    .case-stage{ padding: 84px 20px 34px; }
    .case-media{ height: 46vh; }
    .case-copy__index{ font-size: 9px; margin-bottom: 20px; }
    .case-copy h3{ font-size: clamp(50px, 15vw, 76px); }
    .case-copy__role{ font-size: 9px; margin-top: 20px; }
    .case-copy p{ font-size: 14px; margin-top: 16px; }
    .case-copy__meta span{ font-size: 8px; }
    .case-copy__meta strong{ font-size: 10px; }
    .case-open{ font-size: 9px; }
}


/* Header adapts to the light profile section */
.site-header,
.site-header .brand strong,
.site-header .brand small,
.site-header .site-nav a,
.site-header .availability{ transition: color .35s ease, opacity .35s ease; }
.site-header.is-light .brand strong,
.site-header.is-light .site-nav a{ color: #111718; }
.site-header.is-light .brand strong span{ color: var(--accent-readable); }
.site-header.is-light .brand small,
.site-header.is-light .availability{ color: rgba(17,23,24,.58); }
.site-header.is-light .site-nav a:hover{ color: var(--accent-readable); }
.site-header.is-light .availability i{ box-shadow: 0 0 12px rgba(45,180,107,.38); }


/* ========================================================================
   V9 - Navigation & interaction architecture
   Normal site scroll + one pinned case system. No wheel hijacking.
   ======================================================================== */
html{ scroll-snap-type: none !important; }
body{ overscroll-behavior-y: auto; }

.site-header{
    transition: background .35s ease, border-color .35s ease, color .35s ease, padding .35s ease;
}
.site-header.is-scrolled{
    padding-top: 13px;
    padding-bottom: 13px;
    background: linear-gradient(180deg, rgba(5,7,8,.78), rgba(5,7,8,.32));
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.055);
}
.site-header.is-light.is-scrolled{
    background: linear-gradient(180deg, rgba(242,245,244,.9), rgba(242,245,244,.58));
    border-color: rgba(10,14,15,.08);
}
.site-nav a{ position: relative; }
.site-nav a::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    background: currentColor;
    transition: transform .28s ease;
}
.site-nav a.is-active::after,
.site-nav a:hover::after{ transform: scaleX(1); transform-origin: left; }
.site-nav a.is-active{ opacity: 1; color: var(--accent-readable); }
.site-header.is-light .site-nav a.is-active{ color: var(--accent-readable); }

.statement{ min-height: 100svh; display: flex; align-items: center; padding-top: 15vh; padding-bottom: 15vh; }
.statement__inner{ width: 100%; }
.work-intro{ min-height: 100svh; }

.case-sequence{
    position: relative;
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
    isolation: isolate;
}
.case-chapter{
    position: absolute !important;
    inset: 0;
    min-height: 0 !important;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: opacity, visibility;
}
.case-chapter:first-child{ opacity: 1; visibility: visible; pointer-events: auto; }
.case-stage{
    position: absolute !important;
    inset: 0;
    top: 0 !important;
    height: 100%;
    min-height: 720px;
    will-change: transform, opacity;
}
.case-stage::before{
    opacity: calc(.52 + (var(--case-pulse, 0) * .28));
}
.case-media{ will-change: transform, filter, clip-path; }
.case-copy,
.case-copy > *{ will-change: transform, opacity; }
.case-copy h3{ text-wrap: balance; }

.work-rail{
    right: 26px;
    padding: 15px 14px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(5,8,9,.42);
    backdrop-filter: blur(14px);
    transform: translateY(-50%) translateX(14px);
}
.work-rail.is-visible{ transform: translateY(-50%) translateX(0); }
.work-rail button{ min-height: 27px; }
.work-rail button i{ flex: 0 0 auto; }

.case-progress{
    bottom: 22px;
    box-shadow: 0 16px 45px rgba(0,0,0,.22);
}
.snap-hint{
    display: flex;
    align-items: center;
    gap: 9px;
    bottom: 70px;
    border-radius: 999px;
}
.snap-hint i{
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb),.62);
}

.capabilities__grid article,
.process__steps article,
.contact__links a{ will-change: transform, opacity; }

@media (max-width: 1100px){
    .case-sequence{ height: auto; min-height: 0; overflow: visible; }
    .case-chapter{
        position: relative !important;
        inset: auto;
        min-height: 118svh !important;
        height: auto;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .case-stage{
        position: relative !important;
        inset: auto;
        height: auto !important;
        min-height: 100svh;
    }
    .case-chapter:first-child{ opacity: 1; visibility: visible; }
}

@media (max-width: 700px){
    .site-header.is-scrolled{ padding-top: 11px; padding-bottom: 11px; }
    .statement{ min-height: auto; padding-top: 14vh; padding-bottom: 16vh; }
    .case-chapter{ min-height: auto !important; padding-bottom: 11vh; }
    .case-stage{ min-height: auto; }
}

@media (prefers-reduced-motion: reduce){
    .case-sequence{ height: auto !important; overflow: visible !important; }
    .case-chapter{ position: relative !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; min-height: 100svh !important; }
    .case-stage{ position: relative !important; }
    .snap-hint{ display: none !important; }
}

/* Accessibility & finish */
a:focus-visible,
button:focus-visible{
    outline: 1px solid var(--accent);
    outline-offset: 5px;
}
.case-media img,
.case-media video{ user-select: none; -webkit-user-drag: none; }
::selection{ background: var(--accent); color: #041014; }
/* V10 / stability, accessibility and graceful fallbacks */
html{ scroll-padding-top: 86px; }
button,
a{ -webkit-tap-highlight-color: transparent; }
.case-open,
.work-rail button{ touch-action: manipulation; }
.case-copy h3,
.contact__links strong{ overflow-wrap: anywhere; }


.case-media.is-media-error > img,
.case-media.is-media-error > video{
    opacity: .12;
    filter: grayscale(1) blur(4px);
}
.case-media__fallback{
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-content: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
    background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), .16), rgba(5,7,8,.88) 62%);
    color: white;
}
.case-media__fallback span,
.case-media__fallback small{
    font-size: 10px;
    letter-spacing: .14em;
    color: rgba(244,247,248,.64);
}
.case-media__fallback strong{
    font: 600 clamp(42px, 5vw, 92px)/.85 Space Grotesk, sans-serif;
}
.case-media__fallback small{
    color: var(--accent);
}
.no-motion-libs .preloader{ display: none; }
.no-motion-libs .case-sequence{
    height: auto;
    min-height: 0;
    overflow: visible;
}
.no-motion-libs .case-chapter{
    position: relative !important;
    min-height: 100svh !important;
    height: auto;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.no-motion-libs .case-stage{
    position: relative !important;
    height: auto;
    min-height: 100svh;
}
.no-motion-libs .work-rail,
.no-motion-libs .case-progress,
.no-motion-libs .snap-hint{ display: none !important; }

@supports not (height: 100svh){
    .hero,
.statement,
.contact{ min-height: 100vh; }
    .case-sequence,
.case-stage{ height: 100vh; }
}

@media (max-width: 700px){
    html{ scroll-padding-top: 72px; }
    .hero__side{
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 42px;
        flex-wrap: wrap;
    }
    
    
    .case-media__fallback{ padding: 22px; }
    .case-media__fallback strong{ font-size: clamp(34px, 13vw, 58px); }
    .site-footer{
        gap: 14px;
        flex-wrap: wrap;
    }
}
/* V11 / natural case scroll and large statement motion */
.statement .statement__copy{
    font-size: 96px;
    line-height: .94;
    letter-spacing: -.055em;
    color: rgba(213, 221, 223, .58);
}
.statement .statement__line{
    display: block;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    padding: .035em 0 .075em;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}
.statement .statement__line strong{
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: #f7fbfc;
}
.statement .statement__meta span{
    font-size: 11px;
    line-height: 1.45;
}
.statement .statement__line:nth-child(2){ margin-left: 4vw; }
.statement .statement__line:nth-child(3){ margin-left: 8vw; }
.statement .statement__line:nth-child(4){ margin-left: 12vw; }
.snap-hint span{ white-space: nowrap; }

@media (min-width: 1440px){
    .statement .statement__copy{ font-size: 116px; }
}

@media (max-width: 1100px){
    .statement .statement__copy{ font-size: 70px; line-height: .98; }
    .statement .statement__line:nth-child(n){ margin-left: 0; width: auto; }
}

@media (max-width: 700px){
    .statement .statement__copy{ font-size: 42px; line-height: 1.04; letter-spacing: -.035em; }
    .statement .statement__meta span{ font-size: 9px; }
}
/* V12 / Awwwards atmosphere, kinetic cases and premium motion */
:root{
    --pointer-x: 50%;
    --pointer-y: 50%;
    --scroll-ratio: 0;
}
#webgl{ filter: saturate(1.22) contrast(1.08); }
.global-grid{
    opacity: .22;
    background-size: 52px 52px;
    mix-blend-mode: screen;
}
.global-vignette{
    background:
        radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(var(--accent-rgb), .16), transparent 20%),
        radial-gradient(circle at 50% 45%, transparent 34%, rgba(0,0,0,.62) 100%);
}
.awwwards-layer{
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    color: rgba(244,247,248,.58);
}



.awwwards-layer__corner{
    position: absolute;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(5,7,8,.28);
    backdrop-filter: blur(12px);
    font-size: 8px;
    letter-spacing: .16em;
}
.awwwards-layer__corner--tl{ left: 24px; bottom: 24px; }
.awwwards-layer__corner--br{ right: 24px; bottom: 24px; }
.awwwards-layer__corner b{ color: var(--accent); font-weight: 500; }
.awwwards-layer__scan{
    position: absolute;
    inset: 0;
    opacity: .12;
    background: repeating-linear-gradient(to bottom, transparent 0 9px, rgba(255,255,255,.09) 10px, transparent 11px 18px);
    mix-blend-mode: overlay;
    animation: cinematicScan 9s linear infinite;
}
.hero__title{
    font-size: clamp(70px, 9.8vw, 176px);
    line-height: .78;
    letter-spacing: 0;
    transform-style: preserve-3d;
    will-change: transform;
}
.hero__line{
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    padding: .045em 0 .075em;
    overflow: hidden;
    white-space: nowrap;
    text-shadow: 0 0 36px rgba(0,0,0,.2);
}
.hero__line--two{ margin-left: 12vw; }
.hero__line--three{ margin-left: 22vw; }
.hero__line-inner{
    display: block;
    transform-style: preserve-3d;
    transform-origin: 50% 70%;
    will-change: transform, opacity;
}
.hero-char{
    display: inline-block;
    transform-origin: 50% 82%;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}
.hero-char.is-accent{
    color: var(--accent-readable);
    text-shadow: 0 0 26px rgba(var(--accent-readable-rgb), .42);
}
@media (max-width: 700px){
    .hero__title{ font-size: clamp(58px, 18vw, 80px); line-height: .84; }
    .hero__line--two,
    .hero__line--three{ margin-left: 0; }
    .hero__line--three{ font-size: 68%; }
}
.case-energy{
    position: absolute;
    inset: clamp(82px, 9vh, 112px) 5.5vw clamp(44px, 6vh, 72px);
    z-index: 2;
    pointer-events: none;
    display: grid;
    align-content: center;
    gap: clamp(40px, 8vh, 96px);
    opacity: .85;
}
.case-energy i{
    display: block;
    width: min(58vw, 900px);
    height: 1px;
    transform: scaleX(.08);
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .72), rgba(255,255,255,.36), transparent);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), .28);
    opacity: 0;
}
.layout-right .case-energy i,
.layout-wide .case-energy i{ justify-self: end; }
.case-media{
    --media-depth: 0;
    isolation: isolate;
    outline: 1px solid rgba(var(--accent-rgb), calc(.08 + var(--media-depth) * .16));
    outline-offset: -1px;
}
.case-media::after{
    border-color: rgba(255,255,255,.12);
    box-shadow: inset 0 0 58px rgba(var(--accent-rgb), calc(.04 + var(--media-depth) * .09));
}
.case-media__shine{
    position: absolute;
    z-index: 4;
    inset: -35% auto -35% -30%;
    width: 28%;
    transform: skewX(-18deg) translateX(-140%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), rgba(var(--accent-rgb), .3), transparent);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}
.case-media__scan{
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: -20%;
    height: 18%;
    background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), .18), rgba(255,255,255,.14), transparent);
    mix-blend-mode: screen;
    opacity: .38;
    pointer-events: none;
}
.case-stage.is-active .case-copy h3{
    text-shadow: 0 0 36px rgba(var(--accent-rgb), .12);
}
.case-stage.is-active .case-copy__role{
    text-shadow: 0 0 18px rgba(var(--accent-rgb), .32);
}
.case-open,
.hero__enter{
    position: relative;
    overflow: hidden;
}
.case-open::before
.hero__enter::before{
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-112%);
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .18), transparent);
    pointer-events: none;
    transition: transform .62s cubic-bezier(.77,0,.18,1);
}
.case-open.is-hovered::before
.hero__enter.is-hovered::before{ transform: translateX(112%); }
.contact__links a{
    position: relative;
    overflow: hidden;
    transition: color .28s ease, padding-left .28s ease;
}
.contact__links a.is-hovered{
    color: white;
    padding-left: 18px;
}
.contact__links a.is-hovered strong{ color: var(--accent); }
.capabilities__grid article{
    position: relative;
    overflow: hidden;
}
.capabilities__grid article::after{
    content: "";
    position: absolute;
    inset: auto -20% 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #0b0e0f, transparent);
    opacity: .22;
}
@keyframes cinematicScan {
    from { transform: translateY(-20px); }
    to { transform: translateY(20px); }
}
@media (max-width: 1100px){
    
    .awwwards-layer__corner{ display: none; }
    .case-energy{ display: none; }
}
@media (max-width: 700px){
    .global-grid{ opacity: .14; }
    .awwwards-layer__scan{ opacity: .07; }
    .contact__links a.is-hovered{ padding-left: 0; }
}
@media (prefers-reduced-motion: reduce){
    .awwwards-layer,
.case-media__shine,
.case-media__scan{ display: none !important; }
}

/* V14 / performance polish and cinematic details */
.work{
    position: relative;
    overflow: clip;
}
.work__ambient-ring{
    position: absolute;
    top: clamp(160px, 22vh, 260px);
    right: -18vw;
    width: min(54vw, 720px);
    aspect-ratio: 1;
    border: 1px solid rgba(var(--accent-rgb), .18);
    border-radius: 50%;
    box-shadow: inset 0 0 70px rgba(var(--accent-rgb), .045), 0 0 80px rgba(var(--accent-rgb), .06);
    pointer-events: none;
    opacity: .42;
}
.work__ambient-ring::before,
.work__ambient-ring::after{
    content: "";
    position: absolute;
    inset: 11%;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    transform: rotate(21deg) scaleY(.38);
}
.work__ambient-ring::after{
    inset: 24%;
    border-color: rgba(var(--accent-rgb), .18);
    transform: rotate(-32deg) scaleY(.54);
}
.case-stage{
    --case-pulse: 0;
}
.case-stage::before{
    content: "";
    position: absolute;
    inset: clamp(54px, 7vh, 82px) 3vw clamp(38px, 6vh, 70px);
    z-index: 0;
    pointer-events: none;
    opacity: calc(.08 + var(--case-pulse) * .24);
    background:
        linear-gradient(115deg, transparent 0 22%, rgba(var(--accent-rgb), .12) 46%, transparent 72%),
        radial-gradient(circle at 72% 38%, rgba(var(--accent-rgb), .16), transparent 36%);
    transform: skewY(-4deg) scaleX(calc(.94 + var(--case-pulse) * .04));
    filter: blur(.2px);
    transition: opacity .5s ease, transform .5s ease;
}
.case-stage.is-active::before{
    opacity: .34;
}
.case-media video:not([src]){
    background:
        linear-gradient(120deg, transparent, rgba(var(--accent-rgb), .12), transparent),
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), .16), transparent 52%),
        #050708;
}
.capabilities__grid article,
.process__steps article{
    position: relative;
    overflow: hidden;
    transition: border-color .36s ease, box-shadow .36s ease, background .36s ease;
}
.capabilities__grid article::before,
.process__steps article::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .72), rgba(255,255,255,.28), transparent);
    opacity: 0;
    transition: transform .72s cubic-bezier(.77,0,.18,1), opacity .36s ease;
}
.capabilities__grid article.is-primed,
.process__steps article.is-primed{
    border-color: rgba(var(--accent-rgb), .22);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .055), rgba(255,255,255,.018));
    box-shadow: 0 20px 70px rgba(var(--accent-rgb), .055);
}
.capabilities__grid article.is-primed::before,
.process__steps article.is-primed::before{
    transform: scaleX(1);
    opacity: 1;
}
@media (max-width: 1100px){
    .work__ambient-ring{ opacity: .18; right: -34vw; }
    .case-stage::before{ display: none; }
}
@media (prefers-reduced-motion: reduce){
    .work__ambient-ring,
.case-stage::before{ display: none !important; }
}
/* V15 / case navigation state and media line cleanup */
.is-in-cases .site-nav a[href="#work"]{
    opacity: 1;
    color: var(--accent-readable);
}

.case-energy{
    z-index: 1;
    opacity: .42;
    mix-blend-mode: screen;
}
.case-stage::after{
    z-index: 1;
    opacity: .28;
}
.case-media{
    z-index: 2;
}
.case-copy{
    z-index: 4;
}
.work-rail{
    background: rgba(5,8,9,.58);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 28px 90px rgba(0,0,0,.36);
}
.work-rail button{
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.case-media__shine,
.case-media__scan,
.browser-chrome{
    z-index: 5;
}

/* V16 / continuous nav state and footer HUD polish */
.is-nav-contact .awwwards-layer__corner--br{
    bottom: 62px;
    opacity: .42;
}
.is-nav-contact .awwwards-layer__corner--tl,
.is-nav-about .awwwards-layer__corner--tl{
    opacity: .42;
}

.is-nav-contact .site-footer{
    padding-right: 86px;
}
@media (max-width: 1100px){
    .is-nav-contact .site-footer{ padding-right: 0; }
}
/* V17 / overflow cleanup and mobile edge polish */
html,
body{
    max-width: 100%;
    overflow-x: clip;
}
main{
    overflow-x: clip;
}
.statement .statement__line{
    width: auto;
    max-width: 100%;
}
.work__ambient-ring{
    right: clamp(20px, 3vw, 48px);
    width: min(42vw, 680px);
}
.case-media__shine{
    inset: -32% auto -32% -18%;
    width: 22%;
}
@media (max-width: 1100px){
    .work__ambient-ring{ display: none; }
}
@media (max-width: 700px){
    .hero__side{ display: none; }
    .case-media__shine{ display: none; }
}
/* V18 / QA polish and lifecycle performance */
.site-nav a:focus-visible,
.brand:focus-visible,
.hero__enter:focus-visible,
.case-open:focus-visible,
.contact__links a:focus-visible,
.work-rail button:focus-visible{
    outline: 1px solid var(--accent);
    outline-offset: 6px;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14);
}
.case-media{
    backface-visibility: hidden;
    transform-origin: center center;
}
.case-media video,
.case-media img,
#webgl{
    backface-visibility: hidden;
}
.site-header{
    contain: layout paint style;
}

@media (hover: none){
    .case-open:hover{ transform: none; }
}
/* V19 / final mobile viewport polish */
@media (max-width: 700px){
    .statement .statement__copy{
        font-size: clamp(34px, 9.2vw, 46px);
        line-height: 1.05;
        letter-spacing: -.03em;
    }
    .statement .statement__line{
        max-width: calc(100vw - 40px);
        overflow-wrap: anywhere;
    }
    .case-watermark{
        left: 20px;
        max-width: calc(100vw - 40px);
        overflow: hidden;
        font-size: clamp(82px, 28vw, 136px);
    }
    
}
/* V22 / contact hover cleanup */
.contact__links a{
    isolation: isolate;
    transition: color .28s ease, padding-left .28s ease, border-color .28s ease, background .28s ease;
}
.contact__links a > *{
    position: relative;
    z-index: 2;
}
.contact__links a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 2px;
    transform: scaleY(0);
    transform-origin: center;
    background: var(--accent);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), .5);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .24s ease;
}
.contact__links a::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .86), rgba(255,255,255,.38), transparent 76%);
    opacity: .72;
    pointer-events: none;
    z-index: 1;
    transition: transform .44s cubic-bezier(.22,1,.36,1);
}
.contact__links a.is-hovered{
    color: white;
    padding-left: 12px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .055), transparent 62%);
}
.contact__links a.is-hovered::before{
    transform: scaleY(1);
    opacity: 1;
}
.contact__links a.is-hovered::after{
    transform: scaleX(1);
}
.contact__links a.is-hovered strong{
    color: #f5fbff;
    text-shadow: 0 0 22px rgba(var(--accent-rgb), .24);
}
.contact__links a i{
    transition: transform .28s ease, color .28s ease, opacity .28s ease;
}
.contact__links a.is-hovered i{
    transform: translate(4px, -4px);
    color: var(--accent);
    opacity: 1;
}
@media (hover: none){
    .contact__links a.is-hovered{
        padding-left: 0;
        background: transparent;
    }
}
/* V23 / infinite capabilities ticker */
.capabilities__ticker{
    position: relative;
    display: flex;
    overflow: hidden;
    width: calc(100% + 14vw);
    transform: translate3d(0, 0, 0);
}
.capabilities__ticker-track{
    display: flex;
    width: max-content;
    flex: none;
    will-change: transform;
    animation: tickerLoop 34s linear infinite;
}
.capabilities__ticker-item{
    display: block;
    flex: 0 0 auto;
    padding-right: 2.2ch;
    white-space: nowrap;
}
@keyframes tickerLoop {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
    .capabilities__ticker-track{ animation: none; }
}
:root{
    --accent-2: var(--accent);
    --accent-2-rgb: var(--accent-rgb);
}
.case-stage::before{
    background:
        radial-gradient(circle at 62% 46%, rgba(var(--accent-rgb), .13), transparent 33%),
        radial-gradient(circle at 32% 64%, rgba(var(--accent-2-rgb), .10), transparent 28%);
}
.case-stage::after{
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .76), rgba(var(--accent-2-rgb), .72), transparent);
}
.case-stage.is-active .case-media{
    box-shadow: 0 48px 130px rgba(0,0,0,.38), 0 0 0 1px rgba(var(--accent-rgb),.17), 0 0 70px rgba(var(--accent-rgb),.055), 0 0 88px rgba(var(--accent-2-rgb), .045);
}
.case-energy i{
    background: linear-gradient(90deg, rgba(var(--accent-rgb), .72), rgba(var(--accent-2-rgb), .58), rgba(255,255,255,.30), transparent);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), .28), 0 0 30px rgba(var(--accent-2-rgb), .16);
}
.case-media__shine{
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), rgba(var(--accent-rgb), .30), rgba(var(--accent-2-rgb), .24), transparent);
}
.case-open::before{
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .18), rgba(var(--accent-2-rgb), .16), transparent);
}
:root{
    --accent-readable: var(--accent);
    --accent-readable-rgb: var(--accent-rgb);
}
.case-copy__index b{
    color: var(--accent-readable);
    text-shadow: 0 0 20px rgba(var(--accent-readable-rgb), .24);
}
.case-copy__role{
    color: var(--accent-readable);
    text-shadow: 0 0 18px rgba(var(--accent-readable-rgb), .28);
}
.case-open{
    border-color: rgba(var(--accent-readable-rgb), .48);
    background: rgba(var(--accent-readable-rgb), .08);
}
.case-open:hover{
    border-color: rgba(var(--accent-readable-rgb), .82);
    background: rgba(var(--accent-readable-rgb), .16);
}
.work-rail button.is-active i{
    background: var(--accent-readable);
    box-shadow: 0 0 12px rgba(var(--accent-readable-rgb), .56);
}
.case-media__fallback small,
.site-nav a.is-active,
.contact__links a.is-hovered strong{
    color: var(--accent-readable);
}
.cookie-consent[hidden],
.cookie-settings[hidden]{
    display: none !important;
}
body.has-cookie-dialog{
    overflow: hidden;
}
.cookie-consent{
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(2,4,5,.76);
    backdrop-filter: blur(10px) saturate(.72);
    animation: cookieBackdropIn .42s ease both;
}
.cookie-consent__panel{
    position: relative;
    width: min(680px, 100%);
    padding: clamp(28px,4vw,52px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;
    background: rgba(6,9,10,.96);
    color: white;
    box-shadow: 0 36px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-readable-rgb),.09) inset;
    animation: cookiePanelIn .55s cubic-bezier(.2,.8,.2,1) both;
}
.cookie-consent__panel::before{
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg,var(--accent-readable),rgba(var(--accent-readable-rgb),.12) 70%,transparent);
}
.cookie-consent__panel::after{
    content: "02";
    position: absolute;
    right: clamp(22px,4vw,48px);
    bottom: clamp(18px,3vw,34px);
    font: 500 64px/1 "IBM Plex Mono",monospace;
    color: rgba(var(--accent-readable-rgb),.045);
    pointer-events: none;
}
.cookie-consent__header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 42px;
}
.cookie-consent__eyebrow,
.cookie-consent__signal{
    font-size: 8px;
    letter-spacing: .14em;
}
.cookie-consent__eyebrow{
    color: var(--accent-readable);
}
.cookie-consent__signal{
    color: #7f8b8f;
}
.cookie-consent__signal i{
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--accent-readable);
    box-shadow: 0 0 14px rgba(var(--accent-readable-rgb),.65);
}
.cookie-consent__panel h2{
    max-width: 12ch;
    margin: 0;
    font: 500 clamp(42px,6vw,72px)/.92 Space Grotesk,sans-serif;
    letter-spacing: 0;
}
.cookie-consent__panel p{
    max-width: 58ch;
    margin: 28px 0 0;
    color: #b7c0c2;
    font-size: 14px;
    line-height: 1.7;
}
.cookie-consent__panel .cookie-consent__note{
    margin-top: 12px;
    color: #7f8a8e;
    font-size: 12px;
}
.cookie-consent__policy{
    display: inline-block;
    margin-top: 24px;
    padding-bottom: 5px;
    color: var(--accent-readable);
    border-bottom: 1px solid rgba(var(--accent-readable-rgb),.48);
    font-size: 8px;
    letter-spacing: .12em;
}
.cookie-consent__actions{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 38px;
}
.cookie-consent__actions button,
.cookie-settings{
    appearance: none;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 2px;
    background: rgba(255,255,255,.045);
    color: white;
    cursor: pointer;
    font-size: 8px;
    letter-spacing: .12em;
    transition: border-color .2s,background .2s,color .2s,transform .2s;
}
.cookie-consent__actions button{
    min-height: 48px;
    padding: 14px 16px;
}
.cookie-consent__actions button:hover,
.cookie-consent__actions button:focus-visible,
.cookie-settings:hover,
.cookie-settings:focus-visible{
    border-color: rgba(var(--accent-readable-rgb),.75);
    color: var(--accent-readable);
    outline: 0;
}
.cookie-consent__actions [data-cookie-accept]{
    border-color: var(--accent-readable);
    background: var(--accent-readable);
    color: #050708;
}
.cookie-consent__actions [data-cookie-accept]:hover,
.cookie-consent__actions [data-cookie-accept]:focus-visible{
    background: transparent;
    color: var(--accent-readable);
}
.cookie-settings{
    position: fixed;
    z-index: 71;
    left: 18px;
    bottom: 68px;
    padding: 10px 12px;
    background: rgba(5,7,8,.84);
    backdrop-filter: blur(12px);
}
@keyframes cookieBackdropIn {
    from { opacity: 0; }
}
@keyframes cookiePanelIn {
    from { opacity: 0; transform: translateY(24px) scale(.98); }
}
@media(max-width:700px){
    .cookie-consent{
        place-items: end center;
        padding: 12px;
    }
    .cookie-consent__panel{
        padding: 24px 20px;
    }
    .cookie-consent__header{
        margin-bottom: 28px;
    }
    .cookie-consent__signal{
        display: none;
    }
    .cookie-consent__panel h2{
        font-size: clamp(38px,13vw,56px);
    }
    .cookie-consent__panel p{
        margin-top: 22px;
        font-size: 13px;
    }
    .cookie-consent__actions{
        grid-template-columns: 1fr;
        margin-top: 28px;
    }
    .cookie-consent__actions [data-cookie-accept]{
        grid-row: 1;
    }
    .cookie-settings{
        left: 12px;
        bottom: 12px;
    }
}
@media(prefers-reduced-motion:reduce){
    .cookie-consent,
.cookie-consent__panel{
        animation: none;
    }
}
.skip-link{
    position: fixed;
    z-index: 1001;
    left: 16px;
    top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(var(--accent-readable-rgb),.62);
    background: #050708;
    color: white;
    font-size: 8px;
    letter-spacing: .14em;
    transform: translateY(-160%);
    transition: transform .2s ease;
}
.skip-link:focus{
    transform: translateY(0);
    outline: 0;
}
.cookie-consent__panel a,
.site-footer a{
    color: var(--accent-readable);
    border-bottom: 1px solid rgba(var(--accent-readable-rgb),.45);
}
.document-page,
.system-page{
    min-height: 100vh;
    background: #050708;
    color: white;
}
.document-shell,
.system-shell{
    position: relative;
    z-index: 4;
    width: min(920px, calc(100vw - 40px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 14vh 0 8vh;
}
.document-back,
.document-kicker,
.system-shell > span{
    display: inline-block;
    color: var(--cyan);
    font-size: 9px;
    letter-spacing: .16em;
    margin-bottom: 30px;
}
.document-shell h1,
.system-shell h1{
    margin: 0 0 42px;
    font: 600 clamp(58px, 11vw, 142px)/.82 Space Grotesk, sans-serif;
    letter-spacing: -.07em;
}
.document-shell p,
.system-shell p{
    max-width: 760px;
    margin: 0 0 24px;
    color: #aeb7ba;
    font-size: 17px;
    line-height: 1.75;
}
.document-shell strong,
.document-shell a,
.system-actions a{
    color: white;
}
.document-footer,
.system-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 56px;
    font-size: 9px;
    letter-spacing: .14em;
}
.document-footer a,
.system-actions a{
    border-bottom: 1px solid var(--cyan);
    padding-bottom: 8px;
}
@media(max-width:700px){
    .document-shell,
.system-shell{
        padding: 12vh 0 7vh;
    }
    .document-shell p,
.system-shell p{
        font-size: 15px;
    }
}

/* V38 / smooth video composition */
.case-stage,
.case-media,
.case-copy,
.case-copy > *{
    will-change: auto;
}
.case-stage.is-active{
    will-change: transform, opacity;
}
.case-stage.is-active .case-media{
    will-change: transform, clip-path;
}
.case-stage.is-active .case-copy,
.case-stage.is-active .case-copy > *{
    will-change: transform, opacity;
}
.case-media video{
    transform: translateZ(0) scale(1.025);
}
@media (max-width: 1100px){
    .case-stage,
.case-media,
.case-copy,
.case-copy > *{
        will-change: auto;
    }
}


/* V40 / complete case media and unified active accent */
.process__head em,
.contact h2 em{
    color: var(--accent-readable);
    text-shadow: 0 0 28px rgba(var(--accent-readable-rgb), .18);
}
.process__line i{
    box-shadow: 0 0 24px rgba(var(--accent-readable-rgb), .24);
}
.site-header.is-light .brand strong span,
.site-header.is-light .site-nav a:hover,
.site-header.is-light .site-nav a.is-active{
    color: var(--accent-readable);
}

/* V43 / Brilia sharp portrait presentation */









/* V54 / Manifesto four-word scroll sequence */
.manifesto{
    position: relative;
    height: 410svh;
    isolation: isolate;
}

.manifesto::after{
    content: none;
}
.manifesto__sticky{
    position: sticky;
    z-index: 2;
    top: 0;
    height: 100svh;
    padding: clamp(104px, 11vh, 142px) 6vw clamp(30px, 5vh, 58px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.manifesto__header{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}
.manifesto__index{
    color: #849095;
    font-size: 10px;
    line-height: 1.4;
}
.manifesto__header p{
    width: min(100%, 520px);
    margin: 0;
    color: #a1aaad;
    font-size: 15px;
    line-height: 1.65;
}
.manifesto__words{
    position: relative;
    height: 50svh;
    display: grid;
    place-items: center;
    perspective: 1100px;
}
.manifesto-word{
    position: absolute;
    max-width: calc(100vw - 12vw);
    color: #f4f7f8;
    font-family: Space Grotesk, sans-serif;
    font-size: clamp(39px, 10vw, 180px);
    font-weight: 600;
    line-height: .82;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform-origin: 50% 58%;
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
    text-shadow: 0 0 54px rgba(var(--accent-readable-rgb), .08);
}
.manifesto-word--tone-0{ color: #f4f7f8; }
.manifesto-word--tone-35{
    color: #c6e2e8;
    color: color-mix(in srgb, #f4f7f8 65%, var(--accent-readable) 35%);
}
.manifesto-word--tone-70{
    color: #8ecbd6;
    color: color-mix(in srgb, #f4f7f8 30%, var(--accent-readable) 70%);
}
.manifesto-word--tone-100{ color: var(--accent-readable); }
.manifesto__footer{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    color: #6f7a7e;
    font-size: 9px;
    line-height: 1.5;
}
.manifesto__footer [data-manifesto-progress]{
    color: var(--accent-readable);
    white-space: nowrap;
}
@media (max-width: 1100px){
    .manifesto__sticky{ padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 700px){
    .manifesto{ height: 315svh; }
    .manifesto__sticky{ padding: 104px 20px 26px; }
    .manifesto__header{ display: grid; gap: 18px; }
    .manifesto__header p{ max-width: 36ch; font-size: 13px; line-height: 1.55; }
    .manifesto__words{ height: 42svh; }
    .manifesto-word{ max-width: calc(100vw - 40px); }
    .manifesto__footer{ align-items: flex-end; font-size: 8px; }
    .manifesto__footer > span:first-child{ max-width: 24ch; }
}
@media (max-height: 620px) and (orientation: landscape){
    .manifesto__sticky{ padding-top: 80px; padding-bottom: 18px; }
    .manifesto__header p{ font-size: 12px; }
    .manifesto__words{ height: 40svh; }
}
@media (prefers-reduced-motion: reduce){
    .manifesto{ height: auto; min-height: 100svh; }
    .manifesto__sticky{ position: relative; min-height: 100svh; height: auto; }
    .manifesto__words{ height: auto; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
    .manifesto-word{ position: relative; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* V55 / complete section navigation and mobile menu */
.site-menu-toggle{
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(5,7,8,.5);
    color: #f4f7f8;
    cursor: pointer;
}
.site-menu-toggle span{
    position: absolute;
    left: 10px;
    width: 22px;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform .28s ease, top .28s ease, opacity .2s ease;
}
.site-menu-toggle span:nth-child(1){ top: 14px; }
.site-menu-toggle span:nth-child(2){ top: 21px; }
.site-menu-toggle span:nth-child(3){ top: 28px; }
.site-menu-toggle[aria-expanded="true"] span:nth-child(1){ top: 21px; transform: rotate(45deg); }
.site-menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.site-menu-toggle[aria-expanded="true"] span:nth-child(3){ top: 21px; transform: rotate(-45deg); }

@media (max-width: 1100px){
    body.is-mobile-menu-open{ overflow: hidden; }
    .site-header{ contain: style; grid-template-columns: 1fr auto; }
    .site-header .brand,
.site-menu-toggle{ position: relative; z-index: 2; }
    .site-menu-toggle{ display: block; justify-self: end; }
    .site-header.is-light .site-menu-toggle{
        border-color: rgba(17,23,24,.18);
        background: rgba(242,245,244,.68);
        color: #111718;
    }
    .site-nav{
        display: flex;
        position: fixed;
        z-index: 1;
        inset: 0;
        min-height: 100svh;
        padding: 118px 24px 42px;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        background: rgba(5,7,8,.96);
        backdrop-filter: blur(22px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-16px);
        transition: opacity .3s ease, visibility .3s ease, transform .38s ease;
    }
    .is-mobile-menu-open .site-nav{
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
    .site-nav a,
.site-header.is-light .site-nav a{
        display: flex;
        align-items: center;
        min-height: 84px;
        border-bottom: 1px solid rgba(255,255,255,.12);
        color: #f4f7f8;
        font-family: Space Grotesk, sans-serif;
        font-size: 44px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
        opacity: .58;
    }
    .site-nav a:first-child{ border-top: 1px solid rgba(255,255,255,.12); }
    .site-nav a.is-active,
.site-header.is-light .site-nav a.is-active{ color: var(--accent-readable); opacity: 1; }
    .site-nav a::after{ bottom: -1px; }
}

@media (max-width: 420px){
    .site-nav a,
.site-header.is-light .site-nav a{ min-height: 76px; font-size: 38px; }
}

@media (prefers-reduced-motion: reduce){
    .site-nav,
.site-menu-toggle span{ transition: none; }
}

/* V56 / direct project links, consistent type and structural Brilia grid */
.case-open {
    display: inline-flex;
    width: max-content;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}
.case-copy__index { font-size: 9px; }
.case-copy__role { font-size: 10px; }
.case-copy__meta span { font-size: 9px; }
.case-copy__meta strong { font-size: 11px; }
.work-rail__title,
.work-rail button { font-size: 8px; }

.layout-brilia {
    grid-template-columns: minmax(360px, 1.05fr) minmax(320px, .95fr);
    align-items: center;
}
.layout-brilia .case-media {
    width: min(100%, 630px, calc((100svh - 156px) * 524 / 720));
    height: auto;
    aspect-ratio: 524 / 720;
    justify-self: center;
}
.layout-brilia .case-media video {
    object-fit: cover;
    object-position: center;
    transform: translateZ(0) scale(1.01);
}
.layout-brilia .case-copy {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(100%, 520px);
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
}

@media (max-width: 1100px) {
    .layout-brilia { grid-template-columns: 1fr; gap: 28px; }
    .layout-brilia .case-media {
        width: min(100%, 520px, calc((100svh - 140px) * 524 / 720));
    }
    .layout-brilia .case-copy { width: min(100%, 620px); }
}

@media (max-width: 700px) {
    .layout-brilia { gap: 24px; }
    .layout-brilia .case-media { width: min(100%, 430px); }
    .case-copy__role { line-height: 1.65; }
}

/* V57 / mobile menu contrast and keyboard-safe overlay */
@media (max-width: 1100px){
    .is-mobile-menu-open .site-header.is-light,
    .is-mobile-menu-open .site-header.is-light.is-scrolled{
        background: rgba(5,7,8,.96);
        border-color: rgba(255,255,255,.08);
    }
    .is-mobile-menu-open .site-header.is-light .brand strong{ color: #f4f7f8; }
    .is-mobile-menu-open .site-header.is-light .brand small{ color: rgba(244,247,248,.56); }
    .is-mobile-menu-open .site-header.is-light .site-menu-toggle{
        border-color: rgba(255,255,255,.18);
        background: rgba(5,7,8,.72);
        color: #f4f7f8;
    }
}


/* V57 / privacy control belongs to the mobile navigation surface */
@media (max-width: 1100px){
    .site-nav{ background: #050708; backdrop-filter: none; }
    .site-nav .cookie-settings{
        position: static;
        align-self: flex-start;
        margin-top: 28px;
        min-height: 44px;
    }
}