/* =========================================================
   INDEX — DESKTOP COMPOSITION
   ---------------------------------------------------------
   Desktop layout refinements for index.html.
   The goal is not to simply scale the page down: it gives the
   home page one deliberate content width, one vertical rhythm
   and a smaller type hierarchy while leaving all GSAP/JS
   choreography untouched.
   ========================================================= */

body.home-page {
  --site-width: 1360px;
  --site-gutter: clamp(28px, 4vw, 64px);
  --section-y: clamp(72px, 5.8vw, 92px);
  --section-y-m: clamp(52px, 7vw, 68px);
  --content-gap: clamp(34px, 3.7vw, 54px);

  --type-hero: clamp(48px, 4.35vw, 66px);
  --type-section-xl: clamp(42px, 3.35vw, 56px);
  --type-section: clamp(32px, 2.45vw, 42px);
  --type-card: clamp(30px, 2.25vw, 40px);
  --body-lg: clamp(18px, 1.18vw, 20px);
  --body-md: clamp(16px, 1.02vw, 18px);
}

/* One visible content boundary on the entire home page. */
.home-page main .site-container,
.home-page .site-footer .site-container {
  width: min(var(--site-width), calc(100% - (2 * var(--site-gutter))));
  max-width: var(--site-width);
  margin-inline: auto;
}

.home-page main > section:not(.hero) {
  margin-block: 0;
  padding-block: var(--section-y);
}

/* =========================================================
   HERO
   Keep the cinematic treatment, but stop it consuming a full
   desktop monitor before the rest of the page starts.
   ========================================================= */

@media (min-width: 951px) {
  .home-page .hero {
    height: clamp(660px, 78vh, 760px);
    min-height: 660px;
  }

  .home-page .hero-copy {
    top: 25%;
    width: min(46vw, 620px);
  }

  .home-page .hero .eyebrow {
    margin-bottom: 24px;
    font-size: 8px;
    letter-spacing: 2.7px;
  }

  .home-page .hero-title {
    max-width: 16ch;
    line-height: .94;
  }

  .home-page .subtitle-mask {
    max-width: 43ch;
    margin-top: 18px;
  }

  .home-page .hero-subtitle {
    max-width: 43ch;
    color: rgba(255, 255, 255, .78);
    line-height: 1.45;
    text-shadow: 0 1px 18px rgba(0, 0, 0, .14);
  }

  .home-page .hero-button-slot {
    margin-top: 28px;
  }

  .home-page .hero-button {
    height: 54px;
  }



  .home-page .hero-form {
    bottom: 46px;
    width: min(30vw, 430px);
    min-width: 390px;
  }

  .home-page .hero-form .land-check {
    min-height: 392px;
    padding: 24px 25px 20px;
    border-radius: 25px;
  }

  .home-page .hero-form .land-check__progress {
    margin: 17px 0 22px;
  }

  .home-page .hero-form .land-check__heading {
    margin-bottom: 18px;
  }

  .home-page .hero-form .land-check__heading h2 {
    font-size: 27px;
  }

  .home-page .hero-form .land-check__surface {
    padding: 14px 15px 12px;
  }

  .home-page .hero-form .land-check__step-footer {
    margin-top: 17px;
  }

  .home-page .hero-meta {
    bottom: 22px;
  }
}

/* =========================================================
   PROCESS
   The previous version depended on two large min-heights and an
   absolutely positioned image stage. That produced the large dead
   area visible in the desktop capture. The composition is now a
   real two-column grid, so copy and imagery share the same height.
   ========================================================= */

