/* ==========================================================================
   Antoine — Garden
   Desktop composition (≥1280px) is a 1:1 translation of the Figma "Home"
   frame (1920 × 13579). All coordinates are Figma pixels multiplied by the
   fluid unit --u (1px at a 1920px-wide viewport).
   Tablet / mobile layouts live in responsive.css.
   ========================================================================== */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-200-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/poppins-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Georgia (the design's serif) is used when installed; Gelasio is a metric-compatible
   open-source fallback. Vertical metrics are overridden to match Georgia exactly. */
@font-face {
  font-family: 'Gelasio';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/gelasio-latin-400-italic.woff2') format('woff2');
  ascent-override: 91.7%;
  descent-override: 21.92%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Footer small print uses Gotham SSm in Figma (commercial) — Montserrat is the fallback. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  --c-deep: #003634;
  --c-deep-2: #001514;
  --c-deep-3: #001614;
  --c-ink: #012a27;
  --c-ink-alt: #012a28;
  --c-sage: #c6d6b6;
  --c-lime: #dcffbb;
  --c-gold: #b58745;
  --c-cream: #f9f9ef;
  --c-white: #ffffff;
  --c-navy: #170f49;
  --c-card-border: #eff0f6;
  --c-star: #b99d00;

  --font-sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Gelasio', 'Times New Roman', serif;
  --font-name: 'DM Sans', 'Poppins', Arial, sans-serif;
  --font-legal: 'Gotham SSm A', 'Gotham SSm', 'Montserrat', 'Poppins', Arial, sans-serif;

  --lh-sans: 1.5;        /* Poppins "auto" line height in Figma */
  --lh-serif: 1.1362;    /* Georgia "auto" line height in Figma */
  --lh-display: 1.066667; /* 80px / 75px */

  --gradient-deep: linear-gradient(166.374deg, var(--c-deep) 10.286%, var(--c-deep-2) 84.843%);

  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); /* Figma "Ease in and out" */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);       /* Figma "Ease out" */

  /* 1 Figma px (design width 1920). Refined per-container below. */
  --u: calc(100vw / 1920);
  --focus: var(--c-lime);
}

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

html {
  background: var(--c-deep);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--lh-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, blockquote, address { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ul, ol { list-style: none; }
address { font-style: normal; }
em { font-style: normal; }
strong { font-weight: 700; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

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

.skip-link {
  position: fixed;
  left: 16px; top: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--c-lime);
  color: var(--c-ink);
  border-radius: 100px;
  font-size: 16px;
  transform: translateY(-200%);
  transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* The page canvas. Being a size container lets --u use the real content width
   (100cqw excludes the scrollbar, unlike 100vw). */
.site {
  position: relative;
  background: var(--c-white);
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 1280px) {
  /* Size containment only on desktop: it would otherwise break the fixed
     mobile header (containment creates a containing block for fixed boxes). */
  .site { container-type: inline-size; }
  @supports (width: 1cqw) {
    .site { --u: calc(100cqw / 1920); }
  }
}

/* ---------- Shared pieces ---------- */
.serif-em,
.hero__title-em,
.intro__title-em,
.makeroom__title-em,
.sustainability__title-em,
.portfolio__title-em,
.about__title-em,
.reviews__title-em,
.footer__title-em,
.footer__name-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-serif);
}

.eyebrow {
  font-weight: 600;
  text-transform: uppercase;
  line-height: var(--lh-sans);
}

.rule {
  display: block;
  background: currentColor;
}

.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-lime);
  color: var(--c-ink);
  border: 0;
  border-radius: 100px;
  font-weight: 400;
  line-height: var(--lh-sans);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.btn-contact:hover { background: var(--c-white); }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--c-ink);
  border-radius: 100px;
  color: var(--c-ink);
  font-weight: 700;
  line-height: var(--lh-sans);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.btn-outline:hover { background: var(--c-ink); color: var(--c-cream); }

.leaf { pointer-events: none; user-select: none; }

.shadow-video {
  pointer-events: none;
  mix-blend-mode: multiply;
  object-fit: fill;
}

/* Light sections use a dark focus ring */
.services, .sustainability, .cream-block, .reviews, .instagram { --focus: var(--c-ink); }

/* Header state jumps that must not animate (see main.js) */
.site-header.no-anim { transition: none !important; }

/* ---------- Scroll cue (Figma Component 1: 400 ms ease-in-out ping-pong) ---------- */
.scroll-cue__arrow {
  animation: scroll-cue .4s var(--ease-in-out) infinite alternate;
}
@keyframes scroll-cue {
  from { transform: translateY(0); }
  to   { transform: translateY(15.5563px); }
}

/* ======================================================================
   DESKTOP COMPOSITION — exact Figma geometry
   ====================================================================== */
