/* 365 Landscape — homepage (design 3a "Brand Match")
   Palette from the logo: white / charcoal / forest + leaf green. --forest and
   --forest-deep are sampled straight off the logo's "365" wordmark and its
   tagline rules. The leaf ramp was already on the logo's hue (88°) and is left
   alone — its lightness steps are what keep the green legible on the dark
   sections, and the logo's own leaf is too dark to serve that job. */

:root {
  --bg: #fdfdfb;
  --ink: #191c16;
  --ink-soft: #48513f;
  --ink-faint: #6a7261;
  --line: #e7e8e2;
  --forest: #36580e;
  --forest-deep: #1e3a0e;
  --leaf: #6fa832;
  --leaf-bright: #8fc04f;
  --leaf-pale: #aed46f;
  --badge-bg: #eef4e3;
  --badge-ink: #476a1f;
  --section-bg: #f1f3ea;
  --pill-bg: #eef0e8;
  --dark: #191c16;
  --dark-ink: #f3f4ee;
  --dark-soft: #bcc2b1;
  /* White text on --clay must clear WCAG AA (4.5:1) — the buttons are 13.5–14.5px,
     below the large-text exemption. #b8563a is 4.74:1; --clay-deep stays darker
     so the hover state is still distinguishable. */
  --clay: #b8563a;
  --clay-deep: #a94e2f;
  --star: #f5a623; /* gold review stars — legible on light cards and the dark trust strip */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Outfit', system-ui, sans-serif;
  --gutter: 52px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
}

h1, h2, h3 { margin: 0; }
p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }

/* Keyboard escape hatch past the header nav. Off-screen until focused rather
   than display:none, which would take it out of the tab order entirely. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 12px 0;
}

.skip-link:focus {
  left: 0;
  opacity: 1;
  outline: 3px solid var(--leaf-bright);
  outline-offset: 2px;
}

/* The skip link targets <main>, which isn't natively focusable — without this
   the browser moves focus but screen readers can stay put. */
main:focus { outline: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 26px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 99px;
  white-space: nowrap;
}

.btn-lg { padding: 16px 32px; font-size: 14.5px; }

.btn-primary { background: var(--forest); color: var(--bg); }

.btn-outline-light { border: 1px solid rgba(243, 244, 238, .4); color: var(--dark-ink); padding: 16px 30px; font-size: 14.5px; font-weight: 500; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 11px; }

/* Logo roundel — house, flagstone path and leaf inside a black ring. It carries
   its own light interior, so the one file works on the light header and on the
   homepage's transparent header over the hero. */
.brand-mark {
  display: block;
  width: 42px;
  height: 44px;
  flex: none;
}

/* Tracked to match the logo's wordmark, where "LANDSCAPE" is letter-spaced and
   "365" is not. */
.brand-name {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.brand-365 { color: var(--forest); font-weight: 800; letter-spacing: .01em; }

.brand-tagline {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--forest-deep);
}

.site-nav { display: flex; gap: 32px; font-size: 14px; color: var(--ink-soft); }

.header-actions { display: flex; align-items: center; gap: 18px; }

/* Outline "pill" so the number reads as a tappable control and balances the
   Free quote button (which stays the filled, primary CTA). */
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
}

/* Phone icon, drawn as a CSS mask in currentColor — the ✆ dingbat it
   replaces fell back to whatever glyph each platform's fonts had. */
.header-phone-icon,
.phone-glyph {
  display: inline-block;
  vertical-align: -0.15em;
}

.header-phone-icon::before,
.phone-glyph::before {
  content: "";
  display: block;
  width: 1.15em;
  height: 1.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.24 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.24 1.02l-2.2 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-phone-icon { color: var(--badge-ink); }

.service-card .card-photo { width: 100%; height: 130px; object-fit: cover; border-radius: 15px; margin-bottom: 18px; display: block; }

.gallery img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 18px; display: block; }

/* ---------- Services ---------- */

.services { background: var(--section-bg); padding: 76px var(--gutter); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 44px;
}

.section-head h2 { font-family: var(--serif); font-size: 42px; font-weight: 500; }

.link-all {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 2px solid var(--leaf);
  padding-bottom: 4px;
  white-space: nowrap;
}

.service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.service-card {
  display: block;
  background: var(--bg);
  border-radius: 22px;
  padding: 22px 20px 26px;
  box-shadow: 0 1px 3px rgba(25, 28, 22, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -14px rgba(25, 40, 15, .4);
}

.service-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; }