@media (min-width: 951px) {
  .home-page .process-editorial {
    padding-block: var(--section-y);
  }

  .home-page .process-editorial__top {
    display: grid;
    grid-template-columns: minmax(330px, .82fr) minmax(0, 1.18fr);
    gap: clamp(48px, 5vw, 78px);
    align-items: start;
    min-height: 0;
  }

  .home-page .process-editorial__left {
    width: 100%;
    min-height: clamp(390px, 31vw, 470px);
  }

  .home-page .process-editorial__header {
    padding-top: 2px;
  }

  .home-page .process-editorial__kicker {
    margin-bottom: 22px;
  }

  .home-page .process-editorial__title {
    font-size: clamp(46px, 3.65vw, 58px);
    line-height: .94;
    letter-spacing: -.055em;
  }

  .home-page .process-editorial__lead {
    max-width: 43ch;
    margin-top: 20px;
    line-height: 1.5;
  }

  .home-page .process-editorial__visual-stage {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: clamp(390px, 31vw, 470px);
  }

  .home-page .process-editorial__visual--main {
    top: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 52px);
  }

  .home-page .process-editorial__visual-clip {
    border-radius: 24px;
  }

  .home-page .process-editorial__visual--detail {
    left: -18px;
    bottom: 0;
    width: clamp(175px, 16vw, 238px);
  }

  .home-page .process-editorial__detail-frame {
    inset: -11px -12px 11px 12px;
    border-radius: 21px;
  }

  .home-page .process-editorial__detail-clip {
    border-radius: 20px;
  }

  .home-page .process-editorial__annotation {
    bottom: 18px;
    left: 8px;
    font-size: clamp(16px, 1.2vw, 20px);
  }

  .home-page .process-editorial__visual-note {
    right: 2%;
    bottom: 12%;
  }

  .home-page .process-editorial__route-wrap {
    height: 118px;
    margin-top: 38px;
  }

  /* Route nodes and step copy share the exact same starts: 0 / 25 / 50 / 75%. */
  .home-page .process-editorial__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 4px;
  }

  .home-page .process-editorial__step {
    padding-left: 0;
    padding-right: clamp(24px, 2.4vw, 42px);
  }

  .home-page .process-editorial__step:last-child {
    padding-right: 0;
  }

  .home-page .process-editorial__step-label {
    margin-bottom: 11px;
    font-size: 8px;
    letter-spacing: 1.65px;
  }

  .home-page .process-editorial__step h3 {
    font-size: clamp(27px, 2vw, 34px);
    line-height: 1.02;
  }

  .home-page .process-editorial__step > p {
    max-width: 31ch;
    margin-top: 13px;
    font-size: clamp(15px, .98vw, 16.5px);
    line-height: 1.58;
  }

  .home-page .process-editorial__step ul {
    gap: 6px;
    margin-top: 18px;
  }

  .home-page .process-editorial__step li {
    padding-left: 24px;
    font-size: clamp(13px, .84vw, 14px);
    line-height: 1.5;
  }

  .home-page .process-editorial__footer {
    margin-top: 38px;
  }
}

/* =========================================================
   COMPARISON
   Keep the information compact, but make the two images and table
   read as one compact unit rather than a second hero section.
   ========================================================= */

