/* Coastal Tree Service: pine, bark and logo-paper cream. Ultra (the logo's wedge serif) + Source Sans 3. */
:root {
  --pine: #2d4a2b;
  --pine-d: #213820;
  --pine-l: #3a5c37;
  --bark: #2a221b;
  --bark-2: #4a3f35;
  --paper: #f4ede1;
  --paper-2: #ebe1cf;
  --white: #fffdf8;
  --wood: #c98a4b;
  --wood-l: #e2ad74;
  --cream: #f4ede1;
  --display: "Ultra", Georgia, serif;
  --text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1240px;
  --m-dur: .9s;
  --m-ease: cubic-bezier(.2, .9, .25, 1);
  --m-rise: 26px;
}
@media (max-width: 720px) { :root { --m-dur: .7s; --m-rise: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 1.0625rem/1.6 var(--text); color: var(--bark); background: var(--paper); overflow-x: clip; }
@media (min-width: 960px) { body { font-size: 1.125rem; } }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(var(--wrap), 100% - 64px); } }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; background: var(--bark); color: var(--cream); font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--wood); outline-offset: 3px; }

.preview { padding: 8px 16px; background: var(--bark); color: var(--cream); font-size: .875rem; text-align: center; line-height: 1.4; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px; border: 2px solid transparent; font: 700 1.0625rem/1.2 var(--text); letter-spacing: .01em; text-decoration: none; cursor: pointer; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-pine { background: var(--pine); color: var(--cream); border-color: var(--pine); }
.btn-pine:hover { background: var(--pine-d); border-color: var(--pine-d); }
.btn-cream { background: var(--cream); color: var(--pine-d); border-color: var(--cream); --m-fill: rgba(42, 34, 27, .1); }
.btn-cream:hover { background: var(--white); }
.btn-sm { min-height: 44px; padding: 10px 16px; font-size: 1rem; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: inherit; }
@media (hover: hover) {
  .m-link:hover { background-size: 100% 1.5px; }
  .m-btn:hover::before { translate: 0 0; }
  a:hover .m-nudge { translate: 5px 0; }
  .m-zoom:hover img { scale: 1.04; }
}
.m-nudge { display: inline-block; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid rgba(42, 34, 27, .12); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.brand { display: block; flex: none; }
.brand img { width: 108px; height: auto; mix-blend-mode: multiply; }
.nav { display: none; gap: 28px; font-weight: 600; }
.nav a { text-decoration: none; padding: 10px 0; }
.top-call span { display: none; }
.top-call { padding-inline: 14px; }
@media (min-width: 560px) { .top-call span { display: inline; } }
@media (min-width: 960px) {
  .top-in { min-height: 80px; }
  .brand img { width: 136px; }
  .nav { display: flex; margin-left: auto; }
}

/* Hero: three photos as trunks of different heights, the name across their feet */
.hero { position: relative; padding: 12px 0 48px; background: var(--paper); }
.trunks { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; align-items: end; height: min(48svh, 440px); width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.t { height: 100%; background: var(--paper-2); }
.t1 { height: 80%; }
.t3 { height: 66%; }
.t-in { height: 100%; }
.t img { width: 100%; height: 100%; object-fit: cover; }
.t1 img { object-position: 50% 20%; }
.t2 img { object-position: 55% 40%; }
.t3 img { object-position: 45% 55%; }
.hero-text { position: relative; z-index: 2; width: min(var(--wrap), 100% - 32px); margin: -44px auto 0; }
.hero h1 { display: block; line-height: 1; }
.h-coastal { display: inline-block; padding: 10px 16px 4px 0; background: var(--paper); font: 400 clamp(3.4rem, 15.5vw, 7.75rem)/1 var(--display); letter-spacing: -.01em; color: var(--bark); }
.h-sub { display: block; margin-top: 8px; font: 700 clamp(1.05rem, 4.6vw, 1.9rem)/1.1 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--pine); }
.hero-line { margin-top: 16px; max-width: 30ch; font-size: 1.125rem; line-height: 1.45; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 22px; }
.hero-hours { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .9375rem; font-weight: 600; color: var(--bark-2); }
.hero-hours svg { width: 18px; height: 18px; color: var(--pine); }
@media (max-width: 559px) { .cta .text-link { display: none; } }
@media (min-width: 960px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(var(--wrap), 100% - 64px); margin-inline: auto; gap: 0 48px; padding: 0; min-height: clamp(640px, calc(100svh - 120px), 860px); }
  .trunks { grid-column: 2; grid-row: 1; width: auto; height: auto; margin: 0; gap: 14px; padding-top: 32px; }
  .t1 { height: 84%; }
  .t3 { height: 64%; }
  .hero-text { grid-column: 1 / 3; grid-row: 1; align-self: end; width: auto; margin: 0; padding-bottom: 72px; }
  .h-coastal { padding: 18px 28px 6px 0; }
  .hero-line { font-size: 1.25rem; max-width: 26ch; }
  .cta { margin-top: 28px; }
}

/* Sections */
.sec { padding-block: 80px; }
@media (min-width: 960px) { .sec { padding-block: 136px; } }
h2 { font: 400 clamp(2.3rem, 5vw, 3.6rem)/1.05 var(--display); letter-spacing: -.005em; }
.label-h { font: 700 1rem/1.2 var(--text); letter-spacing: .28em; text-transform: uppercase; }
.kicker { font-weight: 700; font-size: .875rem; letter-spacing: .24em; text-transform: uppercase; color: var(--pine); }

/* Services: the tree */
.tree-sec { background: var(--pine); color: var(--cream); }
.tree-in { display: grid; gap: 32px; }
.tree-intro { margin-top: 14px; max-width: 34ch; color: rgba(244, 237, 225, .86); }
.tree-fig { position: relative; width: 100%; max-width: 460px; margin-inline: auto; }
.tree-svg { display: block; width: 100%; height: auto; overflow: visible; }
.tree-svg .ln { fill: none; stroke: var(--cream); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tree-svg .thin { stroke-width: 1.25; opacity: .7; }
.tree-svg .dash { stroke-dasharray: .03 .03; }
.tree-svg .fillable { fill: var(--pine); }
.tree-svg .ctx .ln { stroke-width: 1.5; opacity: .5; }
.tree-svg .ctx path:nth-child(2) { fill: var(--pine); }
.part { cursor: pointer; transition: opacity .5s ease; transform-box: view-box; }
.part .ln { transition: stroke .4s ease, fill .5s ease; }
.part[data-part="1"] { transform-origin: 214px 300px; }
.part[data-part="2"] { transform-origin: 228px 350px; }
.part[data-part="3"] { transform-origin: 212px 560px; }
.part[data-part="4"] { transform-origin: 300px 560px; }
.tree-live .part:not(.is-on) { opacity: .5; }
.tree-live .part.is-on .ln { stroke: var(--wood-l); }
.tree-live .part.is-on .fillable { fill: #4a5f36; }
.tree-live .part[data-part="1"].is-on .fillable { fill: #44613a; }
.part.sway { animation: sway 1.3s cubic-bezier(.3, .7, .3, 1); }
.part[data-part="4"].sway { animation: settle 1s cubic-bezier(.3, .7, .3, 1); }
@keyframes sway { 0% { rotate: 0deg; } 25% { rotate: -1.6deg; } 55% { rotate: 1deg; } 80% { rotate: -.4deg; } 100% { rotate: 0deg; } }
@keyframes settle { 0% { translate: 0 0; } 30% { translate: 0 -5px; } 60% { translate: 0 1px; } 100% { translate: 0 0; } }
/* The drawing draws itself in once, line by line, when it comes into view. */
.tree-live .tree-svg .ln { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--m-ease) var(--td, 0ms), stroke .4s ease, fill .5s ease; }
.tree-live .tree-svg .dash { stroke-dasharray: .03 .03; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s ease 1.6s; }
.tree-live .tree-svg .fillable { fill-opacity: 0; transition: stroke-dashoffset 1.4s var(--m-ease) var(--td, 0ms), fill-opacity .8s ease calc(var(--td, 0ms) + 700ms), stroke .4s ease, fill .5s ease; }
.tree-live .tree-svg.is-drawn .ln { stroke-dashoffset: 0; }
.tree-live .tree-svg.is-drawn .fillable { fill-opacity: 1; }
.tree-live .tree-svg.is-drawn .dash { opacity: .7; }
.ctx { --td: 0ms; }
.part[data-part="4"] { --td: 150ms; }
.part[data-part="3"] { --td: 350ms; }
.part[data-part="2"] { --td: 800ms; }
.part[data-part="1"] { --td: 650ms; }
@media (prefers-reduced-motion: reduce) {
  .part.sway { animation: none; }
  .tree-live .tree-svg .ln, .tree-live .tree-svg .fillable { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke .2s, fill .2s; }
  .tree-live .tree-svg .dash { opacity: .7; }
}
.hs { position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--cream); border-radius: 50%; background: var(--pine-d); color: var(--cream); font: 700 1.0625rem/1 var(--text); cursor: pointer; transition: background-color .3s ease, color .3s ease, scale .3s var(--m-ease); -webkit-tap-highlight-color: transparent; }
.hs::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(244, 237, 225, .45); }
.hs[aria-pressed="true"] { background: var(--wood-l); border-color: var(--wood-l); color: var(--bark); scale: 1.08; }
@media (hover: hover) { .hs:hover { background: var(--wood-l); color: var(--bark); border-color: var(--wood-l); } }
.hs1 { left: 18%; top: 17%; }
.hs2 { left: 66%; top: 46%; }
.hs3 { left: 35.5%; top: 72%; }
.hs4 { left: 9%; top: 81%; }
.tree-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tree-list button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid rgba(244, 237, 225, .35); background: transparent; color: var(--cream); font: 600 1rem/1.2 var(--text); text-align: left; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease, padding .5s var(--m-ease); -webkit-tap-highlight-color: transparent; }
.tree-list .n { font: 400 .9375rem/1 var(--display); color: var(--wood-l); }
.tree-list button[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--pine-d); }
.tree-list button[aria-pressed="true"] .n { color: #8a5a2b; }
@media (hover: hover) { .tree-list button:hover { border-color: var(--cream); } }
.tree-panels { margin-top: 24px; min-height: 13.5rem; }
.tp + .tp { margin-top: 32px; }
.tree-live .tp + .tp { margin-top: 0; }
.tree-live .tp:not(.is-on) { display: none; }
.tp.is-on { animation: tp-in .6s var(--m-ease); }
@keyframes tp-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tp.is-on { animation: none; } }
.tp h3 { font: 400 clamp(1.75rem, 3.4vw, 2.4rem)/1.1 var(--display); }
.tp h3 .n { color: var(--wood-l); margin-right: .2em; }
.tp > p { margin-top: 12px; max-width: 46ch; color: rgba(244, 237, 225, .92); }
.tp blockquote { margin: 20px 0 0; padding-left: 18px; border-left: 3px solid var(--wood-l); }
.tp blockquote p { font-size: 1.0625rem; font-style: italic; }
.tp cite { display: block; margin-top: 6px; font-style: normal; font-size: .9375rem; font-weight: 600; color: rgba(244, 237, 225, .8); }
.tree-call { margin-top: 32px; }
@media (min-width: 960px) {
  .tree-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 72px; align-items: start; }
  .tree-head { grid-column: 2; grid-row: 1; }
  .tree-fig { grid-column: 1; grid-row: 1 / 3; max-width: 560px; margin: 0; }
  .tree-side { grid-column: 2; grid-row: 2; margin-top: 36px; }
  .tree-list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(244, 237, 225, .35); }
  .tree-list button { border-width: 0 0 1px; min-height: 64px; font-size: 1.25rem; padding: 14px 4px; }
  .tree-list button[aria-pressed="true"] { padding-left: 18px; }
  .tree-panels { margin-top: 32px; }
}