.service-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Process + testimonial ---------- */

.process {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 84px var(--gutter);
}

.process h2 {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  text-wrap: balance;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.process-steps li { display: flex; gap: 16px; }

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-weight: 700;
}

.process-steps h3 { font-size: 16px; font-weight: 600; }

.process-steps p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.testimonial {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--forest);
  border-radius: 28px;
  color: var(--dark-ink);
  padding: 46px;
}

.testimonial::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle at top right, rgba(111, 168, 50, .35), transparent 70%);
  pointer-events: none; /* decorative glow, same as .cta-banner::before — never eat clicks */
}

.eyebrow-light {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .7;
}

.testimonial blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
}

.testimonial figcaption { margin-top: 22px; font-size: 13.5px; opacity: .75; }

/* ---------- CTA banner ---------- */

.cta-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin: 0 var(--gutter) 68px;
  background: var(--dark);
  border-radius: 28px;
  color: var(--dark-ink);
  padding: 58px;
}

.cta-banner::before {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 38%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(193, 95, 60, .22), transparent 70%);
  /* Decorative glow must never intercept taps — when the banner stacks to a
     column on phones it sits over the buttons and would swallow their clicks. */
  pointer-events: none;
}

.cta-copy h2 { font-family: var(--serif); font-size: 36px; font-weight: 500; }

.cta-copy p { margin: 10px 0 0; font-size: 15px; opacity: .75; }

.cta-actions { display: flex; gap: 14px; flex: none; flex-wrap: wrap; }

/* ---------- Back to top (phones) ---------- */

/* Only earns its place below 700px, where the header is no longer sticky. Above
   that the nav is always on screen and this would be clutter. */
.to-top {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 45;
  /* 52 rather than 44 (Apple's bare minimum) because border-radius clips hit
     testing to the circle, so a 44px box only offered ~78% of that as a target
     and the corners missed. Explicit font-size because the icon is sized in em
     and a <button> otherwise inherits the UA's ~13px default, which would leave
     the arrow undersized in the larger circle. */
  width: 52px;
  height: 52px;
  font-size: 16px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  /* This button floats over every background the site has: cream page, pale
     section fill, near-black gallery band and CTA banner, forest testimonial.
     The fill has to be a colour that is not itself one of those, or it
     disappears into whichever section it happens to be over — forest vanished
     on the trust strip, then charcoal vanished on the CTA banner, both at
     1.00:1. Clay is the only colour in the palette that is never a background:
     4.65 on cream, 4.23 on pale, 3.63 on charcoal. Its one weak backdrop is the
     forest card (1.73), which the white ring covers at 8.21. The ring also
     stops it reading as another clay CTA pill — those have no ring. */
  background: var(--clay);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  /* Hidden until scrolled. visibility (not display) so the fade can run, and
     visibility ALONE gates hit-testing — no pointer-events here on purpose.
     A transitioned visibility stays `visible` for the whole fade-out, so the
     button keeps taking taps for exactly as long as it's painted. Adding
     pointer-events:none would flip instantly and leave a 200ms window where it
     looks tappable and isn't. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:focus-visible { outline: 3px solid var(--leaf-bright); outline-offset: 3px; }

/* The button had no pressed state at all, so a tap gave no feedback until the
   page started moving — which reads as "nothing happened" even when the tap did
   register. The shortened duration overrides the 200ms fade-in transition, so
   the press lands under the thumb instead of easing in after it. */
.to-top:active { background: var(--clay-deep); transform: scale(.94); transition-duration: .06s; }

.to-top-icon::before {
  content: "";
  display: block;
  width: 1.25em;
  height: 1.25em;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12l-8-8-8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.59 5.58L20 12l-8-8-8 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 699px) {
  .to-top { display: block; }
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}

/* ---------- Inner pages ---------- */

.site-nav a.active { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--leaf); padding-bottom: 3px; }

.page-hero { padding: 64px var(--gutter) 56px; border-bottom: 1px solid var(--line); }

.page-hero h1 {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1.1;
  font-weight: 500;
  text-wrap: balance;
}

.page-hero .lead {
  margin: 18px 0 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
}

/* Photographic hero band — the inner-page echo of the homepage slideshow hero:
   a single darkened photo with the heading bottom-anchored over it. Used with
   transparentHeader so the overlay header sits on the image (desktop). */
