/* ==========================================================================
   Antoine — Garden · Tablet & mobile (< 1280px)
   The Figma file contains the desktop design only. Below 1280px the same
   visual system (colours, type pairing, rules, imagery, section order and
   motion) re-flows into a single-column / two-column layout.
   ========================================================================== */

@media (max-width: 1279.98px) {
  :root {
    --gutter: clamp(20px, 5.2vw, 64px);
    --header-h: 72px;
    --fs-eyebrow: clamp(13px, 1.1rem + 0.1vw, 18px);
    --fs-body: clamp(16px, 0.9rem + 0.35vw, 19px);
    --fs-display: clamp(34px, 1.2rem + 5.2vw, 64px);
    --fs-hero: min(calc((100vw - 2 * var(--gutter)) / 10.2), 4.69rem);
    --fs-statement: clamp(24px, 0.8rem + 3.4vw, 46px);
    --section-y: clamp(72px, 12vw, 128px);
    --radius-lg: clamp(28px, 4vw, 50px);
  }

  /* Without JS the header never hides, so anchors must clear it */
  html:not(.js) { scroll-padding-top: var(--header-h); }
  body.menu-open { overflow: hidden; }

  /* ---------- Header ---------- */
  .site-header {
    position: fixed;
    z-index: 110;
    top: 0; left: 0; right: 0;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 var(--gutter);
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    transition: transform .4s var(--ease-out), background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  }
  .site-header.is-scrolled,
  body.menu-open .site-header {
    background: rgba(1, 42, 39, .94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 21, 20, .18);
  }
  /* Hidden while scrolling down, back on scroll up (see main.js) */
  body:not(.menu-open) .site-header.is-detached:not(.is-revealed):not(:focus-within) {
    transform: translateY(-100%);
    box-shadow: none;
  }
  body.menu-open .site-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header__logo {
    display: block;
    flex: none;
    width: 35px;
    height: 45px;
    mix-blend-mode: normal;
  }
  .site-header__logo img { width: 100%; height: 100%; filter: brightness(1.08); }
  .site-nav { margin-left: auto; display: flex; align-items: center; }
  .site-nav__list { display: none; }
  .site-header .btn-contact {
    display: none;
    height: 44px;
    padding: 0 26px;
    font-size: 18px;
  }
  .menu-toggle {
    position: relative;
    flex: none;
    width: 48px;
    height: 48px;
    margin-right: -10px;
    border-radius: 50%;
    --focus: var(--c-lime);
  }
  .menu-toggle__bar {
    position: absolute;
    left: 12px;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-lime);
    transition: transform .3s var(--ease-in-out), top .3s var(--ease-in-out);
  }
  .menu-toggle__bar:nth-child(1) { top: 19px; }
  .menu-toggle__bar:nth-child(2) { top: 27px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { top: 23px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { top: 23px; transform: rotate(-45deg); }

  /* ---------- Mobile menu ---------- */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--header-h) + 24px) var(--gutter) 48px;
    background: var(--gradient-deep);
    opacity: 0;
    transition: opacity .35s var(--ease-in-out);
    overflow-y: auto;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.is-open { opacity: 1; }
  .mobile-menu__nav { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 3.2vh, 26px); }
  .mobile-menu__nav a {
    font-size: clamp(28px, 7vw, 44px);
    font-weight: 200;
    line-height: 1.25;
    color: var(--c-lime);
    transform: translateY(12px);
    opacity: 0;
    transition: transform .45s var(--ease-out), opacity .45s var(--ease-out), color .2s ease;
  }
  .mobile-menu.is-open .mobile-menu__nav a { transform: none; opacity: 1; }
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(2) { transition-delay: .04s; }
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(3) { transition-delay: .08s; }
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(4) { transition-delay: .12s; }
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(5) { transition-delay: .16s; }
  .mobile-menu.is-open .mobile-menu__nav a:nth-child(6) { transition-delay: .2s; }
  .mobile-menu__nav a:hover { color: var(--c-white); }
  .mobile-menu__nav .mobile-menu__contact {
    margin-top: 12px;
    padding: 11px 35px; /* same size as before, without the outline */
    border: 0;
    border-radius: 100px;
    background: var(--c-lime);
    color: var(--c-ink);
    font-size: 20px;
    font-weight: 400;
  }
  .mobile-menu__nav .mobile-menu__contact:hover { background: var(--c-white); color: var(--c-ink); }

  /* ---------- Shared type ---------- */
  .eyebrow { font-size: var(--fs-eyebrow); }
  .rule { flex: none; height: 4px; }

  /* ---------- Dark block ---------- */
  .dark-block { position: relative; background: var(--gradient-deep); }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-h) + clamp(40px, 9vw, 96px));
  }
  .hero__kicker,
  .hero__title,
  .hero__discover { position: relative; z-index: 1; margin-left: var(--gutter); margin-right: var(--gutter); }
  .hero__kicker { font-size: var(--fs-body); color: var(--c-white); max-width: 34ch; }
  .hero__title {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.28em;
    margin-top: 8px;
    color: var(--c-sage);
    font-size: var(--fs-hero);
  }
  .hero__title-em { grid-column: 1; font-size: 1.322em; }
  .hero__rule { grid-column: 2; width: 1.48em; height: max(3px, 0.066em); margin-top: 0.1em; }
  .hero__title-main { grid-column: 1 / -1; line-height: 1.22; white-space: nowrap; }
  .hero__discover {
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
    gap: 14px;
    margin-top: clamp(40px, 8vw, 72px);
    color: var(--c-white);
    font-size: var(--fs-body);
  }
  .hero__discover .scroll-cue { width: 32px; height: 62px; overflow: visible; }
  .hero__image {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    width: min(100%, 910px);
    aspect-ratio: 910 / 576;
    height: auto;
    margin-top: clamp(40px, 8vw, 72px);
  }
  .hero__shadow {
    position: absolute;
    z-index: 1;
    left: 0; top: 0;
    width: 100%;
    height: min(100%, 110vh);
    object-fit: cover;
    object-position: 0 0;
    opacity: .6;
  }
  .leaf--hero {
    position: absolute;
    z-index: 2;
    right: -2vw;
    bottom: -14vw;
    width: clamp(120px, 24vw, 230px);
    height: auto;
  }

  /* ---------- Intro ---------- */
  .intro { position: relative; padding-top: clamp(56px, 10vw, 110px); }
  .intro__media {
    width: min(100%, 1005px);
    aspect-ratio: 1005 / 1076;
    max-height: 110vh;
    overflow: hidden;
    background: #2c3a2c;
  }
  .intro__video { width: 100%; height: 100%; object-fit: cover; }
  .intro__eyebrow,
  .intro__title,
  .intro__text { margin-left: var(--gutter); margin-right: var(--gutter); }
  .intro__eyebrow { margin-top: clamp(48px, 9vw, 96px); color: var(--c-white); }
  .intro__title { display: block; margin-top: 18px; color: var(--c-sage); font-size: var(--fs-display); }
  .intro__title-main { display: block; line-height: var(--lh-display); }
  .intro__rule { display: inline-block; vertical-align: middle; width: 1.48em; margin-right: 0.36em; }
  .intro__title-em { display: inline; font-size: 1em; }
  .intro__text { max-width: 36em; margin-top: 24px; font-size: var(--fs-body); line-height: 1.75; color: var(--c-white); }

  /* ---------- Make room ---------- */
  .makeroom {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--section-y) 0 0;
    overflow: hidden;
    color: var(--c-sage);
  }
  .makeroom__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 var(--gutter);
    text-align: right;
  }
  .makeroom__eyebrow { color: var(--c-white); }
  .makeroom__title { display: flex; flex-direction: column; align-items: flex-end; margin-top: 18px; font-size: var(--fs-display); }
  .makeroom__title-main { display: block; line-height: var(--lh-display); }
  .makeroom__title-row { display: flex; align-items: center; gap: 0.2em; }
  .makeroom__title-for { line-height: var(--lh-display); }
  .makeroom__rule { width: 1.48em; margin: 0 0.12em; }
  .makeroom__title-em { font-size: 1em; }
  .makeroom__text { max-width: 30em; margin-top: 24px; font-size: var(--fs-body); line-height: 1.75; color: var(--c-white); }
  .makeroom__image {
    position: relative;
    z-index: 1;
    align-self: flex-end;
    width: min(92%, 865px);
    aspect-ratio: 865 / 861;
    margin-top: clamp(48px, 9vw, 96px);
    margin-bottom: var(--section-y);
  }
  .makeroom__image img { width: 100%; height: 100%; object-fit: cover; }
  .makeroom__leaf { position: absolute; max-width: none; height: auto; }
  .makeroom__leaf--a {
    top: clamp(-56px, -5vw, -36px);
    left: calc(var(--gutter) + 2vw);
    width: clamp(64px, 11vw, 113px);
    transform: rotate(24.51deg);
  }
  .makeroom__leaf--b {
    left: -6vw;
    bottom: 30%;
    width: clamp(150px, 30vw, 308px);
    transform: rotate(-73.4deg);
    filter: blur(6.5px);
  }

  /* ---------- Services ---------- */
  .services { padding: 0 clamp(12px, 2.6vw, 48px) 0; margin-bottom: -48px; position: relative; z-index: 2; }
  .services__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 64px) clamp(48px, 8vw, 80px);
    border-radius: var(--radius-lg);
    background: var(--c-sage);
    color: var(--c-ink);
    overflow: hidden;
  }
  .services__eyebrow { text-align: center; }
  .services__statement {
    display: block;
    margin-top: clamp(24px, 4vw, 48px);
    font-size: var(--fs-statement);
    line-height: 1.3333;
    text-align: center;
  }
  .services__statement { max-width: 24em; }
  .services__line { display: inline; }
  .services__line + .services__line::before { content: ' '; }
  .services__line .serif-em { line-height: inherit; }
  .services__body { width: 100%; margin-top: clamp(40px, 7vw, 72px); display: flex; flex-direction: column; align-items: center; }
  .services__list { display: grid; grid-template-columns: 1fr; width: 100%; }
  .service { padding: 24px 0; border-top: 1px solid #000; font-size: var(--fs-body); line-height: 1.5; }
  .service:first-child { border-top: 0; padding-top: 0; }
  .service__title { display: flex; font-weight: 400; }
  .service__num { flex: none; width: 3.05em; }
  .service__text { margin-top: 12px; }
  .services__btn {
    margin-top: clamp(32px, 6vw, 56px);
    min-height: 60px;
    padding: 0 36px;
    font-size: clamp(17px, 1rem + 0.3vw, 20px);
  }

  /* ---------- Video section ---------- */
  .beauty {
    position: relative;
    z-index: 1;
    min-height: clamp(560px, 110vw, 1022px);
    padding-top: calc(48px + clamp(64px, 14vw, 160px));
    display: flex;
    justify-content: center;
  }
  .beauty__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    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: 87.5%;
    background: linear-gradient(1.654deg, rgba(0, 22, 20, 0) 28.519%, var(--c-deep-3) 73.531%);
  }
  .beauty__title {
    position: relative;
    padding: 0 var(--gutter);
    font-size: clamp(26px, 1.1rem + 2.2vw, 40px);
    line-height: 1.1972;
    text-align: center;
    color: var(--c-sage);
  }
  .beauty__title .serif-em { line-height: inherit; }

  /* ---------- Sustainability ---------- */
  .sustainability {
    position: relative;
    padding: calc(var(--section-y) + 12px) var(--gutter) var(--section-y);
    color: var(--c-deep);
    overflow-x: clip;
  }
  .sustainability__shadow {
    position: absolute;
    z-index: 0;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
  }
  .sustainability__eyebrow,
  .sustainability__title,
  .points { position: relative; z-index: 1; }
  .sustainability__title { display: block; margin-top: 16px; font-size: var(--fs-display); max-width: 9em; }
  .sustainability__title-main { display: block; line-height: var(--lh-display); }
  .sustainability__rule { display: inline-block; vertical-align: middle; width: 0.73em; margin-right: 0.3em; color: var(--c-ink); }
  .sustainability__title-em { font-size: 1em; }
  .points { margin-top: clamp(40px, 7vw, 72px); color: var(--c-ink); }
  .point {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 24px 0;
    border-top: 1px solid #000;
    font-size: var(--fs-body);
    line-height: 1.5;
  }
  .point:first-child { border-top: 0; padding-top: 0; }
  .point__title { font-size: clamp(20px, 0.95rem + 0.8vw, 24px); font-weight: 700; line-height: 1.25; }
  .sustainability__btn {
    position: relative;
    z-index: 1;
    margin-top: clamp(28px, 5vw, 48px);
    min-height: 60px;
    padding: 0 36px;
    font-size: clamp(17px, 1rem + 0.3vw, 20px);
  }
  .leaf--sustainability,
  .leaf--sustainability-small { position: absolute; z-index: 3; height: auto; max-width: none; }
  .leaf--sustainability {
    top: clamp(-40px, -4vw, -20px);
    right: -3vw;
    width: clamp(130px, 27vw, 330px);
  }
  .leaf--sustainability-small {
    right: 6vw;
    bottom: calc(-1 * clamp(56px, 11vw, 150px));
    width: clamp(120px, 20vw, 240px);
  }

  /* ---------- Cream block ---------- */
  .cream-block { position: relative; background: var(--c-cream); padding-top: calc(var(--section-y) + 24px); }
  .portfolio__title {
    display: block;
    padding: 0 var(--gutter);
    text-align: center;
    color: var(--c-ink-alt);
    font-size: clamp(30px, 1rem + 3.4vw, 55px);
    line-height: 1.5;
  }
  .portfolio__title-em { font-size: 1.3653em; line-height: 1; }
  .portfolio__scroller {
    position: relative;
    margin-top: clamp(32px, 6vw, 64px);
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--gutter);
  }
  .portfolio__track { gap: clamp(16px, 2.6vw, 50px); padding: 0 var(--gutter); }
  .pf { scroll-snap-align: start; }
  .pf--wide { width: clamp(260px, 72vw, 760px); }
  .pf--wide > .pf__media { aspect-ratio: 1013 / 638; }
  .pf--olive > .pf__media { aspect-ratio: 1013 / 659; }
  .pf--more { align-self: stretch; width: clamp(180px, 40vw, 340px); }
  .pf-more { width: clamp(136px, 30vw, 220px); font-size: clamp(15px, 0.8rem + 0.6vw, 20px); }
  .pf--card { width: clamp(220px, 56vw, 560px); padding-top: clamp(20px, 5vw, 76px); }
  .pf--card > .pf__media { aspect-ratio: 705 / 562; height: auto; }
  .pf__caption {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    row-gap: 6px;
    margin-top: 16px;
    font-size: var(--fs-body);
  }
  .pf__title { grid-column: 1; }
  .pf__year { grid-column: 2; }
  .pf__text { grid-column: 1 / -1; }
  /* narrow cards: the category · area under the name (2026-09-30) */
  @media (max-width: 767.98px) {
    .pf__caption { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
    .pf__year { grid-column: 1; text-align: left; }
  }

  .about {
    display: flex;
    flex-direction: column;
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
  }
  .about__image {
    width: min(92%, 835px);
    aspect-ratio: 835 / 947;
    max-height: 120vh;
    overflow: hidden;
  }
  .about__image img { width: 100%; height: 100%; object-fit: cover; }
  .about__eyebrow,
  .about__title,
  .about__bio,
  .about__btn { margin-left: var(--gutter); margin-right: var(--gutter); }
  .about__eyebrow { margin-top: clamp(40px, 8vw, 72px); text-align: right; }
  .about__title { display: flex; flex-direction: column; align-items: flex-end; margin-top: 14px; font-size: var(--fs-display); }
  .about__title-main { display: block; line-height: var(--lh-display); max-width: 100%; }
  .about__title-row { display: flex; align-items: center; gap: 0.23em; }
  .about__rule { width: 1.03em; }
  .about__title-em { font-size: 1em; }
  .about__bio { margin-top: clamp(28px, 5vw, 48px); font-size: var(--fs-body); line-height: 1.75; max-width: 42em; }
  .about__bio p + p { margin-top: 1.75em; }
  .about__btn {
    align-self: flex-start;
    margin-top: clamp(32px, 6vw, 56px);
    min-height: 60px;
    padding: 0 40px;
    font-size: clamp(17px, 1rem + 0.3vw, 20px);
  }

  /* ---------- Before / after ---------- */
  .compare {
    height: max(360px, calc(100vw * 763 / 1920));
    container-type: inline-size;
  }
  .compare__after { top: 0; height: 100%; }
  .compare__before img,
  .compare__before::after {
    left: 0; top: 0;
    width: 100cqw;
    height: 100%;
  }
  .compare__label { top: 20px; font-size: clamp(14px, 0.8rem + 0.5vw, 20px); }
  .compare__handle { width: 64px; --size: 52px; }

  /* ---------- Reviews ---------- */
  .reviews { padding: var(--section-y) var(--gutter); }
  .reviews__title { display: block; margin-top: 14px; font-size: var(--fs-display); }
  .reviews__title-main { display: block; line-height: var(--lh-display); }
  .reviews__rule { display: inline-block; vertical-align: middle; width: 0.73em; margin-right: 0.3em; }
  .reviews__title-em { font-size: 1em; }
  .reviews__rating { margin-top: clamp(32px, 7vw, 64px); }
  .reviews__score { font-size: clamp(20px, 1rem + 1vw, 26px); }
  .reviews__stars { width: clamp(170px, 30vw, 222px); height: auto; margin-top: 12px; }
  .reviews__btn {
    display: flex;
    width: fit-content;
    margin-top: clamp(24px, 4vw, 32px);
    min-height: 60px;
    padding: 0 36px;
    font-size: clamp(17px, 1rem + 0.3vw, 20px);
  }
  .reviews__list { margin-top: clamp(32px, 6vw, 56px); }
  .review {
    position: relative;
    margin-bottom: 20px;
    padding: clamp(22px, 4vw, 30px);
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(8, 15, 52, .04);
    break-inside: avoid;
  }
  .review__quote { font-size: clamp(15px, 0.85rem + 0.2vw, 16px); line-height: 1.5625; }
  .review__author { height: 72px; margin-top: 28px; }
  .review__avatar { width: 72px; height: 72px; }
  .review__name { left: 84px; top: 10px; font-size: 18px; }
  .review__stars { left: 84px; top: 40px; width: 134px; height: auto; }

  /* ---------- Instagram ---------- */
  .instagram { padding: var(--section-y) var(--gutter); }
  .instagram__title { gap: 14px; font-size: var(--fs-eyebrow); }
  .instagram__icon { width: 26px; height: 26px; }
  .instagram__grid {
    margin-top: clamp(28px, 5vw, 48px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.6vw, 20px);
  }
  .instagram__grid img { width: 100%; height: auto; aspect-ratio: 383 / 434; }

  /* ---------- Footer ---------- */
  .site-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--section-y) 0 max(28px, env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .footer__image {
    width: min(86%, 649px);
    aspect-ratio: 649 / 663;
    overflow: hidden;
  }
  .footer__image img { width: 100%; height: 100%; object-fit: cover; }
  .footer__title {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    margin: clamp(40px, 8vw, 72px) var(--gutter) 0;
    font-size: min(var(--fs-display), calc((100vw - 2 * var(--gutter)) / 10));
    color: var(--c-sage);
  }
  .footer__title-a,
  .footer__title-b { display: block; line-height: var(--lh-display); }
  .footer__title-b { margin-top: 0.61em; }
  .footer__title-row { display: flex; align-items: center; gap: 0.5em; margin-top: 0.1em; padding-left: 1.92em; }
  .footer__rule { width: 1.83em; }
  .footer__title-em { font-size: 1em; }
  .footer__contact {
    margin: clamp(32px, 6vw, 56px) var(--gutter) 0;
    font-size: clamp(21px, 1.1rem + 1vw, 30px);
    line-height: 2;
  }
  .footer__contact a { max-width: 100%; }
  .footer__name {
    position: relative;
    margin: clamp(48px, 9vw, 96px) var(--gutter) 0;
    display: flex;
    flex-direction: column;
    --fs-name: calc((100vw - 2 * var(--gutter)) / 8.47); /* "Garden Designer" fits the width (was 8.25 for "Hadjialexandrou") */
  }
  .footer__name-em { align-self: flex-end; margin-right: 0.35em; font-size: calc(var(--fs-name) * 1.005); }
  .footer__name-main { align-self: flex-end; margin-top: -0.12em; font-size: var(--fs-name); line-height: 1.0667; }
  .footer__shadow {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%;
    object-fit: cover;
    opacity: .6;
  }
  .footer__bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 32px;
    margin: clamp(40px, 7vw, 64px) var(--gutter) 0;
  }
  .footer__copy { flex-wrap: wrap; row-gap: 4px; font-size: 13px; white-space: normal; }
  .footer__dev { margin-left: 8px; }
  .footer__dev img { width: 91px; height: 14px; }
  .footer__legal { display: flex; flex-wrap: wrap; gap: 4px 28px; }
  .footer__legal-item { font-size: 13px; }
  .leaf--contact,
  .leaf--contact-small { position: absolute; z-index: 3; height: auto; max-width: none; }
  .leaf--contact {
    right: -10vw;
    top: calc(var(--section-y) + min(86vw, 649px) - 45vw); /* rests on the photo, clear of the title */
    width: clamp(180px, 40vw, 480px);
  }
  .leaf--contact-small {
    left: calc(min(86%, 649px) - 22vw);
    top: calc(var(--section-y) + min(86vw, 649px) * 0.8);
    width: clamp(100px, 18vw, 200px);
  }

  /* ---------- Reveal animations (tablet / mobile variants) ---------- */
  .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(60%); }
  .js .makeroom:not(.is-in) .makeroom__leaf--a { transform: translate(-20px, 120px) rotate(-57.13deg) scale(1.8); }
  .js .makeroom:not(.is-in) .makeroom__leaf--b { transform: translate(60px, -80px) rotate(25.5deg) scale(.64); }

  .services__line { transition: none; }
  .services__statement { transition: opacity .6s linear, transform .6s linear; }
  .js .services:not(.is-in) .services__statement { opacity: 0; transform: translateY(40px); }
  .js .services:not(.is-in) .services__body { opacity: 0; transform: translateY(80px); }
  .services__body { transition: transform .5s linear .5s, opacity .5s linear .5s; }

}

