:root {
  color-scheme: light;
  --paper: #f3f0e9;
  --paper-deep: #e8e4da;
  --ink: #20221f;
  --muted: #62635e;
  --line: #cfccc2;
  --green: #385a4a;
  --green-dark: #294638;
  --orange: #a74428;
  --display: Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}
.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: var(--ink);
  color: white;
}
.skip-link:focus { transform: translateY(0); }
.site-header {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 83px;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 5.1vw, 82px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.07em;
  text-decoration: none;
}
.wordmark-dot, .footer-mark span { color: var(--orange); }
.primary-nav { display: flex; align-items: center; gap: clamp(22px, 3.3vw, 52px); }
.primary-nav a, .site-footer a {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.primary-nav a:hover, .site-footer a:hover { color: var(--green); }
.primary-nav .nav-contact { padding: 11px 16px; border: 1px solid var(--ink); }
.menu-toggle { display: none; }
main { min-height: 70vh; }
.eyebrow {
  margin: 0 0 20px;
  color: var(--green);
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; }
h1, .display { font-family: var(--display); letter-spacing: -.04em; }
h1 { margin-bottom: 23px; font-size: clamp(48px, 7.1vw, 100px); line-height: .99; }
h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.07; letter-spacing: -.04em; }
h3 { font-size: 21px; line-height: 1.2; }
.lead { max-width: 620px; color: var(--muted); font-size: clamp(17px, 1.65vw, 20px); line-height: 1.65; }
.section-pad { padding: clamp(62px, 9vw, 128px) clamp(22px, 9vw, 144px); }
.hero {
  display: grid;
  min-height: min(700px, calc(100vh - 83px));
  grid-template-columns: 1.03fr .97fr;
  align-items: stretch;
  padding: 0 clamp(22px, 5.1vw, 82px);
}
.hero-copy { align-self: center; padding: 75px 7vw 75px 0; }
.hero-copy h1 { max-width: 700px; }
.hero-copy h1 em { color: var(--green); font-style: normal; }
.hero-copy .lead { margin-bottom: 32px; }
.hero-media { position: relative; min-height: 500px; margin: 36px 0; background: var(--paper-deep); }
.hero-media img, .image-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-media img { position: absolute; inset: 0; }
.media-caption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 9px;
  background: var(--paper);
  font: 10px var(--mono);
}
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 19px;
  border: 1px solid var(--green);
  background: var(--green);
  color: white;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.button:hover { background: var(--green-dark); }
