@charset "UTF-8";
.page-banner-design .commerce-page{--commerce-ink:#242927;--commerce-muted:#69716d;--commerce-line:#d9dfd8}
.page-banner-design .commerce-hero.commerce-hero-showcase{min-height:530px;padding:12px 0 50px}
.page-banner-design .commerce-hero-showcase:before{inset:0 -6%;background:radial-gradient(ellipse at 52% 50%,#dfe6dfb7,transparent 68%)}
.banner-hero{position:relative;isolation:isolate;width:min(100%,700px);height:500px;margin:auto;overflow:hidden}
.banner-hero-grid{position:absolute;inset:6% 4%;background-image:linear-gradient(#a4b5ab2c 1px,transparent 1px),linear-gradient(90deg,#a4b5ab2c 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse,#000 20%,transparent 72%)}
.banner-hero-wide{position:absolute;z-index:1;left:5%;top:11%;width:80%;height:52%;overflow:hidden;border:6px solid #f9faf6;border-radius:5px;background:#1b1f1d;box-shadow:0 25px 50px -21px #192a2091;transform:rotate(-3deg);animation:banner-wide-float 8s ease-in-out infinite alternate}.banner-hero-wide>img,.banner-hero-wide-shade{position:absolute;inset:0;width:100%;height:100%}.banner-hero-wide>img{object-fit:cover;object-position:70% 51%}.banner-hero-wide-shade{background:linear-gradient(90deg,#101414eb 0%,#171b1cc9 35%,#18201a14 85%)}.banner-hero-wide-copy{position:absolute;z-index:1;left:6%;top:10%;bottom:12%;display:flex;flex-direction:column;align-items:flex-start;color:#fff}.banner-hero-wide-copy>span{font-size:9px;font-weight:850;letter-spacing:.16em}.banner-hero-wide-copy strong{margin:auto 0;font-size:clamp(27px,3.4vw,47px);line-height:.95;letter-spacing:-.07em}.banner-hero-wide-copy small{padding:8px 10px;background:#e5f0ce;color:#1b2d20;font-size:7px;font-weight:900;letter-spacing:.1em}.banner-hero-wide-copy small b{font-size:13px;vertical-align:middle}.banner-hero-wide-size{position:absolute;right:12px;bottom:10px;color:#fff;font-size:7px;font-weight:800;letter-spacing:.12em}
.banner-hero-square{position:absolute;z-index:2;left:8%;bottom:11%;width:33%;height:34%;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;padding:13px 16px;background:#cfdbcc;border:5px solid #fafbf7;border-radius:4px;color:#1a2720;box-shadow:0 20px 40px -17px #17251ca1;transform:rotate(5deg);animation:banner-square-float 7s ease-in-out infinite alternate}.banner-hero-square-photo{position:absolute;right:-3%;top:-12%;width:83%;height:82%;opacity:.7;mix-blend-mode:multiply}.banner-hero-square-photo img{width:100%;height:100%;object-fit:cover;object-position:center}.banner-hero-square strong,.banner-hero-square>span{position:relative;z-index:1}.banner-hero-square strong{margin-top:auto;font-size:clamp(20px,2.2vw,31px);line-height:.93;letter-spacing:-.07em}.banner-hero-square>span{margin-top:11px;font-size:7px;font-weight:850;letter-spacing:.13em}
.banner-hero-story{position:absolute;z-index:3;right:1%;top:17%;width:30%;height:76%;overflow:hidden;border:6px solid #f9faf6;border-radius:18px;background:#1a1c1b;box-shadow:0 25px 49px -18px #112117b8;transform:rotate(7deg);animation:banner-story-float 9s ease-in-out infinite alternate}.banner-hero-story>img,.banner-hero-story-shade{position:absolute;inset:0;width:100%;height:100%}.banner-hero-story>img{object-fit:cover;object-position:55% center}.banner-hero-story-shade{background:linear-gradient(180deg,#131716a3 0%,transparent 28%,#0b1010d9 100%)}.banner-hero-story-copy{position:absolute;z-index:1;left:11%;right:9%;top:8%;bottom:10%;display:flex;flex-direction:column;color:#fff}.banner-hero-story-copy span{font-size:7px;font-weight:850;letter-spacing:.11em}.banner-hero-story-copy strong{margin:auto 0 15px;font-size:clamp(22px,2.8vw,38px);line-height:.91;letter-spacing:-.07em}.banner-hero-story-copy small{align-self:flex-start;padding:8px 11px;background:#def0bf;color:#1c2b1f;font-size:7px;font-weight:900;letter-spacing:.09em}.banner-hero-story-size{position:absolute;z-index:2;right:7px;bottom:8px;color:#e3e7df;font-size:5px;font-weight:800;letter-spacing:.08em}.banner-hero-caption{position:absolute;left:8%;bottom:3%;display:flex;align-items:center;gap:9px;color:#536859;font-size:8px;font-weight:850;letter-spacing:.16em}.banner-hero-caption i{width:4px;height:4px;border-radius:50%;background:#748e75}
.banner-gallery{background:#edf1ec}.banner-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.banner-gallery-card{display:flex;flex-direction:column;min-width:0;min-height:515px;margin:0;padding:25px 27px 29px;overflow:hidden;border-radius:8px}.banner-gallery-web{background:#f8faf6;color:#253229;border:1px solid #d6ded3}.banner-gallery-mobile{background:#203128;color:#f6f8f0}.banner-gallery-art{position:relative;flex:1;min-height:320px;display:grid;place-items:center}.banner-gallery-index{position:absolute;z-index:3;top:0;left:0;font-size:10px;font-weight:850;letter-spacing:.14em;opacity:.7}.banner-gallery-format{position:absolute;bottom:1px;right:0;font-size:8px;font-weight:850;letter-spacing:.13em;opacity:.65}
.banner-gallery-web-frame{width:94%;margin-top:25px;background:#eff1ed;border:5px solid #fff;box-shadow:0 20px 39px -16px #13241a8f;transform:rotate(-3deg)}.banner-gallery-browser{display:flex;align-items:center;gap:4px;height:20px;padding:0 8px;background:#e7ebe4}.banner-gallery-browser i{width:5px;height:5px;border-radius:50%;background:#9fac9d}.banner-gallery-browser span{margin-left:auto;color:#617062;font-size:6px;font-weight:850;letter-spacing:.09em}.banner-gallery-web-visual{position:relative;width:100%;height:185px;overflow:hidden;background:#222}.banner-gallery-web-visual>img,.banner-gallery-web-shade{position:absolute;inset:0;width:100%;height:100%}.banner-gallery-web-visual>img{object-fit:cover;object-position:65% center}.banner-gallery-web-shade{background:linear-gradient(90deg,#101413ef 0%,#1b2021b9 40%,transparent 85%)}.banner-gallery-web-copy{position:absolute;left:7%;top:14%;bottom:12%;display:flex;flex-direction:column;align-items:flex-start;color:#fff}.banner-gallery-web-copy span{font-size:7px;font-weight:850;letter-spacing:.12em}.banner-gallery-web-copy strong{margin:auto 0;font-size:clamp(20px,2.2vw,33px);line-height:.94;letter-spacing:-.06em}.banner-gallery-web-copy small{padding:7px 8px;background:#deedc8;color:#1d2b20;font-size:6px;font-weight:850;letter-spacing:.08em}
.banner-gallery-phone{position:relative;width:45%;height:278px;margin-top:24px;overflow:hidden;border:6px solid #f9fbf7;border-radius:19px;background:#151b18;box-shadow:0 20px 40px -14px #07110aab;transform:rotate(4deg)}.banner-gallery-phone>img,.banner-gallery-phone-shade{position:absolute;inset:0;width:100%;height:100%}.banner-gallery-phone>img{object-fit:cover;object-position:54% center}.banner-gallery-phone-shade{background:linear-gradient(180deg,#131819a3,transparent 30%,#0a1210e9)}.banner-gallery-phone>span,.banner-gallery-phone>strong,.banner-gallery-phone>small{position:absolute;z-index:1;left:12%;color:#fff}.banner-gallery-phone>span{top:9%;font-size:6px;font-weight:850;letter-spacing:.1em}.banner-gallery-phone>strong{bottom:22%;font-size:clamp(21px,2.7vw,35px);line-height:.93;letter-spacing:-.07em}.banner-gallery-phone>small{bottom:10%;padding:7px 9px;background:#def0bf;color:#1d2c20;font-size:6px;font-weight:850;letter-spacing:.08em}.banner-gallery-phone>small b{font-size:10px}.banner-gallery-card figcaption{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid currentColor}.banner-gallery-card figcaption span{font-size:9px;font-weight:850;letter-spacing:.14em;opacity:.68}.banner-gallery-card figcaption strong{font-size:clamp(25px,2.3vw,37px);line-height:1.12;letter-spacing:-.055em}.banner-gallery-card figcaption small{font-size:13px;line-height:1.55;opacity:.78}.banner-gallery-foot{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:23px;color:#65746a;font-size:12px;line-height:1.5}.banner-gallery-foot a{display:inline-flex;align-items:center;gap:15px;flex-shrink:0;padding-bottom:6px;border-bottom:1px solid #7b8c7e;color:#213329;text-decoration:none;font-weight:850}
@keyframes banner-wide-float{to{transform:translateY(-5px) rotate(-2deg)}}@keyframes banner-square-float{to{transform:translateY(4px) rotate(4deg)}}@keyframes banner-story-float{to{transform:translateY(-6px) rotate(5deg)}}
@media(max-width:1000px){.page-banner-design .commerce-hero.commerce-hero-showcase{min-height:450px}.banner-hero{height:425px}.banner-gallery-card{padding:21px}}
@media(max-width:760px){.page-banner-design .commerce-hero.commerce-hero-showcase{min-height:430px;padding:10px 0 38px}.banner-hero{height:410px;max-width:590px}.banner-gallery-grid{grid-template-columns:1fr;gap:12px}.banner-gallery-card{min-height:450px}.banner-gallery-art{min-height:280px}.banner-gallery-foot{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.page-banner-design .commerce-hero.commerce-hero-showcase{min-height:320px;padding:4px 0 28px}.banner-hero{height:310px}.banner-hero-wide{left:3%;top:10%;width:83%;height:52%;border-width:4px}.banner-hero-wide-copy>span{font-size:5px}.banner-hero-wide-copy strong{font-size:22px}.banner-hero-wide-copy small{padding:5px 6px;font-size:4px}.banner-hero-wide-copy small b{font-size:8px}.banner-hero-wide-size{font-size:4px}.banner-hero-square{left:4%;bottom:12%;width:37%;height:33%;padding:7px 9px;border-width:3px}.banner-hero-square strong{font-size:16px}.banner-hero-square>span{font-size:4px;margin-top:5px}.banner-hero-story{right:0;top:18%;width:32%;height:73%;border-width:4px;border-radius:11px}.banner-hero-story-copy span{font-size:4px}.banner-hero-story-copy strong{font-size:17px}.banner-hero-story-copy small{padding:5px;font-size:4px}.banner-hero-caption{left:4%;bottom:3%;font-size:5px;gap:5px}.banner-gallery-card{min-height:420px;padding:20px}.banner-gallery-art{min-height:250px}.banner-gallery-web-visual{height:150px}.banner-gallery-phone{height:235px}.banner-gallery-card figcaption strong{font-size:28px}}
@media(max-width:360px){.page-banner-design .commerce-hero.commerce-hero-showcase{min-height:288px}.banner-hero{height:278px}.banner-gallery-card{min-height:390px}.banner-gallery-art{min-height:225px}.banner-gallery-web-visual{height:130px}.banner-gallery-phone{height:210px}}
@media(prefers-reduced-motion:reduce){.banner-hero-wide,.banner-hero-square,.banner-hero-story{animation:none}}