/* ---------- Tablet (768 – 1279) ---------- */
@media (min-width: 768px) and (max-width: 1279.98px) {
  :root { --header-h: 88px; }
  .site-header .btn-contact { display: inline-flex; }
  .hero__title-main { line-height: 1.3; }
  .services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .service { padding: 28px 32px; border-top: 1px solid #000; }
  .service:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .service:nth-child(odd) { padding-left: 0; border-right: 1px solid #000; }
  .service:nth-child(even) { padding-right: 0; }
  .point { grid-template-columns: minmax(150px, 0.33fr) 1fr; column-gap: 40px; }
  .sustainability__title { max-width: none; }
  .reviews__list { column-count: 2; column-gap: 20px; }
  /* name and stars beside the photo, even when a long name needs two lines */
  .review__author {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    height: auto;
    min-height: 72px;
  }
  .review__avatar { position: static; grid-row: 1 / span 2; }
  .review__name { position: static; align-self: end; }
  .review__stars { position: static; align-self: start; margin-top: 10px; }
  .instagram__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .about__image { width: min(80%, 835px); }
  .footer__image { width: min(70%, 649px); }
  .leaf--contact { top: calc(var(--section-y) + min(70vw, 649px) - 16vw); }
  .leaf--contact-small { left: calc(min(70%, 649px) - 16vw); top: calc(var(--section-y) + min(70vw, 649px) * 0.86); }
}

/* ---------- Small tablets / large phones (≥ 560) ---------- */
@media (min-width: 560px) and (max-width: 767.98px) {
  .site-header .btn-contact { display: inline-flex; height: 40px; padding: 0 20px; font-size: 16px; }
  .instagram__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Narrow phones ---------- */
@media (max-width: 380px) {
  .footer__title-row { padding-left: 1.2em; }
  .footer__legal { column-gap: 18px; }
}

/* ---------- Large tablet / small laptop (1024 – 1279): two-column compositions ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root {
    --gutter: 56px;
    --fs-display: clamp(44px, 4.6vw, 58px);
    --fs-body: 17px;
    --fs-hero: calc((52.6vw - var(--gutter) - 32px) / 10.2);
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 47.4vw;
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 32px;
    min-height: min(100vh, 900px);
    padding-bottom: 88px;
  }
  .hero__kicker { grid-column: 1; grid-row: 2; }
  .hero__title { grid-column: 1; grid-row: 3; }
  .hero__discover { grid-column: 1; grid-row: 4; }
  .hero__image { grid-column: 2; grid-row: 1 / -1; align-self: center; width: 100%; margin-top: 0; }
  .leaf--hero { right: 4vw; bottom: -40px; width: 170px; }

  .intro {
    display: grid;
    grid-template-columns: 52.3vw minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: 56px;
    padding-top: 0;
  }
  .intro__media { grid-column: 1; grid-row: 1 / -1; width: 100%; }
  .intro__eyebrow { grid-column: 2; grid-row: 2; margin: 0 var(--gutter) 0 0; }
  .intro__title { grid-column: 2; grid-row: 3; margin: 18px var(--gutter) 0 0; }
  .intro__text { grid-column: 2; grid-row: 4; margin: 24px var(--gutter) 0 0; }

  .makeroom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 45vw;
    column-gap: 48px;
    align-items: center;
    padding: var(--section-y) 0;
  }
  .makeroom__copy { grid-column: 1; padding-right: 0; }
  .makeroom__image { grid-column: 2; width: 100%; margin: 0; }
  .makeroom__leaf--a { z-index: 2; top: 40px; left: calc(52% - 90px); }
  .makeroom__leaf--b { bottom: 8%; left: -40px; }

  .services__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .services .service,
  .services .service:nth-child(odd),
  .services .service:nth-child(even),
  .services .service:nth-child(-n+2) {
    padding: 0 22px;
    border-top: 0;
    border-right: 0;
    border-left: 1px solid #000;
  }
  .services .service:first-child { border-left: 0; padding-left: 0; }
  .services .service:last-child { padding-right: 0; }
  .service__text { font-size: 16px; }

  .sustainability {
    display: grid;
    grid-template-columns: 34% minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 56px;
  }
  .sustainability__eyebrow { grid-column: 1; grid-row: 1; }
  .sustainability__title { grid-column: 1; grid-row: 2; }
  .points { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  .sustainability__btn { grid-column: 2; grid-row: 4; justify-self: start; }
  .point { grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; }
  .leaf--sustainability { top: auto; bottom: 60px; right: auto; left: 6vw; width: 240px; }

  .about {
    display: grid;
    grid-template-columns: 43.5vw minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 56px;
  }
  .about__image { grid-column: 1; grid-row: 1 / -1; width: 100%; }
  .about__eyebrow { grid-column: 2; grid-row: 1; margin: 40px var(--gutter) 0 0; }
  .about__title { grid-column: 2; grid-row: 2; margin-left: 0; }
  .about__bio { grid-column: 2; grid-row: 3; margin-left: 0; }
  .about__btn { grid-column: 2; grid-row: 4; margin-left: 0; }

  .reviews__list { column-count: 3; column-gap: 20px; }

  .site-footer {
    display: grid;
    grid-template-columns: 34vw minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 64px;
  }
  .footer__image { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
  .footer__title { grid-column: 2; grid-row: 1; margin: 0 var(--gutter) 0 0; }
  .footer__contact { grid-column: 2; grid-row: 2; margin-left: 0; }
  .footer__name { grid-column: 1 / -1; grid-row: 3; }
  .footer__bar { grid-column: 1 / -1; grid-row: 4; }
  .leaf--contact { top: calc(var(--section-y) - 40px); right: -60px; width: 300px; }
  .leaf--contact-small { left: calc(34vw - 90px); top: calc(var(--section-y) + 34vw * 0.9); width: 150px; }
}

/* ==========================================================================
   Phones & tablets — polish pass
   ========================================================================== */
@media (max-width: 1279.98px) {
  /* touch feedback instead of the grey tap flash */
  a, button { -webkit-tap-highlight-color: transparent; }
  .btn-contact,
  .btn-outline { transition: background-color .25s ease, color .25s ease, transform .15s ease; }
  .btn-contact:active,
  .btn-outline:active,
  .sticky-cta:active,
  .to-top.is-visible:active,
  .mobile-menu__nav .mobile-menu__contact:active { transform: scale(.96); }

  /* headlines break evenly, paragraphs avoid a lonely last word */
  h1, h2, h3, .hero__kicker { text-wrap: balance; }
  p, blockquote { text-wrap: pretty; }
  .beauty__title br { display: none; }

  /* contact details stay crisp above the dappled shadow */
  .footer__contact { position: relative; z-index: 2; }

  /* comfortable touch targets */
  .site-header__logo { position: relative; }
  .site-header__logo::before { content: ''; position: absolute; inset: -6px -10px; }
  .sticky-cta,
  .to-top { height: 44px; }
  .to-top { width: 44px; }
  .sticky-cta { gap: 22px; padding: 0 18px 0 20px; font-size: 13px; }
  .footer__contact a { display: flex; align-items: center; min-height: 44px; line-height: 1.4; }
  .footer__dev { display: inline-flex; align-items: center; min-height: 32px; margin-block: -9px; padding: 0 4px; }
  .footer__legal-item { display: inline-flex; align-items: center; min-height: 32px; margin-block: -6px; }

  /* the menu scrolls instead of clipping when the screen is short */
  .mobile-menu { justify-content: flex-start; }
  .mobile-menu__nav { margin-block: auto; }
  .mobile-menu__nav a { font-size: clamp(24px, min(7vw, 7.2vh), 44px); }
}

/* Phones & portrait tablets: the hero is the first screen */
@media (max-width: 1023.98px) {
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__image {
    flex: 1 0 auto;
    aspect-ratio: auto;
    min-height: min(62vw, 520px);
    min-height: min(62vw, 520px, 72svh);
  }
  /* the photo fills the whole frame (the frame's height comes from the flex
     layout, so a percentage height would not resolve) */
  .hero__image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 45% 50%; }
  .leaf--hero { right: 2vw; bottom: clamp(20px, 7vw, 64px); }

  /* the small make-room leaf rests on the photo's top-left corner, in front of
     it (clear of the text); the blurred one peeks out from behind it lower down */
  .makeroom__leaf--a {
    z-index: 2;
    top: auto;
    left: calc(8vw - 14px);
    bottom: calc(var(--section-y) + min(92vw, 865px) * 0.9954 - 46px);
  }
  .makeroom__leaf--b { bottom: calc(var(--section-y) - 40px); }

  /* the four latest Instagram posts on phones (see below) */
}

/* Phones */
@media (max-width: 767.98px) {
  /* sustainability points: a shorter slide with a fade, so text never runs off the edge */
  .js .point { --slide: 16vw; opacity: calc(.12 + .88 * var(--p, 1)); }

  /* reviews: a swipeable row (the next card peeks in) instead of a long column */
  .reviews__list {
    display: flex;
    gap: 14px;
    margin: clamp(32px, 6vw, 56px) calc(-1 * var(--gutter)) 0;
    padding: 6px var(--gutter) 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .reviews__list::-webkit-scrollbar { display: none; }
  /* the row (and its dots) comes in as one on phones (main.js) */
  .js .reviews__list,
  .js .reviews__dots { transform: translate3d(0, var(--row-ty, 0px), 0); opacity: var(--row-p, 1); }
  .reviews__list:focus-visible { outline-offset: -2px; }
  .review {
    flex: 0 0 min(calc(100% - 34px), 360px);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    scroll-snap-align: start;
  }
  .review__quote { flex: 1 0 auto; }
  /* name and stars sit beside the photo, whatever the name's length */
  .review__author {
    flex: none;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    height: auto;
    margin-top: 24px;
  }
  .review__avatar { position: static; grid-row: 1 / span 2; width: 56px; height: 56px; }
  .review__avatar--initial { font-size: 25px; }
  .review__name { position: static; align-self: end; font-size: 17px; }
  .review__stars { position: static; align-self: start; width: 112px; margin-top: 6px; }
  .reviews__dots { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
  .reviews__dot { display: grid; place-items: center; width: 32px; height: 32px; }
  .reviews__dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 54, 52, .25);
    transition: background-color .25s ease, transform .25s ease;
  }
  .reviews__dot[aria-current="true"]::before { background: var(--c-ink); transform: scale(1.3); }
}
@media (min-width: 768px) {
  .reviews__dots { display: none; }
}
@media (max-width: 767.98px) {
  /* phones show four: the two latest posts and the two that always stay
     (the grid holds six live tiles, then the two pinned ones — 2026-09-30) */
  .instagram__grid li:nth-child(n+3):nth-child(-n+6) { display: none; }
}

/* The narrowest phones (≤ 360px) */
@media (max-width: 360px) {
  :root { --fs-display: clamp(28px, 9.4vw, 34px); }
  .makeroom__title-em { white-space: nowrap; }
  .services__card { padding-left: 16px; padding-right: 16px; }
  .services__btn,
  .sustainability__btn,
  .about__btn,
  .reviews__btn { padding: 0 22px; font-size: 16px; }
}

/* Phones in landscape: keep things within the short screen */
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 520px) {
  :root {
    --header-h: 64px;
    --fs-hero: min(calc((100vw - 2 * var(--gutter)) / 10.2), 4.69rem, 11vh);
    --fs-display: clamp(30px, 11vh, 52px);
    --section-y: clamp(56px, 16vh, 96px);
  }
  .hero { padding-top: calc(var(--header-h) + 20px); }
  .hero__discover { margin-top: 20px; }
  .hero__image { margin-top: 24px; }
  .intro__media,
  .makeroom__image,
  .about__image,
  .footer__image { max-height: 86vh; }
  .beauty { min-height: max(100vh, 360px); }
  .pf--wide { width: min(72vw, 110vh); }
  .pf--card { width: min(56vw, 88vh); }
}

/* Touch screens: no hover states that stay stuck after a tap */
@media (hover: none) {
  .btn-contact:hover { background: var(--c-lime); }
  .btn-outline:hover { background: transparent; color: var(--c-ink); }
  .footer__contact a:hover { color: var(--c-white); }
  .footer__dev:hover img { opacity: 1; }
  a.footer__legal-item:hover { color: var(--c-sage); }
  .sticky-cta:hover,
  .to-top:hover { background: var(--c-lime); }
  .sticky-cta:hover .sticky-cta__icon { transform: none; }
  .mobile-menu__nav a:hover { color: var(--c-lime); }
  .mobile-menu__nav .mobile-menu__contact:hover { background: var(--c-lime); color: var(--c-ink); }
}

/* Phones & tablets (the leaf's narrow route), 2026-09-30 (Kotsios):
   - one leaf in the footer: the small blurred leaf by the photo goes, and on
     the pages where the travelling leaf comes down to the footer (all but
     Process, body[data-leaf-rest]) the big one goes too — the travelling leaf
     is the one that lands there, by the e-mail link. Without it (reduced
     motion, no JS, Process) the big static leaf stays.
   - the big name stays clear of the floating buttons: at the very end of the
     page "Send inquiry" and back-to-top step up above the copyright line
     (main.js), so the line keeps room for them under the name */
@media (max-width: 1023.98px) {
  .leaf--contact-small { display: none; }
  .flyleaf-on body:not([data-leaf-rest]) .leaf--contact { display: none; }
  .footer__bar { margin-top: 84px; }
}

/* ======================================================================
   Antoine's feedback (2026-09-30): the logo, the five steps, why a garden
   designer, the lighting
   ====================================================================== */
@media (max-width: 1279.98px) {
  .site-header__logo { width: clamp(132px, 12vw + 90px, 170px); height: auto; aspect-ratio: 500 / 134; }
  .site-header__logo img { filter: none; }

  /* the steps: the drawing beside the words */
  .services--steps .service {
    display: grid;
    grid-template-columns: clamp(44px, 5vw, 56px) minmax(0, 1fr);
    column-gap: clamp(16px, 2.4vw, 22px);
    align-items: start;
  }
  .services--steps .service__icon { grid-row: 1 / span 2; width: 100%; aspect-ratio: 1; margin-top: -4px; }
  .services--steps .service__title,
  .services--steps .service__text { grid-column: 2; }
  .services--steps .service__text { margin-top: 8px; }

  .why__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .why__item,
  .why__item:first-child,
  .why__item:last-child { padding: 26px 0; border-left: 0; border-top: 1px solid rgba(1, 42, 39, .35); }
  .why__item:first-child { border-top: 0; padding-top: 0; }
  .why__item { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); column-gap: 8px; }
  .why__num { grid-row: 1 / span 2; font-size: clamp(30px, 6vw, 40px); }
  .why__name { margin-top: 0; }
  .why__text { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .why__item,
  .why__item:first-child,
  .why__item:last-child { padding: 30px 32px; border-top: 1px solid rgba(1, 42, 39, .35); }
  .why__item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .why__item:nth-child(odd) { padding-left: 0; border-right: 1px solid rgba(1, 42, 39, .35); }
  .why__item:nth-child(even) { padding-right: 0; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  /* five steps in a row, the drawing on top */
  .services--steps .services__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .services--steps .service,
  .services--steps .service:nth-child(odd),
  .services--steps .service:nth-child(even),
  .services--steps .service:nth-child(-n+2) {
    display: block;
    padding: 0 18px;
    border-top: 0;
    border-right: 0;
    border-left: 1px solid #000;
  }
  .services--steps .service:first-child { border-left: 0; padding-left: 0; }
  .services--steps .service:last-child { padding-right: 0; }
  .services--steps .service__icon { width: 52px; margin: 0 0 18px; }
  .services--steps .service__title { font-size: 17px; }
  .services--steps .service__num { width: 2.6em; }
  .services--steps .service__text { font-size: 15px; margin-top: 10px; }
  .why__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why__item,
  .why__item:first-child,
  .why__item:last-child,
  .why__item:nth-child(n) { display: block; padding: 0 22px; border-top: 0; border-right: 0; border-left: 1px solid rgba(1, 42, 39, .35); }
  .why__item:first-child { padding-left: 0; border-left: 0; }
  .why__item:last-child { padding-right: 0; }
  .why__name { margin-top: 14px; }
}
@media (max-width: 1023.98px) {
  .lighting { grid-template-columns: minmax(0, 1fr); row-gap: clamp(36px, 7vw, 56px); padding: var(--section-y) var(--gutter); }
  .lighting__media { width: min(100%, 560px); justify-self: center; }
  .lighting__copy { max-width: 36em; }
}

/* Home strip on phones (2026-10-02, Kotsios: "not consistent"): every garden the same size —
   same width, same 4:3 photo on the same line, captions in the same place, the short line
   always given room for two lines so the pieces line up */
@media (max-width: 767.98px) {
  .portfolio__track { align-items: flex-start; }
  .pf--wide,
  .pf--card { width: min(78vw, 420px); padding-top: 0; }
  .pf--wide > .pf__media,
  .pf--olive > .pf__media,
  .pf--card > .pf__media { aspect-ratio: 4 / 3; height: auto; }
  .pf__media img { width: 100%; height: 100%; object-fit: cover; }
  .pf__text { min-height: 2lh; text-wrap: balance; }
}

/* "Why employ a garden designer?" on phones (2026-10-02, Kotsios: "weird"): the dash and
   "a garden designer?" stay together on one line, centred under "Why employ" */
@media (max-width: 767.98px) {
  .why__title { font-size: min(34px, 8.2vw); }
  .why__title-row { white-space: nowrap; }
}

/* «All the gardens» on phones (2026-10-02): a square as tall as the photos, level with them */
@media (max-width: 767.98px) {
  .pf--more { align-self: flex-start; width: auto; }
  .pf-more { width: calc(min(78vw, 420px) * .75); font-size: clamp(18px, 5vw, 22px); }
  .pf-more__arrow { width: 44px; }
}