/* Keep existing mobile composition; make each desktop introduction a complete frame. */
.page-opening{display:contents}
@media(min-width:901px){
 .page-opening{display:flex;flex-direction:column;min-height:calc(100svh - var(--header-height) - 1px)}
 .page-opening>.page-intro{flex:none;padding-block:16px 24px}
 .page-opening .breadcrumb{margin-bottom:16px}
 .page-opening .intro-heading h1{font-size:clamp(38px,3.4vw,52px);line-height:1.1}
 .page-opening .intro-heading>p{font-size:16px;line-height:1.6}
 /* Services: photo and all five choices use the same available height. */
 .services-opening>.source-services{flex:1;min-height:0;padding-bottom:30px;gap:5%;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
 .services-opening .services-visual{align-self:stretch}
 .services-opening .services-visual>.picture{height:0;min-height:0;flex:1;aspect-ratio:auto}
 .services-opening .services-visual figcaption{font-size:12px;margin-top:8px}
 .services-opening .service-menu{display:flex;flex-direction:column;min-width:0}
 .services-opening .service-choice{flex:1;align-items:center;padding-block:14px;gap:15px}
 .services-opening .service-choice-index{padding-top:0}
 .services-opening .service-choice i{align-self:center}
 .services-opening .service-choice h2{font-size:clamp(23px,2vw,28px);line-height:1.2}
 .services-opening .service-choice p{font-size:16px;line-height:1.55;margin-top:5px}
 /* References: the main example and the two related comparisons stay together. */
 .references-opening>.reference-intro{flex:1;display:flex;flex-direction:column;min-height:0;padding-bottom:0}
 .references-opening .opening-grid{flex:1;min-height:0;align-items:stretch;gap:6%;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
 .references-opening .opening-copy{align-self:center}
 .references-opening .opening-copy>.tag{margin-bottom:12px}
 .references-opening .opening-copy h1{font-size:clamp(38px,3.4vw,50px);line-height:1.1}
 .references-opening .opening-copy>p{font-size:16px;line-height:1.6;margin-block:15px;max-width:31ch}
 .references-opening .opening-grid>.comparison{display:flex;flex-direction:column;min-height:0}
 .references-opening .opening-grid .comparison-images{flex:1;min-height:210px;aspect-ratio:auto}
 .references-opening .comparison figcaption{font-size:12px;line-height:1.5;padding-top:8px}
 .references-opening>.reference-pairs{flex:none;padding-block:22px 28px;gap:14px 30px}
 .references-opening .reference-pairs .comparison-images{height:clamp(130px,22svh,240px);aspect-ratio:auto}
 /* About: balance the company story and photograph inside one complete opening. */
 .about-opening-frame>.about-profile{flex:1;display:flex;flex-direction:column;padding-block:16px 30px}
 .about-opening-frame .about-profile>.breadcrumb{margin-bottom:24px}
 .about-opening-frame .about-profile-grid{flex:1;min-height:0;column-gap:6%;row-gap:22px;grid-template-rows:min-content 1fr}
 .about-opening-frame .about-profile-copy{align-self:start;max-width:none}
 .about-opening-frame .about-profile-photo{align-self:stretch;min-height:0}
 .about-opening-frame .about-profile-photo img{position:absolute;inset:0}
 .about-opening-frame .about-profile-photo>.picture{flex:1;min-height:0;height:0;aspect-ratio:auto}
 .about-opening-frame .about-profile-heading h1{font-size:clamp(46px,4vw,60px)}
 .about-opening-frame .about-profile-roots{padding:20px 24px}
 /* Contact: group related fields into two columns without changing their tab order. */
 .contact-opening>.contact-layout{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);grid-template-rows:min-content 1fr;gap:18px 5%;padding-bottom:28px}
 .contact-opening .contact-information{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;padding:20px}
 .contact-opening .contact-phone{grid-column:1/-1}
 .contact-opening .contact-phone>a{font-size:28px;line-height:1.2}
 .contact-opening .contact-location{margin:0;min-width:0}
 .contact-opening .contact-location>a{font-size:14px;line-height:1.6;gap:8px;overflow-wrap:anywhere}
 .contact-opening .contact-location svg{width:17px}
 .contact-opening .contact-phone>span,.contact-opening .contact-location>span{font-size:12px;margin-bottom:5px}
 .contact-opening .form-panel{display:flex;flex-direction:column;align-self:stretch;padding-top:14px;min-width:0}
 .contact-opening .form-heading{margin-bottom:14px}
 .contact-opening .form-heading h2{font-size:28px}
 .contact-opening .form-notice{padding:12px 14px;margin-bottom:18px;font-size:14px;line-height:1.55}
 .contact-opening #inquiry-form{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"name service" "contact message" "bottom bottom" "status status";grid-template-rows:auto minmax(min-content,1fr) auto auto;gap:14px 22px;align-content:start}
 .contact-opening #inquiry-form>.form-field:has(#name){grid-area:name}
 .contact-opening #inquiry-form>.contact-fields{grid-area:contact;align-self:start;min-width:0;margin:0}
 .contact-opening #inquiry-form>.form-field:has(#service){grid-area:service}
 .contact-opening #inquiry-form>.form-field:has(#message){grid-area:message;display:flex;flex-direction:column}
 .contact-opening #inquiry-form>.form-bottom{grid-area:bottom;align-self:end}
 .contact-opening #form-status{grid-area:status}
 .contact-opening #inquiry-form>noscript{grid-column:1/-1}
 .contact-opening .form-field{margin:0;min-width:0}
 .contact-opening .form-columns{grid-template-columns:1fr 1fr;gap:12px}
 .contact-opening .form-field input,.contact-opening .form-field select{min-height:44px;height:44px;padding:9px 10px}
 .contact-opening .form-field textarea{flex:1;min-height:116px;height:116px;padding:10px;resize:vertical}
 .contact-opening .location-compact{align-self:stretch;display:flex;flex-direction:column;min-height:0}
 .contact-opening .location-map{align-self:stretch;width:100%;flex:1;min-height:0;display:flex;flex-direction:column}
 .contact-opening .location-map iframe{flex:1;min-height:170px;height:0}
 .contact-opening .location-map>p{font-size:12px;line-height:1.5;margin-top:8px}
 .contact-opening .location-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:10px}
 .contact-opening .location-actions .action{font-size:13px;gap:12px;padding:11px 13px;min-height:44px}
 .contact-opening .location-map-link{font-size:12px;margin:0;gap:8px;min-height:44px}
}
@media(min-width:901px) and (max-height:760px){
 .page-opening>.page-intro{padding-block:12px 18px}
 .page-opening .breadcrumb{margin-bottom:12px}
 .page-opening .intro-heading h1{font-size:38px}
 .services-opening>.source-services{padding-bottom:22px}
 .services-opening .service-choice{padding-block:11px}
 .services-opening .service-choice h2{font-size:23px}
 .services-opening .service-choice p{font-size:15px;line-height:1.5;margin-top:4px}
 .references-opening .opening-copy>.tag{font-size:13px;margin-bottom:10px}
 .references-opening .opening-copy h1{font-size:38px}
 .references-opening .opening-copy>p{margin-block:12px;font-size:15px}
 .references-opening .opening-grid .comparison-images{min-height:190px}
 .references-opening>.reference-pairs{padding-block:16px 20px;gap:12px 30px}
 .references-opening .reference-pairs .comparison-images{height:clamp(124px,20svh,152px)}
 .about-opening-frame>.about-profile{padding-block:12px 22px}
 .about-opening-frame .about-profile>.breadcrumb{margin-bottom:16px}
 .about-opening-frame .about-profile-grid{row-gap:18px}
 .about-opening-frame .about-profile-heading>.tag{margin-bottom:12px}
 .about-opening-frame .about-profile-heading h1{font-size:46px}
 .about-opening-frame .about-profile-copy{font-size:16px;line-height:1.65}
 .about-opening-frame .about-profile-story{margin-top:18px;padding-top:16px}
 .about-opening-frame .about-profile-story h2{font-size:23px;margin-bottom:10px}
 .about-opening-frame .about-profile-story .quiet-link{margin-top:10px}
 .about-opening-frame .about-profile-roots{padding-block:16px}
 .contact-opening>.contact-intro{padding-block:10px 14px}
 .contact-opening .breadcrumb{margin-bottom:8px}
 .contact-opening>.contact-layout{gap:14px 5%;padding-bottom:18px}
 .contact-opening .contact-information{padding:16px 18px;gap:13px 16px}
 .contact-opening .contact-phone>a{font-size:26px}
 .contact-opening .form-panel{padding-top:10px}
 .contact-opening .form-heading{margin-bottom:10px}
 .contact-opening .form-heading h2{font-size:26px}
 .contact-opening .form-notice{margin-bottom:12px;padding-block:10px}
 .contact-opening #inquiry-form{gap:12px 20px}
 .contact-opening .form-field textarea{min-height:102px;height:102px}
}

@media(min-width:901px){
 html:not(.js) .references-opening>.reference-intro,html:not(.js) .references-opening .opening-grid{flex:none}
 html:not(.js) .references-opening .comparison-images{height:auto;min-height:0;flex:none;aspect-ratio:auto;overflow:visible}
}