/* =============================================================================
   Garten Flos - the whole stylesheet.

   Layout follows the WordPress site this replaced: a big centred Bebas Neue
   heading on every page, dark green text panels overlapping large photographs,
   image tiles with white pill labels. What changed is the palette and the
   details - see the tokens below.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------------

   Two layers. The *roots* are the dozen colours the site chooses; everything
   else is *derived* from them with color-mix, so a wash is "the brand at 8% of
   the paper" rather than a hex retyped by hand. A new colour goes in as a
   root, or as a color-mix of one - never as a hex in a rule.

   The palette is built from the logo outwards. Its green (#4c5c47, measured
   off the file) is `--brand` and fills the text panels, as the original's
   near-identical #4b5b45 did. The old sage header (#a3b099) carried white text
   at 2.2:1, which is why it is gone: the chrome is now a deeper forest from the
   same hue, and the one warm colour - a muted gold, the colour of dry grass and
   cut timber - is kept for the things a visitor should press.

   Measured contrast (WCAG):
     --ink on --paper ............ 15.0:1
     --ink-muted on --paper ......  6.6:1
     --brand on --paper ..........  6.6:1   links, outline buttons
     --on-dark on --brand ........  7.0:1   panel text
     --on-dark-muted on --forest .  7.8:1   footer text
     --on-accent on --accent .....  6.0:1   the call-to-action buttons
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Roots */
  --forest: #2b3727;          /* header, footer, the call-to-action band */
  --brand: #4c5c47;           /* the logo's green: panels, primary buttons */
  --sage: #a9b99a;            /* rules and quiet accents on dark grounds */
  --paper: #f8f7f1;           /* the page */
  --surface: #ffffff;         /* cards and inputs */
  --ink: #1f261c;
  --ink-muted: #525c4e;
  --accent: #d9a441;          /* gold: what to press */
  --on-accent: #2b3727;
  --on-dark: #f7f5ee;
  --danger: #a3392b;
  /* WhatsApp's own green, for its icon only - like a logo, never themed and
     never used for text. */
  --whatsapp: #25d366;

  /* Derived */
  --sage-wash: color-mix(in srgb, var(--sage) 22%, var(--paper));
  --brand-wash: color-mix(in srgb, var(--brand) 8%, var(--paper));
  --accent-strong: color-mix(in srgb, var(--accent) 85%, var(--ink));
  --on-dark-muted: color-mix(in srgb, var(--on-dark) 80%, var(--sage));
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  --line-on-dark: color-mix(in srgb, var(--on-dark) 18%, transparent);
  --danger-wash: color-mix(in srgb, var(--danger) 8%, var(--surface));
  --focus: color-mix(in srgb, var(--accent) 90%, var(--ink));

  --shadow-sm: 0 2px 10px -4px color-mix(in srgb, var(--forest) 35%, transparent);
  --shadow: 0 14px 34px -16px color-mix(in srgb, var(--forest) 45%, transparent);
  --shadow-lg: 0 30px 60px -24px color-mix(in srgb, var(--forest) 55%, transparent);

  /* Type */
  --font-display: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-title: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space and shape */
  --max: 1200px;
  --gutter: 1rem;
  --radius: 16px;
  --radius-sm: 6px;
  --header-h: 76px;
}

@media (min-width: 700px) {
  :root { --gutter: 1.5rem; --header-h: 92px; }
}

