.about-page main{max-width:1600px;margin:auto}
.about-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(35px,6vw,100px);align-items:center;padding:65px 8% 75px}
.about-hero h1{font-size:clamp(54px,6vw,88px);max-width:520px;margin:22px 0 28px}
.about-hero h1 em{color:#8c6e3b}
.about-hero .about-lead{font-size:clamp(18px,1.6vw,22px);line-height:1.6;color:#282a26;margin-bottom:24px}
.about-page p{font-size:16px;line-height:1.85}
.about-hero figure{margin:0;min-width:0;position:relative;aspect-ratio:4/5;overflow:hidden}
/* Keep the face and watch hand in view, ending the frame above the lap. */
.about-hero img{position:absolute;width:175%;max-width:none;height:auto;aspect-ratio:auto;left:-37.5%;top:-46%}
.about-hero .actions{align-items:center}
.about-page figcaption{font-size:11px;line-height:1.6;color:#6b6b61;margin-top:12px}
.about-experience{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1fr);gap:clamp(40px,8vw,120px);align-items:center;background:#ece8df;padding:75px 10%}
.about-experience figure{width:100%;max-width:338px;margin:0 auto}
.about-experience img{height:auto;aspect-ratio:675/960;object-fit:contain}
.about-experience h2,.about-behind h2{font-size:clamp(36px,4vw,58px)}
.about-experience p{max-width:550px}
.about-behind{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(40px,8vw,120px);align-items:center;padding:80px 10%}
.about-behind .off-clock{margin-top:34px;padding-top:26px;border-top:1px solid #d9d2c7}
.about-behind .off-clock p{margin-bottom:0}
.about-film{margin:0 auto;width:100%;max-width:310px}
.about-film-frame{position:relative;background:#242421;aspect-ratio:9/16;overflow:hidden}
.about-film video{display:block;width:100%;height:100%;object-fit:contain}
.about-film-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:linear-gradient(transparent 45%,#0006);color:#fff}
.about-film-play span{display:flex;align-items:center;gap:10px;align-self:flex-end;margin-bottom:28px;background:#f5f3ee;color:#20271f;padding:14px 20px;border-radius:3px;font:500 14px Arial,sans-serif;box-shadow:0 4px 20px #0002}
.about-film-play[hidden]{display:none}
.about-film-play svg{width:16px;height:16px;fill:currentColor}
.about-film-play:focus-visible{outline:3px solid #b87636;outline-offset:-5px}
.about-invitation{text-align:center;background:#252522;color:#f5f3ee;padding:65px 8%}
.about-invitation p{margin:0 auto;color:#d1cbc0}
.about-invitation .actions{justify-content:center}
.about-invitation .btn{background:#f5f3ee;color:#252522;border-color:#f5f3ee}
.about-invitation .btn.light{background:transparent;color:#f5f3ee;border-color:#bcb3a3}
@media(max-width:760px){
 .about-hero,.about-experience,.about-behind{grid-template-columns:1fr;padding:40px 6%;gap:30px}
 .about-hero h1{font-size:clamp(48px,12vw,68px);margin:18px 0 24px}
 .about-hero .about-lead{font-size:19px}
 .about-hero figure{max-width:460px;width:100%;margin:auto}
 .about-experience figure{order:2;max-width:300px}
 .about-page p{font-size:16px}
 .about-film{max-width:290px}
 .about-invitation{padding:45px 6%}
 .about-page footer{padding-bottom:30px}
}