/* ==========================================================================
   Verdance — stylesheet
   --------------------------------------------------------------------------
   Order of this file:
     1. Design tokens
     2. Reset and base elements
     3. Layout utilities
     4. Motion (scroll reveals, curtain, staircase, hero card)
     5. Components (button, brand, nav, cards, carousel, accordions, socials)
     6. Header
     7. Page sections, top to bottom
     8. Responsive
     9. Reduced motion

   Naming follows BEM: .block, .block__element, .block--variant.
   Change a colour or a size once in section 1 and the whole page follows.

   Two rules worth knowing before editing:
   - Every animated "hidden" state is written under `html.js`. If the scripts
     never run, nothing is hidden. See section 4.
   - Sizes live in tokens, redefined at each breakpoint in section 8. A heading
     therefore never carries its own media query.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* --- Brand colours. These seven lines are the whole palette. ---
     Olive replaces the lime of the source template; terracotta is kept for
     small warm accents (the review stars). */
  --color-accent: #9cb544; /* buttons, highlighted words, icons */
  --color-accent-strong: #8aa338; /* the same olive, one step darker (hover) */
  --color-accent-light: #c5da72; /* the same olive, lit up for text over photos
                                    and over the deep green — 7.8:1 against
                                    --color-deep, where the plain olive sits
                                    at 5.2:1 */
  --color-deep: #2c3a2a; /* dark panels, footer, call to action */
  --color-cream: #f2eee3; /* page background */
  --color-cream-2: #ebe7d6; /* sections that need to step forward */
  --color-surface: #ffffff; /* cards laid on the cream */
  --color-terracotta: #c96f4a; /* rating stars */

  /* Text. Never hard-code a grey: derive it from the ink. */
  --color-ink: #1f1f1f;
  --color-ink-soft: #5c5c5c;
  --ink-10: color-mix(in srgb, var(--color-ink) 10%, transparent);
  --on-dark: #ffffff;
  --on-dark-soft: color-mix(in srgb, #ffffff 80%, transparent);
  --on-dark-line: color-mix(in srgb, #ffffff 20%, transparent);

  /* --- Typography --- */
  --font-body: "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-display: "Playfair Display", Georgia, serif; /* italic accent words */

  --weight-normal: 400;
  --weight-medium: 500;

  /* Type scale, measured on the reference. Redefined in section 8. */
  --h1-size: 62px;
  --h1-height: 74.4px;
  --h1-letter: -2px;
  --h2-size: 48px;
  --h2-height: 60px;
  --h2-letter: -2px;
  --h3-size: 32px;
  --h3-height: 44.8px;
  --h3-letter: -1px;
  --h4-size: 24px;
  --h4-height: 33.6px;
  --h4-letter: -0.5px;
  --text-large: 20px;
  --text-medium: 18px;
  --text-base: 16px;
  --text-small: 14px;
  --line-body: 1.7;
  --line-tight: 1.6;

  /* --- Spacing. Same ladder as the reference. --- */
  --gap-01: 4px;
  --gap-02: 8px;
  --gap-03: 12px;
  --gap-04: 16px;
  --gap-05: 20px;
  --gap-06: 24px;
  --gap-07: 32px;
  --gap-08: 40px;
  --gap-09: 50px;
  --gap-10: 60px;
  --gap-11: 70px;
  --gap-12: 80px;
  --gap-13: 90px;
  --gap-14: 100px;

  --section-padding: 100px; /* vertical rhythm of a section */
  --section-padding-large: 120px;
  --shell-padding: 30px; /* left and right gutter */
  --shell-width: 1204px; /* content column */

  /* --- Shapes --- */
  --radius-01: 4px;
  --radius-02: 8px;
  --radius-03: 10px;
  --radius-04: 16px;
  --radius-05: 12px;
  --radius-06: 24px;

  /* --- Motion. One duration and one curve per intent. ---
     `--ease-reveal` is the CSS equivalent of the easing the original design
     tool calls "outQuart": the curve used by all scroll reveals. */
  --ease-reveal: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-hover: cubic-bezier(0.215, 0.61, 0.355, 1);
  --reveal-duration: 1000ms; /* 100px travelled in 1s = 100px/s */
  --hover-duration: 300ms;
  --hover-duration-slow: 500ms;
}

/* ==========================================================================
   2. Reset and base elements
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The header floats over the hero; anchors stop just under it. */
  scroll-padding-top: 110px;
  /* Blocks that reveal from the side start 100px off their final position.
     On a phone that is wider than the screen, so the page would offer a
     horizontal scroll for as long as the animation lasts.
     `clip` rather than `hidden`: hidden would turn the root into a scroll
     container and break `position: sticky` further down the page. */
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--line-body);
  -webkit-font-smoothing: antialiased;
  /* Fallback for browsers without `overflow: clip` (before Safari 16). */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

