/* For The Love of Trees — site styles.
   v10: an ordinary scrolling page, no script. On wider screens the words scroll on the left
   and the botanical plate stays put on the right, its view drifting from crown to roots as
   you read (a CSS scroll-driven animation; where a browser can't, the whole plate simply
   shows). On phones the plate is the picture at the top and everything follows in one column.
   Type is Inter: tracked uppercase kickers, light large headings, italic leads. Paper ground,
   olive ink, leaf-green ticks. Plain CSS, no build step. */

:root {
  /* paper: the plate's own, light at the crown and deepening toward the roots. The page
     background runs the same way, so the drawing has no edge wherever it sits. */
  --paper: #eedfc6;
  --paper-mid: #e6d8c0;
  --paper-deep: #d9ccb7;
  --paper-light: #f5ecdc;
  --ink: #25271f;
  --text: #201e1d;
  --muted: #56564b;
  --rule: color-mix(in srgb, #25271f 20%, transparent);

  /* accent = the logo's olive ink (#414834). Swap the ramp here to rebrand. */
  --olive: #414834; --olive-600: #363c2b; --olive-700: #2b3022;
  --leaf: #6f8a4b;                /* the drawing's leaf green, for the ticks */
  --on-olive: #f6efe1;

  --font: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;   /* the logo is the only serif */
  --gutter: clamp(16px, 4vw, 56px);
  --pad-r: clamp(32px, 4vw, 64px);     /* between the words and the drawing */
  --header-h: 84px;
  --plate-w: max(42vw, 100vw - 1040px);   /* the drawing's column; the words never get wider than ~940px */

  --shadow-photo: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent), 0 14px 30px -14px color-mix(in srgb, #2d2b2b 45%, transparent);

  /* paper grain: fine dark specks over the paper colour */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .12 .55 0 0 0 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%236f8a4b'/%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html {
  min-height: 100%;
  background-color: var(--paper);
  background-image: var(--grain), linear-gradient(to bottom, var(--paper) 0%, var(--paper-mid) 45%, var(--paper-deep) 100%);
  background-repeat: repeat, no-repeat;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6; text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--olive-700); text-decoration: none; }
a:hover { color: var(--olive-600); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 2px; }
::selection { background: color-mix(in srgb, var(--leaf) 30%, transparent); }
img { max-width: 100%; height: auto; display: block; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.kicker { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); line-height: 1.4; }
.lead { font-size: 17px; line-height: 1.55; font-style: italic; color: var(--ink); max-width: 46ch; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; padding: 8px 14px; background: var(--paper-light); color: var(--ink); }
.skip:focus { left: 16px; }

/* ---------- icons: one colour, drawn from the text colour ---------- */
.icon {
  display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.icon-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h3l1.6 4-2 1.3a11.5 11.5 0 0 0 6.1 6.1l1.3-2 4 1.6v3a2 2 0 0 1-2.1 2A16.5 16.5 0 0 1 3.5 5.6a2 2 0 0 1 2-2.1z'/%3E%3C/svg%3E"); }
.icon-text { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 4v-4A2.5 2.5 0 0 1 4 13.5z'/%3E%3Cpath d='M8 8.5h8M8 11.5h5'/%3E%3C/svg%3E"); }
.icon-insta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.4' cy='6.6' r='1' fill='black' stroke='none'/%3E%3C/svg%3E"); }

/* ---------- pills: every button on the site ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 18px 10px 14px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.pill:hover { background: var(--ink); color: var(--paper-light); text-decoration: none; }
.pill-solid { background: var(--olive); border-color: var(--olive); color: var(--on-olive); }
.pill-solid:hover { background: var(--olive-700); border-color: var(--olive-700); color: var(--on-olive); }
.pill-lg { padding: 14px 24px 14px 19px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30; height: var(--header-h);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.wordmark { display: block; line-height: 0; flex: none; }
.wordmark img { width: clamp(120px, 11vw, 158px); }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); margin-left: auto; }
.nav a { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); padding: 6px 0; }
.nav a:hover { color: var(--olive-600); text-decoration: none; box-shadow: inset 0 -1px 0 currentColor; }
.nav-gallery { display: inline-flex; align-items: center; gap: 7px; }
.nav-gallery .icon { width: 15px; height: 15px; color: var(--leaf); }
.header-actions { display: flex; gap: 10px; }
.call-label { display: none; }
@media (max-width: 1240px) {
  .call-number { display: none; }
  .call-label { display: inline; }
}

/* ---------- the page: words + drawing ---------- */
.content { min-width: 0; }

/* the opening: the first screen is this plus the crown of the tree */
.hero { display: flex; flex-direction: column; align-items: flex-start; padding: 56px 0 64px; }
.hero h1 { margin-top: 18px; font-size: clamp(40px, 4.4vw, 68px); line-height: 1.0; letter-spacing: -0.03em; max-width: 15ch; }
.hero .lead { margin-top: 24px; }
.hero-actions { margin-top: 30px; }
.rating { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink); }
.rating .stars { color: var(--olive); letter-spacing: 0.12em; font-size: 13px; }
.rating:hover { color: var(--olive-600); }
.service-index { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); width: 100%; }
.service-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.service-index a {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--paper-light) 40%, transparent);
  font-size: 16px; color: var(--ink); line-height: 1.25; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.service-index a::before { content: ''; width: 20px; height: 20px; flex: none; background: var(--tick) center / contain no-repeat; }
