/* Reference pages extend the existing M2 palette and typography. */
.reference-hero { min-height: 410px; }
.reference-section, .reference-home, .company-in-action { background: var(--mist); }
.reference-toolbar { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:24px; }
.reference-toolbar h2 { margin:0; font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.035em; }
.reference-toolbar p { margin:0; color:#52636e; }
.reference-filters { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 38px; }
.reference-filters[hidden], .reference-card[hidden] { display:none; }
.reference-filters button { cursor:pointer; min-height:44px; border:1px solid #a5b0b7; border-radius:3px; padding:10px 15px; color:var(--ink); background:white; font-size:.85rem; font-weight:700; }
.reference-filters button[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--orange); }
.reference-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.reference-card { min-width:0; background:white; border:1px solid var(--line); }
.reference-card-link { display:flex; height:100%; flex-direction:column; }
.reference-card-image { position:relative; background:var(--ink); aspect-ratio:4/3; overflow:hidden; }
.reference-card-image img { width:100%; height:100%; object-fit:contain; }
.photo-count { position:absolute; bottom:12px; right:12px; background:rgba(20,35,46,.93); color:white; padding:4px 10px; font-size:.75rem; border:1px solid #ffffff55; border-radius:2px; }
.reference-card-copy { display:flex; flex:1; flex-direction:column; padding:25px; }
.reference-category { color:#785100; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; font-weight:800; margin:0 0 14px; }
.reference-location { margin:0 0 8px; font-size:.8rem; color:#546671; }
.reference-card h3 { margin:0 0 15px; font-size:1.5rem; line-height:1.16; letter-spacing:-.035em; overflow-wrap:anywhere; }
.reference-card h3 + p { color:#52636e; margin:0 0 25px; font-size:.95rem; }
.reference-more { margin-top:auto; font-size:.85rem; font-weight:800; display:flex; align-items:center; justify-content:space-between; padding-top:17px; border-top:1px solid var(--line); }
.reference-more span { font-size:1.3rem; color:#8b5d00; }
.reference-card-link:hover { box-shadow:0 12px 28px #14232e18; }
.reference-card-link:hover h3 { text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:4px; }
.reference-card-link:focus-visible, .reference-filters button:focus-visible, .gallery-link:focus-visible, .gallery-dialog button:focus-visible, .reference-back:focus-visible { outline:3px solid #c27c00; outline-offset:5px; }
.project-hero { padding:40px 0 70px; background:var(--ink); color:white; }
.reference-back { display:inline-block; padding:8px 0; margin-bottom:32px; color:#d8e3e8; font-size:.88rem; font-weight:700; }
.reference-back:hover { text-decoration:underline; }
.reference-back.dark { margin:40px 0 0; color:var(--ink); }
.project-hero-layout { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:55px; }
.project-hero h1 { font-size:clamp(2.5rem,4.4vw,4.5rem); margin:10px 0 25px; line-height:1.04; letter-spacing:-.05em; overflow-wrap:anywhere; }
.project-place { color:var(--orange); font-weight:700; margin:0; }
.project-intro { color:#d1dde4; font-size:1.1rem; max-width:650px; }
.project-cover { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; background:#0c171f; }
.project-cover img { width:100%; max-height:560px; height:auto; object-fit:contain; }
.photo-expand { position:absolute; right:12px; bottom:12px; padding:7px 12px; background:#14232ef0; border:1px solid #ffffff60; color:white; font-size:.8rem; }
.project-scope { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.project-scope h2, .project-gallery-heading h2 { font-size:clamp(1.8rem,3vw,2.8rem); line-height:1.15; letter-spacing:-.04em; margin:0; }
.project-scope ul { list-style:none; padding:0; margin:0; }
.project-scope li { border-bottom:1px solid var(--line); padding:15px 0 15px 26px; position:relative; }
.project-scope li::before { content:'↗︎'; color:#966400; position:absolute; left:0; }
.reference-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:45px 0 0; }
.reference-facts div { background:var(--mist); padding:24px; }
.reference-facts dt { color:#52636e; font-size:.8rem; }
.reference-facts dd { margin:5px 0 0; font-size:1.9rem; font-weight:800; letter-spacing:-.04em; }
.project-gallery-heading { display:flex; flex-wrap:wrap; justify-content:space-between; gap:15px; align-items:baseline; margin:70px 0 24px; }
.project-gallery-heading p { margin:0; color:#52636e; font-size:.9rem; }
.project-photo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.project-photo { margin:0; min-width:0; }
.project-photo a { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; background:var(--ink); }
.project-photo img { width:100%; height:100%; object-fit:contain; }
.project-photo figcaption { padding-top:12px; font-size:.88rem; color:#52636e; }
.project-note { margin-top:32px; }
.company-in-action-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:center; }
.company-in-action figure { margin:0; }
.company-in-action img { width:100%; height:auto; }
.company-in-action figcaption { color:#52636e; font-size:.8rem; margin-top:10px; }
.company-in-action h2 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.05; letter-spacing:-.04em; }
.gallery-dialog { border:1px solid #45535c; padding:0; color:white; background:#101c25; width:min(1200px,calc(100vw - 32px)); max-width:none; height:min(900px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.gallery-dialog[open] { display:flex; flex-direction:column; }
.gallery-dialog::backdrop { background:#050d14eb; }
.gallery-header { padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-shrink:0; }
.gallery-header h2 { font-size:1rem; margin:0; }
.gallery-dialog button { border:1px solid #71818d; background:#213644; color:white; cursor:pointer; min-height:46px; min-width:46px; padding:8px 15px; border-radius:3px; }
.gallery-dialog button:hover { background:var(--orange); color:var(--ink); }
.gallery-close span { font-size:1.3rem; margin-left:8px; }
.gallery-stage { min-height:100px; flex:1; display:flex; justify-content:center; align-items:center; overflow:hidden; background:#080f15; touch-action:pan-y pinch-zoom; }
.gallery-image { width:100%; height:100%; max-height:65dvh; object-fit:contain; }
.gallery-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 20px 8px; flex-shrink:0; }
.gallery-caption { margin:0; color:#e0e9ef; font-size:.9rem; }
.gallery-controls { display:flex; gap:14px; align-items:center; flex-shrink:0; }
.gallery-position { min-width:45px; text-align:center; font-variant-numeric:tabular-nums; }
.gallery-controls button:disabled { opacity:.35; cursor:default; }
.gallery-hint { padding:0 20px 12px; font-size:.75rem; color:#a9bac6; margin:0; }
html.gallery-open { overflow:hidden; scrollbar-gutter:stable; }
@media(max-width:1000px) { .reference-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .project-hero-layout { gap:30px; } }
@media(max-width:800px) { .project-hero-layout, .project-scope, .company-in-action-layout { grid-template-columns:1fr; gap:28px; } .project-hero h1 { max-width:650px; } .project-cover img { max-height:60dvh; } }
@media(max-width:680px) {
  .reference-grid, .project-photo-grid { grid-template-columns:1fr; gap:24px; }
  .reference-card-copy { padding:23px; }
  .reference-card h3 { font-size:1.6rem; }
  .reference-filters { gap:8px; }
  .reference-filters button { flex:1 1 auto; font-size:.79rem; padding:9px 12px; }
  .reference-hero { min-height:0; }
  .reference-hero .page-hero-inner { padding-block:60px; }
  .project-hero { padding:24px 0 40px; }
  .project-hero h1 { font-size:clamp(2.3rem,10vw,3.4rem); }
  .project-intro { font-size:1rem; }
  .project-gallery-heading { margin-top:48px; }
  .gallery-dialog { width:100%; height:100dvh; max-height:100dvh; border:0; margin:0; }
  .gallery-header { padding:calc(12px + env(safe-area-inset-top)) 14px 12px; }
  .gallery-bottom { flex-direction:column; gap:12px; align-items:stretch; padding:14px; }
  .gallery-controls { justify-content:center; }
  .gallery-caption { text-align:center; }
  .gallery-hint { padding-bottom:calc(12px + env(safe-area-inset-bottom)); text-align:center; }
  .gallery-image { max-height:60dvh; }
}