/* Shared finishing details for customer-facing pages. */
:root { --focus-ring:#9a753d; }
:focus-visible { outline:3px solid var(--focus-ring); outline-offset:4px; }
button, input, select, textarea { font:inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button, .button, .btn { touch-action:manipulation; }
img { max-width:100%; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
@media(max-width:760px) { input,select,textarea { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Project stories: generous imagery, restrained type, clear wayfinding. */
.portfolio-bar { background:#171513; color:#fff; padding:18px max(24px,calc((100vw - 1440px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.portfolio-bar img { width:120px; height:64px; object-fit:contain; }
.portfolio-bar nav { display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; }
.portfolio-bar nav a { font-size:14px; padding:10px 0; }
.portfolio-bar nav a[aria-current] { color:#d8b779; }
.gallery-page { padding:48px 32px 80px; }
.gallery-page-inner { max-width:1440px; }
.gallery-header { align-items:center; gap:36px; margin-bottom:32px; }
.gallery-header h1 { font-size:clamp(2.25rem,4vw,4rem); line-height:1.08; max-width:1000px; letter-spacing:-.035em; }
.gallery-header p { font-size:1rem; max-width:660px; }
.gallery-header .section-kicker { color:#896730; font-size:12px; letter-spacing:.16em; margin:0 0 16px; }
.gallery-back { background:transparent; color:var(--ink); font-size:13px; font-weight:600; border-color:var(--line); white-space:nowrap; }
.gallery-filter { gap:8px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.gallery-filter a { background:transparent; border:0; font-size:13px; font-weight:600; padding:10px 16px; border-radius:3px; }
.gallery-filter a:hover { background:#e7e0d4; }
.gallery-status { font-size:13px; font-weight:500; }
.gallery-process[hidden] { display:none; }
.case-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 28px; }
.case-card { padding:0 0 22px; background:transparent; border:0; border-bottom:1px solid var(--line); gap:10px; }
.case-card img { aspect-ratio:4/3; border:0; }
.case-card strong { font-family:Georgia,serif; font-weight:400; font-size:clamp(1.5rem,2vw,2rem); }
.case-card span,.case-card p { font-weight:400; }
.case-card:focus-visible,.case-card:hover { outline:0; }
.case-card:focus-visible { box-shadow:0 0 0 3px var(--focus-ring); }
.case-card:hover strong { color:#896730; }
.case-intro { max-width:800px; padding:12px 0 26px; }
.case-city { color:#896730; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.case-description { font-size:18px; line-height:1.75; color:#56514a; margin:12px 0 0; }
.before-after-case { gap:32px; align-items:start; }
.before-after-case .gallery-stage { margin:0; min-width:0; }
.before-after-case h2 { border-top:1px solid var(--line); padding-top:18px; font-family:Georgia,serif; font-size:30px; font-weight:400; margin:0 0 20px; }
.before-after-case .published-gallery-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
.published-gallery-card { padding:0; background:transparent; border:0; }
.published-gallery-card img { aspect-ratio:4/5; object-fit:cover; border:0; }
.before-after-case .published-gallery-card strong,.before-after-case .published-gallery-card span { display:none; }
.photo-open { display:block; padding:0; border:0; width:100%; background:transparent; cursor:zoom-in; }
.photo-open img { width:100%; }
.case-detail .gallery-filter { display:none; }
.case-cover { position:relative; margin-bottom:32px; }
.case-cover img { aspect-ratio:16/9; max-height:720px; object-fit:cover; }
.case-cover span { position:absolute; bottom:18px; right:18px; background:rgba(23,21,19,.85); color:white; padding:10px 16px; font-size:12px; letter-spacing:.04em; }
body:has(.site-header-solid) main { padding-top:116px; }
.header nav a:hover,.portfolio-bar nav a:hover { color:#d8b779; }
.case-cta { margin-top:64px; padding:36px; background:#eae3d7; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.case-cta h2 { font-family:Georgia,serif; font-size:clamp(1.75rem,3vw,2.75rem); font-weight:400; margin:0 0 8px; }
.case-cta p { margin:0; color:var(--muted); }
.case-cta a { display:inline-flex; align-items:center; justify-content:center; background:#171513; color:white; padding:16px 24px; white-space:nowrap; }
.portfolio-footer { padding:32px; background:#171513; color:#eee7dd; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:14px; }
.portfolio-footer nav { display:flex; flex-wrap:wrap; gap:24px; }
.gallery-lightbox { z-index:100; background:rgba(15,14,13,.96); padding:76px 24px 30px; }
.gallery-lightbox img { max-height:calc(100dvh - 130px); max-width:92vw; background:transparent; }
.lightbox-close { position:absolute; top:20px; right:24px; min-height:44px; padding:10px 18px; background:transparent; color:#fff; border:1px solid #827b70; cursor:pointer; }
@media(max-width:760px) {
 .portfolio-bar { padding:14px 20px; flex-wrap:wrap; gap:8px; }
 .portfolio-bar img { width:92px; height:48px; }
 .portfolio-bar nav { gap:16px; }
 .portfolio-bar nav a { font-size:12px; }
 .gallery-page { padding:30px 20px 48px; }
 .gallery-header { gap:18px; }
 .gallery-header h1 { font-size:2.35rem; }
 .case-cover img { aspect-ratio:4/3; }
 .case-cover span { bottom:10px; right:10px; font-size:11px; }
 body:has(.site-header-solid) main { padding-top:92px; }
 .header nav a:not(:last-child) { display:inline; }
 .header { padding:12px 20px; height:auto; min-height:92px; flex-wrap:wrap; gap:12px; }
 .header nav { flex-wrap:wrap; gap:18px; }
 .header nav a { font-size:13px; }
 .gallery-back { width:auto; justify-self:start; }
 .gallery-filter { flex-wrap:nowrap; overflow-x:auto; padding-bottom:14px; }
 .gallery-filter a { flex-shrink:0; }
 .case-gallery-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
 .before-after-case { grid-template-columns:minmax(0,1fr); gap:36px; }
 .case-description { font-size:16px; }
 .case-cta { margin-top:40px; padding:24px; flex-direction:column; align-items:start; }
 .case-cta a { width:100%; }
 .portfolio-footer { padding:28px 20px; }
}
/* Homepage project directory: all categories stay visible at every breakpoint. */
#gallery.public-gallery { background:#f5f1e8; color:#211e19; padding:88px max(24px,calc((100% - 1320px)/2)); scroll-margin-top:110px; }
#gallery .section-heading { display:block; max-width:1180px; margin:0 auto 36px; text-align:left; }
#gallery .section-kicker { color:#8e6a2e; }
#gallery .section-heading h2 { color:#211e19; font-family:Georgia,serif; font-weight:400; font-size:clamp(32px,4vw,56px); line-height:1.12; }
#gallery .section-heading > p:last-child { color:#6c665d; max-width:600px; }
#gallery .gallery-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
#gallery .gallery-category-card { display:flex; flex-direction:column; grid-column:auto; min-width:0; min-height:235px; padding:26px; background:#fffcf6; color:#211e19; border:1px solid #ded6c8; box-shadow:none; border-top:3px solid #b38b49; }
#gallery .gallery-category-card:hover { transform:translateY(-3px); border-color:#b38b49; box-shadow:0 12px 28px #211e190c; }
#gallery .gallery-card-image,#gallery .gallery-category-card > span { display:none; }
#gallery .gallery-category-card h3 { align-self:start; text-align:left; margin:0 0 16px; font:400 25px/1.16 Georgia,serif; color:inherit; text-shadow:none; }
#gallery .gallery-category-card p { color:#6c665d; font-size:15px; line-height:1.55; text-shadow:none; margin:0 0 24px; }
#gallery .gallery-category-card strong { color:#80602e; margin-top:auto; text-shadow:none; font-size:11px; }
#gallery .gallery-category-all { background:#26231e; color:#fffaf0; }
#gallery .gallery-category-all p { color:#d8d0c2; }
#gallery .gallery-category-all strong { color:#e0be81; }
@media(max-width:1050px) { #gallery .gallery-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { #gallery.public-gallery { padding:52px 20px; } #gallery .gallery-category-grid { grid-template-columns:1fr; gap:12px; } #gallery .gallery-category-card { min-height:190px; padding:24px; } }