@media (min-width: 701px) {
  .home-page .pv-compare {
    --compare-col-a: 22%;
    --compare-col-b: 39%;
    --compare-col-c: 39%;
    padding-block: var(--section-y);
  }

  .home-page .pv-compare__intro {
    margin-bottom: 38px;
  }

  .home-page .pv-compare__kicker {
    margin-bottom: 20px;
  }

  .home-page .pv-compare__intro-grid {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
    gap: clamp(42px, 5vw, 72px);
  }

  .home-page .pv-compare__title {
    font-size: var(--type-section-xl);
    line-height: .96;
  }

  .home-page .pv-compare__lead {
    font-size: var(--body-md);
    line-height: 1.55;
  }

  .home-page .pv-compare__visual-grid {
    margin-bottom: 28px;
  }

  .home-page .pv-compare__system {
    padding-left: 20px;
    padding-right: 12px;
  }

  .home-page .pv-compare__media {
    aspect-ratio: 2.25 / 1;
    border-radius: 10px;
  }

  .home-page .pv-compare__system-copy {
    padding-top: 17px;
  }

  .home-page .pv-compare__system-copy h3 {
    font-size: clamp(26px, 1.85vw, 32px);
  }

  .home-page .pv-compare__labels th {
    height: 42px;
    padding-inline: 20px;
  }

  .home-page .pv-compare__table tbody th,
  .home-page .pv-compare__table tbody td {
    height: 68px;
    padding: 15px 20px;
  }

  .home-page .pv-compare__table tbody th {
    padding-left: 0;
    font-size: 15px;
  }

  .home-page .pv-compare__table tbody td {
    font-size: 15px;
    line-height: 1.46;
  }

  .home-page .pv-compare__value {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
  }

  .home-page .pv-compare__status {
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .home-page .pv-compare__footer {
    margin-top: 28px;
  }

  .home-page .pv-compare__cta {
    min-width: 250px;
    height: 54px;
  }
}

/* =========================================================
   REVIEWS
   The asymmetric route remains, but the vertical offsets are small
   enough that all three reviews belong to one visible composition.
   ========================================================= */

@media (min-width: 951px) {
  .home-page .reviews-section {
    padding-block: var(--section-y);
  }

  .home-page .reviews-watermark {
    top: -50px;
    font-size: clamp(150px, 15vw, 245px);
  }

  .home-page .reviews-header {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(42px, 5vw, 72px);
  }

  .home-page .reviews-kicker {
    margin-bottom: 20px;
  }

  .home-page .reviews-title {
    max-width: 700px;
    font-size: var(--type-section-xl);
    line-height: .96;
  }

  .home-page .reviews-subline {
    margin-top: 14px;
  }

  .home-page .reviews-rating {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    max-width: 330px;
  }

  .home-page .reviews-google-badge {
    width: 58px;
    height: 58px;
  }

  .home-page .reviews-score strong {
    font-size: 34px;
  }

  .home-page .reviews-canvas {
    grid-template-columns: .95fr 1.1fr .95fr;
    gap: clamp(34px, 4vw, 58px);
    min-height: 420px;
    margin-top: 52px;
    padding: 8px 6px 0 26px;
  }

  .home-page .review-one { margin-top: 12px; }
  .home-page .review-two { margin-top: 78px; }
  .home-page .review-three { margin-top: 34px; }

  .home-page .review {
    padding-left: 22px;
    padding-bottom: 28px;
  }

  .home-page .review-index {
    margin-bottom: 12px;
  }

  .home-page .review-stars {
    margin-bottom: 12px;
  }

  .home-page .review blockquote {
    font-size: clamp(18px, 1.2vw, 21px);
    line-height: 1.46;
  }

  .home-page .review-featured blockquote {
    font-size: clamp(20px, 1.4vw, 24px);
    line-height: 1.4;
  }

  .home-page .review footer {
    margin-top: 18px;
    padding-left: 34px;
  }

  .home-page .reviews-footer {
    margin-top: 24px;
  }

  .home-page .reviews-link-group {
    padding-top: 58px;
  }

  .home-page .reviews-link-group .reviews-note {
    height: 54px;
  }

  .home-page .reviews-link-group .reviews-note svg {
    top: 14px;
    width: 45px;
    height: 45px;
  }
}

/* =========================================================
   FAQ + CONTACT
   Same outer rhythm and section-heading scale as the rest of home.
   ========================================================= */

@media (min-width: 951px) {
  .home-page .iab-faq__inner {
    grid-template-columns: minmax(300px, .66fr) minmax(0, 1.34fr);
    gap: clamp(48px, 5vw, 82px);
    align-items: start;
  }

  .home-page .iab-faq__intro h2 {
    margin-top: 1.05rem;
    font-size: var(--type-section-xl);
    line-height: .98;
  }

  .home-page .iab-faq__intro > p {
    max-width: 24ch;
    margin-top: .9rem;
  }

  .home-page .iab-faq__summary {
    min-height: 3.7rem;
    grid-template-columns: 2.8rem minmax(0, 1fr) 1.8rem;
    gap: .8rem;
  }

  .home-page .iab-faq__question {
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  }

  .home-page .iab-faq__answer {
    padding: 0 2.5rem 1.2rem 3.6rem;
    line-height: 1.55;
  }

  .home-page .iab-faq__more {
    margin-top: 1rem;
  }

  .home-page .site-contact {
    padding-block: var(--section-y);
  }

  .home-page .site-contact__inner {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(44px, 4.7vw, 68px);
    align-items: center;
  }

  .home-page .site-contact__intro h2 {
    max-width: 12ch;
    margin-top: 20px;
    font-size: var(--type-section-xl);
  }

  .home-page .site-contact__lead {
    margin-top: 16px;
    font-size: var(--body-md);
  }

  .home-page .site-contact__team-media {
    min-height: 205px;
    margin-top: 24px;
    border-radius: 20px;
  }

  .home-page .site-contact__team-copy {
    margin-top: 12px;
  }

  .home-page .site-contact__team-copy strong,
  .home-page .site-contact__team-copy span {
    font-size: clamp(15px, 1vw, 17px);
  }

  .home-page .site-contact__trust-list {
    margin-top: 20px;
    gap: 14px;
  }

  .home-page .site-contact__trust-item {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
  }

  .home-page .site-contact__trust-icon {
    width: 38px;
    height: 38px;
  }

  .home-page .site-contact__form.land-check {
    padding: 28px 30px 25px;
  }

  .home-page .site-contact__form .land-check__progress {
    margin: 18px 0 24px;
  }

  .home-page .site-contact__form-heading {
    margin-bottom: 18px;
  }

  .home-page .site-contact__form-heading h2 {
    font-size: clamp(28px, 2.1vw, 35px);
  }

  .home-page .site-contact__surface {
    gap: 12px 18px;
    padding: 15px 18px 16px;
  }

  .home-page .site-contact__textarea-shell {
    min-height: 92px;
  }

  .home-page .site-contact__textarea-shell textarea {
    min-height: 70px;
  }

  .home-page .site-contact__consent {
    margin-top: 14px;
  }

  .home-page .site-contact__form-footer {
    min-height: 50px;
    margin-top: 16px;
  }
}

/* =========================================================
   BODY COPY — DESKTOP READABILITY
   Keep headings compact, but let supporting copy breathe.
   ========================================================= */

@media (min-width: 951px) {
  .home-page .hero-subtitle,
  .home-page .process-editorial__lead,
  .home-page .pv-compare__lead,
  .home-page .iab-faq__intro > p,
  .home-page .site-contact__lead {
    font-size: var(--body-lg);
  }

  .home-page .iab-faq__answer,
  .home-page .site-footer__newsletter-copy {
    font-size: var(--body-md);
  }

  .home-page .review-author {
    font-size: 14px;
  }

  .home-page .review-source {
    font-size: 11px;
  }

  .home-page .site-contact__trust-item strong {
    font-size: 14px;
  }

  .home-page .site-contact__trust-item small {
    font-size: 12px;
    line-height: 1.5;
  }
}

/* =========================================================
   FOOTER
   It remains a substantial close to the page, but no longer has
   a second section's worth of empty vertical height.
   ========================================================= */

@media (min-width: 1181px) {
  .home-page .site-footer__inner {
    padding-top: 72px;
  }

  .home-page .site-footer__column {
    min-height: 280px;
    padding-inline: clamp(18px, 1.65vw, 28px);
  }

  .home-page .site-footer__brand {
    padding-right: clamp(28px, 3vw, 44px);
  }

  .home-page .site-footer__column-title {
    margin-bottom: 27px;
  }
}

/* =========================================================
   TABLET / MOBILE
   Keep the existing responsive compositions. Only the shared
   rhythm is normalized so the desktop refactor does not introduce
   a breakpoint jump at 950px.
   ========================================================= */

@media (max-width: 950px) {
  .home-page main > section:not(.hero) {
    padding-block: var(--section-y-m);
  }

  .home-page .process-editorial,
  .home-page .pv-compare,
  .home-page .reviews-section,
  .home-page .site-contact {
    padding-block: var(--section-y-m);
  }
}

@media (max-width: 700px) {
  .home-page .pv-compare__intro {
    margin-bottom: 28px;
  }

  .home-page .pv-compare__title,
  .home-page .reviews-title {
    font-size: clamp(38px, 10.5vw, 50px);
  }
}


/* =========================================================
   PROCESS TIMELINE — one grid, one centerline

   The timeline and the four process cards deliberately use the
   same 4-column grid. Every milestone sits at 50% of its column:
   12.5 / 37.5 / 62.5 / 87.5% of the shared container.

   The label separator is placed ON that same X coordinate, so the
   separator, guide stem, orange node and card centre form one axis.
   ========================================================= */

.home-page .process-editorial__mobile-duration {
  display: none;
}

@media (min-width: 951px) {
  .home-page .process-editorial__route-wrap {
    height: 126px;
    margin-top: 52px;
    position: relative;
  }

  .home-page .process-editorial__route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .home-page .process-editorial__route-base,
  .home-page .process-editorial__route-progress {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .home-page .process-editorial__route-base {
    stroke: rgba(24, 34, 29, 0.08);
    stroke-width: 1;
  }

  .home-page .process-editorial__route-progress {
    stroke: rgba(24, 34, 29, 0.20);
    stroke-width: 1;
  }

  .home-page .process-editorial__route-node line {
    stroke: rgba(24, 34, 29, 0.16);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
  }

  .home-page .process-editorial__route-ring {
    display: none;
  }

  .home-page .process-editorial__route-dot {
    fill: var(--orange);
    vector-effect: non-scaling-stroke;
  }

  /*
   * Each index is anchored by a zero-width axis. The vertical
   * separator sits exactly at left:0, while the number lives on its
   * left and the duration on its right. This makes the separator a
   * literal continuation of the SVG guide underneath it.
   */
  .home-page .process-editorial__route-index {
    position: absolute;
    top: 0;
    width: 0;
    height: 22px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    transform: none;
  }

  .home-page .process-editorial__route-index--01 { left: 12.5%; }
  .home-page .process-editorial__route-index--02 { left: 37.5%; }
  .home-page .process-editorial__route-index--03 { left: 62.5%; }
  .home-page .process-editorial__route-index--04 { left: 87.5%; }

  .home-page .process-editorial__route-number,
  .home-page .process-editorial__route-duration,
  .home-page .process-editorial__route-separator {
    position: absolute;
    top: 1px;
  }

  .home-page .process-editorial__route-number {
    right: 18px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: .06em;
  }

  .home-page .process-editorial__route-separator {
    left: 0;
    top: -1px;
    width: 1px;
    height: 22px;
    background: rgba(24, 34, 29, 0.20);
    transform: translateX(-.5px);
  }

  .home-page .process-editorial__route-duration {
    left: 18px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;
  }

  .home-page .process-editorial__route-duration--accent {
    color: var(--orange);
    font-weight: 750;
  }

  .home-page .process-editorial__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 26px;
  }

  .home-page .process-editorial__step {
    min-width: 0;
    padding-right: clamp(30px, 3vw, 52px);
  }

  .home-page .process-editorial__step:last-child {
    padding-right: 0;
  }

  .home-page .process-editorial__step > p {
    max-width: 33ch;
    font-size: clamp(16px, 1vw, 17px);
    line-height: 1.62;
  }

  .home-page .process-editorial__step li {
    font-size: clamp(13.5px, .88vw, 14.5px);
    line-height: 1.52;
  }
}

@media (max-width: 950px) {
  .home-page .process-editorial__mobile-duration {
    display: block;
    width: max-content;
    margin: -3px 0 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
  }

  .home-page .process-editorial__mobile-duration--accent {
    color: var(--orange);
    font-weight: 750;
  }
}


/* =========================================================
   PROCESS TIMELINE — headline-centred SVG system

   Desktop milestone positions are measured from the rendered h3
   text itself. The route, guide, node, step number and duration all
   live in one SVG, so every vertical axis is literally the same x.
   ========================================================= */
@media (min-width: 951px) {
  .home-page .process-editorial__route-wrap {
    height: 126px;
    margin-top: 44px;
    position: relative;
  }

  .home-page .process-editorial__route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 126px;
    overflow: visible;
  }

  .home-page .process-editorial__route-base,
  .home-page .process-editorial__route-progress {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .home-page .process-editorial__route-base {
    stroke: rgba(24, 34, 29, 0.075);
    stroke-width: 1;
  }

  .home-page .process-editorial__route-progress {
    stroke: rgba(24, 34, 29, 0.20);
    stroke-width: 1;
  }

  .home-page .process-editorial__route-node line {
    stroke: rgba(24, 34, 29, 0.16);
    stroke-width: 1;
    stroke-dasharray: none;
    vector-effect: non-scaling-stroke;
  }

  .home-page .process-editorial__route-halo {
    fill: rgba(242, 110, 63, 0.10);
    stroke: none;
  }

  .home-page .process-editorial__route-dot {
    fill: var(--orange);
    stroke: var(--background);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
  }

  .home-page .process-editorial__route-number,
  .home-page .process-editorial__route-duration {
    font-family: "DM Sans", Arial, sans-serif;
    dominant-baseline: alphabetic;
    paint-order: stroke;
    stroke: transparent;
    pointer-events: none;
  }

  .home-page .process-editorial__route-number {
    fill: var(--ink);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
  }

  .home-page .process-editorial__route-duration {
    fill: var(--muted);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.01em;
  }

  .home-page .process-editorial__route-duration--accent {
    fill: var(--orange);
    font-weight: 700;
  }

  .home-page .process-editorial__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 18px;
  }

  .home-page .process-editorial__step h3 {
    display: block;
    width: max-content;
    max-width: 100%;
  }
}

