/* Scoped editorial layouts for Services and Gallery. Solid surfaces only. */
.studio-page { color:#172f49; }
.studio-page h1,.studio-page h2,.studio-page h3,.studio-viewer h2 { font-weight:750; letter-spacing:-.04em; line-height:1.15; margin:0; }
.studio-page h1 { font-size:clamp(2.7rem,4.8vw,4.75rem); }
.studio-page h1 em { color:#c41565; font-style:normal; }
.studio-page h2 { font-size:clamp(2rem,3vw,3rem); }
.studio-page h3 { font-size:1.4rem; }
.studio-page p { font-size:1rem; line-height:1.8; color:#526274; }
.studio-page a { text-decoration:none; }
.studio-page :is(a,button):focus-visible,.studio-viewer button:focus-visible { outline:3px solid #087e93; outline-offset:5px; }
.studio-hero { padding:8rem 0 5rem; }
.studio-crumb { display:flex; gap:1rem; color:#526274; font-size:1rem; margin-bottom:3.5rem; }
.studio-crumb a { color:#526274; }
.studio-kicker { color:#087e93!important; font-weight:700; letter-spacing:.06em; font-size:1rem; margin-bottom:1.1rem; }
.studio-hero-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:5rem; align-items:center; }
.studio-lead { font-size:1.15rem!important; margin-top:1.6rem; max-width:40rem; }
.studio-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:2rem; }
.studio-button { display:inline-flex; align-items:center; justify-content:center; gap:1rem; background:#c41565; color:#fff; border-radius:.65rem; padding:1rem 1.35rem; font-size:1rem; font-weight:700; line-height:1.5; }
.studio-button:hover { background:#a71054; }
.studio-link { color:#172f49; font-size:1rem; font-weight:700; border-bottom:1px solid #a3b8c3; padding-bottom:.3rem; }
.studio-location { margin-top:2rem; padding-top:1.5rem; border-top:1px solid #dde4e8; }
.studio-capability-board { background:#f8f8f8; padding:2.5rem; border:1px solid #e0e3e6; border-radius:1.25rem; }
.studio-board-top { display:flex; justify-content:space-between; gap:1rem; color:#087e93; font-size:1rem; font-weight:700; margin-bottom:2rem; }
.studio-capability-board h2 { margin-bottom:2rem; }
.studio-board-row { display:flex; gap:1.25rem; padding:1.2rem 0; border-top:1px solid #d5dde2; align-items:center; }
.studio-board-row > span { background:#fff; color:#c41565; width:3rem; height:3rem; display:grid; place-items:center; border-radius:.6rem; flex-shrink:0; font-weight:700; }
.studio-board-row strong { font-size:1.25rem; }
.studio-board-row p { margin:.2rem 0 0; }
.studio-section { padding:5rem 0; scroll-margin-top:6rem; }
.studio-heading { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:end; margin-bottom:2.5rem; }
.studio-heading > p { max-width:33rem; }
.studio-jumps { display:flex; flex-wrap:wrap; gap:1rem; }
.studio-jumps a { flex:1; min-width:12rem; background:#fff; border:1px solid #d9e1e5; border-radius:.75rem; padding:1.25rem; font-size:1.1rem; font-weight:700; color:#172f49; }
.studio-jumps a:hover { border-color:#06b6d4; color:#087e93; }
.studio-group-head { display:flex; gap:1.5rem; margin-bottom:2.5rem; align-items:start; }
.studio-group-head > span { font-size:2rem; color:#087e93; line-height:1.15; padding-top:.25rem; }
.studio-group-head p { margin-top:.75rem; }
.studio-service-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.studio-service-card { display:flex; flex-direction:column; align-items:start; border:1px solid #dae2e7; border-radius:1rem; padding:2rem; background:#fff; color:#172f49; transition:border-color .2s,transform .2s; }
.studio-service-card:hover { border-color:#06b6d4; transform:translateY(-3px); }
.studio-service-card img { margin-bottom:1.75rem; width:64px; height:64px; }
.studio-service-card h3 { margin-bottom:.85rem; }
.studio-service-card p { max-width:32rem; margin-bottom:1.5rem; }
.studio-card-link { width:100%; margin-top:auto; display:flex; justify-content:space-between; gap:1rem; font-weight:700; font-size:1rem; color:#172f49; }
.studio-card-link > span { color:#c41565; }
.studio-process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.studio-process article { border-top:2px solid #06b6d4; padding-top:1.5rem; }
.studio-process span { display:block; font-size:1rem; color:#087e93; font-weight:700; margin-bottom:1.5rem; }
.studio-process h3 { margin-bottom:1rem; }
.studio-cta { display:flex; align-items:center; justify-content:space-between; gap:3rem; }
.studio-cta p { margin-top:1rem; max-width:45rem; }
.studio-cta .studio-button { flex-shrink:0; }
.studio-feature { display:grid; grid-template-columns:1.5fr 1fr; overflow:hidden; border:1px solid #dbe3e7; border-radius:1.1rem; margin-top:3rem; color:#172f49; }
.studio-feature-image { display:flex; align-items:center; padding:2rem; background:#f8f8f8; }
.studio-feature-image img { display:block; width:100%; height:auto; border:1px solid #dde4e8; border-radius:.4rem; }
.studio-feature-copy { display:flex; flex-direction:column; align-items:start; justify-content:center; padding:2.5rem; background:#fff; }
.studio-feature-copy h2 { font-size:2.2rem; }
.studio-feature-copy p { margin-bottom:1.5rem; }
.studio-filters { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:1.25rem; }
.studio-filters button,.studio-viewer button { font:inherit; font-size:1rem; min-height:3rem; padding:.7rem 1.05rem; border:1px solid #ccd7df; background:#fff; color:#172f49; border-radius:.6rem; cursor:pointer; }
.studio-filters button[aria-pressed="true"] { background:#354c6a; border-color:#354c6a; color:#fff; }
.studio-results { margin-bottom:1.75rem; }
.studio-shot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.studio-shot { background:#fff; border:1px solid #dbe2e7; border-radius:1rem; overflow:hidden; min-width:0; }
.studio-shot[hidden] { display:none; }
.studio-shot-open { display:block; width:100%; text-align:start; background:none; border:0; cursor:pointer; color:#172f49; font:inherit; }
.studio-shot-image { display:flex; position:relative; align-items:center; justify-content:center; padding:1rem; height:220px; background:#e8edf1; overflow:hidden; }
.studio-shot-image img { width:100%; height:100%; object-fit:contain; transition:transform .2s; }
.studio-shot-open:hover img { transform:scale(1.035); }
.studio-expand { position:absolute; bottom:.75rem; inset-inline-end:.75rem; width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:50%; color:#fff; background:#354c6a; font-size:1.2rem; }
.studio-shot-caption { display:block; padding:1.5rem 1.5rem .5rem; }
.studio-shot-caption > span { display:block; color:#087e93; font-size:1rem; margin-bottom:.5rem; }
.studio-shot-caption strong { font-size:1.2rem; display:block; line-height:1.45; }
.studio-shot-product { display:block; padding:.75rem 1.5rem 1.5rem; color:#526274; font-size:1rem; }
.studio-shot-product:hover { color:#c41565; }
.studio-viewer { width:min(1200px,94vw); max-height:92vh; margin:auto; border:0; border-radius:1rem; padding:1.25rem; color:#172f49; background:#fff; }
.studio-viewer::backdrop { background:#102237d9; }
.studio-viewer-head,.studio-viewer-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.studio-viewer h2 { font-size:1.3rem; }
.studio-viewer-image { padding-block:1rem; }
.studio-viewer-image img { width:100%; height:auto; max-height:65vh; object-fit:contain; }
.studio-viewer-controls { font-size:1rem; }
@media(max-width:900px) {
 .studio-hero-grid,.studio-heading { grid-template-columns:1fr; gap:2rem; }
 .studio-hero { padding-top:7rem; }
 .studio-capability-board { padding:2rem; }
 .studio-feature { grid-template-columns:1fr; }
 .studio-shot-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .studio-cta { align-items:start; flex-direction:column; gap:1.5rem; }
}
@media(max-width:600px) {
 .studio-section { padding:3.5rem 0; }
 .studio-hero { padding-bottom:3rem; }
 .studio-crumb { margin-bottom:2rem; }
 .studio-service-grid,.studio-shot-grid,.studio-process { grid-template-columns:1fr; }
 .studio-service-card,.studio-feature-copy { padding:1.5rem; }
 .studio-feature-image { padding:1rem; }
 .studio-group-head { gap:1rem; }
 .studio-process { gap:2rem; }
 .studio-viewer { padding:.8rem; }
 .studio-viewer-head { align-items:start; }
 .studio-viewer-controls { flex-wrap:wrap; }
 .studio-viewer-image img { height:auto; max-height:60vh; }
}
@media(prefers-reduced-motion:reduce) { .studio-service-card,.studio-shot-image img { transition:none; } }
