.projects-page { background:#f6f5f1; color:#152c43; }
.projects-page :focus-visible { outline:3px solid #ac812c; outline-offset:5px; }
.project-wrap { max-width:1240px; margin:auto; padding-inline:clamp(20px,4vw,56px); }
.project-eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#786333; }
.project-hero { padding-top:130px; padding-bottom:64px; display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.project-hero h1 { font-size:clamp(2.7rem,5.4vw,4.8rem); letter-spacing:-.065em; line-height:1.03; font-weight:500; margin:23px 0; }
.project-hero h1 em { font-family:Georgia,serif; font-weight:400; color:#8d7547; }
.project-hero .intro { color:#536271; max-width:400px; margin-bottom:30px; }
.project-button { display:inline-flex; align-items:center; gap:22px; background:#152c43; color:white; padding:16px 22px; font-size:.86rem; border:1px solid #152c43; }
.project-button:hover { background:#27445c; }
.project-hero-note { font-size:.73rem; color:#61707a; margin-top:28px; }
.hero-photo { position:relative; }
.hero-photo > img { width:100%; height:535px; object-fit:cover; }
.hero-photo figcaption { background:#152c43; color:white; padding:15px 20px; font-size:.75rem; display:flex; justify-content:space-between; gap:12px; }
.project-index { border-block:1px solid #d5d8d7; display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:84px; }
.project-index a { display:flex; gap:15px; align-items:center; padding:24px 18px; font-size:.85rem; }
.project-index a + a { border-left:1px solid #d5d8d7; }
.project-index span { font-size:.72rem; color:#8d7547; }
.project-index a:hover { background:#ecebe5; }
.project-case { scroll-margin-top:100px; padding-bottom:80px; margin-bottom:64px; border-bottom:1px solid #d5d8d7; }
.case-heading { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:30px; align-items:end; }
.case-heading h2 { font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:500; letter-spacing:-.045em; line-height:1.12; margin-top:12px; max-width:510px; }
.case-description { font-size:.95rem; color:#536271; max-width:510px; }
.project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.project-tags li { border:1px solid #d2d5d2; padding:5px 10px; font-size:.69rem; }
.project-gallery { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.project-gallery.two { grid-template-columns:1fr 1fr; }
.project-gallery figure { min-width:0; }
.project-gallery a { display:block; position:relative; }
.project-gallery img,.project-gallery video { width:100%; height:430px; object-fit:cover; background:#182c3b; }
.project-gallery video { object-fit:contain; }
.project-gallery a::after { content:'↗'; position:absolute; bottom:14px; right:14px; display:grid; place-items:center; width:32px; height:32px; background:#f6f5f1; color:#152c43; }
.project-gallery a:hover img { filter:brightness(1.06); }
.project-gallery figcaption { color:#536271; font-size:.72rem; padding-top:10px; }
.project-actions { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:25px; }
.project-reel { margin-top:24px; background:#eaeae4; }
.project-reel summary { cursor:pointer; padding:18px 22px; font-size:.85rem; }
.project-reel summary span { float:right; }
.reel-content { padding:0 22px 22px; font-size:.8rem; }
.reel-content p { color:#536271; margin-bottom:14px; }
.reel-content button { padding:12px 18px; border:0; background:#152c43; color:white; margin-bottom:14px; }
.reel-content a { display:block; text-decoration:underline; text-underline-offset:4px; }
.reel-frame iframe { display:block; border:0; width:100%; max-width:450px; height:650px; background:white; margin:0 auto 20px; }
.project-text-link { font-size:.8rem; text-decoration:underline; text-underline-offset:5px; }
.project-text-link:hover { color:#8d7547; }
.project-cta { background:#152c43; color:white; padding:54px; display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:80px; }
.project-cta h2 { font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.15; letter-spacing:-.04em; font-weight:500; }
.project-cta p { color:#c3cdd5; font-size:.9rem; margin-top:13px; max-width:490px; }
.project-cta .project-button { background:#f6f5f1; color:#152c43; white-space:nowrap; }
.project-lightbox { margin:auto; padding:16px; border:0; background:#102335; color:white; max-width:94vw; max-height:94dvh; width:1000px; }
.project-lightbox::backdrop { background:rgba(4,12,21,.92); }
.project-lightbox img { margin:auto; max-height:75dvh; width:100%; object-fit:contain; }
.lightbox-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.lightbox-toolbar button { border:1px solid #768796; background:transparent; color:white; padding:10px 16px; }
.lightbox-toolbar p { font-size:.8rem; }
.lightbox-caption { font-size:.85rem; text-align:center; margin-top:12px; }
body.gallery-open { overflow:hidden; }
@media(min-width:1500px) { .hero-photo > img { height:590px; } }
@media(max-width:800px) {
 .project-hero { gap:32px; padding-top:110px; }
 .hero-photo > img { height:440px; }
 .project-gallery img,.project-gallery video { height:340px; }
 .case-heading { gap:24px; }
 .project-cta { padding:32px; flex-direction:column; align-items:flex-start; }
}
@media(max-width:600px) {
 .project-hero { grid-template-columns:1fr; padding-top:104px; gap:32px; padding-bottom:32px; }
 .project-hero h1 { font-size:3.25rem; max-width:350px; }
 .project-hero .intro { margin-bottom:22px; }
 .project-hero-note { margin-top:18px; }
 .hero-photo > img { height:420px; }
 .project-index { grid-template-columns:1fr; margin-bottom:50px; }
 .project-index a { padding:17px 0; }
 .project-index a + a { border-left:0; border-top:1px solid #d5d8d7; }
 .case-heading { grid-template-columns:1fr; gap:20px; }
 .project-gallery { grid-template-columns:1fr 1fr; gap:12px; }
 .project-gallery figure:last-child:nth-child(3) { grid-column:1 / -1; }
 .project-gallery img { height:270px; }
 .project-gallery video { height:420px; }
 .project-gallery.two video { height:300px; }
 .project-gallery.two:has(video) { grid-template-columns:1fr; }
 .project-gallery.two:has(video) video { height:420px; }
 .project-case { margin-bottom:45px; padding-bottom:45px; }
 .project-cta { padding:26px; margin-bottom:45px; }
 .lightbox-toolbar { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Collection and individual project pages. */
.portfolio-section { padding:30px 0 90px; scroll-margin-top:100px; }
.portfolio-heading { display:flex; align-items:end; justify-content:space-between; gap:36px; margin-bottom:32px; }
.portfolio-heading h2,.case-film h2 { font-size:clamp(1.8rem,3.4vw,2.8rem); font-weight:500; letter-spacing:-.045em; line-height:1.15; margin-top:12px; }
.portfolio-heading>p { color:#536271; max-width:340px; font-size:.9rem; }
.portfolio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 28px; }
.portfolio-card { min-width:0; scroll-margin-top:100px; }
.portfolio-card>a { display:block; }
.portfolio-card img { width:100%; height:340px; object-fit:cover; transition:filter .2s; }
.portfolio-card a:hover img { filter:brightness(1.07); }
.portfolio-card-copy { padding:22px 0 0; }
.portfolio-card h3 { font-size:1.55rem; font-weight:500; line-height:1.2; letter-spacing:-.025em; margin:10px 0; }
.portfolio-card-copy>p:not(.project-eyebrow) { color:#536271; font-size:.82rem; }
.card-more { display:flex; justify-content:space-between; border-top:1px solid #d5d8d7; margin-top:20px; padding-top:14px; font-size:.8rem; }
.project-breadcrumb { padding-top:114px; display:flex; flex-wrap:wrap; gap:9px; color:#61707a; font-size:.72rem; }
.project-breadcrumb a { text-decoration:underline; text-underline-offset:4px; }
.detail-intro { padding:42px 0 36px; max-width:890px; }
.detail-intro h1 { font-size:clamp(2.4rem,4.5vw,4rem); line-height:1.08; letter-spacing:-.055em; font-weight:500; margin:18px 0 24px; }
.detail-lead { max-width:720px; color:#536271; font-size:1.05rem; line-height:1.75; }
.detail-cover>a { display:block; background:#eaeae4; }
.detail-cover img { width:100%; height:min(70vw,650px); object-fit:contain; }
.detail-cover figcaption { color:#61707a; font-size:.72rem; padding-top:12px; }
.case-body { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:70px; padding:64px 0 72px; align-items:start; }
.story-block { display:flex; gap:24px; margin-bottom:32px; }
.story-number { color:#8d7547; font-size:.75rem; padding-top:7px; }
.story-block h2 { font-size:1.4rem; font-weight:500; line-height:1.25; margin-bottom:13px; letter-spacing:-.025em; }
.story-block p { color:#536271; font-size:.94rem; line-height:1.85; }
.case-facts { background:#eeeee7; padding:26px; }
.case-facts h2 { font-size:1rem; font-weight:600; padding-bottom:10px; }
.case-facts dl>div { padding:14px 0; border-bottom:1px solid #d5d8d7; }
.case-facts dt { color:#61707a; font-size:.72rem; margin-bottom:5px; }
.case-facts dd { font-size:.86rem; margin:0; }
.case-facts>a { display:block; margin-top:24px; line-height:1.8; }
.case-gallery { margin-bottom:64px; }
.detail-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
.detail-gallery img,.detail-gallery video { height:440px; object-fit:contain; background:#eaeae4; }
.detail-gallery figure:last-child:nth-child(odd) { grid-column:1 / -1; }
.detail-gallery figure:last-child:nth-child(odd) img { height:auto; max-height:650px; }
.case-film { margin-bottom:64px; padding-top:32px; border-top:1px solid #d5d8d7; }
.project-source { margin-bottom:50px; }
.related-projects { padding-bottom:80px; }
@media(max-width:900px) {
 .case-body { grid-template-columns:minmax(0,1fr) 260px; gap:32px; }
 .detail-gallery img,.detail-gallery video { height:360px; }
 .portfolio-card img { height:300px; }
}
@media(max-width:600px) {
 .portfolio-section { padding:24px 0 54px; }
 .portfolio-heading { flex-direction:column; align-items:flex-start; gap:18px; }
 .portfolio-grid { grid-template-columns:1fr; gap:36px; }
 .portfolio-card img { height:320px; }
 .project-breadcrumb { padding-top:100px; font-size:.67rem; }
 .detail-intro { padding:30px 0; }
 .detail-intro h1 { font-size:2.55rem; }
 .detail-lead { font-size:.95rem; }
 .detail-cover img { height:auto; max-height:560px; }
 .case-body { grid-template-columns:1fr; gap:16px; padding:40px 0 46px; }
 .story-block { gap:15px; }
 .story-block h2 { font-size:1.25rem; }
 .case-facts { padding:22px; }
 .detail-gallery { grid-template-columns:1fr; gap:26px; }
 .detail-gallery img,.detail-gallery video { height:auto; max-height:520px; }
 .case-gallery,.case-film { margin-bottom:44px; }
 .related-projects { padding-bottom:50px; }
 .hero-photo figcaption { font-size:.65rem; }
}
@media(prefers-reduced-motion:reduce) { .portfolio-card img { transition:none; } }
/* Keep the horizon visible when this portrait is used as a landscape card. */
.portfolio-card#paseo img { object-position:center bottom; }
.portfolio-card#sandwich img { object-position:center 35%; }
/* Keep the original framing: gallery images no longer share a fixed height. */
.hero-photo > img { height:auto; max-height:620px; object-fit:contain; }
.portfolio-card img { height:auto; aspect-ratio:4/3; object-fit:contain; background:#eaeae4; }
.detail-cover img { height:auto; max-height:none; object-fit:contain; }
.detail-cover.portrait-cover img { width:auto; max-width:100%; max-height:680px; margin:auto; }
.detail-cover>a { background:transparent; }
.detail-gallery { align-items:start; }
.detail-gallery img,
.detail-gallery figure:last-child:nth-child(odd) img { height:auto; max-height:none; object-fit:contain; background:transparent; }
.detail-gallery figure:last-child:nth-child(odd) img { max-height:680px; }
.project-gallery a { background:transparent; }
.case-local-film { margin:0 0 64px; }
.project-videos { display:flex; flex-wrap:wrap; gap:28px; justify-content:center; margin-top:24px; }
.project-videos figure { flex:1 1 280px; max-width:440px; min-width:0; }
.project-videos video { width:100%; height:auto; max-height:650px; object-fit:contain; background:#152c43; display:block; }
.project-videos figcaption { font-size:.8rem; color:#536271; margin-top:12px; }
.project-reel summary { display:flex; justify-content:space-between; gap:18px; min-height:56px; align-items:center; line-height:1.5; }
.project-reel summary span { flex-shrink:0; }
.project-reel summary::marker { content:''; }
.project-reel summary::-webkit-details-marker { display:none; }
.project-reel summary:hover { background:#e3e4dc; }
.project-reel[open] summary { border-bottom:1px solid #d5d8d7; margin-bottom:18px; }
.project-reel[open] summary span { transform:rotate(45deg); }
.project-cta .project-button { white-space:normal; }
.project-button { max-width:100%; }
.project-lightbox { max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); }
.project-lightbox img { max-height:calc(100dvh - 170px); }
.lightbox-toolbar button { min-width:44px; min-height:44px; }
@media(max-width:600px) {
 .hero-photo > img { height:auto; max-height:none; }
 .portfolio-card img { aspect-ratio:auto; height:auto; max-height:500px; }
 .detail-cover.portrait-cover img { width:100%; max-height:none; }
 .detail-gallery img,.detail-gallery figure:last-child:nth-child(odd) img { height:auto; max-height:none; }
 .project-videos { display:block; }
 .project-videos figure { margin-bottom:28px; max-width:none; }
 .project-videos video { max-height:70dvh; }
 .case-local-film { margin-bottom:44px; }
 .project-reel summary { padding:16px; }
 .reel-content { padding:0 16px 18px; }
 .reel-frame iframe { max-width:100%; height:600px; }
 .project-cta .project-button { font-size:.8rem; gap:12px; padding:14px; }
 .project-lightbox { padding:12px; }
 .lightbox-toolbar { display:grid; grid-template-columns:44px 1fr 44px auto; gap:6px; }
 .lightbox-toolbar button { padding:7px; font-size:.8rem; }
 .lightbox-toolbar p { text-align:center; }
 .lightbox-caption { font-size:.75rem; }
}