/* Poster fallback stays visible if the browser requires a touch to play. */
.visual-frame .hero-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.76)}
.visual-frame video.hero-photo{position:relative;z-index:1}
.visual-frame:after{z-index:2;pointer-events:none}
.visual-caption{z-index:3;pointer-events:none}
.video-control{z-index:4}
.visual-stamp{z-index:5;pointer-events:none}
video.hero-photo[data-blocked="true"],.portfolio-open video[data-blocked="true"]{opacity:0}
.portfolio-open .portfolio-video-poster{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.portfolio-open video{position:relative;z-index:1}
.portfolio-open:after{z-index:1}
.portfolio-open>span{z-index:2}

/* The screen and the selector are two clearly separate surfaces. */
.portal-screen-switcher{position:relative;margin:26px auto 0;max-width:900px}
.portal-screen-hint{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 6px 14px;color:var(--ink);font-size:14px;line-height:1.5}
.portal-screen-hint strong{font-weight:550}
.portal-screen-hint span{color:#59604f;font-size:13px}
.portal-screen-switcher .portal-screen-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;border:1px solid #17181618;border-radius:22px;background:#f8faf7;padding:14px;box-shadow:0 12px 32px #17181616}
.portal-screen-switcher .portal-screen-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;flex:1 1 auto;min-height:48px;padding:12px 15px;border:1px solid #17181624;border-radius:14px;background:#fff;color:#39412f;font-size:14px;font-weight:500;line-height:1.3;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.portal-screen-switcher .portal-screen-tabs button:hover{background:#f0f0e8;border-color:#17181655}
.portal-screen-switcher .portal-screen-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.portal-screen-tabs button svg{width:18px;height:18px;flex-shrink:0}
.portal-screen-tabs button:focus-visible{outline:3px solid #8f690a;outline-offset:4px}
.portal-screen-description{padding:28px 30px 30px}
.portal-screen-description p{margin-top:14px;line-height:1.65}
.portal-demo-note{margin-top:28px;line-height:1.65}

/* Breathing room for written content, without changing the reference gallery. */
.section{padding-block:clamp(88px,8vw,126px)}
.section-head{margin-bottom:44px}
.hero-copy>p,.approach-description>p,.portal-copy>p,.contact-description{line-height:1.7}
.hero-actions{margin-top:34px}
.hero-note{margin-top:24px;line-height:1.65}
.hero-portal-link{margin-top:24px;line-height:1.65}
.hero-bottom{line-height:1.7}
.approach-points{margin-top:32px}
.approach-point{padding-block:18px;line-height:1.6}
.service-card h3{margin-bottom:28px}
.service-card .intro{line-height:1.7}
.service-card ul{margin-block:30px}
.service-card li{padding-block:13px;line-height:1.6}
.service-fit{line-height:1.65;margin-bottom:32px}
.service-portal{margin-block:28px}
.services-note{margin-top:36px;line-height:1.7}
.portal-copy .btn{margin-top:30px}
.portal-inclusion{margin-top:20px;line-height:1.65}
.portal-benefits{padding-top:40px;margin-top:64px}
.portal-benefit p{margin-top:14px;line-height:1.7}
.production-teaser p{margin-top:24px;line-height:1.7}
.step p{margin-top:20px;line-height:1.7}
.faq-intro p{margin-top:26px;line-height:1.7}
.faq summary{line-height:1.5;padding-block:25px}
.faq details p{line-height:1.75;padding-bottom:28px}
.contact-description{margin-top:28px}
.contact-local{line-height:1.7}
.field{margin-bottom:30px}
.field label{margin-bottom:12px;line-height:1.5}
.form-note{margin-top:22px;line-height:1.7}

@media(max-width:800px){
  .section{padding-block:84px}
  .section-head{margin-bottom:34px}
  .portal-grid{gap:44px}
  .portal-copy>p{margin-top:30px}
  .portal-copy .btn{margin-top:30px}
  .portal-screen-hint{align-items:flex-start;flex-direction:column;gap:4px;margin-bottom:16px}
  .portal-screen-description{padding:25px 24px 27px}
  .portal-benefits{margin-top:48px;padding-top:34px}
  .work-foot{gap:24px}
}
@media(max-width:540px){
  .section{padding-block:78px}
  .hero-actions{gap:24px}
  .hero-note{margin-top:22px}
  .hero-portal-link{margin-top:24px}
  .hero-bottom .small{margin-top:14px}
  .approach-grid{gap:38px}
  .approach-point{padding-block:18px}
  .service-card{padding:30px 26px}
  .service-card h3{margin-bottom:26px}
  .service-card ul{margin-block:28px}
  .services-note>span{margin-top:24px}
  .portal-grid{gap:42px}
  .portal-screen-toolbar{padding:20px}
  .screen-environment{margin-top:10px;line-height:1.5}
  .portal-screen-description{padding:26px 22px 28px}
  .portal-screen-description strong{font-size:20px;line-height:1.4}
  .portal-screen-description p{font-size:16px;margin-top:16px;line-height:1.7}
  .portal-screen-switcher{margin-top:28px}
  .portal-screen-switcher .portal-screen-tabs{gap:9px;padding:12px;border-radius:20px}
  .portal-screen-switcher .portal-screen-tabs button{flex:1 1 calc(33.333% - 9px);min-width:0;min-height:66px;padding:11px 8px;flex-direction:column;gap:8px;border-radius:12px;font-size:12px}
  .portal-demo-note{margin-top:28px}
  .portal-benefits{gap:34px}
  .process-grid{gap:40px}
  .step h3{line-height:1.2}
  .quote-grid{gap:48px}
  .faq-grid{gap:42px}
  .contact-grid{gap:48px}
  .contact-fallback{margin-top:32px;gap:18px;line-height:1.6}
}