summary {
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 3px;
  border-radius: var(--radius-01);
}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */

/* The content column. Every section wraps its content in one. */
.shell {
  width: 100%;
  max-width: var(--shell-width);
  margin-inline: auto;
}

/* Section headings. The italic words are a <span> inside the heading, so the
   two typefaces share one line box and stay aligned. */
.section-title {
  font-size: var(--h2-size);
  line-height: var(--h2-height);
  letter-spacing: var(--h2-letter);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
}

.section-title--center {
  text-align: center;
}

.section-title--light {
  color: var(--on-dark);
}

.section-title__italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
}

.section-title__italic--accent {
  color: var(--color-accent-light);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gap-05);
  z-index: 100;
  padding: var(--gap-03) var(--gap-05);
  background-color: var(--color-deep);
  color: var(--on-dark);
  border-radius: var(--radius-02);
}

.skip-link:focus {
  top: var(--gap-05);
}

/* ==========================================================================
   4. Motion
   --------------------------------------------------------------------------
   Everything here is scoped to `html.js`. The class is added by enhance.js
   before the first paint; if the scripts fail, no element is ever hidden.

   Reveals travel 100px in 1000ms — the speed measured on the reference. The
   delay comes from the markup (`data-reveal-delay`), read by main.js.
   ========================================================================== */

.js [data-reveal] {
  opacity: 0;
  transition:
    opacity var(--reveal-duration) var(--ease-reveal),
    transform var(--reveal-duration) var(--ease-reveal);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js [data-reveal="up"] {
  transform: translateY(100px);
}

.js [data-reveal="left"] {
  transform: translateX(-100px);
}

.js [data-reveal="right"] {
  transform: translateX(100px);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- About curtain -------------------------------------------------------
   A cream sheet covers the photo, then rolls up. Height first (1000ms), then
   the leftover strip fades (1500ms) — same two steps as the reference. */

.about__curtain {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  background-color: var(--color-cream);
  pointer-events: none;
  opacity: 0;
}

.js .about__curtain {
  height: 100%;
  opacity: 1;
  transition:
    height 1000ms var(--ease-reveal),
    opacity 1500ms linear 1000ms;
}

.js [data-curtain].is-in .about__curtain {
  height: 0;
  opacity: 0;
}

/* --- Steps staircase -----------------------------------------------------
   Columns start aligned and drop by 86px each, all at 172px/s. Without
   JavaScript they simply stay aligned: nothing is ever hidden. */

.js .steps__grid .step {
  transform: translateY(0);
  transition: transform var(--step-duration, 0ms) linear;
}

.js .steps__grid.is-in .step {
  transform: translateY(var(--step-drop, 0px));
}

.steps__grid .step:nth-child(2) {
  --step-drop: 86px;
  --step-duration: 500ms;
}

.steps__grid .step:nth-child(3) {
  --step-drop: 172px;
  --step-duration: 1000ms;
}

.steps__grid .step:nth-child(4) {
  --step-drop: 258px;
  --step-duration: 1500ms;
}

/* --- Hero card ----------------------------------------------------------
   main.js writes --hero-progress (0 → 1) while the hero scrolls past; the
   card shrinks from 1 to 0.8, the range measured on the reference. */

.hero__card {
  transform: scale(calc(1 - 0.2 * var(--hero-progress, 0)));
  transform-origin: 50% 50%;
}

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- Button --------------------------------------------------------------
   Two copies of the label sit in a clipped box. On hover the visible one
   leaves through the top (-30px) while the spare rises into place (-20px,
   because it is parked 20px below the box). Those two distances come from
   the reference. */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-02);
  background-color: var(--color-accent);
  color: var(--color-ink);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  transition: background-color 600ms ease-out;
  position: relative;
  overflow: hidden;
}

.button:hover {
  background-color: var(--color-accent-strong);
}

.button--full {
  width: 100%;
}

.button--small {
  padding: 8px 16px;
  font-size: var(--text-small);
}

.button__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.button__label {
  display: block;
  line-height: var(--line-tight);
  transition: transform var(--hover-duration) var(--ease-hover);
}

.button__label--hover {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
}

.button:hover .button__label {
  transform: translateY(-30px);
}

