:root {
    --sky-top: #145786;
    --sky-mid: #68aacf;
    --sky-low: #dceff6;
    --ink: #10283b;
    --ink-soft: rgba(16, 40, 59, .62);
    --glass: rgba(239, 248, 252, .72);
    --glass-strong: rgba(247, 252, 254, .92);
    --line: rgba(255, 255, 255, .55);
    --paper: #f7fbfc;
    --paper-blue: #dcecf3;
    --shadow: rgba(15, 42, 62, .2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { width: 100%; height: 100%; background: var(--sky-mid); }
body {
    width: 100%; height: 100%; overflow: hidden;
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.skip-link {
    position: fixed; z-index: 1200; left: 16px; top: -80px;
    padding: 12px 16px; color: var(--ink); background: #fff;
    text-decoration: none; border-radius: 999px; transition: top .18s ease;
}
.skip-link:focus { top: 16px; }

#sky {
    position: fixed; inset: 0; overflow: hidden; isolation: isolate;
    background:
        radial-gradient(circle at 77% 16%, rgba(255,255,255,.98) 0 .7%, rgba(255,246,213,.58) 2.4%, rgba(255,241,201,.16) 7%, transparent 17%),
        radial-gradient(ellipse at 14% 78%, rgba(231,246,251,.24), transparent 34%),
        linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-low) 100%);
}
#sky::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
        repeating-linear-gradient(168deg, transparent 0 62px, rgba(255,255,255,.018) 68px, transparent 78px),
        linear-gradient(180deg, rgba(18,57,92,.12), transparent 28%, transparent 72%, rgba(255,255,255,.17)),
        radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.32), transparent 52%);
    mix-blend-mode: soft-light;
    animation: upper-wind 24s ease-in-out infinite alternate;
}
#sky::after {
    content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .075;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}
#cloud-canvas {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block;
    cursor: default; touch-action: none;
}
#cloud-canvas.dragging { cursor: grabbing; }

@keyframes upper-wind {
    from { transform: translate3d(-1.2%,0,0) scale(1.025); opacity: .82; }
    to { transform: translate3d(1.2%,-.35%,0) scale(1.035); opacity: 1; }
}

.sky-header {
    position: absolute; z-index: 20; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: max(24px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) 18px max(28px, env(safe-area-inset-left));
    pointer-events: none;
    transition: opacity .25s ease;
}
.brand {
    color: rgba(255,255,255,.92); font-size: 10px; font-weight: 700;
    letter-spacing: .3em; text-shadow: 0 1px 14px rgba(20,64,95,.34);
}
.sky-nav { display: flex; gap: 24px; pointer-events: auto; }
.sky-pill, .sheet-close, .modal-pill {
    appearance: none; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(241,249,252,.18); color: #fff;
    padding: 10px 15px; cursor: pointer;
    font-size: 10px; line-height: 1; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
    box-shadow: inset 0 1px rgba(255,255,255,.24), 0 8px 30px rgba(17,57,87,.08);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.sky-pill {
    position: relative; padding: 6px 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
    color: rgba(255,255,255,.82); font-size: 9px; letter-spacing: .17em;
}
.sky-pill::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
    background: rgba(255,255,255,.9); transition: right .22s ease;
}
.sky-pill:hover, .sky-pill:focus-visible { background: transparent; transform: none; color: #fff; }
.sky-pill:hover::after, .sky-pill:focus-visible::after { right: 0; }
.nav-count { margin-left: 3px; font-size: 7px; letter-spacing: .08em; vertical-align: super; opacity: .72; }

#cloud-buttons { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cloud-a11y {
    position: absolute; pointer-events: none; border: 0; background: transparent;
    border-radius: 48%; color: transparent; min-width: 44px; min-height: 44px;
}
.cloud-a11y:focus-visible {
    color: transparent; outline: 1px solid rgba(255,255,255,.9); outline-offset: 6px;
    box-shadow: 0 0 0 8px rgba(255,255,255,.08), 0 0 40px rgba(255,255,255,.28);
}

