/* Royal uses one editorial face and one interface face throughout. */
:root{--sans:Manrope,sans-serif;--body:Manrope,sans-serif}
.portfolio-gallery{margin-top:48px}
.portfolio-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.portfolio-tabs button{appearance:none;border:1px solid #d8cdbc;border-radius:8px;background:#fbf8f0;color:#000830;padding:8px 12px;min-height:44px;font:600 14px/20px Manrope,sans-serif;cursor:pointer;transition:background .3s cubic-bezier(.22,1,.36,1),color .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.portfolio-tabs button span{margin-left:8px;font-size:12px;opacity:.7}
.portfolio-tabs button:hover{background:#e9e2d7;transform:translateY(-2px)}
.portfolio-tabs button:active{transform:scale(.98)}
.portfolio-tabs button:focus-visible{outline:3px solid #a45324;outline-offset:2px}
.portfolio-tabs button[aria-selected="true"]{background:#000830;border-color:#000830;color:#fff}
.portfolio-gallery .gallery-group[hidden]{display:none!important}
.portfolio-heading{display:grid;grid-template-columns:1fr 2fr;gap:8px 32px;align-items:end;margin-bottom:32px}
.portfolio-heading .section-label{grid-row:span 2;margin:0;color:#a45324}
.portfolio-heading h3{margin:0;color:#000830;font:400 36px/40px Prata,Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.portfolio-heading p{grid-column:2;margin:0;color:#505667;font:400 16px/24px Manrope,sans-serif;text-wrap:pretty}
.portfolio-gallery .gallery-groups{display:grid;gap:48px}
.portfolio-gallery .gallery-group{padding-top:24px;border-top:1px solid #d8cdbc}
.portfolio-gallery .gallery-group-head{display:flex;align-items:baseline;gap:24px;margin-bottom:24px}
.portfolio-gallery .gallery-group-head>span{color:#a45324;font:600 12px/16px Manrope,sans-serif;letter-spacing:.1em}
.portfolio-gallery .gallery-group-head small{color:#7a6f64;font:600 12px/16px Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.portfolio-gallery .gallery-group-head h3{margin:4px 0 0;color:#000830;font:400 24px/32px Prata,Georgia,serif;letter-spacing:-.02em}
.portfolio-gallery .gallery-grid,.portfolio-gallery .gallery-grid.items-4,.portfolio-gallery .gallery-grid.items-5{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:24px}
.portfolio-gallery .gallery-item,.portfolio-gallery .gallery-grid.items-4 .gallery-item,.portfolio-gallery .gallery-grid.items-5 .gallery-item{display:block;grid-row:auto;min-height:0;overflow:visible;margin:0}
.portfolio-gallery .gallery-grid .gallery-item{grid-column:auto!important}
.portfolio-gallery .gallery-grid.items-5{grid-template-columns:repeat(4,minmax(0,1fr))}
.portfolio-gallery .gallery-grid.items-5 .gallery-item:first-child{grid-column:span 2!important;grid-row:span 2}
.portfolio-gallery .gallery-grid.items-5 .gallery-item:first-child img{aspect-ratio:4/3}
.portfolio-gallery .gallery-grid.items-5 .gallery-item:not(:first-child) img{aspect-ratio:4/3}
.portfolio-gallery .gallery-item a{display:block;border-radius:8px;outline-offset:4px;text-decoration:none}
.portfolio-gallery .gallery-item a:focus-visible{outline:3px solid #c57634}
.portfolio-gallery .gallery-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.portfolio-gallery .gallery-item:hover img{transform:scale(1.015)}
.portfolio-gallery .gallery-item figcaption{position:static;display:block;width:auto;max-width:none;margin-top:8px;padding:0;border:0;background:transparent;color:#505667;backdrop-filter:none;font:400 14px/20px Manrope,sans-serif;letter-spacing:0;text-transform:none}
.royal-photo-dialog{width:min(1100px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:16px;border:0;border-radius:12px;background:#f3eee3;color:#000830;box-shadow:0 24px 80px rgba(0,8,48,.3)}
.royal-photo-dialog::backdrop{background:rgba(0,8,48,.84)}
.royal-photo-dialog header,.royal-photo-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.royal-photo-dialog header{margin-bottom:12px}
.royal-photo-dialog header span{font:600 12px/16px Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#a45324}
.royal-photo-dialog img{display:block;width:100%;max-height:calc(100dvh - 180px);object-fit:contain;background:#e9e5dd;border-radius:8px}
.royal-photo-dialog .photo-stage{position:relative;min-height:180px;background:#e9e5dd;border-radius:8px;overflow:hidden}
.royal-photo-dialog .photo-stage img{margin:auto}
.royal-photo-dialog .photo-status{display:none;position:absolute;inset:0;align-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;font:400 14px/20px Manrope,sans-serif;color:#505667}
.royal-photo-dialog[data-photo-state="loading"] .photo-stage img,.royal-photo-dialog[data-photo-state="error"] .photo-stage img{opacity:0}
.royal-photo-dialog[data-photo-state="loading"] .photo-status,.royal-photo-dialog[data-photo-state="error"] .photo-status{display:grid}
.royal-photo-dialog .photo-status a{color:#000830;font-weight:600;text-underline-offset:3px}
.royal-photo-dialog footer{margin-top:12px}
.royal-photo-dialog [data-photo-caption]{font:400 14px/20px Manrope,sans-serif;text-wrap:pretty}
.royal-photo-dialog .photo-controls{display:flex;gap:8px;flex:none}
.royal-photo-dialog button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #d8cdbc;border-radius:8px;background:#fff;color:#000830;font:600 14px/20px Manrope,sans-serif;cursor:pointer;transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s cubic-bezier(.22,1,.36,1)}
.royal-photo-dialog button:hover{background:#f4b561;transform:translateY(-2px)}
.royal-photo-dialog button:active{transform:scale(.98)}
.royal-photo-dialog button:focus-visible{outline:3px solid #c57634;outline-offset:2px}
.expertise{padding-top:64px}
.expertise-head h2{font-family:Prata,Georgia,serif!important;font-weight:400!important}
.expertise-grid h3{font-family:Prata,Georgia,serif;font-weight:400;letter-spacing:-.02em}
@media(max-width:800px){.portfolio-heading{display:block;margin-bottom:24px}.portfolio-heading h3{margin:12px 0 8px;font-size:30px;line-height:36px}.portfolio-gallery .gallery-grid,.portfolio-gallery .gallery-grid.items-4,.portfolio-gallery .gallery-grid.items-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.portfolio-gallery .gallery-grid.items-5 .gallery-item:first-child{grid-column:span 2!important;grid-row:auto}.portfolio-gallery .gallery-grid.items-5 .gallery-item:first-child img{aspect-ratio:16/9}.portfolio-gallery .gallery-item img{aspect-ratio:4/3}.portfolio-gallery .gallery-group-head{gap:12px}.portfolio-gallery .gallery-group-head h3{font-size:20px;line-height:28px}.expertise{padding-top:48px}}
@media(max-width:800px){.portfolio-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-tabs button:last-child{grid-column:1/-1}.portfolio-tabs button{width:100%;text-align:left}.portfolio-gallery .gallery-group{padding-top:16px}}
@media(max-width:400px){.portfolio-gallery .gallery-item figcaption{font-size:14px;line-height:20px}.mobile-contact-dock a{font-size:14px;line-height:20px}}
@media(max-width:800px){.royal-photo-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:12px}.royal-photo-dialog img{max-height:calc(100dvh - 150px)}.royal-photo-dialog footer{align-items:flex-start;flex-direction:column}.royal-photo-dialog .photo-controls{align-self:flex-end}}
@media(max-width:800px){.mobile-nav[data-open="true"]{min-height:calc(100dvh - 76px);background:#000830}.mobile-menu-open .mobile-contact-dock{opacity:0!important;pointer-events:none!important}}
@media(max-width:800px){#media{padding-bottom:32px}.expertise{padding-top:32px}}
@media(max-width:800px){.expertise.section{padding-bottom:32px}#history{padding-top:40px}}
@media(max-width:800px){#contact{padding:64px 0}#contact .contact-grid{gap:32px}}
@media(prefers-reduced-motion:reduce){.portfolio-gallery .gallery-item img{transition:none}.portfolio-gallery .gallery-item:hover img{transform:none}}
/* On phones the carousel already has arrows and a counter; the full thumbnail strip repeats its images above the portfolio. */
@media(max-width:800px){.new-album.album-enhanced .new-album-track{display:none}}
@media(prefers-reduced-motion:reduce){.royal-photo-dialog button{transition:none}.royal-photo-dialog button:hover{transform:none}}

.portfolio-album-link{display:inline-flex;margin-top:24px;color:#a45324;font:600 14px/20px Manrope,sans-serif;text-decoration:underline;text-underline-offset:4px;min-height:44px;align-items:center}
.portfolio-album-link:hover{color:#000830}

/* Keep photo cards visually complete while lazy images load. */
.portfolio-gallery .gallery-item img{background:#e5ded2}