/* =========================================================
   COMPARISON — AGRI-PV FEATURED COLUMN
   Approved desktop direction: clearer backdrop, quieter standard
   option, and a continuous warm highlight from visual card through
   the table without turning the section into a pricing-table UI.
   ========================================================= */

@media (min-width: 701px) {
  .home-page .pv-compare {
    background: var(--surface);
  }

  .home-page .pv-compare__intro-grid {
    align-items: end;
  }

  .home-page .pv-compare__lead {
    max-width: 280px;
    padding-bottom: 5px;
    color: var(--muted);
    font-size: clamp(18px, 1.2vw, 21px);
    line-height: 1.42;
    letter-spacing: -0.025em;
  }

  .home-page .pv-compare__visual-grid {
    align-items: stretch;
  }

  .home-page .pv-compare__system {
    align-self: stretch;
  }

  .home-page .pv-compare__system:not(.pv-compare__system--agri) {
    opacity: .88;
  }

  .home-page .pv-compare__system--agri {
    position: relative;
    margin-top: -12px;
    padding: 12px 12px 16px 20px;
    overflow: hidden;
    background:
      linear-gradient(
        180deg,
        rgba(242, 110, 63, .082) 0%,
        rgba(242, 110, 63, .045) 100%
      );
    border-top: 2px solid var(--orange);
    border-radius: 12px 12px 0 0;
  }

  .home-page .pv-compare__system--agri .pv-compare__media {
    border-radius: 9px;
  }

  .home-page .pv-compare__system--agri .pv-compare__system-copy h3 {
    color: var(--ink);
  }

  .home-page .pv-compare__system--agri .pv-compare__system-copy > span {
    color: var(--muted);
  }

  .home-page .pv-compare__image-tag {
    padding: 9px 14px;
    background: rgba(251, 252, 251, .94);
    border-color: rgba(242, 110, 63, .16);
    box-shadow: 0 8px 24px rgba(24, 34, 29, .07);
  }

  .home-page .pv-compare__image-tag span {
    font-size: 7px;
    letter-spacing: 1.8px;
  }

  .home-page .pv-compare__table-wrap {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .45);
  }

  .home-page .pv-compare__labels th {
    border-top: 0;
  }

  .home-page .pv-compare__labels th:first-child,
  .home-page .pv-compare__table tbody th {
    padding-left: 20px;
  }

  .home-page .pv-compare__labels th:nth-child(3),
  .home-page .pv-compare__agri-cell {
    background: rgba(242, 110, 63, .075);
    border-left-color: rgba(242, 110, 63, .20);
  }

  .home-page .pv-compare__labels th:nth-child(3) {
    color: var(--orange-dark);
    font-weight: 700;
  }

  .home-page .pv-compare__table tbody td:nth-child(2) {
    color: var(--muted-2);
  }

  .home-page .pv-compare__table tbody td:nth-child(2) .pv-compare__status {
    opacity: .76;
  }

  .home-page .pv-compare__agri-cell {
    color: var(--ink-soft) !important;
  }

  .home-page .pv-compare__agri-cell strong {
    color: var(--ink);
    font-weight: 600;
  }

  .home-page .pv-compare__table tbody th,
  .home-page .pv-compare__table tbody td {
    height: 72px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .home-page .pv-compare__table tbody td {
    font-size: 15.5px;
    line-height: 1.42;
  }

  .home-page .pv-compare__summary-row th,
  .home-page .pv-compare__summary-row td {
    height: 78px;
    border-bottom: 0;
  }

  .home-page .pv-compare__summary-row th {
    font-weight: 500;
  }

  .home-page .pv-compare__summary-row .pv-compare__agri-cell {
    background: rgba(242, 110, 63, .105);
  }

  .home-page .pv-compare__summary-row .pv-compare__agri-cell strong {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.02em;
  }
}