.button:hover .button__label--hover {
  transform: translateY(-20px);
}

/* --- Brand --------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-02);
  color: var(--color-ink);
}

.brand__mark {
  width: 30px;
  height: 30px;
  color: var(--color-accent);
  flex: none;
}

.brand__name {
  font-size: var(--text-large);
  font-weight: var(--weight-medium);
  letter-spacing: -0.5px;
}

.brand--footer {
  color: var(--on-dark);
}

.brand--footer .brand__mark {
  width: 40px;
  height: 40px;
}

.brand--footer .brand__name {
  font-size: 26px;
}

/* --- Burger (mobile menu trigger) ---------------------------------------- */

.burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-02);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.burger__bar {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-ink);
  border-radius: 2px;
  transition:
    transform var(--hover-duration) var(--ease-hover),
    opacity var(--hover-duration) var(--ease-hover);
}

.burger[aria-expanded="true"] .burger__bar:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__bar:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Navigation ---------------------------------------------------------- */

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--gap-10);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-02);
  color: var(--color-ink);
  transition: color var(--hover-duration) var(--ease-hover);
}

.nav__link:hover {
  color: var(--color-accent-strong);
}

.nav__item--dropdown {
  position: relative;
}

.nav__chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--hover-duration) var(--ease-hover);
}

/* The chevron flips on its horizontal axis, like the reference. */
.nav__item--dropdown:hover .nav__chevron,
.nav__item--dropdown.is-open .nav__chevron {
  transform: rotateX(180deg);
}

.nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  min-width: 240px;
  padding: var(--gap-03);
  background-color: var(--color-surface);
  border-radius: var(--radius-05);
  box-shadow: 0 18px 40px rgba(31, 31, 31, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--hover-duration) var(--ease-hover),
    transform var(--hover-duration) var(--ease-hover),
    visibility 0s linear var(--hover-duration);
}

.nav__item--dropdown:hover .nav__panel,
.nav__item--dropdown:focus-within .nav__panel,
.nav__item--dropdown.is-open .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav__sublink {
  display: block;
  padding: var(--gap-02) var(--gap-03);
  border-radius: var(--radius-02);
  font-size: var(--text-small);
  transition: background-color var(--hover-duration) var(--ease-hover);
}

.nav__sublink:hover {
  background-color: var(--color-cream);
}

/* --- Service card --------------------------------------------------------
   The description is folded away (0fr) and unrolls on hover (1fr), while the
   photo scales to 1.08 — both timings taken from the reference. */

.service-card {
  position: relative;
  border-radius: var(--radius-05);
  overflow: hidden;
  isolation: isolate;
}

.service-card__image {
  width: 100%;
  height: 453px;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--hover-duration-slow) ease-in-out;
}

.service-card:hover .service-card__image {
  transform: scale(1.08);
  transition-duration: 400ms;
}

.service-card__body {
  position: absolute;
  inset: auto 32px 20px 32px;
  max-width: 324px;
  display: grid;
  gap: var(--gap-03);
  color: var(--on-dark);
}

.service-card__title {
  font-size: var(--h4-size);
  line-height: var(--h4-height);
  letter-spacing: var(--h4-letter);
  font-weight: var(--weight-medium);
}

/* The description is folded to zero and unrolls on hover. A grid whose row
   goes from 0fr to 1fr is the only way to animate "height: auto" in plain
   CSS — which is why the paragraph needs this wrapper around it. */
.service-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--hover-duration-slow) ease-in-out;
}

.service-card__text {
  font-size: var(--text-small);
  line-height: var(--line-tight);
  min-height: 0;
  overflow: hidden;
}

.service-card:hover .service-card__reveal,
.service-card:focus-within .service-card__reveal {
  grid-template-rows: 1fr;
  transition-duration: 400ms;
}

/* --- Counter ------------------------------------------------------------- */

.counter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-inline: var(--gap-12);
}

.counter:first-child {
  padding-left: 0;
}

.counter:last-child {
  padding-right: 0;
}

.counter--bordered {
  border-left: 1px solid var(--ink-10);
  border-right: 1px solid var(--ink-10);
}

.counter--bordered-left {
  border-left: 1px solid var(--ink-10);
}

.counter__value {
  font-size: var(--h3-size);
  line-height: 1.2;
  letter-spacing: var(--h3-letter);
  font-weight: var(--weight-medium);
}

.counter__label {
  color: var(--color-ink-soft);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
}

/* --- Review card and carousel -------------------------------------------- */

