/* A fictional website, presented as design work rather than a live customer site. */
.wx-showcase{--wx-black:var(--bg,#080C14);--wx-navy:var(--navy,#14243B);--wx-blue:var(--accent,#A8C9FF);--wx-grey:var(--muted,#AAB5C5);--wx-white:var(--ink,#EFF3F8);--wx-orange:var(--orange,#FF6A00);width:100%;min-width:0;font-family:var(--sans,Inter,Arial,sans-serif);color:var(--wx-white)}
.wx-showcase *{box-sizing:border-box}.wx-showcase [hidden]{display:none!important}.wx-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px;flex-wrap:wrap}.wx-concept-label{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.6;color:var(--wx-grey);margin:0}.wx-concept-label>span{width:6px;height:6px;flex-shrink:0;background:var(--wx-orange)}.wx-view-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid color-mix(in srgb,var(--wx-grey) 24%,transparent);border-radius:5px;background:var(--wx-black)}.wx-view-button{border:0;border-radius:2px;color:var(--wx-grey);background:transparent;font:inherit;font-size:14px;font-weight:500;line-height:1.5;padding:9px 14px;min-height:44px;cursor:pointer;transition:background .2s,color .2s}.wx-view-button[aria-selected=true]{background:var(--wx-blue);color:var(--wx-black)}.wx-view-button:hover{color:var(--wx-white)}.wx-view-button[aria-selected=true]:hover{color:var(--wx-black)}.wx-view-button:focus-visible,.wx-showcase [role=tabpanel]:focus-visible{outline:2px solid var(--wx-orange);outline-offset:5px}
.wx-composition{position:relative;padding:18px 76px 26px 0;min-width:0}.wx-desktop-design{position:relative;z-index:1;min-width:0}.wx-browser{overflow:hidden;border:1px solid color-mix(in srgb,var(--wx-grey) 35%,transparent);border-radius:8px;box-shadow:0 28px 65px color-mix(in srgb,var(--wx-black) 65%,transparent);background:var(--wx-white);transform:rotate(-1.5deg);transform-origin:50% 70%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.wx-showcase:hover .wx-browser{transform:rotate(-.5deg)}.wx-browser-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 14px;color:var(--wx-grey);background:var(--wx-navy);font-size:14px;line-height:1.4}.wx-browser-dots{display:flex;gap:5px;align-items:center}.wx-browser-dots i{width:5px;height:5px;border-radius:50%;background:var(--wx-grey);opacity:.55}.wx-browser-dots i:first-child{background:var(--wx-orange);opacity:1}.wx-browser-corner{color:var(--wx-blue);font-size:16px}.wx-site{color:var(--wx-black);padding:20px 24px 0;background:var(--wx-white)}.wx-site-nav{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-bottom:19px}.wx-site-brand{display:flex;flex-direction:column;gap:7px;font-size:25px;font-weight:700;line-height:1;letter-spacing:-.07em}.wx-site-brand>span{font-size:14px;font-weight:400;line-height:1.45;letter-spacing:-.02em}.wx-site-menu{display:flex;align-items:center;gap:18px;font-size:14px;line-height:1.4}.wx-site-menu>span:last-child{border-bottom:1px solid var(--wx-black);padding-bottom:4px}.wx-site-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:19px;align-items:stretch}.wx-site-copy{padding-block:10px 19px;display:flex;flex-direction:column;align-items:flex-start}.wx-site-kicker{font-size:14px;line-height:1.5;letter-spacing:.01em;color:var(--wx-navy)}.wx-site-heading{font-size:clamp(30px,3.4vw,53px);font-weight:550;line-height:.98;letter-spacing:-.065em;margin:23px 0 20px}.wx-site-description{font-size:14px;line-height:1.65;max-width:220px;margin:0 0 23px;color:var(--wx-navy)}.wx-site-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:18px;font-size:14px;font-weight:500;line-height:1.5;background:var(--wx-orange);color:var(--wx-black);padding:11px 12px;margin-top:auto}.wx-site-cta>span{font-size:18px;line-height:1}.wx-site-image{position:relative;min-width:0;background:var(--wx-navy);overflow:hidden;display:flex;align-items:flex-end}.wx-architecture{display:block;width:100%;height:100%;min-height:100%;object-fit:cover;flex-shrink:0}.wx-site-image .wx-architecture{aspect-ratio:360/400;height:auto;align-self:center}.wx-image-index{position:absolute;bottom:12px;left:13px;font-size:14px;line-height:1.3;background:var(--wx-navy);padding:6px 9px;color:var(--wx-white)}.wx-site-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid color-mix(in srgb,var(--wx-navy) 25%,transparent);padding:12px 0 13px;margin-top:16px;font-size:14px;line-height:1.4;color:var(--wx-navy)}.wx-site-bottom>span:last-child{display:flex;gap:15px}
.wx-phone-preview{position:absolute;z-index:2;right:0;bottom:0;width:158px;transform:rotate(5deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}.wx-showcase:hover .wx-phone-preview{transform:translateY(-4px) rotate(3deg)}.wx-phone{position:relative;padding:8px;background:var(--wx-black);border:1px solid color-mix(in srgb,var(--wx-grey) 65%,transparent);border-radius:23px;box-shadow:0 17px 45px color-mix(in srgb,var(--wx-black) 55%,transparent);overflow:hidden}.wx-phone-camera{position:absolute;z-index:3;top:7px;left:50%;transform:translateX(-50%);width:34%;height:8px;border-radius:0 0 8px 8px;background:var(--wx-black)}.wx-phone-page{background:var(--wx-white);border-radius:15px;overflow:hidden;color:var(--wx-black);padding:17px 10px 0}.wx-phone-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;font-weight:700;letter-spacing:-.05em;line-height:1}.wx-phone-menu{width:15px;height:7px;border-top:1px solid var(--wx-black);border-bottom:1px solid var(--wx-black)}.wx-phone-copy{padding-block:21px 16px}.wx-phone-copy>p{font-size:26px;line-height:.99;font-weight:550;letter-spacing:-.055em;margin:0}.wx-phone-copy>span{display:block;font-size:14px;line-height:1.7;margin-top:16px;color:var(--wx-navy)}.wx-phone-image{background:var(--wx-navy);overflow:hidden}.wx-phone-image .wx-architecture{height:auto;aspect-ratio:360/340;object-fit:cover}.wx-phone--preview .wx-phone-image{margin-inline:-10px}.wx-phone--preview .wx-phone-image .wx-architecture{aspect-ratio:360/330}.wx-phone-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;color:var(--wx-black);font-size:14px;font-weight:500;line-height:1.5}.wx-phone-bottom>span:last-child{display:grid;place-items:center;background:var(--wx-orange);width:30px;height:30px;font-size:18px}
.wx-mobile-composition{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:30px;align-items:center;padding:20px 24px 22px;background:var(--wx-navy);border:1px solid color-mix(in srgb,var(--wx-grey) 21%,transparent);border-radius:8px}.wx-mobile-design{min-width:0}.wx-phone--focus{width:100%;max-width:270px;border-radius:28px;padding:9px}.wx-phone--focus .wx-phone-page{padding:21px 19px 0;border-radius:19px}.wx-phone--focus .wx-phone-nav{font-size:22px}.wx-phone--focus .wx-phone-copy{padding-block:22px 18px}.wx-phone--focus .wx-phone-copy>p{font-size:42px}.wx-phone--focus .wx-phone-image .wx-architecture{aspect-ratio:360/280}.wx-mobile-notes{min-width:0}.wx-note-index{display:inline-block;font-size:14px;letter-spacing:.04em;line-height:1.5;color:var(--wx-orange);margin-bottom:17px}.wx-mobile-notes>p{margin:0;font-size:clamp(23px,2.1vw,31px);font-weight:500;line-height:1.2;letter-spacing:-.035em}.wx-mobile-notes>span:last-child{display:block;color:var(--wx-grey);font-size:16px;line-height:1.75;margin-top:21px;max-width:240px}.wx-caption{display:flex;justify-content:space-between;gap:12px 25px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--wx-grey) 24%,transparent);font-size:14px;line-height:1.6;color:var(--wx-grey)}.wx-caption>span:first-child{color:var(--wx-white)}.wx-screen-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1100px){.wx-site{padding:20px 19px 0}.wx-site-nav{padding-bottom:18px}.wx-site-menu{gap:13px}.wx-site-menu>span:nth-child(1){display:none}.wx-site-heading{font-size:38px}.wx-site-kicker{font-size:14px}.wx-composition{padding-right:67px}.wx-phone-preview{width:146px}.wx-mobile-composition{gap:25px;padding:20px;grid-template-columns:minmax(0,250px) minmax(0,1fr)}}
@media(max-width:700px){.wx-toolbar{gap:15px;margin-bottom:12px}.wx-concept-label{font-size:14px}.wx-composition{padding:14px 55px 22px 0}.wx-site{padding:18px 15px 0}.wx-site-brand{font-size:22px}.wx-site-brand>span{font-size:14px}.wx-site-menu{gap:0}.wx-site-menu>span{display:none}.wx-site-menu>span:last-child{display:block}.wx-site-hero{gap:15px}.wx-site-heading{font-size:36px;margin-block:18px}.wx-site-kicker{display:none}.wx-site-copy{padding-top:5px}.wx-site-description{font-size:14px}.wx-site-cta{gap:12px;padding:10px;font-size:14px}.wx-site-bottom{margin-top:14px;gap:10px}.wx-site-bottom>span:nth-child(2){display:none}.wx-phone-preview{width:136px}.wx-phone--preview .wx-phone-copy>p{font-size:23px}.wx-image-index{display:none}.wx-mobile-composition{grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:25px;padding:20px}.wx-mobile-notes>p{font-size:25px}.wx-mobile-notes>span:last-child{font-size:15px}}
@media(max-width:520px){.wx-view-switch{width:100%}.wx-view-button{flex:1}.wx-browser{transform:none}.wx-showcase:hover .wx-browser{transform:none}.wx-browser-bar{padding:10px 11px}.wx-browser-corner{display:none}.wx-browser-dots{display:none}.wx-composition{padding:8px 0 18px}.wx-phone-preview{display:none}.wx-site{padding:18px 16px 0}.wx-site-nav{padding-bottom:16px;align-items:flex-start}.wx-site-brand{font-size:25px}.wx-site-menu{font-size:14px}.wx-site-hero{grid-template-columns:1fr 1fr;gap:13px}.wx-site-heading{font-size:31px;margin-block:4px 15px}.wx-site-description{font-size:14px;line-height:1.6;margin-bottom:17px}.wx-site-cta{font-size:14px;gap:10px;padding:10px 9px}.wx-site-cta>span{display:none}.wx-site-bottom{font-size:14px;gap:10px}.wx-site-bottom>span:last-child>span{display:none}.wx-mobile-composition{display:flex;flex-direction:column;gap:23px;padding:18px}.wx-mobile-design{width:min(100%,270px)}.wx-phone--focus{max-width:none}.wx-mobile-notes{width:100%;max-width:270px}.wx-note-index{margin-bottom:10px}.wx-mobile-notes>p{font-size:26px}.wx-mobile-notes>span:last-child{font-size:16px;margin-top:13px;max-width:none}.wx-caption{margin-top:8px;gap:7px}.wx-caption>span{display:block}.wx-phone--focus .wx-phone-copy>p{font-size:42px}}
@media(max-width:360px){.wx-site{padding-inline:12px}.wx-site-hero{gap:11px}.wx-site-heading{font-size:27px}.wx-site-brand>span{max-width:108px}.wx-site-menu{font-size:14px}.wx-site-description{font-size:14px}.wx-site-cta{padding-inline:7px;font-size:14px}.wx-mobile-composition{padding-inline:13px}.wx-phone--focus .wx-phone-page{padding-inline:16px}.wx-phone--focus .wx-phone-copy>p{font-size:38px}}
@media(prefers-reduced-motion:reduce){.wx-browser,.wx-phone-preview,.wx-view-button{transition:none}.wx-browser,.wx-showcase:hover .wx-browser{transform:none}.wx-showcase:hover .wx-phone-preview{transform:rotate(5deg)}}
/* On small screens the live phone composition carries the explanation. */
@media(max-width:520px){.wx-mobile-notes{display:none}}