/* ========================================================================
   VERBEN GARDEN — FINAL RESPONSIVE AUDIT V11 (2026-09-08)
   Loaded last on every public page.
   IMPORTANT: all rules are breakpoint-scoped; desktop >1024px is untouched.
   Goals: remove mobile overflow, improve reading weight/size, normalize section
   rhythm, preserve touch targets, and replace desktop-only compositions with
   intentional tablet/mobile layouts.
   ======================================================================== */

@media (max-width: 1024px) {
  html { scroll-padding-top: 132px; }
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  main, section, article, aside, header, footer, nav,
  .container, [class*="__inner"], [class*="__grid"], [class*="__content"] { min-width: 0; }
  img, picture, video, canvas, iframe { max-width: 100%; height: auto; }
  h1, h2, h3, h4, p, li, a, span, strong { overflow-wrap: break-word; }
  h1, h2, h3 { text-wrap: balance; }

  /* Header / navigation */
  .site-header { max-width: 100vw; }
  .site-search { max-width: 100vw; }
  .garden-menu { max-width: 100vw; }
  .garden-menu__mobile-nav a,
  .garden-menu__mobile-subnav a { min-height: 44px; display: flex; align-items: center; }

  /* Corporate page hero shared by About / Plants / Services / Blog / Contact / R&D */
  .corporate-hero__container,
  .corporate-hero__container--minimal { width: var(--container) !important; }
  .corporate-hero__media img { object-position: center; }

  /* Homepage — avoid desktop-only column pressure. */
  .about-preview__grid,
  .services-showcase__heading,
  .projects-showcase__heading { min-width: 0; }
  .services-showcase__copy,
  .projects-showcase__heading > div,
  .journal-showcase__heading { min-width: 0; }

  /* About page */
  .page-about .home-about__grid,
  .page-about .garden-approach__grid,
  .page-about .why-verben__intro { min-width: 0; }
  .page-about .about-mv__container { width: var(--container); }

  /* Plants */
  .page-plants .plants-collections__inner,
  .page-plants .plant-catalog__inner,
  .page-plants .plant-advisor__inner,
  .page-plants .plant-inspiration__inner { max-width: 100%; }
  .page-plants .plant-advisor__panel,
  .page-plants .plant-catalog__results { min-width: 0; }

  /* Services / service detail */
  .page-services .services-page__inner,
  .page-service-detail .service-master-shell { max-width: 100%; }
  .page-service-detail .service-master-intro__content,
  .page-service-detail .service-master-needs__intro,
  .page-service-detail .service-master-process__intro { min-width: 0; }

  /* Corporate solutions */
  .page-solutions .solutions-intro__container,
  .page-solutions .solutions-process__container,
  .page-solutions .solutions-cta__container { max-width: 100%; }

  /* Blog / article */
  .page-blog .blog-index__layout,
  .page-blog-detail .blog-detail-layout,
  .page-blog-detail .blog-article__main { min-width: 0; }

  /* Contact / quote */
  .page-contact .contact-reference__inner,
  .page-contact .contact-process__grid,
  .page-quote .quote-shell { max-width: 100%; }

  /* Project detail inherits service-detail visual language. */
  .project-detail-content,
  .project-detail__body { min-width: 0; }
}