/* 1008px wide, centred inside the 1204px column — the reference width. */
.reviews__carousel {
  width: 100%;
  max-width: 1008px;
}

/* Native scroll-snap: swipe, trackpad and keyboard all work without JS.
   The arrows below only call scrollTo(). */
.reviews__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.reviews__track::-webkit-scrollbar {
  display: none;
}

.review {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-09);
  padding: var(--gap-09);
  background-color: var(--color-surface);
  border-radius: var(--radius-05);
}

.review__media {
  position: relative;
  flex: 0 0 auto;
  width: 317px;
  height: 298px;
  border-radius: var(--radius-02);
  overflow: hidden;
}

.review__portrait,
.review__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms linear;
}

.review__media.is-playing .review__video {
  opacity: 1;
}

.review__play {
  position: absolute;
  bottom: 17px;
  left: 19px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-01);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-small);
}

.review__play-icon {
  width: 11px;
  height: 12px;
  flex: none;
}

.review__play-icon--pause,
.review__media.is-playing .review__play-icon--play {
  display: none;
}

.review__media.is-playing .review__play-icon--pause {
  display: block;
}

.review__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
  max-width: 520px;
}

.review__stars {
  display: flex;
  gap: 5px;
  color: var(--color-terracotta);
}

.review__stars svg {
  width: 20px;
  height: 20px;
}

.review__quote {
  font-size: var(--text-medium);
  line-height: var(--line-body);
}

.review__author {
  font-weight: var(--weight-medium);
  margin-top: var(--gap-03);
}

.review__role {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
}

.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-02);
  margin-top: var(--gap-06);
}

.reviews__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 41px;
  border-radius: var(--radius-02);
  background-color: var(--color-surface);
  transition: background-color var(--hover-duration) var(--ease-hover);
}

.reviews__arrow:hover {
  background-color: var(--color-accent);
}

.reviews__arrow svg {
  width: 16px;
  height: 16px;
}

.reviews__counter {
  display: flex;
  align-items: center;
  gap: 0;
  height: 41px;
  padding-inline: var(--gap-06);
  border-radius: var(--radius-02);
  background-color: var(--color-surface);
  font-weight: var(--weight-medium);
}

/* Odometer: one line high, the strip slides up by one line per slide. */
.reviews__window {
  display: block;
  height: 26px;
  overflow: hidden;
}

.reviews__digits {
  display: block;
  transform: translateY(calc(var(--review-index, 0) * -26px));
  transition: transform var(--hover-duration-slow) var(--ease-hover);
}

.reviews__digits > span {
  display: block;
  height: 26px;
  line-height: 26px;
}

/* --- Post card -----------------------------------------------------------
   On hover the photo grows and blurs a little while the arrow badge pops in,
   exactly the three properties the reference animates. */

.post__media {
  position: relative;
  border-radius: var(--radius-02);
  overflow: hidden;
}

.post__image {
  width: 100%;
  height: 265px;
  object-fit: cover;
  transform: scale(1);
  filter: blur(0);
  transition:
    transform var(--hover-duration-slow) var(--ease-hover),
    filter var(--hover-duration-slow) var(--ease-hover);
}

.post__link:hover .post__image {
  transform: scale(1.05);
  filter: blur(3px);
}

.post__badge {
  position: absolute;
  top: var(--gap-03);
  right: var(--gap-03);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-ink);
  opacity: 0;
  transform: scale(0);
  transition:
    opacity var(--hover-duration-slow) var(--ease-hover),
    transform var(--hover-duration-slow) var(--ease-hover);
}

.post__badge svg {
  width: 20px;
  height: 20px;
}

.post__link:hover .post__badge {
  opacity: 1;
  transform: scale(1);
}

.post__date {
  display: flex;
  align-items: center;
  gap: var(--gap-02);
  margin-top: var(--gap-04);
  color: var(--color-ink-soft);
  font-size: var(--text-small);
}

.post__title {
  margin-top: var(--gap-02);
  font-size: var(--text-large);
  line-height: 1.5;
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
  max-width: 265px;
}

/* --- Accordion -----------------------------------------------------------
   Native <details>: it opens with or without JavaScript. main.js only
   animates the height, so no answer can ever stay stuck closed. */

.faq__item {
  background-color: var(--color-surface);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-03);
  overflow: hidden;
  transition:
    background-color var(--hover-duration) var(--ease-hover),
    border-color var(--hover-duration) var(--ease-hover);
}

.faq__item[open] {
  background-color: var(--color-cream-2);
  border-color: transparent;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-05);
  padding: var(--gap-05) var(--gap-06);
  font-size: var(--text-medium);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
}