/* Near the house: big photo, a smaller one over a pine block, text in a narrow column */
.near { background: var(--white); }
.near-in { display: grid; gap: 48px; }
.near-photos { position: relative; padding-bottom: 72px; }
.near-big { width: 86%; aspect-ratio: 4 / 5; }
.near-big img { object-position: 50% 30%; }
.near-block { position: absolute; right: 0; bottom: 0; width: 46%; height: 52%; background: var(--pine); }
.near-small { position: absolute; right: 7%; bottom: 28px; width: 44%; aspect-ratio: 3 / 4; z-index: 1; }
.near-small img { object-position: 30% 30%; }
.near-text h2 { margin-top: 12px; }
.near-text p + p { margin-top: 16px; }
.near-text h2 + p { margin-top: 20px; }
.near-text p:not(.kicker) { max-width: 42ch; }
@media (min-width: 960px) {
  .near-in { grid-template-columns: 7fr 5fr; gap: 80px; align-items: center; }
  .near-photos { padding-bottom: 96px; }
  .near-big { width: 78%; }
  .near-block { width: 44%; height: 56%; }
  .near-small { right: 6%; bottom: 40px; width: 40%; }
}

/* Reviews: one big statement, two quotes under a rule */
.reviews { background: var(--paper); }
.reviews .label-h { color: var(--pine); }
.quote-lead { margin: 28px 0 0; }
.quote-lead blockquote { margin: 0; }
.quote-lead p { max-width: 20ch; font: 400 clamp(2rem, 5.4vw, 4.4rem)/1.1 var(--display); letter-spacing: -.01em; }
.quote-lead figcaption { margin-top: 20px; font-weight: 700; color: var(--bark-2); }
.quotes { display: grid; gap: 32px; margin-top: 56px; }
.quote { margin: 0; padding-top: 22px; border-top: 3px solid var(--pine); }
.quote blockquote { margin: 0; }
.quote p { max-width: 60ch; }
.quote figcaption { margin-top: 14px; font-weight: 700; color: var(--pine); }
.reviews-more { margin-top: 40px; color: var(--pine); }
@media (min-width: 860px) { .quotes { grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 80px; } }

