@font-face {
  font-family: Manrope;
  src: url('/assets/font-0.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/assets/font-3.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
* { box-sizing: border-box }
body {
  --paper: #f3ede3;
  --ink: #211b18;
  --accent: #8a461d;
  --line: #211b1833;
  background: var(--paper);
  color: var(--ink);
  margin: 0;
  font: 400 16px/1.65 Manrope, system-ui, sans-serif;
}
a { color: inherit; text-underline-offset: .24em }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px }
img { display: block; width: 100%; height: auto }
figure, h1, h2, h3, p { margin: 0 }
h1, h2 { font: 700 clamp(38px, 7vw, 96px)/.98 Georgia, serif; letter-spacing: -.045em }
h2 { font-size: clamp(33px, 5vw, 57px); line-height: 1.05 }
h3 { font-size: clamp(17px, 2.4vw, 24px); line-height: 1.2 }
p { max-width: 58ch }
.wrap { width: min(1152px, calc(100% - 72px)); margin-inline: auto }
.site-head, .site-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
  font-size: 13px;
}
.site-head { border-bottom: 1px solid var(--line) }
.site-foot { border-top: 1px solid var(--line) }
.site-head a, .site-foot a { text-decoration: none }
.site-head a:hover, .site-foot a:hover { text-decoration: underline }
.studio { text-transform: uppercase; letter-spacing: .12em; font-weight: 700 }
.studio span { margin-left: .25em; color: var(--accent) }
.skip { position: absolute; top: 8px; left: 8px; z-index: 3; background: var(--paper); padding: 8px 16px }
.skip:not(:focus) { clip-path: inset(50%) }
.section { padding-block: clamp(44px, 7vw, 88px) }
.tag { color: var(--accent); font-size: 12px; letter-spacing: .15em; font-weight: 700 }
.lead { font-size: clamp(20px, 3.2vw, 32px); line-height: 1.18; font-weight: 700 }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.button:hover { text-decoration: underline }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-bottom: 30px; align-items: end }
.more { margin: 24px 0 12px }
figcaption { padding-top: 10px; font-size: 13px }
[id] { scroll-margin-top: 24px }

.paws { --paper: #f5ebe0; --ink: #282019; --accent: #803e1c }
.paws-hero { position: relative; min-height: clamp(530px, 52vw, 690px); display: grid; align-items: center; isolation: isolate }
.paws-hero > img, .paws-hero::after { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1 }
.paws-hero > img { object-fit: cover; object-position: 63% center }
.paws-hero::after { content: ''; background: linear-gradient(90deg, #21130bed, #21130b9e 42%, #21130b00 76%) }
.hero-copy { padding-block: 40px; color: #fff5e8 }
.hero-copy .tag, .hero-copy .button { color: #ffd497 }
.hero-copy h1 { max-width: 8ch; margin-block: 14px 20px; font-style: italic }
.hero-copy p:not(.tag) { max-width: 36ch; margin-bottom: 16px }
.hero-copy .button { margin-top: 7px }
.landscape-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px }
.landscape-gallery img { border-radius: 6px }

.garden { --paper: #f5f6e9; --ink: #22331e; --line: #22331e3d; --accent: #3b6319 }
.garden h1, .garden h2 { font-family: Manrope, system-ui, sans-serif; letter-spacing: -.058em }
.garden-hero { display: grid; grid-template-columns: .98fr 1.02fr; align-items: center; gap: clamp(28px, 6vw, 80px) }
.garden-hero h1 { margin-block: 14px 22px }
.garden-hero p:not(.tag) { margin-bottom: 14px }
.garden-hero img { border-radius: 47% 47% 15px 15px; aspect-ratio: 1; object-fit: cover }
.garden .button { border-radius: 99px }
.garden-field { background: #e2ebcc }
.garden-columns { display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); align-items: center; gap: clamp(24px,6vw,76px) }
.garden-guide ol { padding-left: 24px; margin: 22px 0 0 }
.garden-guide li { padding: 13px 0 13px 8px; border-bottom: 1px solid var(--line) }
.garden-guide li::marker { color: var(--accent); font-weight: 700 }
.garden-guide p { margin-top: 4px }
.phone-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px }
.phone-pair img { border-radius: 13px; margin-inline: auto }
.outro p { margin: 12px 0 20px }

.jade { --paper: #161f1a; --ink: #f5ecdc; --accent: #d7c483; --line: #f5ecdc40 }
.jade-hero { text-align: center; padding-bottom: 0 }
.jade-hero h1 { margin-block: 12px 16px }
.jade-hero p { margin-inline: auto }
.jade-hero img { margin-top: 27px; aspect-ratio: 2.4; object-fit: cover; object-position: center 56% }
.jade-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-block: 1px solid var(--line) }
.jade-compare article { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 18px; padding: 22px }
.jade-compare article + article { border-left: 1px solid var(--line) }
.jade-compare h3 { color: var(--accent); font-family: Georgia, serif; margin-bottom: 8px }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px) }
  .intro, .garden-columns { grid-template-columns: 1fr; gap: 12px }
  .garden-hero { gap: 18px }
  .garden-hero img { border-radius: 48% 48% 12px 12px }
  .phone-pair img { max-width: 215px }
  .jade-compare article { grid-template-columns: 1fr; align-content: start; padding: 14px }
  .jade-compare img { max-width: 230px; margin-inline: auto }
}
@media (max-width: 520px) {
  .site-head, .site-foot { font-size: 11px; padding-block: 17px }
  .studio { letter-spacing: .065em }
  .paws-hero { min-height: 0; background: #281b13 }
  .paws-hero > img { position: static; height: auto; aspect-ratio: 1.45; object-position: 72% center }
  .paws-hero::after { content: none }
  .hero-copy { padding-block: 26px 34px }
  .hero-copy h1 { max-width: none }
  .landscape-gallery, .garden-hero { grid-template-columns: 1fr }
  .jade-hero img { aspect-ratio: 1.6 }
  .jade-compare { font-size: 14px }
  .jade-compare article { gap: 12px; padding: 12px }
}