/* The "+" is drawn with two bars so it can rotate to a "x" on open. */
.faq__sign {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-01);
  transition:
    background-color var(--hover-duration) var(--ease-hover),
    transform var(--hover-duration) var(--ease-hover);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.6px;
  background-color: var(--color-ink);
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__sign {
  background-color: var(--color-accent);
  transform: rotate(45deg);
}

/* The padding lives on the paragraph, not on the panel: a padded panel
   collapsed to height 0 would still take its padding, and every closed
   accordion would carry 20 useless pixels. */
.faq__answer {
  padding: 0;
  overflow: hidden;
}

.faq__answer p {
  padding: 0 var(--gap-06) var(--gap-05);
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
  max-width: 452px;
}

/* --- Social icons --------------------------------------------------------
   Two identical icons stacked in a 33px box; on hover the strip rises by
   29px so the second one takes the place of the first. */

.socials {
  display: flex;
  gap: var(--gap-02);
}

/* The box is 33px tall and the strip is 47px (18 + 11 + 18): centring the
   strip would show both icons at once. It is aligned to the top instead,
   with a 7px inset, so exactly one icon is framed at a time. */
.social {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 7px;
  width: 33px;
  height: 33px;
  border-radius: var(--radius-01);
  background-color: var(--color-surface);
  color: var(--color-deep);
  overflow: hidden;
}

.social__roll {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  gap: 11px; /* 29px between icon tops = the travel on hover */
  transition: transform 400ms var(--ease-hover);
}

.social:hover .social__roll {
  transform: translateY(-29px);
}

.social__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.social__icon--x {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.site-header {
  position: absolute;
  top: var(--gap-05);
  left: 0;
  right: 0;
  z-index: 20;
  padding-inline: var(--shell-padding);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-06);
  padding: var(--gap-05) var(--gap-06);
  background-color: var(--color-surface);
  border-radius: var(--radius-05);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-05);
}

.site-header__phone {
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ==========================================================================
   7. Page sections, top to bottom
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 500px var(--shell-padding) 110px;
  background-image: url("../img/hero-hedge-trimming.webp");
  background-position: 50% 0;
  background-size: cover;
  overflow: hidden;
}

/* A 10% black veil keeps the white title readable over the photo. */
.hero__veil {
  position: absolute;
  inset: 0;
  background-color: var(--color-ink);
  opacity: 0.1;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-09);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gap-07);
  max-width: 642px;
}

.hero__title {
  font-size: var(--h1-size);
  line-height: var(--h1-height);
  letter-spacing: var(--h1-letter);
  font-weight: var(--weight-medium);
  color: var(--on-dark);
}

.hero__title-italic {
  font-family: var(--font-display);
  font-style: italic;
  /* Lit-up olive: this sits on a photo, where the plain olive disappears
     into the foliage. */
  color: var(--color-accent-light);
}

.hero__lead {
  display: flex;
  flex-direction: column;
  gap: var(--gap-01);
  color: var(--on-dark);
}

.hero__kicker {
  font-weight: var(--weight-medium);
}

.hero__subtitle {
  font-size: var(--text-medium);
  opacity: 0.8;
}

.hero__card {
  flex: none;
  width: 100%;
  max-width: 296px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
  padding: 10px;
  background-color: var(--color-surface);
  border-radius: var(--radius-03);
}

.hero__media {
  position: relative;
  height: 160px;
  border-radius: var(--radius-02);
  overflow: hidden;
}

.hero__media-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.hero__poster,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 300ms linear;
}

.hero__media.is-playing .hero__video {
  opacity: 1;
}

.hero__play {
  position: absolute;
  right: var(--gap-03);
  bottom: var(--gap-03);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 34px;
  border-radius: var(--radius-01);
  background-color: var(--color-surface);
  color: var(--color-ink);
}

.hero__play-icon {
  width: 11px;
  height: 12px;
}

.hero__play-icon--pause,
.hero__media.is-playing .hero__play-icon--play {
  display: none;
}

.hero__media.is-playing .hero__play-icon--pause {
  display: block;
}

/* --- 2. Perks ------------------------------------------------------------ */

.perks {
  padding: var(--gap-12) var(--shell-padding);
  background-color: var(--color-cream-2);
}

.perks__grid {
  display: flex;
  justify-content: center;
  gap: var(--gap-09);
  max-width: 995px;
}

.perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-06);
  flex: 1;
  text-align: center;
}

