:root {
  --green: #4f6340;
  --green-deep: #34452d;
  --gold: #d3b15f;
  --cream: #f5e8b4;
  --soft-cream: #f7f1dc;
  --line: rgba(245, 232, 180, .28);
  --muted: rgba(247, 241, 220, .78);
  --shadow: 0 24px 70px rgba(32, 44, 27, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--green);
  color: var(--soft-cream);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 4px;
}

.header {
  position: relative;
  z-index: 10;
  width: min(100%, 1440px);
  height: 80px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid var(--line);
}
.header-actions { display: flex; align-items: center; gap: 28px; }
.header-actions a, footer a {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.call-link, .mobile-call, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 20px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold);
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.call-link:hover, .mobile-call:hover, .button:hover { transform: translateY(-1px); background: var(--cream); }
.mobile-call { display: none; }

.hero {
  width: min(100%, 1440px);
  min-height: 330px;
  margin: 0 auto;
  padding: clamp(54px, 7vw, 94px) clamp(20px, 8vw, 116px) clamp(48px, 6vw, 78px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(60px, 10vw, 160px);
  align-items: end;
}
.hero-copy { min-width: 0; }
.hero-heading { display: block; --logo-w: clamp(300px, 36vw, 520px); }
.hero h1 {
  margin: 0;
}
.hero-logo { display: block; width: var(--logo-w); height: auto; }

/* Wordmark rule that the shears trim on load; its resting state is a plain divider. */
.trim {
  --cut: 88%;
  position: relative;
  width: var(--logo-w);
  height: 26px;
  margin-top: 14px;
}
.trim-line, .trim-tail {
  position: absolute;
  top: 50%;
  height: 1px;
  background: var(--gold);
}
.trim-line {
  left: 0;
  width: var(--cut);
  background: linear-gradient(90deg, rgba(211, 177, 95, 0) 0%, var(--gold) 16%, var(--gold) 100%);
}
.trim-tail {
  left: var(--cut);
  right: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(211, 177, 95, .45) 100%);
}
.trim-cutter {
  position: absolute;
  top: 50%;
  left: var(--cut);
  width: 0;
  height: 0;
}
.trim-cutter img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 58px;
  height: auto;
  /* Park the shear pivot (the screw) exactly on the line. */
  translate: -58.7% -60.9%;
  transform-origin: 58.7% 60.9%;
}
@media (prefers-reduced-motion: no-preference) {
  /* Shears run the strand, snip at 68%, the loose tail drops away. */
  .trim-cutter {
    left: 0;
    opacity: 0;
    animation:
      trim-travel 1.2s .35s cubic-bezier(.33, .12, .28, 1) forwards,
      trim-enter .28s .35s ease-out forwards,
      trim-exit .42s 1.72s ease-in forwards;
  }
  .trim-cutter img { animation: trim-snip .3s .35s ease-in-out 4; }
  .trim-tail { animation: trim-fall .55s 1.56s cubic-bezier(.42, 0, .74, .35) forwards; }

  @keyframes trim-travel { to { left: var(--cut); } }
  @keyframes trim-enter { to { opacity: 1; } }
  @keyframes trim-exit { to { left: calc(var(--cut) + 11%); opacity: 0; } }
  @keyframes trim-snip { 50% { rotate: -5deg; } }
  @keyframes trim-fall { to { transform: translate(9px, 13px) rotate(9deg); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .trim-tail, .trim-cutter { display: none; }
}
.hero-heading > p {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}
.hero-details {
  min-width: 310px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--line);
}
.hero-details p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }

.work { width: 100%; padding: 0 0 clamp(88px, 10vw, 144px); overflow: hidden; }
.gallery-rail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 max(20px, calc((100vw - 1296px) / 2));
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(20px, calc((100vw - 1296px) / 2));
  scrollbar-width: none;
  cursor: grab;
}
.gallery-rail::-webkit-scrollbar { display: none; }
.gallery-rail:active { cursor: grabbing; }
.gallery-rail img {
  flex: 0 0 min(62vw, 720px);
  width: min(62vw, 720px);
  height: auto;
  aspect-ratio: 1;
  display: block;
  border-radius: clamp(22px, 3vw, 38px);
  object-fit: contain;
  scroll-snap-align: start;
  background: rgba(0, 0, 0, .08);
  box-shadow: var(--shadow);
}
.gallery-count {
  width: min(100% - 40px, 1296px);
  margin: 13px auto 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: right;
}
.gallery-count span { color: var(--cream); }

