.portfolio-section{overflow:hidden;background:linear-gradient(180deg,#fff,#f3f6fc);padding-bottom:70px}
.portfolio-heading{display:grid;grid-template-columns:1.35fr 1fr;gap:70px;align-items:end;margin-bottom:43px}
.portfolio-heading h2{font-size:clamp(36px,3.8vw,55px);line-height:1.12}
.portfolio-heading h2 span{color:#667ca6}
.portfolio-intro>p{font-size:17px;line-height:1.8;color:#67758e;max-width:445px}
.portfolio-controls{display:none;align-items:center;gap:9px;margin-top:24px;flex-wrap:wrap}
.portfolio-ready .portfolio-controls{display:flex}
.portfolio-control{min-height:43px;padding:10px 15px;border:1px solid #d8e1f0;background:#fff;border-radius:8px;color:#546989;font-size:13px;font-weight:500;line-height:1.4;transition:background .2s,border-color .2s}
.portfolio-control:hover{background:#eaf0ff;border-color:#9fb4e5;color:#2e50a0}
.portfolio-pause{min-width:140px;color:#254fba;background:#edf3ff;border-color:#d7e4ff}
.portfolio-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:22px 0 32px;overscroll-behavior-x:contain;outline-offset:-5px;-webkit-overflow-scrolling:touch}
.portfolio-viewport::-webkit-scrollbar{display:none}
.portfolio-track{display:flex;width:max-content;padding-left:max(28px,calc((100vw - 1240px)/2));align-items:stretch}
.portfolio-group{display:flex;gap:26px;padding-right:26px;flex:none;align-items:stretch}
.portfolio-card{--tone-top:#edf3ff;--tone-bottom:#dce7f6;display:flex;flex-direction:column;flex:0 0 clamp(370px,41vw,585px);width:clamp(370px,41vw,585px);padding:0;text-align:left;background:linear-gradient(145deg,var(--tone-top),var(--tone-bottom));border:1px solid #dae2ef;border-radius:19px;overflow:hidden;transition:box-shadow .25s,transform .25s;box-shadow:0 5px 18px #24437608}
.portfolio-card:hover,.portfolio-card:focus-visible{box-shadow:0 18px 44px #2443761a;transform:translateY(-5px)}
.portfolio-card-kicker{display:block;font-size:12px;letter-spacing:.11em;font-weight:600;text-transform:uppercase;color:#607188;padding:26px 29px 0}
.portfolio-stage{display:flex;align-items:center;padding:25px 28px 34px;min-width:0;flex:1}
.portfolio-browser{width:100%;border:1px solid #24395a2e;border-radius:9px;overflow:hidden;background:#fff;box-shadow:0 17px 27px #15254026,0 2px 4px #1525400d}
.portfolio-browser-bar{height:27px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 12px;background:#fff;border-bottom:1px solid #e6eaf1;color:#8d98ad;font-size:9px;line-height:1;font-family:'DM Sans',Arial,sans-serif}
.browser-dots{display:flex;gap:4px;min-width:28px}
.browser-dots i{width:4px;height:4px;background:#c6d1e1;border-radius:50%}
.browser-mark{font-size:10px;font-weight:700;color:#94a4bf;min-width:28px;text-align:right}
.portfolio-screen{position:relative;aspect-ratio:var(--screen-ratio);overflow:hidden;background:#e8edf5}
.portfolio-screen img{display:block;position:absolute;max-width:none;width:var(--screen-width);height:var(--screen-height);left:var(--screen-left);top:var(--screen-top);margin:0!important;border-radius:0!important}
.portfolio-card-foot{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 27px 24px;border-top:1px solid #ffffff9e;background:#ffffffa3}
.portfolio-card-foot h3{font-size:20px;line-height:1.4;letter-spacing:-.035em;font-weight:650;max-width:340px;color:#1d2c47}
.portfolio-card-foot>div>span{display:block;font-size:12px;line-height:1.6;color:#8291a8;margin-top:4px}
.portfolio-open{font-size:12px;line-height:1.5;color:#4f6a99;font-weight:500;white-space:nowrap;border-bottom:1px solid #b7c7e1;padding-bottom:3px}
.tone-rose{--tone-top:#fff4f6;--tone-bottom:#ead4e0}
.tone-blue{--tone-top:#ebf0ff;--tone-bottom:#cadbf4}
.tone-lilac{--tone-top:#f8f1ff;--tone-bottom:#ded1eb}
.tone-mint{--tone-top:#ecfaf7;--tone-bottom:#c8e5df}
.tone-sand{--tone-top:#fff6eb;--tone-bottom:#edddcb}
.tone-slate{--tone-top:#eaf0f9;--tone-bottom:#bacde5}
.tone-sage{--tone-top:#f1f8eb;--tone-bottom:#d7e6cb}
.tone-gold{--tone-top:#f8f5e7;--tone-bottom:#e4dfc8}
.portfolio-bottom{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:18px;border-top:1px solid #dfe6f1;padding-top:30px}
.portfolio-bottom p{font-size:17px;line-height:1.75;color:#7d89a0}
.portfolio-bottom p strong{font-weight:500;color:#344966}
.portfolio-project-modal{max-width:1120px}
.portfolio-project-modal .dialog-content h2{margin-bottom:9px;font-size:34px}
.portfolio-project-modal .portfolio-project-industry{font-size:14px;color:#6880a6;margin-bottom:27px}
.portfolio-project-modal .portfolio-browser{margin:24px 0 27px}
.portfolio-project-modal .portfolio-browser-bar{height:33px;font-size:11px}
.portfolio-project-modal .portfolio-project-description{font-size:16px;line-height:1.8;color:#65758e;margin:0 0 25px;max-width:800px}
@media(max-width:1000px){.portfolio-heading{gap:35px;grid-template-columns:1.25fr 1fr}.portfolio-heading h2{font-size:40px}.portfolio-intro>p{font-size:16px}.portfolio-track{padding-left:32px}.portfolio-card{flex-basis:510px;width:510px}.portfolio-card-foot h3{font-size:19px}}
@media(max-width:800px){.portfolio-heading{display:block;margin-bottom:26px}.portfolio-heading h2{font-size:43px}.portfolio-intro{margin-top:25px}.portfolio-intro>p{max-width:560px}.portfolio-controls{margin-top:20px}.portfolio-section{padding-bottom:54px}}
@media(max-width:600px){.portfolio-heading h2{font-size:36px}.portfolio-track{padding-left:20px}.portfolio-group{gap:16px;padding-right:16px}.portfolio-card{flex-basis:86vw;width:86vw;border-radius:15px}.portfolio-card-kicker{font-size:10px;letter-spacing:.08em;padding:21px 20px 0}.portfolio-stage{padding:20px 16px 26px}.portfolio-browser-bar{height:22px;padding:0 9px;font-size:8px}.portfolio-card-foot{padding:19px 20px 21px;gap:10px;display:block}.portfolio-card-foot h3{font-size:20px}.portfolio-card-foot>div>span{font-size:12px}.portfolio-open{display:inline-block;margin-top:15px;font-size:12px}.portfolio-controls{gap:7px}.portfolio-control{font-size:12px;padding:10px 13px}.portfolio-pause{min-width:130px}.portfolio-viewport{padding-top:14px;padding-bottom:25px}.portfolio-bottom{display:block;margin-top:10px;padding-top:24px}.portfolio-bottom p{font-size:16px}.portfolio-bottom .btn{margin-top:23px}.portfolio-project-modal .dialog-content h2{font-size:27px}.portfolio-project-modal .portfolio-browser-bar{height:25px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.portfolio-card{transition:none}.portfolio-card:hover,.portfolio-card:focus-visible{transform:none}}
.portfolio-project-modal .portfolio-screen img{width:var(--screen-width);height:var(--screen-height);max-width:none}

/* A cinematic presentation for the new original design collection. */
.portfolio-section{background:radial-gradient(ellipse at 80% 0%,#192744 0%,transparent 50%),#0b1120;color:#fff;padding-top:105px;padding-bottom:64px}
.portfolio-heading{grid-template-columns:1.2fr 1fr;gap:85px;margin-bottom:33px}
.portfolio-heading .eyebrow{color:#8baeff;letter-spacing:.13em}
.portfolio-heading h2{font-size:clamp(40px,4.5vw,64px);letter-spacing:-.055em;line-height:1.08}
.portfolio-heading h2 span{color:#9cbcf8}
.portfolio-intro>p{color:#b1bdd3;font-size:17px;max-width:480px}
.portfolio-control{background:#ffffff07;border-color:#354159;color:#c4d0e7;font-size:14px}
.portfolio-control:hover{background:#263653;border-color:#647fad;color:#fff}
.portfolio-pause{background:#293d65;border-color:#445e8e;color:#e6eeff}
.portfolio-group{gap:28px;padding-right:28px}
.portfolio-card{flex-basis:clamp(500px,49vw,730px);width:clamp(500px,49vw,730px);background:#f9fbff;border-color:#a2b6d233;border-radius:12px;box-shadow:0 16px 35px #0003}
.portfolio-card:hover,.portfolio-card:focus-visible{box-shadow:0 22px 50px #0005;transform:translateY(-4px)}
.portfolio-stage{padding:0;display:block;flex:none}
.portfolio-browser{border:0;border-radius:0;box-shadow:none}
.portfolio-screen{background:#eef1f5}
.portfolio-card-foot{background:#fff;border-top:0;padding:21px 25px 23px;align-items:center}
.portfolio-card-foot h3{font-size:22px;color:#1a2943;letter-spacing:-.025em}
.portfolio-card-foot>div>span{font-size:13px;color:#75839b;margin-top:3px}
.portfolio-open{font-size:13px;color:#355ca3;border-color:#b0c1e0}
.portfolio-concept-label{font-size:11px;line-height:1.4;text-transform:uppercase;font-weight:600;letter-spacing:.1em;color:#3f62a2;display:block;margin-bottom:7px}
.portfolio-bottom{border-color:#29364f;margin-top:10px}
.portfolio-bottom p{color:#91a1bf}
.portfolio-bottom p strong{color:#e0e8f8}
.portfolio-bottom .btn{background:#fff;color:#172748;box-shadow:none}
.portfolio-bottom .btn:hover{background:#e0ebff}
.concept-note{font-size:12px;line-height:1.6;color:#8596b5;margin-top:13px;max-width:470px}
.portfolio-project-modal{max-width:1220px}
.portfolio-project-modal .portfolio-browser{border:1px solid #dce3f1;border-radius:8px;box-shadow:0 13px 35px #1a305515}
@media(max-width:1000px){.portfolio-heading{gap:38px}.portfolio-heading h2{font-size:47px}.portfolio-card{flex-basis:620px;width:620px}}
@media(max-width:800px){.portfolio-heading{display:block}.portfolio-heading h2{font-size:48px}.portfolio-section{padding-top:80px;padding-bottom:50px}.portfolio-intro>p{max-width:580px}}
@media(max-width:600px){.portfolio-section{padding-top:65px;padding-bottom:45px}.portfolio-heading h2{font-size:40px}.portfolio-heading .eyebrow{font-size:11px}.portfolio-intro>p{font-size:16px}.portfolio-group{gap:18px;padding-right:18px}.portfolio-card{flex-basis:92vw;width:92vw;border-radius:10px}.portfolio-stage{padding:0}.portfolio-card-foot{padding:19px 21px 21px;display:flex;align-items:end;gap:12px}.portfolio-card-foot h3{font-size:20px}.portfolio-card-foot>div>span{font-size:12px}.portfolio-concept-label{font-size:9px;margin-bottom:5px}.portfolio-open{font-size:11px;white-space:normal;flex:0 0 66px;margin-top:0}.portfolio-control{font-size:12px}.portfolio-bottom p{font-size:16px}.concept-note{font-size:12px}}

/* The collection moves on arrival, with a quiet opt-out below the designs. */
.portfolio-motion{display:none;background:transparent;color:#a6b7d4;font-size:12px;line-height:1.5;padding:8px 0 0;text-decoration:underline;text-underline-offset:4px}
.portfolio-ready .portfolio-motion{display:inline-block}
.portfolio-motion:hover{color:#fff}