.perk--bordered {
  padding-inline: var(--gap-06) var(--gap-09);
  border-left: 1px solid var(--ink-10);
  border-right: 1px solid var(--ink-10);
}

.perk__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-01);
  background-color: var(--color-accent);
  color: var(--color-ink);
}

.perk__icon svg {
  width: 23px;
  height: 21px;
}

.perk__title {
  font-size: var(--text-large);
  line-height: 1.5;
  font-weight: var(--weight-medium);
}

.perk__text {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
  max-width: 300px;
}

/* --- 3. About ------------------------------------------------------------ */

.about {
  padding: var(--section-padding) var(--shell-padding) var(--section-padding-large);
}

.about__grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-09);
  max-width: 1004px;
}

.about__media {
  position: relative;
  flex: none;
  border-radius: var(--radius-03);
  overflow: hidden;
}

.about__media img {
  width: 442px;
  height: 488px;
  object-fit: cover;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-06);
  max-width: 480px;
}

.about__head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
}

.about__lead {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

.about__points {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

.about__point-title {
  font-size: var(--text-medium);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
}

.about__point-text {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

.about__content .button {
  align-self: flex-start;
}

/* --- 4. Services --------------------------------------------------------- */

.services {
  padding: var(--section-padding-large) var(--shell-padding);
  background-color: var(--color-cream-2);
}

.services__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-10);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-07);
  width: 100%;
}

/* --- 5. Impact ----------------------------------------------------------- */

.impact {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
  padding-top: var(--section-padding);
}

.impact__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-04);
  padding-inline: var(--shell-padding);
}

.impact__lead {
  max-width: 620px;
  text-align: center;
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

.impact__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-12);
}

.impact__body > .shell {
  padding-inline: var(--shell-padding);
}

.counters {
  display: flex;
  justify-content: space-between;
  padding-block: var(--gap-10);
  background-color: var(--color-cream-2);
  border-radius: var(--radius-04);
}

/* The panel bleeds to the left edge of the screen: the photo has no gutter
   on that side, which is what makes it feel wider than the content column.
   `overflow: hidden` is not decoration — the two halves reveal by sliding
   100px sideways, and this panel is full-bleed, so without it the page would
   scroll horizontally for the length of the animation. */
.panel {
  display: flex;
  align-items: stretch;
  background-color: var(--color-deep);
  overflow: hidden;
}

.panel__image {
  flex: none;
  width: 53%;
  object-fit: cover;
}

.panel__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-06);
  padding: 115px var(--shell-padding) 115px 112px;
  color: var(--on-dark);
}

/* The button breathes a little more than the text blocks above it. */
.panel__content .button {
  margin-top: var(--gap-04);
}

.panel__lead {
  max-width: 420px;
  color: var(--on-dark-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

.panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
}

.panel__item {
  display: flex;
  align-items: center;
  gap: var(--gap-03);
  font-size: var(--text-small);
}

.panel__chevron {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-accent-light);
}

/* --- 6. Steps ------------------------------------------------------------ */

.steps {
  padding: var(--section-padding) var(--shell-padding);
}

.steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: var(--gap-08);
  /* Room for the staircase: the last column drops 258px. */
  padding-bottom: 258px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

.step__number {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: -0.2px;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

.step__title {
  font-size: var(--h4-size);
  line-height: var(--h4-height);
  letter-spacing: var(--h4-letter);
  font-weight: var(--weight-medium);
}

.step__image {
  width: 100%;
  height: 288px;
  object-fit: cover;
  border-radius: var(--radius-03);
}

.step__text {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

/* --- 7. Reviews ---------------------------------------------------------- */

.reviews {
  padding: var(--section-padding) var(--shell-padding) 170px;
  background-color: var(--color-cream-2);
}

.reviews__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-10);
}

/* --- 8. Gallery ---------------------------------------------------------- */

.gallery {
  padding: var(--section-padding) var(--shell-padding) var(--section-padding-large);
}

.gallery__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
}

/* Title on the left, button on the right — same row as the reference. */
.gallery__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-06);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-07);
  align-items: center;
}

.gallery__column {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

.gallery__image {
  width: 100%;
  border-radius: var(--radius-03);
}

/* --- 9. FAQ -------------------------------------------------------------- */

.faq {
  padding: 0 var(--shell-padding) var(--section-padding);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
}

.faq__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-04);
}