.booking h2 {
  margin: 0;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(38px, 4.2vw, 60px);
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 1.05;
}
.booking {
  width: min(calc(100% - 40px), 1296px);
  margin: 0 auto 28px;
  padding: clamp(38px, 6vw, 82px);
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(50px, 9vw, 130px);
  border-radius: 34px;
  background: var(--soft-cream);
  color: var(--green-deep);
}
.booking-call { display: none; }
.booking-intro p { max-width: 345px; margin: 22px 0 0; color: rgba(52, 69, 45, .72); line-height: 1.65; }
form { min-width: 0; }
.calendar-head { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; margin-bottom: 20px; }
.calendar-head h3 { margin: 0; text-align: center; font-size: 15px; }
.month-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(52, 69, 45, .24);
  border-radius: 50%;
  background: transparent;
  color: var(--green-deep);
  cursor: pointer;
}
.month-button:last-child { justify-self: end; }
.month-button:hover { border-color: var(--green-deep); background: var(--green-deep); color: var(--soft-cream); }
.month-button:disabled { opacity: .28; cursor: default; }
.month-button:disabled:hover { border-color: rgba(52, 69, 45, .24); background: transparent; color: var(--green-deep); }
.weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.weekdays { margin-bottom: 8px; color: rgba(52, 69, 45, .55); font-size: 11px; font-weight: 700; text-align: center; }
.calendar-days { min-height: 240px; }
.calendar-days > span, .day { aspect-ratio: 1; }
.day {
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--green-deep);
  font-size: 14px;
  cursor: pointer;
}
.day:hover:not(:disabled), .day.selected { background: var(--green); color: var(--soft-cream); }
.day:disabled { color: rgba(52, 69, 45, .25); cursor: not-allowed; }
.fields { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fields label:first-child { grid-column: 1 / -1; }
label { display: grid; gap: 8px; font-size: 12px; font-weight: 700; }
input, select {
  width: 100%;
  min-height: 48px;
  padding: 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(52, 69, 45, .28);
  border-radius: 0;
  background: transparent;
  color: var(--green-deep);
  font-size: 16px;
}
input:focus, select:focus { outline: none; border-color: var(--green-deep); }
.form-error { min-height: 17px; margin: 10px 0 0; color: #9c332d; font-size: 12px; font-weight: 700; }
.submit { margin-top: 20px; border-color: var(--green); background: var(--green); color: var(--soft-cream); }
.submit:hover { background: var(--green-deep); color: var(--soft-cream); }

.visit {
  width: min(calc(100% - 40px), 1296px);
  margin: 0 auto;
  padding: 44px clamp(4px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.visit address { font-size: 14px; font-style: normal; line-height: 1.65; }
.visit-actions { display: flex; align-items: center; gap: 12px; }
.visit-actions a {
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.visit-actions a:hover { border-color: var(--cream); }
.visit-actions .review-link { border-color: var(--gold); background: var(--gold); color: var(--green-deep); }
footer {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 30px clamp(20px, 5vw, 72px);
  display: flex;
  gap: 28px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
}
.footer-logo { display: block; width: 112px; height: auto; }
.footer-actions { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.instagram-link {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .18s ease, background .18s ease;
}
.instagram-link:hover { border-color: var(--cream); background: rgba(245, 232, 180, .08); }
.instagram-link svg { width: 19px; height: 19px; fill: var(--cream); }

@media (max-width: 760px) {
  .header { height: 70px; padding: 0 18px; }
  .header-actions { display: none; }
  .mobile-call { display: inline-flex; min-height: 40px; padding: 8px 17px; }
  .hero { 
    min-height: 0;
    padding: 42px 20px 36px;
    display: block;
  }
  .hero-heading { --logo-w: clamp(195px, 53vw, 218px); }
  .hero-heading > p { max-width: none; margin: 16px 0 0; font-size: 13px; }
  .trim { height: 22px; margin-top: 12px; }
  .trim-cutter img { width: 46px; }
  .hero-details { min-width: 0; margin-top: 34px; padding-top: 18px; gap: 16px; }
  .hero-details .button { min-height: 42px; padding: 9px 15px; white-space: nowrap; }
  .work { padding-bottom: 84px; }
  .gallery-rail { gap: 12px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .gallery-rail img { flex-basis: calc(100vw - 64px); width: calc(100vw - 64px); border-radius: 24px; }
  .gallery-count { width: auto; margin: 11px 20px 0; }
  .booking { width: calc(100% - 24px); border-radius: 26px; }
  .booking { margin-bottom: 18px; padding: 38px 20px; grid-template-columns: 1fr; gap: 44px; }
  .booking h2 { font-size: 39px; }
  .calendar-days { min-height: 226px; }
  .fields { grid-template-columns: 1fr; }
  .fields label:first-child { grid-column: auto; }
  .submit { width: 100%; }
  .visit { width: 100%; padding: 34px 20px 40px; align-items: flex-start; flex-direction: column; gap: 24px; }
  .visit-actions { flex-wrap: wrap; }
  footer { padding: 26px 20px; display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .footer-logo { width: 104px; }
  .footer-actions { grid-column: 1 / -1; margin-left: 0; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .call-link, .mobile-call, .button { transition: none; }
}

/* Desktop layer: the base styles below 761px stay untouched. */
@media (min-width: 761px) {
  body { font-size: 17px; }

  .header { height: 92px; }
  .header-actions a, footer a { font-size: 14px; }

  .hero {
    min-height: 0;
    padding: clamp(56px, 5.5vw, 84px) clamp(24px, 4.5vw, 72px) clamp(52px, 5vw, 76px);
    display: block;
    text-align: center;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-heading { --logo-w: clamp(300px, 30vw, 470px); }
  .hero-logo { margin: 0 auto; }
  .trim { --cut: 86%; width: var(--logo-w); height: 30px; margin: 24px auto 0; }
  .trim-cutter img { width: 62px; }
  .hero-heading > p {
    margin-top: 22px;
    color: var(--cream);
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 500;
    letter-spacing: .005em;
  }
  .hero-details {
    width: min(100%, 580px);
    min-width: 0;
    margin-top: clamp(30px, 3vw, 44px);
    padding-top: 26px;
    justify-content: center;
    gap: clamp(24px, 3vw, 40px);
  }
  .hero-details p { font-size: 15px; letter-spacing: .02em; }
  .hero-details .button { padding: 13px 26px; }

  .work { padding-bottom: clamp(64px, 6vw, 96px); }
  .gallery-rail {
    gap: 20px;
    padding-inline: max(24px, calc((100vw - 1296px) / 2));
    scroll-padding-inline: max(24px, calc((100vw - 1296px) / 2));
  }
  .gallery-rail img {
    flex-basis: clamp(300px, 28vw, 440px);
    width: clamp(300px, 28vw, 440px);
    border-radius: 26px;
  }
  .gallery-count { font-size: 12px; }

  .booking {
    margin-bottom: 34px;
    padding: clamp(48px, 4.5vw, 72px);
    grid-template-columns: minmax(250px, .76fr) minmax(0, 1.24fr);
    gap: clamp(48px, 6vw, 104px);
    align-items: stretch;
  }
  .booking h2 { font-size: clamp(36px, 3.4vw, 52px); }
  .booking-intro { display: flex; flex-direction: column; }
  .booking-intro p { max-width: 330px; font-size: 16px; }
  .booking-call {
    margin-top: auto;
    padding-top: 22px;
    display: inline-grid;
    gap: 6px;
    border-top: 1px solid rgba(52, 69, 45, .22);
    text-decoration: none;
  }
  .booking-call span { color: rgba(52, 69, 45, .62); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
  .booking-call strong { font-family: "Libre Baskerville", Georgia, serif; font-size: 23px; font-weight: 400; letter-spacing: -.02em; }
  .booking-call:hover strong { color: var(--green); }
  form { max-width: 600px; }
  .calendar-head h3 { font-size: 16px; }
  .weekdays { font-size: 12px; }
  .calendar-days { min-height: 0; }
  .day { font-size: 15px; }
  .fields { margin-top: 34px; gap: 24px 28px; }
  label { font-size: 13px; }

  .visit { padding: 48px clamp(8px, 3vw, 52px) 40px; }
  .visit address { font-size: 16px; }
  .visit-actions a { padding: 12px 20px; font-size: 13px; }

  footer { padding: 34px clamp(24px, 4.5vw, 72px); align-items: center; }
  .footer-logo { width: 132px; }
}