/* Edge-to-edge environmental scenes. Copy can grow without cropping people. */
.section-surface.photo-surface{--photo-space:58px;container-type:inline-size;padding:0;overflow:clip;background:#e9edef}
.photo-stage{position:relative;isolation:isolate;min-height:790px;padding:var(--photo-space);padding-bottom:70px}
.section-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#e9edef}
.section-backdrop img{position:absolute;inset:auto 0 0;width:100%;height:auto;max-width:none;aspect-ratio:3/2;object-fit:contain;mask:none;-webkit-mask:none;transform:none;filter:none}
/* Blend the photograph's own top edge, even when an expanded text column is taller. */
.section-backdrop:before{content:"";position:absolute;left:0;right:0;bottom:0;aspect-ratio:3/2;z-index:1;pointer-events:none;background:linear-gradient(180deg,#e9edef 0%,#e9edef00 22%)}
.section-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#e9edeffa 0%,#e9edefef 24%,#e9edefca 38%,#e9edef40 52%,#e9edef00 64%),linear-gradient(180deg,#e9edef 0%,#e9edef80 13%,#e9edef00 30%)}
.section-backdrop img.crossfade{animation:backdrop-in .32s var(--ease)}
@keyframes backdrop-in{from{opacity:.65}to{opacity:1}}
.photo-stage .section-head{display:block;max-width:46%;margin-bottom:32px}
.photo-stage .section-head h2{font-size:clamp(34px,3.2vw,48px)}
.photo-stage .section-subtitle{max-width:440px;margin-top:22px}
.photo-stage .service-layout,.photo-stage .profession-layout,.photo-stage .support-layout,.photo-stage .about-layout{display:block;width:42%}
.photo-stage .service-item>button{font-size:23px;padding-block:21px}
.photo-stage .profession-choice{padding-block:17px;font-size:20px}
.photo-stage .profession-picker{margin-top:10px}
.photo-stage .support-copy{perspective:none}
.photo-stage .disclosure summary{font-size:19px}
.photo-stage .about-stats{gap:26px;grid-template-columns:1fr}
.photo-stage .about-stats strong{font-size:48px}
.photo-stage .about-stats span{max-width:290px}
.photo-stage .profession-caption,.photo-stage .founder-caption{position:absolute;left:53%;right:var(--photo-space);bottom:30px;width:auto;max-width:none;margin:0;padding:0;border:0;display:block}
.photo-stage:has(.profession-caption) .section-backdrop:after,.photo-stage:has(.founder-caption) .section-backdrop:after{background:linear-gradient(90deg,#e9edeffa 0%,#e9edefef 24%,#e9edefca 38%,#e9edef40 52%,#e9edef00 64%),linear-gradient(0deg,#e9edeff5,#e9edef00 22%),linear-gradient(180deg,#e9edef 0%,#e9edef80 13%,#e9edef00 30%)}
.photo-stage .profession-caption h3,.photo-stage .founder-caption{font-size:23px;line-height:1.4}
.photo-stage .profession-caption p,.founder-caption span{font-size:15px;line-height:1.6;margin-top:8px;display:block;max-width:470px}
.founder-caption strong{font-weight:500}
.photo-followup{padding:0 var(--photo-space) 38px;background:#e9edef}
.photo-followup .catalog{margin-top:0}
.photo-followup .service-extra{margin-top:0;padding-top:30px}
.photo-followup .profession-footnote{margin-top:16px}
.about .photo-stage{min-height:790px}
@media(min-width:1440px){.photo-stage,.about .photo-stage{min-height:66.667cqw}}
@media(max-width:1199px) and (min-width:1001px){
 .section-surface.photo-surface{--photo-space:42px}
 .photo-stage,.about .photo-stage{min-height:740px}
 .photo-stage .section-head{max-width:48%}
 .photo-stage .section-head h2{font-size:36px}
 .photo-stage .section-subtitle{font-size:16px}
 .photo-stage .service-layout,.photo-stage .profession-layout,.photo-stage .support-layout,.photo-stage .about-layout{width:45%}
 .photo-stage .service-item>button{font-size:21px}
 .photo-stage .profession-choice{font-size:18px}
 .photo-stage .profession-caption,.photo-stage .founder-caption{left:53%;right:26px;bottom:24px;font-size:21px}
 .photo-stage .profession-caption h3{font-size:21px}
}
@media(max-width:1000px){
 .section-surface.photo-surface{--photo-space:36px}
 .photo-stage,.about .photo-stage{min-height:0;padding:36px var(--photo-space) 94cqw;display:block}
 .section-backdrop img{left:auto;right:0;bottom:0;width:166.667%;height:auto;aspect-ratio:3/2;transform:none}
 .section-backdrop:before{display:none}
 .section-backdrop:after,.photo-stage:has(.profession-caption) .section-backdrop:after,.photo-stage:has(.founder-caption) .section-backdrop:after{background:linear-gradient(180deg,#e9edef 0%,#e9edef calc(100% - 100cqw),#e9edef00 calc(100% - 65cqw))}
 .photo-stage .section-head{max-width:none;margin-bottom:28px}
 .photo-stage .section-subtitle{max-width:590px;margin-top:20px}
 .photo-stage .service-layout,.photo-stage .profession-layout,.photo-stage .support-layout,.photo-stage .about-layout{width:100%}
 .photo-stage .profession-caption,.photo-stage .founder-caption{position:absolute;left:var(--photo-space);right:var(--photo-space);bottom:24px;width:auto;font-size:24px;max-width:none}
 .photo-stage:has(.profession-caption) .section-backdrop:after,.photo-stage:has(.founder-caption) .section-backdrop:after{background:linear-gradient(180deg,#e9edef 0%,#e9edef calc(100% - 100cqw),#e9edef00 calc(100% - 65cqw)),linear-gradient(0deg,#e9edef 0%,#e9edefe6 7%,#e9edef00 23%)}
 .photo-stage .about-stats{grid-template-columns:1fr 1fr;max-width:550px;gap:30px}
 .photo-stage .about-stats strong{font-size:48px}
 .photo-stage .profession-picker{flex-direction:row;flex-wrap:wrap;gap:9px;margin-top:0}
 .photo-stage .profession-choice{width:auto;max-width:100%;flex-grow:1;justify-content:center;white-space:normal;text-align:center;font-size:15px;padding:12px 15px;line-height:1.5;border:1px solid #cbddec;border-radius:24px;background:#f4f9ff}
 .photo-stage .profession-choice:before{display:none}
 .photo-stage .profession-choice[aria-pressed=true]{background:#165caa;color:var(--brand-navy);border-color:#165caa;padding-left:15px;box-shadow:0 3px 0 #104681}
}
@media(max-width:600px){
 .section-surface.photo-surface{--photo-space:22px}
 .photo-stage,.about .photo-stage{padding-top:29px;padding-bottom:107cqw}
 .photo-stage .section-head h2{font-size:34px}
 .photo-stage .service-item>button{font-size:23px;padding-block:22px}
 .photo-stage .profession-choice{font-size:14px;padding:10px 13px}
 .photo-stage .profession-choice[aria-pressed=true]{padding-left:13px}
 .photo-stage .profession-caption h3,.photo-stage .founder-caption{font-size:21px}
 .photo-stage .profession-caption p,.founder-caption span{font-size:14px}
 .photo-stage .about-stats{gap:22px}
 .photo-stage .about-stats strong{font-size:43px}
 .photo-stage .disclosure summary{font-size:19px}
 .photo-followup{padding-bottom:30px}
 .photo-followup .service-extra{display:block}
 .photo-followup .service-extra p{margin:18px 0}
}
@media(max-width:360px){
 .section-surface.photo-surface{--photo-space:18px}
 .photo-stage .section-head h2{font-size:30px}
 .photo-stage .profession-choice{font-size:14px;padding:10px}
 .photo-stage .profession-choice[aria-pressed=true]{padding-left:10px}
 .photo-stage .about-stats strong{font-size:36px}
}
@media(prefers-reduced-motion:reduce){.section-backdrop img{animation:none!important}}

/* Keep the reception sign and the queue visible beside the service menu. */
.services .section-backdrop:has(#service-image[src$="reception-mka.webp"]):before{background:linear-gradient(180deg,#e9edef,#e9edef00 4%)}
.services .section-backdrop:has(#service-image[src$="reception-mka.webp"]):after{background:linear-gradient(90deg,#e9edeffa 0%,#e9edefef 24%,#e9edefca 38%,#e9edef40 52%,#e9edef00 64%)}
@media(max-width:1000px){
 .services #service-image[src$="reception-mka.webp"]{width:150%}
 .services .section-backdrop:has(#service-image[src$="reception-mka.webp"]):after{background:linear-gradient(180deg,#e9edef 0%,#e9edef calc(100% - 100cqw),#e9edef00 calc(100% - 86cqw))}
}

/* Captions belong to the text column, leaving the complete scene unobscured. */
.photo-stage .profession-caption,.photo-stage .founder-caption{position:relative;inset:auto;width:42%;margin-top:30px;max-width:none}
.photo-stage:has(.profession-caption) .section-backdrop:after,.photo-stage:has(.founder-caption) .section-backdrop:after{background:linear-gradient(90deg,#e9edeffa 0%,#e9edefef 24%,#e9edefca 38%,#e9edef40 52%,#e9edef00 64%),linear-gradient(180deg,#e9edef 0%,#e9edef80 13%,#e9edef00 30%)}
@media(max-width:1199px) and (min-width:1001px){.photo-stage .profession-caption,.photo-stage .founder-caption{width:45%}}
@media(max-width:1000px){.photo-stage .profession-caption,.photo-stage .founder-caption{width:100%;margin-top:28px}.photo-stage:has(.profession-caption) .section-backdrop:after,.photo-stage:has(.founder-caption) .section-backdrop:after{background:linear-gradient(180deg,#e9edef 0%,#e9edef calc(100% - 100cqw),#e9edef00 calc(100% - 65cqw))}}

/* Founder portrait: a readable biography alongside the full office scene. */
.about .photo-stage{min-height:max(790px,66.667cqw)}
.about .photo-stage .section-backdrop:before{background:linear-gradient(180deg,#e9edef,#e9edef00 4%)}
.about .photo-stage .section-backdrop:after{background:linear-gradient(90deg,#e9edeffa 0%,#e9edefef 24%,#e9edefca 38%,#e9edef40 52%,#e9edef00 64%)}
.about .photo-stage .founder-caption{position:relative;inset:auto;width:42%;margin:38px 0 40px;padding:0;border:0;color:var(--ink)}
.about .founder-role{font-size:16px;line-height:1.5;color:var(--brand-blue);margin-bottom:12px}
.about .founder-caption h3{font-size:clamp(28px,2.6vw,38px);line-height:1.2;letter-spacing:-.035em;font-weight:600}
.about .founder-expertise{font-size:19px;line-height:1.6;color:var(--brand-navy);margin-top:16px}
.about .photo-stage .about-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0;padding-top:28px;border-top:1px solid #c9d9e7}
.about .photo-stage .about-stats strong{font-size:38px;white-space:nowrap}
.about .photo-stage .about-stats span{font-size:14px;line-height:1.65}
.about .company-data-note{margin-top:19px;max-width:370px}
@media(max-width:1199px) and (min-width:1001px){
 .about .photo-stage .founder-caption{width:45%}
 .about .photo-stage .about-stats{gap:20px}
 .about .photo-stage .about-stats strong{font-size:34px}
}
@media(max-width:1000px){
 .about .photo-stage{display:flex;flex-direction:column;min-height:0;padding-bottom:var(--section-top)}
 .about .photo-stage .section-head{order:0}
 .about .photo-stage .section-backdrop{order:1;position:relative;inset:auto;z-index:0;overflow:hidden;margin:0 calc(-1 * var(--photo-space));background:none}
 .about .photo-stage .section-backdrop img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
 .about .photo-stage .section-backdrop:before{display:none}
 .about .photo-stage .section-backdrop:after{background:linear-gradient(180deg,#e9edef 0%,#e9edef00 3%,#e9edef00 92%,#e9edef 100%)}
 .about .photo-stage .founder-caption{order:2;width:100%;margin:22px 0 30px}
 .about .founder-caption h3{font-size:34px}
 .about .founder-expertise{font-size:18px;margin-top:12px}
 .about .photo-stage .about-layout{order:3}
 .about .photo-stage .about-stats{max-width:none}
}
@media(max-width:600px){
 .about .photo-stage .founder-caption{margin-top:16px}
 .about .founder-role{font-size:15px;margin-bottom:9px}
 .about .founder-caption h3{font-size:30px}
 .about .founder-expertise{font-size:17px}
 .about .photo-stage .about-stats{gap:20px;padding-top:24px}
 .about .photo-stage .about-stats strong{font-size:32px}
 .about .photo-stage .about-stats span{font-size:13px}
}

/* Profession descriptions disclose next to the selected name, as in Services. */
.professions .profession-picker{display:flex;flex-direction:column;gap:0;margin:0;border-top:1px solid var(--line)}
.professions .profession-item{border-bottom:1px solid var(--line);min-width:0}
.professions .profession-choice{align-items:center;justify-content:space-between;gap:18px;width:100%;max-width:none;padding:18px 0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left;font-size:20px;line-height:1.4;white-space:normal;color:var(--brand-navy);transition:color .2s}
.professions .profession-choice:before{display:none}
.professions .profession-choice[aria-expanded=true],.professions .profession-choice:hover{color:var(--brand-blue)}
.professions .profession-choice .disclosure-chevron{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid #c4d9ee;border-radius:50%;background:#edf5fe;color:var(--brand-blue);transition:transform .24s var(--ease),background .18s,color .18s}
.professions .profession-choice[aria-expanded=true] .disclosure-chevron{transform:rotate(180deg);background:#1d6bb8;color:var(--brand-navy);border-color:#1d6bb8}
.profession-detail{height:0;overflow:hidden;opacity:0}
.profession-detail>div{display:flow-root}
.profession-detail p{margin:0 0 22px;font-size:16px;line-height:1.75;color:var(--muted)}
/* Industry layout is defined in industries.css. */
@media(max-width:600px){.professions .profession-choice{font-size:18px;padding:16px 0}}
@media(prefers-reduced-motion:reduce){.professions .profession-choice,.professions .disclosure-chevron{transition:none}}

/* Decorative canvas shares the photo's frame and never captures clicks or scrolling. */
.professions .section-backdrop .egg-surprise{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;z-index:0}
.professions .section-backdrop .egg-surprise[hidden]{display:none}
