/*
      =========================================
      Base / Reset
      =========================================
      - Keep CSS lightweight for performance
      - Use system fonts for speed (SEO/UX)
    */
    *, *::before, *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height: 1.5;
      color: #111;
      background: #fff;
    }

    img {
      max-width: 100%;
      display: block;
    }

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

    a:focus-visible {
      outline: 3px solid #111;
      outline-offset: 2px;
    }

    /*
      =========================================
      Layout helpers
      =========================================
    */
    .container {
      width: min(1100px, 100% - 2rem);
      margin-inline: auto;
    }

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

    /*
      =========================================
      Parallax background layers
      =========================================
      Implementation detail:
      - We use fixed, full-viewport layers
      - JS moves them slightly based on scroll
      - This makes images appear to move as you scroll
      NOTE: Some mobile browsers treat background-attachment: fixed differently.
      This JS approach is more consistent.
    */
    .parallax-layer {
      position: fixed;
      inset: 0;
      z-index: -3;
      background-size: cover;
      background-position: center;
      transform: translate3d(0, 0, 0);
      will-change: transform;
      filter: saturate(1.05);
    }

    .parallax-layer.layer-1 {
      z-index: -3;
      opacity: 0.75;
    }

    .parallax-layer.layer-2 {
      z-index: -2;
      opacity: 0.35;
      mix-blend-mode: multiply;
    }

    .parallax-layer.layer-3 {
      z-index: -1;
      opacity: 0.20;
      mix-blend-mode: overlay;
    }

    /* Dark overlay for legibility */
    .page-overlay {
      position: fixed;
      inset: 0;
      z-index: -1;
      background: linear-gradient(180deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, .15) 45%, rgba(255, 255, 255, .85) 78%, rgba(255, 255, 255, .98));
      pointer-events: none;
    }

    /*
      =========================================
      Header / Hero image (full width)
      =========================================
      - Use an <img> with loading="eager" for LCP (Largest Contentful Paint)
      - Use alt text for accessibility + SEO
    */
    header.hero {
      padding-top: 1rem;
    }

    .hero-card {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(6px);
    }

    .hero-media {
      position: relative;
      min-height: 260px;
    }

    .hero-media img {
      width: 100%;
      height: clamp(260px, 42vw, 420px);
      object-fit: cover;
      display: block;
    }

    /* Overlay image on hero header */
    .hero-media .hero-overlay-img {
      position: absolute;
      top: 1.2rem;
      left: 1.2rem;
      width: auto;
      height: 60%;
      object-fit: contain;
      background: #fff;
      border-radius: 16px;
      padding: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
      pointer-events: none;
      z-index: 2;
      opacity: 0.98;
      border: 1px solid #eee;
      transition: width 0.2s, height 0.2s, top 0.2s, left 0.2s;
    }

    /* Prevent overlay from covering hero-badge */
    .hero-media {
      display: flex;
      align-items: flex-start;
      position: relative;
    }

    .hero-media img:not(.hero-overlay-img) {
      flex: 1 1 0%;
      min-width: 0;
    }

    .hero-badge {
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      left: unset;
      z-index: 3;
      /* Add top margin to ensure badge sits below logo */
      margin-top: 110px;
    }

    @media (max-width: 900px) {
      .hero-media .hero-overlay-img {
        max-width: 38%;
        padding: 10px 10px 10px 10px;
        min-width: 54px;
      }
    }

    @media (max-width: 560px) {
      .hero-media .hero-overlay-img {
        max-width: 44%;
        padding: 4px 4px 4px 4px;
        min-width: 36px;
      }
    }

    @media (max-width: 900px) {
      .hero-media .hero-overlay-img {
        width: 68px;
        height: 68px;
        top: 0.7rem;
        left: 0.7rem;
        padding: 7px;
      }
    }

    @media (max-width: 560px) {
      .hero-media .hero-overlay-img {
        width: 48px;
        height: 48px;
        top: 0.4rem;
        left: 0.4rem;
        padding: 4px;
      }
    }

    .hero-badge {
      position: absolute;
      inset: auto 1rem 1rem 1rem;
      color: #fff;
      background: rgba(0, 0, 0, .55);
      padding: .85rem 1rem;
      border-radius: 14px;
      max-width: 70ch;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
    }

    .hero-badge h1 {
      margin: 0 0 .35rem;
      font-size: clamp(1.25rem, 2.2vw + .6rem, 2.4rem);
      line-height: 1.15;
    }

    .hero-badge p {
      margin: 0;
      opacity: .95;
    }

    /*
      =========================================
      Link bar: 10 links wide on desktop
      =========================================
      - On mobile, it becomes horizontally scrollable chips
      - Good for UX, avoids tiny links
    */
    nav.primary-links {
      background: rgba(255, 255, 255, .92);
      border-top: 1px solid rgba(0, 0, 0, .08);
      padding: .75rem;
    }

    .link-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: .5rem;
    }

    .link-grid a {
      display: grid;
      place-items: center;
      padding: .55rem .4rem;
      border-radius: 12px;
      background: rgba(0, 0, 0, .04);
      font-size: .9rem;
      transition: transform .12s ease, background .12s ease;
    }

        /* The second line of a menu item: what the page is, for anybody who cannot tell from a
           one-word label. Small and quiet, so the label still reads as the link. */
        .link-grid a small {
            display: block;
            font-size: .72rem;
            font-weight: 400;
            opacity: .62;
            margin-top: .1rem;
        }


    .link-grid a:hover {
      background: rgba(0, 0, 0, .07);
      transform: translateY(-1px);
    }

    .link-grid a[aria-current="page"] {
      background: #111;
      color: #fff;
    }

    /*
      =========================================
      Main content cards
      =========================================
    */
    main {
      padding: 1.25rem 0 2.5rem;
    }

    .section {
      margin-top: 1.1rem;
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    }

    .section-inner {
      padding: 1.25rem;
    }

    .section h2 {
      margin: 0 0 .10rem;
      font-size: 1.35rem;
      line-height: 1.2;
    }

    .muted {
      color: rgba(0, 0, 0, .72);
    }

    /*
      =========================================
      Offers banner image section
      =========================================
    */
    .offers {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 1rem;
      align-items: stretch;
    }

    .offers-media {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .08);
    }

    .offers-media img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }

    .offers-copy {
      border-radius: 14px;
      border: 1px solid rgba(0, 0, 0, .08);
      padding: 1rem;
      background: rgba(0, 0, 0, .03);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: .75rem;
    }

    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }

    .pill {
      font-size: .85rem;
      padding: .35rem .55rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, .06);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .7rem 1rem;
      border-radius: 14px;
      background: #111;
      color: #fff;
      font-weight: 600;
      border: 1px solid rgba(0, 0, 0, .18);
      width: fit-content;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    /*
      =========================================
      Featured posts (4 small posts with image links)
      =========================================
      - Use <article> for semantics (SEO)
      - Use descriptive alt text
    */
    .post-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }

    .post {
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .08);
      background: #fff;
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .post:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 30px rgba(0, 0, 0, .14);
    }

    .post a {
      display: grid;
      height: 100%;
    }

    .post img {
      height: 140px;
      width: 100%;
      object-fit: cover;
    }

    .post .post-body {
      padding: .85rem .85rem 1rem;
    }

    .post h3 {
      margin: 0 0 .25rem;
      font-size: 1rem;
      line-height: 1.2;
    }

    .post p {
      margin: 0;
      font-size: .92rem;
      color: rgba(0, 0, 0, .72);
    }

    /*
      =========================================
      Services text section
      =========================================
    */
    .service-columns {
      display: grid;
      grid-template-columns: 1.2fr;
      gap: 1rem;
      align-items: start;
    }

    /* A grid item defaults to min-width:auto, which is a refusal to shrink below
       its own content. The diagrams are deliberately wider than a phone, so that
       default made the whole column as wide as the widest diagram, and the
       section's overflow:hidden clipped the lot instead of letting the figure
       scroll. Letting the item shrink is what lets .diagram's own overflow-x do
       the job it was added for. Harmless on pages with nothing wide on them. */
    .service-columns > * {
        min-width: 0;
    }

    .service-list {
      border-radius: 14px;
      border: 1px solid rgba(0, 0, 0, .08);
      background: rgba(0, 0, 0, .03);
      padding: 1rem;
    }

    .service-list ul {
      margin: .5rem 0 0;
      padding-left: 1.15rem;
    }

    /*
      =========================================
      Footer block 1: 6 footer images + text
      =========================================
    */
    footer.site-footer {
      padding: 1.25rem 0 2rem;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: .75rem;
    }

    .footer-tile {
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .08);
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
    }

    .footer-tile img {
      height: 90px;
      width: 100%;
      object-fit: cover;
    }

    .footer-tile .tile-body {
      padding: .7rem .75rem .85rem;
    }

    .footer-tile strong {
      display: block;
      font-size: .92rem;
    }

    .footer-tile span {
      display: block;
      font-size: .85rem;
      color: rgba(0, 0, 0, .70);
    }

    .footer-links {
      margin-top: 1rem;
      background: rgba(255, 255, 255, .92);
      border: 1px solid rgba(0, 0, 0, .08);
      border-radius: 18px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
      overflow: hidden;
    }

    .footer-links .section-inner {
      padding: 1rem 1.25rem 1.2rem;
    }

    .all-links {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: .65rem;
      margin-top: .75rem;
    }

    .all-links a {
      display: block;
      padding: .5rem .6rem;
      border-radius: 12px;
      background: rgba(0, 0, 0, .04);
      font-size: .92rem;
    }

    .all-links a:hover {
      background: rgba(0, 0, 0, .07);
    }

    /*
      =========================================
      Mobile responsiveness
      =========================================
      - Make tap targets bigger
      - Avoid 10-column tiny links; switch to scrollable row
    */
    @media (max-width: 900px) {
      .link-grid {
        grid-template-columns: repeat(5, 1fr);
      }

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

      .offers {
        grid-template-columns: 1fr;
      }

      .service-columns {
        grid-template-columns: 1fr;
      }

      .footer-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .all-links {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 560px) {
      /* Convert link bar to horizontal chips for small screens */
      .link-grid {
        display: flex;
        overflow-x: auto;
        gap: .5rem;
        padding-bottom: .25rem;
        scroll-snap-type: x mandatory;
      }

      .link-grid a {
        flex: 0 0 auto;
        min-width: 120px;
        scroll-snap-align: start;
        padding: .7rem .8rem;
        font-size: .95rem;
      }

      .post-grid {
        grid-template-columns: 1fr;
      }

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

      .all-links {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Reduce motion preference */
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .parallax-layer {
        will-change: auto;
      }

      .post, .link-grid a, .btn {
        transition: none;
      }
    }

    /* Company address banner overlay */
    .company-address-banner {
      position: absolute;
      top: 2.2rem;
      right: 2.2rem;
      background: #fff;
      color: #111;
      padding: 16px 28px;
      border-radius: 14px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
      font-size: 1.08rem;
      line-height: 1.5;
      text-align: right;
      z-index: 10;
      min-width: 220px;
      max-width: 90vw;
    }

    .company-address-banner strong {
      font-weight: bold;
      color: #111;
      font-size: 1.15em;
    }

    @media (max-width: 700px) {
      .company-address-banner {
        font-size: 0.97rem;
        padding: 8px 10px;
        min-width: 120px;
        right: 0.7rem;
        top: 0.7rem;
      }
    }

        /* =====================================================
           Breadcrumb - sits under the primary links in the header
           ===================================================== */
        nav.breadcrumb {
            background: rgba(255, 255, 255, .92);
            border-top: 1px solid rgba(0, 0, 0, .08);
            padding: .55rem .9rem;
        }

        nav.breadcrumb ol {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .1rem .45rem;
            font-size: .88rem;
        }

        nav.breadcrumb li {
            display: flex;
            align-items: center;
            gap: .45rem;
            color: rgba(0, 0, 0, .62);
        }

        nav.breadcrumb li + li::before {
            content: "/";
            color: rgba(0, 0, 0, .3);
        }

        nav.breadcrumb a:hover {
            text-decoration: underline;
        }

        nav.breadcrumb [aria-current="page"] {
            color: #111;
            font-weight: 600;
        }