.product-row{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1.15fr 1fr 1.85fr;gap:22px;min-width:0}
.board{grid-template-rows:repeat(3,minmax(0,1fr))}
/* Reference: 1400px wide, three 263px rows and two 22px gaps. */
@media(min-width:651px){.board{aspect-ratio:1400 / 833;height:auto;min-height:0;flex-shrink:0}}
.portfolio{min-height:100svh;height:auto}.intro{height:24svh;min-height:160px}
.product-card{--card-inset:clamp(18px,5cqh,24px)}
.coming-soon-card{cursor:default}.coming-soon-label{position:absolute;z-index:4;inset:0;display:grid;place-items:center;border-radius:inherit;background:rgb(0 0 0 / 80%);color:#fff;pointer-events:none}.coming-soon-label>span{font-size:clamp(20px,3cqw,28px);font-weight:400;line-height:1.2;text-align:center}.coming-soon-card .guidelines-loader i{animation:none;opacity:.4}
.product-card .reveal-meta{font-size:12px}.travel-card{--surface-rest:#17151E;--surface-reveal:#17151E}.weather-card{background:linear-gradient(#FFC800,#EDBA00);--surface-reveal:#FFC800}.guidelines-card{--surface-rest:#EEE;--surface-reveal:#EEE}
.travel-card .reveal-content{color:#fff}.travel-card .reveal-action{background:#fff;color:#17151E}.travel-card .reveal-meta{color:#fff;background:#ffffff20}
.flight-flipper{width:74%;max-width:490px;display:flex;gap:5px;position:absolute;left:13%;top:50%;transform:translateY(-50%);perspective:700px}
.flight-tile{position:relative;flex:1;aspect-ratio:.78;background:#5C5963;border-radius:16px;overflow:hidden;perspective:400px}.flight-tile::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#17151E;z-index:3}
.flight-face{position:absolute;inset:0;display:grid;place-items:center;color:#fff;backface-visibility:hidden;animation:flap-front 12s infinite;animation-delay:calc(-3.65s + var(--slot)*110ms);background:#5C5963;transform-origin:50% 50%;animation-timing-function:cubic-bezier(.35,0,.2,1)}.flight-face svg{width:62%;height:auto}.flight-next{animation-name:flap-next}
@keyframes flap-front{0%,37%,100%{transform:rotateX(0);opacity:1;background:#696570}43%,87%{transform:rotateX(-90deg);opacity:0;background:#34313C}88%{transform:rotateX(90deg);opacity:0;background:#34313C}94%{transform:rotateX(0);opacity:1;background:#696570}}
@keyframes flap-next{0%,37%,100%{transform:rotateX(90deg);opacity:0;background:#34313C}44%,87%{transform:rotateX(0);opacity:1;background:#696570}94%{transform:rotateX(-90deg);opacity:0;background:#34313C}}
.weather-art{position:absolute;inset:0;padding-top:32px;color:#111;overflow:hidden}.weather-mark{display:block;width:46px;height:46px;object-fit:contain;margin:0 auto 34px;filter:brightness(0)}
.weather-values{display:flex;justify-content:center;gap:9px;width:max-content;position:relative;left:50%;transform:translateX(-50%);white-space:nowrap}.weather-values span{font-family:ui-monospace,SFMono-Regular,monospace;font-size:27px;letter-spacing:-1px;padding:13px 10px;border:1.5px solid #17151E;border-radius:11px}.weather-values.secondary{margin-top:9px;transform:translateX(-46%)}.weather-values.secondary span{font-size:23px}
.guidelines-art{position:absolute;inset:0;overflow:hidden}.surface-phone{position:relative;width:180px;height:365px;padding:7px;background:#141414;border:2px solid #555;border-radius:34px;box-shadow:2px 3px 3px #0007,14px 17px 23px #0002,25px 26px 42px #0001;flex:none}
.surface-phone-screen{height:100%;overflow:hidden;position:relative;border-radius:26px;background:#fff;color:#17151E;font-family:Arial,sans-serif}.phone-status{display:flex;justify-content:space-between;font-size:8px;font-weight:600;padding:10px 12px}.phone-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:57px;height:13px;background:#080808;border-radius:12px}.phone-chat-header{font-size:16px;letter-spacing:-.5px;padding:26px 13px 14px;border-bottom:1px solid #eee}.phone-chat{padding:20px 12px;font-size:11px;line-height:1.5;display:flex;flex-direction:column;gap:15px}.phone-user{align-self:flex-end;background:#17151E;color:#fff;border-radius:12px 12px 0 12px;padding:8px 11px}.phone-chat p{margin:0}.phone-reply{border:1px solid #ddd;padding:9px;border-radius:8px;display:flex;justify-content:space-between}.phone-input{position:absolute;bottom:20px;left:10px;right:10px;border:1px solid #ddd;border-radius:15px;padding:8px;font-size:9px;color:#777;display:flex;justify-content:space-between}.phone-home-bar{position:absolute;bottom:6px;width:55px;height:3px;left:50%;transform:translateX(-50%);border-radius:4px;background:#111}
.guidelines-art .surface-phone{position:absolute;left:12%;top:28px;width:clamp(132px,29cqw,180px)}.guidelines-dialog{position:absolute;top:50px;left:48%;right:7%;display:flex;flex-direction:column;gap:22px;align-items:flex-start}.guidelines-question{font-size:clamp(11px,2.8cqw,17px);line-height:1.4;background:#0b0b0b;color:#fff;padding:13px 16px;border-radius:19px 19px 0 19px;align-self:flex-end}.guidelines-loader{display:flex;gap:4px;background:#ffffff80;border-radius:16px 16px 16px 0;padding:12px 10px}.guidelines-loader i{width:7px;height:7px;border-radius:50%;background:#111;animation:guidelines-dot 2.4s infinite}.guidelines-loader i:nth-child(2){animation-delay:.25s}.guidelines-loader i:nth-child(3){animation-delay:.5s}@keyframes guidelines-dot{0%,65%,100%{opacity:.15}25%{opacity:1}}
.case-shell[data-case=travel]{--case-surface:#17151E;--case-ink:#fff}.case-shell[data-case=weather]{background:linear-gradient(#FFC800,#EDBA00)}
.case-shell:is([data-case=travel],[data-case=weather]) .case-contribution,.case-shell:is([data-case=travel],[data-case=weather]) .facts,.case-shell:is([data-case=travel],[data-case=weather]) .chapter-nav{display:none}
.case-shell:is([data-case=travel],[data-case=weather]) .case-overview{justify-content:center;min-height:calc(100svh - 180px)}
.case-shell:is([data-case=travel],[data-case=weather]) .case-breadcrumb{font-size:20px;letter-spacing:-.5px;font-weight:400;color:var(--case-ink)}.case-shell[data-case=travel] .close{color:#fff}
.product-hero-art{position:relative;width:100%;height:100%;min-height:320px}.product-hero-art .flight-flipper{width:92%;left:4%}.product-hero-art .weather-art{inset:10% 0;padding-top:25px}.product-hero-art .weather-mark{width:72px;height:72px;margin-bottom:48px}.product-hero-art .weather-values span{font-size:clamp(21px,2.5vw,35px)}
@media(max-width:1000px){.product-row{gap:18px}.product-card{--card-inset:18px}.product-card .reveal-meta{font-size:10px}.weather-values span{font-size:23px}.guidelines-dialog{right:5%}}
@media(max-width:650px){.board{grid-template-rows:185px 185px 210px auto;height:auto;min-height:0}.product-row{grid-row:4;grid-template-columns:1fr 1fr;gap:16px}.product-card{height:210px}.guidelines-card{grid-column:1/-1;height:230px}.intro{height:190px}.flight-tile{border-radius:10px}.flight-flipper{width:84%;left:8%;gap:3px}.weather-art{padding-top:25px}.weather-mark{margin-bottom:30px;width:35px;height:35px}.weather-values span{font-size:21px;padding:10px 7px}.guidelines-art .surface-phone{width:145px;left:10%;top:24px}.guidelines-dialog{left:49%;right:7%;top:45px}.product-hero-art .flight-flipper{width:88%;left:6%}.product-hero-art .weather-values span{font-size:25px}}
@media(prefers-reduced-motion:reduce){.flight-face,.guidelines-loader i{animation:none}.flight-front{transform:none;opacity:1}.flight-next{opacity:0}.guidelines-loader i{opacity:.4}}
body.case-focused .product-card .flight-face,body.case-focused .guidelines-loader i{animation-play-state:paused}

/* Guidelines use the same growing frame and reversible board push. */
.case-shell[data-layout=embedded]{background:#f3f3f3}
.case-shell[data-layout=embedded] .case-layout{display:block;padding:0;height:100%}
.case-shell[data-layout=embedded] .case-text{padding:0;height:100%}
.case-shell[data-layout=embedded] .case-scroll{height:calc(100% - 62px);overflow:hidden}
.case-shell[data-layout=embedded] .visual-column,.case-shell[data-layout=embedded] .chapter-nav{display:none}
.embedded-page{display:block;border:0;width:100%;height:100%;background:#fff}
.case-shell[data-case=streaming][data-layout=embedded]{background:#d5d5d2;color:#202120}.case-shell[data-case=streaming][data-layout=embedded] .close{background:#ffffff80;color:#202120}.case-shell[data-case=streaming] .embedded-page{background:#d5d5d2}
@media(max-width:650px){.case-shell[data-layout=embedded] .case-scroll{height:calc(100% - 55px)}}

.opening-wash{position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit}
@media(max-width:650px){.case-shell .case-toolbar::before{content:'';position:absolute;top:7px;left:50%;width:30px;height:4px;border-radius:4px;background:currentColor;opacity:.2;transform:translateX(-50%);pointer-events:none}.case-shell .case-toolbar{position:relative}.case-shell[data-pulling=true]{will-change:transform}.case-shell .case-scroll{overscroll-behavior-y:none}}

@media(max-width:650px){.case-shell[data-frame=true] [data-motion-track]{visibility:visible}.case-shell[data-frame=true] .case-toolbar{z-index:25}}

/* Volvo's continuous case reuses the same embedded frame and navigation. */
.case-shell[data-case=self-service][data-layout=embedded]{background:#fff;color:#171b22}

.case-shell[data-case=self-service][data-layout=embedded] .close{background:#eef1f5;color:#171b22}
.case-shell[data-case=self-service] .embedded-page{background:#fff}

/* Ora reuses the embedded-page frame and existing navigation ownership. */
.case-shell[data-case=ora][data-layout=embedded]{background:#ED7890}

.case-shell[data-case=ora] .embedded-page{background:#ED7890}
.case-shell[data-case=ora][data-layout=embedded] .close{background:#ffffff80;color:#221B22}

/* Card artwork scales as a unit; the product-page demos keep their own styles. */
.travel-card .flight-flipper{width:78%;max-width:none;left:11%;gap:1.3cqw;perspective:175cqw}
.travel-card .flight-tile{border-radius:2.8cqw;perspective:100cqw}
.weather-card-composition{position:absolute;inset:0;width:100%;height:100%;filter:brightness(0)}
.weather-card-mark{display:none;filter:brightness(0)}

/* Mobile Ora uses only its centred mark; desktop artwork is one SVG composition. */
@media(max-width:650px){
 .ora.reveal-card .ora-card-collage{display:none}
 .ora.reveal-card .ora-mark{display:block;width:44%;max-width:96px;left:50%;top:50%;transform:translate(-50%,-50%)}
 .travel-card .flight-flipper{width:82%;left:9%;gap:2cqw}
 .travel-card .flight-tile:nth-child(n+4){display:none}
 .travel-card .flight-tile{border-radius:3cqw}
 .weather-card-composition{display:none}
 .weather-card-mark{display:block;position:absolute;width:32%;max-width:64px;height:auto;left:50%;top:50%;transform:translate(-50%,-50%)}
}

/* Weather's product page enters through the existing shared embedded frame. */
.case-shell[data-case=weather][data-layout=embedded]{background:#FFC800}

.case-shell[data-case=weather] .embedded-page{background:#FFC800}

/* Travel reuses the shared embedded case controller; its original card stays dark. */
.case-shell[data-case=travel][data-layout=embedded]{background:#36A1FF}

.case-shell[data-case=travel] .embedded-page{background:#36A1FF}

.guidelines-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center}