#active-readout {
    position: absolute; z-index: 18; left: -1000px; top: -1000px;
    transform: translate(-50%, 4px); display: flex; align-items: baseline; white-space: nowrap;
    padding: 7px 10px; border: 1px solid rgba(255,255,255,.34); border-radius: 3px;
    background: rgba(17,53,78,.56); color: #fff; opacity: 0; pointer-events: none;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 7px 24px rgba(20,58,87,.12);
    transition: opacity .14s ease, transform .18s ease;
    text-shadow: 0 1px 12px rgba(17,52,78,.34);
}
#active-readout.show { opacity: 1; transform: translate(-50%, 0); }
#readout-count, #readout-client { display: none; }
#readout-title { font-size: 9px; line-height: 1; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }

#sky-hint {
    position: absolute; z-index: 16; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
    padding: 8px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
    background: rgba(243,250,252,.56); color: rgba(16,40,59,.76);
    font-size: 9px; line-height: 1; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
    box-shadow: 0 6px 22px rgba(17,52,78,.08);
    transition: opacity .5s ease;
}
#sky-hint.quiet { opacity: 0; }
.hint-touch { display: none; }
#sky-hint i { margin: 0 7px; font-style: normal; opacity: .42; }
#poof-flash {
    position: absolute; z-index: 15; width: 80px; height: 80px; left: 50%; top: 50%;
    border: 0; border-radius: 50%; opacity: 0; filter: blur(4px);
    background: radial-gradient(circle,rgba(255,255,255,.46),rgba(255,255,255,.12) 38%,transparent 72%);
    transform: translate(-50%,-50%) scale(.65); pointer-events: none;
}
#poof-flash.go { animation: poof-ring .34s cubic-bezier(.12,.72,.2,1) both; }
@keyframes poof-ring {
    0% { opacity: .52; transform: translate(-50%,-50%) scale(.65); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.15); }
}

#loading-note {
    position: absolute; z-index: 22; left: 50%; top: 50%; transform: translate(-50%,-50%);
    color: rgba(255,255,255,.88); font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
    transition: opacity .5s ease;
}
#loading-note.done { opacity: 0; pointer-events: none; }
#intro-skip {
    position: absolute; z-index: 23; right: max(24px,env(safe-area-inset-right));
    bottom: max(20px,env(safe-area-inset-bottom)); appearance: none; border: 0;
    padding: 7px 0; background: transparent; color: rgba(255,255,255,.68);
    cursor: pointer; font: 600 8px/1 Inter,sans-serif; letter-spacing: .15em;
    text-transform: uppercase; text-shadow: 0 1px 12px rgba(17,52,78,.35);
    transition: opacity .25s ease, color .2s ease;
}
#intro-skip:hover, #intro-skip:focus-visible { color: #fff; }
body:not(.cloud-intro) #intro-skip { opacity: 0; visibility: hidden; pointer-events: none; }

/* Static no-WebGL fallback uses the same exact names, never blank canvas. */
#sky-fallback { position: absolute; inset: 0; z-index: 1; overflow: auto; padding: 92px 18px 80px; }
#sky-fallback[hidden] { display: none; }
.fallback-sun {
    position: fixed; top: -80px; right: -50px; width: 320px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,247,214,.3) 24%, transparent 68%);
}
#fallback-clouds { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px 14px; max-width: 1100px; margin: auto; }
.fallback-cloud {
    appearance: none; border: 0; cursor: pointer; min-height: 140px; padding: 28px 14px;
    color: rgba(255,255,255,.96); text-align: center; font: 400 clamp(21px,3vw,42px)/.94 "Archivo Black", sans-serif;
    text-transform: uppercase; letter-spacing: -.04em;
    background:
        radial-gradient(ellipse at 50% 54%, rgba(255,255,255,.97) 0 20%, rgba(242,247,249,.72) 44%, transparent 73%);
    filter: drop-shadow(0 10px 10px rgba(31,74,104,.16)); text-shadow: 0 2px 7px rgba(87,129,153,.18);
}
.fallback-cloud small { display: block; margin-top: 12px; font: 600 8px/1 Inter,sans-serif; letter-spacing: .18em; opacity: .62; }

