/* Approved cinematic direction, with one hotel campaign across all four agents. */
.agent-showcase{--ac-ink:#07090b;--ac-white:#f0f0fa;--ac-muted:#a6abb2;--ac-lime:#c8fa58;--ac-pad:var(--pad);height:360svh;position:relative;background:var(--ac-ink);color:var(--ac-white);font-family:Manrope,sans-serif;isolation:isolate}
.agent-showcase *{box-sizing:border-box}
.agent-showcase h2,.agent-showcase h3,.agent-showcase h4,.agent-showcase p{margin:0}
.agent-showcase .team-stage{height:100svh;min-height:0;position:sticky;top:0;overflow:hidden;padding:var(--site-header-height,104px) 0 0;display:flex;flex-direction:column;background:var(--ac-ink)}
.agent-showcase .ac-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:20px var(--ac-pad);font-size:12px;font-weight:400;line-height:1.5;color:var(--ac-muted);flex:none}
.agent-showcase .ac-team-intro{min-width:0;max-width:720px}
.agent-showcase .ac-intro h2{font:500 clamp(28px,2.5vw,38px)/1.12 Manrope,sans-serif;color:var(--ac-white);letter-spacing:-.05em;text-wrap:balance}
.agent-showcase .ac-intro h2 em{font-style:normal;color:var(--ac-lime)}
.agent-showcase .ac-team-description{font-size:13px;line-height:1.5;margin-top:10px;max-width:620px;text-wrap:pretty}
.agent-showcase .ac-intro>p{text-align:right;letter-spacing:.02em;flex:none;padding-bottom:2px}
.agent-showcase .ac-stage{position:relative;flex:1;min-height:0;isolation:isolate}
.agent-showcase .ac-setting{position:absolute;inset:0;z-index:-2;overflow:hidden}
.agent-showcase .ac-setting img{width:100%;height:100%;object-fit:cover;object-position:62% 52%;filter:saturate(.6);opacity:.28;transform:scale(1.02);transition:opacity .6s cubic-bezier(.22,1,.36,1),filter .6s cubic-bezier(.22,1,.36,1)}
.agent-showcase .ac-setting:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#07090b 0%,rgba(7,9,11,.84) 24%,rgba(7,9,11,.2) 100%),linear-gradient(0deg,#07090b,rgba(7,9,11,0) 35%,rgba(7,9,11,.05) 75%,#07090b)}
.agent-showcase[data-role="0"] .ac-setting img{filter:saturate(.8);opacity:1}
.agent-showcase[data-role="0"] .ac-setting:after{background:linear-gradient(90deg,rgba(7,9,11,.9),rgba(7,9,11,.7) 28%,rgba(7,9,11,.13) 68%),linear-gradient(0deg,#07090b,rgba(7,9,11,0) 30%,rgba(7,9,11,.2) 82%,#07090b)}
.agent-showcase .ac-panel{position:absolute;inset:0;padding:24px var(--ac-pad) 32px;outline-offset:-8px}
.agent-showcase .ac-panel[hidden]{display:none}
.agent-showcase .ac-heading{position:relative;z-index:2;max-width:640px}
.agent-showcase .ac-role{display:flex;align-items:center;gap:8px;font-size:12px;line-height:20px;color:var(--ac-lime);margin-bottom:16px}
.agent-showcase .ac-role:before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.agent-showcase .ac-task-description{font-size:13px;line-height:1.5;color:var(--ac-muted);margin-top:12px;max-width:600px;text-wrap:pretty}
.agent-showcase .ac-heading h3{font-size:clamp(48px,4.4vw,64px);line-height:1.04;letter-spacing:-.055em;font-weight:500;text-wrap:balance}
.agent-showcase .ac-heading h3 span{display:block}
.agent-showcase .ac-reception{position:absolute;left:var(--ac-pad);right:var(--ac-pad);bottom:40px;display:grid;grid-template-columns:1fr minmax(240px,.6fr);gap:64px;align-items:end}
.agent-showcase .ac-conversation{max-width:540px}
.agent-showcase .ac-origin{font-size:12px;line-height:1.5;color:var(--ac-muted);margin-bottom:12px}
.agent-showcase .ac-question{font-size:18px;line-height:1.5;color:#c0c5cb;padding-left:20px;border-left:1px solid #ffffff40;margin-bottom:24px;max-width:440px}
.agent-showcase .ac-answer{font-size:24px;line-height:1.4;letter-spacing:-.03em;color:var(--ac-white)}
.agent-showcase .ac-guest-confirmation{font-size:16px;line-height:1.5;color:#c0c5cb;padding-left:20px;border-left:1px solid #ffffff40;margin-top:24px;max-width:420px}
.agent-showcase .ac-booking{border-top:1px solid #ffffff30;padding-top:24px;position:relative}
.agent-showcase .ac-booking>p{font-size:14px;color:#c0c5cb;margin-bottom:16px}
.agent-showcase .ac-booking strong{font-size:clamp(36px,3.4vw,56px);line-height:1;letter-spacing:-.055em;font-weight:400;display:block;white-space:nowrap}
.agent-showcase .ac-booking .ac-stay-details{margin-top:16px;margin-bottom:0;font-size:14px}
.agent-showcase .ac-confirmation{display:flex;align-items:center;gap:8px;margin-top:24px;font-size:12px;color:var(--ac-white)}
.agent-showcase .ac-confirmation i{width:5px;height:5px;flex:none;border-radius:50%;background:var(--ac-lime)}
.agent-showcase .ac-marketing{position:absolute;left:var(--ac-pad);right:var(--ac-pad);bottom:40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.agent-showcase .ac-budget-label{font-size:12px;line-height:1.4;color:var(--ac-muted);margin-bottom:16px}
.agent-showcase .ac-budget{font-size:80px;line-height:1;letter-spacing:-.065em;font-weight:400;white-space:nowrap}
.agent-showcase .ac-budget small{font-size:24px;color:var(--ac-muted);letter-spacing:-.035em;margin-right:12px}
.agent-showcase .ac-budget-note{font-size:12px;line-height:1.5;color:var(--ac-muted);margin-top:24px;max-width:240px}
.agent-showcase .ac-ad-reference{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.agent-showcase .ac-ad-reference>img{width:88px;height:64px;object-fit:cover;object-position:60% 50%;flex:none}
.agent-showcase .ac-ad-reference p{font-size:16px;line-height:1.35;letter-spacing:-.025em;color:var(--ac-white)}
.agent-showcase .ac-ad-reference small{display:block;font-size:12px;line-height:1.5;color:var(--ac-muted);margin-top:8px}
.agent-showcase .ac-allocation{display:grid;gap:24px}
.agent-showcase .ac-channel{position:relative}
.agent-showcase .ac-channel-head{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:12px;gap:16px}
.agent-showcase .ac-channel-head strong{font-size:24px;letter-spacing:-.035em;font-weight:400;white-space:nowrap}
.agent-showcase .ac-bar{height:2px;background:#ffffff20;position:relative;overflow:hidden}
.agent-showcase .ac-bar span{position:absolute;inset:0;background:#e4e7e9;transform-origin:left;transform:scaleX(.5)}
.agent-showcase .ac-channel:last-child .ac-bar span{background:#929ca6}
.agent-showcase .ac-allocation-status{font-size:12px;line-height:1.4;color:var(--ac-lime);margin-top:24px}
.agent-showcase .ac-content-caption{position:absolute;left:var(--ac-pad);bottom:40px;max-width:260px;font-size:14px;line-height:1.5;color:#c0c5cb}
.agent-showcase .ac-art-title{position:absolute;left:42%;top:46%;z-index:1;max-width:400px;color:#fff;text-shadow:0 2px 24px #020b1240}
.agent-showcase .ac-art-title h4{font-weight:400;font-size:clamp(48px,4.4vw,64px);line-height:1.05;letter-spacing:-.055em}
.agent-showcase .ac-art-title h4 span{display:block}
.agent-showcase .ac-art-title>p{font-size:14px;line-height:1.5;letter-spacing:0;margin-top:16px;color:#e6e8eb}
.agent-showcase .ac-crop{position:absolute;right:var(--ac-pad);top:clamp(140px,calc(100% - 410px),190px);width:190px;height:338px;border:1px solid #ffffff7a;z-index:0}
.agent-showcase .ac-crop-image{position:absolute;inset:0;overflow:hidden;background:#15232d}
.agent-showcase .ac-crop-image img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:saturate(.75)}
.agent-showcase .ac-crop-image:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,9,11,.75),rgba(7,9,11,.08) 70%)}
.agent-showcase .ac-story-title{position:absolute;z-index:1;left:16px;right:16px;bottom:24px;color:#fff}
.agent-showcase .ac-story-title p{font-size:30px;font-weight:400;line-height:1.05;letter-spacing:-.05em}
.agent-showcase .ac-story-title span{display:block}
.agent-showcase .ac-story-title small{display:block;font-size:11px;line-height:1.5;margin-top:12px}
.agent-showcase .ac-crop:before,.agent-showcase .ac-crop:after{content:'';position:absolute;left:-5px;width:9px;height:9px;background:#f0f0fa}
.agent-showcase .ac-crop:before{top:-5px}
.agent-showcase .ac-crop:after{bottom:-5px}
.agent-showcase .ac-format{position:absolute;right:var(--ac-pad);bottom:24px;display:flex;gap:24px;color:#d3d6d9;font-size:12px;line-height:1.5}
.agent-showcase .ac-format span:last-child{color:var(--ac-lime)}
.agent-showcase .ac-coordinator{position:absolute;left:var(--ac-pad);right:var(--ac-pad);bottom:40px;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:end}
.agent-showcase .ac-brief-label{font-size:12px;line-height:1.5;color:var(--ac-muted);margin-bottom:16px}
.agent-showcase .ac-brief{font-size:24px;line-height:1.35;letter-spacing:-.035em;font-weight:400;max-width:320px}
.agent-showcase .ac-dispatch{display:grid;gap:0}
.agent-showcase .ac-dispatch-row{display:grid;grid-template-columns:110px 1fr;column-gap:24px;align-items:center;border-top:1px solid #ffffff22;padding:20px 0}
.agent-showcase .ac-dispatch-row:last-child{padding-bottom:0}
.agent-showcase .ac-dispatch-row>span{font-size:14px;color:#e0e3e6}
.agent-showcase .ac-dispatch-row strong{display:block;font-weight:400;font-size:14px;line-height:1.4;color:#c6cbd0}
.agent-showcase .ac-dispatch-row small{display:block;color:var(--ac-lime);font-size:12px;line-height:1.4;margin-top:8px}
.agent-showcase .ac-navigation{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:16px var(--ac-pad) 24px;flex:none}
.agent-showcase .ac-navigation button{border:0;border-top:1px solid #ffffff2c;border-radius:0;background:none;color:#949ba3;text-align:left;font-family:Manrope,sans-serif;font-size:14px;font-weight:400;line-height:1.4;position:relative;display:flex;align-items:center;gap:12px;padding:12px 0 0;min-height:44px;transition:color .3s cubic-bezier(.22,1,.36,1)}
.agent-showcase .ac-navigation button small{display:inline;font-size:11px;color:#78818a;margin-bottom:0}
.agent-showcase .ac-navigation button[aria-selected="true"]{color:var(--ac-white);border-top-color:#ffffff2c}
.agent-showcase .ac-navigation button[aria-selected="true"] small{color:var(--ac-lime)}
.agent-showcase .ac-navigation button:hover{color:var(--ac-white)}
.agent-showcase .ac-navigation button:before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--ac-lime);transform:scaleX(var(--agent-progress,0));transform-origin:left;opacity:.35;transition:opacity .3s}
.agent-showcase .ac-navigation button[aria-selected="true"]:before{opacity:1}
.agent-showcase .ac-navigation button:focus-visible{outline:1px solid var(--ac-white);outline-offset:6px}
.agent-showcase .ac-status-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-height:1000px) and (min-width:761px){
 .agent-showcase .ac-crop{top:220px;width:216px;height:384px}
 .agent-showcase .ac-art-title{top:46%}
}
@media(max-width:1000px){
 .agent-showcase .ac-reception{grid-template-columns:1fr 220px;gap:32px}
 .agent-showcase .ac-answer{font-size:20px}
 .agent-showcase .ac-marketing{gap:40px}
 .agent-showcase .ac-budget{font-size:64px}
 .agent-showcase .ac-art-title{left:40%;max-width:240px}
 .agent-showcase .ac-art-title h4{font-size:44px}
 .agent-showcase .ac-crop{width:170px;height:302px;top:clamp(140px,calc(100% - 374px),212px)}
 .agent-showcase .ac-coordinator{gap:32px;grid-template-columns:.7fr 1.3fr}
 .agent-showcase .ac-brief{font-size:20px}
 .agent-showcase .ac-dispatch-row{grid-template-columns:94px 1fr;gap:16px}
}
@media(max-width:760px){
 .agent-showcase{--ac-pad:32px}
 .agent-showcase .ac-heading h3{font-size:48px}
 .agent-showcase .ac-reception{grid-template-columns:1fr 180px;gap:24px}
 .agent-showcase .ac-question{font-size:16px}
 .agent-showcase .ac-answer{font-size:20px}
 .agent-showcase .ac-booking strong{font-size:36px}
 .agent-showcase .ac-booking>p,.agent-showcase .ac-booking .ac-stay-details{font-size:12px}
 .agent-showcase .ac-ad-reference>img{width:64px;height:64px}
 .agent-showcase .ac-art-title{left:36%;max-width:240px}
 .agent-showcase .ac-art-title h4{font-size:36px}
 .agent-showcase .ac-crop{right:32px;width:160px;height:284px;top:230px}
 .agent-showcase .ac-content-caption{max-width:190px}
 .agent-showcase .ac-navigation{gap:16px}
}
/* Keep the entire story visible on everyday laptop screens. */
@media(min-width:901px) and (min-height:680px) and (max-height:859px){
 .agent-showcase .ac-intro{padding-top:16px;padding-bottom:12px}
 .agent-showcase .ac-panel{padding-top:16px}
 .agent-showcase .ac-heading h3{font-size:clamp(40px,4vw,54px)}
 .agent-showcase .ac-role{margin-bottom:12px}
 .agent-showcase .ac-crop{top:118px;width:160px;height:284px}
 .agent-showcase .ac-art-title{top:43%;left:43%}
 .agent-showcase .ac-art-title h4{font-size:clamp(40px,4vw,54px)}
 .agent-showcase .ac-reception,.agent-showcase .ac-marketing,.agent-showcase .ac-coordinator{bottom:24px}
 .agent-showcase .ac-question{font-size:16px;margin-bottom:16px}
 .agent-showcase .ac-answer{font-size:22px}
 .agent-showcase .ac-guest-confirmation{font-size:14px;margin-top:16px}
 .agent-showcase .ac-origin{margin-bottom:8px}
 .agent-showcase .ac-budget{font-size:64px}
 .agent-showcase .ac-ad-reference{margin-bottom:24px}
 .agent-showcase .ac-dispatch-row{padding:16px 0}
 .agent-showcase .ac-dispatch-row:last-child{padding-bottom:0}
}
@media(max-height:679px),(max-width:900px){
 .agent-showcase{height:auto}
 .agent-showcase .team-stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible;padding-top:104px}
 .agent-showcase .ac-stage{flex:none;height:660px}
 .agent-showcase .ac-navigation{position:sticky;bottom:0;z-index:5;background:#07090bf5;padding-top:20px;padding-bottom:24px;backdrop-filter:blur(16px)}
}
@media(max-width:560px){
 .agent-showcase{--ac-pad:24px}
 .agent-showcase .team-stage{padding-top:88px}
 .agent-showcase .ac-intro{align-items:flex-start;flex-direction:column;font-size:11px;gap:16px}
 .agent-showcase .ac-intro h2{font-size:28px}
 .agent-showcase .ac-intro>p{text-align:left;max-width:none}
 .agent-showcase .ac-stage{height:860px}
 .agent-showcase .ac-panel{padding-top:24px}
 .agent-showcase .ac-heading{max-width:100%}
 .agent-showcase .ac-role{font-size:12px;margin-bottom:16px}
 .agent-showcase .ac-heading h3{font-size:36px;line-height:1.1}
 .agent-showcase .ac-setting img{object-position:67% 50%}
 .agent-showcase .ac-setting:after{background:linear-gradient(90deg,#07090b,rgba(7,9,11,.4)),linear-gradient(0deg,#07090b,transparent 45%,rgba(7,9,11,.5))}
 .agent-showcase .ac-reception{left:24px;right:24px;top:232px;bottom:40px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:32px}
 .agent-showcase .ac-conversation{max-width:none}
 .agent-showcase .ac-origin{font-size:12px;max-width:300px;margin-bottom:16px}
 .agent-showcase .ac-question{font-size:16px;margin-bottom:24px;padding-left:16px;max-width:300px}
 .agent-showcase .ac-answer{font-size:20px;max-width:340px}
 .agent-showcase .ac-guest-confirmation{font-size:16px;margin-top:24px;padding-left:16px}
 .agent-showcase .ac-booking{padding-top:24px}
 .agent-showcase .ac-booking>p{font-size:12px;margin-bottom:12px}
 .agent-showcase .ac-booking strong{font-size:40px}
 .agent-showcase .ac-booking .ac-stay-details{font-size:14px;margin-top:12px}
 .agent-showcase .ac-confirmation{font-size:12px;margin-top:16px}
 .agent-showcase .ac-marketing{left:24px;right:24px;bottom:40px;display:block}
 .agent-showcase .ac-budget{font-size:64px}
 .agent-showcase .ac-budget small{font-size:20px;margin-right:8px}
 .agent-showcase .ac-budget-note{margin-top:16px;max-width:none}
 .agent-showcase .ac-distribution{margin-top:40px}
 .agent-showcase .ac-ad-reference{margin-bottom:24px}
 .agent-showcase .ac-ad-reference>img{width:80px;height:64px}
 .agent-showcase .ac-allocation{gap:24px}
 .agent-showcase .ac-channel-head strong{font-size:24px}
 .agent-showcase .ac-allocation-status{margin-top:24px}
 .agent-showcase .ac-art-title{display:none}
 .agent-showcase .ac-crop{left:calc(50% - 100px);right:auto;width:200px;height:356px;top:244px}
 .agent-showcase .ac-content-caption{left:24px;bottom:96px;max-width:260px;font-size:14px}
 .agent-showcase .ac-format{left:24px;right:24px;bottom:40px;justify-content:space-between;gap:16px}
 .agent-showcase .ac-coordinator{left:24px;right:24px;bottom:40px;display:block}
 .agent-showcase .ac-brief-label{font-size:12px;margin-bottom:8px}
 .agent-showcase .ac-brief{max-width:290px;font-size:20px;margin-bottom:32px}
 .agent-showcase .ac-dispatch-row{grid-template-columns:92px 1fr;gap:16px;padding:20px 0}
 .agent-showcase .ac-dispatch-row>span,.agent-showcase .ac-dispatch-row strong{font-size:12px}
 .agent-showcase .ac-dispatch-row small{font-size:12px}
 .agent-showcase .ac-navigation{grid-template-columns:1fr 1fr;gap:16px 24px;padding:16px 24px 24px}
 .agent-showcase .ac-navigation button{min-height:54px;padding-top:12px}
}
/* Keep each operational demo and its headline in one centered composition.
   The cinematic Content chapter retains its full-width artwork. */
@media(min-width:901px){
 .agent-showcase .ac-panel--centered{width:min(1040px,calc(100% - var(--ac-pad)*2));margin-inline:auto;padding:24px 0;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4svh,44px)}
 .agent-showcase .ac-panel--centered[hidden]{display:none}
 .agent-showcase .ac-panel--centered .ac-heading{max-width:100%;flex:none}
 .agent-showcase .ac-panel--centered .ac-heading h3{font-size:clamp(40px,3.6vw,56px)}
 .agent-showcase .ac-panel--centered .ac-reception,
 .agent-showcase .ac-panel--centered .ac-marketing,
 .agent-showcase .ac-panel--centered .ac-coordinator{position:relative;inset:auto;width:100%;flex:none;align-items:center;gap:clamp(40px,5vw,80px)}
 .agent-showcase .ac-panel--centered .ac-marketing{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
 .agent-showcase .ac-panel--centered .ac-reception{grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr)}
 .agent-showcase .ac-panel--centered .ac-coordinator{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
 .agent-showcase .ac-panel--centered .ac-budget{font-size:clamp(64px,5.8vw,88px)}
 .agent-showcase .ac-panel--centered .ac-booking{padding-block:24px}
}
/* Preserve the viewport-sized scene after introducing the larger team heading. */
@media(min-width:901px) and (min-height:680px) and (max-height:740px){
 .agent-showcase .ac-intro{padding-top:14px;padding-bottom:14px}
 .agent-showcase .ac-intro h2{font-size:30px}
 .agent-showcase .ac-team-description{font-size:12px;margin-top:8px}
 .agent-showcase .ac-panel--centered{padding-block:16px;gap:20px}
 .agent-showcase .ac-heading h3,.agent-showcase .ac-panel--centered .ac-heading h3{font-size:clamp(36px,3.4vw,46px)}
 .agent-showcase .ac-role{margin-bottom:10px}
 .agent-showcase .ac-task-description{font-size:12px;margin-top:10px}
 .agent-showcase .ac-ad-reference{margin-bottom:16px}
 .agent-showcase .ac-allocation{gap:18px}
 .agent-showcase .ac-allocation-status{margin-top:18px}
 .agent-showcase .ac-crop{top:96px;width:144px;height:256px}
}
/* All four demonstrations remain readable if JavaScript is unavailable. */
.agent-showcase:not(.ac-enhanced){height:auto}
.agent-showcase:not(.ac-enhanced) .team-stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible}
.agent-showcase:not(.ac-enhanced) .ac-stage{height:auto;flex:none}
.agent-showcase:not(.ac-enhanced) .ac-panel,.agent-showcase:not(.ac-enhanced) .ac-panel[hidden]{display:block;position:relative;inset:auto;min-height:660px}
.agent-showcase:not(.ac-enhanced) .ac-navigation{display:none}
@media(max-width:560px){.agent-showcase:not(.ac-enhanced) .ac-panel,.agent-showcase:not(.ac-enhanced) .ac-panel[hidden]{min-height:860px}}
@media(prefers-reduced-motion:reduce){.agent-showcase .ac-setting img,.agent-showcase .ac-navigation button{transition:none}}