.faq__lead {
  max-width: 620px;
  text-align: center;
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

.faq__grid {
  display: grid;
  grid-template-columns: 510px 1fr;
  gap: var(--gap-07);
  align-items: start;
}

.faq__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-06);
  padding: 125px var(--gap-12);
  background-color: var(--color-cream-2);
  border-radius: var(--radius-04);
  text-align: center;
}

.faq__card-title {
  font-size: var(--h4-size);
  line-height: var(--h4-height);
  letter-spacing: var(--h4-letter);
  font-weight: var(--weight-medium);
}

.faq__card-text {
  color: var(--color-ink-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
}

/* --- 10. Journal --------------------------------------------------------- */

.journal {
  padding: 0 var(--shell-padding) var(--section-padding);
}

.journal__inner {
  display: flex;
  flex-direction: column;
  gap: var(--gap-10);
}

.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-07);
}

.post__link {
  display: block;
  padding: var(--gap-06);
  background-color: var(--color-surface);
  border-radius: var(--radius-04);
  height: 100%;
}

/* --- 11. Call to action --------------------------------------------------
   Fixed height, like the reference: the photo fills the block and the green
   panel with its diagonal cut sits on top of it. */

.cta {
  position: relative;
  height: 947px;
  padding-bottom: var(--section-padding);
  background-color: var(--color-deep);
  overflow: hidden;
}

.cta__photo {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 758px;
  object-fit: cover;
}

.cta__shape {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  height: 451px;
  background-image: url("../img/cta-shape.svg");
  background-position: 0 0;
  background-size: cover;
  pointer-events: none;
}

.cta__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-07);
  padding-top: var(--section-padding);
  padding-inline: var(--shell-padding);
}

.cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
  max-width: 460px;
}

.cta__lead {
  color: var(--on-dark-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

/* --- 12. Footer ---------------------------------------------------------- */

.site-footer {
  padding: var(--section-padding) var(--shell-padding);
  background-color: var(--color-deep);
  color: var(--on-dark);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
}

.site-footer__top {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-13);
  padding-bottom: var(--gap-08);
  border-bottom: 1px solid var(--on-dark-line);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--gap-05);
  max-width: 300px;
}

.site-footer__baseline {
  color: var(--on-dark-soft);
  font-size: var(--text-small);
  line-height: var(--line-tight);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-13);
  flex: 1;
  max-width: 760px;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--gap-04);
  /* The hairlines between columns are drawn on the left of each column. */
  padding-left: var(--gap-08);
  border-left: 1px solid var(--on-dark-line);
}

.site-footer__title {
  color: var(--color-accent-light);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-03);
  font-size: var(--text-small);
  color: var(--on-dark-soft);
}

.site-footer__list a {
  transition: color var(--hover-duration) var(--ease-hover);
}

.site-footer__list a:hover {
  color: var(--color-accent-light);
}

.site-footer__middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-06);
  padding-block: var(--gap-06);
  border-bottom: 1px solid var(--on-dark-line);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-05);
  padding-top: var(--gap-07);
  color: var(--on-dark-soft);
  font-size: var(--text-small);
}

/* ==========================================================================
   8. Responsive
   --------------------------------------------------------------------------
   Three breakpoints, the same as the reference: 991, 767 and 479px. Sizes are
   redefined here once; the components above never carry a media query.
   ========================================================================== */

