:root{--paper:#101d3c;--ink:#f2f3ed;--line:#45608b;--acid:#7e9df8}
body{background:#101d3c;color:#f2f3ed}
.top.selected-top{height:74px;padding:0 4%;border-bottom:1px solid #49618f;background:#101d3c}
.selected-top .identity{font:800 13px/1 Arial,sans-serif;letter-spacing:.13em}
.selected-top nav{font:12px/1 Arial,sans-serif;gap:27px}
.selected-top nav a:hover{color:#9db5ff}
.selected-hero{height:440px;min-height:440px;padding:0;position:relative;overflow:hidden;background:#101d3c;border-bottom:1px solid #49618f;isolation:isolate}
.selected-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#101d3c 0%,#101d3c8a 46%,transparent 80%);pointer-events:none}
.selected-hero .hero-visual{position:absolute;inset:0;z-index:-2}
.selected-hero .hero-visual img{position:absolute;width:285px;height:auto;top:15%;right:14%;max-width:none;filter:drop-shadow(0 22px 35px #030d2b55);animation:hero-drift 9s ease-in-out infinite}
.selected-hero .hero-visual:after{content:'';position:absolute;right:11%;top:11%;width:340px;height:300px;border-top:1px solid #809cdd55;border-right:1px solid #809cdd55;transform:skew(-9deg)}
.selected-hero .hero-content{height:100%;display:flex;flex-direction:column;justify-content:flex-start;gap:35px;padding:5% 6% 10%;position:relative;z-index:1}
.selected-hero .hero-topline{font:700 12px/1.4 Arial,sans-serif;letter-spacing:.22em;border-top:1px solid #b4c8f76e;padding-top:15px;max-width:330px}
.selected-hero .hero-topline span{margin-left:30px;color:#aac2ff}
.selected-hero h1{font:800 clamp(35px,3.7vw,54px)/.95 Arial,sans-serif;letter-spacing:-.045em;white-space:normal;margin:0 0 20px}
.selected-hero .period{color:#5e8bff}
.selected-hero .hero-identity p{font:10px/1.8 Arial,sans-serif;letter-spacing:.14em;border-left:2px solid #5e8bff;padding-left:16px}
.selected-hero .hero-scroll{position:absolute;right:6%;bottom:6%;display:flex;gap:18px;align-items:center;font:10px/1 Arial,sans-serif;letter-spacing:.16em;z-index:2}
.selected-hero .hero-scroll span{font-size:24px;letter-spacing:0}
@keyframes hero-drift{50%{transform:translateY(-7px)}}

.work{grid-template-columns:32% 68%;border-color:#49618f}
.project-index{background:#1c2d56;border-right:1px solid #49618f}
.index-heading,.index-bottom{border-color:#49618f}
.index-heading h2{font:400 23px/1.1 Arial,sans-serif;letter-spacing:-.04em}
.filters button.active{background:#4776ef;color:#fff}
.filters button:hover{border-color:#7797e0}
.project-row{border-color:#49618f;color:#f2f3ed;transition:background .25s,color .25s}
.project-row small{color:inherit;opacity:.7}
.project-row.active,.project-row.active:hover{background:var(--campaign-row);color:var(--campaign-bg);font-family:var(--campaign-font);font-weight:var(--campaign-weight)}
.project-row.active strong{font-weight:var(--campaign-weight)}
.project-row.active small{opacity:1}
.stage{background:var(--campaign-bg)!important;color:var(--campaign-fg)!important;min-height:680px;--accent:var(--campaign-accent)}
.stage:after{content:'';position:absolute;width:260px;height:260px;border:27px solid var(--campaign-accent);border-radius:50%;right:-60px;top:-85px;opacity:.23;z-index:-1;pointer-events:none}
.stage[data-project=lego]:after,.stage[data-project=bk]:after{border-radius:23px;transform:rotate(16deg)}
.stage[data-project=lo]:after{border-width:2px;width:420px;height:420px}
.stage-tint{background:linear-gradient(90deg,#081124ce,transparent 85%)}
.stage-top,.stage-bottom{color:var(--campaign-fg)}
.stage h2{font-family:var(--campaign-font);font-weight:var(--campaign-weight);letter-spacing:-.06em}
.stage h2 em{color:var(--campaign-accent)}
.stage-copy>p:first-child{color:var(--campaign-accent)}
.art-button,.stage.landscape .art-button{background:transparent;border-color:var(--campaign-accent)}
.art-button img,.stage.landscape .art-button img{filter:drop-shadow(0 18px 30px #0005)}
.open-project:hover,.stage-controls button:hover{color:var(--campaign-bg)}
.stage-controls button:hover{background:var(--campaign-accent)}

:is(.project-row,.stage,#case-dialog)[data-project=oreo]{--campaign-bg:#0c2f5d;--campaign-fg:#fff;--campaign-accent:#a6dafa;--campaign-row:#a6dafa;--campaign-font:'Trebuchet MS',Arial,sans-serif;--campaign-weight:900}
:is(.project-row,.stage,#case-dialog)[data-project=lego]{--campaign-bg:#ed1c24;--campaign-fg:#fff;--campaign-accent:#ffe500;--campaign-row:#ffe500;--campaign-font:'Arial Black',Impact,sans-serif;--campaign-weight:900}
:is(.project-row,.stage,#case-dialog)[data-project=cafe]{--campaign-bg:#342b31;--campaign-fg:#fff8e5;--campaign-accent:#d9bc85;--campaign-row:#d9bc85;--campaign-font:Georgia,serif;--campaign-weight:400}
:is(.project-row,.stage,#case-dialog)[data-project=bk]{--campaign-bg:#873723;--campaign-fg:#fff4e4;--campaign-accent:#ffcc77;--campaign-row:#ffcc77;--campaign-font:'Arial Black',Impact,sans-serif;--campaign-weight:900}
:is(.project-row,.stage,#case-dialog)[data-project=lo]{--campaign-bg:#153d6b;--campaign-fg:#fff;--campaign-accent:#dce66d;--campaign-row:#dce66d;--campaign-font:Georgia,serif;--campaign-weight:400}
:is(.project-row,.stage,#case-dialog)[data-project=book]{--campaign-bg:#294f65;--campaign-fg:#f8f4e6;--campaign-accent:#e8d0a1;--campaign-row:#e8d0a1;--campaign-font:Georgia,serif;--campaign-weight:400}
:is(.project-row,.stage,#case-dialog)[data-project=harry]{--campaign-bg:#4b2823;--campaign-fg:#fff5e7;--campaign-accent:#e9ad71;--campaign-row:#e9ad71;--campaign-font:Georgia,serif;--campaign-weight:700}
:is(.project-row,.stage,#case-dialog)[data-project=flyer]{--campaign-bg:#43302b;--campaign-fg:#fff4e9;--campaign-accent:#e5c7b2;--campaign-row:#e5c7b2;--campaign-font:Arial,sans-serif;--campaign-weight:700}
:is(.project-row,.stage,#case-dialog)[data-project=adia]{--campaign-bg:#34342b;--campaign-fg:#fbf2d8;--campaign-accent:#dec667;--campaign-row:#dec667;--campaign-font:Georgia,serif;--campaign-weight:700}
:is(.project-row,.stage,#case-dialog)[data-project=calabaza]{--campaign-bg:#3c234b;--campaign-fg:#fff2fb;--campaign-accent:#e9a5dd;--campaign-row:#e9a5dd;--campaign-font:'Arial Black',Impact,sans-serif;--campaign-weight:900}

#case-dialog{background:#edf1f8;color:#14264b}
#case-dialog .case-header,#case-dialog .case-info{background:var(--campaign-bg);color:var(--campaign-fg);border-color:#ffffff55}
#case-dialog .case-info h2{font-family:var(--campaign-font);font-weight:var(--campaign-weight)}
#case-dialog .case-info h2 em,#case-dialog .case-category{color:var(--campaign-accent)}
#case-dialog .case-tabs,#case-dialog .case-project-nav{border-color:#ffffff66}
#case-dialog .case-tabs button[aria-selected=true]{border-color:var(--campaign-accent)}
#case-dialog #case-source{color:var(--campaign-fg);opacity:.72}
#case-dialog .case-gallery{background:#dbe3f1}

.learning{background:#e8edf7;color:#14264b;grid-template-columns:minmax(245px,.85fr) minmax(0,2.15fr);gap:6%;padding:100px 5% 115px;border:0}
.learning-heading h2 em{color:#3157d5}
.learning-heading>p:not(.eyebrow),.learning-note{color:#566782}
.learning-count,.certificate-filters{border-color:#a8b8d7}
.certificate-filters button{border-color:#a8b8d7;color:#14264b}
.certificate-filters button[aria-pressed=true]{background:#1948c8;color:#fff;border-color:#1948c8}
.certificate-card{background:#f8f9fd;border-color:#ccd5e8;color:#14264b}
.certificate-card:hover{background:#fff;border-color:#1948c8}
.certificate-number,.certificate-meta small{color:#586880}
.certificate-art{background:#fff}
#certificate-dialog{background:#f1f4fa;color:#14264b}
#certificate-dialog .certificate-dialog-art{background:#dbe3f1}

.selected-contact{background:#101d3c;color:#f1f4f5;padding:90px 6% 110px;display:grid;grid-template-columns:34% 1fr;gap:5%}
.selected-contact .contact-intro,.selected-contact .contact-links{display:block}
.selected-contact h2{font:400 clamp(55px,6.5vw,110px)/1 Arial,sans-serif;letter-spacing:-.065em;margin:24px 0}
.selected-contact .contact-links{border-top:1px solid #6581bd}
.selected-contact .contact-links a{display:grid;grid-template-columns:120px 1fr 35px;align-items:center;gap:22px;padding:25px 0;border-bottom:1px solid #6581bd;transition:padding-left .2s,color .2s}
.selected-contact .contact-links a:hover{padding-left:10px;color:#92aeff}
.selected-contact .contact-icon{display:block;width:100px;height:100px;color:#7e9df8}
.selected-contact .contact-icon svg{width:100%;height:100%}
.selected-contact .contact-label{display:flex;flex-direction:column;gap:7px;min-width:0}
.selected-contact .contact-label small{font:10px/1 Arial,sans-serif;letter-spacing:.15em}
.selected-contact .contact-label strong{font:700 clamp(21px,2.6vw,42px)/1.1 Arial,sans-serif;letter-spacing:-.04em}
.selected-contact .contact-label>span{font:12px/1.4 Arial,sans-serif;overflow-wrap:anywhere}
.selected-contact .contact-links b{font:400 25px/1 Arial,sans-serif;justify-self:end}
footer{border-top:1px solid #45608b}

@media(max-width:1000px){.selected-contact{grid-template-columns:1fr}.selected-contact h2{margin:16px 0 20px}.certificate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.top.selected-top{height:70px;padding:0 5%}.selected-top .identity{font-size:10px}.selected-top nav{gap:14px;font-size:10px}.selected-hero{height:490px;min-height:490px}.selected-hero .hero-content{padding:8% 6% 18%;gap:26px}.selected-hero h1{font-size:clamp(32px,10vw,43px)}.selected-hero .hero-identity p{font-size:9px;max-width:220px}.selected-hero .hero-visual img{width:min(47vw,205px);right:3%;top:auto;bottom:17%;opacity:.86}.selected-hero .hero-visual:after{display:none}.selected-hero .hero-scroll{bottom:4%}.work{display:flex;flex-direction:column}.project-index{order:1;height:auto;max-height:none;overflow:visible}.stage{order:2;min-height:660px}.learning{grid-template-columns:1fr;padding:70px 6% 85px;gap:35px}.selected-contact{padding:75px 6% 95px}.selected-contact .contact-links a{grid-template-columns:70px 1fr 22px;gap:12px}.selected-contact .contact-icon{width:62px;height:62px}}
@media(max-width:450px){.selected-top nav{gap:9px}.selected-top .identity{font-size:9px;letter-spacing:.08em}.selected-hero .hero-topline{font-size:10px}.selected-contact .contact-label strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){.selected-hero .hero-visual img{animation:none}.selected-contact .contact-links a{transition:none}}