/* --- Base ------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-weight: 400; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }

a { color: var(--brand); text-underline-offset: .18em; }
a:hover { color: var(--forest); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.narrow { max-width: 820px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top .15s;
}
.skip-link:focus { top: 1rem; }

.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.icon--sm { width: 1.1rem; height: 1.1rem; }
.icon--lg { width: 2.75rem; height: 2.75rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.65rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: 700 .95rem/1.2 var(--font-body);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn .icon { transition: transform .2s; }
.btn:hover .icon { transform: translateX(3px); }

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

.btn--primary { background: var(--brand); color: var(--on-dark); }
.btn--primary:hover { background: var(--forest); color: var(--on-dark); }

.btn--outline { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn--outline:hover { background: var(--brand); color: var(--on-dark); }

.btn--ghost-light { border-color: var(--on-dark); color: var(--on-dark); background: transparent; }
.btn--ghost-light:hover { background: var(--on-dark); color: var(--forest); }

.btn--block { width: 100%; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--forest);
  color: var(--on-dark);
  transition: box-shadow .2s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -10px rgb(0 0 0 / .45); }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; flex: none; }
/* The logo holds the bar's full height itself. Once the mobile drawer opens,
   the bar wraps onto a second line, and a first line only as tall as the logo
   would put it flush against the top edge - 9px higher than when closed. */
