/* Self-hosted Inter variable (Latin), shared with home.css. */
@font-face{font-family:Inter;src:url('../assets/inter-variable-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* The reference viewport is contained by the second project's existing sheet. */
.project-details--gallery{height:100%;min-height:0;padding:0}
.project-sheet:has(.project-details--gallery:not([hidden])){overflow:hidden;background:#f3f3f3}
.project-gallery{position:relative;width:100%;height:100%;overflow:clip;background:#f3f3f3;color:#111;outline:none;letter-spacing:-.02em;touch-action:none;overscroll-behavior:contain;isolation:isolate;container-type:size}
.project-gallery:focus-visible{outline:2px solid #222;outline-offset:-8px}
.gallery-intro.project-description,.gallery-outro.project-description{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:24px 32px;z-index:0}
.gallery-intro.project-description{padding-bottom:calc(24px + 6cqh)}
.gallery-intro.project-description p,.gallery-outro.project-description p{max-width:560px;margin:0;text-align:center;font-size:16px;line-height:24px}
.gallery-outro{opacity:0;pointer-events:none}
.gallery-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;pointer-events:none}
.gallery-deck{position:relative;flex:none;aspect-ratio:5/3;width:94%;max-width:1260px}
.gallery-card{position:absolute;inset:0;margin:0;overflow:hidden;border:.5px solid #0000000d;border-radius:clamp(8px,2vw,20px);background:#f7f7f7;transform-origin:center bottom;pointer-events:none}
.gallery-card>img,.gallery-card>video{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.gallery-loading{position:absolute;inset:0;display:grid;place-items:center;color:#666;font-size:13px}
.gallery-loading[hidden]{display:none}
@media(width < 768px){
 .project-gallery{background:#f0f4f0}
 .gallery-intro.project-description,.gallery-outro.project-description{padding-inline:24px}
 .gallery-outro.project-description p{text-align:center}
 .gallery-deck{scale:.97}
 .gallery-card{border-radius:10px}
}
@media(prefers-reduced-motion:reduce){
 .gallery-deck{scale:1}
}

.gallery-card:has(.preferences-film){border:0}
/* Pure-white frames get Thunder's borderDark so they separate from the white sheet and each other */
.gallery-card.gallery-card--white{border:1px solid rgba(160,160,171,.3)}

.gallery-outro.gallery-outro--interactive{z-index:0;padding:0!important;background:transparent}

/* Keep the campaign dialog centered with room for the supplied artwork. */
.gallery-card.gallery-card--sms-dialog{
 display:flex;align-items:center;justify-content:center;
 background:#ff8244 url('assets/sms-web/campaign-background.jpg') center/cover!important;
}
.gallery-card--sms-dialog>video{
 flex:none;width:auto;height:78%;max-width:84%;aspect-ratio:1600/1116;
 border-radius:2.667% / 3.823%;
 clip-path:inset(0 round 2.667% / 3.823%);
}

/* White agent frame around the existing compressed receptionist film. */
.gallery-card.gallery-card--agent-preview{
 display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:calc(16px * var(--gallery-scale,1));
 padding:calc(40px * var(--gallery-scale,1)) calc(24px * var(--gallery-scale,1));border:1px solid #0000000d;border-radius:calc(24px * var(--gallery-scale,1));
 background:#fff;color:#000;font-family:Inter,Arial,sans-serif;
 letter-spacing:normal;container-type:inline-size;
}
.agent-preview-title{margin:0;text-align:center;font-size:clamp(14px,2cqw,24px);font-weight:400;line-height:1.4;color:#000}
.gallery-card--agent-preview .agent-preview-title{font-size:calc(24px * var(--gallery-scale,1))}
.agent-preview-media{
 justify-self:center;height:100%;max-width:100%;aspect-ratio:16/9;
 /* 24px at the recording's 1600×900 size, scaling evenly with the artwork. */
 overflow:hidden;border-radius:1.5% / 2.666667%;background:#fff;
}
.agent-preview-media>video{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.agent-preview-agents{display:flex;justify-content:center;align-items:center;gap:calc(48px * var(--gallery-scale,1));list-style:none;margin:0;padding:0;color:#000}
.agent-preview-option{display:flex;align-items:center;gap:calc(12px * var(--gallery-scale,1));padding:calc(10px * var(--gallery-scale,1)) calc(16px * var(--gallery-scale,1));border:0;border-radius:100px;font-size:calc(20px * var(--gallery-scale,1));line-height:1.3;white-space:nowrap}
.agent-preview-avatar{position:relative;display:block;flex:none;width:calc(44px * var(--gallery-scale,1));aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate}
.agent-preview-avatar>img{display:block;width:100%;height:100%;object-fit:contain}
.agent-preview-avatar::after{content:"";position:absolute;inset:0;background:url('assets/angelo/glass-512.webp') center/100% 100%;mix-blend-mode:screen;opacity:.7;pointer-events:none}
.agent-preview-avatar--0{background:radial-gradient(ellipse at 65% 72%,#fff4d8 8%,transparent 55%),radial-gradient(ellipse at 28% 25%,#ffd89b,transparent 60%),#f3a248}
.agent-preview-avatar--1{background:radial-gradient(ellipse at 65% 72%,#adf2ff 8%,transparent 55%),radial-gradient(ellipse at 28% 25%,#d7f5a3,transparent 60%),#379b91}
.agent-preview-avatar--2{background:radial-gradient(ellipse at 65% 72%,#fbd7e9 8%,transparent 55%),radial-gradient(ellipse at 28% 25%,#d0c7ff,transparent 60%),#8f79d3}


/* Keep a fixed 40px inset around the third receptionist recording. */
.gallery-card.gallery-card--padded-video{box-sizing:border-box;padding:40px;}

/* borderBase from the receptionist design tokens. */
.gallery-card.gallery-card--centered-video{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:calc(40px * var(--gallery-scale,1));--colors-borderBase:rgba(160,160,171,.24);}
/* Preserve the 620×1080 recording; its 24px corners scale with the media. */
.gallery-card--centered-video>video{flex:none;box-sizing:border-box;width:auto;height:100%;max-width:100%;aspect-ratio:auto 620 / 1080;object-fit:contain;border:1px solid var(--colors-borderBase);border-radius:3.870968% / 2.222222%;}

/* Knowledge base: paired clips on the supplied cloud artwork. */
/* Scale the entire 1260px composition, including the space between its clips. */
.knowledge-film{display:grid;grid-template-rows:auto minmax(0,1fr);gap:calc(32px * var(--gallery-scale,1));box-sizing:border-box;padding:calc(56px * var(--gallery-scale,1)) calc(64px * var(--gallery-scale,1));background:#ffd0d9 url('assets/receptionist-web/knowledge-background.jpg') center/cover!important;color:#000;font-family:Inter,Arial,sans-serif;letter-spacing:normal;container-type:inline-size;}
.knowledge-video-row{display:flex;align-items:center;justify-content:center;gap:calc(80px * var(--gallery-scale,1));min-height:0;min-width:0;}
.knowledge-video-row>video{display:block;min-width:0;width:calc((100% - 80px * var(--gallery-scale,1))/2);height:auto;max-height:100%;aspect-ratio:2028/1944;object-fit:contain;border-radius:calc(16px * var(--gallery-scale,1));}

.knowledge-film>.agent-preview-title{color:#fff;font-size:calc(36px * var(--gallery-scale,1));}

.parsing-frame{display:grid;grid-template-rows:auto minmax(0,1fr);gap:32px;box-sizing:border-box;padding:40px 48px;background:#f7f7f8!important;color:#000;font-family:Inter,Arial,sans-serif;letter-spacing:normal;container-type:inline-size;}
.parsing-frame>.agent-preview-title{color:#000;font-size:clamp(20px,3cqw,36px);}
.parsing-row{display:flex;align-items:center;justify-content:center;gap:32px;min-height:0;container-type:size;}
.parsing-shot{position:relative;flex:none;width:min(28cqw,calc(100cqh * 1280 / 1923));aspect-ratio:1280/1923;overflow:hidden;border-radius:18px;box-shadow:0 0 0 1px rgba(160,160,171,.24);background:#fff;}
.parsing-shot>img{position:absolute;display:block;max-width:none;user-select:none;}
/* Fit each drawer silhouette, excluding the screenshot's surrounding page and shadow. */
.parsing-shot--outcome>img{width:104.375%;height:102.236%;left:-2.5%;top:-1.092%;}
.parsing-shot--date>img{width:103.438%;height:101.196%;left:-1.563%;top:-.52%;}
.parsing-shot--types{width:32cqw;aspect-ratio:1156/874;}
.parsing-shot--types>img{width:100%;height:100%;inset:0;}
@media(width < 768px){.parsing-frame{padding:20px 16px;gap:16px;}.parsing-row{gap:12px;}}

/* Recommendations occupy the sheet content area, never the outer viewport. */
.gallery-outro.gallery-outro--related{padding:32px 0 112px;z-index:0;background:transparent;overflow:hidden}
.related-projects{width:min(100%,1040px);min-width:0}
.project-gallery[data-scene="outro"]{touch-action:pan-x}
.project-gallery.gallery-native-scroll{overflow-x:hidden;overflow-y:auto;touch-action:pan-x pan-y;overscroll-behavior-y:contain;scrollbar-width:none}
.gallery-native-scroll::-webkit-scrollbar{display:none}
.gallery-native-viewport{position:sticky;top:0;height:var(--gallery-viewport-height,100%);overflow:clip}

/* Decorative loops never expose Safari’s native play overlay. */
.gallery-card video::-webkit-media-controls-start-playback-button{display:none!important;}

/* The authored test panel already includes its own border and rounded corners. */
.gallery-card--agent-test>video{border:0;border-radius:0;aspect-ratio:560 / 920;}