:root {
      --ink: #111;
      --muted: #6c6c6c;
      --gold: #d59b2f;
      --cream: #f6efe5;
      --line: #ececec;
      --max: 1180px;
      font-synthesis: none
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font-family: 'Manrope Variable', 'Manrope', 'Segoe UI', sans-serif;
      font-weight: 450;
      line-height: 1.55;
      color: var(--ink);
      background: #fff
    }

    button,
    input,
    select,
    textarea {
      font: inherit
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Manrope Variable', 'Manrope', 'Segoe UI', sans-serif;
      font-weight: 750;
      letter-spacing: -.025em;
      line-height: 1.12
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      display: block;
      width: 100%
    }

    .topbar {
      background: #0a3d61;
      color: #fff;
      font-size: 13px
    }

    .topbar .wrap,
    .nav .wrap {
      width: min(100% - 48px, var(--max));
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0
    }

    .topbar .wrap {
      min-height: 36px
    }

    .topbar-label {
      color: rgba(255,255,255,.68);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .topbar-links {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 12px
    }

    .topbar-links a {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap
    }

    .topbar-links a:hover { color: #69d5ff }

    .social {
      display: flex;
      gap: 12px;
      opacity: .9
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid rgba(7, 52, 81, .08);
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(14px)
    }

    .nav .wrap {
      min-height: 88px
    }

    .brand {
      display: block;
      flex: 0 0 auto;
      font-family: 'Manrope Variable', 'Manrope', 'Segoe UI', sans-serif;
      font-size: 28px;
      font-weight: 700
    }

    .brand img {
      display: block;
      width: auto;
      height: 50px;
      max-width: 190px;
      object-fit: contain
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 24px;
      color: #31434e;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap
    }

    .menu a {
      position: relative;
      padding: 35px 0
    }

    .menu a::after {
      position: absolute;
      right: 0;
      bottom: 24px;
      left: 0;
      height: 2px;
      background: #08aeea;
      content: "";
      transform: scaleX(0);
      transition: transform .2s ease
    }

    .menu a:hover::after,
    .menu a[aria-current="page"]::after {
      transform: scaleX(1)
    }

    .menu-toggle {
      position: absolute;
      opacity: 0;
      pointer-events: none
    }

    .menu-button {
      display: none;
      font-size: 25px;
      cursor: pointer;
      padding: 4px 8px
    }

    .menu-toggle:focus-visible + .menu-button {
      outline: 2px solid #0a3d61;
      outline-offset: 3px
    }

    .cart {
      display: flex;
      gap: 12px
    }

    .hero {
      min-height: 700px;
      position: relative;
      overflow: hidden;
      background: #d7e1ec url('/assets/zaun-slider.webp') center / cover no-repeat
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      background-position: center;
      background-size: cover;
      opacity: 0;
      visibility: hidden;
      transition: opacity .7s ease, visibility .7s ease
    }

    .hero-slide.active {
      opacity: 1;
      visibility: visible;
      z-index: 1
    }

    .hero-inner {
      width: min(100% - 48px, var(--max));
      margin-inline: auto;
      padding: 20px 0
    }

    .hero-copy {
      max-width: 440px;
      padding: 26px;
      background: rgba(255, 255, 255, .82);
      backdrop-filter: blur(3px);
      opacity: 1;
      transition: opacity .18s ease, visibility .18s ease
    }

    .font-loading .hero-copy,
    .slider-loading .hero-copy {
      opacity: 0;
      visibility: hidden
    }

    .slider-loading .hero-slide {
      opacity: 0;
      visibility: hidden
    }

    .slider-loading .slider-control,
    .slider-loading .slider-dots {
      opacity: 0;
      pointer-events: none
    }

    .slider-control {
      position: absolute;
      z-index: 3;
      top: 50%;
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .9);
      color: #0a3d61;
      font-size: 25px;
      cursor: pointer;
      transform: translateY(-50%);
      box-shadow: 0 3px 15px rgba(0, 0, 0, .16);
      transition: opacity .18s ease, background .2s ease, color .2s ease
    }

    .slider-control:hover,
    .slider-control:focus-visible {
      background: #00aeef;
      color: #fff
    }

    .slider-prev {
      left: 18px
    }

    .slider-next {
      right: 18px
    }

    .slider-dots {
      position: absolute;
      z-index: 3;
      bottom: 20px;
      left: 50%;
      display: flex;
      gap: 9px;
      transform: translateX(-50%);
      transition: opacity .18s ease
    }

    .slider-dot {
      width: 11px;
      height: 11px;
      padding: 0;
      border: 2px solid #fff;
      border-radius: 50%;
      background: rgba(10, 61, 97, .45);
      cursor: pointer
    }

    .slider-dot.active {
      background: #00aeef
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
      height: 800px;
      margin-top: 24px;
      gap: 40px
    }

    .service-card {
      position: relative;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
      background-position: center;
      background-size: cover;
      color: #fff;
      isolation: isolate;
      border: 15px solid #0a3d61;
    }

    .service-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .82) 100%);
      transition: background .35s ease
    }

    .service-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      background: inherit;
      transition: transform .6s ease
    }

    .service-card:hover::after {
      transform: scale(1.04)
    }

    .service-content {
      max-width: 470px;
      padding: 50px 42px
    }

    .service-number {
      display: block;
      margin-bottom: 13px;
      color: #d5d5d5;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .16em
    }

    .service-content h2 {
      margin: 0 0 14px;
      font-size: 32px;
      line-height: 1.05
    }

    .service-content p {
      min-height: 68px;
      margin: 0 0 22px;
      color: rgba(255, 255, 255, .86);
      font-size: 15px;
      line-height: 1.55
    }

    .service-link {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding-bottom: 5px;
      border-bottom: 1px solid rgba(255, 255, 255, .65);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .eyebrow {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .16em;
      color: #0a3d61;
      font-weight: 700
    }

    .hero h1 {
      font-size: 58px;
      line-height: .95;
      margin: 12px 0 20px;
      letter-spacing: -2.5px
    }

    .hero p {
      color: #555;
      line-height: 1.6;
      font-size: 24px;
    }

    .btn {
      display: inline-block;
      background: #00aeef;
      padding: 13px 23px;
      border-radius: 24px;
      font-size: 13px;
      font-weight: 700;
      margin-top: 8px
    }

    .benefits {
      border-bottom: 1px solid var(--line)
    }

    .benefits .wrap {
      width: min(100% - 48px, var(--max));
      margin-inline: auto;
      padding: 36px 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px
    }

    .benefit {
      display: flex;
      gap: 14px;
      align-items: flex-start
    }

    .benefit i {
      font-size: 28px
    }

    .benefit b {
      display: block;
      font-size: 14px
    }

    .benefit span {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45
    }

    .section {
      position: relative;
      isolation: isolate;
      width: min(100% - 48px, var(--max));
      margin-inline: auto;
      padding: 68px 0
    }

    #ueber-uns::before,
    #betten::before {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 100vw;
      transform: translateX(-50%)
    }

    #ueber-uns::before {
      background-color: #f2ede5;
      background-image:
        linear-gradient(90deg, rgba(112, 77, 45, .018), rgba(255, 255, 255, .06) 42%, rgba(112, 77, 45, .015)),
        repeating-linear-gradient(2deg, transparent 0, transparent 27px, rgba(112, 77, 45, .025) 28px, transparent 30px)
    }

    #betten::before {
      background-color: #faf8f4;
      background-image:
        radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, .85) 0 12%, transparent 28%),
        radial-gradient(ellipse at 75% 65%, rgba(225, 216, 203, .22) 0 10%, transparent 27%),
        repeating-linear-gradient(45deg, rgba(160, 150, 138, .025) 0 1px, transparent 1px 7px)
    }

    .collection-head {
      margin-bottom: 30px
    }

    .collection-head.centered {
      width: min(100% - 48px, var(--max));
      margin: 0 auto 30px;
      padding: 68px 0 0;
      text-align: center
    }

    .collection-head.centered p {
      margin-right: auto;
      margin-left: auto
    }

    .collection-head.large-left,
    .collection-head.large-right {
      width: 51.2%
    }

    .collection-head.large-right {
      margin-left: auto;
      text-align: right
    }

    .collection-head.large-right p {
      margin-left: auto
    }

    .collection-head span {
      display: block;
      margin-bottom: 8px;
      color: #00aeef;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .17em;
      text-transform: uppercase
    }

    .collection-head h2 {
      margin: 0 0 9px;
      color: #072f4a;
      font-size: 36px;
      line-height: 1.1
    }

    .collection-head p {
      max-width: 650px;
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6
    }

    .category-grid {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 0
    }

    .category-grid.reverse {
      grid-template-columns: 1fr 1.05fr
    }

    .category-grid.reverse .category-big {
      order: 2
    }

    .category-grid.reverse .category-small-grid {
      order: 1
    }

    .category-big {
      background: #f5f6f7;
      display: flex;
      flex-direction: column;
      justify-content: space-between
    }

    .category-big img {
      height: 430px;
      object-fit: cover
    }

    .category-copy {
      text-align: center;
      padding: 22px
    }

    .category-copy h3 {
      margin: 0 0 5px;
      font-size: 24px
    }

    .category-copy p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55
    }

    .category-small-grid {
      display: grid;
      grid-template-columns: 1fr 1fr
    }

    .category-card {
      position: relative;
      background: #edf4f8;
      min-height: 250px;
      overflow: hidden
    }

    .category-card img {
      height: 100%;
      object-fit: cover
    }

    .category-card .label {
      position: absolute;
      left: 18px;
      bottom: 16px;
      background: rgba(255, 255, 255, .9);
      padding: 10px 12px;
      max-width: calc(100% - 36px);
      font-size: 12px
    }

    .category-card .label b {
      display: block;
      font-size: 15px;
      margin-top: 3px
    }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      margin-bottom: 26px
    }

    .section-head h2 {
      font-size: 32px;
      margin: 0
    }

    .tabs {
      display: flex;
      gap: 25px;
      font-size: 13px;
      font-weight: 700
    }

    .tabs a:first-child {
      border-bottom: 2px solid var(--ink);
      padding-bottom: 8px
    }

    .products {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px 20px
    }

    .product {
      position: relative
    }

    .product .photo {
      background: #f7f5f3;
      aspect-ratio: 1/1;
      overflow: hidden
    }

    .product .photo img {
      height: 100%;
      object-fit: cover;
      transition: .3s
    }

    .product:hover img {
      transform: scale(1.04)
    }

    .product h4 {
      font-size: 14px;
      margin: 13px 0 6px;
      line-height: 1.3
    }

    .product small {
      display: block;
      color: var(--muted);
      font-size: 11px
    }

    .price {
      font-weight: 700;
      margin-top: 4px;
      font-size: 13px
    }

    .badge {
      position: absolute;
      right: 8px;
      top: 8px;
      background: #f3b542;
      color: #fff;
      font-size: 10px;
      padding: 5px 7px;
      border-radius: 3px;
      z-index: 2
    }

    .brands {
      width: min(100% - 48px, var(--max));
      margin: 0 auto;
      padding: 20px 0 55px;
      display: flex;
      justify-content: space-around;
      gap: 35px;
      align-items: center;
      color: #444;
      font-weight: 800;
      filter: grayscale(1)
    }

    .banner-grid {
      display: grid;
      grid-template-columns: 1fr 1fr
    }

    .banner {
      height: 430px;
      position: relative;
      background-size: cover;
      background-position: center
    }

    .banner-copy {
      position: absolute;
      left: 64px;
      top: 95px;
      max-width: 190px
    }

    .banner-copy span {
      font-size: 12px;
      color: #777
    }

    .banner-copy h3 {
      font-size: 32px;
      line-height: 1.05;
      margin: 8px 0 18px
    }

    .banner-copy .dark {
      color: #0d1a38
    }

    .banner-copy .wood {
      color: #9b5f10
    }

    .fence-promos .banner-copy {
      top: 72px;
      max-width: 340px;
      padding: 25px 28px;
      background: rgba(255, 255, 255, .9);
      backdrop-filter: blur(3px)
    }

    .fence-promos .banner-copy h3 {
      margin-bottom: 12px;
      color: #072f4a
    }

    .fence-promos .banner-copy p {
      margin: 0 0 20px;
      color: #555;
      font-size: 13px;
      line-height: 1.55
    }

    .pill {
      background: #111;
      color: #fff;
      border-radius: 20px;
      padding: 11px 18px;
      font-size: 11px;
      display: inline-block
    }

    .pill.gold {
      background: #b67d23
    }

    .mini-banners {
      width: min(100% - 48px, var(--max));
      margin: 34px auto 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0
    }

    .mini-banners .banner {
      height: 290px
    }

    .mini-banners .banner-copy {
      left: 38px;
      top: 66px
    }

    .mini-banners .banner-copy h3 {
      font-size: 25px
    }

    .faq-section {
      width: min(100% - 48px, var(--max));
      margin-inline: auto;
      padding: 80px 0;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 58px;
      align-items: center
    }

    .faq-section img {
      height: 470px;
      object-fit: cover
    }

    .faq h2 {
      font-size: 36px;
      margin: 7px 0 24px
    }

    .accordion {
      border-top: 1px solid #ead9b9
    }

    .item {
      border-bottom: 1px solid #ead9b9
    }

    .item button {
      width: 100%;
      background: #fff7e8;
      border: 0;
      text-align: left;
      padding: 17px 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      justify-content: space-between
    }

    .item .answer {
      display: none;
      padding: 17px 14px;
      color: #666;
      line-height: 1.6;
      font-size: 14px
    }

    .item.open .answer {
      display: block
    }

    .news {
      text-align: center
    }

    .news .kicker {
      font-size: 12px;
      color: #777
    }

    .news h2 {
      font-size: 32px;
      margin: 7px 0 30px
    }

    .posts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      text-align: left
    }

    .post img {
      aspect-ratio: 1.35/1;
      object-fit: cover
    }

    .post small {
      display: block;
      margin-top: 13px;
      color: #8a8a8a;
      text-transform: uppercase;
      font-size: 10px
    }

    .post h3 {
      font-size: 16px;
      line-height: 1.35;
      margin: 8px 0
    }

    footer {
      background: #072f4a;
      color: #fff;
      margin-top: 70px
    }

    .footer {
      width: min(100% - 48px, var(--max));
      margin-inline: auto;
      padding: 62px 0;
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 70px

    }

    .footer h3 {
      font-family: 'Manrope Variable', 'Manrope', 'Segoe UI', sans-serif;
      font-size: 26px
    }

    .footer h4 {
      margin: 0 0 16px
    }

    .footer p,
    .footer li {
      color: #bbb;
      font-size: 13px;
      line-height: 1.65
    }

    .footer ul {
      list-style: none;
      padding: 0
    }

    .footer img {
    display: block;
    width: 30%;
    filter: brightness(0) invert(1);
    }

    .footer-menu {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px 18px;
      margin: 0 0 25px
    }

    .footer-menu a {
      color: #bbb;
      font-size: 13px;
      transition: color .2s ease
    }

    .footer-menu a:hover {
      color: #00aeef
    }

    .social-links {
      display: flex;
      gap: 10px
    }

    .social-links a {
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 50%;
      color: #fff;
      transition: background .2s ease, border-color .2s ease, transform .2s ease
    }

    .social-links a:hover,
    .social-links a:focus-visible {
      border-color: #00aeef;
      background: #00aeef;
      transform: translateY(-2px)
    }

    .social-links svg {
      width: 18px;
      height: 18px;
      fill: currentColor
    }

    .copyright {
      border-top: 1px solid rgba(255, 255, 255, .14);
      color: rgba(255, 255, 255, .62);
      text-align: center;
      padding: 18px;
      font-size: 12px
    }

    .float {
      position: fixed;
      right: 15px;
      top: 42%;
      background: #fff;
      border-radius: 22px;
      box-shadow: 0 5px 25px rgba(0, 0, 0, .18);
      display: flex;
      flex-direction: column;
      z-index: 30
    }

    .float span {
      padding: 10px;
      border-bottom: 1px solid #eee
    }

    @media(max-width:900px) {
      .collection-head.large-left,
      .collection-head.large-right {
        width: 100%;
        text-align: left
      }

      .collection-head.large-right p {
        margin-left: 0
      }

      .menu-button {
        display: block
      }

      .nav .wrap {
        position: relative;
        flex-wrap: wrap
      }

      .menu {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        gap: 0;
        padding-top: 14px
      }

      .menu a {
        border-top: 1px solid var(--line);
        padding: 13px 0
      }

      .menu a::after {
        display: none
      }

      .menu-toggle:checked ~ .menu {
        display: flex
      }

      .hero h1 {
        font-size: 48px
      }

      .benefits .wrap {
        grid-template-columns: 1fr 1fr
      }

      .products {
        grid-template-columns: repeat(2, 1fr)
      }

      .category-grid,
      .faq-section {
        grid-template-columns: 1fr
      }

      .category-grid.reverse .category-big {
        order: 1
      }

      .category-grid.reverse .category-small-grid {
        order: 2
      }

      .banner-grid {
        grid-template-columns: 1fr
      }

      .banner {
        height: 360px
      }

      .footer {
        grid-template-columns: 1fr 1fr
      }

      .posts {
        grid-template-columns: 1fr
      }

      .services-grid {
        height: auto;
        grid-template-columns: 1fr
      }

      .service-card {
        min-height: 480px
      }
    }

    @media(max-width:600px) {
      .topbar {
        display: none
      }

      .brand img { height: 42px; max-width: 155px }

      .hero {
        min-height: 480px
      }

      .hero-copy {
        max-width: calc(100% - 46px);
        padding: 22px;
        margin: auto
      }

      .hero h1 {
        font-size: 39px
      }

      .slider-control {
        top: auto;
        bottom: 10px;
        width: 38px;
        height: 38px;
        transform: none
      }

      .slider-dots {
        bottom: 23px
      }

      .service-card {
        min-height: 420px
      }

      .service-content {
        padding: 36px 24px
      }

      .service-content h2 {
        font-size: 28px
      }

      .service-content p {
        min-height: 0
      }

      .benefits .wrap {
        grid-template-columns: 1fr
      }

      .category-small-grid,
      .products,
      .mini-banners,
      .footer {
        grid-template-columns: 1fr
      }

      .category-big img {
        height: 320px
      }

      .section {
        padding: 48px 0
      }

      .section-head {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column
      }

      .tabs {
        gap: 14px;
        flex-wrap: wrap
      }

      .banner-copy {
        left: 28px
      }

      .faq-section {
        padding: 55px 16px
      }

      .faq-section img {
        height: 340px
      }

      .brands {
        flex-wrap: wrap
      }

      .posts {
        grid-template-columns: 1fr
      }

      .float {
        display: none
      }

    }

    @media (prefers-reduced-motion: reduce) {
      .hero-slide {
        transition: none
      }
    }

    .fence-benefits {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      width:min(100% - 48px,var(--max));
      margin:0 auto 80px;
      padding:0;
      gap:16px;
      background:#fff;
    }
    .fence-benefits div {
      min-width:0;
      padding:28px 22px;
      border-top:3px solid #00aeef;
      background:#f5f8fa;
      text-align:left;
    }
    .fence-benefits strong { display:block; margin-bottom:9px; color:#0a3d61; font-size:17px }
    .fence-benefits span { color:#68717a; font-size:13px; line-height:1.5 }
    @media(max-width:900px) { .fence-benefits { grid-template-columns:repeat(2,1fr) } }
    @media(max-width:560px) { .fence-benefits { grid-template-columns:1fr; margin-bottom:70px } }
    @media(max-width:600px) {
      .service-number { font-size:12px }
      .fence-promos .banner-copy {
        right:20px;
        left:20px;
        max-width:none;
        padding:22px;
      }
      .fence-promos .banner-copy h3 { font-size:27px }
    }

    .section-intro { max-width:720px; margin:0 auto 38px; text-align:center }
    .section-intro > span,.quality-copy > span,.final-cta span { color:#00aeef; font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase }
    .section-intro h2 { margin:9px 0 12px; color:#072f4a; font-size:38px; line-height:1.1 }
    .section-intro p { margin:0; color:var(--muted); font-size:14px; line-height:1.7 }
    .product-range { width:min(100% - 48px,var(--max)); margin:0 auto; padding:35px 0 95px }
    .range-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
    .range-card { display:grid; grid-template-columns:52px 1fr; gap:17px; min-height:205px; padding:28px 25px; border:1px solid #e4e9ed; background:#fff; box-shadow:0 10px 30px rgba(7,47,74,.05); transition:transform .25s ease,border-color .25s ease }
    .range-card:hover { transform:translateY(-4px); border-color:#00aeef }
    .range-icon { display:grid; width:52px; height:52px; place-items:center; border-radius:50%; background:#e8f7fd; color:#0a3d61; font-size:27px }
    .range-card small { color:#00aeef; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase }
    .range-card h3 { margin:7px 0 9px; color:#072f4a; font-size:20px }
    .range-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.6 }
    .quality-split { display:grid; grid-template-columns:1fr 1fr; min-height:590px; background:#072f4a }
    .quality-image { min-height:480px; background:url('../service-z2.webp') center/cover no-repeat }
    .quality-copy { display:flex; flex-direction:column; justify-content:center; max-width:650px; padding:70px 10% 70px 9%; color:#fff }
    .quality-copy h2 { margin:11px 0 18px; font-size:40px; line-height:1.08 }
    .quality-copy > p { margin:0 0 25px; color:rgba(255,255,255,.72); font-size:14px; line-height:1.75 }
    .quality-copy ul { display:grid; gap:0; margin:0 0 28px; padding:0; list-style:none }
    .quality-copy li { padding:13px 0; border-top:1px solid rgba(255,255,255,.13) }
    .quality-copy li b,.quality-copy li small { display:block }
    .quality-copy li b { margin-bottom:4px; font-size:14px }
    .quality-copy li small { color:rgba(255,255,255,.58); font-size:12px }
    .text-link { align-self:flex-start; padding-bottom:5px; border-bottom:1px solid #00aeef; color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase }
    .process-section { padding:95px 24px; background:#f5f8fa }
    .process-grid { display:grid; grid-template-columns:repeat(4,1fr); max-width:var(--max); margin:0 auto; padding:0; list-style:none; counter-reset:step }
    .process-grid li { position:relative; padding:0 35px; border-left:1px solid #d9e1e6 }
    .process-grid li:last-child { border-right:1px solid #d9e1e6 }
    .process-grid b { color:#00aeef; font-size:34px; line-height:1 }
    .process-grid h3 { margin:15px 0 8px; color:#072f4a; font-size:19px }
    .process-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.6 }
    .faq-home { max-width:900px; margin:0 auto; padding:100px 24px }
    .faq-list { border-top:1px solid #dce3e8 }
    .faq-list details { border-bottom:1px solid #dce3e8 }
    .faq-list summary { position:relative; padding:22px 50px 22px 0; color:#072f4a; font-size:16px; font-weight:700; cursor:pointer; list-style:none }
    .faq-list summary::-webkit-details-marker { display:none }
    .faq-list summary::after { content:'+'; position:absolute; right:10px; top:16px; color:#00aeef; font-size:28px; font-weight:400 }
    .faq-list details[open] summary::after { content:'−' }
    .faq-list p { max-width:760px; margin:-4px 0 22px; color:var(--muted); font-size:14px; line-height:1.7 }
    .final-cta { display:flex; align-items:center; justify-content:space-between; gap:40px; max-width:var(--max); margin:0 auto 100px; padding:50px 55px; background:#0a3d61; color:#fff }
    .final-cta h2 { margin:9px 0 8px; font-size:34px }
    .final-cta p { margin:0; color:rgba(255,255,255,.7); font-size:14px }
    .final-cta .btn { flex:0 0 auto; margin:0; color:#071f2e }
    @media(max-width:900px) {
      .range-grid { grid-template-columns:repeat(2,1fr) }
      .quality-split { grid-template-columns:1fr }
      .quality-copy { max-width:none; padding:65px 8% }
      .process-grid { grid-template-columns:repeat(2,1fr); gap:35px 0 }
      .final-cta { margin-right:24px; margin-left:24px }
    }
    @media(max-width:600px) {
      .section-intro h2 { font-size:30px }
      .product-range,.process-section,.faq-home { padding-top:70px; padding-bottom:70px }
      .range-grid,.process-grid { grid-template-columns:1fr }
      .range-card { min-height:0 }
      .quality-image { min-height:340px }
      .quality-copy { padding:55px 24px }
      .quality-copy h2 { font-size:32px }
      .process-grid { gap:0 }
      .process-grid li,.process-grid li:last-child { padding:25px 20px; border-right:0; border-bottom:1px solid #d9e1e6 }
      .final-cta { align-items:flex-start; flex-direction:column; margin-bottom:70px; padding:38px 25px }
      .final-cta h2 { font-size:29px }
    }

    @media(max-width:560px) {
      .hero-inner,
      .benefits .wrap,
      .section,
      .collection-head.centered,
      .brands,
      .mini-banners,
      .faq-section,
      .fence-benefits,
      .product-range {
        width:min(100% - 32px,var(--max))
      }
    }

    .hero .slide-title {
      margin: 12px 0 20px;
      font-size: 58px;
      line-height: .95;
      letter-spacing: -2.5px
    }

    .legacy-skip-link {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 100;
      padding: 10px 14px;
      color: #fff;
      background: #072f4a;
      transform: translateY(-160%)
    }

    .legacy-skip-link:focus {
      transform: translateY(0)
    }

    @media(max-width:900px) {
      .hero .slide-title { font-size:48px }
    }

    @media(max-width:600px) {
      .hero .slide-title { font-size:39px }
    }