/* One layout width controls every section, including explicit version choices. */
body{container:hc-layout / inline-size;width:100%;min-width:0;margin:0 auto}
html[data-display=desktop] body{min-width:1180px}
html[data-display=mobile] body{max-width:480px;box-shadow:0 0 0 1px #d5e3ef,0 12px 50px #12345312}
html{scroll-padding-top:120px}
img,video,svg{max-width:100%}
main,section,aside,.hero-copy,.hero-cases,.service-panel>*,.price-grid>*,.contact-grid>*,.faq-layout>*,.principle-grid>*{min-width:0}
.display-settings{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:9px 12px;background:#edf5fb;border-bottom:1px solid #d5e3ef;width:min(100%,100vw);position:relative;left:0}
.display-settings>span:first-child{font-size:12px;margin-right:5px;color:#536a7c}
.display-settings button{min-height:44px;padding:8px 13px;font-size:13px;line-height:1.4;border:1px solid #adcce6;border-radius:8px;background:white;color:#123e63;white-space:nowrap}
.display-settings button[aria-pressed=true]{background:#0759a6;border-color:#0759a6;color:white;font-weight:700}
.footer-top{gap:24px;flex-wrap:wrap}.footer-top>div{flex-wrap:wrap;gap:16px}
.inquiry-form input[type=checkbox]{width:20px;height:20px}
.carousel-controls{flex-wrap:wrap}.carousel-controls button{min-height:44px}
.service-tabs button{min-height:64px}.hero-scene .proof-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.topline{overflow-wrap:anywhere}
@container hc-layout (min-width:761px) and (max-width:1100px){
  header{flex-wrap:wrap;gap:12px}.header-actions{margin-left:auto}
  header nav{order:2;width:100%;justify-content:center;gap:24px;padding-top:12px;border-top:1px solid var(--line)}
  .hero-scene .hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:25px;min-height:0;padding-top:36px}
  .hero-cases{padding:20px}.hero-scene .proof-grid a{padding:14px}
  .hero-scene .proof-grid strong{font-size:17px}.story-grid:not(.carousel-track){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container hc-layout (max-width:760px){
  header{gap:8px}.brand{min-width:0}.brand small{letter-spacing:0}
  header nav{justify-content:flex-start;gap:20px;font-size:13px;scrollbar-width:thin;padding:8px 0}
  header nav a{display:flex;align-items:center;min-height:44px;flex-shrink:0}
  .header-actions button{min-height:44px;font-size:12px}
  .hero-scene .hero h1{font-size:32px;overflow-wrap:anywhere}
  .hero-scene .proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-scene .proof-grid span{font-size:12px}.hero-sub,.hero-scene .hero-sub{font-size:16px}
  .hero-cases strong{font-size:14px}.service-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service-tabs button{font-size:13px;padding:12px 6px}.service-tabs button:nth-child(3n){border-right:0}
  .service-tabs button:nth-child(3n+1),.service-tabs button:nth-child(3n+2){border-right:1px solid var(--line)}
  .filters button{min-height:44px;font-size:13px}.panel-link{overflow-wrap:anywhere}
  .trust-inner>div{flex:1;min-width:0}.trust-inner span{font-size:11px}
  .contact-box input,.contact-box textarea,.review-dialog input,.review-dialog textarea,.review-dialog select,.inquiry-form input,.inquiry-form select,.inquiry-form textarea{font-size:16px}
  .compact-section .section-top{flex-wrap:wrap}.compact-section .text-link{font-size:13px}
  .mobile-bar{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:480px}
  html:not([data-display=mobile]) .mobile-bar{max-width:760px}
  footer{padding-bottom:calc(105px + env(safe-area-inset-bottom))}
  .footer-top>div{gap:14px}.footer-top>div a{min-height:44px;display:inline-flex;align-items:center}
  .review-dialog{width:min(452px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
  .admin-header nav{flex-wrap:wrap;white-space:normal}.admin-tabs{gap:8px 18px}.admin-tabs a{min-height:44px;display:flex;align-items:center}
  .admin-search{flex-wrap:wrap}.admin-search .button{flex:1}.analytics-channel{grid-template-columns:minmax(75px,1fr) minmax(35px,1fr) 64px}
  .analytics-legend{flex-wrap:wrap}.calendar-row,.calendar-day,.admin-integration{overflow-wrap:anywhere}
}
@container hc-layout (max-width:380px){
  .wrap{width:calc(100% - 24px)}header{padding-left:12px;padding-right:12px}.brand{font-size:16px}.brand-logo{width:32px;height:32px}
  .hero-scene .hero h1{font-size:29px}.hero-opening{font-size:19px}.hero-cases{padding:15px}.hero-cases>a{flex-wrap:wrap;gap:6px}
  .proof-grid strong,.hero-scene .proof-grid strong{font-size:15px}.price-table{padding:10px 12px}.phone{font-size:28px}
  .service-panel,.contact-box{padding:20px}.admin-stats{grid-template-columns:1fr}.analytics-kpis b{font-size:28px}
}

/* Service details open in the viewport, above the page and fixed phone bar. */
#service-dialog{width:min(900px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 70px #12345340}
#service-dialog::backdrop{background:rgba(15,35,55,.55)}
html:has(#service-dialog[open]){overflow:hidden}
.service-dialog-bar{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:#fff;border-bottom:1px solid var(--line)}
.service-dialog-bar button{flex-shrink:0;min-height:44px;padding:8px 16px;border:1px solid #adcce6;border-radius:8px;background:#edf5fb;color:var(--ink);font-weight:700}
#service-dialog .service-panel{margin:0;border:0;padding:28px;gap:30px}
#service-dialog .panel-link{flex-wrap:wrap}
.service-tabs button[aria-expanded=true]{background:var(--green);color:#fff}
@media(max-width:760px){#service-dialog .service-panel{grid-template-columns:1fr;padding:22px;gap:20px}#service-dialog .service-panel h3{font-size:25px}.service-dialog-bar{padding:12px 16px}}
html[data-display=mobile] #service-dialog{width:min(456px,calc(100vw - 24px))}
html[data-display=mobile] #service-dialog .service-panel{grid-template-columns:1fr;padding:22px;gap:20px}

/* Category choices reveal cases immediately in an accessible modal. */
#story-dialog{width:min(1000px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 70px #12345340}
#story-dialog::backdrop{background:rgba(15,35,55,.55)}
html:has(#story-dialog[open]){overflow:hidden}
.story-dialog-body{padding:20px}.story-dialog-body .search{width:100%;max-width:none}.story-dialog-body input{font-size:16px}
#story-dialog .story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:16px}
#story-dialog .story{min-width:0}#story-dialog .story h3{font-size:21px}#story-dialog .story p{font-size:16px}
#story-filters button[aria-expanded=true]{background:var(--green);color:#fff}
@media(max-width:760px){#story-dialog .story-grid{grid-template-columns:1fr}.story-dialog-body{padding:16px}#story-dialog .story-visual{height:190px}}
html[data-display=mobile] #story-dialog{width:min(456px,calc(100vw - 24px))}
html[data-display=mobile] #story-dialog .story-grid{grid-template-columns:1fr}