.site-header__bar > .brand { align-items: center; min-height: var(--header-h); }
.brand__logo { height: calc(var(--header-h) - 18px); width: auto; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  border: 2px solid var(--line-on-dark);
  border-radius: 12px;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
.nav-toggle__close { display: none; }
.site-header.is-open .nav-toggle__open { display: none; }
.site-header.is-open .nav-toggle__close { display: block; }

.site-nav__list { list-style: none; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .2rem;
  border: 0;
  background: none;
  color: var(--on-dark);
  font: 400 1.4rem/1 var(--font-display);
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.site-nav__link:hover,
.site-nav__item.is-current > .site-nav__link { color: var(--accent); }
.site-nav__link .icon { transition: transform .2s; }
.site-nav__link[aria-expanded="true"] .icon { transform: rotate(180deg); }

.site-nav__sub { list-style: none; }
.site-nav__sub a {
  display: block;
  padding: .6rem 1rem;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.site-nav__sub a:hover { background: var(--brand-wash); color: var(--brand); }
.site-nav__sub a[aria-current="page"] { color: var(--brand); box-shadow: inset 3px 0 var(--accent); }

.site-nav__extras { display: flex; align-items: center; gap: 1rem; }

.phone-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: .85rem;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s;
}
.phone-pill:hover { background: var(--accent-strong); color: var(--on-accent); }
.phone-pill__days { text-transform: uppercase; letter-spacing: .04em; }

/* The language switch: a pill track, a round flag per language, and a white
   knob under the active one that slides across when another is picked. The
   knob's position is `--index` (set by the template, moved by site.js), and
   every size below is one option wide, so a third language is one more entry
   in SWITCHER_LANGUAGES and nothing here. */
.lang-switch {
  --size: 2.25rem;            /* one option, and the knob */
  --pad: 3px;
  position: relative;
  display: inline-flex;
  flex: none;
  padding: var(--pad);
  border-radius: 999px;
  background: color-mix(in srgb, var(--on-dark) 12%, transparent);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / .35), inset 0 0 0 1px var(--line-on-dark);
}

.lang-switch__knob {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgb(0 0 0 / .35), 0 0 0 2px var(--accent);
  transform: translateX(calc(var(--index, 0) * var(--size)));
  transition: transform .24s cubic-bezier(.3, .8, .35, 1.15), opacity .2s;
}
/* On a page in a language the switch does not offer, nothing is on. */
.lang-switch:not(.has-active) .lang-switch__knob { opacity: 0; }

/* Two classes, so the footer's `.site-footer a` does not restyle it. */
.lang-switch .lang-switch__option {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  color: var(--on-dark-muted);
  text-decoration: none;
}
.lang-switch__option:focus-visible { outline-offset: 1px; border-radius: 50%; }

.lang-switch__flag,
.lang-switch__code {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  overflow: hidden;
  opacity: .62;
  filter: saturate(.7);
  transition: opacity .2s, filter .2s, transform .2s;
}
.lang-switch__code {
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.lang-switch__flag { box-shadow: 0 0 0 1px rgb(0 0 0 / .18); }

.lang-switch__option:hover .lang-switch__flag,
.lang-switch__option:hover .lang-switch__code { opacity: .85; filter: none; transform: scale(1.06); }

/* The flag the knob is under - or, mid-switch, the one it is moving to. */
.lang-switch__option[aria-current="true"] .lang-switch__flag,
.lang-switch__option[aria-current="true"] .lang-switch__code,
.lang-switch__option.is-target .lang-switch__flag,
.lang-switch__option.is-target .lang-switch__code { opacity: 1; filter: none; transform: none; }
.lang-switch__option[aria-current="true"] .lang-switch__code,
.lang-switch__option.is-target .lang-switch__code { color: var(--forest); }

.lang-switch.is-switching .lang-switch__option[aria-current="true"]:not(.is-target) .lang-switch__flag,
.lang-switch.is-switching .lang-switch__option[aria-current="true"]:not(.is-target) .lang-switch__code {
  opacity: .62;
  filter: saturate(.7);
}

/* Desktop: a row, with menus that drop down. */
@media (min-width: 1000px) {
  .site-nav { display: flex; align-items: center; gap: 2.25rem; }
  .site-nav__list { display: flex; align-items: center; gap: 1.75rem; }
  .site-nav__item { position: relative; }

  .site-nav__sub {
    position: absolute;
    top: calc(100% + .6rem);
    left: -1rem;
    min-width: 260px;
    padding: .5rem;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
  }
  /* An invisible bridge across the gap, so the menu does not close while the
     pointer travels from the button down to it. */
  .site-nav__sub::before {
    content: "";
    position: absolute;
    inset: -.8rem 0 auto;
    height: .8rem;
  }
  .has-sub:hover > .site-nav__sub,
  .has-sub:focus-within > .site-nav__sub,
  .has-sub > [aria-expanded="true"] + .site-nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .has-sub:hover > .site-nav__link .icon { transform: rotate(180deg); }
}

/* Below that: a drawer under the bar. Without JavaScript the toggle stays
   hidden and the list is simply shown, so every link is still reachable. */
@media (max-width: 999.98px) {
  .site-header__bar { flex-wrap: wrap; gap: 0 1rem; }
  .js .nav-toggle { display: inline-flex; }

  .site-nav {
    flex-basis: 100%;
    padding: .5rem 0 1.25rem;
    border-top: 1px solid var(--line-on-dark);
  }
  .js .site-nav { display: none; }
  .js .site-header.is-open .site-nav { display: block; }
  .js .site-header.is-open { max-height: 100vh; overflow-y: auto; }

  .site-nav__item { border-bottom: 1px solid var(--line-on-dark); }
  .site-nav__link { width: 100%; justify-content: space-between; padding: .9rem 0; font-size: 1.6rem; }

  .site-nav__sub { padding: 0 0 .75rem; }
  .js .site-nav__sub { display: none; }
  .js .has-sub > [aria-expanded="true"] + .site-nav__sub { display: block; }
  .site-nav__sub a { color: var(--on-dark-muted); padding: .55rem .9rem; }
  .site-nav__sub a:hover { background: var(--line-on-dark); color: var(--on-dark); }
  .site-nav__sub a[aria-current="page"] { color: var(--accent); }

  .site-nav__extras { justify-content: space-between; flex-wrap: wrap; padding-top: 1.25rem; }
}

/* --- Shared section furniture ---------------------------------------------- */

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

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

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: .02em;
  text-align: center;
  color: var(--forest);
}
.section-title--light { color: var(--on-dark); }

.section-lede {
  max-width: 44rem;
  margin: .9rem auto clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: var(--ink-muted);
  font-size: 1.05rem;
}
.section-lede--light { color: var(--on-dark-muted); }

.section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.display-title {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  letter-spacing: .02em;
  color: var(--forest);
}
.display-title--sm { font-size: clamp(1.9rem, 4vw, 2.6rem); text-align: center; margin-bottom: 2rem; }
.display-title--left { text-align: left; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
  color: var(--brand);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--accent); }
.eyebrow--light { color: var(--on-dark); }

