/* FRO follows the existing case shell. Product screens keep their native ratios. */
.fro-page #main{margin:0;overflow:clip;background:transparent;border-radius:0}
.fro-page .case-cover.fro-cover{min-height:auto;margin:0;padding:clamp(112px,12vw,180px) clamp(18px,5vw,82px) clamp(48px,7vw,112px);display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,84px);align-items:center;background:transparent;border:0;border-radius:0;color:var(--ink)}
.portfolio-case.fro-page .fro-cover h1{margin:22px 0 20px;max-width:100%;font-size:clamp(60px,6vw,104px);line-height:.92;letter-spacing:-.055em}
.fro-cover .case-role,.fro-cover .case-back{color:var(--muted)}
.fro-page .case-cover-art{min-height:0;align-self:center;aspect-ratio:16/9;padding:0}
.fro-case{width:min(100% - 40px,1480px);margin-inline:auto;color:var(--ink)}
.fro-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.5fr);gap:clamp(32px,6vw,100px);padding:clamp(44px,7vw,108px) 0;align-items:center}
.fro-intro>p{max-width:38em;font-size:clamp(20px,2.4vw,36px);line-height:1.4;letter-spacing:-.025em;margin:0}
.fro-links{display:flex;flex-wrap:wrap;gap:12px 24px}
.fro-links a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px}
.fro-section{padding:clamp(42px,7vw,108px) 0}
.fro-section h2{font-size:clamp(34px,4.5vw,68px);line-height:1.05;letter-spacing:-.045em;margin:0 0 32px}
.fro-copy{font-size:clamp(17px,1.6vw,23px);line-height:1.5;color:var(--muted);margin:0 0 36px}
.fro-stage{margin:0;min-width:0;background:var(--surface);border-radius:4px;overflow:hidden;border:0}
.fro-stage img,.fro-stage video{display:block;width:100%;height:auto;object-fit:contain;max-width:100%;border-radius:4px;transform:none}
.fro-caption{margin:18px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.fro-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.5vw,36px)}
.fro-faces{margin-top:clamp(24px,5vw,72px)}
.fro-responsive{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(24px,4vw,58px);align-items:start}
.fro-phone{width:min(100%,300px);justify-self:center}
@media(max-width:900px){.fro-page .case-cover.fro-cover{grid-template-columns:1fr;padding-top:112px}.fro-cover h1{max-width:none}.fro-intro,.fro-responsive{grid-template-columns:1fr}.fro-intro{gap:24px}.fro-phone{width:min(74%,300px)}}
@media(max-width:600px){.fro-case{width:calc(100% - 36px)}.fro-pair{grid-template-columns:1fr}.fro-section h2{margin-bottom:24px}.portfolio-case.fro-page .fro-cover h1{font-size:clamp(54px,17vw,84px)}}
@media(max-height:520px) and (min-width:901px){.fro-page .case-cover.fro-cover{padding-top:100px}}