.page-hero--photo {
  position: relative;
  padding: 0;
  border-bottom: 0;
  min-height: clamp(360px, 52vh, 480px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.page-hero--photo .ph-bg { position: absolute; inset: 0; }
.page-hero--photo .ph-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,22,12,.74) 0%, rgba(15,22,12,.3) 46%, rgba(15,22,12,.16) 100%);
}
.page-hero--photo .ph-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
}
.page-hero--photo h1 {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}
/* Forest green is too dark to read on the photo — brighten the accent. */
.page-hero--photo h1 em { color: var(--leaf-bright); }
.page-hero--photo .lead {
  color: #e9efe0;
  max-width: 54ch;
}
/* Forest links in a lead are unreadable on the photo — brighten + underline. */
.page-hero--photo .lead a { color: var(--leaf-bright); text-decoration: underline; text-underline-offset: 2px; }

.page-section { padding: 64px var(--gutter); }
.page-section.alt { background: var(--section-bg); }

.page-section h2 { font-family: var(--serif); font-size: 34px; font-weight: 500; margin-bottom: 18px; }

/* Long-form text pages (about, warranty, blog) centre their reading column so
   the capped measure doesn't leave a lopsided blank on wide desktops. */
.prose { max-width: 760px; margin-inline: auto; }
.prose p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 16px; max-width: 72ch; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 6px; }
.prose h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 30px 0 12px; }
.prose a { color: var(--forest); font-weight: 600; }

/* Form-confirmation escape hatch: the "call us instead" line, lifted off the
   surrounding copy so it reads as an action rather than more prose. */
.prose .thanks-callout {
  background: var(--section-bg);
  border-left: 3px solid var(--leaf);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 24px 0;
}

/* Service bands: one photo + one bullet list per category. On desktop the photo
   sits beside the list and alternates sides down the page; on phones it stacks
   on top as a chapter divider. Photo is first in the DOM so the phone order is
   natural — desktop side-swapping is done with grid `order`. */

.svc-band { scroll-margin-top: 128px; }

.svc-band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.svc-band-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}

.svc-band--flip .svc-band-photo { order: 2; }

.svc-band h2 { margin-bottom: 6px; }

.svc-band .group-sub { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--badge-ink); font-weight: 600; margin-bottom: 16px; }

.svc-list { margin: 0; padding: 0; list-style: none; }

.svc-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.svc-list li:last-child { border-bottom: 0; }

.svc-list li::before { content: "✓"; position: absolute; left: 0; color: var(--leaf); font-weight: 700; }

.svc-more {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
}

.svc-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Gallery (portfolio) */

.gallery-section { scroll-margin-top: 128px; }
.gallery-section h2 { margin-bottom: 6px; }

/* Portfolio category jump-nav: sticky under the header on desktop so a long
   grid stays navigable; static on phones (the per-category carousels already
   keep the page short there). */
.work-catnav {
  position: sticky;
  top: 78px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 12px var(--gutter);
  background: rgba(253, 253, 251, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.work-catnav a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 15px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.work-catnav a:hover { background: var(--section-bg); color: var(--forest); }
@media (max-width: 640px) {
  .work-catnav { position: static; }
  .gallery-section { scroll-margin-top: 96px; }
}
.gallery-sub { font-size: 14px; color: var(--ink-faint); margin-bottom: 26px; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* FAQ accordion */

.faq-list { max-width: 820px; margin-inline: auto; }

.faq-list details { border-bottom: 1px solid var(--line); }

.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 20px 0;
  font-size: 16.5px;
  font-weight: 600;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--serif); font-size: 24px; color: var(--forest); flex: none; }
.faq-list details[open] summary::after { content: "–"; }

.faq-list .faq-body { padding: 0 0 22px; }
.faq-list .faq-body p, .faq-list .faq-body li { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.faq-list .faq-body p { margin: 0 0 10px; max-width: 68ch; }
.faq-list .faq-body ul { margin: 0 0 10px; padding-left: 22px; }

/* Contact */

.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }

.contact-form { display: flex; flex-direction: column; gap: 16px; }

.contact-form label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; }

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 13px 16px;
  font: 15px var(--sans);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid #d5d8cc;
  border-radius: 12px;
}

.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--leaf); outline-offset: 1px; border-color: var(--leaf); }