.service-index a:hover { text-decoration: none; border-color: var(--ink); background: color-mix(in srgb, var(--paper-light) 85%, transparent); }

/* section headings in the About / Reviews / Contact voice */
.about h2, .reviews-section h2, .contact h2 {
  margin-top: 14px; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04; letter-spacing: -0.025em; max-width: 18ch;
}

/* the services */
.section-kicker { display: flex; align-items: center; gap: 14px; }
.section-kicker::before { content: ''; width: 28px; height: 1px; background: var(--ink); }
.service { padding: 52px 0 28px; }
/* the leader: the heading's line runs on to the drawing and ends in a dot, like a plate label */
.leader {
  display: flex; align-items: center; gap: 20px;
  font-size: clamp(30px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.025em;
  margin-right: calc(-1 * var(--pad-r));
}
.leader::after {
  content: ''; flex: 1 1 auto; min-width: 48px; height: 7px; opacity: .75;
  background:
    radial-gradient(circle closest-side, var(--ink) 85%, transparent 100%) right center / 7px 7px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left center / calc(100% - 3px) 1px no-repeat;
}
.ticks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.ticks li { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.3; color: var(--ink); }
.ticks li::before { content: ''; width: 16px; height: 16px; flex: none; background: var(--tick) center / contain no-repeat; }
.service-brief .lead { margin-top: 16px; }

/* photos: a band under each service; two photos share it, the first wider */
.photos { margin-top: 26px; display: grid; grid-template-rows: minmax(0, 1fr); gap: 12px; height: clamp(260px, 25vw, 440px); }
.photos-2 { grid-template-columns: 3fr 2fr; }
.photo { display: block; min-width: 0; height: 100%; }
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-photo); background: var(--paper-deep); }

.about { padding: 110px 0 20px; }
.about .lead { margin-top: 22px; }
.about-art { display: none; }

.reviews-section { padding: 110px 0 20px; }
.reviews-head { display: flex; align-items: center; gap: 14px; }
.google-mark { line-height: 0; flex: none; transition: transform .15s; }
.google-mark:hover { transform: scale(1.06); }
.reviews { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 40px; }
.review { margin: 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.review .stars { color: var(--olive); letter-spacing: 0.12em; font-size: 13px; }
.review blockquote { margin: 6px 0 0; font-size: 15px; line-height: 1.55; font-style: italic; }
.review figcaption { margin-top: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.more-link { display: inline-block; margin-top: 30px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); box-shadow: inset 0 -1px 0 var(--rule); padding-bottom: 3px; }
.more-link:hover { text-decoration: none; box-shadow: inset 0 -1px 0 currentColor; }

/* contact: the end of the page, on a lighter sheet so it reads as the place to act */
.contact {
  margin: 110px 0 96px; padding: clamp(28px, 4vw, 52px);
  background: color-mix(in srgb, var(--paper-light) 62%, transparent);
  border: 1px solid var(--rule); border-radius: 2px;
}
.contact .lead { margin-top: 16px; }
.contact .actions { margin-top: 28px; }
.contact-list { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); display: grid; gap: 10px; }
.contact-list div { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: 12px; align-items: baseline; }
.contact-list dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }

.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
  padding: 26px var(--gutter) 34px; border-top: 1px solid var(--rule);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); line-height: 1.7;
}

.call-bar { display: none; }

