/* Reference-matched product shoot with real website footage on the screen. */
.recording-showcase{width:100%;margin:0;border-radius:0;overflow:hidden;background:var(--paper)}
.recording-scene{position:relative;height:56.28vw;min-height:280px;isolation:isolate;overflow:hidden;background:var(--paper);container-type:inline-size}
.monitor-reference-plate{width:100%;height:100%;object-fit:cover;filter:none}
.monitor-projection-canvas{position:absolute;left:var(--monitor-left,0px);top:var(--monitor-top,0px);width:1672px;height:941px;transform-origin:0 0;transform:scale(var(--monitor-scale,1));pointer-events:none}
.reference-monitor-screen.website-media{position:absolute;left:0;top:0;width:720px;height:450px;aspect-ratio:auto;background:#0b0e0b;border:0;border-radius:0;overflow:hidden;transform-origin:0 0;transform:matrix3d(0.9253162202381,-0.04647197420635,0,-5.580357142857e-05,0,0.9555555555556,0,0,0,0,1,0,475,140,0,1);backface-visibility:hidden}
.reference-monitor-screen.website-media>img,.reference-monitor-screen.website-media>video{width:100%;height:100%;max-width:none;object-fit:fill;object-position:center;filter:none}
.reference-monitor-screen video[controls]{pointer-events:auto}
.reference-monitor-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff03,transparent 40%);box-shadow:inset 0 0 2px #0005}
.scene-caption{position:absolute;z-index:6;left:4.3%;right:4.3%;bottom:3.2%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#dddeda;font-size:10px;letter-spacing:.06em}
.recording-control{border:1px solid #bfc6b54d;display:flex;align-items:center;gap:10px;padding:10px 15px;background:#0b1009bb;color:#f5f5ef;border-radius:30px;font-size:11px;letter-spacing:0;backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.recording-control:hover{background:#20372ce6;border-color:#bfc6b588}.recording-control-icon{width:10px;display:inline-block;font-size:10px}
.recording-caption{padding:20px 4.3%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#485348;font-size:12px;background:#e2e7e1}
.recording-caption>a{border-bottom:1px solid #82917e;padding-bottom:3px}
.chatbot-showcase{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,7vw,120px);background:#183c38;color:#f8eee8;border-radius:6px;padding:clamp(45px,6.5vw,110px);margin-top:16px;overflow:hidden}
.chatbot-eyebrow{font-size:11px;letter-spacing:.1em;color:#c8b58b;margin-bottom:40px}
.chatbot-story h2{font-size:clamp(45px,5.8vw,94px);line-height:.97;letter-spacing:-.03em}
.chatbot-story>p:not(.chatbot-eyebrow){font-size:clamp(17px,1.5vw,23px);color:#c1d1ca;line-height:1.45;max-width:440px;margin-top:30px;letter-spacing:-.02em}
.chatbot-detail{display:flex;flex-direction:column;gap:10px;margin-top:45px;padding-top:22px;border-top:1px solid #d5e1d12e;max-width:440px}
.chatbot-detail>span:first-child{font-size:9px;letter-spacing:.12em;color:#c8b58b}
.chatbot-detail>span:last-child{font-size:14px;color:#c1d1ca}
.chatbot-site-link{display:inline-flex;gap:25px;align-items:center;border-bottom:1px solid #c1d1ca77;padding-bottom:7px;margin-top:27px;font-size:13px}
.chatbot-site-link:hover{color:#c8b58b}
.chatbot-demo{width:100%;max-width:450px;justify-self:center;min-width:0}
.chatbot-video{position:relative;aspect-ratio:558/714;overflow:hidden;border-radius:22px;box-shadow:0 30px 70px #061f1a66;background:#f6f6f4;border:1px solid #ffffff1a}
.chatbot-video>img,.chatbot-video>video{width:100%;height:100%;object-fit:cover;filter:none}
.chatbot-demo>figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;color:#b6c9c0;font-size:10px}
.chatbot-demo .recording-control{background:#12322c;border-color:#b6c9c04d;font-size:10px;white-space:nowrap}
@media(max-width:1000px) and (min-width:701px){.chatbot-showcase{gap:35px;padding:45px 35px}.chatbot-story h2{font-size:49px}.chatbot-eyebrow{margin-bottom:25px}.chatbot-story>p:not(.chatbot-eyebrow){font-size:16px}.chatbot-detail{margin-top:25px}.chatbot-demo>figcaption{align-items:start;gap:10px;font-size:9px}.chatbot-demo .recording-control{font-size:9px;padding:8px 10px}}
@media(max-width:700px){
 .scene-caption{font-size:7px;gap:10px}
 .recording-control{font-size:9px;padding:8px 11px;gap:7px}
 .recording-control-icon{font-size:8px;width:8px}
 .recording-caption{font-size:9px;padding:16px 5%;gap:10px}
 .chatbot-showcase{grid-template-columns:1fr;padding:38px 22px;gap:35px;margin-top:12px}
 .chatbot-eyebrow{font-size:9px;margin-bottom:25px}
 .chatbot-story h2{font-size:47px}
 .chatbot-story>p:not(.chatbot-eyebrow){font-size:18px;margin-top:22px}
 .chatbot-detail{margin-top:25px;padding-top:18px}
 .chatbot-detail>span:first-child{font-size:8px}
 .chatbot-detail>span:last-child{font-size:12px}
 .chatbot-site-link{font-size:12px;margin-top:22px}
 .chatbot-demo{max-width:360px}
 .chatbot-video{border-radius:16px}
 .chatbot-demo>figcaption{font-size:8px;gap:8px;margin-top:16px}
 .chatbot-demo .recording-control{font-size:9px;padding:8px 10px}
}

/* Kiwi section: story column + cinematic walkthrough (16:9), evenly spaced */
.chatbot-showcase{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:clamp(40px,5.5vw,96px);padding:clamp(48px,6vw,96px) clamp(32px,5vw,88px)}
.chatbot-story{min-width:0}
.chatbot-eyebrow{margin-bottom:28px}
.chatbot-story h2{font-size:clamp(36px,3.5vw,56px);line-height:1.02;letter-spacing:-.03em;max-width:none}
.chatbot-story>p:not(.chatbot-eyebrow){font-size:clamp(16px,1.2vw,19px);line-height:1.5;max-width:40ch;margin-top:26px}
.chatbot-detail{margin-top:34px;padding-top:20px;max-width:40ch}
.chatbot-site-link{margin-top:24px}
.chatbot-demo{max-width:none;width:100%;min-width:0;justify-self:stretch}
.chatbot-video{aspect-ratio:16/9;width:100%;border-radius:0;background:#0e2622;border:1px solid #ffffff14;box-shadow:0 40px 90px -30px #03120f}
@media (max-width:1180px){.chatbot-showcase{grid-template-columns:1fr;gap:40px}.chatbot-demo{max-width:820px;justify-self:start}}
@media (max-width:767px){.chatbot-showcase{padding:40px 22px}.chatbot-story h2{font-size:40px}.chatbot-video{border-radius:0}}

/* 27 Estates admin platform on the monitor; tabs sit above the scene */

/* 27 Estates admin platform inside the laptop cut-out, on the green panel; tabs above */
.platform-stage.platform-laptop-stage{background:#1f524b;padding:clamp(28px,4vw,64px) clamp(16px,4vw,64px) 0;border-radius:5px;overflow:hidden}
.platform-laptop-cutout{position:relative;width:min(100%,1180px);margin:0 auto;aspect-ratio:1472/850}
.platform-laptop-cut{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;max-width:none;pointer-events:none;filter:none;mask:url('/assets/projects/27-estates/laptop-screen-mask.svg') 0 0/100% 100% no-repeat}
.platform-screen-fit{position:absolute;z-index:1;left:11.209%;top:3.647059%;width:77.717%;height:82.117647%;overflow:hidden;background:#f7f8fa}
@media(max-width:700px){.platform-stage.platform-laptop-stage{padding:18px 8px 0}}

/* phones: the monitor scenes run taller and crop their sides, so the screen reads at roughly double the size */
@media(max-width:767px){
  .recording-showcase .recording-scene{height:auto!important;min-height:0!important;aspect-ratio:1/1!important}
  .recording-showcase .monitor-reference-plate{object-fit:cover!important;object-position:center center}
}
/* in-screen tab hotspots over the sidebar switcher */
.platform-screen-inner{position:absolute;inset:0;width:100%;height:100%}
.platform-screen-inner>svg{display:block;width:100%;height:100%;max-width:none;filter:none}
.platform-screen-inner .platform-in-screen-tabs{position:absolute;inset:0;display:block;margin:0;padding:0;background:transparent}
.platform-screen-inner .platform-in-screen-tabs button{position:absolute;display:block;left:1.151316%;top:86.745562%;width:5.372807%;height:5.91716%;margin:0;padding:0;min-height:0;border:0;border-radius:6px;background:transparent;color:transparent;font-size:0;cursor:pointer;outline-offset:0;transition:box-shadow .15s}
.platform-screen-inner .platform-in-screen-tabs button[data-platform="cms"]{left:6.798246%}
.platform-screen-inner .platform-in-screen-tabs button[data-platform="hrms"]{left:12.445175%}
.platform-screen-inner .platform-in-screen-tabs button:hover{background:#c8b47920;box-shadow:inset 0 0 0 2px #c8b479}
.platform-screen-inner .platform-in-screen-tabs button:focus-visible{outline:3px solid #c8b479;background:#c8b47920}
.platform-screen-inner .platform-in-screen-tabs button[aria-selected="false"]{animation:none}
.platform-stage.platform-laptop-stage{pointer-events:auto}