/* Index/About sheets */
.sheet {
    position: fixed; inset: 0; z-index: 500; overflow: auto; overscroll-behavior: contain;
    background: rgba(228,241,247,.94); color: var(--ink);
    transform: translateY(105%); visibility: hidden;
    transition: transform .55s cubic-bezier(.2,.78,.2,1), visibility 0s linear .55s;
}
.sheet.open { transform: none; visibility: visible; transition-delay: 0s; }
.sheet-sky {
    position: fixed; inset: 0; pointer-events: none; opacity: .56;
    background:
        radial-gradient(ellipse at 75% 2%, rgba(255,255,255,.9), transparent 30%),
        linear-gradient(180deg, rgba(111,180,220,.48), rgba(247,251,252,.72) 45%, #f7fbfc 100%);
}
.sheet-inner { position: relative; width: min(1180px,100%); min-height: 100%; margin: auto; padding: 34px clamp(20px,5vw,72px) 80px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 48px; }
.sheet-kicker { display: block; margin-bottom: 12px; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.sheet h1 { font: 400 clamp(38px,7vw,88px)/.92 "Archivo Black", sans-serif; letter-spacing: -.055em; text-transform: uppercase; max-width: 850px; }
.sheet-close { color: var(--ink); background: rgba(255,255,255,.44); border-color: rgba(17,44,63,.14); flex: none; }
.sheet-close:hover { background: rgba(255,255,255,.8); }
.index-list { border-top: 1px solid rgba(17,44,63,.18); }
.index-row {
    width: 100%; display: grid; grid-template-columns: 58px minmax(0,1fr) minmax(120px,.42fr) 24px;
    gap: 20px; align-items: center; padding: 17px 3px;
    appearance: none; border: 0; border-bottom: 1px solid rgba(17,44,63,.16); background: transparent;
    color: var(--ink); text-align: left; cursor: pointer; transition: padding .2s ease, background .2s ease;
}
.index-row:hover, .index-row:focus-visible { padding-left: 13px; padding-right: 13px; background: rgba(255,255,255,.44); }
.index-num, .index-client { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.index-name { font: 400 clamp(19px,2.4vw,32px)/1 "Archivo Black", sans-serif; letter-spacing: -.035em; text-transform: uppercase; }
.index-arrow { font-size: 18px; text-align: right; }

#cloud-index {
    inset: 0 0 0 auto; width: min(560px,100%);
    transform: translateX(105%); background: rgba(235,246,250,.96);
    box-shadow: -26px 0 80px rgba(18,55,80,.16);
    transition: transform .48s cubic-bezier(.2,.78,.2,1), visibility 0s linear .48s;
}
#cloud-index.open { transform: none; visibility: visible; transition-delay: 0s; }
#cloud-index .sheet-sky { position: absolute; inset: 0; }
#cloud-index .sheet-inner { padding: 30px 30px 56px; }
#cloud-index .sheet-head { align-items: center; margin-bottom: 28px; }
#cloud-index .sheet-kicker { margin-bottom: 7px; }
#cloud-index h1 { font-size: clamp(42px,5vw,62px); }
#cloud-index .index-row { grid-template-columns: 38px minmax(0,1fr) 22px; gap: 11px; padding: 12px 2px; }
#cloud-index .index-client { display: none; }
#cloud-index .index-name { font-size: clamp(17px,2vw,22px); }

.about-inner { width: min(1260px,100%); }
.about-grid { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(420px,1.28fr); gap: clamp(42px,8vw,120px); }
.about-lead { position: sticky; top: 34px; align-self: start; }
#about-role { font: 400 clamp(26px,4vw,48px)/1.02 "Archivo Black",sans-serif; text-transform: uppercase; letter-spacing: -.045em; }
#about-bio { margin-top: 22px; max-width: 470px; font-size: clamp(16px,1.5vw,20px); line-height: 1.55; color: var(--ink-soft); }
.about-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.about-links a { color: var(--ink); border: 1px solid rgba(17,44,63,.18); border-radius: 999px; padding: 10px 14px; text-decoration: none; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.4); }
.exp-row { display: grid; grid-template-columns: 135px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid rgba(17,44,63,.16); }
.exp-date { font-size: 9px; line-height: 1.45; letter-spacing: .13em; color: var(--ink-soft); }
.exp-role { font-weight: 700; font-size: 14px; }
.exp-company { margin-left: 7px; color: var(--ink-soft); }
.exp-detail { margin-top: 7px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

/* Case study */
#project-modal {
    position: fixed; inset: 0; z-index: 700; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: transparent;
    color: #163044;
    opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: opacity .38s ease, transform .5s cubic-bezier(.2,.78,.2,1), visibility 0s linear .5s;
}
#project-modal.open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
#modal-atmosphere {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .985;
    background: url("cloudbank-assets/project-cloud-island-desktop-v1.webp") center / auto 112% no-repeat;
    transform: translate3d(-.2%,.45%,0) scale(.992);
    animation: modal-cloud-float 18s ease-in-out infinite alternate; animation-play-state: paused;
}
#project-modal.open #modal-atmosphere { animation-play-state: running; }
@keyframes modal-cloud-float {
    to { transform: translate3d(.4%,-.45%,0) scale(1.004); }
}
.project-card {
    position: relative; z-index: 1; isolation: isolate;
    width: min(1020px,calc(100% - clamp(100px,18vw,260px))); min-height: 100dvh;
    margin: 0 auto;
    padding: clamp(104px,14vh,148px) clamp(16px,3vw,36px) clamp(118px,16vh,172px);
    background: none; border: 0; border-radius: 0; box-shadow: none;
}
.project-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(42px,7vh,78px); }
.modal-kicker, #modal-footkick { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(22,48,68,.58); }
.modal-pill { color: #163044; background: rgba(222,239,246,.62); border-color: rgba(22,48,68,.14); }
.modal-pill:hover { background: rgba(255,255,255,.96); }
#project-modal button:focus-visible, #project-modal a:focus-visible { outline-color: #163044; }
.project-intro { max-width: 880px; margin-bottom: 52px; }
.client-chip { display: inline-block; margin-bottom: 13px; font-size: 9px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
#modal-title { font: 400 clamp(48px,9vw,120px)/.86 "Archivo Black",sans-serif; letter-spacing: -.065em; text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
#modal-desc { max-width: 740px; margin-top: 25px; font-size: clamp(17px,2vw,23px); line-height: 1.48; color: rgba(22,48,68,.75); }
#modal-content { display: grid; gap: clamp(54px,7vw,86px); }
.case-section { display: grid; gap: 20px; }
.case-section > h2 { font: 400 clamp(25px,3.5vw,45px)/1 "Archivo Black",sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.case-copy { max-width: 780px; font-size: 15px; line-height: 1.65; color: rgba(22,48,68,.72); }
.media-grid { display: grid; gap: 12px; }
.media-grid.row-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.media-grid.row-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.media-grid.row-match, .media-grid.split { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.media-grid img { display: block; width: 100%; height: 100%; max-height: 82vh; object-fit: cover; background: #d4e5eb; border: 1px solid rgba(170,208,225,.36); border-radius: 18px; box-shadow: 0 18px 52px rgba(22,62,87,.12); }
.media-grid.full img { height: auto; object-fit: contain; }
.video-wrap { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #173143; border: 1px solid rgba(170,208,225,.36); border-radius: 18px; box-shadow: 0 18px 52px rgba(22,62,87,.16); }
.video-wrap.vertical { aspect-ratio: 9/16; max-height: 82vh; width: min(100%,480px); margin-inline: auto; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-title, .audio-title { margin-bottom: 8px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(22,48,68,.62); }
.video-stack, .audio-stack { display: grid; gap: 18px; }
.audio-row { padding: 18px; background: rgba(224,240,247,.5); border: 1px solid rgba(22,48,68,.1); border-radius: 18px; }
.audio-row audio { width: 100%; }
.credits { border-top: 1px solid rgba(22,48,68,.16); padding-top: 20px; font-size: 11px; line-height: 1.65; color: rgba(22,48,68,.62); }
.project-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 76px; padding-top: 26px; border-top: 1px solid rgba(22,48,68,.16); }

.noscript { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 30px; background: #e5f3f8; color: #173143; }
body.layer-open #sky { pointer-events: none; }
body.layer-open .sky-header,
body.layer-open #sky-hint,
body.layer-open #active-readout { opacity: 0; pointer-events: none; }

/* The opener is part of the weather, not a separate splash layer. Keep the
 * small navigation wordmark out of sight while its full cloud counterpart is
 * condensing, then let the existing transitions bring the interface in. */
body.cloud-intro .sky-header {
    opacity: 0; visibility: hidden; pointer-events: none;
}
body.cloud-intro .sky-nav { pointer-events: none; }
body.cloud-intro #sky-hint,
body.cloud-intro #active-readout { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    body.cloud-intro .sky-header { opacity: 1; visibility: visible; pointer-events: none; }
    body.cloud-intro .sky-nav { pointer-events: auto; }
    body.cloud-intro #intro-skip { display: none; }
}

@media (max-width: 760px) {
    .sky-header { padding: max(16px,env(safe-area-inset-top)) 14px 12px; }
    .brand { font-size: 9px; letter-spacing: .25em; }
    .sky-nav { gap: 18px; }
    .sky-pill { padding: 6px 0; font-size: 8px; }
    #sky-hint { left: 50%; right: auto; width: calc(100% - 28px); text-align: center; bottom: max(17px,env(safe-area-inset-bottom)); line-height: 1.45; }
    .hint-desktop { display: none; }
    .hint-touch { display: inline; }
    #active-readout { max-width: calc(100% - 24px); }
    #intro-skip { right: max(14px,env(safe-area-inset-right)); }
    #fallback-clouds { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 8px; }
    .fallback-cloud { min-height: 116px; font-size: clamp(18px,6.5vw,30px); }
    .sheet-inner { padding: 22px 15px 64px; }
    .sheet-head { margin-bottom: 34px; }
    .sheet h1 { font-size: clamp(37px,12vw,68px); }
    .index-row { grid-template-columns: 34px minmax(0,1fr) 18px; gap: 10px; padding: 15px 2px; }
    .index-client { display: none; }
    .index-name { font-size: clamp(17px,5vw,25px); }
    .about-grid { grid-template-columns: 1fr; }
    .about-lead { position: static; }
    .exp-row { grid-template-columns: 98px 1fr; gap: 14px; }
    .project-card {
        width: calc(100% - 58px); min-height: 100dvh; margin: 0 auto;
        padding: 94px 0 116px;
    }
    #modal-atmosphere {
        background-image: url("cloudbank-assets/project-cloud-island-mobile-v1.webp");
        background-size: auto 94%;
    }
    .project-topbar { margin-bottom: 48px; }
    #modal-title { font-size: clamp(46px,15vw,84px); }
    .media-grid.row-2, .media-grid.row-3, .media-grid.row-match, .media-grid.split { grid-template-columns: 1fr; }
    .project-footer { flex-wrap: wrap; justify-content: center; }
    #cloud-index .sheet-inner { padding: 22px 15px 54px; }
    #cloud-index .sheet-head { gap: 12px; align-items: flex-start; }
    #cloud-index h1 { font-size: 36px; }
}

@media (pointer: coarse) {
    .hint-desktop { display: none; }
    .hint-touch { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    #sky-hint { display: none; }
}