@layer layout {
  .services-visual { background:#fff; padding-bottom:35px; }
  .service-gallery-heading { padding-block:80px 10px; }
  .service-gallery-heading .section-title-row { margin-bottom:28px; }
  .service-gallery-heading .service-filters { margin-bottom:28px; }
  .service-gallery { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; padding-inline:12px; }
  .service-gallery[data-filtered]:not([data-filtered="all"]) { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); max-width:1320px; margin:auto; }
  .service-gallery[data-filtered]:not([data-filtered="all"]) .service-photo-card { grid-column:auto; }
  .service-detail-photo { margin:0 0 28px; }
  .service-detail-photo img { width:100%; height:300px; object-fit:contain; background:var(--surface); border-radius:14px; }
  .service-detail-photo figcaption { margin-top:9px; font-size:.68rem; color:var(--muted); }
}
@layer components {
  .service-photo-card { display:block; grid-column:span 3; position:relative; aspect-ratio:1; border:0; padding:0; overflow:hidden; border-radius:clamp(35px,5.5vw,80px); background:#d9dee3; text-align:left; isolation:isolate; }
  .service-photo-card:nth-child(7n+5),.service-photo-card:nth-child(7n+6),.service-photo-card:nth-child(7n+7),.service-photo-card:nth-last-child(-n+3) { grid-column:span 4; }
  .service-gallery[data-count="20"][data-filtered="all"] .service-photo-card:nth-last-child(-n+6) { grid-column:span 4; }
  .service-gallery[data-filtered]:not([data-filtered="all"]) .service-photo-card { grid-column:auto; }
  .service-photo-card img { width:100%; height:100%; object-fit:cover; transition:transform 500ms cubic-bezier(.2,.65,.2,1); }
  .service-photo-card::after { content:""; position:absolute; inset:0; background:#00000013; pointer-events:none; transition:background 220ms; }
  .photo-card-action { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; padding:8px 8px 8px 19px; border-radius:999px; max-width:calc(100% - 32px); width:max-content; color:#fff; background:#1d1d1fe6; backdrop-filter:blur(12px); font-size:.79rem; line-height:1.35; font-weight:400; }
  .photo-card-action>span:first-child { min-width:0; }
  .photo-card-arrow { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; flex-shrink:0; background:#ffffff25; color:#fff; transition:background 200ms,color 200ms; }
  .photo-card-arrow svg { width:21px; height:21px; }
  .service-photo-card:focus-visible { outline-offset:-5px; outline:3px solid #fff; }
  .service-photo-card:focus-visible .photo-card-arrow { background:#fff; color:#1d1d1f; }
  .service-photo-card.reveal-ready { opacity:0; transform:translateY(18px); transition:opacity 500ms,transform 500ms; }
  .service-photo-card.reveal-ready.is-revealed { opacity:1; transform:none; }
  .service-photo-dialog { width:670px; }
  .service-photo-dialog .dialog-close { width:44px; height:44px; z-index:1; }
  @media(hover:hover) { .service-photo-card:hover img { transform:scale(1.035); } .service-photo-card:hover::after { background:transparent; } .service-photo-card:hover .photo-card-arrow { background:#fff; color:#1d1d1f; } }
}
@layer responsive {
  @media(max-width:1000px) {
    .service-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-inline:10px; }
    .service-gallery .service-photo-card { grid-column:auto; border-radius:55px; }
    .service-gallery .service-photo-card:last-child { grid-column:1/-1; aspect-ratio:2; }
    .service-gallery[data-filtered]:not([data-filtered="all"]) .service-photo-card:last-child,.service-gallery[data-count="20"] .service-photo-card:last-child { grid-column:auto; aspect-ratio:1; }
  }
  @media(max-width:600px) {
    .service-gallery-heading { padding-block:55px 8px; }
    .service-gallery-heading h2 { font-size:2rem; }
    .service-gallery { grid-template-columns:1fr; gap:12px; padding-inline:12px; }
    .service-gallery .service-photo-card,.service-gallery .service-photo-card:last-child { grid-column:auto; aspect-ratio:1.12; border-radius:46px; }
    .service-gallery[data-filtered]:not([data-filtered="all"]) { grid-template-columns:1fr; }
    .service-gallery[data-count="20"] .service-photo-card:last-child { aspect-ratio:1.12; }
    .photo-card-action { font-size:.9rem; max-width:calc(100% - 40px); }
    .service-detail-photo img { height:230px; }
    .service-photo-dialog h2 { font-size:1.4rem; }
  }
  @media(prefers-reduced-motion:reduce) { .service-photo-card.reveal-ready { opacity:1; transform:none; } .service-photo-card img { transition:none; } }
}