@media (max-width: 700px) {
  .home-page .pv-compare-mobile__row:has(.pv-compare-mobile__label--agri) {
    background: rgba(242, 110, 63, .055);
  }
}

/* Review copy: keep longer Google testimonials balanced in the editorial route. */
@media (min-width: 1100px) {
  .home-page .review-three blockquote {
    font-size: clamp(16px, 1.05vw, 18px);
    line-height: 1.5;
  }
}


/* =========================================================
   WHY OSSLER — EDITORIAL VIDEO SECTION
   Same container, heading scale, supporting-copy scale and outer
   section rhythm as the rest of index.html.
   ========================================================= */

.home-page .why-ossler-video {
  position: relative;
  overflow: hidden;
  background: var(--paper, #f8faf8);
}

.home-page .why-ossler-video__inner {
  padding-block: 0;
}

.home-page .why-ossler-video__grid {
  display: grid;
  grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
  gap: clamp(46px, 5vw, 82px);
  align-items: start;
}

.home-page .why-ossler-video__copy {
  min-width: 0;
  padding-top: 4px;
}

.home-page .why-ossler-video__kicker {
  justify-content: flex-start;
}

/* Deliberately mirrors .iab-faq__intro h2. */
.home-page .why-ossler-video__copy h2 {
  max-width: 10ch;
  margin: 1.05rem 0 0;
  font-size: var(--type-section-xl);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
  color: var(--ink);
}

/* Deliberately mirrors the FAQ supporting copy. */
.home-page .why-ossler-video__lead {
  max-width: 32ch;
  margin: .9rem 0 0;
  color: var(--muted);
  font-size: var(--body-lg);
  font-weight: 400;
  line-height: 1.52;
}

.home-page .why-ossler-video__statement {
  display: grid;
  grid-template-columns: 1px minmax(0, 1fr);
  gap: 22px;
  max-width: 31ch;
  margin-top: clamp(40px, 4.3vw, 68px);
}

.home-page .why-ossler-video__statement-rule {
  width: 1px;
  height: 100%;
  min-height: 106px;
  background: var(--orange);
}

.home-page .why-ossler-video__statement p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(17px, 1.18vw, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
}

.home-page .why-ossler-video__visual {
  min-width: 0;
}

.home-page .why-ossler-video__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.6;
  min-height: 350px;
  overflow: hidden;
  border-radius: 18px;
  background: #1a201d;
  isolation: isolate;
}