.contact-form .req { color: #b4321f; font-weight: 700; }

.contact-form .form-legend { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

.contact-form .field-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }

/* :user-invalid, not :invalid — it only fires after the visitor has actually
   interacted with the field, so an untouched empty form isn't painted red. */
.contact-form input:user-invalid, .contact-form textarea:user-invalid { border-color: #b4321f; }

.contact-form input:user-invalid + .field-hint { color: #b4321f; font-weight: 500; }

.contact-form button {
  align-self: flex-start;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
}

.contact-info {
  background: var(--section-bg);
  border-radius: 22px;
  padding: 34px 32px;
}

/* Matches the header brand lockup rather than the site's serif headings: same
   sans, uppercase and tracking, reusing .brand-365 so the numeral's forest green
   stays tied to the header's. Smaller than the serif it replaces because
   uppercase sans reads heavier at the same size. */
.contact-info h3 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.contact-info p { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 14px; }
.contact-info strong { color: var(--ink); }

.footer-links { display: flex; gap: 18px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  :root { --gutter: 32px; }

  .site-header { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 20px; }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero h1 { font-size: 42px; }

  .service-grid { grid-template-columns: repeat(2, 1fr); }

  .process { grid-template-columns: 1fr; gap: 44px; }

  .cta-banner { flex-direction: column; align-items: flex-start; padding: 44px 36px; }
}

/* Below the overlay-header breakpoint the header is the plain stacked one, and
   at 390px it measured 223px tall — 26% of the viewport, permanently, because it
   was also sticky. Unstick it here (complements the `min-width: 700px` overlay
   block below) and let .to-top carry the "get back to the nav" job instead. */
@media (max-width: 699px) {
  .site-header { position: static; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }

  /* Six nav links at 14px/20px gap need ~362px but only get ~350px at 390px
     wide, so "Contact" wrapped alone onto a second line. Tightening both fits
     one row down to ~330px; below that it still wraps, but space-between keeps
     the wrap looking deliberate rather than orphaned. */
  .site-nav { gap: 10px; font-size: 13px; justify-content: space-between; }

  /* The header stacks to three rows on a phone (brand / call+quote / nav), so
     the desktop 20px padding and row gap are paid three times over. */
  .site-header { padding-top: 14px; padding-bottom: 14px; gap: 12px; }

  /* Header call button on phones: a compact circular tap-to-call. Hide the
     phone-number text to keep it tight. On phones the header reflows — the nav
     takes its own full-width row and the call/quote buttons wrap below the
     brand — so the brand keeps enough width to show the tagline, on one line at
     typical phone widths and wrapping cleanly on very narrow screens. */
  .header-phone {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--badge-bg);
    color: var(--badge-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .header-phone-label { display: none; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .section-head h2 { font-size: 34px; }

  /* Two-up on phones so five services fit in three rows, not five. */
  .service-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .service-card { padding: 14px 14px 18px; }
  .service-card .card-photo { height: 104px; margin-bottom: 12px; }
  .service-card h3 { font-size: 18px; }
  .service-card p { font-size: 12px; }

  .process h2 { font-size: 32px; }

  .testimonial { padding: 32px 28px; }
  .testimonial blockquote { font-size: 22px; }

  .cta-copy h2 { font-size: 28px; }

  .site-footer { flex-direction: column; }

  /* On phones each category becomes a horizontal swipe strip (one photo at a
     time, snap) so the page is a few swipes instead of a 30-image scroll. */
  .gallery {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery img { flex: 0 0 86%; scroll-snap-align: center; }
  .page-hero h1 { font-size: 34px; }
  .page-hero--photo { min-height: clamp(240px, 40vh, 290px); }
  .page-hero--photo .ph-inner { padding-bottom: 30px; }

  /* Inner-page sections still carried desktop 64px padding on phones — trim it
     so multi-section pages (work, services) don't scroll through dead space,
     matching the homepage sections' tighter mobile rhythm. */
  .page-section { padding-top: 40px; padding-bottom: 40px; }

  /* Service bands collapse to a horizontal swipe strip (same pattern as the
     homepage recent-projects/reviews rows) so the three categories take one
     card's height instead of a long vertical scroll. Cards sit at ~85% width so
     the next one peeks, signalling there's more to swipe. */
  .svc-bands {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 40px var(--gutter);
    background: var(--section-bg);
    scrollbar-width: none;
  }
  .svc-bands::-webkit-scrollbar { display: none; }

  .svc-band {
    flex: 0 0 85%;
    scroll-snap-align: start;
    scroll-margin-top: 96px;
    padding: 0;
    background: var(--bg);
    border-radius: 22px;
    box-shadow: 0 1px 3px rgba(25, 28, 22, .06);
    overflow: hidden;
  }
  /* Swipe cards read as one uniform set — the desktop alt shading would make
     the middle card the odd one out here. */
  .svc-band.alt { background: var(--bg); }

  /* Photo sits flush at the card top (the card's radius + overflow clip it);
     the body gets its own inset. The desktop side-swap is a no-op under a block
     layout, but keep the reset explicit. */
  .svc-band-inner { display: block; }
  .svc-band--flip .svc-band-photo { order: 0; }
  .svc-band-photo img { aspect-ratio: auto; height: 180px; border-radius: 0; }
  .svc-band-body { padding: 20px 22px 26px; }
}

/* ============================================================
   Homepage — cinematic hero slideshow, trust strip, project
   gallery grid, and Google reviews. These are homepage-only and
   namespaced so inner pages are untouched.
   ============================================================ */

.btn-clay { background: var(--clay); color: #fff; }
.btn-clay:hover { background: var(--clay-deep); opacity: 1; }

/* In a CTA banner the clay button pairs with the outline phone button and must
   match its box (same padding/size) so the two pills sit at equal height. */
.cta-actions .btn-clay { padding: 16px 30px; font-size: 14.5px; font-weight: 700; }

/* Header "Free quote" uses the clay accent on every page — the homepage set it
   this way; inner pages were falling back to forest, which read inconsistent. */
.site-header .btn-primary { background: var(--clay); color: #fff; }

/* ---------- Hero slideshow ---------- */

.home-hero {
  position: relative;
  height: clamp(560px, 90vh, 780px);
  overflow: hidden;
  color: #fff;
}

.hh-slides { position: absolute; inset: 0; }

.hh-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hh-slide.is-on { opacity: 1; }
.hh-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15,22,12,.8) 0%, rgba(15,22,12,.46) 46%, rgba(15,22,12,.12) 100%);
}

.hh-inner {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hh-copy { max-width: 640px; }

.home-hero h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1.05;
  font-weight: 500;
  margin: 14px 0 18px;
  text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
}

.hh-lead { font-size: 18px; line-height: 1.6; color: #e9efe0; max-width: 44ch; }

.hh-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }

/* The hero "See our work" ghost button sits over a busy photo, where a thin
   outline alone reads faint. Give it a subtle glass backing and a stronger
   border so it stays legible while remaining quieter than the clay primary. */
.hh-ctas .btn-outline-light {
  background: rgba(20, 22, 17, .32);
  border-color: rgba(243, 244, 238, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hh-ctas .btn-outline-light:hover { background: rgba(20, 22, 17, .48); }

.hh-nav { position: absolute; left: var(--gutter); bottom: 24px; z-index: 4; display: flex; align-items: center; gap: 14px; }
.hh-dot { width: 34px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.4); border: 0; padding: 0; cursor: pointer; transition: background .2s; }
.hh-dot[aria-current="true"] { background: var(--leaf-bright); }
.hh-pause {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.28);
  color: #fff; font-size: 11px; display: grid; place-items: center; cursor: pointer;
}
.hh-dot:focus-visible, .hh-pause:focus-visible { outline: 3px solid var(--leaf-bright); outline-offset: 3px; }

/* ---------- Trust strip ---------- */

.trust-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px 38px;
  padding: 20px var(--gutter);
  background: var(--forest);
  color: #eaf1df;
  font-size: 14px;
  font-weight: 500;
}
.trust-strip b { color: #fff; font-weight: 700; }
/* Partial-fill stars: fill gold up to --rating/5 of the width, muted beyond, so
   a fractional average reads as partial stars rather than a solid 5. Empty
   color is a translucent light here, for the dark trust strip. */
.trust-strip .ts-star {
  letter-spacing: 1px;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--star) calc(var(--rating) / 5 * 100%), rgba(255, 255, 255, .32) calc(var(--rating) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-strip .ts-sep { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); }
.trust-strip .ts-reviews { color: inherit; text-decoration: none; }
.trust-strip .ts-reviews:hover { text-decoration: underline; text-underline-offset: 3px; opacity: 1; }
.trust-strip .ts-reviews:focus-visible { outline: 2px solid var(--leaf-bright); outline-offset: 3px; border-radius: 4px; }

/* ---------- Project gallery grid (dark) ---------- */

.home-gallery { background: var(--dark); color: var(--dark-ink); padding: 76px var(--gutter); }
.home-gallery .section-head h2 { color: #fff; }
.home-gallery .link-all { color: var(--leaf-bright); border-bottom-color: var(--leaf-bright); }

.hg-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; }
.hg-grid a { position: relative; border-radius: 16px; overflow: hidden; display: block; }
.hg-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.hg-grid a:hover img { transform: scale(1.05); }
.hg-grid a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent 55%); }
.hg-grid .wide { grid-column: span 2; }
.hg-lbl { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-size: 13px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* ---------- Google reviews ---------- */

.reviews { background: var(--section-bg); padding: 76px var(--gutter); scroll-margin-top: 96px; }
.reviews-rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -26px 0 30px; font-size: 15px; color: var(--ink-soft); }
.reviews-rating .gword { font-weight: 600; letter-spacing: -.02em; font-size: 19px; }
/* Same partial fill on the light reviews header — empty color is a muted dark. */
.reviews-rating .rr-stars {
  letter-spacing: 2px;
  white-space: nowrap;
  background: linear-gradient(90deg, var(--star) calc(var(--rating) / 5 * 100%), rgba(20, 22, 17, .2) calc(var(--rating) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reviews-rating b { font-size: 20px; color: var(--ink); }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(25, 28, 22, .06);
}
.rc-stars { color: var(--star); letter-spacing: 2px; font-size: 15px; }
.rc-text { margin: 0; flex: 1; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }
.rc-who { display: flex; align-items: center; gap: 12px; }
.rc-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 16px; }
.rc-name { font-size: 14px; font-weight: 700; }
.rc-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

/* ---------- Overlay header (homepage only, desktop) ---------- */

@media (min-width: 700px) {
  .site-header--overlay {
    position: fixed;
    left: 0; right: 0; top: 0;
    background: transparent;
    border-bottom: 0;
    background-image: linear-gradient(to bottom, rgba(15,22,12,.55), rgba(15,22,12,0));
    transition: background-color .25s ease, box-shadow .25s ease;
  }
  .site-header--overlay .brand-name { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
  .site-header--overlay .brand-365 { color: var(--leaf-bright); }
  .site-header--overlay .brand-tagline { color: rgba(255,255,255,.82); }
  .site-header--overlay .site-nav { color: rgba(255,255,255,.92); }
  .site-header--overlay .site-nav a { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
  /* The active link's default dark ink is invisible on the hero photo — go
     white with the brighter leaf underline while the header is transparent.
     The solid state keeps the default (var(--ink) / var(--leaf)). */
  .site-header--overlay:not(.is-solid) .site-nav a.active { color: #fff; border-bottom-color: var(--leaf-bright); }
  /* Same glass backing as the hero ghost button — the outline alone reads faint
     over the hero photo. Reset to transparent once the header solidifies. */
  .site-header--overlay .header-phone {
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,.5);
    border-color: rgba(255,255,255,.55);
    background: rgba(20, 22, 17, .32);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .site-header--overlay .header-phone:hover { background: rgba(20, 22, 17, .48); }
  .site-header--overlay .header-phone-icon { color: var(--leaf-bright); }

  /* Solidifies once the hero is scrolled past */
  .site-header--overlay.is-solid {
    position: fixed;
    background: var(--bg);
    background-image: none;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 24px -18px rgba(25, 40, 15, .6);
  }
  .site-header--overlay.is-solid .brand-name { color: var(--ink); text-shadow: none; }
  .site-header--overlay.is-solid .brand-365 { color: var(--forest); }
  .site-header--overlay.is-solid .brand-tagline { color: var(--forest-deep); }
  .site-header--overlay.is-solid .site-nav { color: var(--ink-soft); }
  .site-header--overlay.is-solid .site-nav a { text-shadow: none; }
  .site-header--overlay.is-solid .header-phone { color: var(--ink); text-shadow: none; border-color: var(--line); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header--overlay.is-solid .header-phone-icon { color: var(--badge-ink); }
}

/* ---------- Homepage responsive ---------- */

@media (max-width: 1080px) {
  .hg-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-hero { height: auto; min-height: 56vh; }
  .hh-inner { padding-top: 28px; padding-bottom: 30px; }
  .hh-lead { font-size: 16px; }
  /* Flow the slideshow controls below the CTAs (they overlapped when absolute). */
  .hh-nav { position: static; margin-top: 22px; }
  /* Recent projects + reviews become horizontal swipe strips on phones, so
     six photos / three cards take one card height instead of a tall stack.
     The section's "Full portfolio" / "All 17 on Google" links are the see-all.
     Cards sit at ~80% width so the next one peeks, signalling swipeability. */
  .hg-grid, .reviews-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-padding-left: 0;
  }
  .hg-grid { grid-auto-rows: auto; }
  .hg-grid a {
    flex: 0 0 80%;
    height: 220px;
    scroll-snap-align: start;
  }
  .hg-grid .wide { grid-column: auto; }
  .review-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  /* Trim desktop-sized section padding so phones don't scroll through dead space. */
  .services, .home-gallery, .reviews, .process { padding-top: 46px; padding-bottom: 46px; }

  /* Stack the trust strip cleanly instead of wrapping with orphaned dots. */
  .trust-strip { flex-direction: column; gap: 9px; text-align: center; }
  .trust-strip .ts-sep { display: none; }
}

/* Portrait viewports (tall phones, and tablets held upright) get the hero capped.
   The cinematic full-bleed height is sized for landscape screens: on a 768x1024
   tablet the base rule produced a 780px hero, 76% of the screen, and on a tall
   phone `min-height: 56vh` grew without limit.
   It also fixes the photos looking stretched — they aren't distorted, but a tall
   box against these 4:3 sources meant object-fit: cover threw away 33% of each
   photo's width and zoomed the rest, so the hero read as a slab of pavement
   instead of a project. A shorter hero is a wider box, which crops far less.
   460px clears the 372px the hero's own copy needs, with room to spare. */
@media (orientation: portrait) {
  .home-hero { height: auto; min-height: min(56vh, 460px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hh-slide { transition: none; }
  .hg-grid img { transition: none; }
}

/* ---------- Blog ---------------------------------------------------------- */
/* Post hero: the photo variant reuses .page-hero--photo; a post with no lead
   image falls back to a plain band. */
.blog-hero--text { background: var(--section-bg); }
.blog-hero--text h1 { max-width: 20ch; }

.blog-kicker {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.blog-kicker a { color: inherit; font-weight: 600; text-decoration: none; }
.blog-kicker a:hover { text-decoration: underline; }
/* Over a photo hero, lift the kicker off the dark image. */
.page-hero--photo .blog-kicker { color: var(--dark-soft); }
.page-hero--photo .blog-kicker a { color: #fff; }

/* Article body: reuses .prose (which caps the measure and centres it); this just
   gives the ## headings breathing room. */
.blog-body h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  margin: 38px 0 12px;
}
.blog-body h2:first-child { margin-top: 0; }
.blog-body > p:first-child { font-size: 17px; color: var(--ink); }

/* Index grid */
.blog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}
.blog-card { list-style: none; }
.blog-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(25, 28, 22, 0.1);
}
.blog-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-media--empty {
  background: linear-gradient(135deg, var(--forest), var(--leaf));
}
.blog-card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.blog-card-title { font-family: var(--serif); font-size: 23px; font-weight: 600; line-height: 1.2; margin: 0; }
.blog-card-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* Post footer navigation: previous / next post + back to the index. Prev on the
   left, next on the right, "All posts" centred below; stacks on phones. */
.post-nav-section { padding: 0 var(--gutter) 64px; }
.post-nav {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.post-nav-link:hover { border-color: var(--leaf); background: var(--section-bg); }
.post-nav-next { text-align: right; align-items: flex-end; }
.post-nav-dir {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}
.post-nav-prev .post-nav-dir::before { content: "← "; }
.post-nav-next .post-nav-dir::after { content: " →"; }
.post-nav-title { font-family: var(--serif); font-size: 18px; line-height: 1.25; color: var(--ink); }
/* Invisible spacer that keeps the two columns aligned when a post has no
   previous or next (first/last post). */
.post-nav-empty { visibility: hidden; }
.post-nav-all {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 8px;
  padding: 9px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
}
.post-nav-all:hover { background: var(--section-bg); }

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 22px; }
  .blog-body h2 { font-size: 25px; }
  .post-nav { grid-template-columns: 1fr; gap: 12px; }
  .post-nav-next { text-align: left; align-items: flex-start; }
  .post-nav-empty { display: none; }
}