.button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.button.secondary:hover { border-color: var(--ink); background: transparent; }
.intro-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
  padding: 28px clamp(22px, 5.1vw, 82px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.intro-strip p { margin: 0; }
.intro-strip .strip-label { color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.intro-strip .strip-copy { font-size: 14px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 42px; }
.section-heading h2 { max-width: 600px; margin-bottom: 0; }
.text-link { color: var(--green); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.gallery-intro { max-width: 290px; margin-bottom: 0; color: var(--muted); font-size: 13px; }
.photo-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gallery-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-deep); }
.gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-image .media-caption { right: 8px; bottom: 8px; padding: 4px 6px; }
.service-card {
  min-height: 202px;
  padding: 23px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .18s ease;
}
.service-card:hover { background: var(--paper-deep); }
.service-number { color: var(--orange); font: 11px var(--mono); }
.service-card h3 { margin: 29px 0 8px; }
.service-card p { margin: 0; color: var(--muted); font-size: 13px; }
.feature-band { display: grid; grid-template-columns: 1fr .9fr; background: var(--green); color: white; }
.feature-band .feature-image { min-height: 410px; background: #546a67; }
.feature-band .feature-image img { display: block; width: 100%; height: 100%; min-height: 410px; object-fit: cover; }
.feature-copy { align-self: center; max-width: 630px; padding: 60px clamp(28px, 8vw, 120px); }
.feature-copy .eyebrow { color: #c0d1c6; }
.feature-copy p { color: #e0e8e1; }
.feature-copy h2 { margin-bottom: 20px; }
.feature-copy .button { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.feature-copy .button:hover { background: white; }
.site-footer {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(22px, 5.1vw, 82px);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.site-footer .footer-mark { color: var(--ink); font: 500 12px var(--mono); letter-spacing: -.04em; }
.site-footer a { color: var(--ink); }
.footer-links { display: flex; gap: 24px; }
.page-intro { padding: clamp(70px, 11vw, 155px) clamp(22px, 9vw, 144px) 65px; }
.page-intro h1 { max-width: 850px; }
.page-intro .lead { max-width: 670px; }
.service-detail { display: grid; grid-template-columns: minmax(0, .85fr) minmax(300px, 1.15fr); gap: clamp(35px, 8vw, 118px); align-items: start; }
.service-detail-copy { position: sticky; top: 25px; }
.service-detail-copy h1 { font-size: clamp(48px, 6.1vw, 78px); }
.image-frame { position: relative; height: min(66vw, 640px); min-height: 390px; background: var(--paper-deep); }
.detail-content { padding-top: 36px; }
.detail-content h2 { margin-bottom: 18px; font-size: 32px; }
.detail-content p { max-width: 660px; color: var(--muted); }
.detail-note { padding: 20px; border-left: 2px solid var(--orange); background: #ebe7de; color: var(--ink) !important; font-size: 13px; }
.detail-rate { margin-top: 31px; padding-top: 20px; border-top: 1px solid var(--line); }
.detail-rate strong { display: block; margin-bottom: 5px; font: 500 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.detail-rate span { color: var(--muted); font-size: 14px; }
.service-detail-foot { display: flex; justify-content: space-between; gap: 20px; padding-top: 55px; }
.service-detail-foot a { color: var(--green); font-size: 13px; font-weight: 600; text-decoration: none; }
.service-detail-foot a:hover { text-decoration: underline; }
.calculator-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr); gap: clamp(36px, 8vw, 115px); align-items: start; }
.calculator-panel { padding: clamp(23px, 4vw, 44px); border: 1px solid var(--line); background: #ebe8e0; }
.field { margin-bottom: 24px; }
.field label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 600; }
.field select, .field input {
  width: 100%;
  min-height: 49px;
  padding: 10px 12px;
  border: 1px solid #aaa99f;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}
.field-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.estimate-card { min-height: 370px; padding: clamp(24px, 4vw, 46px); background: var(--green); color: white; }
.estimate-card .eyebrow { color: #c0d1c6; }
.estimate-range { margin: 35px 0 15px; font: 500 clamp(31px, 4vw, 46px)/1.05 var(--display); letter-spacing: -.04em; }
.estimate-card p { max-width: 500px; color: #e1e8e2; font-size: 13px; }
.estimate-card .button { margin-top: 11px; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.source-notes { margin-top: 42px; }
.source-notes h2 { font-size: 24px; }
.source-notes li { margin-bottom: 11px; color: var(--muted); font-size: 12px; }
.source-notes a { color: var(--green); }
.notice { padding: 16px 18px; border: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: start; }
.about-grid h2 { max-width: 520px; }
.about-grid p { color: var(--muted); }
.contact-box { max-width: 740px; padding: clamp(28px, 6vw, 70px); border: 1px solid var(--line); }
.contact-box h2 { margin-bottom: 15px; }
.contact-box .notice { margin: 28px 0; }
.contact-links { display: grid; gap: 1px; margin: 30px 0; border: 1px solid var(--line); background: var(--line); }
.contact-links a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; background: var(--paper); text-decoration: none; }
.contact-links a:hover { background: var(--paper-deep); }
.contact-links a > span { color: var(--muted); font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.contact-links strong { color: var(--green); font-size: 14px; font-weight: 600; text-align: right; }
.not-found { min-height: 65vh; display: grid; place-content: center; padding: 40px 22px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 850px) {
  .hero { min-height: auto; grid-template-columns: 1fr 1fr; }
  .hero-copy { padding-right: 3vw; }
  .hero-media { min-height: 400px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calculator-layout { grid-template-columns: 1fr; }
  .service-detail { grid-template-columns: 1fr; }
  .service-detail-copy { position: static; }
  .image-frame { height: 64vw; }
}
@media (max-width: 600px) {
  .site-header { min-height: 72px; }
  .menu-toggle {
    display: grid;
    width: 42px;
    height: 42px;
    align-content: center;
    justify-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    background: transparent;
  }
  .menu-toggle span:not(.sr-only) { display: block; width: 17px; height: 1px; background: var(--ink); }
  .primary-nav {
    position: absolute;
    top: 71px;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 5px 22px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }
  .primary-nav.is-open { display: flex; flex-direction: column; }
  .primary-nav a { padding: 12px 0; }
  .primary-nav .nav-contact { margin-top: 7px; padding: 11px 14px; }
  .hero { display: flex; flex-direction: column; padding: 0 22px; }
  .hero-copy { padding: 58px 0 32px; }
  h1 { font-size: clamp(48px, 14vw, 72px); }
  .hero-media { min-height: 390px; margin: 0 0 25px; }
  .intro-strip { align-items: flex-start; flex-direction: column; gap: 8px; padding-top: 20px; padding-bottom: 20px; }
  .section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 27px; }
  .service-card { min-height: 180px; padding: 18px 14px; }
  .service-card h3 { margin-top: 24px; font-size: 18px; }
  .photo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .feature-band { grid-template-columns: 1fr; }
  .feature-band .feature-image, .feature-band .feature-image img { min-height: 300px; max-height: 400px; }
  .feature-copy { padding: 47px 24px 54px; }
  .site-footer { align-items: flex-start; flex-direction: column; padding-top: 28px; padding-bottom: 28px; }
  .footer-links { flex-direction: column; gap: 12px; }
  .section-pad { padding: 68px 22px; }
  .page-intro { padding: 68px 22px 38px; }
  .image-frame { height: 95vw; min-height: 330px; }
  .service-detail-foot { flex-direction: column; padding-top: 38px; }
  .calculator-panel { padding: 22px 17px; }
  .estimate-card { min-height: 330px; padding: 24px 20px; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* =========================================================
   3D layer: extruded type, raised slabs, tilting cards
   ========================================================= */
:root {
  --edge: #c4beaf;
  --edge-deep: #ada796;
  --edge-green: #1d3a2c;
  --edge-ink: #0e0f0e;
  --drop: 0 26px 40px -22px rgba(32, 34, 31, .55);
  --drop-lg: 0 46px 70px -30px rgba(32, 34, 31, .6);
}
body {
  background:
    radial-gradient(110% 70% at 50% -10%, #fbf9f4 0%, rgba(251, 249, 244, 0) 60%),
    linear-gradient(180deg, var(--paper) 0%, #ebe6db 100%);
  background-attachment: fixed;
}
main { overflow-x: clip; }

/* Extruded type */
.wordmark, .footer-mark {
  text-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge-deep);
}
h1 {
  text-shadow:
    1px 1px 0 #dcd7ca, 2px 2px 0 #d6d1c3, 3px 3px 0 #d0cabc, 4px 4px 0 #cac4b5,
    5px 5px 0 #c4beae, 6px 6px 0 #beb8a7, 7px 7px 0 #b8b2a0,
    10px 14px 22px rgba(32, 34, 31, .22);
}
h2 {
  text-shadow: 1px 1px 0 #d8d3c6, 2px 2px 0 #d0cabc, 3px 3px 0 #c8c2b3, 5px 7px 12px rgba(32, 34, 31, .16);
}
.service-card h3 { text-shadow: 1px 1px 0 #d8d3c6, 2px 2px 0 #cbc5b6; }
.feature-copy h2, .estimate-range {
  text-shadow: 1px 1px 0 #2d4b3d, 2px 2px 0 #284437, 3px 3px 0 #223d31, 4px 4px 0 #1d362b, 7px 10px 16px rgba(0, 0, 0, .3);
}

/* Raised buttons that press in */
.button, .primary-nav .nav-contact, .menu-toggle {
  --e: var(--edge-green);
  border-radius: 8px;
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), var(--drop);
  transition: transform .16s ease, box-shadow .16s ease, background .18s ease, color .18s ease;
}
.button.secondary { --e: var(--edge-deep); background: #faf8f3; border-color: var(--edge); }
.button.secondary:hover { background: #fff; }
.primary-nav .nav-contact { --e: var(--edge-ink); background: #faf8f3; }
.menu-toggle { --e: var(--edge-deep); background: #faf8f3 !important; }
.feature-copy .button, .estimate-card .button { --e: #c9c3b3; }
.button:hover, .primary-nav .nav-contact:hover {
  transform: translate(-2px, -2px);
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--e), 7px 7px 0 var(--e), var(--drop-lg);
}
.button:active, .primary-nav .nav-contact:active {
  transform: translate(4px, 4px);
  box-shadow: 1px 1px 0 var(--e), 0 8px 14px -10px rgba(32, 34, 31, .6);
}

/* Shared tilt behaviour */
.service-card, .gallery-image, .hero-media, .image-frame, .feature-image {
  --rx: 0deg;
  --ry: 0deg;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
  will-change: transform;
}
.is-tilting { transition: transform .08s linear, box-shadow .3s ease; }

/* Service cards: separate floating tiles */
.service-grid { gap: 22px; border: 0; }
.service-card {
  --e: var(--edge);
  position: relative;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(155deg, #fdfcf9 0%, #f1ede4 100%);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--edge-deep), var(--drop);
}
.service-card:hover {
  background: linear-gradient(155deg, #fffefb 0%, #f4f0e8 100%);
  transform: perspective(900px) translate(-3px, -6px) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--e), 7px 7px 0 var(--e), 8px 8px 0 var(--e), 9px 9px 0 var(--edge-deep), var(--drop-lg);
}
.service-card::after, .gallery-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.service-card.is-tilting::after, .gallery-image.is-tilting::after { opacity: 1; }

/* Gallery: photo tiles with depth */
.photo-gallery { gap: 18px; }
.gallery-image {
  --e: #3c3d39;
  --oy: 0px;
  border-radius: 10px;
  transform: perspective(900px) translateY(var(--oy)) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), var(--drop);
}
.gallery-image:nth-child(3n + 2) { --oy: 14px; }
.gallery-image:hover { transform: perspective(900px) translateY(calc(var(--oy) - 8px)) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03); box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--e), 7px 7px 0 var(--e), 8px 8px 0 var(--e), var(--drop-lg); }
.gallery-image img { transition: transform .6s ease; }
.gallery-image:hover img { transform: scale(1.06); }

/* Captions float as little tags */
.media-caption {
  border-radius: 4px;
  box-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge-deep), 0 8px 14px -8px rgba(0, 0, 0, .5);
}

/* Hero image: stacked plates in space */
.hero { perspective: 1800px; }
.hero-media, .image-frame {
  border-radius: 16px;
  transform-style: preserve-3d;
  box-shadow: var(--drop-lg);
}
.hero-media { transform: rotateY(calc(-12deg + var(--ry))) rotateX(calc(5deg + var(--rx))); margin-right: 52px; }
.image-frame { transform: perspective(1600px) rotateY(calc(-8deg + var(--ry))) rotateX(calc(3deg + var(--rx))); margin-right: 40px; }
.hero-media::before, .hero-media::after, .image-frame::before, .image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.hero-media::before, .image-frame::before { background: var(--green); transform: translate3d(22px, 22px, -60px); }
.hero-media::after, .image-frame::after { background: var(--orange); opacity: .75; transform: translate3d(44px, 44px, -120px); }
.hero-media img, .image-frame img { position: absolute; inset: 0; z-index: 1; border-radius: inherit; transform: translateZ(1px); }
.hero-media .media-caption, .image-frame .media-caption { z-index: 2; transform: translateZ(60px); }

/* Feature band: tilted photo panel */
.feature-band {
  background: linear-gradient(135deg, #406553 0%, var(--green) 45%, #2e4d3e 100%);
  perspective: 1600px;
  box-shadow: inset 0 18px 30px -20px rgba(0, 0, 0, .45), inset 0 -18px 30px -20px rgba(0, 0, 0, .45);
}
.feature-band .feature-image {
  --e: #1b3529;
  align-self: center;
  margin: clamp(28px, 5vw, 64px);
  overflow: hidden;
  border-radius: 14px;
  transform: rotateY(calc(10deg + var(--ry))) rotateX(calc(3deg + var(--rx)));
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--e), 7px 7px 0 var(--e), 8px 8px 0 var(--e), 0 50px 80px -30px rgba(0, 0, 0, .7);
}

.estimate-card .estimate-range { max-width: none; color: #fff; font-size: clamp(31px, 4vw, 46px); }

/* Raised panels */
.calculator-panel, .estimate-card, .contact-box, .contact-links, .detail-note, .notice {
  border-radius: 14px;
}
.calculator-panel, .contact-box {
  --e: var(--edge);
  border-color: var(--edge);
  background: linear-gradient(160deg, #fbf9f4 0%, #efebe2 100%);
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--e), 7px 7px 0 var(--edge-deep), var(--drop-lg);
}
.estimate-card {
  --e: var(--edge-green);
  background: linear-gradient(150deg, #44695a 0%, var(--green) 50%, #30503f 100%);
  box-shadow: 1px 1px 0 var(--e), 2px 2px 0 var(--e), 3px 3px 0 var(--e), 4px 4px 0 var(--e), 5px 5px 0 var(--e), 6px 6px 0 var(--e), 7px 7px 0 var(--e), 8px 8px 0 var(--e), var(--drop-lg);
}
.contact-links { overflow: hidden; border-color: var(--edge); box-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge-deep), var(--drop); }
.contact-links a { transition: background .18s ease, transform .18s ease; }
.contact-links a:hover { transform: translateX(4px); }
.detail-note, .notice { box-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge-deep); }

/* Inputs sit into the surface */
.field select, .field input {
  border-radius: 8px;
  border-color: var(--edge-deep);
  background: #f6f3ec;
  box-shadow: inset 2px 2px 0 #ddd8cb, inset 0 4px 8px rgba(32, 34, 31, .08);
}

/* Header and strip get a slight lift */
.site-header { box-shadow: 0 1px 0 #fff, 0 10px 24px -18px rgba(32, 34, 31, .35); }
.intro-strip { background: linear-gradient(180deg, #f7f4ee 0%, #ece8df 100%); box-shadow: inset 0 1px 0 #fff, 0 12px 20px -18px rgba(32, 34, 31, .4); }

@media (max-width: 850px) {
  .hero-media { margin-right: 36px; }
}
@media (max-width: 600px) {
  .service-grid { gap: 14px; }
  .photo-gallery { gap: 12px; }
  .gallery-image:nth-child(3n + 2) { --oy: 0px; }
  .hero-media { transform: rotateY(-6deg) rotateX(4deg); margin-right: 26px; }
  .image-frame { transform: perspective(1200px) rotateY(-5deg) rotateX(3deg); margin-right: 26px; }
  .hero-media::before, .image-frame::before { transform: translate3d(12px, 12px, -40px); }
  .hero-media::after, .image-frame::after { transform: translate3d(24px, 24px, -80px); }
  .feature-band .feature-image { margin: 24px 24px 0; transform: rotateX(4deg); }
  h1 { text-shadow: 1px 1px 0 #dcd7ca, 2px 2px 0 #d3cec0, 3px 3px 0 #cac4b5, 4px 4px 0 #c1bbab, 6px 9px 14px rgba(32, 34, 31, .2); }
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .gallery-image, .hero-media, .image-frame, .feature-image { transition: none; }
}