/* Call band: the number set between the logo's rules */
.call { background: var(--pine-d); color: var(--cream); text-align: center; }
.call-in { display: flex; flex-direction: column; align-items: center; }
.call .label-h { color: rgba(244, 237, 225, .86); }
.sprig { width: min(320px, 70%); height: 28px; margin-top: 28px; color: var(--wood-l); }
.big-phone { margin-top: 14px; font: 400 clamp(2rem, 9.4vw, 7rem)/1.05 var(--display); letter-spacing: -.01em; }
.big-phone a { text-decoration: none; }
.big-phone a:hover { color: var(--white); }
.sprig + .call-hours { margin-top: 24px; }
.call-hours { font-weight: 700; font-size: 1.25rem; }
.week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; width: 100%; max-width: 640px; margin: 24px 0 0; padding: 0; }
.week li { display: grid; gap: 2px; padding: 10px 0; border: 1px solid rgba(244, 237, 225, .3); font-size: .875rem; }
.week b { font-weight: 700; }
.week span { color: rgba(244, 237, 225, .8); font-size: .8125rem; }
.week li.today { background: var(--wood-l); border-color: var(--wood-l); color: var(--bark); }
.week li.today span { color: var(--bark); }
.call-area { margin-top: 24px; max-width: 40ch; color: rgba(244, 237, 225, .9); }
.call-in > p:last-child { margin-top: 32px; }

