/* Warm edges and soft elevation for photographs and content panels. */
:root {
  --surface-edge: #dcd6cb;
  --surface-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 3px 8px rgba(48,40,28,.04), 0 16px 32px rgba(48,40,28,.08);
  --photo-shadow: 0 3px 8px rgba(48,40,28,.08), 0 18px 36px rgba(48,40,28,.14);
}

.overview-image img,
.intro-photo > img,
.detail-intro > img,
.project-image,
.wide-photo,
.image-gallery button {
  border: 1px solid rgba(152,135,106,.28);
  box-shadow: var(--photo-shadow);
}

.overview-image img,
.intro-photo > img,
.detail-intro > img {
  outline: 1px solid rgba(255,255,255,.35);
  outline-offset: -2px;
}

.service-hero-image {
  border-color: rgba(231,219,196,.32);
  outline: 1px solid rgba(255,255,255,.18);
  outline-offset: -2px;
  box-shadow: 0 4px 10px rgba(0,0,0,.14), 0 24px 44px rgba(0,0,0,.28);
}

.page-banner {
  border-top: 1px solid rgba(255,255,255,.25);
  border-bottom: 1px solid var(--surface-edge);
  box-shadow: 0 14px 30px rgba(48,40,28,.12);
}

.project-image,
.image-gallery button {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.project-card:hover .project-image,
.project-card:focus-visible .project-image,
.image-gallery button:hover,
.image-gallery button:focus-visible {
  transform: translateY(-3px);
  border-color: #bba47e;
  box-shadow: 0 5px 12px rgba(48,40,28,.08), 0 22px 40px rgba(48,40,28,.17);
}

.owner-card,
.form-card,
.project-info,
.contact-aside {
  border: 1px solid var(--surface-edge);
  box-shadow: var(--surface-shadow);
}

.owner-card,
.form-card,
.project-info {
  background: linear-gradient(145deg, #eeebe3, #e6e2d8);
}

.contact-aside {
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #fdfbf7, #f0ece3);
  align-self: start;
  min-width: 0;
}

.contact-aside h2 { font-size: clamp(30px,3vw,42px); }
.contact-aside .contact-method a { font-size: clamp(17px,1.45vw,21px); overflow-wrap: anywhere; }

.field input,
.field select,
.field textarea {
  background: #faf8f3;
  border-color: #d4cdbf;
  box-shadow: inset 0 2px 4px rgba(48,40,28,.04), 0 1px 0 rgba(255,255,255,.65);
}

.service-card,
.material {
  border: 1px solid var(--surface-edge);
  background: linear-gradient(145deg, #fdfbf7, #f4f0e8);
  box-shadow: var(--surface-shadow);
}

.service-card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.service-card:hover,
.service-card:focus-visible {
  border-color: #bba47e;
  box-shadow: inset 0 1px 0 #fff, 0 6px 12px rgba(48,40,28,.05), 0 20px 38px rgba(48,40,28,.12);
}

.service-card img {
  border: 1px solid rgba(152,135,106,.25);
  box-shadow: 0 3px 8px rgba(48,40,28,.1);
}

.service-strip a { box-shadow: var(--surface-shadow); }
.service-strip a:hover { box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(48,40,28,.1); }

.photo-label,
.hero-note {
  border-color: rgba(231,219,196,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.18);
}

.photo-label { border: 1px solid rgba(231,219,196,.25); }

@media(max-width:760px) {
  :root {
    --surface-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 3px 7px rgba(48,40,28,.04), 0 10px 22px rgba(48,40,28,.08);
    --photo-shadow: 0 3px 6px rgba(48,40,28,.07), 0 12px 24px rgba(48,40,28,.12);
  }
  .contact-aside { padding: 24px; }
  .service-hero-image { box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.22); }
}

@media(max-width:360px) {
  .contact-aside { padding: 20px; }
}

@media(prefers-reduced-motion:reduce) {
  .project-card:hover .project-image,
  .project-card:focus-visible .project-image,
  .image-gallery button:hover,
  .image-gallery button:focus-visible { transform: none; }
}