.home-page .why-ossler-video__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 12, 10, 0) 47%, rgba(8, 12, 10, .38) 100%),
    linear-gradient(90deg, rgba(8, 12, 10, .15), transparent 34%, transparent 76%, rgba(8, 12, 10, .08));
  transition: opacity .3s ease;
}

.home-page .why-ossler-video__media.is-playing::after {
  opacity: 0;
}

.home-page .why-ossler-video__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: 50% 50%;
}

.home-page .why-ossler-video__play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 38px rgba(20, 28, 23, .16);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .25s ease, background-color .25s ease;
  backdrop-filter: blur(9px);
}

.home-page .why-ossler-video__play::after {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1px solid rgba(255, 255, 255, .23);
  border-radius: 50%;
}

.home-page .why-ossler-video__play:hover {
  transform: translate(-50%, -50%) scale(1.05);
  background: #fff;
}

.home-page .why-ossler-video__play span {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid var(--orange);
}

.home-page .why-ossler-video__duration {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 18px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(20, 24, 21, .72);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
}

.home-page .why-ossler-video__caption {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 22px;
  display: grid;
  gap: 4px;
  color: #fff;
  text-align: left;
}

.home-page .why-ossler-video__caption strong {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 600;
}

.home-page .why-ossler-video__caption span {
  font-size: 14px;
  line-height: 1.2;
  opacity: .92;
}