/* Footer */
.foot { background: var(--bark); color: var(--cream); padding: 64px 0 112px; }
.foot-in { display: grid; gap: 36px; }
.foot-lock { display: grid; }
.foot-lock span:first-child { font: 400 2.6rem/1 var(--display); }
.foot-lock span:last-child { margin-top: 6px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--wood-l); }
.foot-legal { margin-top: 12px; font-size: .9375rem; color: rgba(244, 237, 225, .75); }
.foot-h { font: 700 .875rem/1.2 var(--text); letter-spacing: .2em; text-transform: uppercase; color: var(--wood-l); margin-bottom: 12px; }
.foot-col p + p { margin-top: 6px; }
.foot a { text-decoration: none; }
.fine { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 24px; border-top: 1px solid rgba(244, 237, 225, .18); font-size: .9375rem; color: rgba(244, 237, 225, .8); }
.fine a { display: inline-flex; align-items: center; min-height: 44px; }
.fine > span { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 860px) {
  .foot { padding: 88px 0 48px; }
  .foot-in { grid-template-columns: 2fr 1fr 1fr; }
  .fine { grid-column: 1 / -1; }
}

/* Phone action bar */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; background: var(--bark); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(0, 0, 0, .18); }
.actionbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; color: var(--cream); font-weight: 700; text-decoration: none; }
.actionbar a.main { background: var(--pine); }
.actionbar svg { width: 18px; height: 18px; }
@media (min-width: 960px) { .actionbar { display: none; } }

/* 404 */
.lost { min-height: 60svh; }
.lost h1 { margin-top: 12px; font: 400 clamp(2.6rem, 8vw, 5rem)/1.05 var(--display); }
.lost-text { margin-top: 18px; max-width: 40ch; }
.nw { white-space: nowrap; }
/* Parallax layers stay inside the hero. */
.hero { overflow: clip; }
@media (min-width: 960px) { .hero { padding-bottom: 48px; } }