.rule {
  display: block;
  width: 4.5rem;
  height: 2px;
  margin: 1rem 0 1.4rem;
  background: currentColor;
}
.rule--accent { background: var(--accent); }

/* Running text. */
.prose { max-width: 70ch; }
.prose p, .prose ul { margin: 0 0 1rem; }
.prose > :last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose ul:not(.checklist) { padding-left: 1.25rem; }
.prose li + li { margin-top: .4rem; }

.prose--light { color: var(--on-dark-muted); }
.prose--light strong { color: var(--on-dark); }
.prose--light a { color: var(--on-dark); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.prose--light a:hover { color: var(--accent); }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 1.9rem; }
.checklist li + li { margin-top: .55rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .32em;
  width: 1.15rem; height: 1.15rem;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checklist--light li::before { background: var(--accent); }
.checklist--light { color: var(--on-dark-muted); }
.checklist--light strong { color: var(--on-dark); }

/* --- Hero (home) -------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(460px, 74vh, 680px);
  overflow: hidden;
  color: var(--on-dark);
  text-align: center;
}
.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--forest) 55%, transparent) 0%,
      color-mix(in srgb, var(--forest) 45%, transparent) 45%,
      color-mix(in srgb, var(--forest) 80%, transparent) 100%);
}
.hero__inner { padding-block: 4.5rem; }
.hero__title {
  /* Two lines on a desktop, as the original had: wide enough for the longest
     translation's half, and balanced so neither line is left with one word. */
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 5.5rem);
  line-height: .95;
  letter-spacing: .015em;
  text-shadow: 0 4px 30px rgb(0 0 0 / .35);
}
.hero__lede {
  max-width: 40rem;
  margin: 1.25rem auto 0;
  font-size: clamp(1.02rem, 2vw, 1.2rem);
  color: var(--on-dark);
  text-shadow: 0 2px 14px rgb(0 0 0 / .4);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin-top: 2rem;
}

/* --- Image tiles with a pill label (home) ------------------------------------ */

.tile-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px) {
  .tile-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 2.75rem; }
}

.tile { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 560px) {
  .tile { grid-template-columns: 1.6fr 1fr; gap: 1.5rem; }
  .tile--wide { grid-template-columns: 1fr; }
}

.tile__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
  background: var(--sage-wash);
}
.tile--wide .tile__media { aspect-ratio: 16 / 8; }
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--forest) 50%, transparent), transparent 55%);
  opacity: .55;
  transition: opacity .3s;
}
.tile__media:hover img { transform: scale(1.05); }
.tile__media:hover::after { opacity: .9; }

.tile__label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.3rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  font: 600 1.1rem/1.2 var(--font-title);
  transition: background-color .25s, color .25s;
}
.tile__label::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--accent-strong);
  transition: transform .25s;
}
.tile__media:hover .tile__label { background: var(--accent); color: var(--on-accent); }
.tile__media:hover .tile__label::after { transform: translateX(3px); color: var(--on-accent); }

.tile__text { color: var(--ink-muted); font-size: .97rem; }

/* --- Promises (home) -------------------------------------------------------- */

.promises__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .promises__grid { grid-template-columns: 5fr 7fr; gap: 4.5rem; }
}
.promises__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (max-width: 899.98px) {
  .promises__media img { aspect-ratio: 16 / 10; }
}
.promises__list { display: grid; gap: 2.25rem; }

.promise { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: start; }
.promise__icon {
  display: grid;
  place-items: center;
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  box-shadow: var(--shadow);
}
.promise__icon .icon { width: 1.75rem; height: 1.75rem; }
.promise__title {
  margin: .3rem 0 .45rem;
  font: 600 clamp(1.3rem, 2.4vw, 1.6rem)/1.2 var(--font-title);
  color: var(--forest);
}
.promise p { color: var(--ink-muted); }

/* --- Split: text panel beside a full-bleed photo (home) ------------------------ */