@media (max-width: 820px) {
  /* Consistent section rhythm on tablets and large phones. */
  .collections,
  .elite-plants,
  .garden-season,
  .about-preview,
  .home-about,
  .services-showcase,
  .projects-showcase,
  .journal-showcase,
  .service-connect,
  .plants-collections,
  .plant-catalog,
  .plant-advisor,
  .plant-inspiration,
  .services-page,
  .service-testimonials,
  .garden-approach,
  .why-verben,
  .rnd-selection,
  .rnd-production,
  .rnd-scenario,
  .solutions-intro,
  .solutions-audience,
  .solutions-process,
  .contact-reference,
  .contact-process,
  .contact-visit,
  .blog-index,
  .blog-article { scroll-margin-top: 78px; }

  /* About: expensive visual composites should not dominate the mobile page. */
  .page-about .garden-approach__visual { min-height: 450px; }
  .page-about .home-about-collage { max-width: 680px; }
  .page-about .why-verben__cards,
  .page-about .why-verben__stats { gap: 14px; }

  /* Plants advisor: answer choices become a stable 2-column touch grid. */
  .page-plants .plant-advisor__options,
  .page-plants .plant-advisor__options--3,
  .page-plants .plant-advisor__options--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .page-plants .plant-advisor__options button { min-height: 46px; }

  /* Service detail: remove all lingering side-by-side compositions. */
  .page-service-detail .service-master-actions { width: 100%; }
  .page-service-detail .service-master-actions > * { min-width: 0; }
  .page-service-detail .service-master-audience-note { width: 100%; }

  /* Corporate solutions: two-card/service grids are more legible as one column. */
  .page-solutions .solutions-audience__grid { grid-template-columns: 1fr !important; }
  .page-solutions .solutions-process__services { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* Quote upload and support blocks never force horizontal overflow. */
  .page-quote .quote-general-upload,
  .page-quote .quote-general-support,
  .page-quote .quote-information { min-width: 0; }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  :root { --mobile-readable: 14px; --mobile-small: 12px; }
  body { font-size: 14.5px; line-height: 1.6; }

  /* Global readability and touch standards. */
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; }
  button, [role="button"], .btn, a.btn { min-height: 44px; }
  .eyebrow { font-size: 10.5px !important; line-height: 1.35; }
  .corporate-breadcrumb__home,
  .corporate-breadcrumb__current,
  .corporate-breadcrumb__arrow { font-size: 11.5px !important; }

  /* Header */
  .topbar__inner,
  .nav-shell__inner,
  .site-search__inner { max-width: 100%; }
  .nav-shell__inner { gap: 10px; }
  .site-search-toggle__label { display: none; }
  .garden-menu__utilities { grid-template-columns: 1fr !important; }
  .garden-menu__utilities a { min-height: 68px; }
  .garden-menu__mobile-nav { margin-top: 18px; }

  /* Homepage hero / collections */
  .hero__copy-inner { max-width: 100%; }
  .hero h1 { text-wrap: balance; }
  .hero__lead { font-size: 14.5px !important; }

  /* MOBILE HERO SOFT TRANSITION V3 — 2026-09-09
   * Keep the photograph high in the mobile hero and soften only its top edge.
   * The short blend avoids both a hard horizontal cut and an oversized blank
   * ivory band before the CMS-managed hero image.
   */
  .hero {
    background: var(--ivory-50) !important;
    border-bottom: 0 !important;
  }
  .hero__copy {
    position: relative;
    z-index: 4;
    background: var(--ivory-50) !important;
  }
  .hero__visual {
    position: relative;
    z-index: 2;
    margin-top: -8px !important;
    background: var(--ivory-50) !important;
    overflow: hidden !important;
  }
  .hero__visual::before {
    content: "";
    display: block !important;
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    height: 76px;
    pointer-events: none;
    background: linear-gradient(180deg,
      var(--ivory-50) 0%,
      rgba(248,246,240,.92) 14%,
      rgba(248,246,240,.68) 34%,
      rgba(248,246,240,.34) 62%,
      rgba(248,246,240,.10) 82%,
      rgba(248,246,240,0) 100%);
  }
  .hero-slide img {
    object-position: center 46% !important;
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.66) 10%,
      rgba(0,0,0,.90) 20%,
      #000 30%,
      #000 100%) !important;
    mask-image: linear-gradient(180deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.66) 10%,
      rgba(0,0,0,.90) 20%,
      #000 30%,
      #000 100%) !important;
  }
  .hero__visual-shade {
    background: linear-gradient(180deg, rgba(25,45,34,0) 0%, rgba(25,45,34,.018) 30%, rgba(25,45,34,.055) 100%) !important;
  }

  .collection-showcase__track,
  .collections-marquee { scroll-padding-inline: 14px; }

  /* HOME — Featured plants. */
  .elite-plants { padding-block: 42px 50px !important; }
  .elite-plants__intro h2 {   }
  .elite-plants__intro > p:not(.eyebrow) { font-size: 13.5px !important; line-height: 1.58 !important; }
  .elite-plants__cards[data-elite-plants-slider] { gap: 12px !important; padding-right: 14px !important; }
  .elite-plants__cards[data-elite-plants-slider] > .elite-plant-card {
    flex: 0 0 min(278px, 76vw) !important;
    width: min(278px, 76vw) !important;
    max-width: min(278px, 76vw) !important;
  }
  .elite-plant-card h3 { font-size: 18px !important; font-weight: 600; }
  .elite-plant-card__meta { font-size: 12px !important; line-height: 1.4; }
  .elite-plant-card__cta { min-height: 44px; font-size: 13px; }

  /* HOME — Knowledge Center: two cards visible side-by-side, swipe for more. */
  .journal-showcase { padding: 46px 0 52px !important; }
  .journal-showcase__heading { margin-bottom: 22px !important; }
  .journal-showcase__heading h2 {   }
  .journal-showcase__heading > p:last-child { font-size: 13.5px !important; line-height: 1.58 !important; }
  .journal-grid {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 12px) / 2);
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    padding: 2px 0 8px;
  }
  .journal-grid::-webkit-scrollbar { display: none; }
  .journal-card,
  .journal-card:last-child,
  .journal-card--compact {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid rgba(25,45,34,.10);
    border-radius: 15px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 8px 22px rgba(25,45,34,.035);
    scroll-snap-align: start;
  }
  .journal-card__media,
  .journal-card--compact .journal-card__media {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1.36 / 1 !important;
    border-radius: 0 !important;
  }
  .journal-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .journal-card__date {
    top: 0 !important;
    left: 9px !important;
    width: 45px !important;
    min-height: 51px !important;
    padding: 7px 4px 10px !important;
    font-size: 9.5px !important;
  }
  .journal-card__date strong { font-size: 14px !important; }
  .journal-card__body {
    flex: 1;
    min-width: 0;
    padding: 12px 11px 13px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .journal-card h3 { margin: 0; font-size: 15.5px !important; line-height: 1.22 !important; font-weight: 600; }
  .journal-card h3 a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .journal-card__body > p {
    margin: 8px 0 0 !important;
    font-size: 11.8px !important;
    line-height: 1.48 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .journal-card__more {
    margin-top: auto !important;
    padding-top: 11px !important;
    font-size: 10.5px !important;
    font-weight: 650;
    white-space: normal !important;
  }
  .journal-showcase__footer { margin-top: 20px !important; }
  .journal-showcase__footer .btn { min-height: 48px; }

  /* HOME — seasonal recommendation engine. */
  .garden-season { padding: 26px 0 34px !important; }
  .garden-season__shell { width: calc(100% - 20px) !important; padding: 17px 12px 16px !important; gap: 15px !important; }
  .garden-season h2 { max-width: 100% !important;  }
  .garden-season__intro-copy { max-width: none !important; font-size: 13.5px !important; line-height: 1.58 !important; }
  .garden-season__filters { padding: 16px 13px 14px !important; }
  .garden-season-field label { font-size: 12.5px !important; font-weight: 650; }
  .garden-season-select select { height: 50px; font-size: 16px !important; }
  .garden-season__submit { min-height: 50px; font-size: 12.5px !important; }
  .garden-season__reset { font-size: 11.5px !important; }
  .garden-season__filter-note { font-size: 11.5px !important; }
  .garden-season__tab { min-height: 44px; font-size: 12px !important; }
  .garden-season-card__toggle { min-height: 84px !important; }
  .garden-season-card__summary h3 { font-size: 14.5px !important; }
  .garden-season-card__period strong { font-size: 11.5px !important; }
  .garden-season-card__meta-item { font-size: 11px !important; }
  .garden-season-card__reason { font-size: 11.5px !important; line-height: 1.5; }
  .garden-season__status { font-size: 11.5px !important; line-height: 1.45; }

  /* HOME — about / services / projects / contact blocks. */
  .home-about { padding-block: 70px 74px !important; }
  .home-about-collage { min-height: 500px !important; }
  .home-about__content > h2 {  }
  .home-about__lead { font-size: 13.5px !important; line-height: 1.65 !important; }
  .home-about-stat span { font-size: 11.5px !important; }
  .home-about-feature span { font-size: 12.5px !important; }
  .services-showcase__copy h2,
  .projects-showcase__heading h2 {  }
  .services-showcase__copy > p:last-child,
  .projects-showcase__heading > p:last-child { font-size: 13.5px !important; line-height: 1.6; }
  .service-card { min-height: 360px !important; }
  .service-card__body { padding: 88px 48px 24px 22px !important; }
  .service-card p { font-size: 13.5px !important; line-height: 1.55; }
  .project-feature__content em { font-size: 11.5px !important; }
  .service-connect__eyebrow { font-size: 10.5px !important; }
  .service-connect__lead { font-size: 13.5px !important; }
  .service-connect__stat span { font-size: 11.5px !important; }

  /* About page mobile collage: stats must stay above image layers and remain fully visible. */
  .page-about .home-about-collage { min-height: 560px !important; }
  .page-about .home-about-stat { z-index: 4 !important; }
  .page-about .home-about-card { z-index: 1; }
  .page-about .home-about__lead--secondary { margin-top: 12px !important; }
  .page-solutions .solutions-intro__lead--secondary { margin-top: 12px !important; }

  /* ABOUT */
  .page-about .garden-approach { padding: 52px 0 58px !important; }
  .page-about .garden-approach h2 {  }
  .page-about .garden-approach__lead { font-size: 13.5px !important; line-height: 1.62; }
  .page-about .garden-approach__step { grid-template-columns: 42px minmax(0,1fr) !important; gap: 11px !important; }
  .page-about .garden-approach__number { width: 40px; height: 40px; }
  .page-about .garden-approach__step-icon { display: none; }
  .page-about .garden-approach__step h3 { font-size: 17.5px !important; }
  .page-about .garden-approach__step p { font-size: 12.5px !important; line-height: 1.55; }
  .page-about .garden-approach__visual { min-height: 410px !important; }
  .page-about .garden-approach__seal { display: none !important; }
  .page-about .about-mv__card { grid-template-columns: 46px minmax(0,1fr) !important; gap: 14px !important; padding: 22px 18px 23px !important; }
  .page-about .about-mv__icon { width: 44px !important; height: 44px !important; }
  .page-about .about-mv__kicker { font-size: 9.5px !important; }
  .page-about .about-mv__content h2 {  }
  .page-about .about-mv__body { font-size: 13.5px !important; line-height: 1.58; }
  .page-about .about-mv__note { font-size: 12px !important; }
  .page-about .why-verben__copy h2 {  }
  .page-about .why-verben-card { min-height: 0 !important; }

  /* PLANTS LISTING / ADVISOR */
  .page-plants .plants-collections,
  .page-plants .plant-advisor,
  .page-plants .plant-inspiration { padding-block: 48px 58px !important; }
  .page-plants .plants-collections__title,
  .page-plants .plant-advisor__title,
  .page-plants .plant-inspiration__title {  }
  .page-plants .plants-collections__intro,
  .page-plants .plant-advisor__lead,
  .page-plants .plant-inspiration__lead { font-size: 13.5px !important; line-height: 1.6 !important; }
  .page-plants .plant-advisor__question-label { font-size: 12.5px !important; font-weight: 650; }
  .page-plants .plant-advisor__options button { min-height: 46px; padding-inline: 8px; font-size: 12px !important; }
  .page-plants .plant-advisor-benefit__text { font-size: 12.5px !important; }
  .page-plants .plant-advisor-expert-card__text { font-size: 11.5px !important; }
  .page-plants .plant-advisor__note { font-size: 11.5px !important; }
  .page-plants .plant-catalog__filter-count { font-size: 11.5px !important; }
  .page-plants .plant-card__name { font-size: 17px !important; font-weight: 600; }
  .page-plants .plant-card__botanical { font-size: 10.5px !important; }
  .page-plants .plant-inspiration-card__link,
  .page-plants .plant-inspiration-card:last-child .plant-inspiration-card__link { flex-direction: column !important; }
  .page-plants .plant-inspiration-card__media,
  .page-plants .plant-inspiration-card:last-child .plant-inspiration-card__media { width: 100%; height: min(54vw, 230px) !important; flex-basis: auto !important; }
  .page-plants .plant-inspiration-card__body { min-height: 0 !important; padding: 18px 18px 20px !important; }

  /* PLANT DETAIL */
  .page-plant-detail .plant-detail-breadcrumb { font-size: 11.5px !important; }
  .page-plant-detail .plant-detail-hero h1 { font-size: clamp(34px, 9.7vw, 42px) !important; }
  .page-plant-detail .plant-detail-hero__lead,
  .page-plant-detail .plant-detail-copy__summary { font-size: 13.5px !important; line-height: 1.6; }
  .page-plant-detail .plant-detail-badge { font-size: 11.5px !important; }
  .page-plant-detail .plant-detail-facts { grid-template-columns: 94px minmax(0,1fr) !important; font-size: 12.5px !important; }
  .page-plant-detail .plant-feature { min-height: 96px !important; }
  .page-plant-detail .plant-related-grid { grid-template-columns: 1fr !important; }
  .page-plant-detail .plant-section-heading { align-items: flex-start; gap: 10px; }
  .page-plant-detail .plant-section-heading > a { font-size: 12px; white-space: normal; text-align: right; }

  /* SERVICES LISTING */
  .page-services .services-page__head h2 {  }
  .page-services .services-page__head p:not(.services-page__eyebrow) { font-size: 13.5px !important; }
  .page-services .service-index-card h3 { font-size: 20px !important; }
  .page-services .service-index-card p { font-size: 13px !important; line-height: 1.58; }
  .page-services .service-testimonials__head h2 {  }

  /* SERVICE / PROJECT DETAIL */
  .page-service-detail .service-master-breadcrumb,
  .page-service-detail .vg-service-breadcrumb { font-size: 11.5px !important; }
  .page-service-detail .service-master-hero h1 { font-size: clamp(34px, 9.7vw, 42px) !important; }
  .page-service-detail .service-master-intro__content p,
  .page-service-detail .service-master-needs__intro p,
  .page-service-detail .service-master-process__intro p { font-size: 13.5px !important; line-height: 1.62; }
  .page-service-detail .service-master-feature-list strong { font-size: 14px !important; }
  .page-service-detail .service-master-feature-list small,
  .page-service-detail .service-master-needs-row__copy small,
  .page-service-detail .service-master-note p,
  .page-service-detail .service-master-audience-note p { font-size: 12px !important; line-height: 1.5; }
  .page-service-detail .service-master-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  .page-service-detail .service-master-actions a { width: 100%; }
  .project-detail-content .service-detail__feature-grid { grid-template-columns: 1fr !important; }

  /* R&D */
  .page-rnd .rnd-selection,
  .page-rnd .rnd-production,
  .page-rnd .rnd-scenario { padding-block: 48px 56px !important; }
  .page-rnd .rnd-selection h2,
  .page-rnd .rnd-production h2,
  .page-rnd .rnd-scenario__intro h2 {  }
  .page-rnd .rnd-selection__lead,
  .page-rnd .rnd-production__copy > p,
  .page-rnd .rnd-scenario__intro > p:last-child { font-size: 13.5px !important; line-height: 1.62; }
  .page-rnd .rnd-selection__eyebrow,
  .page-rnd .rnd-production__eyebrow,
  .page-rnd .rnd-scenario__eyebrow { font-size: 10px !important; }
  .page-rnd .rnd-step__copy p,
  .page-rnd .rnd-use-card__body p,
  .page-rnd .rnd-production__steps p,
  .page-rnd .rnd-production__cta-copy p,
  .page-rnd .rnd-metrics__foot p { font-size: 11.5px !important; line-height: 1.5; }
  .page-rnd .rnd-use-card__tags span { font-size: 9.5px !important; }
  .page-rnd .rnd-scenario__signature p { font-size: 9px !important; line-height: 1.4; }
  .page-rnd .rnd-production__visual > img { width: 100% !important; height: auto !important; }
  .page-rnd .rnd-production__network-mark img { width: 24px !important; height: 24px !important; position: static !important; inset: auto !important; max-width: 24px !important; }
  .page-rnd .rnd-production__steps strong { white-space: normal !important; font-size: 12.5px !important; }

  /* CORPORATE SOLUTIONS */
  .page-solutions .solutions-intro h2,
  .page-solutions .solutions-audience__heading h2,
  .page-solutions .solutions-process__hero h2,
  .page-solutions .solutions-cta h2 {  }
  .page-solutions .solutions-intro__copy p,
  .page-solutions .solutions-process__hero-copy > p:last-child,
  .page-solutions .solutions-cta__lead { font-size: 13.5px !important; line-height: 1.62; }
  .page-solutions .solutions-process__eyebrow,
  .page-solutions .solutions-cta__eyebrow { font-size: 10px !important; }
  .page-solutions .solutions-process__services { grid-template-columns: 1fr !important; }
  .page-solutions .solutions-process-service {
    grid-template-columns: 40px 92px minmax(0,1fr) !important;
    gap: 6px 12px !important;
  }
  .page-solutions .solutions-process-service > img { width: 88px !important; height: 74px !important; }
  .page-solutions .solutions-process-service h3 { font-size: 16.5px !important; }
  .page-solutions .solutions-process-service p { font-size: 11.5px !important; line-height: 1.45; }

  /* CONTACT */
  .page-contact .contact-reference h2,
  .page-contact .contact-process h2 {  }
  .page-contact .contact-reference__lead,
  .page-contact .contact-process__lead { font-size: 13.5px !important; line-height: 1.62; }
  .page-contact .contact-reference__eyebrow,
  .page-contact .contact-process__eyebrow { font-size: 10.5px !important; }
  .page-contact .contact-reference__gardener { max-width: 78vw; }
  .page-contact .contact-process__collage { min-height: 390px !important; }
  .page-contact .contact-process__image--left { height: 270px !important; }
  .page-contact .contact-process__image--top { height: 190px !important; }
  .page-contact .contact-process__image--bottom { height: 180px !important; }
  .page-contact .contact-reference__error { font-size: 12.5px; }

  /* BLOG / ARTICLE */
  .page-blog .blog-index { padding-block: 46px 58px !important; }
  .page-blog .inspiration-taxonomy { display: flex; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; }
  .page-blog .inspiration-taxonomy::-webkit-scrollbar { display: none; }
  .page-blog .inspiration-taxonomy__item { flex: 0 0 auto; min-height: 42px; font-size: 12px !important; }
  .page-blog .blog-list-card__body { padding: 18px 17px 20px !important; }
  .page-blog .blog-list-card__date { font-size: 11.5px !important; }
  .page-blog .blog-results__count { white-space: normal; }
  .page-blog-detail .blog-article { padding-block: 46px 58px !important; }
  .page-blog-detail .blog-article__header h1 { font-size: clamp(34px, 9.7vw, 43px) !important; }
  .page-blog-detail .blog-article__lead { font-size: 15px !important; line-height: 1.6; }
  .page-blog-detail .blog-article__content p,
  .page-blog-detail .blog-article__list li { font-size: 14.5px !important; line-height: 1.72; }

  /* QUOTE */
  .page-quote .quote-breadcrumb { white-space: normal !important; overflow: visible !important; }
  .page-quote .quote-context-pills span,
  .page-quote .quote-context-pills--general span { font-size: 10.5px !important; }
  .page-quote .quote-general-hero__note { font-size: 11.5px !important; }
  .page-quote .quote-general-hero h1,
  .page-quote .quote-hero h1 { font-size: clamp(34px, 9.7vw, 43px) !important; }
  .page-quote .quote-general-hero__lead,
  .page-quote .quote-hero__lead { font-size: 14px !important; }
  .page-quote .quote-general-security,
  .page-quote .quote-security { white-space: normal !important; font-size: 11px !important; }
  .page-quote .quote-general-upload__action { min-width: 0 !important; width: 100%; }
  .page-quote .quote-submit { width: 100%; }

  /* FOOTER / CTA */
  .project-cta__eyebrow,
  .footer-cta__eyebrow { font-size: 10px !important; }
  .footer-cta__copy p,
  .site-footer__brand p,
  .site-footer__contact-row,
  .site-footer__column a { font-size: 12.5px !important; line-height: 1.55; }
  .site-footer__legal { font-size: 11.5px !important; }
  .site-footer__socials { flex-wrap: wrap; }

  /* Floating progress control: content-safe on phones. */
  .page-progress { width: 50px !important; height: 50px !important; left: 10px !important; right: auto !important; bottom: var(--page-progress-bottom, 10px) !important; }
  .page-progress::before { inset: 5px !important; }
  .page-progress__value { font-size: 12px !important; }
}

@media (max-width: 420px) {
  /* Keep the Knowledge Center two-up, but tighten without losing legibility. */
  .journal-grid { grid-auto-columns: calc((100% - 10px) / 2); gap: 10px !important; }
  .journal-card h3 { font-size: 14.5px !important; line-height: 1.2 !important; }
  .journal-card__body > p { font-size: 11.3px !important; -webkit-line-clamp: 3; }
  .journal-card__body { padding: 10px 9px 11px !important; }
  .journal-card__date { left: 7px !important; width: 42px !important; min-height: 49px !important; }

  .elite-plants__cards[data-elite-plants-slider] > .elite-plant-card {
    flex-basis: min(268px, 78vw) !important;
    width: min(268px, 78vw) !important;
    max-width: min(268px, 78vw) !important;
  }

  .page-about .garden-approach__visual { min-height: 370px !important; }
  .page-about .about-mv__card { grid-template-columns: 1fr !important; }
  .page-about .about-mv__icon { margin-bottom: 2px; }

  .page-plants .plant-advisor__options,
  .page-plants .plant-advisor__options--3,
  .page-plants .plant-advisor__options--4 { grid-template-columns: 1fr 1fr !important; }

  .page-plant-detail .plant-detail-facts { grid-template-columns: 86px minmax(0,1fr) !important; }

  .page-solutions .solutions-process-service { grid-template-columns: 36px 78px minmax(0,1fr) !important; }
  .page-solutions .solutions-process-service > img { width: 74px !important; height: 64px !important; }

  .page-contact .contact-process__collage { min-height: 350px !important; }
}

@media (max-height: 620px) and (orientation: landscape) and (max-width: 1024px) {
  .garden-menu__intro { display: none; }
  .garden-menu__mobile-nav { margin-top: 0; }
  .corporate-hero { min-height: 210px !important; }
  .garden-season__shell { grid-template-areas: "filters main" !important; grid-template-columns: minmax(260px,.7fr) minmax(0,1fr) !important; }
  .garden-season__intro { display: none; }
}

@media (hover: none) and (pointer: coarse) {
  .journal-card,
  .elite-plant-card,
  .service-card,
  .plant-card,
  .plant-inspiration-card,
  .solutions-audience-card { transform: none !important; }
}

/* Global public H2 typography — 2026-09-09 */
/*
 * Final delivery lock: every public-facing <h2> is exactly 42px.
 * Existing page styles contain highly-specific !important declarations.
 * A cascade-layer important rule intentionally outranks those unlayered
 * author-important rules without touching the admin stylesheet.
 */


/* 2026-09-09 — Minimal header CTA + mobile menu refresh */
.header-quote {
  min-width: 116px;
  height: 54px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #173b2d;
  border-radius: 4px;
  background: #173b2d;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.header-quote:hover { transform: translateY(-1px); background: #0f3024; border-color: #0f3024; color: #fff; }

.menu-toggle.menu-toggle--minimal {
  display: none !important;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(25,45,34,.18);
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
  transform: none;
}
.menu-toggle.menu-toggle--minimal span,
.menu-toggle.menu-toggle--minimal span:nth-child(2),
.menu-toggle.menu-toggle--minimal span:nth-child(3) {
  width: 17px;
  height: 1.5px;
  justify-self: center;
  background: #192d22;
  border-radius: 2px;
  transform: none;
}
.menu-toggle.menu-toggle--minimal:hover { transform: none; background: #f8f7f1; border-color: rgba(25,45,34,.32); }

/* The former rich Garden drawer is now mobile-only and deliberately minimal. */
@media (min-width: 981px) {
  .garden-menu-layer { display: none !important; }
}

@media (max-width: 980px) {
  .nav-actions { gap: 8px !important; }
  .header-quote {
    min-width: 92px;
    height: 46px;
    padding: 0 15px;
    font-size: 12.5px;
  }
  .menu-toggle.menu-toggle--minimal { display: grid !important; }

  .garden-menu {
    width: min(390px, 100vw) !important;
    min-width: 0 !important;
    color: #f7f4eb;
    background: #122f24 !important;
    border-left: 1px solid rgba(255,255,255,.08);
    box-shadow: -18px 0 54px rgba(7,20,14,.22);
  }
  .garden-menu::before,
  .garden-menu__botanical,
  .garden-menu__contact,
  .garden-menu__services,
  .garden-menu__utilities { display: none !important; }
  .garden-menu__top {
    min-height: 82px !important;
    padding: 18px 22px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }
  .garden-menu__brand { width: 150px !important; }
  .garden-menu__close {
    width: 42px !important;
    height: 42px !important;
    border-color: rgba(255,255,255,.22) !important;
  }
  .garden-menu__scroll {
    padding: 18px 22px 22px !important;
    display: flex;
    flex-direction: column;
  }
  .garden-menu__mobile-nav {
    order: 1;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column;
    border: 0 !important;
  }
  .garden-menu__mobile-nav > a,
  .garden-menu__mobile-parent {
    min-height: 52px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.90) !important;
    font-size: 15px !important;
    font-weight: 550;
  }
  .garden-menu__mobile-nav > a.is-active,
  .garden-menu__mobile-nav > a.is-current { color: #fff !important; font-weight: 700; }
  .garden-menu__mobile-group { border-bottom: 1px solid rgba(255,255,255,.10); }
  .garden-menu__mobile-group .garden-menu__mobile-parent { border-bottom: 0 !important; }
  .garden-menu__mobile-subnav {
    display: grid;
    gap: 0;
    padding: 0 0 10px 14px;
  }
  .garden-menu__mobile-subnav a {
    min-height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    border: 0 !important;
    color: rgba(255,255,255,.62) !important;
    font-size: 12.5px !important;
  }
  .garden-menu__intro {
    order: 2;
    margin: 18px 0 0 !important;
  }
  .garden-menu__intro > .garden-menu__eyebrow,
  .garden-menu__intro > h2,
  .garden-menu__intro > p { display: none !important; }
  .garden-menu__actions {
    margin: 0 !important;
    display: block !important;
  }
  .garden-menu__primary {
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 18px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 14px !important;
    border-radius: 4px !important;
    background: #f6f1e6 !important;
    color: #173b2d !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }
  .garden-menu__text-link { display: none !important; }
  .garden-menu__sibling {
    order: 3;
    min-height: 52px !important;
    margin: 10px 0 0 !important;
    padding: 8px 12px !important;
    border-color: rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.025) !important;
  }
  .garden-menu__sibling img { width: 180px !important; height: 38px !important; }
  .garden-menu__sibling > span { color: rgba(255,255,255,.72) !important; font-size: 18px !important; }
}

@media (max-width: 640px) {
  .header-quote {
    min-width: 78px;
    height: 42px;
    padding: 0 11px;
    font-size: 11.5px;
  }
  .menu-toggle.menu-toggle--minimal { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
  .garden-menu { width: 100% !important; }
}

@media (max-width: 430px) {
  .nav-actions { gap: 6px !important; }
  .header-quote { min-width: 70px; height: 39px; padding: 0 9px; font-size: 10.5px; }
  .menu-toggle.menu-toggle--minimal { width: 39px !important; height: 39px !important; flex-basis: 39px !important; }
}


/* ================================================================
   PHASE 2 — CROSS-DEVICE STABILITY CONTRACT
   Last-mile safety shared by every public surface. Existing page-specific
   breakpoint layouts stay authoritative; these rules only prevent overflow,
   oversized media and unshrinkable grid/flex children.
   ================================================================ */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
img,video,picture{max-width:100%}
main,header,footer,section,article,aside,nav{min-width:0}
:is(.container,.section-inner,.section-container,.page-container,.content-wrap,.content-inner){min-width:0}
:is(.grid,.row,[class*="__grid"],[class*="-grid"])>*{min-width:0}
:is(h1,h2,h3,h4,p,li,dd,dt){overflow-wrap:break-word}
input,select,textarea{max-width:100%;min-width:0}

@media(max-width:760px){
  :is(h1,.hero-title,.page-hero h1){text-wrap:balance;max-width:100%}
  :is(.btn,.button,[class*="__button"]){max-width:100%}
  .page-hero :is(p,.lead){max-width:100%}
}
@media(max-width:420px){
  :is(h1,.hero-title,.page-hero h1){hyphens:auto}
}

/* ========================================================================
   VERBEN GARDEN — RELEASE MOBILE CLEANUP (2026-09-11)
   Final-layer overrides for quote/service/article layouts and mobile header.
   ======================================================================== */
@media (max-width: 768px) {
  .site-header .topbar { display:none !important; }
  .page-quote.quote-general .quote-page { padding-top:0 !important; }
  .page-quote.quote-general .quote-general-hero,
  .page-quote.quote-general .quote-general-hero__inner { min-height:168px !important; }
  .page-quote.quote-general .quote-general-hero__inner { padding:22px 0 !important; }
  .page-quote.quote-general .quote-general-hero h1 { font-size:clamp(32px,9vw,40px) !important; }
  .page-quote.quote-general .quote-general-hero__lead { margin-top:9px !important; max-width:100% !important; font-size:12.5px !important; line-height:1.5 !important; }
  .page-quote:not(.quote-general) .quote-page { padding-top:18px !important; }
}
@media (max-width: 640px) {
  .page-service-detail.visual-service-detail.service-master-page .service-master-shell { width:calc(100vw - 36px) !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-hero { min-height:248px !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-hero__inner { min-height:248px !important; display:flex !important; flex-direction:column; justify-content:center; padding:28px 0 26px !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-breadcrumb { display:none !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-hero h1 { max-width:92%; font-size:clamp(34px,10.2vw,43px) !important; line-height:.98 !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-hero p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; max-width:94%; margin-top:12px !important; font-size:13px !important; line-height:1.48 !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-intro__content,
  .page-service-detail.visual-service-detail.service-master-page .service-master-needs__intro,
  .page-service-detail.visual-service-detail.service-master-page .service-master-process__intro { padding-left:4px !important; padding-right:4px !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-intro__content h2,
  .page-service-detail.visual-service-detail.service-master-page .service-master-needs__intro h2,
  .page-service-detail.visual-service-detail.service-master-page .service-master-process__intro h2 {   }
  .page-service-detail.visual-service-detail.service-master-page .service-master-intro { padding-top:46px !important; }
  .page-service-detail.visual-service-detail.service-master-page .service-master-needs,
  .page-service-detail.visual-service-detail.service-master-page .service-master-process { padding-top:48px !important; }
}
.page-blog-detail .blog-article__images--single { grid-template-columns:minmax(0,900px) !important; justify-content:center !important; gap:0 !important; }
.page-blog-detail .blog-article__images--single figure { width:100%; margin-inline:auto; }
.page-blog-detail .blog-article__images--single img { width:100%; aspect-ratio:16/10; object-fit:cover; }
@media (max-width: 768px) {
  .page-quote:not(.quote-general) .quote-page { padding-top:0 !important; }
}
@media (max-width: 768px) {
  html { scroll-padding-top:84px !important; }
}


/* REV13 — STATIC-LAYER MOBILE H2 AUTHORITY
   This lives in an already-loaded stylesheet so it does not depend on PHP
   template/opcache refreshes. Compact card/form/sidebar H2s stay untouched. */
@media (max-width: 980px) {
  html body main#main-content :is(
    .about-preview__content > h2,
    .collections__intro h2,
    .elite-plants__intro h2,
    .services-showcase__copy h2,
    .service-connect__content h2,
    .why-verben__copy h2,
    .projects-showcase__heading h2,
    .journal-showcase__heading h2,
    .seasonal-calendar__intro h2,
    .home-about__content > h2,
    .garden-approach__content > h2,
    .project-cta h2,
    .services-page__head h2,
    .service-testimonials__head h2,
    .contact-reference h2,
    .contact-process h2,
    .contact-visit h2,
    .solutions-intro__title-wrap h2,
    .solutions-process__hero h2,
    .solutions-cta h2,
    .rnd-selection h2,
    .rnd-scenario__intro h2,
    .rnd-production h2,
    .plants-collections__title,
    .plant-advisor__title,
    .plant-inspiration__title,
    .plant-catalog__title,
    .plant-detail-copy h2,
    .plant-section-heading h2,
    .service-master-intro__content > h2,
    .service-master-heading > h2,
    .service-master-needs__intro > h2,
    .service-master-process__intro > h2,
    .service-master-faq .service-master-heading h2,
    .service-master-projects__head h2,
    .service-master-contact h2,
    .blog-article__content h2
  ) {
    
    
    
  }
}

@media (max-width: 640px) {
  html body main#main-content :is(
    .about-preview__content > h2,
    .collections__intro h2,
    .elite-plants__intro h2,
    .services-showcase__copy h2,
    .service-connect__content h2,
    .why-verben__copy h2,
    .projects-showcase__heading h2,
    .journal-showcase__heading h2,
    .seasonal-calendar__intro h2,
    .home-about__content > h2,
    .garden-approach__content > h2,
    .project-cta h2,
    .services-page__head h2,
    .service-testimonials__head h2,
    .contact-reference h2,
    .contact-process h2,
    .contact-visit h2,
    .solutions-intro__title-wrap h2,
    .solutions-process__hero h2,
    .solutions-cta h2,
    .rnd-selection h2,
    .rnd-scenario__intro h2,
    .rnd-production h2,
    .plants-collections__title,
    .plant-advisor__title,
    .plant-inspiration__title,
    .plant-catalog__title,
    .plant-detail-copy h2,
    .plant-section-heading h2,
    .service-master-intro__content > h2,
    .service-master-heading > h2,
    .service-master-needs__intro > h2,
    .service-master-process__intro > h2,
    .service-master-faq .service-master-heading h2,
    .service-master-projects__head h2,
    .service-master-contact h2,
    .blog-article__content h2
  ) {
    
    
    
    text-wrap: balance;
  }
}