@media (min-width: 1280px) {

  /* ---------- Header ----------
     At the top of the page it sits over the hero exactly as in Figma
     (absolute, transparent). Once it has scrolled out of view it is
     re-attached as a fixed 110 px deep-green bar that slides in whenever
     the visitor scrolls up (the children keep their Figma offsets; the bar
     is simply lifted by 40 px). */
  .site-header {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: calc(190 * var(--u));
    transition: top .4s var(--ease-out), transform .4s var(--ease-out),
                background-color .35s ease, box-shadow .35s ease;
  }
  .site-header.is-detached {
    position: fixed;
    z-index: 110;
    top: calc(-40 * var(--u));
    height: calc(150 * var(--u));
    background: rgba(1, 42, 39, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 21, 20, .18);
    transform: translateY(-100%);
  }
  .site-header.is-detached:not(.is-revealed):not(:focus-within) { box-shadow: none; }
  .site-header.is-detached.is-revealed,
  .site-header.is-detached:focus-within { transform: none; }
  .site-header__logo {
    position: absolute;
    z-index: 30;
    left: calc(160 * var(--u));
    top: calc(72 * var(--u));
    width: calc(35 * var(--u));
    height: calc(45 * var(--u));
    mix-blend-mode: screen;
  }
  .site-header__logo img { width: 100%; height: 100%; }

  .site-nav__link {
    position: absolute;
    z-index: 30;
    top: calc(81 * var(--u));
    font-size: calc(18 * var(--u));
    font-weight: 200;
    line-height: var(--lh-sans);
    color: var(--c-lime);
    text-align: center;
    white-space: nowrap;
    transition: color .25s ease;
  }
  .site-nav__link:hover { color: var(--c-white); }
  /* "Recommended Plants" became "Sustainability" (2026-09-28): the links keep
     the Figma spacing and still end where the Figma menu ends (1635) */
  .site-nav__link--home           { left: calc(1023 * var(--u)); width: calc(54 * var(--u)); }
  .site-nav__link--process        { left: calc(1128 * var(--u)); width: calc(69 * var(--u)); }
  .site-nav__link--showcases      { left: calc(1248 * var(--u)); width: calc(100 * var(--u)); }
  .site-nav__link--portfolio      { left: calc(1401 * var(--u)); width: calc(71 * var(--u)); }
  .site-nav__link--sustainability { left: calc(1525 * var(--u)); width: calc(110 * var(--u)); }

  .site-header .btn-contact {
    position: absolute;
    z-index: 30;
    left: calc(1690 * var(--u));
    top: calc(70 * var(--u));
    width: calc(163 * var(--u));
    height: calc(50 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .menu-toggle,
  .mobile-menu { display: none !important; }

  /* ---------- Dark block (Figma Rectangle 1: 0 → 4098) ---------- */
  .dark-block {
    position: relative;
    z-index: 2;
    height: calc(4098 * var(--u));
    background: var(--gradient-deep);
  }

  /* ---------- Hero (0 → 969) ---------- */
  .hero {
    position: relative;
    height: calc(969 * var(--u));
  }
  .hero__kicker {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(313 * var(--u));
    font-size: calc(20 * var(--u));
    color: var(--c-white);
    white-space: nowrap;
  }
  .hero__title { color: var(--c-sage); }
  .hero__title-em {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(356 * var(--u));
    font-size: calc(99.272 * var(--u));
    white-space: nowrap;
  }
  .hero__rule {
    position: absolute;
    left: calc(564 * var(--u));
    top: calc(422 * var(--u));
    width: calc(111 * var(--u));
    height: calc(5 * var(--u));
  }
  .hero__title-main {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(454 * var(--u));
    font-size: calc(75.093 * var(--u));
    line-height: var(--lh-sans);
    white-space: nowrap;
  }
  .hero__discover {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(683 * var(--u));
    color: var(--c-white);
  }
  .hero__discover-text {
    display: block;
    font-size: calc(20 * var(--u));
    line-height: var(--lh-sans);
    white-space: nowrap;
  }
  .hero__discover .scroll-cue {
    position: absolute;
    left: 0;
    top: calc(49 * var(--u));
    width: calc(32 * var(--u));
    height: calc(62 * var(--u));
    overflow: visible;
  }
  .leaf--hero {
    position: absolute;
    left: calc(1538 * var(--u));
    top: calc(870 * var(--u));
    width: calc(299 * var(--u));
    height: calc(306 * var(--u));
  }
  .hero__shadow {
    position: absolute;
    left: 0;
    top: calc(-1 * var(--u));
    width: 100%;
    height: calc(1024 * var(--u));
    opacity: .6;
  }
  .hero__image {
    position: absolute;
    right: 0;
    top: calc(279 * var(--u));
    width: calc(910 * var(--u));
    height: calc(576 * var(--u));
  }

  /* ---------- Philosophy / intro (969 → 2048) ---------- */
  .intro {
    position: relative;
    height: calc(1079 * var(--u));
  }
  .intro__media {
    position: absolute;
    left: 0; top: 0;
    width: calc(1005 * var(--u));
    height: calc(1076 * var(--u));
    overflow: hidden;
    background: #2c3a2c;
  }
  .intro__video { width: 100%; height: 100%; object-fit: cover; }
  .intro__eyebrow {
    position: absolute;
    left: calc(1165 * var(--u));
    top: calc(318 * var(--u));
    width: calc(587 * var(--u));
    font-size: calc(20 * var(--u));
    color: var(--c-white);
  }
  .intro__title { color: var(--c-sage); }
  .intro__title-main {
    position: absolute;
    left: calc(1165 * var(--u));
    top: calc(378 * var(--u));
    font-size: calc(75 * var(--u));
    line-height: var(--lh-display);
    white-space: nowrap;
  }
  .intro__rule {
    position: absolute;
    left: calc(1169 * var(--u));
    top: calc(586 * var(--u));
    width: calc(111 * var(--u));
    height: calc(5 * var(--u));
  }
  .intro__title-em {
    position: absolute;
    left: calc(1307 * var(--u));
    top: calc(538 * var(--u));
    font-size: calc(75 * var(--u));
    white-space: nowrap;
  }
  .intro__text {
    position: absolute;
    left: calc(1165 * var(--u));
    top: calc(653 * var(--u));
    width: calc(586 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: 1.75;
    color: var(--c-white);
  }

  /* ---------- Make room (Component 8, 2048 → 3071) ---------- */
  .makeroom {
    position: relative;
    height: calc(1023 * var(--u));
    overflow: hidden;
    color: var(--c-sage);
  }
  .makeroom__eyebrow {
    position: absolute;
    right: calc(1125 * var(--u));
    top: calc(320 * var(--u));
    width: calc(587 * var(--u));
    font-size: calc(20 * var(--u));
    text-align: right;
    color: var(--c-white);
  }
  .makeroom__title-main {
    position: absolute;
    right: calc(1125 * var(--u));
    top: calc(380 * var(--u));
    font-size: calc(75 * var(--u));
    line-height: var(--lh-display);
    white-space: nowrap;
  }
  .makeroom__title-for {
    position: absolute;
    right: calc(1620 * var(--u));
    top: calc(458 * var(--u));
    font-size: calc(75 * var(--u));
    line-height: var(--lh-display);
    white-space: nowrap;
  }
  .makeroom__rule {
    position: absolute;
    left: calc(334 * var(--u));
    top: calc(503.56 * var(--u));
    width: calc(111 * var(--u));
    height: calc(5 * var(--u));
  }
  .makeroom__title-em {
    position: absolute;
    right: calc(1128 * var(--u));
    top: calc(455 * var(--u));
    font-size: calc(75 * var(--u));
    white-space: nowrap;
  }
  .makeroom__text {
    position: absolute;
    right: calc(1125 * var(--u));
    top: calc(570 * var(--u));
    width: calc(547 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: 1.75;
    text-align: right;
    color: var(--c-white);
  }
  .makeroom__image {
    position: absolute;
    left: calc(915 * var(--u));
    top: calc(67 * var(--u));
    width: calc(865 * var(--u));
    height: calc(861 * var(--u));
  }
  .makeroom__image img { width: 100%; height: 100%; object-fit: cover; }
  .makeroom__leaf {
    position: absolute;
    max-width: none;
    will-change: transform;
  }
  /* Final state = Figma "Frame 9" */
  .makeroom__leaf--a {
    left: calc(763.8195 * var(--u));
    top: calc(114.462 * var(--u));
    width: calc(112.897 * var(--u));
    height: calc(163.468 * var(--u));
    transform: translate(0, 0) rotate(24.51deg) scale(1);
  }
  .makeroom__leaf--b {
    left: calc(44.808 * var(--u));
    top: calc(525.293 * var(--u));
    width: calc(308.356 * var(--u));
    height: calc(446.482 * var(--u));
    transform: translate(0, 0) rotate(-73.4deg) scale(1);
    filter: blur(calc(6.5 * var(--u)));
  }

  /* ---------- Services / process (Component 6, 3071 → 4098) ---------- */
  .services {
    position: relative;
    height: calc(1027 * var(--u));
  }
  .services__card {
    position: absolute;
    left: calc(87 * var(--u));
    top: calc(3 * var(--u));
    width: calc(1744 * var(--u));
    height: calc(1077 * var(--u));
    border-radius: calc(50 * var(--u));
    background: var(--c-sage);
    color: var(--c-ink);
    overflow: hidden;
  }
  .services__eyebrow {
    position: absolute;
    left: 0; right: 0;
    top: calc(69 * var(--u));
    font-size: calc(20 * var(--u));
    text-align: center;
  }
  .services__line {
    position: absolute;
    left: calc(50% + 0.5 * var(--u));
    width: calc(1589 * var(--u));
    margin-left: calc(-794.5 * var(--u));
    font-size: calc(60 * var(--u));
    line-height: 1.333333;
    text-align: center;
    white-space: nowrap;
  }
  .services__line--1 { top: calc(143 * var(--u)); }
  .services__line--2 { top: calc(223 * var(--u)); }
  .services__line--3 { top: calc(303 * var(--u)); }
  .services__line .serif-em { line-height: inherit; }
  .services__body {
    position: absolute;
    left: 0;
    top: calc(460 * var(--u));
    width: 100%;
    height: calc(617 * var(--u));
  }
  .services__list {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-size: 1px calc(383 * var(--u));
    background-position: calc(450 * var(--u)) 0, calc(872 * var(--u)) 0, calc(1308 * var(--u)) 0;
  }
  .service {
    position: absolute;
    top: calc(38 * var(--u));
    width: calc(320 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .service:nth-child(1) { left: calc(78 * var(--u)); }
  .service:nth-child(2) { left: calc(501 * var(--u)); }
  .service:nth-child(3) { left: calc(924 * var(--u)); }
  .service:nth-child(4) { left: calc(1347 * var(--u)); }
  .service__title { display: flex; line-height: var(--lh-sans); white-space: nowrap; }
  .service__num { flex: none; width: calc(61 * var(--u)); }
  .service__text { margin-top: calc(42 * var(--u)); line-height: var(--lh-sans); }
  .services__btn {
    position: absolute;
    left: calc(50% + 1.5 * var(--u));
    top: calc(473 * var(--u));
    width: calc(339 * var(--u));
    height: calc(70 * var(--u));
    margin-left: calc(-169.5 * var(--u));
    font-size: calc(20 * var(--u));
  }

  /* ---------- Video section (4098 → 5120) ---------- */
  .beauty {
    position: relative;
    z-index: 1;
    height: calc(1022 * var(--u));
  }
  .beauty__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0 0 calc(50 * var(--u)) calc(50 * var(--u));
    background: var(--c-deep-3);
  }
  .beauty__video { width: 100%; height: 100%; object-fit: cover; }
  .beauty__shade {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: calc(894 * var(--u));
    background: linear-gradient(1.654deg, rgba(0, 22, 20, 0) 28.519%, var(--c-deep-3) 73.531%);
  }
  .beauty__title {
    position: absolute;
    left: calc(50% + 0.29 * var(--u));
    top: calc(161 * var(--u));
    transform: translateX(-50%);
    font-size: calc(40 * var(--u));
    line-height: 1.197239;
    text-align: center;
    white-space: nowrap;
    color: var(--c-sage);
  }
  .beauty__title .serif-em { line-height: inherit; }

  /* ---------- Sustainability (Component 2, 5120 → 6146; +114 for the story link) ---------- */
  .sustainability {
    position: relative;
    height: calc(1140 * var(--u));
    overflow-x: clip;
    color: var(--c-deep);
  }
  .sustainability__shadow {
    position: absolute;
    z-index: 0;
    left: 0;
    top: calc(-70 * var(--u));
    width: 100%;
    height: calc(1210 * var(--u));
    opacity: .3;
  }
  .sustainability__eyebrow {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(138 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .sustainability__title-main {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(187 * var(--u));
    font-size: calc(75 * var(--u));
    line-height: var(--lh-display);
    white-space: nowrap;
  }
  .sustainability__rule {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(382 * var(--u));
    width: calc(55 * var(--u));
    height: calc(5 * var(--u));
    color: var(--c-ink);
  }
  .sustainability__title-em {
    position: absolute;
    left: calc(243 * var(--u));
    top: calc(335 * var(--u));
    font-size: calc(75 * var(--u));
    white-space: nowrap;
  }
  .points {
    position: absolute;
    left: calc(845 * var(--u));
    top: calc(138 * var(--u));
    width: calc(910 * var(--u));
    height: calc(740 * var(--u));
    color: var(--c-ink);
    background-image: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 calc(129 * var(--u)), 0 calc(299 * var(--u)), 0 calc(469 * var(--u)), 0 calc(639 * var(--u));
  }
  .point {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: calc(20 * var(--u));
    line-height: var(--lh-sans);
  }
  .point--1 { top: 0; }
  .point--2 { top: calc(170 * var(--u)); }
  .point--3 { top: calc(340 * var(--u)); }
  .point--4 { top: calc(510 * var(--u)); }
  .point--5 { top: calc(680 * var(--u)); }
  .point__title {
    position: absolute;
    left: 0; top: 0;
    width: calc(260 * var(--u));
    font-size: calc(28 * var(--u)); /* enlarged on request (Figma: 20) */
    font-weight: 700;
    line-height: 1.25;
  }
  .point__text {
    margin-left: calc(300 * var(--u));
    width: calc(610 * var(--u));
  }
  /* link to the Sustainability page (added 2026-09-28, under the points) */
  .sustainability__btn {
    position: absolute;
    z-index: 2;
    left: calc(845 * var(--u));
    top: calc(970 * var(--u));
    height: calc(70 * var(--u));
    padding: 0 calc(52 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .leaf--sustainability,
  .leaf--sustainability-small { position: absolute; z-index: 3; max-width: none; }
  .leaf--sustainability {
    left: calc(155 * var(--u));
    top: calc(368 * var(--u));
    width: calc(647 * var(--u));
    height: calc(693 * var(--u));
  }
  .leaf--sustainability-small {
    left: calc(1337 * var(--u));
    top: calc(982 * var(--u));
    width: calc(343 * var(--u));
    height: calc(317 * var(--u));
  }

  /* ---------- Cream block (Rectangle 5: 6146 → 8561) ---------- */
  .cream-block {
    position: relative;
    z-index: 2;
    /* --pin (set by main.js) = the strip's horizontal overflow: extra scroll
       length during which the portfolio stays pinned and the strip slides */
    height: calc(2415 * var(--u) + var(--pin, 0px));
    background: var(--c-cream);
  }
  .portfolio {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: calc(1024 * var(--u) + var(--pin, 0px));
  }
  .portfolio__pin {
    position: sticky;
    /* pinned at the top; on short screens lifted so the strip stays in view */
    top: min(0px, calc(100vh - 1024 * var(--u)));
    height: calc(1024 * var(--u));
  }
  .portfolio.is-pinned .portfolio__scroller { overflow: hidden; }
  .portfolio.is-pinned .portfolio__track { will-change: transform; }
  .portfolio__title { color: var(--c-ink-alt); }
  .portfolio__title-main {
    position: absolute;
    left: calc(639 * var(--u));
    top: calc(97.77 * var(--u));
    font-size: calc(55 * var(--u));
    line-height: var(--lh-sans);
    white-space: pre;
  }
  .portfolio__title-em {
    position: absolute;
    left: calc(1004 * var(--u));
    top: calc(88 * var(--u));
    font-size: calc(75.093 * var(--u));
    white-space: nowrap;
  }
  .portfolio__scroller {
    position: absolute;
    left: 0;
    top: calc(276 * var(--u));
    width: 100%;
    height: calc(748 * var(--u));
  }
  .portfolio__track {
    gap: calc(50 * var(--u));
    height: 100%;
  }
  /* 2026-09-30: every piece is a garden with its caption under the photo —
     the wide pieces too, in the room the strip keeps under them (748 = 21 +
     638 + 22 + 67) — and the strip ends with a round link to all of them */
  .pf--wide { width: calc(1013 * var(--u)); }
  .pf--path { margin-left: calc(-456 * var(--u)); margin-top: calc(21 * var(--u)); }
  .pf--villa { margin-top: calc(21 * var(--u)); }
  .pf--path > .pf__media,
  .pf--villa > .pf__media { height: calc(638 * var(--u)); }
  /* the first piece starts half off the left edge: its caption starts at the edge */
  .pf--path > .pf__caption { margin-left: calc(456 * var(--u)); }
  .pf--olive > .pf__media { height: calc(659 * var(--u)); }
  .pf--card { width: calc(705 * var(--u)); padding-top: calc(97 * var(--u)); }
  .pf--card > .pf__media { height: calc(562 * var(--u)); }
  .pf__caption {
    position: relative;
    height: calc(67 * var(--u));
    margin-top: calc(22 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .pf__title { position: absolute; left: 0; top: 0; max-width: 58%; white-space: nowrap; }
  .pf__year { position: absolute; right: 0; top: 0; max-width: 42%; white-space: nowrap; }
  .pf__text {
    position: absolute;
    left: 0;
    top: calc(37 * var(--u));
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pf--more { width: calc(460 * var(--u)); height: 100%; }
  .pf-more { width: calc(300 * var(--u)); font-size: calc(24 * var(--u)); }
  .pf-more__arrow { width: calc(40 * var(--u)); }

  .about {
    position: absolute;
    left: 0;
    top: calc(1296 * var(--u) + var(--pin, 0px));
    width: 100%;
    height: calc(1119 * var(--u));
  }
  .about__image {
    position: absolute;
    left: 0; top: 0;
    width: calc(835 * var(--u));
    height: calc(947 * var(--u));
    overflow: hidden;
  }
  .about__image img { width: 100%; height: 100%; object-fit: cover; }
  .about__eyebrow {
    position: absolute;
    right: calc(165 * var(--u));
    top: calc(71 * var(--u));
    width: calc(640 * var(--u));
    font-size: calc(20 * var(--u));
    text-align: right;
  }
  .about__title-main {
    position: absolute;
    right: calc(165 * var(--u));
    top: calc(144 * var(--u));
    font-size: calc(75 * var(--u));
    line-height: var(--lh-display);
    white-space: nowrap;
  }
  .about__rule {
    position: absolute;
    left: calc(1398 * var(--u));
    top: calc(255 * var(--u));
    width: calc(77 * var(--u));
    height: calc(5 * var(--u));
  }
  .about__title-em {
    position: absolute;
    left: calc(1492 * var(--u));
    top: calc(210 * var(--u));
    font-size: calc(75 * var(--u));
    white-space: nowrap;
  }
  .about__bio {
    position: absolute;
    left: calc(942 * var(--u));
    top: calc(355 * var(--u));
    width: calc(812 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: 1.75;
  }
  .about__bio p + p { margin-top: calc(35 * var(--u)); }
  .about__btn {
    position: absolute;
    left: calc(942 * var(--u));
    top: calc(799 * var(--u));
    width: calc(339 * var(--u));
    height: calc(70 * var(--u));
    font-size: calc(20 * var(--u));
  }

  /* ---------- Before / after (8561 → 9324) ---------- */
  .compare { height: calc(763 * var(--u)); }
  /* before and after are the same drone shot: same box, same crop */
  .compare__after { top: 0; height: 100%; }
  .compare__before img,
  .compare__before::after {
    left: 0;
    top: 0;
    width: calc(1920 * var(--u));
    height: 100%;
  }
  .compare__label { top: calc(37 * var(--u)); font-size: calc(20 * var(--u)); }
  .compare__handle { width: clamp(56px, calc(80 * var(--u)), 80px); --size: clamp(54px, calc(74 * var(--u)), 74px); }

  /* ---------- Reviews (Component 7, 9324 → 10961) ---------- */
  .reviews {
    position: relative;
    height: calc(1637 * var(--u));
    overflow: hidden;
  }
  .reviews__eyebrow {
    position: absolute;
    left: calc(61 * var(--u));
    top: calc(51 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .reviews__title-main {
    position: absolute;
    left: calc(61 * var(--u));
    top: calc(100 * var(--u));
    font-size: calc(75 * var(--u));
    line-height: var(--lh-display);
    white-space: nowrap;
  }
  .reviews__rule {
    position: absolute;
    left: calc(61 * var(--u));
    top: calc(220 * var(--u));
    width: calc(55 * var(--u));
    height: calc(5 * var(--u));
  }
  .reviews__title-em {
    position: absolute;
    left: calc(139 * var(--u));
    top: calc(173 * var(--u));
    font-size: calc(75 * var(--u));
    white-space: nowrap;
  }
  .reviews__score {
    position: absolute;
    left: calc(61 * var(--u));
    top: calc(358 * var(--u));
    font-size: calc(25.814 * var(--u));
    white-space: nowrap;
  }
  .reviews__stars {
    position: absolute;
    left: calc(61 * var(--u));
    top: calc(410 * var(--u));
    width: calc(222 * var(--u));
    height: calc(35 * var(--u));
  }
  .reviews__btn {
    position: absolute;
    left: calc(61 * var(--u));
    top: calc(497 * var(--u));
    height: calc(70 * var(--u));
    padding: 0 calc(40 * var(--u));
    gap: calc(14 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .reviews__google { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .review {
    position: absolute;
    width: calc(540 * var(--u));
    /* Figma centres the content inside the 1px stroke: offset = stroke + padding − overflow/2 */
    padding: calc(30 * var(--u)) calc(27.5 * var(--u) - 1px);
    border-radius: calc(12 * var(--u));
    box-shadow: 0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(8, 15, 52, .04);
  }
  .review--1 { left: calc(1310 * var(--u)); top: calc(100 * var(--u)); padding-left: calc(30 * var(--u) - 1px); padding-right: calc(30 * var(--u) - 1px); }
  .review--2 { left: calc(722 * var(--u));  top: calc(329 * var(--u)); }
  .review--3 { left: calc(1310 * var(--u)); top: calc(602 * var(--u)); }
  .review--4 { left: calc(722 * var(--u));  top: calc(718 * var(--u)); }
  .review--5 { left: calc(1310 * var(--u)); top: calc(1064 * var(--u)); }
  .review__quote {
    width: calc(480 * var(--u));
    margin-left: calc(5 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.5625;
  }
  .review--1 .review__quote { margin-left: 0; }
  .review__author {
    height: calc(72 * var(--u));
    margin-top: calc(40 * var(--u));
  }
  .review__avatar { width: calc(72 * var(--u)); height: calc(72 * var(--u)); }
  .review__avatar--initial { font-size: calc(32 * var(--u)); }
  .review__name {
    left: calc(84 * var(--u));
    top: calc(10 * var(--u));
    width: calc(192.354 * var(--u));
    font-size: calc(18 * var(--u));
  }
  .review__stars {
    left: calc(84 * var(--u));
    top: calc(40 * var(--u));
    width: calc(134 * var(--u));
    height: calc(21.126 * var(--u));
  }

  /* ---------- Instagram (10961 → 12128) ---------- */
  .instagram {
    position: relative;
    height: calc(1167 * var(--u));
  }
  .instagram__title {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(99 * var(--u));
    gap: calc(15 * var(--u));
    font-size: calc(20 * var(--u));
  }
  .instagram__icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .instagram__grid {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(175 * var(--u));
    grid-template-columns: repeat(4, calc(383 * var(--u)));
    column-gap: calc(19.6667 * var(--u));
    row-gap: calc(22 * var(--u));
  }
  .instagram__grid img { width: calc(383 * var(--u)); height: calc(434 * var(--u)); }

  /* ---------- Footer / contact (12128 → 13579) ---------- */
  .site-footer {
    position: relative;
    height: calc(1451 * var(--u));
  }
  .footer__image {
    position: absolute;
    left: 0;
    top: calc(174 * var(--u));
    width: calc(649 * var(--u));
    height: calc(663 * var(--u));
    overflow: hidden;
  }
  .footer__image img { width: 100%; height: 100%; object-fit: cover; }
  .footer__title-a,
  .footer__title-b {
    position: absolute;
    left: calc(722 * var(--u));
    font-size: calc(75 * var(--u));
    line-height: var(--lh-display);
    white-space: nowrap;
  }
  .footer__title-a { top: calc(167 * var(--u)); }
  .footer__title-b { top: calc(373 * var(--u)); }
  .footer__rule {
    position: absolute;
    left: calc(866 * var(--u));
    top: calc(599 * var(--u));
    width: calc(137 * var(--u));
    height: calc(5 * var(--u));
  }
  .footer__title-em {
    position: absolute;
    left: calc(1041 * var(--u));
    top: calc(551 * var(--u));
    font-size: calc(75 * var(--u));
    white-space: nowrap;
  }
  .footer__contact {
    position: absolute;
    left: calc(717 * var(--u));
    top: calc(703 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: 2;
  }
  .footer__name-em {
    position: absolute;
    left: calc(1069 * var(--u));
    top: calc(911 * var(--u));
    font-size: calc(194.772 * var(--u));
  }
  .footer__name-main {
    position: absolute;
    right: calc(165 * var(--u));
    top: calc(1089 * var(--u));
    font-size: calc(188.7 * var(--u)); /* "Garden Designer" (2026-09-29): as wide as "Hadjialexandrou" was (193.796) */
    line-height: 1.066664;
  }
  .footer__shadow {
    position: absolute;
    z-index: 1;
    left: 0;
    top: calc(355 * var(--u));
    width: 100%;
    height: calc(1096 * var(--u));
    opacity: .6;
  }
  .footer__copy {
    position: absolute;
    left: calc(165 * var(--u));
    top: calc(1362 * var(--u));
    font-size: calc(14 * var(--u));
  }
  .footer__dev { margin-left: calc(11 * var(--u)); }
  .footer__dev img { width: calc(91.052 * var(--u)); height: calc(14.107 * var(--u)); }
  .footer__legal-item {
    position: absolute;
    top: calc(1362 * var(--u));
    font-size: calc(14 * var(--u));
  }
  .footer__legal-item--privacy { right: calc(396 * var(--u)); }
  .footer__legal-item--terms   { right: calc(168 * var(--u)); }
  .leaf--contact,
  .leaf--contact-small { position: absolute; z-index: 3; max-width: none; }
  .leaf--contact {
    left: calc(1300 * var(--u));
    top: calc(184 * var(--u));
    width: calc(620 * var(--u));
    height: calc(689 * var(--u));
  }
  .leaf--contact-small {
    left: calc(266 * var(--u));
    top: calc(721 * var(--u));
    width: calc(352 * var(--u));
    height: calc(345 * var(--u));
  }
}

/* ======================================================================
   Component-level styles shared by all layouts
   ====================================================================== */
.portfolio__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.portfolio__scroller::-webkit-scrollbar { display: none; }
.portfolio__scroller.is-dragging { cursor: grabbing; }
.portfolio__scroller.is-dragging * { pointer-events: none; }
.portfolio__track { display: flex; align-items: flex-start; width: max-content; }
.pf { flex: none; }
.pf__media { overflow: hidden; }
.pf__media > img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.pf__title { font-weight: 700; }
.pf__year { text-align: right; }
.pf__caption { color: var(--c-ink); line-height: var(--lh-sans); }
/* each piece opens its garden's page (2026-09-30): a link laid over the whole
   piece — the card's link is the one for keyboards and screen readers */
.pf { position: relative; }
.pf__hit { position: absolute; inset: 0; z-index: 1; }
.pf__hit:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 6px; }
/* the end of the strip: a round link to all the gardens on Showcases (2026-09-30) */
.pf--more { display: grid; place-items: center; }
.pf-more {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .3em;
  aspect-ratio: 1 / 1;
  border-radius: 0; /* square like the photos (Kotsios, 2026-10-02; was a circle) */
  background: var(--c-deep);
  color: var(--c-lime);
  line-height: 1.25;
  text-align: center;
  transition: background-color .35s ease, scale .6s cubic-bezier(.16, 1, .3, 1);
  -webkit-user-drag: none;
}
.pf-more__label { max-width: 7em; font-weight: 600; }
.pf-more__count { font-size: .78em; color: var(--c-sage); font-variant-numeric: tabular-nums; }
.pf-more__arrow { display: block; width: 36px; margin-top: .35em; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.pf-more__arrow svg { display: block; width: 100%; height: auto; }
.pf-more:hover { background: var(--c-ink); scale: 1.04; }
.pf-more:hover .pf-more__arrow { transform: translateX(5px); }
.pf-more:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 6px; }

/* Mouse-follower over the portfolio strip (reference: bartoszkolenda.com) */
.drag-cursor {
  --size: clamp(104px, calc(192 * var(--u)), 192px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: rgba(220, 255, 187, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-ink);
  font-size: clamp(15px, calc(20.8 * var(--u)), 21px);
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  scale: 0;
  transition: scale .3s var(--ease-out), opacity .2s ease;
  will-change: translate;
}
.drag-cursor.is-visible { opacity: 1; scale: 1; }
.drag-cursor.is-visible.is-active { scale: .88; }
.portfolio__scroller.has-cursor,
.portfolio__scroller.has-cursor * { cursor: none; }

/* Before / after */
.compare {
  position: relative;
  overflow: hidden;
  background: #1e2a1c;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  --pos: 50%;
  --gap: 0px;
}
.compare__after { position: absolute; left: 0; width: 100%; }
.compare__after img { width: 100%; height: 100%; object-fit: cover; }
.compare__after img,
.compare__before img { object-position: 50% 45%; } /* keep the two photos aligned */
.compare__before {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: calc(var(--pos) - var(--gap));
  overflow: hidden;
}
.compare__before img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.compare__before::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, .5);
}
.compare__after-label {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: calc(var(--pos) + var(--gap));
  overflow: hidden;
  pointer-events: none;
}
.compare__label {
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  font-weight: 700;
  line-height: var(--lh-sans);
  color: var(--c-lime);
  white-space: nowrap;
  pointer-events: none;
}
.compare__handle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: var(--pos);
  height: 100%;
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: none;
  --focus: var(--c-lime);
}
.compare__handle:focus-visible { outline: none; }
/* a hairline divider and a frosted glass button with two fine arrows;
   it turns lime while you hover, drag or focus it */
.compare__line {
  --gap-half: calc(var(--size, 54px) / 2 + 8px); /* the line stops short of the button */
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 0 12px rgba(0, 0, 0, .3);
  -webkit-mask: linear-gradient(#000 calc(50% - var(--gap-half)), transparent 0 calc(50% + var(--gap-half)), #000 0);
  mask: linear-gradient(#000 calc(50% - var(--gap-half)), transparent 0 calc(50% + var(--gap-half)), #000 0);
}
.compare__button {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--size, 54px);
  height: var(--size, 54px);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: rgba(1, 42, 39, .3);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 21, 20, .28);
  color: var(--c-white);
  transform: translate(-50%, -50%);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background-color .3s ease, border-color .3s ease, color .3s ease;
}
.compare__arrows {
  width: 46%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compare__arrow { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.compare.is-dragging .compare__button,
.compare__handle:focus-visible .compare__button {
  border-color: var(--c-lime);
  background: var(--c-lime);
  color: var(--c-ink);
  transform: translate(-50%, -50%) scale(1.06);
}
.compare.is-dragging .compare__arrow--l,
.compare__handle:focus-visible .compare__arrow--l { transform: translateX(-2.5px); }
.compare.is-dragging .compare__arrow--r,
.compare__handle:focus-visible .compare__arrow--r { transform: translateX(2.5px); }
.compare__handle:focus-visible .compare__button { box-shadow: 0 0 0 3px rgba(220, 255, 187, .45), 0 10px 30px rgba(0, 21, 20, .28); }
@media (hover: hover) and (pointer: fine) {
  .compare__handle:hover .compare__button {
    border-color: var(--c-lime);
    background: var(--c-lime);
    color: var(--c-ink);
    transform: translate(-50%, -50%) scale(1.06);
  }
  .compare__handle:hover .compare__arrow--l { transform: translateX(-2.5px); }
  .compare__handle:hover .compare__arrow--r { transform: translateX(2.5px); }
}
.compare.is-animating .compare__before,
.compare.is-animating .compare__after-label,
.compare.is-animating .compare__handle {
  transition: width .3s var(--ease-out), left .3s var(--ease-out);
}
/* a gentle nudge when the section first comes into view (main.js) */
.compare.is-hinting .compare__before,
.compare.is-hinting .compare__after-label,
.compare.is-hinting .compare__handle {
  transition: width .9s cubic-bezier(.45, 0, .2, 1), left .9s cubic-bezier(.45, 0, .2, 1);
}

/* Reviews */
.reviews { background: var(--c-sage); color: var(--c-ink); }
.reviews__score { font-weight: 600; text-transform: uppercase; line-height: var(--lh-sans); }
.review {
  background: var(--c-cream);
  border: 1px solid var(--c-card-border);
}
.review__quote { color: var(--c-ink); }
.review__author { position: relative; }
.review__avatar { position: absolute; left: 0; top: 0; border-radius: 50%; }
.review__name {
  position: absolute;
  font-family: var(--font-name);
  font-weight: 700;
  line-height: 1.111111;
  color: var(--c-navy);
}
.review__stars { position: absolute; max-width: none; }
/* "All reviews on Google" (opens the reviews on Google Maps) */
.reviews__btn { gap: 12px; }
.reviews__google { flex: none; width: 22px; height: 22px; }
/* reviewers without a profile photo get their initial, as on Google */
.review__avatar--initial {
  display: grid;
  place-items: center;
  background: var(--c-ink);
  color: var(--c-lime);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  user-select: none;
}

/* Instagram: each tile opens its post, the title opens the profile */
.instagram__title { display: flex; align-items: center; color: var(--c-ink); }
.instagram__profile {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  color: inherit;
  text-decoration: none;
}
.instagram__profile span:not(.visually-hidden) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s var(--ease-out);
}
.instagram__profile:hover span:not(.visually-hidden) { background-size: 100% 1px; }
.instagram__grid { display: grid; }
.instagram__grid li { overflow: hidden; }
.instagram__post {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--c-white);
}
.instagram__post::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 42, 39, .28);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.instagram__post:hover::after { opacity: 1; }
.instagram__post:focus-visible { outline-offset: -4px; }
.instagram__grid img { object-fit: cover; }
.instagram__badge {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  fill: currentColor;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
@media (hover: none) {
  .instagram__post:hover::after { opacity: 0; }
}

/* Footer */
.site-footer {
  background: linear-gradient(355.094deg, var(--c-deep) 10.286%, var(--c-deep-2) 84.843%);
  color: var(--c-sage);
}
.footer__contact { font-weight: 500; color: var(--c-white); }
.footer__contact a { display: block; width: max-content; transition: color .25s ease; }
.footer__contact a:hover { color: var(--c-lime); }
.footer__name { color: #000; pointer-events: none; user-select: none; }
.footer__name-em,
.footer__name-main { display: block; opacity: .3; white-space: nowrap; }
.footer__copy,
.footer__legal-item {
  font-family: var(--font-legal);
  font-weight: 500;
  line-height: 1.832029;
  white-space: nowrap;
}
.footer__copy { display: flex; align-items: center; color: var(--c-white); }
.footer__dev { display: inline-flex; align-items: center; }
.footer__dev img { transition: opacity .25s ease; }
.footer__dev:hover img { opacity: .75; }
.footer__legal-item { color: var(--c-sage); }
/* the legal pages, 2026-09-30 */
a.footer__legal-item { transition: color .25s ease; }
a.footer__legal-item:hover { color: var(--c-lime); }

/* ======================================================================
   Reveal animations (Figma prototype "Mouse enter" → smart animate).
   Initial states only apply when JS is available; .is-in plays the
   sequence with the exact Figma durations, easings and delays.
   ====================================================================== */

/* Make room — Frame 8 → Frame 9, linear 1000 ms */
.makeroom__eyebrow,
.makeroom__title,
.makeroom__text,
.makeroom__image,
.makeroom__leaf { transition: opacity 1s linear, transform 1s linear, filter 1s linear; }
@media (min-width: 1280px) {
  .js .makeroom:not(.is-in) .makeroom__eyebrow,
  .js .makeroom:not(.is-in) .makeroom__title,
  .js .makeroom:not(.is-in) .makeroom__text { opacity: 0; }
  .js .makeroom:not(.is-in) .makeroom__image { transform: translateX(calc(1005 * var(--u))); }
  .js .makeroom:not(.is-in) .makeroom__leaf--a {
    transform: translate(calc(-116.238 * var(--u)), calc(203.184 * var(--u))) rotate(-57.13deg) scale(2.4483);
  }
  .js .makeroom:not(.is-in) .makeroom__leaf--b {
    transform: translate(calc(284.949 * var(--u)), calc(-197.819 * var(--u))) rotate(25.5deg) scale(.6373);
    filter: blur(calc(10.2 * var(--u)));
  }
}

/* Services — Frame 8 → 9 → 10 → 11 → 12 (linear 400/400/400/500 ms) */
.services__line { transition: opacity .4s linear, transform .4s linear; }
.services__line--2 { transition-delay: .4s; }
.services__line--3 { transition-delay: .8s; }
.services__body { transition: transform .5s linear 1.2s; }
@media (min-width: 1280px) {
  .js .services:not(.is-in) .services__line { opacity: 0; }
  .js .services:not(.is-in) .services__line--1 { transform: translateY(calc(270 * var(--u))); }
  .js .services:not(.is-in) .services__line--2 { transform: translateY(calc(190 * var(--u))); }
  .js .services:not(.is-in) .services__line--3 { transform: translateY(calc(110 * var(--u))); }
  .js .services:not(.is-in) .services__body { transform: translateY(calc(617 * var(--u))); }
}

/* Sustainability — the points slide in from the right (Figma: Frame 6 → Frame 7 →
   Variant 3 … 6), driven by scroll position: main.js sets --p (0 → 1) on each
   point while it travels from the bottom edge to 65 % of the viewport.
   Without JS --p falls back to 1 (points in place). */
.js .point {
  --slide: 100vw;
  transform: translateX(calc(var(--slide) * (1 - var(--p, 1))));
  will-change: transform;
}
@media (min-width: 1280px) {
  .js .point { --slide: calc(1075 * var(--u)); } /* Figma start: right edge of the frame */
}

/* Reviews — the cards fade in and glide up into place as they scroll into view
   (Figma Frame 8 → 13, now scroll-linked and eased in time): main.js sets --ty
   (offset) and --p (opacity). Without JS both fall back to the resting state. */
.js .review { transform: translate3d(0, var(--ty, 0px), 0); opacity: var(--p, 1); }

/* Photo frames (scroll zoom, see main.js): the picture moves inside a clipped frame */
.hero__image,
.makeroom__image { overflow: hidden; }
.hero__image > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__image { transform-origin: 100% 50%; } /* grows out from the right edge */
@media (prefers-reduced-motion: no-preference) {
  /* first-paint state of the hero zoom (main.js takes over) */
  .js .hero__image { scale: .9; }
  .js .hero__image > img { transform: scale(1.12); }
}
[data-zoom] > img,
[data-zoom] > video { transform-origin: 50% 50%; }

/* Sticky actions: "Send inquiry" (bottom left) + back to top (bottom right) */
.sticky-actions {
  --edge: clamp(16px, calc(40 * var(--u)), 40px);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 max(var(--edge), env(safe-area-inset-right)) max(var(--edge), env(safe-area-inset-bottom)) max(var(--edge), env(safe-area-inset-left));
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}
/* near the end of the page: in the page, just above the copyright line (main.js sets top) */
.sticky-actions.is-docked { position: absolute; bottom: auto; }
.sticky-cta,
.to-top {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(40px, calc(44 * var(--u)), 44px);
  border: 0;
  border-radius: 100px;
  background: var(--c-lime);
  color: var(--c-ink);
  box-shadow: 0 6px 18px rgba(0, 21, 20, .16);
  transition: background-color .25s ease, transform .3s var(--ease-out), opacity .3s ease, visibility .3s;
  --focus: var(--c-ink);
}
.sticky-cta {
  gap: clamp(20px, calc(34 * var(--u)), 34px);
  padding: 0 clamp(16px, calc(18 * var(--u)), 18px) 0 clamp(18px, calc(20 * var(--u)), 20px);
  font-size: clamp(12px, calc(13 * var(--u)), 13px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.sticky-cta__icon { flex: none; width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.sticky-cta:hover { background: var(--c-white); }
.sticky-cta:hover .sticky-cta__icon { transform: translate(2px, -2px); }
.to-top {
  width: clamp(40px, calc(44 * var(--u)), 44px);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.9);
}
.to-top svg { width: 16px; height: 16px; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-white); }
body.menu-open .sticky-actions { opacity: 0; visibility: hidden; }

/* The travelling leaf (js/leaf.js) — replaces the static hero leaf when motion is allowed */
.flyleaf-on .leaf--hero { visibility: hidden; }
.flyleaf {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 95;
  pointer-events: none;
  will-change: transform;
}
.flyleaf__shadow,
.flyleaf__body,
.flyleaf__half {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
}
.flyleaf__shadow { opacity: 0; will-change: transform, opacity; }
.flyleaf__body { will-change: transform; }
.flyleaf__half { backface-visibility: visible; will-change: transform; }
.flyleaf__half--l { clip-path: inset(0 49.6% 0 0); } /* halves overlap on the midrib: no seam */
.flyleaf__half--r { clip-path: inset(0 0 0 49.6%); }
@media (max-width: 1023.98px) {
  .flyleaf__shadow { display: none; }
}
@media (min-width: 1024px) {
  /* the moving leaf lands in their place instead (js/leaf.js) */
  .flyleaf-on .leaf--sustainability,
  .flyleaf-on .leaf--contact,
  .flyleaf-on .makeroom__leaf--a { visibility: hidden; }
}

/* Hover leaves: come into focus and rustle under the mouse (js/main.js) */
.hover-leaf__body {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.hover-leaf__body img {
  width: 100%;
  height: 100%;
  max-width: none;
  -webkit-user-drag: none;
}
.hover-leaf__body .hover-leaf__sharp {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.is-awake > .hover-leaf__body { will-change: transform; }
.is-awake > .hover-leaf__body img { will-change: opacity; }

/* ---------- Loading screen (markup at the top of <body>, logic in main.js) ----------
   The logo mark grows (stem, then crown) and sways gently, the tagline rises in;
   then the panel lifts away with a curved edge and the hero, the header and the
   leaf come in. (2026-09-29, Kotsios: no loading bar, a bigger mark and tagline —
   the bar, the name and the % stay in the markup for main.js but are not shown.) */
.loader { display: none; }
.js .loader {
  --loader-curve: clamp(48px, min(16vh, 22vw), 200px); /* a gentler curve on narrow screens */
  --loader-gutter: clamp(20px, 5vw, 80px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  color: var(--c-sage);
  font-family: var(--font-sans);
  /* never outstays a script that failed to load */
  animation: loader-failsafe .6s ease 9s forwards;
}
.loader__panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + var(--loader-curve)); /* the curved edge waits below the screen */
  background: linear-gradient(170deg, var(--c-deep) 12%, var(--c-deep-2) 88%);
  border-radius: 0 0 50% 50% / 0 0 var(--loader-curve) var(--loader-curve);
  will-change: transform;
}
.loader__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--loader-curve);
}
.loader__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--loader-gutter) 5vh;
  text-align: center;
}
.loader__mark {
  width: auto;
  height: clamp(92px, 15vh, 160px);
  overflow: visible;
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: loader-sway 3.4s ease-in-out infinite alternate;
}
.loader__stem,
.loader__crown {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.loader__stem {
  transform: scaleY(0);
  animation: loader-grow .75s cubic-bezier(.33, .8, .3, 1) .15s forwards;
}
.loader__crown {
  transform: scale(0);
  animation: loader-grow .95s cubic-bezier(.3, 1.45, .55, 1) .55s forwards;
}
.loader__tagline {
  margin-top: clamp(26px, 5vh, 56px);
  font-weight: 200;
  /* "made to be lived in." is 9.5em wide: it always fits on one line */
  font-size: min(clamp(30px, calc(1.8vw + 26px), 62px), calc((100vw - 2 * var(--loader-gutter)) / 10));
  line-height: 1.2;
}
.loader__line {
  display: block;
  padding-bottom: .14em;
  clip-path: inset(-1em -1em 0 -1em); /* the words rise from behind this edge */
}
.loader__line > span {
  display: inline-block;
  translate: 0 115%;
}
.fonts-ready .loader__line > span { animation: loader-rise 1.05s cubic-bezier(.16, 1, .3, 1) .8s forwards; }
.fonts-ready .loader__line + .loader__line > span { animation-delay: .9s; }
.loader__em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3em;
  line-height: 1;
}
.loader__rule {
  display: inline-block;
  width: 1.25em;
  height: max(2px, .055em);
  margin-left: .35em;
  vertical-align: .3em;
  background: currentColor;
}
.loader__foot { display: none; } /* the loading bar, the name and the % (main.js still fills them) */

/* leaving: the content drifts up and fades while the panel lifts away */
.loader.is-leaving { pointer-events: none; }
.loader.is-leaving .loader__panel {
  transform: translate3d(0, -100%, 0);
  transition: transform 1.1s cubic-bezier(.76, 0, .24, 1) .1s;
}
.loader.is-leaving .loader__content {
  opacity: 0;
  translate: 0 -6vh;
  transition: opacity .5s ease, translate .9s cubic-bezier(.6, 0, .4, 1);
}

/* later loads in the same visit: no growing, a shorter stay and a quicker lift */
.loader-quick .loader__stem,
.loader-quick .loader__crown { animation: none; transform: none; }
.loader-quick.fonts-ready .loader__line > span { animation-duration: .7s; animation-delay: .05s; }
.loader-quick.fonts-ready .loader__line + .loader__line > span { animation-delay: .12s; }
.loader-quick .loader.is-leaving .loader__panel { transition-duration: .8s; transition-delay: 0s; }

@keyframes loader-grow { to { transform: none; } }
@keyframes loader-sway { from { rotate: -1.6deg; } to { rotate: 1.6deg; } }
@keyframes loader-rise { to { translate: 0 0; } }
@keyframes loader-fade { to { opacity: 1; } }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

/* The first screen comes in as the panel lifts (translate only on the title:
   it stays measurable for LCP). main.js swaps .is-loading for .is-revealing. */
.js { --reveal-at: .38s; }
.js.loader-quick { --reveal-at: .12s; }
@media (prefers-reduced-motion: no-preference) {
  .is-loading .hero__kicker,
  .is-loading .hero__title-em,
  .is-loading .hero__rule,
  .is-loading .hero__title-main,
  .is-loading .hero__discover { translate: 0 44px; }
  .is-loading .hero__kicker,
  .is-loading .hero__discover,
  .is-loading .site-header,
  .is-loading .sticky-cta { opacity: 0; }
  .is-revealing .hero__kicker {
    animation: hero-rise 1.3s cubic-bezier(.16, 1, .3, 1) var(--reveal-at) both,
               hero-fade .9s ease var(--reveal-at) both;
  }
  .is-revealing .hero__title-em { animation: hero-rise 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-at) + .07s) both; }
  .is-revealing .hero__rule { animation: hero-rise 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-at) + .12s) both; }
  .is-revealing .hero__title-main { animation: hero-rise 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-at) + .16s) both; }
  .is-revealing .hero__discover {
    animation: hero-rise 1.3s cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-at) + .26s) both,
               hero-fade .9s ease calc(var(--reveal-at) + .26s) both;
  }
  .is-revealing .site-header { animation: header-in .9s cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-at) + .3s) both; }
  .is-revealing .sticky-cta { animation: cta-in .8s cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-at) + .6s) both; }
}
@keyframes hero-rise { from { translate: 0 44px; } to { translate: 0 0; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes header-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes cta-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Page transitions (main.js) ----------
   A link to another page draws the green panel up over the page (curved top
   edge); the next page opens under the loading screen's panel in "curtain"
   mode (no logo, no progress line) and lifts it the same way. */
.page-cover {
  --cover-curve: clamp(48px, min(16vh, 22vw), 200px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.page-cover__panel {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--cover-curve));
  width: 100%;
  height: calc(100% + var(--cover-curve));
  /* the same gradient, at the same place on the screen, as the loading panel */
  background: var(--c-deep) linear-gradient(170deg, var(--c-deep) 12%, var(--c-deep-2) 88%) 0 var(--cover-curve) / 100% 100% no-repeat;
  border-radius: 50% 50% 0 0 / var(--cover-curve) var(--cover-curve) 0 0;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}
.page-cover.is-active { visibility: visible; pointer-events: auto; }
.page-cover.is-active .page-cover__panel {
  transform: translate3d(0, 0, 0);
  transition: transform .62s cubic-bezier(.76, 0, .24, 1);
}
.loader-curtain .loader__content { display: none; }
.loader-curtain .loader { animation-delay: 4s; }
.loader-curtain .loader.is-leaving .loader__panel { transition-duration: .95s; transition-delay: 0s; }
.js.loader-curtain { --reveal-at: .1s; }

/* The page you are on */
.site-nav__link[aria-current="page"] { color: var(--c-white); }
.site-nav__link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-lime);
  transform: translateX(-50%);
}
.mobile-menu__nav a[aria-current="page"]:not(.mobile-menu__contact) { color: var(--c-white); }

@media print {
  .loader,
  .page-cover { display: none !important; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flyleaf { display: none; }
  .flyleaf-on .leaf--hero,
  .flyleaf-on .leaf--sustainability,
  .flyleaf-on .leaf--contact,
  .flyleaf-on .makeroom__leaf--a { visibility: visible; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  /* the loading screen stays still and simply fades out */
  .loader__mark,
  .loader__stem,
  .loader__crown,
  .loader__line > span,
  .loader__foot { animation: none !important; transform: none !important; translate: none !important; opacity: 1; }
  .loader.is-leaving { opacity: 0; transition: opacity .45s ease !important; }
  .loader.is-leaving .loader__panel { transform: none; }
  .loader.is-leaving .loader__content { opacity: 1; translate: none; }
}

/* ======================================================================
   Antoine's feedback (2026-09-30)
   ====================================================================== */

/* His own logo — ANTOINE, the I a tree, GARDEN DESIGNER — instead of the tree alone
   (assets/images/logo-antoine.svg: cream letters, the gold of his logo) */
.site-header__logo img { display: block; }
@media (min-width: 1280px) {
  .site-header__logo {
    top: calc(64 * var(--u));
    width: calc(216 * var(--u));
    height: calc(57.9 * var(--u));
  }
}

/* The loading screen shows the logo: the letters come in one by one, the tree of
   the I grows (stem, then crown) and sways, then GARDEN DESIGNER and the tagline */
.js .loader { --c-logo-gold: #c9974f; }
.loader__logo {
  display: block;
  width: min(80vw, 470px);
  height: auto;
  overflow: visible;
}
.loader__letters {
  fill: none;
  stroke: var(--c-cream);
  stroke-width: 2.2;
  stroke-miterlimit: 10;
}
.loader__letters > * { opacity: 0; animation: loader-fade .7s ease forwards; }
.loader__letters > :nth-child(1) { animation-delay: .2s; }
.loader__letters > :nth-child(2) { animation-delay: .28s; }
.loader__letters > :nth-child(3) { animation-delay: .36s; }
.loader__letters > :nth-child(4) { animation-delay: .44s; }
.loader__letters > :nth-child(5) { animation-delay: .6s; }
.loader__letters > :nth-child(6) { animation-delay: .68s; }
.loader__tree,
.loader__sub { fill: var(--c-logo-gold); }
.loader__tree {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: loader-sway 3.4s ease-in-out 1.5s infinite alternate;
}
.loader__sub { opacity: 0; animation: loader-fade .8s ease 1s forwards; }
.loader__logo + .loader__tagline { margin-top: clamp(28px, 5.5vh, 64px); }
.loader-quick .loader__letters > *,
.loader-quick .loader__sub { animation: none; opacity: 1; }

/* How it works (was Services): five steps with friendly drawings */
.service__icon { display: block; color: var(--c-ink); }
.service__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.service__svg .i-accent { stroke: #9c6a2b; }
@media (min-width: 1280px) {
  .services--steps .services__list {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: calc(34 * var(--u)) calc(78 * var(--u)) 0;
    background: none;
  }
  .services--steps .service,
  .services--steps .service:nth-child(n) {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 0 calc(30 * var(--u));
    border-left: 1px solid #000;
    font-size: calc(18 * var(--u));
  }
  .services--steps .service:first-child { padding-left: 0; border-left: 0; }
  .services--steps .service:last-child { padding-right: 0; }
  .services--steps .service__icon { width: calc(66 * var(--u)); height: calc(66 * var(--u)); margin-bottom: calc(24 * var(--u)); }
  .services--steps .service__title { font-size: calc(20 * var(--u)); }
  .services--steps .service__num { width: calc(50 * var(--u)); }
  .services--steps .service__text { margin-top: calc(16 * var(--u)); line-height: 1.6; }
}

/* Why employ a garden designer (the four reasons of the old site) */
.why {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 7.3vw, 140px) var(--gutter, 8.6vw) clamp(80px, 7.8vw, 150px);
  background: var(--c-cream);
  color: var(--c-ink);
  text-align: center;
  --focus: var(--c-ink);
}
.why__eyebrow { font-size: clamp(13px, 1.05vw, 20px); }
.why__title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 .28em;
  margin-top: clamp(14px, 1.3vw, 26px);
  font-size: clamp(34px, 3.9vw, 75px);
  font-weight: 200;
  line-height: var(--lh-display);
}
.why__title-row { display: inline-flex; align-items: center; gap: .28em; }
.why__rule { width: 1.03em; height: max(2px, .066em); }
.why__title-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
  line-height: var(--lh-serif);
}
.why__lead {
  max-width: 34em;
  margin: clamp(20px, 1.7vw, 32px) auto 0;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.75;
}
.why__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 4.4vw, 84px);
  text-align: left;
  counter-reset: none;
}
.why__item { padding: 0 clamp(20px, 1.8vw, 34px); border-left: 1px solid rgba(1, 42, 39, .5); }
.why__item:first-child { padding-left: 0; border-left: 0; }
.why__item:last-child { padding-right: 0; }
.why__num {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(34px, 2.6vw, 50px);
  line-height: 1;
  color: #9c6a2b;
}
.why__name {
  margin-top: clamp(14px, 1.2vw, 22px);
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 1.3;
}
.why__text {
  margin-top: 12px;
  font-size: clamp(15px, .95vw, 18px);
  line-height: 1.7;
}

/* Garden lighting — "a detail we insist on" (Antoine's photo N.31) */
.lighting {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  align-items: center;
  column-gap: clamp(40px, 6.8vw, 130px);
  padding: clamp(72px, 7.3vw, 140px) clamp(20px, 8.6vw, 165px);
  background: linear-gradient(170deg, var(--c-deep) 10%, var(--c-deep-2) 95%);
  color: var(--c-cream);
  --focus: var(--c-lime);
}
.lighting__media {
  aspect-ratio: 760 / 1013;
  border-radius: clamp(24px, 2.6vw, 50px);
  overflow: hidden;
}
.lighting__media img { width: 100%; height: 100%; object-fit: cover; }
.lighting__eyebrow { font-size: clamp(13px, 1.05vw, 20px); color: var(--c-sage); }
.lighting__title {
  margin-top: clamp(14px, 1.3vw, 26px);
  font-size: clamp(34px, 3.9vw, 75px);
  font-weight: 200;
  line-height: var(--lh-display);
}
.lighting__title-main { display: block; }
.lighting__title-row { display: flex; align-items: center; gap: .28em; }
.lighting__rule { width: 1.03em; height: max(2px, .066em); }
.lighting__title-em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-serif);
  color: var(--c-lime);
}
.lighting__text {
  max-width: 32em;
  margin-top: clamp(24px, 2.1vw, 40px);
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.75;
  color: rgba(249, 249, 239, .9);
}
.lighting__btn {
  margin-top: clamp(28px, 2.6vw, 50px);
  min-height: clamp(52px, 3.65vw, 70px);
  padding: 0 clamp(28px, 2.4vw, 46px);
  border-color: var(--c-sage);
  color: var(--c-cream);
  font-size: clamp(16px, 1.05vw, 20px);
}
.lighting__btn:hover { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-ink); }
@media (hover: none) {
  .lighting__btn:hover { background: transparent; border-color: var(--c-sage); color: var(--c-cream); }
}
@media (prefers-reduced-motion: reduce) {
  .loader__letters > *,
  .loader__sub,
  .loader__tree { animation: none !important; opacity: 1; transform: none; rotate: none; }
}

/* footer credit: "Developed by" and the airballoon logo stay on one line (2026-10-02) */
.footer__copy { column-gap: .3em; }
.footer__by { display: inline-flex; align-items: center; white-space: nowrap; }