/* Launch edition: one Olympus world, studio positioning and services. */
.brand-meaning{font-size:10px;line-height:1.05;color:#fff0d1;letter-spacing:.015em}
html[data-skin] .topbar{gap:12px}
html[data-skin] .desktop-links{display:none}
html[data-skin] .hero #hero-title{font-family:Arial,sans-serif;font-weight:600;font-size:clamp(18px,5.6vw,22px);white-space:nowrap;line-height:1.13;letter-spacing:-.025em;margin:0 auto 10px;max-width:730px;color:#fff7e9}

html[data-skin] .hero-caption{bottom:15px}
html[data-skin] .hero .claim span{font-size:19px;letter-spacing:.025em}
html[data-skin] .main-tabs a{font-size:14px;gap:5px;padding-inline:5px}
html[data-skin] .skin-card.benefit-card{width:155px;height:231px;cursor:default;margin:0;filter:drop-shadow(0 5px 5px #08031455)}
html[data-skin] .benefit-card:after{background:linear-gradient(145deg,#281338,#120619);inset:12.25% 14.6% 16%;z-index:0}
.benefit-card h3{position:absolute;z-index:2;inset:35% 16% 19%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;color:#fff5dc;font-weight:500}
.benefit-card h3 strong{font-family:Arial,sans-serif;font-size:24px;line-height:1.1;letter-spacing:-.03em;font-weight:600}
.benefit-card h3 span{font-size:17px;line-height:1.15;font-weight:400}
html[data-skin] .benefit-card .skin-index{font-size:23px;bottom:5%}
html[data-skin] .skin-shelf{padding-block:16px}
.service-rail{gap:12px}
.service-card{width:154px;flex-shrink:0;padding:0;background:transparent;text-align:left;white-space:normal}
html[data-skin] .service-card .art-card{width:100%;height:183px;background:#28193d;pointer-events:none}
html[data-skin] .service-card .art-card img{display:block;width:100%;height:100%;object-position:50% 30%}
.service-card>strong{display:block;font-size:20px;line-height:1.2;font-weight:600;margin:10px 3px 5px;color:#fff1d2}
.service-card>small{display:block;min-height:32px;font-size:12px;line-height:1.35;color:#cbbdd6;margin-inline:3px}
.service-card:hover .art-card{filter:brightness(1.12)}
html[data-skin="olympus"] .project-promo .compact-project{height:285px;min-height:0;padding:20px 16px;margin-bottom:20px;background-image:linear-gradient(90deg,#251437fa 5%,#251437d9 42%,#25143722),var(--asset-image);background-position:center,right 15%;background-size:auto,auto 120%;background-repeat:no-repeat}
.compact-project .project-message{position:relative;max-width:69%;text-shadow:0 2px 8px #170c23}
.compact-project .expertise-kicker{font-size:8px;letter-spacing:.08em;line-height:1.5}
.project-points{height:115px;position:relative;margin-top:14px}
html[data-skin] .compact-project .project-point h3{font-family:Arial,sans-serif;font-weight:600;font-size:23px;line-height:1.12;letter-spacing:-.025em;color:#fff0ca;margin:0 0 10px}
html[data-skin] .compact-project .project-point p{font-size:12px;line-height:1.45;margin:0;color:#e4d8eb}
.project-point[hidden]{display:none}
.project-controls{display:flex;gap:14px;align-items:center;margin:7px 0 12px}
.project-dots{display:flex;gap:1px}
.project-dots button{width:24px;height:24px;background:none;padding:8px}
.project-dots button:before{content:'';display:block;width:7px;height:7px;border-radius:50%;background:#8c769a}
.project-dots button[aria-pressed="true"]:before{background:#f3ce74;box-shadow:0 0 6px #e9b74055}
.project-pause{background:#ffffff0c;border:1px solid #ffffff22;border-radius:50%;font-size:12px;width:26px;height:26px;padding:0}
.project-contact{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:40px;padding:0 16px;border:1px solid #d6b56a;border-radius:5px;background:#3a2356;color:#ffedb8;font-size:13px;font-weight:600}
.project-contact:hover{background:#50346d}
@media(min-width:700px){
 html[data-skin] .topbar{height:64px;gap:20px}
 html[data-skin] .topbar .logo{font-size:54px;line-height:1}
 .brand-meaning{font-size:12px}
 html[data-skin] .hero #hero-title{font-size:34px}
 
 html[data-skin] .main-tabs a{font-size:22px;gap:12px}
 html[data-skin] .skin-card.benefit-card{width:208px;height:310px}
 .benefit-card h3{inset:38% 16% 19%}
 .benefit-card h3 strong{font-size:32px}
 .benefit-card h3 span{font-size:23px}
 html[data-skin] .benefit-card .skin-index{font-size:29px}
 .skin-rail{justify-content:safe center;gap:18px}
 .service-card{width:calc((100% - 48px)/5);min-width:155px}
 html[data-skin] .service-card .art-card{height:220px}
 .service-card>strong{font-size:22px}
 .service-card>small{font-size:13px}
 html[data-skin="olympus"] .project-promo .compact-project{height:280px;min-height:0;padding:28px 35px;background-size:auto,auto 140%;background-position:center,right 18%}
 .compact-project .project-message{max-width:62%;width:570px}
 .compact-project .expertise-kicker{font-size:10px}
 .project-points{height:102px;margin-top:16px}
 html[data-skin] .compact-project .project-point h3{font-size:34px;max-width:520px}
 html[data-skin] .compact-project .project-point p{font-size:15px;max-width:470px}
 .project-controls{margin:0 0 9px}
 .project-contact{min-height:42px;padding-inline:24px}
}
@media(max-width:359px){html[data-skin] .main-tabs a{font-size:12px}.compact-project .project-message{max-width:76%}html[data-skin] .compact-project .project-point h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){.service-card .art-card{transition:none}}
@media(min-width:700px) and (max-width:999px){
 html[data-skin="olympus"] .project-promo .compact-project{height:310px;padding:25px}
 html[data-skin] .compact-project .project-point h3{font-size:28px}
 .compact-project .project-message{max-width:68%}
 .project-points{height:132px}
}
/* CTA geometry follows the 1062×270 art; purple plate centre is at 57.5% Y. */
html[data-skin="olympus"] .hero-caption{padding-inline:4px}
html[data-skin="olympus"] .hero #hero-title{max-width:min(730px,calc(100% - 24px))}
html[data-skin="olympus"] .hero .claim{display:block;position:relative;width:100%;max-width:430px;height:auto;aspect-ratio:1497/310;margin:0 auto;padding:0;border:0;background-position:center;background-size:100% 100%;line-height:1}
html[data-skin="olympus"] .hero .claim span{position:absolute;left:50%;right:auto;top:61.94%;bottom:auto;transform:translate(-50%,-50%);width:62%;height:auto;display:block;margin:0;padding:0;background:none;line-height:1;white-space:nowrap;text-align:center;font-family:Arial,sans-serif;font-size:clamp(18px,5.4vw,22px);font-weight:600;letter-spacing:.015em}
@media(min-width:700px){
 html[data-skin="olympus"] .hero .claim{width:520px;max-width:calc(100% - 48px)}
 html[data-skin="olympus"] .hero .claim span{font-size:26px}
}
/* Benefit illustrations: independent artwork, generated frame and live text. */
html[data-skin="olympus"] .benefit-card .benefit-art{object-fit:cover;object-position:50% 30%;border:0}
html[data-skin="olympus"] .benefit-card:after{z-index:1;background:linear-gradient(transparent 42%,#180a2c15 52%,#180a2caa 76%,#180a2cdd 100%);pointer-events:none}
html[data-skin="olympus"] .benefit-card h3{inset:58% 16% 18.5%;gap:3px;text-shadow:0 2px 5px #100515,0 1px 2px #100515}
html[data-skin="olympus"] .benefit-card h3 strong{font-size:20px;line-height:1.1}
html[data-skin="olympus"] .benefit-card h3 span{font-size:14px;line-height:1.1}
@media(min-width:700px){html[data-skin="olympus"] .benefit-card h3 strong{font-size:26px}html[data-skin="olympus"] .benefit-card h3 span{font-size:18px}}
/* Reorder the two source rows through layout, preserving the generated artwork. */
.crypto-payments{padding:0 12px 30px;margin:0 auto;max-width:1136px}
.crypto-payments h2{font-size:21px;font-weight:700;line-height:1.1;margin:0 0 16px;text-align:left}
.crypto-rows{max-width:930px;margin:0 auto;filter:drop-shadow(0 3px 3px #09041155)}
.crypto-row{position:relative;overflow:hidden;aspect-ratio:4268/505}
.crypto-wordmarks{position:absolute;left:0;display:block;width:100%;height:auto}
.crypto-row--primary .crypto-wordmarks{bottom:0}
.crypto-row--secondary .crypto-wordmarks{top:0}
@media(min-width:700px){.crypto-payments{padding:0 12px 38px}.crypto-payments h2{font-size:24px;margin-bottom:20px}}

@media(min-width:700px){.crypto-payments{width:calc(100% - 40px);max-width:1136px}.crypto-rows{max-width:none;width:100%}}


/* Four services: banners + slots, then interface/props + motion. */
.services-shelf .service-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;padding:0 12px 10px}
.services-shelf .service-card{width:100%;min-width:0}
html[data-skin] .services-shelf .service-card .art-card{width:100%;height:auto;aspect-ratio:16/10;border-radius:9px;overflow:hidden}
.services-shelf .service-card>strong{font-size:18px;margin-top:9px}
.services-shelf .service-card>small{min-height:0;font-size:12px}
@media(min-width:700px){
 .services-shelf .service-rail{gap:28px 24px}
 html[data-skin] .services-shelf .service-card .art-card{aspect-ratio:16/9}
 .services-shelf .service-card>strong{font-size:24px}
 .services-shelf .service-card>small{font-size:14px}
}

/* Compact synchronized copy and transparent art. */
html[data-skin="olympus"] .project-promo .compact-project{position:relative;height:252px;min-height:0;padding:24px 18px 44px;background-image:linear-gradient(110deg,#28163b,#372050);overflow:hidden;isolation:isolate}
.compact-project .project-message{position:relative;z-index:2;width:57%;max-width:57%;height:100%;display:flex;flex-direction:column;justify-content:center;text-shadow:0 2px 8px #170c23}
.compact-project .project-points{height:auto;min-height:112px;margin:0 0 12px}
html[data-skin] .compact-project .project-point h3{font-size:23px;line-height:1.1;margin:0 0 9px}
html[data-skin] .compact-project .project-point p{font-size:13px;line-height:1.4;margin:0}
.compact-project .project-contact{align-self:flex-start;gap:12px;min-height:36px;padding:0 12px;font-size:12px}
.project-artwork{position:absolute;inset:8px 0 30px 57%;z-index:1;pointer-events:none}
.project-cutout{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;transition:opacity .35s ease;filter:drop-shadow(0 6px 8px #11071e66)}
.project-cutout.is-active{opacity:1}
.compact-project .project-controls{position:absolute;z-index:3;left:50%;bottom:8px;transform:translateX(-50%);margin:0;display:flex;justify-content:center}
.compact-project .project-dots{display:flex;gap:4px}
@media(min-width:700px){
 html[data-skin="olympus"] .project-promo .compact-project{height:280px;padding:30px 38px 46px}
 .compact-project .project-message{width:60%;max-width:60%}
 .compact-project .project-points{min-height:100px;margin-bottom:16px}
 html[data-skin] .compact-project .project-point h3{font-size:32px}
 html[data-skin] .compact-project .project-point p{font-size:16px}
 .compact-project .project-contact{font-size:13px;min-height:40px;padding-inline:20px}
 .project-artwork{left:65%;right:3%;top:6px;bottom:30px}
}


/* Oversized cutouts break the upper edge; the artwork viewport crops the bottom. */
html[data-skin="olympus"] .project-promo .compact-project{overflow:visible;padding-bottom:34px}
.compact-project .project-message{justify-content:space-between}
.compact-project .project-points{min-height:0;margin-bottom:14px}
.project-artwork{left:58%;right:0;top:-35px;bottom:0;overflow:hidden;border-radius:0 0 8px 0}
.project-cutout{inset:0 auto auto 0;width:100%;height:145%;object-fit:cover;object-position:center top}
.project-cutout:last-child{height:100%;object-fit:contain;object-position:center bottom}
@media(min-width:700px){
 html[data-skin="olympus"] .project-promo .compact-project{padding-top:48px;padding-bottom:34px}
 .compact-project .project-message{width:53%;max-width:53%}
 .project-artwork{left:56%;right:2%;top:-115px;bottom:0}
 .project-cutout{height:auto;min-height:145%;object-fit:cover}
 .project-cutout:last-child{height:100%;min-height:0;object-fit:contain}
}

/* Benefit frames align with the shared content edges and use equal gaps. */
html[data-skin] .skin-shelf .skin-rail{gap:16px}
html[data-skin] .skin-card.benefit-card{width:187px;height:auto;aspect-ratio:208/310;flex:0 0 187px}
@media(min-width:700px){
 html[data-skin] .skin-shelf .skin-rail{justify-content:space-between;gap:24px}
 html[data-skin] .skin-card.benefit-card{width:253px;flex:0 0 253px}
}

/* Scale each gold wordmark separately, preserving the full payment grid. */
.crypto-rows .crypto-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;aspect-ratio:auto}
.crypto-token{display:block;position:relative;aspect-ratio:4268/1515}
.crypto-token-art{position:absolute;inset:0;overflow:hidden;transform:scale(.88);transform-origin:center}
.crypto-token-art img{position:absolute;display:block;width:300%;height:200%;max-width:none}

/* Benefit cards share selection with the main banner. */
html[data-skin] .skin-card.benefit-card{cursor:pointer;padding:0;border:0;background:none;transition:transform .24s ease,filter .24s ease;transform-origin:center}
html[data-skin] .skin-shelf .skin-rail{padding-top:12px;padding-bottom:14px}
html[data-skin] .benefit-card.is-selected{transform:scale(1.025);filter:drop-shadow(0 0 5px #ffdc8caa) drop-shadow(0 0 13px #bd82ff70)}
@media(hover:hover){html[data-skin] .benefit-card:not(.is-selected):hover{transform:translateY(-2px) scale(1.0125)}}
html[data-skin] .benefit-card:focus-visible{outline:2px solid #ffe4a3;outline-offset:3px;filter:drop-shadow(0 0 10px #dfacff99)}
html[data-skin] dialog.benefit-viewer{padding-bottom:24px}
html[data-skin] dialog.benefit-viewer .art-canvas>img{max-height:62dvh;max-width:100%;object-fit:contain}
.benefit-detail{width:min(620px,100%);margin:20px auto 0;text-align:left;padding:0 8px}
html[data-skin] .benefit-detail h2{font-size:24px;line-height:1.2;margin:0 0 10px;color:#ffedbf}
html[data-skin] .benefit-detail p{font-size:16px;line-height:1.5;margin:0;color:#e3dce9}
@media(prefers-reduced-motion:reduce){html[data-skin] .skin-card.benefit-card{transition:none}}

/* A smooth pulse every three seconds with a slower light sweep. */
html[data-skin="olympus"] .hero .claim{animation:claim-invite 3s cubic-bezier(.45,0,.55,1) 1.2s infinite;transition:translate .2s ease;isolation:isolate}
html[data-skin="olympus"] .hero .claim:after{content:'';position:absolute;inset:35% 21% 11%;border-radius:999px;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#fff5d96b 49%,transparent 58%) 160% 0/300% 100% no-repeat;animation:claim-shimmer 3s ease-in-out 1.2s infinite;z-index:0}
html[data-skin="olympus"] .hero .claim span{z-index:1}
@keyframes claim-invite{0%,80%,100%{transform:scale(1);filter:drop-shadow(0 3px 5px #16082255)}40%{transform:scale(1.025);filter:drop-shadow(0 0 13px #e9b84f66)}}
@keyframes claim-shimmer{0%,5%{background-position:160% 0;opacity:0}15%{opacity:1}65%{background-position:-60% 0;opacity:0}100%{background-position:-60% 0;opacity:0}}
@media(hover:hover){html[data-skin="olympus"] .hero .claim:hover{translate:0 -3px;animation-play-state:paused}}
html[data-skin="olympus"] .hero .claim:active{translate:0 1px}
@media(prefers-reduced-motion:reduce){html[data-skin="olympus"] .hero .claim,html[data-skin="olympus"] .hero .claim:after{animation:none;transition:none}html[data-skin="olympus"] .hero .claim:after{display:none}html[data-skin="olympus"] .hero .claim:hover{translate:none}}

/* Bring the hero heading closer to the CTA without moving the button. */
html[data-skin="olympus"] .hero #hero-title{position:relative;top:8px}

/* Soft local contrast behind the hero heading and CTA. */
html[data-skin="olympus"] .hero-caption{isolation:isolate}
html[data-skin="olympus"] .hero-caption:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:50%;top:-52px;bottom:-24px;width:min(780px,125vw);transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(13,7,27,.63) 0%,rgba(13,7,27,.42) 35%,rgba(13,7,27,.16) 60%,transparent 76%)}

/* Light sweep follows the alpha of each gold logo and wordmark. */
.crypto-token{--crypto-x:0%;--crypto-delay:0s}
.crypto-token:nth-child(2){--crypto-x:50%;--crypto-delay:.45s}
.crypto-token:nth-child(3){--crypto-x:100%;--crypto-delay:.9s}
.crypto-row--primary{--crypto-y:100%;--crypto-row-delay:0s}
.crypto-row--secondary{--crypto-y:0%;--crypto-row-delay:1.5s}
.crypto-token-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,247,216,.75) 49%,transparent 58%) 160% 0/300% 100% no-repeat;mask-image:url('assets/payments/gold-wordmarks-v2.webp');mask-size:300% 200%;mask-position:var(--crypto-x) var(--crypto-y);mask-repeat:no-repeat;animation:crypto-shine 7s ease-in-out infinite;animation-delay:calc(var(--crypto-delay) + var(--crypto-row-delay));opacity:0}
@keyframes crypto-shine{0%,3%{background-position:160% 0;opacity:0}8%{opacity:1}30%{background-position:-60% 0;opacity:0}100%{background-position:-60% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.crypto-token-art:after{animation:none;display:none}}



/* Preserve the supplied frame artwork; only uniform display scaling. */
html[data-skin="olympus"] .skin-card.benefit-card{aspect-ratio:1000/1714}
html[data-skin="olympus"] .skin-card.benefit-card:before{background-size:contain}
html[data-skin="olympus"] .benefit-card .benefit-art{left:8.8%;top:13%;width:82.4%;height:69.5%;border-radius:8%}
html[data-skin="olympus"] .benefit-card:after{inset:13% 8.8% 17.5%;border-radius:8%}

/* Register numbering to the center of the supplied circular medallion. */
html[data-skin="olympus"] .benefit-card .skin-index{left:49.7%;top:89.85%;bottom:auto;width:24%;height:12%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;line-height:1;font-size:26px;padding:0;margin:0}
@media(min-width:700px){html[data-skin="olympus"] .benefit-card .skin-index{font-size:33px}}



/* Standalone horizontal seamless gold material; preserve tile aspect ratio. */
html[data-skin="olympus"] .main-tabs{background-image:url("assets/olympus-skin/gold-lobby-v1.webp");background-size:auto 100%;background-repeat:repeat-x;background-position:left center}

/* Generated thin gold frame; nine-slice preserves corner shape and metal width. */
html[data-skin="olympus"] .services-shelf .service-card .art-card,
html[data-skin="olympus"] .project-promo .compact-project{
 position:relative;border:0;border-image:none;border-radius:9px;
 box-shadow:0 3px 8px #0004;
}
html[data-skin="olympus"] .services-shelf .service-card .art-card{padding:0;overflow:hidden}
html[data-skin="olympus"] .services-shelf .service-card .art-card img{border-radius:9px}
html[data-skin="olympus"] .services-shelf .service-card .art-card::before,
html[data-skin="olympus"] .project-promo .compact-project::before{
 content:"";position:absolute;inset:-2px;z-index:4;pointer-events:none;
 border:12px solid transparent;
 border-image:url("assets/olympus-skin/secondary-frame-gold-v3.webp") 85 / 12px / 0 stretch;
 background:none;box-shadow:none;
}
html[data-skin="olympus"] .project-promo .compact-project::before{z-index:0}

/* Seat previews inside the gold profile with a consistent four-pixel inset. */
html[data-skin="olympus"] .services-shelf .service-card .art-card{
 padding:4px;border-radius:11px;overflow:hidden;
}
html[data-skin="olympus"] .services-shelf .service-card .art-card img{
 width:100%;height:100%;border-radius:7px;object-fit:cover!important;object-position:center;
}
html[data-skin="olympus"] .services-shelf .service-card[data-all="ui"] .art-card img{object-position:50% 42%}
html[data-skin="olympus"] .services-shelf .service-card .art-card::before,
html[data-skin="olympus"] .project-promo .compact-project::before{
 inset:-2px;border-width:16px;border-image-width:16px;
}
html[data-skin="olympus"] .project-promo .compact-project{border-radius:11px}
html[data-skin="olympus"] .services-shelf .service-card[data-all="banners"] .art-card img,html[data-skin="olympus"] .services-shelf .service-card[data-animation-contact] .art-card img{object-position:center top}

/* Match artwork to the actual transparent aperture of the supplied frame. */
html[data-skin="olympus"] .benefit-card .benefit-art,
html[data-skin="olympus"] .benefit-card::after{
 left:9.5%;top:11.785298%;width:80.8%;height:73.803967%;
 right:auto;bottom:auto;border-radius:0;
 -webkit-mask:url("assets/olympus-skin/benefit-window-mask.png") center/100% 100% no-repeat;
 mask:url("assets/olympus-skin/benefit-window-mask.png") center/100% 100% no-repeat;
}
/* Crop cutouts at the inside of the gold edge; keep their intentional top overlap. */
html[data-skin="olympus"] .compact-project .project-artwork{
 bottom:4px;right:max(4px,2%);overflow:hidden;border-radius:0 0 7px 0;
}

/* Compact casino-style shelf actions. */
html[data-skin="olympus"] .shelf-heading .shelf-see-all{
 flex-shrink:0;min-height:34px;padding:6px 16px;border:1px solid #b99550;
 border-radius:999px;background:linear-gradient(#3b2851,#271a3c);
 color:#ffe6a5;font-size:13px;font-weight:500;line-height:1.2;
 box-shadow:inset 0 1px 0 #ffe7a51f,0 2px 4px #08031033;
 cursor:pointer;transition:background .2s,border-color .2s;
}
html[data-skin="olympus"] .shelf-heading .shelf-see-all:hover{background:#453057;border-color:#efd18b}
html[data-skin="olympus"] .shelf-heading .shelf-see-all:focus-visible{outline:2px solid #ffe6a5;outline-offset:3px}

/* Translucent header over the live hero artwork, preserving the content below. */
html[data-skin="olympus"]{--studio-header-height:50px}
html[data-skin="olympus"] .topbar{
 position:relative;z-index:8;height:var(--studio-header-height);
 margin-bottom:calc(-1 * var(--studio-header-height));
 background:rgba(32,18,49,.50);border-bottom:1px solid #dfb35e88;
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
html[data-skin="olympus"] .hero{height:calc(350px + var(--studio-header-height))}
html[data-skin="olympus"] .topbar .brand-meaning{text-shadow:0 1px 3px #10081dcc}
@media(min-width:700px){
 html[data-skin="olympus"]{--studio-header-height:64px}
 html[data-skin="olympus"] .hero{height:calc(clamp(320px,24vw,380px) + var(--studio-header-height))}
}

/* Standalone envelope artwork in the translucent header. */
html[data-skin="olympus"] .topbar .contact{
 width:66px;height:50px;flex:0 0 66px;padding:0;
 border:0;border-radius:0;box-shadow:none;background-color:transparent;background-size:60px;
 filter:drop-shadow(0 2px 3px #160a2855);
}
html[data-skin="olympus"] .topbar .contact:hover{filter:brightness(1.12) drop-shadow(0 2px 3px #160a2855)}
@media(min-width:700px){html[data-skin="olympus"] .topbar .contact{width:80px;height:64px;flex-basis:80px;background-size:75px}}

html[data-skin="olympus"] .benefit-card[data-benefit="3"] .benefit-art{object-position:50% 50%}

html[data-skin="olympus"] .benefit-card[data-benefit="0"] .benefit-art{object-position:55% 50%}

/* Fixed desktop composition: resizing only clips the sides of this art canvas. */
@media(min-width:700px){
 html[data-skin="olympus"] .hero{height:444px}
 html[data-skin="olympus"] .hero .hero-art{
  inset:0 auto auto 50%;width:var(--hero-canvas-width,1744px);height:444px;max-width:none;
  transform:translateX(-50%);object-fit:cover;
  object-position:var(--asset-position,50% 0%)!important;
 }
}
/* Extend the atmosphere beyond the authored canvas on ultrawide screens. */
@media(min-width:1745px){
 html[data-skin="olympus"] .hero::before{
  content:"";display:block;position:absolute;inset:-24px;pointer-events:none;
  background:var(--hero-image) center top/cover no-repeat;
  filter:blur(20px) brightness(.5);z-index:-1;
 }
 html[data-skin="olympus"] .hero .hero-art{
  mask-image:linear-gradient(to right,transparent,#000 60px,#000 calc(100% - 60px),transparent);
 }
}

/* Art-directed zoom inside a fixed aperture: gold contour never scales. */
html[data-skin="olympus"] .benefit-card .benefit-aperture{
 position:absolute;left:9.5%;top:11.785298%;width:80.8%;height:73.803967%;z-index:0;
 overflow:hidden;pointer-events:none;
 -webkit-mask:url("assets/olympus-skin/benefit-window-mask.png") center/100% 100% no-repeat;
 mask:url("assets/olympus-skin/benefit-window-mask.png") center/100% 100% no-repeat;
}
html[data-skin="olympus"] .benefit-card .benefit-aperture .benefit-art{
 left:0;top:0;width:100%;height:100%;mask:none;-webkit-mask:none;
 transform:scale(var(--frame-zoom,1.2));transform-origin:50% 50%;
 object-position:var(--frame-focus,50% 50%);
}
html[data-skin="olympus"] .benefit-card[data-benefit="0"]{--frame-zoom:1.18;--frame-focus:52.4% 50%}
html[data-skin="olympus"] .benefit-card[data-benefit="1"]{--frame-zoom:1.4;--frame-focus:50% 50%}
html[data-skin="olympus"] .benefit-card[data-benefit="2"]{--frame-zoom:1.3;--frame-focus:49% 50%}

@media(min-width:700px) and (max-width:2554px){html[data-skin="olympus"] .hero .hero-art[data-asset-id="olympus.hero-zeus"]{mask-image:none}}

@media(min-width:700px) and (max-width:2600px){html[data-skin="olympus"] .hero .hero-art[data-asset-id="olympus.studio-tools-v1"]{mask-image:none}}

@media(min-width:700px) and (max-width:2588px){html[data-skin="olympus"] .hero .hero-art[data-asset-id="olympus.studio-seniors-v1"]{mask-image:none}}

html[data-skin="olympus"] .benefit-card[data-benefit="1"] .benefit-aperture .benefit-art{transform-origin:50% 22%}