.portfolio-section{padding:0 0 95px}.portfolio-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 26px}.portfolio-card:first-child{grid-column:1/-1}.portfolio-card{min-width:0}.portfolio-cover{height:350px;border-radius:24px;background:#14151b;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;padding:32px}.portfolio-card:first-child .portfolio-cover{height:430px;background:#102147}.portfolio-cover img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform .4s}.portfolio-cover:hover img{transform:scale(1.025)}.portfolio-cover.icon-cover{background:#fff;padding:0}.portfolio-cover.icon-cover img{width:100%}.portfolio-cover .cover-arrow{position:absolute;right:20px;top:20px;background:#111a;color:white;border:1px solid #ffffff30;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;z-index:2}.portfolio-caption{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:18px}.portfolio-caption h3{font-size:22px;letter-spacing:-.035em;line-height:1.2}.portfolio-caption p{font-size:12px;color:var(--muted);margin-top:7px}.portfolio-caption>span{color:var(--muted);font-size:12px}.project-kind{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:9px}.exploration-section{padding-bottom:90px}.exploration-section .featured-visual{height:450px}.exploration-section .phone-img{width:200px}.exploration-section .phones{padding-right:160px}.case-meta{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding:26px 0;border-block:1px solid var(--line);margin:0 0 40px}.case-meta dt{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}.case-meta dd{margin:0;font-size:14px;line-height:1.7}.case-editorial{max-width:800px;margin:0 auto 60px}.case-media{margin:0 0 62px;border-radius:22px;overflow:hidden;background:#15151a}.case-media img{display:block;width:100%;height:auto}.case-media figcaption,.source-caption{padding:14px 19px;font-size:11px;color:var(--muted);line-height:1.6}.case-media .media-link{display:block}.creative-presentation{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;align-items:center;margin:0 0 85px;border-radius:24px;background:radial-gradient(ellipse at 30% 30%,#123a8d,#101b37 75%);padding:48px 80px}.creative-main-image{max-height:680px;width:auto;max-width:100%;margin:auto;box-shadow:0 15px 40px #0004}.creative-description h2{font-size:38px;line-height:1.15;max-width:440px}.creative-description p{font-size:16px;color:#b7c2dc;margin-top:24px;max-width:450px;line-height:1.8}.creative-details{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.creative-details span{font-size:11px;color:#d6def0;border:1px solid #6a7b9b60;border-radius:25px;padding:7px 12px}.project-section{margin-bottom:76px}.project-section .section-intro{color:var(--muted);font-size:15px;max-width:760px;line-height:1.8;margin:-5px 0 30px}.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px}.story-figure{margin:0;min-width:0}.story-figure a{display:block;border-radius:17px;overflow:hidden;background:#153b8b}.story-figure img{width:100%;height:auto}.story-figure figcaption{font-size:12px;color:#b5b5bf;line-height:1.7;margin-top:14px}.story-figure figcaption span{color:#6e7381;margin-right:8px;font-size:10px}.banner-pair{display:grid;gap:24px}.banner-pair figure{margin:0}.banner-pair img{width:100%;height:auto;border-radius:15px}.banner-pair figcaption{font-size:11px;color:var(--muted);margin-top:12px}.case-observations{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:70px}.case-observations article{border-top:1px solid var(--line);padding-top:24px}.case-observations h3{font-size:23px;margin-bottom:15px}.case-observations p{font-size:14px;line-height:1.8;color:var(--muted)}.source-link-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:30px 0 60px}.next-case{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);gap:25px;padding:38px 0 64px}.next-case small{display:block;color:var(--muted);font-size:10px;letter-spacing:.1em;margin-bottom:10px}.next-case h2{font-size:28px;line-height:1.2}.next-case>span{font-size:32px}.payment-viewer{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;margin-bottom:85px}.payment-guide h2{font-size:34px;margin-bottom:18px;line-height:1.15}.payment-guide>p{font-size:15px;line-height:1.8;color:var(--muted);max-width:480px}.payment-steps{display:grid;gap:0;margin:27px 0}.step-button{display:flex;align-items:center;text-align:left;gap:16px;width:100%;padding:17px 10px;border:0;border-top:1px solid var(--line);background:transparent;color:var(--muted);font-size:14px}.step-button:last-child{border-bottom:1px solid var(--line)}.step-button .step-index{font-size:10px;color:#6a748a;width:20px;flex-shrink:0}.step-button[aria-current=step]{background:#1a2337;color:#eef2ff}.step-button[aria-current=step] .step-index{color:#bcccff}.step-button:hover{color:var(--text)}.gallery-controls{display:flex;justify-content:space-between;align-items:center;gap:14px}.gallery-controls button{border:1px solid #3b3e48;border-radius:50%;background:none;color:var(--text);width:43px;height:43px;font-size:18px}.gallery-controls button:disabled{opacity:.3;cursor:default}.gallery-controls [data-gallery-status]{font-size:12px;color:var(--muted)}.payment-stage{border:1px solid var(--line);border-radius:24px;background:#14151b;padding:28px;min-width:0}.payment-panel{margin:0}.payment-panel img{display:block;width:auto;height:auto;max-width:100%;max-height:690px;margin:0 auto;border-radius:28px}.payment-panel figcaption{font-size:12px;line-height:1.7;color:#b6b8c4;margin:22px auto 0;max-width:350px}.payment-panel figcaption strong{display:block;color:var(--text);font-weight:450;font-size:18px;letter-spacing:-.025em;margin-bottom:7px}.payment-panel[hidden],.icon-panel[hidden]{display:none}.payment-overview{background:#121217}.icon-explorer{display:grid;grid-template-columns:1fr 1.3fr;gap:70px;margin:0 0 85px;align-items:center}.icon-explorer-copy h2{font-size:36px;line-height:1.2;margin-bottom:22px}.icon-explorer-copy p{font-size:15px;line-height:1.8;color:var(--muted)}.variant-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.variant-controls button{padding:10px 17px;border:1px solid #4a4a55;background:transparent;color:var(--muted);border-radius:30px;font-size:12px;min-height:44px}.variant-controls button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}.icon-panel{padding:35px;border-radius:24px;margin:0;min-width:0}.icon-panel.light{background:#fff}.icon-panel.brand{background:#cd007a}.icon-panel img{width:100%;height:auto}.icon-overview{background:white}.icon-system-note{max-width:800px;margin:0 auto 70px;color:var(--muted);font-size:15px;line-height:1.9}.icon-system-note h2{font-size:30px;color:var(--text);margin-bottom:20px}.project-intro-tag{display:inline-block;color:#9298ac;font-size:11px;margin-top:25px}.showcase-heading{font-size:30px;margin-bottom:27px;line-height:1.2}.media-open-note{font-size:11px;color:var(--muted);margin-top:10px}
@media(max-width:1060px){.creative-presentation{padding:40px;gap:45px}.creative-description h2{font-size:31px}.payment-viewer,.icon-explorer{gap:35px}.portfolio-cover{height:300px}.exploration-section .phones{padding-right:60px}.payment-stage{padding:24px}.case-observations{gap:24px}.payment-guide h2{font-size:29px}}
@media(max-width:760px){.portfolio-section{padding-bottom:65px}.portfolio-grid{grid-template-columns:1fr;gap:31px}.portfolio-card:first-child{grid-column:auto}.portfolio-cover,.portfolio-card:first-child .portfolio-cover{height:260px;padding:19px;border-radius:18px}.portfolio-card:first-child .portfolio-cover img{width:100%}.portfolio-cover.icon-cover{padding:0;height:auto;min-height:160px}.portfolio-caption h3{font-size:21px}.portfolio-caption>span{font-size:10px}.exploration-section .featured-visual{height:500px}.exploration-section .phones{padding-right:0;padding-left:25px}.exploration-section .phone-img{width:170px}.exploration-section{padding-bottom:60px}.case-meta{grid-template-columns:1fr 1fr;gap:23px;margin-bottom:28px}.case-meta>div:first-child{grid-column:1/-1}.case-meta dd{font-size:13px}.case-meta dt{font-size:9px}.creative-presentation{grid-template-columns:1fr;padding:29px 24px;gap:30px;margin-bottom:54px;border-radius:18px}.creative-main-image{max-height:660px}.creative-description h2{font-size:29px}.creative-description p{font-size:14px;margin-top:18px}.creative-details{margin-top:20px}.creative-details span{font-size:10px}.stories-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:15px}.story-figure{flex:0 0 min(78%,300px);scroll-snap-align:start}.story-figure figcaption{font-size:11px}.project-section{margin-bottom:50px}.project-section .section-intro{font-size:14px;margin-bottom:24px}.banner-pair{gap:22px}.banner-pair img{border-radius:10px}.case-observations{grid-template-columns:1fr;gap:25px;margin-bottom:45px}.case-observations h3{font-size:21px}.case-media{border-radius:14px;margin-bottom:43px}.case-media figcaption{font-size:10px}.payment-viewer{grid-template-columns:1fr;gap:30px;margin-bottom:50px}.payment-guide h2{font-size:28px}.payment-steps{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:22px 0}.step-button{display:block;padding:12px 0;border:1px solid var(--line);border-radius:9px;text-align:center;min-height:44px}.step-button .step-label{display:none}.step-button .step-index{width:auto;font-size:12px}.step-button:last-child{border:1px solid var(--line)}.payment-stage{padding:20px;border-radius:18px}.payment-panel img{max-height:none;width:100%;border-radius:22px}.payment-panel figcaption{font-size:12px}.icon-explorer{grid-template-columns:1fr;gap:27px;margin-bottom:50px}.icon-explorer-copy h2{font-size:29px}.icon-explorer-copy p{font-size:14px}.variant-controls{margin-top:22px}.icon-panel{padding:25px;border-radius:16px}.icon-system-note{font-size:14px;margin-bottom:50px}.icon-system-note h2{font-size:26px}.next-case{padding-bottom:45px}.next-case h2{font-size:23px}.source-link-row{margin-bottom:42px}.showcase-heading{font-size:25px}.source-caption{font-size:10px;padding:12px 16px}}
@media(max-width:374px){.portfolio-cover,.portfolio-card:first-child .portfolio-cover{height:210px;padding:14px}.portfolio-cover.icon-cover{padding:0;height:auto}.portfolio-caption{gap:12px}.portfolio-caption h3{font-size:19px}.portfolio-caption>span{display:none}.payment-stage{padding:13px}.payment-guide h2{font-size:26px}.icon-panel{padding:20px}.case-meta{grid-template-columns:1fr}.case-meta>div:first-child{grid-column:auto}.creative-presentation{padding:24px 18px}.portfolio-cover .cover-arrow{right:12px;top:12px;width:31px;height:31px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.portfolio-cover img{transition:none}.portfolio-cover:hover img{transform:none}}
/* The source frame has an unclipped horizontal card rail; present its 360px viewport. */
.creative-main-viewport{width:min(100%,234px);aspect-ratio:360/1047;overflow:hidden;margin:auto;box-shadow:0 15px 40px #0004}.creative-main-viewport .creative-main-image{width:243.888889%;max-width:none;height:auto;max-height:none;box-shadow:none;margin:0}
@media(max-width:760px){.creative-main-viewport{width:min(100%,226px)}}

/* Show each half of the original board so white icon strokes keep their native background. */
.icon-panel{padding:0;overflow:hidden;aspect-ratio:1300/1192}
.icon-panel img{display:block;width:200%;max-width:none;height:auto}
.icon-panel.brand img{transform:translateX(-50%)}