.home-page .why-ossler-video__annotation {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 27px;
  width: 168px;
  color: rgba(255, 255, 255, .92);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 14px;
  line-height: 1.28;
  text-align: right;
  transform: rotate(-3deg);
}

.home-page .why-ossler-video__annotation span {
  display: block;
}

.home-page .why-ossler-video__annotation svg {
  position: absolute;
  right: 94px;
  bottom: -34px;
  width: 58px;
  height: 40px;
  overflow: visible;
}

.home-page .why-ossler-video__annotation path {
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .why-ossler-video__media.is-playing .why-ossler-video__play,
.home-page .why-ossler-video__media.is-playing .why-ossler-video__duration,
.home-page .why-ossler-video__media.is-playing .why-ossler-video__caption,
.home-page .why-ossler-video__media.is-playing .why-ossler-video__annotation {
  opacity: 0;
  pointer-events: none;
}

.home-page .why-ossler-video__media:not(.is-playing) {
  cursor: pointer;
}

.home-page .why-ossler-video__benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 34px;
}

.home-page .why-ossler-video__benefit {
  min-width: 0;
  padding: 0 clamp(18px, 2.1vw, 30px);
  text-align: center;
}

.home-page .why-ossler-video__benefit:first-child {
  padding-left: 0;
}

.home-page .why-ossler-video__benefit:last-child {
  padding-right: 0;
}

.home-page .why-ossler-video__benefit + .why-ossler-video__benefit {
  border-left: 1px solid var(--line);
}

.home-page .why-ossler-video__benefit-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--orange) 6%, var(--paper));
}

.home-page .why-ossler-video__benefit-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--ink);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .why-ossler-video__benefit h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(16px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 1.25;
}

.home-page .why-ossler-video__benefit p {
  max-width: 24ch;
  margin: 8px auto 0;
  color: var(--muted);
  font-size: clamp(14px, .94vw, 16px);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .home-page .why-ossler-video__grid {
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: 42px;
  }

  .home-page .why-ossler-video__annotation {
    display: none;
  }
}

@media (max-width: 900px) {
  .home-page .why-ossler-video__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .home-page .why-ossler-video__copy h2,
  .home-page .why-ossler-video__lead,
  .home-page .why-ossler-video__statement {
    max-width: 100%;
  }

  .home-page .why-ossler-video__statement {
    margin-top: 28px;
  }

  .home-page .why-ossler-video__statement-rule {
    min-height: 82px;
  }

  .home-page .why-ossler-video__media {
    aspect-ratio: 16 / 8.4;
    min-height: 0;
    border-radius: 15px;
  }

  .home-page .why-ossler-video__benefits {
    margin-top: 28px;
  }
}

