.ref-hero{display:grid;grid-template-columns:.88fr 1.12fr;gap:65px;align-items:center;padding-top:35px;padding-bottom:78px}.ref-hero h1{font-size:clamp(3rem,5.5vw,5.2rem);line-height:1.06}.ref-hero em{font-style:normal;color:var(--cyan-dark)}.ref-hero .lead{margin-bottom:28px}.ref-hero-picture{display:block;position:relative;min-height:510px;height:100%;border-radius:5px;overflow:hidden;background:var(--night)}.ref-hero-picture>img{width:100%;height:100%;position:absolute;object-fit:cover}.ref-hero-picture>span{position:absolute;left:22px;right:22px;bottom:22px;background:var(--night);color:white;padding:23px 60px 23px 24px}.ref-hero-picture small{display:block;color:#97dfea;text-transform:uppercase;letter-spacing:.1em;font-size:10px;margin-bottom:7px}.ref-hero-picture strong{font-size:20px;line-height:1.35;display:block}.ref-hero-picture b{position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400}.ref-projects{background:#f3f7f8}.ref-projects .section-heading{align-items:end}.ref-result{font-size:13px;white-space:nowrap;color:var(--muted);padding-bottom:8px}.ref-tools{margin:32px 0}.ref-filters{display:flex;flex-wrap:wrap;gap:9px}.ref-filters button{border:1px solid #ccdade;border-radius:30px;background:white;padding:9px 15px;font:700 12px Manrope,Arial,sans-serif;min-height:40px;color:var(--night)}.ref-filters button[aria-pressed=true]{color:white;background:var(--night);border-color:var(--night)}.ref-search{display:flex;align-items:center;gap:20px;margin-top:20px;font-size:12px;font-weight:700;color:var(--muted)}.ref-search input{border:1px solid #c7d6dc;border-radius:4px;padding:11px 14px;background:white;max-width:350px;width:100%;font-size:13px;color:var(--ink)}.ref-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.ref-project{min-width:0;background:white;border:1px solid #e0e8eb;border-radius:6px;overflow:hidden;transition:box-shadow .2s,transform .2s}.ref-project:hover{box-shadow:0 14px 35px #142c3310;transform:translateY(-3px)}.ref-project>a{height:100%;display:flex;flex-direction:column}.ref-card-picture{height:270px;position:relative;overflow:hidden;background:#e1e9ec}.ref-card-picture img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.ref-project:hover img{transform:scale(1.025)}.ref-card-picture>span{position:absolute;bottom:16px;right:16px;color:white;background:#142c33e8;padding:4px 10px;font-size:11px;border-radius:3px}.ref-card-copy{padding:26px;display:flex;flex-direction:column;flex:1}.ref-card-copy .eyebrow{font-size:10px;letter-spacing:.07em;margin-bottom:18px;gap:8px}.ref-card-copy .eyebrow:before{width:15px}.ref-card-copy h3{font-size:22px;line-height:1.25;margin-bottom:13px}.ref-card-copy>p:not(.eyebrow){font-size:13px;color:var(--muted)}.ref-card-copy>div{border-top:1px solid var(--line);padding-top:17px;margin-top:auto;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:11px;color:var(--muted)}.ref-card-copy b{font-size:21px;color:var(--cyan-dark);font-weight:400}.ref-more-wrap{text-align:center;margin-top:35px}.ref-no-results{padding:40px 0;color:var(--muted)}.ref-detail-head{padding-top:26px;padding-bottom:45px}.ref-detail-head>.text-link{margin-bottom:40px}.ref-detail-intro{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:start}.ref-detail-intro h1{font-size:clamp(2.2rem,4vw,3.6rem);overflow-wrap:anywhere}.ref-detail-intro .lead{margin-top:32px}.ref-location{font-size:14px;color:var(--muted)}.ref-photo-section{padding-bottom:70px}.ref-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.ref-photo-grid figure{margin:0;min-width:0}.ref-photo-grid figure>a{display:block;height:310px;background:#edf3f5;position:relative;border-radius:5px;overflow:hidden}.ref-photo-grid img{width:100%;height:100%;object-fit:cover}.ref-zoom{position:absolute;right:14px;bottom:14px;width:35px;height:35px;display:grid;place-items:center;color:var(--night);background:white;border-radius:50%}.ref-photo-grid figcaption{font-size:12px;color:var(--muted);padding-top:9px}.ref-photo-hint{color:var(--muted);font-size:12px;margin-top:22px}.focal-center{object-position:center}.focal-top{object-position:center top}.focal-bottom{object-position:center bottom}.focal-left{object-position:left center}.focal-right{object-position:right center}.ref-lightbox{border:0;background:#11252bf7;color:white;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;padding:50px 75px;margin:0}.ref-lightbox::backdrop{background:#11252b}.ref-lightbox[open]{display:grid;place-items:center}.ref-lightbox figure{margin:0;max-width:100%;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0}.ref-lightbox figure img{object-fit:contain;max-width:100%;max-height:calc(100dvh - 160px);width:auto;height:auto}.ref-lightbox figcaption{font-size:13px;text-align:center;max-width:800px;min-height:22px}.ref-lightbox button{position:absolute;color:white;background:#ffffff12;border:1px solid #ffffff45;border-radius:50%;width:44px;height:44px;font-size:21px}.ref-close{right:22px;top:18px}.ref-prev{left:18px;top:calc(50% - 22px)}.ref-next{right:18px;top:calc(50% - 22px)}.ref-counter{position:absolute;bottom:12px;left:0;right:0;text-align:center;margin:0;font-size:12px;color:#b8ccd1}.ref-modal-open{overflow:hidden}
@media(max-width:1100px){.ref-hero{gap:35px;grid-template-columns:1fr 1fr}.ref-hero-picture{min-height:460px}.ref-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ref-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ref-detail-intro{gap:35px}}
@media(max-width:820px){.ref-hero{grid-template-columns:1fr;gap:30px;padding-top:12px;padding-bottom:45px}.ref-hero h1{font-size:3.4rem}.ref-hero-picture{min-height:350px}.ref-hero-picture>span{left:15px;right:15px;bottom:15px}.ref-project-grid{gap:18px}.ref-card-copy{padding:20px}.ref-card-picture{height:220px}.ref-card-copy h3{font-size:19px}.ref-detail-intro{grid-template-columns:1fr;gap:0}.ref-detail-intro .lead{margin-top:0}.ref-photo-grid figure>a{height:270px}.ref-projects .section-heading{align-items:start;gap:15px}.ref-projects h2{font-size:2rem}.ref-result{padding:0}.ref-search{align-items:start;flex-direction:column;gap:8px}.ref-lightbox{padding:60px 16px 80px}.ref-lightbox figure img{max-height:calc(100dvh - 200px)}.ref-prev,.ref-next{top:auto;bottom:44px}.ref-lightbox figcaption{max-width:100%;overflow-wrap:anywhere}.ref-counter{bottom:55px;left:80px;right:80px;pointer-events:none}}
@media(max-width:520px){.ref-project-grid{grid-template-columns:1fr}.ref-card-picture{height:285px}.ref-photo-grid{gap:12px}.ref-photo-grid figure>a{height:220px}.ref-hero-picture{min-height:300px}.ref-filters button{font-size:11px;padding:9px 11px}.ref-result{white-space:normal;min-width:55px}.ref-card-copy h3{font-size:22px}}
/* Project detail pages */
.ref-more[hidden]{display:none}
.ref-selection-note{max-width:680px;font-size:14px;color:var(--muted);margin:14px 0 0}.ref-more:disabled{opacity:1;background:#e6eef0;border-color:#e6eef0;color:#52666d;cursor:default;transform:none}.ref-detail-stage{display:grid;grid-template-columns:1.05fr .95fr;min-height:540px;overflow:hidden;border-radius:12px;background:var(--night)}.ref-detail-cover{position:relative;display:block;min-height:500px;overflow:hidden}.ref-detail-cover>img{position:absolute;width:100%;height:100%;object-fit:cover;transition:transform .4s}.ref-detail-cover:hover>img{transform:scale(1.025)}.ref-detail-cover>span{position:absolute;bottom:22px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;padding:13px 17px;background:#ffffffee;border-radius:5px;color:var(--night);font-size:12px;font-weight:700}.ref-detail-cover b{font-size:23px;font-weight:400}.ref-detail-panel{padding:54px 44px;display:flex;flex-direction:column;justify-content:center;color:#fff;min-width:0}.ref-detail-panel .eyebrow{color:#92dce8;font-size:10px}.ref-detail-panel h1{color:#fff;font-size:clamp(2rem,3.3vw,3.25rem);line-height:1.15;letter-spacing:-.035em;overflow-wrap:break-word;margin:0 0 24px}.ref-detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.ref-detail-tags span{font-size:11px;border:1px solid #ffffff30;border-radius:24px;padding:6px 11px;color:#d0e5e9}.ref-detail-panel .lead{color:#c4d8dd;font-size:15px;line-height:1.8;margin:0 0 32px}.ref-detail-jump{color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #ffffff25;padding-top:22px}.ref-detail-jump span{font-size:22px;color:#92dce8}.ref-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding:66px 0 18px;align-items:start}.ref-story h2{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.2;max-width:350px}.ref-story>p{font-size:15px;line-height:1.9;color:var(--muted);margin-top:0;max-width:620px}.ref-gallery-section{padding:65px 0 75px;background:#f3f7f8;scroll-margin-top:100px}.ref-gallery-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:32px}.ref-gallery-heading h2{font-size:clamp(1.8rem,3vw,2.7rem);margin-bottom:0}.ref-gallery-heading>p{font-size:12px;color:var(--muted);margin-bottom:3px}.ref-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.ref-photo-grid figure{background:white;border:1px solid #dde7ea;border-radius:10px;overflow:hidden}.ref-photo-grid figure>a{height:420px;border-radius:0}.ref-photo-grid img{transition:transform .35s}.ref-photo-grid a:hover img{transform:scale(1.025)}.ref-photo-grid figcaption{display:flex;gap:16px;align-items:center;padding:18px 20px;line-height:1.5}.ref-view-number{font-size:11px;letter-spacing:.04em;color:var(--cyan-dark);padding-right:16px;border-right:1px solid var(--line)}.ref-project-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:40px;padding-bottom:55px}.ref-project-nav>a{border:1px solid var(--line);border-radius:8px;padding:24px 26px;transition:background .2s}.ref-project-nav>a:hover{background:#f3f7f8}.ref-project-nav small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.ref-project-nav strong{font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:20px}.ref-project-nav strong span{color:var(--cyan-dark);font-size:23px;font-weight:400}
@media(max-width:1100px){.ref-detail-panel{padding:35px 28px}.ref-photo-grid figure>a{height:330px}.ref-story{gap:40px}}
@media(max-width:820px){.ref-detail-stage{grid-template-columns:1fr}.ref-detail-cover{min-height:350px}.ref-detail-panel{padding:34px 28px}.ref-detail-panel h1{font-size:2.2rem}.ref-detail-head>.text-link{margin-bottom:25px}.ref-story{grid-template-columns:1fr;gap:15px;padding:40px 0 0}.ref-story h2{max-width:none}.ref-gallery-heading{align-items:start;flex-direction:column;gap:15px}.ref-gallery-heading>p br{display:none}.ref-gallery-section{padding:40px 0}.ref-photo-grid{grid-template-columns:1fr;gap:22px}.ref-photo-grid figure>a{height:clamp(300px,70vw,500px)}.ref-project-nav{grid-template-columns:1fr;gap:16px;padding-top:28px;padding-bottom:35px}.ref-selection-note{font-size:13px}}

/* Larger gallery controls and native touch gestures */
.ref-lightbox{padding:64px 96px 80px}.ref-lightbox figure{touch-action:pan-y pinch-zoom}.ref-lightbox figure img{-webkit-user-select:none;user-select:none}.ref-lightbox .ref-prev,.ref-lightbox .ref-next{width:64px;height:64px;padding:0;display:grid;place-items:center;font-size:32px;line-height:1;top:calc(50% - 32px);background:#ffffff20;border-color:#ffffff70;transition:background .2s,border-color .2s}.ref-lightbox .ref-prev{left:18px}.ref-lightbox .ref-next{right:18px}.ref-lightbox button{touch-action:manipulation}.ref-lightbox button:focus-visible{outline:3px solid #92dce8;outline-offset:4px}.ref-lightbox button[hidden],.ref-swipe-hint[hidden]{display:none}.ref-swipe-hint{display:none;position:absolute;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:12px;right:12px;text-align:center;color:#b8ccd1;font-size:11px;margin:0;pointer-events:none}
@media(hover:hover){.ref-lightbox .ref-prev:hover,.ref-lightbox .ref-next:hover{background:#ffffff38;border-color:#92dce8}}
@media(any-pointer:coarse){.ref-swipe-hint:not([hidden]){display:block}.ref-lightbox .ref-counter{bottom:calc(36px + env(safe-area-inset-bottom,0px))}}
@media(max-width:820px){.ref-lightbox{padding:64px 16px calc(132px + env(safe-area-inset-bottom,0px))}.ref-lightbox figure img{max-height:calc(100dvh - 245px - env(safe-area-inset-bottom,0px))}.ref-lightbox .ref-prev,.ref-lightbox .ref-next{top:auto;bottom:calc(40px + env(safe-area-inset-bottom,0px))}.ref-lightbox .ref-counter{bottom:calc(40px + env(safe-area-inset-bottom,0px));height:64px;display:grid;place-items:center;left:90px;right:90px}.ref-lightbox figcaption{max-height:64px;overflow:auto}.ref-lightbox .ref-prev{left:20px}.ref-lightbox .ref-next{right:20px}}

/* Match the restrained link and card treatments used across the site. */
.ref-project{transition:box-shadow .25s,transform .2s,border-color .2s}
.ref-card-copy b,.ref-project-nav strong span{transition:transform .2s}
.ref-hero-picture>span{border:1px solid #ffffff20;transition:background .2s,box-shadow .2s}
.ref-hero-picture:focus-visible>span{background:#183a43;box-shadow:0 8px 28px #142c3328}
.ref-project:focus-within .ref-card-copy b,.ref-project-nav>a:focus-visible strong span{transform:translate(2px,-2px)}
@media(hover:hover){.ref-project:hover{border-color:var(--cyan-dark)}.ref-project:hover .ref-card-copy b,.ref-project-nav>a:hover strong span{transform:translate(2px,-2px)}.ref-hero-picture:hover>span{background:#183a43;box-shadow:0 8px 28px #142c3328}}
@media(prefers-reduced-motion:reduce){.ref-project:hover,.ref-project .ref-card-copy b,.ref-project-nav strong span{transform:none!important}}

/* Same short, gentle button transitions as on the other public pages. */
.ref-filters button{transition:background .2s,border-color .2s,color .2s,transform .2s}
.ref-hero-picture b,.ref-detail-cover b,.ref-detail-jump .arrow,.ref-zoom,.ref-lightbox button>span{transition:transform .2s,background .2s,color .2s}
.ref-lightbox button>span{display:block}.ref-lightbox .ref-close{transition:background .2s,border-color .2s}
.ref-filters button:focus-visible{transform:translateY(-2px);border-color:var(--cyan-dark)}
.ref-filters button[aria-pressed=false]:focus-visible{background:var(--pale)}
.ref-detail-cover:focus-visible b{transform:translate(2px,-2px)}
.ref-hero-picture:focus-visible b{transform:translate(2px,calc(-50% - 2px))}
.site-signature :is(.button,.text-link):focus-visible .ref-arrow-down,.ref-detail-jump:focus-visible .ref-arrow-down{transform:translateY(2px)}
.site-signature :is(.button,.text-link):focus-visible .ref-arrow-back{transform:translateX(-2px)}
.site-signature :is(.button,.text-link):focus-visible .ref-arrow-forward{transform:translateX(2px)}
.ref-photo-grid a:focus-visible .ref-zoom{transform:translate(2px,-2px);background:var(--pale)}
.ref-lightbox .ref-prev:focus-visible>span{transform:translateX(-2px)}.ref-lightbox .ref-next:focus-visible>span{transform:translateX(2px)}
@media(hover:hover){
 .ref-filters button:hover{transform:translateY(-2px);border-color:var(--cyan-dark)}.ref-filters button[aria-pressed=false]:hover{background:var(--pale)}.ref-filters button[aria-pressed=true]:hover{background:#294950}
 .site-signature :is(.button,.text-link):hover .ref-arrow-down,.ref-detail-jump:hover .ref-arrow-down{transform:translateY(2px)}
 .site-signature :is(.button,.text-link):hover .ref-arrow-back{transform:translateX(-2px)}.site-signature :is(.button,.text-link):hover .ref-arrow-forward{transform:translateX(2px)}
 .ref-hero-picture:hover b{transform:translate(2px,calc(-50% - 2px))}.ref-detail-cover:hover b{transform:translate(2px,-2px)}
 .ref-photo-grid a:hover .ref-zoom{transform:translate(2px,-2px);background:var(--pale)}
 .ref-lightbox .ref-prev:hover>span{transform:translateX(-2px)}.ref-lightbox .ref-next:hover>span{transform:translateX(2px)}.ref-lightbox .ref-close:hover{background:#ffffff38;border-color:#92dce8}
}
.ref-more:disabled:hover{background:#e6eef0;border-color:#e6eef0;color:#52666d;transform:none}
@media(prefers-reduced-motion:reduce){.ref-filters button,.ref-detail-cover b,.ref-detail-jump .arrow,.ref-zoom,.ref-lightbox button>span{transform:none!important}.ref-hero-picture b{transform:translateY(-50%)!important}}

/* The featured reference uses the same arrow treatment as the homepage hero. */
.ref-hero-picture>span{padding-right:88px}
.ref-hero-picture .ref-hero-arrow{width:42px;height:42px;display:grid;place-items:center;border:1px solid #597179;border-radius:50%;font-family:Arial,sans-serif;font-size:21px;line-height:1;transform:translateY(-50%);transition:background .2s,color .2s,transform .2s}
.ref-hero-picture:is(:hover,:focus-visible) .ref-hero-arrow{background:var(--cyan);color:var(--night);transform:translateY(-50%) rotate(45deg)}