.split { display: grid; background: var(--forest); color: var(--on-dark); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 480px; }
}
.split__text {
  display: grid;
  align-items: center;
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter);
}
.split__inner { max-width: 34rem; margin-inline: auto; text-align: center; }
.split__inner .rule { margin-inline: auto; }
.split__title { font: 600 clamp(1.7rem, 3.4vw, 2.3rem)/1.15 var(--font-title); }
.split__media { position: relative; min-height: 320px; }
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* --- Media beside text (home) -------------------------------------------------- */

.media-text { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) {
  .media-text { grid-template-columns: 5fr 7fr; gap: 4.5rem; }
}
.media-text__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.media-text__title {
  margin-bottom: 1.1rem;
  font: 600 clamp(1.7rem, 3.4vw, 2.3rem)/1.15 var(--font-title);
  color: var(--forest);
}
.media-text__body .prose { margin-bottom: 1.75rem; color: var(--ink-muted); }

/* --- Inner page head ------------------------------------------------------------ */

.page-head {
  padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
}
.page-head__title {
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7.5vw, 5.25rem);
  line-height: .95;
  letter-spacing: .015em;
  color: var(--forest);
}
.page-head__subtitle {
  margin-top: .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.75rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--ink);
}

.breadcrumb { margin-bottom: 1.25rem; font-size: .82rem; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  list-style: none;
  color: var(--ink-muted);
}
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; color: var(--line-strong); }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--brand); font-weight: 600; }

/* --- Feature: the dark panel overlapping a photograph ------------------------------

   The original's signature block. On a wide screen the photo and the panel
   share one grid row and overlap by a column; the panel is taller than the
   photo or shorter, and either way it is centred on it, which is what makes it
   look laid on top rather than placed beside. The gold rule runs out of the
   panel onto the page, on the side the panel faces.
   ----------------------------------------------------------------------------- */

.feature { padding-block: clamp(2rem, 5vw, 4.5rem); }
.feature__grid { display: grid; }

.feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.feature__panel {
  --panel-pad: clamp(1.6rem, 3vw, 2.6rem);
  position: relative;
  z-index: 1;
  padding: var(--panel-pad);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
}
.feature__panel .btn { margin-top: 1.6rem; }

.feature__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  line-height: 1;
  letter-spacing: .03em;
}
.feature__title--sm { font: 600 clamp(1.4rem, 2.5vw, 1.75rem)/1.2 var(--font-title); letter-spacing: 0; }

.feature__panel .prose { font-size: .95rem; }

@media (max-width: 899.98px) {
  .feature__panel { margin: -3rem .75rem 0; }
}

@media (min-width: 900px) {
  .feature__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .feature__media, .feature__panel { grid-row: 1; }

  .feature--panel-left .feature__media { grid-column: 5 / -1; }
  .feature--panel-left .feature__panel { grid-column: 1 / 6; margin-left: clamp(0rem, 3vw, 3rem); }

  .feature--panel-right .feature__media { grid-column: 1 / 9; }
  .feature--panel-right .feature__panel { grid-column: 8 / -1; margin-right: clamp(0rem, 3vw, 3rem); }

  .feature--panel-left .rule--out {
    width: calc(80% + var(--panel-pad) + 2.5rem);
    margin-left: calc(-1 * var(--panel-pad) - 2.5rem);
  }
  .feature--panel-right .rule--out {
    width: calc(80% + var(--panel-pad) + 2.5rem);
    margin-left: 20%;
    margin-right: calc(-1 * var(--panel-pad) - 2.5rem);
  }
  .feature__media img { aspect-ratio: 3 / 2; }
}

/* --- Gallery (tree felling) ------------------------------------------------------ */