@media (max-width: 700px) {
  .home-page .why-ossler-video__copy h2 {
    font-size: clamp(38px, 10.5vw, 50px);
  }

  .home-page .why-ossler-video__lead {
    font-size: 17px;
  }

  .home-page .why-ossler-video__media {
    aspect-ratio: 4 / 3;
  }

  .home-page .why-ossler-video__video {
    object-position: 43% center;
  }

  .home-page .why-ossler-video__caption {
    left: 17px;
    bottom: 16px;
  }

  .home-page .why-ossler-video__caption strong {
    font-size: 16px;
  }

  .home-page .why-ossler-video__duration {
    top: 13px;
    right: 13px;
  }

  .home-page .why-ossler-video__play {
    width: 64px;
    height: 64px;
  }

  .home-page .why-ossler-video__play::after {
    inset: -10px;
  }

  .home-page .why-ossler-video__benefits {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-page .why-ossler-video__benefit {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 2px 14px;
    padding: 18px 0;
    text-align: left;
  }

  .home-page .why-ossler-video__benefit + .why-ossler-video__benefit {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .home-page .why-ossler-video__benefit-icon {
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .home-page .why-ossler-video__benefit-icon svg {
    width: 23px;
    height: 23px;
  }

  .home-page .why-ossler-video__benefit p {
    max-width: none;
    margin: 4px 0 0;
  }




}

@media (prefers-reduced-motion: reduce) {
  .home-page .why-ossler-video__play,
  .home-page .why-ossler-video__media::after {
    transition: none;
  }
}

/* =========================================================
   HERO — GOOGLE PROOF
   Exact visual language from the Über-uns hero proof card.
   Entire Google proof card links to the business profile.
   ========================================================= */
.home-page .hero-google-proof.brand-hero__proof-card {
  min-height: 82px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 28px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 22px;
  background: rgba(14,18,16,.30);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
}

.home-page .hero-google-proof.brand-hero__google {
  gap: 15px;
  min-width: 300px;
  padding: 13px 20px 13px 17px;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.home-page .hero-google-proof.brand-hero__google:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.home-page .hero-google-proof .brand-hero__google-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
}

.home-page .hero-google-proof .brand-hero__google-icon svg {
  width: 27px;
  height: 27px;
}

.home-page .hero-google-proof .brand-hero__google-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  row-gap: 2px;
}

.home-page .hero-google-proof .brand-hero__google-copy > strong {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.home-page .hero-google-proof .brand-hero__stars {
  color: var(--orange);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.5px;
  white-space: nowrap;
}

.home-page .hero-google-proof .brand-hero__google-copy small {
  grid-column: 1 / -1;
  color: rgba(255,255,255,.68);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0;
}

@media (max-width: 950px) {
  .home-page .hero-google-proof.brand-hero__proof-card {
    margin-top: 24px;
  }
}

@media (max-width: 600px) {
  .home-page .hero-google-proof.brand-hero__proof-card {
    min-height: 72px;
    margin-top: 22px;
    border-radius: 18px;
  }

  .home-page .hero-google-proof.brand-hero__google {
    min-width: 0;
    width: min(100%, 300px);
    gap: 13px;
    padding: 11px 16px 11px 14px;
  }

  .home-page .hero-google-proof .brand-hero__google-icon {
    width: 42px;
    height: 42px;
  }

  .home-page .hero-google-proof .brand-hero__google-icon svg {
    width: 25px;
    height: 25px;
  }
}

/* =========================================================
   INDEX HERO — MOBILE KICKER
   Keep the light desktop kicker, but match the mobile copy color.
   ========================================================= */
@media (max-width: 950px) {
  .home-page .hero .section-kicker--light {
    color: var(--slate);
    text-shadow: none;
  }

  .home-page .hero .section-kicker--light .section-kicker__number {
    color: inherit;
  }

  .home-page .hero .section-kicker--light .section-kicker__line {
    background: currentColor;
  }
}

/* =========================================================
   MOBILE CONTACT — clean section ending
   The contact form should flow directly into the footer without
   an extra divider line on small screens.
   ========================================================= */
@media (max-width: 700px) {
  .home-page .site-contact {
    border-bottom: 0 !important;
  }

  .home-page .site-contact + .site-footer {
    border-top: 0 !important;
  }
}