@media (max-width: 991px) {
  :root {
    --h1-size: 48px;
    --h1-height: 57.6px;
    --h2-size: 40px;
    --h2-height: 50px;
    --h2-letter: -1.5px;
    --h3-size: 28px;
    --h3-height: 39.2px;
    --section-padding: 80px;
    --section-padding-large: 90px;
    --shell-padding: 24px;
  }

  /* Menu collapses into the burger. Row order becomes:
     logo — button — burger, with the menu wrapping underneath.
     `row-gap: 0` matters: the wrapped row is 0px tall when the menu is
     closed, and a row gap would still push the header 24px taller. */
  .burger {
    display: flex;
    order: 3;
  }

  .site-header__inner {
    flex-wrap: wrap;
    column-gap: var(--gap-03);
    row-gap: 0;
    padding: var(--gap-04);
  }

  /* No room for the phone number next to the burger. */
  .site-header__phone {
    display: none;
  }

  .nav {
    order: 4;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms var(--ease-hover);
  }

  .nav.is-open {
    max-height: 460px;
  }

  .nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-04);
    padding-top: var(--gap-05);
  }

  .nav__item {
    width: 100%;
  }

  .nav__item--dropdown {
    position: static;
  }

  .nav__panel {
    position: static;
    box-shadow: none;
    background-color: var(--color-cream);
    max-height: 0;
    padding-block: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height var(--hover-duration) var(--ease-hover);
  }

  /* On touch screens the panel opens on click, not on hover. */
  .nav__item--dropdown:hover .nav__panel {
    max-height: 0;
  }

  .nav__item--dropdown.is-open .nav__panel {
    max-height: 220px;
    padding-block: var(--gap-03);
  }

  .site-header__actions {
    order: 2;
  }

  .hero {
    padding-top: 420px;
  }

  .hero__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-08);
  }

  .hero__card {
    max-width: 100%;
  }

  .hero__media {
    height: 300px;
  }

  .perks__grid {
    flex-wrap: wrap;
    gap: var(--gap-08);
  }

  .perk {
    flex-basis: 100%;
  }

  .perk--bordered {
    padding-block: var(--gap-08);
    padding-inline: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--ink-10);
    border-bottom: 1px solid var(--ink-10);
  }

  .about__grid {
    flex-direction: column;
    align-items: stretch;
  }

  .about__media img {
    width: 100%;
    height: auto;
  }

  .about__content {
    max-width: 100%;
  }

  .services__grid,
  .journal__grid {
    grid-template-columns: 1fr;
  }

  .counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-08);
    padding: var(--gap-08);
  }

  .counter {
    padding-inline: 0;
  }

  .counter--bordered,
  .counter--bordered-left {
    border: 0;
  }

  .panel {
    flex-direction: column;
  }

  .panel__image {
    width: 100%;
    height: 320px;
  }

  .panel__content {
    padding: var(--gap-12) var(--shell-padding);
  }

  /* The staircase is a wide-screen effect only: below 991px the columns
     stack, so there is nothing to offset. */
  .steps__grid {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 0;
  }

  .js .steps__grid.is-in .step {
    transform: none;
  }

  .review {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-06);
    padding: var(--gap-06);
  }

  .review__media {
    width: 100%;
    height: 320px;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
    gap: var(--gap-03);
  }

  .faq__grid {
    grid-template-columns: 1fr;
  }

  .faq__card {
    padding: var(--gap-12) var(--gap-08);
  }

  .cta {
    height: 800px;
  }

  .cta__shape {
    height: 360px;
  }

  .cta__photo {
    height: 640px;
  }

  .site-footer__top {
    flex-direction: column;
    gap: var(--gap-08);
  }

  .site-footer__columns {
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 767px) {
  :root {
    --h1-size: 40px;
    --h1-height: 48px;
    --h1-letter: -1.5px;
    --h2-size: 32px;
    --h2-height: 41.6px;
    --h2-letter: -1px;
    --section-padding: 64px;
    --section-padding-large: 72px;
    --shell-padding: 20px;
  }

  .hero {
    padding-top: 360px;
  }

  .gallery__head {
    flex-direction: column;
    align-items: stretch;
  }

  .services__grid {
    gap: var(--gap-05);
  }

  .steps__grid {
    grid-template-columns: 1fr;
    gap: var(--gap-10);
  }

  .cta {
    height: 560px;
  }

  .cta__shape {
    height: 315px;
  }

  .cta__photo {
    height: 420px;
  }

  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--gap-08);
  }

  .site-footer__middle,
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 479px) {
  :root {
    --h1-size: 34px;
    --h1-height: 42px;
    --h2-size: 28px;
    --h2-height: 36.4px;
    --shell-padding: 16px;
  }

  .hero {
    padding-top: 300px;
    padding-bottom: var(--gap-12);
  }

  .hero__media {
    height: 200px;
  }

  .counters {
    grid-template-columns: 1fr;
    gap: var(--gap-06);
  }

  .review__media {
    height: 240px;
  }

  .faq__card {
    padding: var(--gap-10) var(--gap-06);
  }

  .faq__question {
    padding: var(--gap-04) var(--gap-05);
    font-size: var(--text-base);
  }

  .cta {
    height: 500px;
  }

  .cta__shape {
    height: 300px;
  }

  .cta__photo {
    height: 360px;
  }
}

/* ==========================================================================
   9. Reduced motion
   --------------------------------------------------------------------------
   Someone who asked their system for less movement gets the final state
   immediately: nothing slides, nothing scales, nothing is hidden.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .js .about__curtain {
    height: 0;
    opacity: 0;
  }

  /* The staircase is not decoration, it is the final layout of the four
     steps: it stays, it simply arrives without sliding (the duration above
     is already down to 0.001ms). Nothing to override here. */

  .hero__card {
    transform: none;
  }
}