section[id] { scroll-margin-top: 90px; }
.portrait-card img { width:100%; height:100%; object-fit:cover; display:block; }
.introduction { max-width:1136px; margin:0 auto; padding:110px 32px; display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }
.intro-section-copy h2 { font:800 clamp(38px,4vw,56px)/1.08 Manrope,sans-serif; letter-spacing:-.045em; margin:18px 0 20px; }
.intro-section-copy>p:not(.kicker) { color:var(--muted); font-size:18px; }
.intro-play { margin-top:20px; display:inline-flex; align-items:center; gap:20px; border:0; border-radius:4px; padding:14px 18px; background:var(--green); color:#fff; font:700 15px "DM Sans",sans-serif; cursor:pointer; }
.intro-play:hover,.intro-play:focus-visible { background:#0b3028; transform:translateY(-2px); }
.intro-video-wrap { overflow:hidden; border-radius:10px; background:#0b1714; box-shadow:0 24px 70px rgba(17,49,40,.18); aspect-ratio:9/16; width:min(100%,420px); justify-self:center; }
.intro-video-wrap video { width:100%; height:100%; display:block; object-fit:contain; object-position:center; background:#0b1714; }
@media(max-width:800px) { .introduction { grid-template-columns:1fr; gap:35px; padding:80px 22px; } .intro-video-wrap { width:min(100%,420px); aspect-ratio:9/16; } }
.work-section { max-width:none; padding:120px max(32px,calc((100% - 1136px)/2)); background:#10251f; color:#fff; }
.work-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; margin-bottom:55px; }
.work-heading h2 { font:800 clamp(42px,5vw,64px)/1.04 Manrope,sans-serif; letter-spacing:-.05em; margin:16px 0 0; max-width:760px; }
.work-heading>p { color:#b7c7c1; font-size:17px; }
.work-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ucm-project { display:grid; grid-template-columns:1.25fr .75fr; gap:36px; padding:38px; margin-bottom:18px; border:1px solid #4b675d; border-radius:8px; background:linear-gradient(135deg,#1d4539,#15342c); }
.ucm-content h3 { font:800 clamp(32px,4vw,48px)/1.08 Manrope,sans-serif; letter-spacing:-.04em; margin:16px 0; }
.ucm-content>p:not(.ucm-role) { color:#c2d0cb; }
.ucm-role { color:#c8f07c; font-weight:700; margin:24px 0 0; }
.ucm-impact { display:flex; align-items:center; gap:20px; margin:30px 0 5px; padding:22px 0; border-top:1px solid #4b675d; border-bottom:1px solid #4b675d; }
.ucm-impact strong { font:800 54px Manrope,sans-serif; color:#c8f07c; }
.ucm-impact span { max-width:330px; color:#e1e9e5; line-height:1.35; }
.ucm-media { position:relative; min-height:610px; overflow:hidden; border-radius:6px; background:#0b1714; }
.ucm-media>img { width:100%; height:100%; display:block; object-fit:cover; }
.ucm-video { position:absolute; right:14px; bottom:14px; width:42%; aspect-ratio:9/16; overflow:hidden; border:3px solid #fff; border-radius:5px; box-shadow:0 15px 40px rgba(0,0,0,.35); background:#000; }
.ucm-video video { width:100%; height:100%; display:block; object-fit:contain; }
.work-card { background:#17372e; border:1px solid #315047; border-radius:8px; padding:32px; display:flex; flex-direction:column; }
.work-card-wide { grid-column:1/-1; }
.work-meta { display:flex; gap:10px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:#9eb2aa; }
.work-meta span:not(:first-child) { border-left:1px solid #526c63; padding-left:10px; }
.work-card h3 { font:700 clamp(24px,3vw,34px)/1.18 Manrope,sans-serif; margin:24px 0 14px; }
.work-card>p { color:#c2d0cb; }
.work-lead { font-size:18px; max-width:850px; }
.work-details { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:25px; padding-top:25px; border-top:1px solid #315047; }
.work-details b,.work-result b { color:#c8f07c; text-transform:uppercase; letter-spacing:.1em; font-size:11px; }
.work-details p,.work-result p { color:#b7c7c1; font-size:14px; }
.work-result { border-top:1px solid #315047; margin-top:22px; padding-top:22px; flex:1; }
.work-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.work-tools span { border:1px solid #4a675d; border-radius:30px; padding:6px 10px; color:#d8e2de; font-size:11px; }
@media(max-width:800px) { .work-section { padding:80px 22px; } .work-heading,.work-grid,.ucm-project { grid-template-columns:1fr; gap:24px; } .ucm-project { padding:24px; } .ucm-media { min-height:520px; } .work-card-wide { grid-column:auto; } .work-details { grid-template-columns:1fr; gap:14px; } }
.video-toggle { position:absolute; right:20px; top:20px; z-index:2; width:44px; height:44px; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:rgba(16,37,31,.72); color:#fff; font:700 16px Manrope,sans-serif; cursor:pointer; backdrop-filter:blur(8px); }
.video-toggle:hover,.video-toggle:focus-visible { background:var(--green); outline:3px solid var(--accent); outline-offset:2px; }
.sound-toggle { position:absolute; left:20px; top:20px; z-index:2; min-height:44px; border:1px solid rgba(255,255,255,.7); border-radius:24px; padding:0 15px; display:flex; align-items:center; gap:8px; background:rgba(16,37,31,.78); color:#fff; font:600 13px "DM Sans",sans-serif; cursor:pointer; backdrop-filter:blur(8px); }
.sound-toggle:hover,.sound-toggle:focus-visible { background:var(--green); outline:3px solid var(--accent); outline-offset:2px; }
.copy-button { border:1px solid #718c82; background:transparent; color:#fff; border-radius:4px; padding:12px 18px; font:700 16px "DM Sans",sans-serif; cursor:pointer; }
.copy-button:hover,.copy-button:focus-visible { border-color:var(--accent); color:var(--accent); }
.copy-status { min-height:1.5em; margin:14px 0 0!important; color:var(--accent)!important; font-weight:600; }
@media (prefers-reduced-motion:reduce) { .portrait-card video { display:block!important; } }