/* ---------- wider screens: the drawing in its own column, held in view ---------- */
@media (min-width: 900px) {
  .page { display: grid; grid-template-columns: minmax(0, 1fr) var(--plate-w); }
  .content { grid-column: 1; grid-row: 1; padding: 0 var(--pad-r) 0 var(--gutter); }
  .hero { min-height: calc(100vh - var(--header-h)); justify-content: center; }
  .plate {
    grid-column: 2; grid-row: 1; align-self: start;
    position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%); mask-image: linear-gradient(to right, transparent 0, #000 20%);
  }
  /* without the drift: the whole plate, filling its column */
  .plate img {
    position: absolute; top: 0; left: 50%; max-width: none; height: auto; translate: -50% 0;
    width: max(100%, calc((100vh - var(--header-h)) * 0.8));
    filter: saturate(.85) contrast(.98); user-select: none; pointer-events: none;
  }
}
/* the drift: the view starts on the crown and reaches the roots at the end of the page, tied to the scroll position. Off under reduced motion.
   Sized from the column's height so the ground line (63% down the drawing) starts just below the fold: the page opens on crown
   and trunk only, and the roots have to be scrolled to. The drawing holds still for the first half screen of scrolling, then drifts. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .plate img {
      width: max(100%, min(calc((100vh - var(--header-h)) * 1.32), 190%));
      animation: drift linear both; animation-timeline: scroll(root block); animation-range: 50vh 100%;
    }
  }
}
@keyframes drift {
  /* straight down only: top of the drawing until the hold ends, the bottom at the end of the page */
  from { translate: -50% 0; }
  to   { translate: -50% calc(-100% + 100vh - var(--header-h)); }
}

/* ---------- phones and small tablets: one column ---------- */
@media (max-width: 899px) {
  :root { --header-h: 60px; --pad-r: var(--gutter); --hero-h: min(56svh, 520px); }
  .site-header { gap: 12px; background: color-mix(in srgb, var(--paper) 96%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .wordmark img { width: 112px; }
  .nav { gap: 16px; }
  .nav a { letter-spacing: 0.14em; }
  .wide-only, .header-actions { display: none; }

  .page { display: flex; flex-direction: column; }
  /* the drawing: the crown, as the picture at the top, fading into the paper */
  .plate {
    order: -1; position: relative; height: var(--hero-h); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent);
  }
  .plate img {
    position: absolute; top: 0; left: 50%; translate: -50% 0; max-width: none;
    width: min(150%, calc(var(--hero-h) * 1.6)); height: auto; filter: saturate(.85) contrast(.98);
  }
  .content { position: relative; margin-top: -72px; padding: 0 var(--gutter); }

  .hero { padding: 0 0 8px; }
  .hero h1 { margin-top: 12px; font-size: clamp(32px, 8.6vw, 46px); }
  .hero .lead { margin-top: 16px; font-size: 16px; }
  .hero-actions { display: none; }                 /* the bottom bar carries Call and Text */
  .service-index { margin-top: 28px; padding-top: 18px; }
  .service-index ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .service-index a { display: flex; font-size: 14px; padding: 8px 10px 8px 8px; white-space: normal; height: 100%; }
  .service-index a::before { width: 18px; height: 18px; }

  .services { padding-top: 40px; }
  .service { padding: 40px 0 12px; }
  .leader { font-size: clamp(27px, 7.4vw, 36px); gap: 14px; }
  .ticks { flex-direction: column; gap: 8px; }
  .ticks li { font-size: 11px; }
  .photos { height: auto; margin-top: 20px; display: block; }
  .photo { aspect-ratio: 4 / 3; }
  /* two photos: a sideways strip with the next one peeking in */
  .photos-2 {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 16px; scroll-padding-inline: var(--gutter);
  }
  .photos-2::-webkit-scrollbar { display: none; }
  .photos-2 .photo { flex: 0 0 86%; scroll-snap-align: start; }

  /* About: the roots of the drawing above it */
  .about { padding-top: 56px; }
  .about-art {
    display: block; position: relative; height: 300px; overflow: hidden; margin: 0 calc(-1 * var(--gutter)) 18px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  }
  .about-art img { position: absolute; bottom: -2%; left: 50%; translate: -52% 0; width: max(170%, 560px); max-width: none; filter: saturate(.85) contrast(.98); }
  .about .lead { font-size: 16px; }

  .reviews-section { padding-top: 72px; }
  .reviews {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 26px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .reviews::-webkit-scrollbar { display: none; }
  .review {
    flex: 0 0 84%; scroll-snap-align: start; padding: 18px 18px 20px;
    border: 1px solid var(--rule); border-radius: 2px; background: color-mix(in srgb, var(--paper-light) 45%, transparent);
  }
  .review blockquote { font-size: 16px; }
  .more-link { margin-top: 20px; }

  .contact { margin: 72px 0 56px; }
  .contact .actions .pill { flex: 1 1 auto; }
  .contact-list div { grid-template-columns: 1fr; gap: 0; }

  .site-footer { flex-direction: column; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .call-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 96%, transparent); border-top: 1px solid var(--rule);
  }
  .call-bar .pill { flex: 1; padding: 13px; font-size: 13px; }
}
/* the 404 page */
.notfound { min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 48px var(--gutter); max-width: 760px; }
.notfound h1 { font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.03em; }

@media (max-width: 359px) {
  .nav a[href="#about"] { display: none; }
}