/* A single copy column paired with the Agentura orb office. Keep the established large type. */
.readable .hero.office-hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);grid-template-rows:auto;gap:36px;align-items:center;padding-block:65px 72px}
.readable .hero.office-hero .hero-copy{display:block;min-width:0;max-width:none}
.readable .hero.office-hero h1{margin:25px 0 30px;max-width:100%;overflow-wrap:normal;hyphens:auto}
.readable .hero.office-hero .hero-support{margin:0}
.readable .hero.office-hero .hero-description{max-width:590px;line-height:1.6}
.readable .hero.office-hero .hero-actions{margin-top:30px}
.readable .office-visual{position:relative;margin:0;min-width:0;align-self:center}
.readable .office-scene>img{width:100%;height:auto;display:block;border-radius:24px;box-shadow:0 0 75px #9a561f0c}
.readable .office-visual figcaption{margin-top:15px;display:flex;flex-direction:column;align-items:center;gap:9px;color:#b8bdc8;text-align:center;font-size:16px;line-height:1.5}
.readable .office-wordmark{font-size:54px;font-weight:600;letter-spacing:-2px;line-height:1;color:#f3f3f4;text-shadow:0 2px 0 #6d727a,0 5px 20px #ffffff18}
.readable .office-start{padding-block:65px;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.readable .office-start .start-steps{margin-top:28px;gap:34px}
.readable .office-start .start-steps li>span{margin-bottom:12px}
.readable .office-start .start-steps h3{font-size:27px;line-height:1.25}
.readable .office-start .start-steps p{line-height:1.6;margin-top:12px}
@media(min-width:1600px){.readable .hero.office-hero{width:min(1500px,calc(100% - 112px));gap:60px}}
@media(max-width:1100px){
 .readable .hero.office-hero{grid-template-columns:1fr;gap:40px;padding-top:45px}
 .readable .hero.office-hero .hero-copy{max-width:760px}
 .readable .office-visual{width:min(100%,720px);justify-self:center}
 .readable .hero.office-hero .hero-description{max-width:700px}
}
@media(max-width:700px){
 .readable .hero.office-hero{padding-block:32px 44px;gap:28px}
 .readable .hero.office-hero h1{margin:22px 0 25px;overflow-wrap:anywhere}
 .readable .office-scene>img{border-radius:15px}
 .readable .office-wordmark{font-size:44px}
 .readable .office-start{padding-block:40px}
}

.readable .office-scene{position:relative;display:block;cursor:zoom-in}
.readable .office-role{position:absolute;transform:translateX(-50%);padding:5px 10px;border:1px solid #ffffff40;border-radius:8px;background:#11151bed;color:#fff;font-size:16px;line-height:1.4;font-weight:600;white-space:nowrap;box-shadow:0 4px 18px #0004}
.readable .role-manager{left:50%;top:32%}
.readable .role-developer{left:27%;top:57%}
.readable .role-organizer{left:70%;top:64%}
@media(max-width:700px){.readable .office-role{font-size:14px;padding:4px 7px}.readable .role-developer{left:25%}.readable .role-organizer{left:72%}}