.gallery { display: grid; gap: 1rem; list-style: none; }
@media (min-width: 700px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
@media (min-width: 700px) {
  .gallery img { aspect-ratio: 3 / 4; }
}

/* --- Call-to-action band ---------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  /* The brand green rather than the forest: the footer follows directly, and
     the two in one colour read as a single block. */
  background: var(--brand);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
/* A large leaf, drawn in the background at a whisper - whole, and tilted,
   because cropped by the edge it reads as a circle rather than a leaf. */
.cta::before {
  content: "";
  position: absolute;
  right: 1%; top: 50%;
  width: 15rem; height: 15rem;
  background: var(--forest);
  opacity: .28;
  transform: translateY(-50%) rotate(-12deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%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='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta__inner {
  position: relative;
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 900px) {
  .cta__inner { grid-template-columns: 1fr auto; gap: 3rem; }
}
.cta__title {
  margin-bottom: .6rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  letter-spacing: .02em;
}
.cta__text p { color: var(--on-dark-muted); max-width: 40rem; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; }
.cta__phone {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--on-dark);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
}
.cta__phone .icon {
  width: 2.75rem; height: 2.75rem;
  padding: .7rem;
  border-radius: 50%;
  background: var(--forest);
  color: var(--accent);
}
.cta__phone small {
  display: block;
  color: var(--on-dark-muted);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cta__phone:hover { color: var(--accent); }

/* --- Contact ----------------------------------------------------------------------- */

.contact {
  padding-block: clamp(2rem, 5vw, 4.5rem);
  background: var(--sage-wash);
}
.contact .breadcrumb ol { justify-content: flex-start; }

.contact__grid { display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 5fr 7fr; gap: 2.25rem; align-items: stretch; }
}

.contact-card {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--on-dark);
  box-shadow: var(--shadow-lg);
}
.contact-card__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.25rem);
  line-height: .9;
  letter-spacing: .02em;
}
.contact-card__list { display: grid; gap: 1.6rem; list-style: none; margin-bottom: 1.5rem; }
.contact-card a { color: var(--on-dark); text-decoration-color: var(--accent); }
.contact-card a:hover { color: var(--accent); }
.contact-card small { color: var(--on-dark-muted); }

.icon-box { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.icon-box__icon {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
}
.icon-box__icon .icon { width: 1.35rem; height: 1.35rem; }
.icon-box__title { margin: .1rem 0 .2rem; font: 600 1.35rem/1.2 var(--font-title); }
.icon-box p { color: var(--on-dark-muted); font-size: .95rem; }

.social { display: flex; gap: .6rem; list-style: none; }
.social a {
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--line-on-dark);
  color: var(--on-dark);
  transition: background-color .2s, color .2s;
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.social .icon { width: 1.15rem; height: 1.15rem; }

.map {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 2rem;
  text-align: center;
  color: var(--ink-muted);
  background:
    radial-gradient(circle at 30% 20%, var(--brand-wash), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--sage) 14%, transparent) 22px 23px),
    var(--surface);
}
.map__placeholder .icon { color: var(--brand); }
.map__address { color: var(--ink); }
.map__notice { max-width: 30rem; font-size: .88rem; }
.map__external { font-size: .9rem; font-weight: 600; }

/* --- Inquiry form ------------------------------------------------------------------- */

.inquiry__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .inquiry__grid { grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
}
.inquiry__intro p { color: var(--ink-muted); margin-bottom: 1.5rem; }
.inquiry__card {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}
.form__note { color: var(--ink-muted); font-size: .82rem; text-align: center; }

.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .9rem; }
.field__required { color: var(--danger); }
.field input:not([type="checkbox"]),
.field select,
.field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c5c47' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 1.1rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background-color: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
}
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--danger); background-color: var(--danger-wash); }
.field__error { color: var(--danger); font-size: .85rem; font-weight: 600; margin: 0; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .25rem .75rem; }
.field--check input {
  width: 1.25rem; height: 1.25rem;
  margin: .2rem 0 0;
  accent-color: var(--brand);
}
.field--check label { font-weight: 400; font-size: .88rem; color: var(--ink-muted); }
.field--check .field__error { grid-column: 2; }

/* The honeypot: off the page for people, present for scripts. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: 10px;
  border-left: 4px solid var(--brand);
  background: var(--brand-wash);
  color: var(--ink);
}
.notice .icon { color: var(--brand); }
.notice--error { border-color: var(--danger); background: var(--danger-wash); color: var(--danger); font-weight: 600; }

/* --- Legal pages -------------------------------------------------------------------- */

.legal h2 {
  margin: 2.5rem 0 .9rem;
  font: 600 1.45rem/1.25 var(--font-title);
  color: var(--forest);
}
.legal { color: var(--ink-muted); }
.legal strong { color: var(--ink); }
.legal__updated { margin-top: 2.5rem; font-size: .85rem; }

.facts {
  display: grid;
  gap: .35rem 2rem;
  margin: 0;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) {
  .facts { grid-template-columns: max-content 1fr; padding: 2rem 2.25rem; }
}
.facts dt { font-weight: 700; color: var(--ink); }
.facts dd { margin: 0 0 .6rem; }
@media (min-width: 640px) {
  .facts dd { margin: 0; }
}

/* --- Error page ----------------------------------------------------------------------- */

.error-page { text-align: center; }
.error-page__code {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 10rem);
  line-height: .9;
  color: var(--sage);
}

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

.site-footer { background: var(--forest); color: var(--on-dark-muted); font-size: .93rem; }
.site-footer__grid {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 600px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .site-footer__grid { grid-template-columns: 1.3fr 1.2fr 1fr .9fr; gap: 3rem; }
}
.brand--footer { margin-bottom: 1.1rem; }
.brand--footer img { height: 80px; width: auto; }

.site-footer__title {
  margin-bottom: 1rem;
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: .05em;
}
.site-footer__list { display: grid; gap: .55rem; list-style: none; margin-bottom: 1.25rem; }
.site-footer__list li { display: flex; align-items: center; gap: .55rem; }
.site-footer__list .icon { color: var(--accent); }
.site-footer__list .icon--whatsapp { color: var(--whatsapp); }
.site-footer a { color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; }
.site-footer a:hover { color: var(--accent); }
.site-footer__muted { color: var(--on-dark-muted); }

.site-footer__bottom { border-top: 1px solid var(--line-on-dark); font-size: .82rem; }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.25rem;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { display: inline; color: var(--on-dark); font-weight: 700; }

/* --- Quick-contact bar (phones and tablets) ----------------------------------------------- */

.mobile-actions { display: none; }

@media (max-width: 999.98px) {
  :root { --actions-h: calc(4rem + env(safe-area-inset-bottom, 0px)); }

  .mobile-actions {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: .5rem;
    padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--forest) 94%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line-on-dark);
    box-shadow: 0 -10px 30px -16px rgb(0 0 0 / .55);
    transition: transform .25s ease;
  }

  .mobile-actions__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 2.9rem;
    padding-inline: .4rem;
    border: 2px solid var(--line-on-dark);
    border-radius: 999px;
    color: var(--on-dark);
    font-size: clamp(.78rem, 3.4vw, .95rem);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
  }
  .mobile-actions__item:hover { color: var(--on-dark); border-color: var(--sage); }
  .mobile-actions__item .icon { color: var(--sage); }
  .mobile-actions__item--call { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
  .mobile-actions__item--call:hover { color: var(--on-accent); border-color: var(--accent-strong); }
  .mobile-actions__item--call .icon { color: var(--on-accent); }
  .mobile-actions__item .icon--whatsapp { color: var(--whatsapp); }

  /* Out of the way while the menu is open, and while a field is being typed
     in - a keyboard lifts a fixed bar over the very field it serves. */
  body:has(.site-header.is-open) .mobile-actions,
  body:has(.form :focus) .mobile-actions { transform: translateY(110%); }

  /* Room under the footer, so its last line is never under the bar. */
  .site-footer { padding-bottom: var(--actions-h); }
}

/* --- Motion ------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .cta, .map, .skip-link { display: none !important; }
  body { background: #fff; }
  .feature__panel { box-shadow: none; color: #000; background: none; }
}