/* ============================================================
       DESIGN TOKENS — S K PACKERS
       Industrial palette: Charcoal + Raw Wood + Burnt Amber
    ============================================================ */
    :root {
      /* Colors — Light / White Industrial Theme */
      --clr-bg:           #ffffff;       /* Pure white base */
      --clr-bg-2:         #f5f4f2;       /* Off-white surface */
      --clr-bg-3:         #edecea;       /* Card / panel bg */
      --clr-border:       #dddbd7;       /* Subtle structural lines */
      --clr-border-light: #e8e6e2;

      --clr-wood:         #8B5E3C;       /* Raw wood brown */
      --clr-wood-light:   #b07d52;       /* Lighter wood grain */
      --clr-amber:        #C47A0A;       /* Burnt amber — primary accent */
      --clr-amber-bright: #e08c0c;       /* Hover / highlight amber */
      --clr-amber-dim:    #fdf0dc;       /* Light amber tint for backgrounds */

      --clr-text-primary: #1a1714;       /* Near-black warm */
      --clr-text-secondary: #4a453e;     /* Mid dark warm grey */
      --clr-text-muted:   #8a8278;       /* Subtle / label text */
      --clr-white:        #ffffff;       /* Pure white */

      --clr-rust:         #c0441a;       /* Danger / highlight rust */

      /* Typography */
      --font-display:     'Oswald', sans-serif;        /* Headings — condensed industrial */
      --font-body:        'Source Serif 4', serif;     /* Body — editorial warmth */
      --font-mono:        'Share Tech Mono', monospace; /* Labels / specs */

      /* Spacing Scale */
      --space-xs:   0.25rem;
      --space-sm:   0.5rem;
      --space-md:   1rem;
      --space-lg:   1.5rem;
      --space-xl:   2.5rem;
      --space-2xl:  4rem;
      --space-3xl:  6rem;
      --space-4xl:  9rem;

      /* Layout */
      --max-width:        1200px;
      --section-pad-v:    5rem;
      --section-pad-h:    2rem;

      /* Borders */
      --radius-sm:  2px;
      --radius-md:  4px;

      /* Transitions */
      --transition-fast:  0.15s ease;
      --transition-mid:   0.3s ease;
      --transition-slow:  0.5s ease;

      /* Shadows */
      --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
      --shadow-md:  0 4px 20px rgba(0,0,0,0.6);
      --shadow-lg:  0 8px 40px rgba(0,0,0,0.8);
      --shadow-amber: 0 0 30px rgba(212,130,10,0.15);
    }

    /* ============================================================
       CSS RESET
    ============================================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    body {
      background-color: var(--clr-bg);
      color: var(--clr-text-primary);
      font-family: var(--font-body);
      font-weight: 300;
      line-height: 1.7;
      min-height: 100vh;
      overflow-x: hidden;
      /* Subtle noise grain texture overlay */
      position: relative;
    }

    /* Light theme — no grain overlay needed */

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

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

    ul, ol {
      list-style: none;
    }

    button {
      cursor: pointer;
      border: none;
      background: none;
      font-family: inherit;
    }

    input, textarea, select {
      font-family: inherit;
    }

    /* ============================================================
       TYPOGRAPHY SYSTEM
    ============================================================ */

    /* Display headings — Oswald condensed */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-display);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: 0.02em;
      color: var(--clr-text-primary);
    }

    h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 700; letter-spacing: 0.04em; }
    h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
    h3 { font-size: clamp(1.4rem, 3vw, 2rem); }
    h4 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

    p {
      font-size: 1rem;
      line-height: 1.75;
      color: var(--clr-text-secondary);
    }

    /* Mono label style */
    .label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--clr-amber);
    }

    /* ============================================================
       UTILITY CLASSES
    ============================================================ */
    .container {
      width: 100%;
      max-width: var(--max-width);
      margin-inline: auto;
      padding-inline: var(--section-pad-h);
    }

    .section-pad {
      padding-block: var(--section-pad-v);
    }

    /* Amber accent line — used above section labels */
    .accent-line {
      display: block;
      width: 3rem;
      height: 3px;
      background: var(--clr-amber);
      margin-bottom: var(--space-md);
    }

    .accent-line--center {
      margin-inline: auto;
      margin-bottom: var(--space-md);
    }

    /* Section header block */
    .section-header {
      margin-bottom: var(--space-2xl);
    }

    .section-header--center {
      text-align: center;
    }

    .section-header p {
      max-width: 54ch;
      margin-top: var(--space-md);
    }

    .section-header--center p {
      margin-inline: auto;
    }

    /* Divider rule */
    .divider {
      border: none;
      border-top: 1px solid var(--clr-border);
      margin-block: 0;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 0.85rem 2rem;
      font-family: var(--font-display);
      font-size: 0.95rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border-radius: var(--radius-sm);
      transition: all var(--transition-mid);
      position: relative;
      overflow: hidden;
    }

    .btn--primary {
      background: var(--clr-amber);
      color: var(--clr-bg);
    }

    .btn--primary:hover {
      background: var(--clr-amber-bright);
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(212,130,10,0.4);
    }

    .btn--outline {
      background: transparent;
      color: var(--clr-amber);
      border: 1.5px solid var(--clr-amber);
    }

    .btn--outline:hover {
      background: var(--clr-amber);
      color: var(--clr-bg);
      transform: translateY(-2px);
    }

    .btn--ghost {
      background: transparent;
      color: var(--clr-text-primary);
      border: 1.5px solid var(--clr-border-light);
    }

    .btn--ghost:hover {
      border-color: var(--clr-amber);
      color: var(--clr-amber);
    }

    /* Arrow icon inline */
    .btn__arrow {
      display: inline-block;
      transition: transform var(--transition-fast);
    }

    .btn:hover .btn__arrow {
      transform: translateX(4px);
    }

    /* ============================================================
       STRUCTURAL PATTERNS
    ============================================================ */

    /* Industrial ruled line — horizontal steel effect */
    .steel-rule {
      width: 100%;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        var(--clr-border-light) 20%,
        var(--clr-amber-dim) 50%,
        var(--clr-border-light) 80%,
        transparent
      );
    }

    /* Corner bracket decoration */
    .bracket-box {
      position: relative;
      padding: var(--space-xl);
    }

    .bracket-box::before,
    .bracket-box::after {
      content: '';
      position: absolute;
      width: 1.5rem;
      height: 1.5rem;
      border-color: var(--clr-amber);
      border-style: solid;
    }

    .bracket-box::before {
      top: 0; left: 0;
      border-width: 2px 0 0 2px;
    }

    .bracket-box::after {
      bottom: 0; right: 0;
      border-width: 0 2px 2px 0;
    }

    /* ============================================================
       SCROLLBAR STYLING
    ============================================================ */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: var(--clr-bg-2);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--clr-amber-dim);
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--clr-amber);
    }

    /* ============================================================
       SELECTION
    ============================================================ */
    ::selection {
      background: var(--clr-amber-dim);
      color: var(--clr-amber-bright);
    }

    /* ============================================================
       FOCUS — ACCESSIBILITY
    ============================================================ */
    :focus-visible {
      outline: 2px solid var(--clr-amber);
      outline-offset: 3px;
    }

    /* ============================================================
       SECTION 1 — NAVIGATION STYLES
    ============================================================ */

    /* Header shell */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--clr-border);
      transition: background var(--transition-mid), box-shadow var(--transition-mid);
    }

    /* Scrolled state — added via JS */
    .site-header.is-scrolled {
      background: rgba(255, 255, 255, 0.99);
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.09);
      border-bottom-color: var(--clr-border);
    }

    /* Header inner row */
    .header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      gap: var(--space-xl);
    }

    /* ---- Logo ---- */
    .header__logo {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      flex-shrink: 0;
      text-decoration: none;
    }

    .header__logo-img {
      width: 48px;
      height: 48px;
      object-fit: contain;
      border-radius: 6px;
    }

    .header__logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }

    .header__logo-name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--clr-text-primary);
    }

    .header__logo-tagline {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clr-amber);
      margin-top: 3px;
    }

    /* ---- Desktop Nav ---- */
    .header__nav {
      flex: 1;
      display: flex;
      justify-content: center;
    }

    .nav__list {
      display: flex;
      align-items: center;
      gap: 0;
    }

    .nav__link {
      display: block;
      padding: 0.5rem 1.1rem;
      font-family: var(--font-display);
      font-size: 0.88rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--clr-text-secondary);
      position: relative;
      transition: color var(--transition-fast);
    }

    /* Animated underline */
    .nav__link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 1.1rem;
      right: 1.1rem;
      height: 2px;
      background: var(--clr-amber);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--transition-mid);
    }

    .nav__link:hover {
      color: var(--clr-text-primary);
    }

    .nav__link:hover::after,
    .nav__link--active::after {
      transform: scaleX(1);
    }

    .nav__link--active {
      color: var(--clr-text-primary);
    }

    /* ---- Header CTA ---- */
    .header__cta {
      flex-shrink: 0;
      padding: 0.58rem 1.15rem;
      font-size: 0.76rem;
    }

    /* ---- Hamburger Button ---- */
    .header__hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      padding: 4px;
      background: transparent;
      border: 1px solid var(--clr-border-light);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: border-color var(--transition-fast);
    }

    .header__hamburger:hover {
      border-color: var(--clr-amber);
    }

    .hamburger__bar {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--clr-text-primary);
      border-radius: 1px;
      transition: transform var(--transition-mid), opacity var(--transition-mid), background var(--transition-fast);
      transform-origin: center;
    }

    /* Hamburger → X animation */
    .header__hamburger.is-open .hamburger__bar:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .header__hamburger.is-open .hamburger__bar:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    .header__hamburger.is-open .hamburger__bar:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* ---- Mobile Nav Drawer ---- */
    .header__mobile-nav {
      display: none;
      overflow: hidden;
      max-height: 0;
      background: var(--clr-bg-2);
      border-top: 1px solid var(--clr-border);
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .header__mobile-nav.is-open {
      max-height: 420px;
    }

    .mobile-nav__list {
      display: flex;
      flex-direction: column;
      padding: var(--space-md) var(--space-xl) var(--space-xl);
      gap: var(--space-xs);
    }

    .mobile-nav__link {
      display: block;
      padding: 0.75rem 0;
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--clr-text-secondary);
      border-bottom: 1px solid var(--clr-border);
      transition: color var(--transition-fast), padding-left var(--transition-fast);
    }

    .mobile-nav__link:hover {
      color: var(--clr-amber);
      padding-left: 0.5rem;
    }

    .mobile-nav__cta {
      margin-top: var(--space-md);
      text-align: center;
      justify-content: center;
    }

    /* ============================================================
       RESPONSIVE — NAVIGATION
    ============================================================ */

    /* Desktop (901px and above): show nav + CTA, hide hamburger + mobile drawer */
    @media (min-width: 901px) {
      .header__hamburger {
        display: none;
      }

      .header__mobile-nav {
        display: none !important;
      }
    }

    /* Mobile (900px and below): hide desktop nav + CTA, show hamburger */
    @media (max-width: 900px) {
      .header__inner {
        height: 64px;
        gap: 0.75rem;
      }

      .header__logo {
        gap: 0.7rem;
        min-width: 0;
      }

      .header__logo-img {
        width: 42px;
        height: 42px;
      }

      .header__logo-name {
        font-size: 1.02rem;
        letter-spacing: 0.06em;
      }

      .header__nav {
        display: none;
      }

      .header__cta {
        display: none;
      }

      .header__hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: auto;
        flex-shrink: 0;
        position: relative;
        z-index: 1001;
      }

      .header__mobile-nav {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.08);
      }

      .mobile-nav__list {
        padding: 0.9rem 1rem 1rem;
      }
    }

    @media (max-width: 480px) {
      .header__inner {
        height: 58px;
        gap: 0.55rem;
      }

      .header__logo {
        gap: 0.55rem;
      }

      .header__logo-img {
        width: 38px;
        height: 38px;
      }

      .header__logo-name {
        font-size: 0.9rem;
      }

      .header__logo-tagline {
        display: none;
      }

      .header__hamburger {
        width: 38px;
        height: 38px;
      }

      .mobile-nav__link {
        padding: 0.68rem 0;
        font-size: 0.92rem;
      }

      .mobile-nav__cta {
        margin-top: 0.75rem;
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
      }
    }

    /* ============================================================
       SECTION 2 — HERO STYLES (Full-bleed photo + text overlay)
    ============================================================ */

    .hero {
      position: relative;
      width: 100%;
      height: 78vh;
      min-height: 480px;
      overflow: hidden;
    }

    .home-page {
      --section-pad-v: clamp(3.5rem, 7vw, 5rem);
      --home-header-offset: 72px;
    }

    /* ---- SLIDESHOW — full background ---- */
    .hero__slideshow {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
    }

    .slide.is-active {
      opacity: 1;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* Dark gradient overlay so text stays readable */
    .hero__overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to right,
        rgba(10, 8, 6, 0.72) 0%,
        rgba(10, 8, 6, 0.55) 50%,
        rgba(10, 8, 6, 0.20) 100%
      );
    }

    /* ---- CONTENT — sits above overlay ---- */
    .hero__content {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-inline: calc((100vw - var(--max-width)) / 2 + var(--section-pad-h));
      padding-inline: max(var(--section-pad-h), calc((100vw - var(--max-width)) / 2 + var(--section-pad-h)));
      max-width: 700px;
      width: min(100%, 700px);
    }

    .hero__label {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-lg);
      color: #f0c97a;
    }

    .hero__label-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--clr-amber);
    }

    /* Heading — white on dark photo */
    .hero__heading {
      display: flex;
      flex-direction: column;
      margin-bottom: var(--space-lg);
      color: #ffffff;
      margin-top: 4rem;
    }

    .hero__heading-line {
      display: block;
      line-height: 1.05;
      color: #ffffff;
      text-shadow: 0 2px 12px rgba(0,0,0,0.4);
    }

    .hero__heading-line--accent {
      color: var(--clr-amber-bright);
    }

    /* Subtext */
    .hero__subtext {
      max-width: 46ch;
      font-size: 1.05rem;
      line-height: 1.8;
      color: rgba(255,255,255,0.82);
      margin-bottom: var(--space-xl);
      border-left: 3px solid var(--clr-amber);
      padding-left: var(--space-md);
    }

    /* CTA Row */
    .hero__cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-md);
      margin-bottom: var(--space-2xl);
    }

    /* White ghost outline button for dark bg */
    .btn--outline-white {
      background: transparent;
      color: #ffffff;
      border: 1.5px solid rgba(255,255,255,0.7);
    }

    .btn--outline-white:hover {
      background: rgba(255,255,255,0.12);
      border-color: #ffffff;
    }

    /* Stats strip */
    .hero__stats {
      display: flex;
      align-items: center;
      gap: var(--space-xl);
      padding-top: var(--space-xl);
      border-top: 1px solid rgba(255,255,255,0.2);
    }

    .hero__stat {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .hero__stat-number {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1;
    }

    .hero__stat-label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
    }

    .hero__stat-divider {
      width: 1px;
      height: 2.5rem;
      background: rgba(255,255,255,0.2);
      flex-shrink: 0;
    }

    /* ---- Slide name badge — bottom centre ---- */
    .slide__caption {
      position: absolute;
      bottom: 5rem;
      right: var(--space-xl);
      z-index: 3;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.25);
      backdrop-filter: blur(8px);
      padding: 0.4rem 0.9rem;
      border-radius: 2px;
    }

    .slide__caption-text {
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.85);
    }

    /* ---- Dot navigation ---- */
    .slideshow__dots {
      position: absolute;
      bottom: var(--space-xl);
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      display: flex;
      gap: 10px;
    }

    .slideshow__dot {
      width: 28px;
      height: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,0.35);
      border: none;
      cursor: pointer;
      transition: background var(--transition-fast), width var(--transition-mid);
      padding: 0;
    }

    .slideshow__dot.is-active {
      background: var(--clr-amber);
      width: 48px;
    }

    /* ---- Prev / Next arrows ---- */
    .slideshow__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 4;
      width: 44px;
      height: 44px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.3);
      backdrop-filter: blur(6px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      color: #ffffff;
      transition: background var(--transition-fast);
    }

    .slideshow__arrow:hover {
      background: var(--clr-amber);
      border-color: var(--clr-amber);
    }

    .slideshow__arrow--prev { left: var(--space-lg); }
    .slideshow__arrow--next { right: var(--space-lg); }

    /* ---- Slide counter ---- */
    .slideshow__counter {
      position: absolute;
      bottom: var(--space-xl);
      right: var(--space-xl);
      z-index: 4;
      font-family: var(--font-mono);
      font-size: 0.62rem;
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.6);
    }

    /* ============================================================
       RESPONSIVE — HERO
    ============================================================ */
    @media (max-width: 900px) {
      .hero {
        height: auto;
        min-height: clamp(420px, 68svh, 560px);
      }

      .hero__content {
        position: relative;
        padding: clamp(2.4rem, 7vw, 3.4rem) var(--section-pad-h) 4.4rem;
        max-width: 100%;
        justify-content: flex-end;
        min-height: clamp(420px, 68svh, 560px);
        width: 100%;
      }

      .hero__heading {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: clamp(2.6rem, 9vw, 4.1rem);
      }

      .hero__subtext {
        margin-bottom: 1.15rem;
        font-size: 0.98rem;
        line-height: 1.65;
      }

      .hero__overlay {
        background: linear-gradient(
          to top,
          rgba(10,8,6,0.85) 0%,
          rgba(10,8,6,0.50) 50%,
          rgba(10,8,6,0.20) 100%
        );
      }

      .slide__caption {
        bottom: 7rem;
        right: var(--section-pad-h);
      }
    }

    @media (max-width: 620px) {
      .hero__content {
        padding-top: 2.1rem;
        padding-bottom: 3.5rem;
        min-height: clamp(380px, 62svh, 480px);
      }

      .hero__label {
        margin-bottom: 0.9rem;
      }

      .hero__stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
        padding-top: 0.95rem;
      }

      .hero__stat {
        min-width: 0;
        text-align: center;
        gap: 0.2rem;
      }

      .hero__stat-divider {
        display: none;
      }

      .hero__stat-number {
        font-size: 1.4rem;
      }

      .hero__stat-label {
        font-size: 0.5rem;
        letter-spacing: 0.1em;
        line-height: 1.4;
      }

      .slide__caption {
        left: 50%;
        right: auto;
        bottom: 3.6rem;
        width: min(calc(100% - (var(--section-pad-h) * 2)), 18rem);
        transform: translateX(-50%);
        text-align: center;
        padding-inline: 0.65rem;
      }

      .slide__caption-text {
        display: block;
        line-height: 1.4;
        white-space: normal;
      }

      .slideshow__dots {
        bottom: 1.1rem;
      }

      .slideshow__counter {
        left: 50%;
        right: auto;
        bottom: 0.55rem;
        transform: translateX(-50%);
      }

      .slideshow__arrow {
        top: auto;
        bottom: 0.8rem;
        transform: none;
      }
    }

    @media (max-width: 480px) {
      .home-page {
        --home-header-offset: 58px;
      }

      .hero {
        min-height: 360px;
      }

      .hero__content {
        padding-top: 1.8rem;
        padding-bottom: 2.4rem;
        min-height: 360px;
      }

      .hero__heading {
        font-size: clamp(2.05rem, 11vw, 2.85rem);
      }

      .hero__subtext {
        font-size: 0.9rem;
        line-height: 1.55;
        padding-left: 0.75rem;
      }

      .hero__stats {
        gap: 0.45rem;
      }

      .hero__stat-number {
        font-size: 1.18rem;
      }

      .hero__stat-label {
        font-size: 0.46rem;
        letter-spacing: 0.08em;
      }

      .slide__caption,
      .slideshow__counter,
      .slideshow__arrow {
        display: none;
      }

      .slideshow__dots {
        bottom: 0.8rem;
      }
    }
    body {
      padding-top: 72px;
    }

    @media (max-width: 480px) {
      body {
        padding-top: 58px;
      }
    }

    /* ============================================================
       SECTION 3 — TRUST BAR
    ============================================================ */

    .trust-bar {
      background: var(--clr-bg-3);
      border-top: 1px solid var(--clr-border);
      border-bottom: 1px solid var(--clr-border);
      padding-block: var(--space-xl);
      overflow: hidden;
    }

    .trust-bar__inner {
      display: flex;
      align-items: stretch;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0;
    }

    /* Each trust item */
    .trust-item {
      display: flex;
      align-items: center;
      gap: var(--space-md);
      padding: var(--space-md) var(--space-xl);
      flex: 1;
      min-width: 180px;
      position: relative;
    }

    /* Vertical divider between items */
    .trust-item + .trust-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 15%;
      height: 70%;
      width: 1px;
      background: var(--clr-border);
    }

    /* Icon wrap */
    .trust-item__icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      background: var(--clr-amber-dim);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .trust-item__icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--clr-amber);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Text */
    .trust-item__text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .trust-item__value {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--clr-text-primary);
      line-height: 1;
    }

    .trust-item__label {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--clr-text-muted);
    }

    /* Responsive */
    @media (max-width: 768px) {
      .trust-bar__inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .trust-item + .trust-item::before {
        display: none;
      }

      .trust-item {
        border-bottom: 1px solid var(--clr-border);
        border-right: 1px solid var(--clr-border);
        min-width: unset;
        padding: 0.85rem 0.75rem;
        gap: 0.65rem;
      }

      .trust-item:nth-child(3n) {
        border-right: none;
      }

      .trust-item:nth-last-child(-n + 3) {
        border-bottom: none;
      }

      .trust-item__icon {
        width: 38px;
        height: 38px;
      }

      .trust-item__icon svg {
        width: 18px;
        height: 18px;
      }

      .trust-item__value {
        font-size: 1.02rem;
      }

      .trust-item__label {
        font-size: 0.52rem;
        letter-spacing: 0.1em;
        line-height: 1.35;
      }
    }

    @media (max-width: 560px) {
      .trust-bar__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .trust-item:nth-child(3n) {
        border-right: 1px solid var(--clr-border);
      }

      .trust-item:nth-child(even) {
        border-right: none;
      }

      .trust-item:nth-last-child(-n + 3) {
        border-bottom: 1px solid var(--clr-border);
      }

      .trust-item:nth-last-child(-n + 2) {
        border-bottom: none;
      }
    }


    /* ============================================================
       SHARED SECTION COMPONENTS
    ============================================================ */
    .container {
      max-width: var(--max-width);
      margin-inline: auto;
      padding-inline: var(--section-pad-h);
    }

    .section-pad {
      padding-block: var(--section-pad-v);
    }

    .section-label {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--clr-amber);
      margin-bottom: var(--space-sm);
      padding-left: 1.2em;
      position: relative;
    }
    .section-label::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 0.7em; height: 2px;
      background: var(--clr-amber);
    }

    .section-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--clr-text-primary);
      line-height: 1.05;
      margin-bottom: var(--space-md);
    }

    .section-header p {
      color: var(--clr-text-secondary);
      max-width: 52ch;
      font-size: 1.05rem;
      line-height: 1.65;
    }

    .section-header--center {
      text-align: center;
      margin-bottom: var(--space-2xl);
    }
    .section-header--center p {
      margin-inline: auto;
    }

    .section-header:not(.section-header--center) {
      margin-bottom: var(--space-xl);
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      font-family: var(--font-display);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 0.85em 2em;
      border: 2px solid transparent;
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-mid);
    }

    .btn--primary {
      background: var(--clr-amber);
      color: var(--clr-white);
      border-color: var(--clr-amber);
    }
    .btn--primary:hover {
      background: var(--clr-amber-bright);
      border-color: var(--clr-amber-bright);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(196, 122, 10, 0.35);
    }

    .btn--outline {
      background: transparent;
      color: var(--clr-text-primary);
      border-color: var(--clr-border);
    }
    .btn--outline:hover {
      border-color: var(--clr-amber);
      color: var(--clr-amber);
      transform: translateY(-2px);
    }

    /* ============================================================
       SECTION 4 — PRODUCTS TEASER
    ============================================================ */
    .products-teaser {
      background: var(--clr-bg);
      border-top: 1px solid var(--clr-border-light);
    }

    .products-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
      gap: clamp(1rem, 2.4vw, 1.5rem);
      margin-bottom: var(--space-2xl);
    }

    /* Last two cards span layout adjustment */
    .products-grid .product-card:nth-child(4),
    .products-grid .product-card:nth-child(5) {
      /* naturally fill remaining row */
    }

    .product-card {
      background: var(--clr-bg-2);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--radius-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
      position: relative;
    }
    .product-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.1);
      border-color: var(--clr-amber);
    }

    .product-card--featured {
      border-color: rgba(196, 122, 10, 0.3);
    }

    .product-card__img-wrap {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: var(--clr-bg-3);
    }

    .product-card__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-slow);
    }
    .product-card:hover .product-card__img {
      transform: scale(1.06);
    }

    .product-card__badge {
      position: absolute;
      top: var(--space-md);
      left: var(--space-md);
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: var(--clr-text-primary);
      color: var(--clr-white);
      padding: 0.3em 0.8em;
      border-radius: 2px;
    }
    .product-card__badge--amber {
      background: var(--clr-amber);
    }

    .product-card__body {
      padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem);
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    .product-card__num {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--clr-text-muted);
      letter-spacing: 0.15em;
      margin-bottom: var(--space-xs);
    }

    .product-card__name {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--clr-text-primary);
      margin-bottom: var(--space-sm);
    }

    .product-card__desc {
      font-size: 0.9rem;
      color: var(--clr-text-secondary);
      line-height: 1.6;
      flex: 1;
      margin-bottom: var(--space-lg);
    }

    .product-card__link {
      font-family: var(--font-display);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--clr-amber);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      transition: gap var(--transition-fast), color var(--transition-fast);
    }
    .product-card__link:hover {
      gap: var(--space-sm);
      color: var(--clr-amber-bright);
    }

    /* Corrugated visual illustration */
    .product-card__img-wrap--pattern {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #f0ece4 0%, #e6e0d5 100%);
    }

    .corrugated-visual {
      position: relative;
      width: 80%;
      height: 60%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
    }

    .corr-layer {
      height: 18px;
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }
    .corr-layer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 6px,
        rgba(139,94,60,0.15) 6px,
        rgba(139,94,60,0.15) 12px
      );
    }
    .corr-layer--1 { background: #c8b49a; height: 8px; }
    .corr-layer--2 {
      height: 22px;
      background: linear-gradient(180deg, #ddd0bc 0%, #c8b49a 50%, #ddd0bc 100%);
    }
    .corr-layer--3 { background: #c8b49a; height: 8px; }

    .corr-label {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      letter-spacing: 0.12em;
      color: var(--clr-wood);
      margin-top: var(--space-sm);
      text-align: center;
    }

    .products-teaser__cta {
      text-align: center;
    }

    .products-teaser__cta .btn {
      max-width: 100%;
      justify-content: center;
      text-align: center;
      white-space: normal;
      line-height: 1.35;
    }

    /* ============================================================
       SECTION 5 — WHY US
    ============================================================ */
    .why-us {
      position: relative;
      overflow: hidden;
      background: url("../assets/background/why-sk-packers-bg.webp") no-repeat center / cover;
      border-top: 1px solid var(--clr-border-light);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .why-us::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(255, 255, 255, 0) 48%,
        rgba(255, 255, 255, 0) 100%
      );
      pointer-events: none;
    }

    .why-us__inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
      gap: clamp(1.25rem, 3vw, 2.6rem);
      align-items: start;
      padding: clamp(1.2rem, 2.2vw, 2rem);
      border-radius: 10px;
      border: 1px solid var(--clr-border);
      background: transparent;
    }

    @media (max-width: 860px) {
      .why-us__inner {
        grid-template-columns: 1fr;
        gap: 1.4rem;
      }
    }

    .why-us__left {
      padding: clamp(0.9rem, 2.2vw, 1.2rem);
      background: rgba(255, 255, 255, 0.46);
      border: 1px solid rgba(229, 223, 215, 0.75);
      border-radius: 8px;
    }

    .why-us__left .section-label {
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      color: #ce840f;
      margin-bottom: 0.55rem;
    }

    .why-us__left .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: 0.015em;
      margin-bottom: 0.75rem;
      color: #1a1714;
      line-height: 1.02;
    }

    .why-us__left .section-header p {
      color: #4b443b;
      font-size: 0.98rem;
      line-height: 1.68;
      max-width: 44ch;
    }

    .why-us .btn--primary {
      margin-top: 0.7rem;
      min-width: 220px;
      padding: 0.82em 1.45em;
      font-size: 0.86rem;
      justify-content: center;
      border-radius: 4px;
      box-shadow: none;
    }

    .why-us__right {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      align-self: stretch;
    }

    .usp-item {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 0.85rem;
      align-items: start;
      padding: 0.78rem 0.85rem;
      border: 1px solid #e5dfd7;
      border-radius: 6px;
      background: rgba(255, 253, 250, 0.86);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .usp-item:hover {
      border-color: #d3c2ad;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }

    .usp-item__icon {
      width: 46px;
      height: 46px;
      background: #f3e4cf;
      border: 1px solid rgba(196,122,10,0.26);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .usp-item__icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--clr-amber);
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .usp-item__text h3 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--clr-text-primary);
      margin-bottom: 0.2rem;
      line-height: 1.12;
    }

    .usp-item__text p {
      font-size: 0.92rem;
      color: #4b4339;
      line-height: 1.58;
      margin: 0;
    }

    @media (max-width: 860px) {
      .why-us .btn--primary {
        min-width: 100%;
      }
    }

    @media (max-width: 600px) {
      .usp-item {
        grid-template-columns: 40px 1fr;
        gap: 0.75rem;
        padding: 0.68rem 0.72rem;
      }

      .usp-item__icon {
        width: 40px;
        height: 40px;
      }

      .usp-item__icon svg {
        width: 17px;
        height: 17px;
      }

      .why-us__left .section-header p {
        font-size: 0.96rem;
      }

      .usp-item__text h3 {
        font-size: 0.98rem;
      }

      .usp-item__text p {
        font-size: 0.88rem;
      }
    }

    /* ============================================================
       SECTION 6 — INDUSTRIES GRID
    ============================================================ */
    .industries {
      background: var(--clr-bg);
    }

    .industries-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
      margin-bottom: var(--space-2xl);
    }

    @media (max-width: 1000px) {
      .industries-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .industries-grid { grid-template-columns: 1fr; }
    }

    .industry-card {
      background: var(--clr-bg-2);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--radius-md);
      padding: var(--space-xl) var(--space-lg);
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
    }
    .industry-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.08);
      border-color: var(--clr-amber);
    }

    .industry-card__icon {
      width: 44px;
      height: 44px;
      margin-bottom: var(--space-lg);
      background: var(--clr-amber-dim);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .industry-card__icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--clr-amber);
      stroke-width: 1.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .industry-card__name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--clr-text-primary);
      margin-bottom: var(--space-sm);
    }

    .industry-card__desc {
      font-size: 0.85rem;
      color: var(--clr-text-secondary);
      line-height: 1.6;
    }

    .industries__cta {
      text-align: center;
    }

    /* ============================================================
       SECTION 6A — CLIENT LIST SLIDER (HOME)
    ============================================================ */
    .clients-showcase {
      background: var(--clr-bg);
      border-top: 1px solid var(--clr-border-light);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .clients-showcase .section-header {
      margin-bottom: 1.4rem;
    }

    .clients-slider {
      --clients-per-view: 4;
      --clients-gap: clamp(0.75rem, 2vw, 0.95rem);
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.95rem;
    }

    .clients-slider__viewport {
      overflow: hidden;
      width: 100%;
      min-width: 0;
    }

    .clients-slider__track {
      display: flex;
      gap: var(--clients-gap);
      transition: transform var(--transition-mid);
      will-change: transform;
    }

    .client-card {
      flex: 0 0 calc((100% - (var(--clients-gap) * (var(--clients-per-view) - 1))) / var(--clients-per-view));
      background: linear-gradient(170deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid #d7e4f4;
      border-radius: var(--radius-md);
      padding: 1rem;
      min-height: 128px;
      box-shadow: 0 8px 22px rgba(18, 53, 92, 0.08);
    }

    .client-card h3 {
      margin: 0 0 0.45rem;
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      line-height: 1.2;
      color: #204b7e;
    }

    .client-card p {
      margin: 0;
      font-size: 0.88rem;
      line-height: 1.58;
      color: #4f6e8f;
    }

    .clients-slider__arrow {
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 50%;
      border: 1px solid #c0d7f4;
      background: #eff6ff;
      color: #205996;
      font-size: 1.05rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background var(--transition-mid), color var(--transition-mid), transform var(--transition-mid), border-color var(--transition-mid);
      flex-shrink: 0;
    }

    .clients-slider__arrow:hover {
      background: #2f74bf;
      color: #ffffff;
      border-color: #2f74bf;
      transform: translateY(-2px);
    }

    .clients-slider__arrow:focus-visible {
      outline: 2px solid #225e9f;
      outline-offset: 2px;
    }

    .clients-slider__dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.45rem;
      margin-bottom: 1.05rem;
    }

    .clients-slider__dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      border: 0;
      background: #b9cce3;
      cursor: pointer;
      padding: 0;
      transition: transform var(--transition-mid), background var(--transition-mid);
    }

    .clients-slider__dot.is-active {
      background: #2e72bc;
      transform: scale(1.35);
    }

    .clients-showcase__cta {
      text-align: center;
    }

    .clients-showcase__cta .btn {
      max-width: 100%;
      justify-content: center;
      text-align: center;
      white-space: normal;
      line-height: 1.35;
    }

    @media (max-width: 760px) {
      .clients-slider {
        gap: 0.4rem;
      }

      .clients-slider__arrow {
        width: 2rem;
        height: 2rem;
      }
    }

    @media (max-width: 560px) {
      .client-card {
        min-height: 116px;
      }
    }

    /* ============================================================
       SECTION 7 — WORK PROCESS
    ============================================================ */
    .work-process {
      position: relative;
      padding-block: 3.2rem;
      background:
        linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
        url("../assets/background/process-bg.webp") no-repeat center / cover;
      border-top: 1px solid var(--clr-border-light);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .work-process .section-header {
      margin-bottom: 2rem;
    }

    .work-process__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
      gap: clamp(0.9rem, 2vw, 1rem);
    }

    .process-step {
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid var(--clr-border-light);
      border-radius: var(--radius-md);
      padding: clamp(0.85rem, 2vw, 1rem);
      position: relative;
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
    }

    .process-step:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.08);
      border-color: rgba(196, 122, 10, 0.38);
    }

    .process-step__number {
      display: inline-flex;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      align-items: center;
      justify-content: center;
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--clr-amber);
      border: 2px solid rgba(196, 122, 10, 0.45);
      background: var(--clr-amber-dim);
      margin-bottom: 0.7rem;
    }

    .process-step__title {
      font-family: var(--font-display);
      font-size: 1.08rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--clr-text-primary);
      margin-bottom: 0.45rem;
      line-height: 1.18;
    }

    .process-step__desc {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.6;
      color: var(--clr-text-secondary);
    }

    /* ============================================================
       SECTION 8 — CTA STRIP
    ============================================================ */
    .cta-strip {
      background: var(--clr-text-primary);
      padding-block: var(--space-3xl);
      position: relative;
      overflow: hidden;
    }

    /* Wood grain overlay on CTA strip */
    .cta-strip::before {
      content: '';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        100deg,
        transparent 0px,
        transparent 3px,
        rgba(139,94,60,0.04) 3px,
        rgba(139,94,60,0.04) 6px
      );
      pointer-events: none;
    }

    /* Amber accent glow */
    .cta-strip::after {
      content: '';
      position: absolute;
      right: -10%;
      top: -50%;
      width: 50%;
      height: 200%;
      background: radial-gradient(ellipse, rgba(196,122,10,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .cta-strip__inner {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-xl);
      flex-wrap: wrap;
    }

    .cta-strip__text {
      flex: 1 1 24rem;
      min-width: 0;
    }

    .cta-strip__text h2 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.5vw, 2.4rem);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--clr-white);
      margin-bottom: var(--space-sm);
    }

    .cta-strip__text p {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.6);
      max-width: 50ch;
    }

    .btn--cta-strip {
      background: var(--clr-amber);
      color: var(--clr-white);
      border: 2px solid var(--clr-amber);
      font-family: var(--font-display);
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1em 2.4em;
      border-radius: var(--radius-md);
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      transition: all var(--transition-mid);
      white-space: normal;
      text-align: center;
      justify-content: center;
      line-height: 1.35;
    }
    .btn--cta-strip:hover {
      background: var(--clr-amber-bright);
      border-color: var(--clr-amber-bright);
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(196,122,10,0.4);
    }

    @media (max-width: 640px) {
      .cta-strip {
        padding-block: 2.1rem;
      }

      .cta-strip__inner {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
      }

      .cta-strip__text h2 {
        font-size: 1.45rem;
      }

      .cta-strip__text p {
        margin-inline: auto;
        font-size: 0.88rem;
        max-width: 32ch;
      }

      .btn--cta-strip {
        width: auto;
        padding: 0.8em 1.35em;
        font-size: 0.8rem;
      }
    }

    @media (max-width: 620px) {
      .home-page {
        --section-pad-h: 1.1rem;
        --section-pad-v: 3.25rem;
      }

      .why-us__inner {
        padding: 0.85rem;
      }

      .clients-showcase__cta .btn,
      .products-teaser__cta .btn,
      .why-us .btn--primary {
        width: 100%;
      }
    }

    @media (max-width: 420px) {
      .home-page {
        --section-pad-h: 0.9rem;
      }

      .product-card__badge {
        top: 0.75rem;
        left: 0.75rem;
      }

      .product-card__name {
        font-size: 1.12rem;
      }

      .product-card__desc,
      .client-card p,
      .process-step__desc {
        font-size: 0.86rem;
      }

      .btn--cta-strip {
        width: auto;
        max-width: min(100%, 14rem);
        padding-inline: 1.2rem;
      }
    }

    /* ============================================================
       PRODUCTS PAGE
    ============================================================ */
    .products-hero {
      position: relative;
      margin-top: 72px;
      min-height: clamp(190px, 33vh, 280px);
      display: flex;
      align-items: center;
      background:
        linear-gradient(95deg, rgba(10, 30, 57, 0.82) 0%, rgba(10, 30, 57, 0.58) 50%, rgba(10, 30, 57, 0.3) 100%),
        url("../assets/background/products-hero-bg.webp") no-repeat center / cover;
      border-bottom: 1px solid rgba(22, 81, 150, 0.24);
    }

    .products-page {
      --section-pad-v: clamp(3.5rem, 7vw, 5rem);
    }

    .products-hero__inner {
      padding-block: clamp(1.5rem, 4.2vh, 2.5rem);
      text-align: center;
    }

    .products-hero__kicker {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(203, 226, 255, 0.92);
      margin-bottom: 0.8rem;
    }

    .products-hero__title {
      margin: 0;
      color: #ffffff;
      font-size: clamp(1.9rem, 4.8vw, 3rem);
      line-height: 1.08;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
    }

    .products-hero__lead {
      margin: 0.95rem auto 0;
      max-width: 62ch;
      font-size: 1rem;
      line-height: 1.75;
      color: rgba(236, 244, 255, 0.92);
      border-left: 0;
      padding-left: 0;
    }

    .products-catalog {
      background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .products-catalog .section-header {
      margin-bottom: 1.8rem;
    }

    .products-catalog__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
      gap: clamp(1rem, 2vw, 1.35rem);
      align-items: stretch;
    }

    .product-detail-card {
      display: grid;
      grid-template-rows: auto 1fr;
      background: #ffffff;
      border: 1px solid #d7e5f8;
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
    }

    .product-detail-card:hover {
      transform: translateY(-4px);
      border-color: #9ebee3;
      box-shadow: 0 12px 28px rgba(33, 80, 136, 0.12);
    }

    .product-detail-card__img-wrap {
      position: relative;
      aspect-ratio: 4 / 2.5;
      overflow: hidden;
      background: #edf4ff;
    }

    .product-detail-card__img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform var(--transition-slow);
    }

    .product-detail-card:hover .product-detail-card__img-wrap img {
      transform: scale(1.05);
    }

    .product-detail-card__badge {
      position: absolute;
      top: 0.8rem;
      left: 0.8rem;
      background: rgba(11, 63, 128, 0.9);
      color: #ffffff;
      border: 1px solid rgba(181, 211, 248, 0.45);
      border-radius: 999px;
      padding: 0.28rem 0.65rem;
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .product-detail-card__body {
      display: grid;
      gap: 0.75rem;
      padding: clamp(1rem, 2vw, 1.25rem);
    }

    .product-detail-card__body h3 {
      margin: 0;
      font-size: 1.2rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: #1c457a;
    }

    .product-detail-card__body p {
      margin: 0;
      font-size: 0.93rem;
      line-height: 1.65;
      color: #4c6686;
    }

    .product-detail-card__specs {
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.45rem;
    }

    .product-detail-card__specs li {
      position: relative;
      padding-left: 0.95rem;
      font-size: 0.86rem;
      line-height: 1.55;
      color: #516d8e;
    }

    .product-detail-card__specs li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.7em;
      width: 0.36rem;
      height: 0.36rem;
      border-radius: 50%;
      background: #3f82d1;
    }

    .products-custom-banner {
      background: #f4f9ff;
      border-top: 1px solid #d9e7f8;
      border-bottom: 1px solid #d9e7f8;
      padding-block: 0.8rem;
    }

    .products-custom-banner__card {
      position: relative;
      width: 100%;
      overflow: hidden;
      min-height: clamp(220px, 34vw, 320px);
      border-radius: 10px;
      border: 1px solid #bed7f8;
      box-shadow: 0 14px 30px rgba(31, 76, 128, 0.15);
    }

    .products-custom-banner__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .products-custom-banner__overlay {
      position: absolute;
      inset: 0;
      padding: clamp(1rem, 2.5vw, 2rem);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 0.7rem;
      background: linear-gradient(100deg, rgba(8, 28, 54, 0.82) 8%, rgba(8, 28, 54, 0.5) 58%, rgba(8, 28, 54, 0.2) 100%);
    }

    .products-custom-banner__overlay .btn {
      align-self: flex-start;
      max-width: 100%;
      justify-content: center;
      text-align: center;
      white-space: normal;
      line-height: 1.35;
    }

    .products-custom-banner__kicker {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(205, 227, 255, 0.9);
    }

    .products-custom-banner__overlay h2 {
      margin: 0;
      max-width: 40ch;
      color: #ffffff;
      font-size: clamp(1.35rem, 3vw, 2rem);
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .products-capacity {
      background: var(--clr-bg);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .products-capacity .section-header {
      margin-bottom: 1.6rem;
    }

    .products-capacity__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
      gap: clamp(0.95rem, 2vw, 1.1rem);
    }

    .capacity-card {
      background: linear-gradient(170deg, #ffffff 0%, #f4f9ff 100%);
      border: 1px solid #d8e6f8;
      border-radius: var(--radius-md);
      padding: clamp(1rem, 2vw, 1.2rem);
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
    }

    .capacity-card:hover {
      transform: translateY(-3px);
      border-color: #9ebde3;
      box-shadow: 0 10px 24px rgba(33, 80, 136, 0.1);
    }

    .capacity-card__icon {
      width: 2.35rem;
      height: 2.35rem;
      margin-bottom: 0.65rem;
      border-radius: 999px;
      background: #e7f1ff;
      border: 1px solid #c2daf9;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .capacity-card__icon svg {
      width: 1.2rem;
      height: 1.2rem;
      stroke: #2367b8;
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .capacity-card h3 {
      margin: 0 0 0.35rem;
      font-size: 0.98rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #214a7e;
    }

    .capacity-card p {
      margin: 0;
      font-size: 0.88rem;
      line-height: 1.62;
      color: #527090;
    }

    .products-cta-strip {
      background:
        linear-gradient(95deg, rgba(11, 35, 66, 0.96) 0%, rgba(18, 62, 114, 0.95) 100%),
        url("../assets/background/process-bg.webp") no-repeat center / cover;
      border-top: 1px solid rgba(172, 206, 247, 0.35);
    }

    .products-cta-strip__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
      flex-wrap: wrap;
      padding-block: 2.2rem;
    }

    .products-cta-strip__text {
      flex: 1 1 24rem;
      min-width: 0;
    }

    .products-cta-strip__text h2 {
      margin: 0 0 0.45rem;
      color: #ffffff;
      font-size: clamp(1.5rem, 3.2vw, 2.2rem);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 1.14;
    }

    .products-cta-strip__text p {
      margin: 0;
      max-width: 54ch;
      color: rgba(231, 242, 255, 0.88);
      font-size: 0.95rem;
    }

    .products-cta-strip .btn {
      max-width: 100%;
      justify-content: center;
      text-align: center;
      white-space: normal;
      line-height: 1.35;
      padding-inline: clamp(1.1rem, 4vw, 2rem);
    }

    @media (max-width: 900px) {
      .products-hero {
        margin-top: 60px;
      }

      .products-custom-banner__overlay h2 {
        max-width: 28ch;
      }
    }

    @media (max-width: 760px) {
      .products-cta-strip__inner {
        justify-content: center;
        text-align: center;
      }

      .products-custom-banner__overlay .btn {
        width: min(100%, 18rem);
      }

      .products-custom-banner__overlay {
        text-align: center;
        align-items: center;
      }
    }

    @media (max-width: 620px) {
      .products-page {
        --section-pad-h: 1.1rem;
        --section-pad-v: 3.25rem;
      }

      .products-cta-strip__inner {
        padding-block: 1.7rem;
      }

      .products-custom-banner {
        padding-block: 1rem;
      }

      .products-custom-banner__card {
        min-height: 260px;
      }

      .products-custom-banner__overlay {
        justify-content: center;
        background: linear-gradient(180deg, rgba(8, 28, 54, 0.84) 0%, rgba(8, 28, 54, 0.46) 60%, rgba(8, 28, 54, 0.2) 100%);
      }

      .products-custom-banner__overlay h2 {
        max-width: 18ch;
      }

      .products-cta-strip .btn {
        width: 100%;
      }
    }

    @media (max-width: 420px) {
      .products-page {
        --section-pad-h: 0.9rem;
      }

      .products-hero__inner {
        padding-block: 1.25rem;
      }

      .product-detail-card__badge {
        top: 0.7rem;
        left: 0.7rem;
      }

      .product-detail-card__body h3 {
        font-size: 1.08rem;
      }

      .product-detail-card__body p,
      .product-detail-card__specs li,
      .capacity-card p {
        font-size: 0.84rem;
      }

      .products-custom-banner__overlay h2 {
        font-size: 1.25rem;
      }
    }

    /* ============================================================
       INDUSTRIES PAGE
    ============================================================ */
    .industries-hero {
      position: relative;
      margin-top: 72px;
      min-height: clamp(190px, 33vh, 280px);
      display: flex;
      align-items: center;
      background:
        linear-gradient(96deg, rgba(12, 28, 43, 0.86) 0%, rgba(12, 28, 43, 0.58) 52%, rgba(12, 28, 43, 0.28) 100%),
        url("../assets/background/industries-hero-bg.webp") no-repeat center / cover;
      border-bottom: 1px solid rgba(24, 74, 122, 0.25);
    }

    .industries-hero__inner {
      padding-block: clamp(1.5rem, 4.2vh, 2.5rem);
      text-align: center;
    }

    .industries-hero__kicker {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(205, 231, 255, 0.9);
      margin-bottom: 0.8rem;
    }

    .industries-hero__title {
      margin: 0;
      color: #ffffff;
      font-size: clamp(1.9rem, 4.7vw, 3rem);
      line-height: 1.08;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
    }

    .industries-hero__lead {
      margin: 0.95rem auto 0;
      max-width: 62ch;
      font-size: 1rem;
      line-height: 1.72;
      color: rgba(237, 245, 255, 0.9);
      border-left: 0;
      padding-left: 0;
    }

    .industries-snapshot {
      background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
      border-bottom: 1px solid #dbe8f7;
    }

    .industries-snapshot__grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 1rem;
      align-items: start;
    }

    .industries-snapshot__content p {
      margin: 0 0 0.95rem;
      color: #4c6887;
      line-height: 1.7;
      max-width: 60ch;
    }

    .industries-snapshot__list {
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.5rem;
    }

    .industries-snapshot__list li {
      position: relative;
      padding-left: 1rem;
      color: #456482;
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .industries-snapshot__list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.68em;
      width: 0.38rem;
      height: 0.38rem;
      border-radius: 50%;
      background: #3e84cc;
    }

    .industries-snapshot__visual {
      margin: 0;
      background: #ffffff;
      border: 1px solid #cddff3;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(29, 69, 114, 0.12);
    }

    .industries-snapshot__img {
      width: 100%;
      height: auto;
      display: block;
    }

    .industries-snapshot__visual p {
      margin: 0;
      padding: 0.9rem 1rem;
      font-size: 0.84rem;
      line-height: 1.58;
      color: #4f6c8c;
      background: #f5faff;
      border-top: 1px solid #deebf9;
    }

    .industries-page-catalog {
      background: var(--clr-bg);
      border-bottom: 1px solid #d9e5f4;
    }

    .industries-page-catalog .section-header {
      margin-bottom: 1.75rem;
    }

    .industries-page-catalog .industries-grid {
      margin-bottom: 0;
      gap: 1rem;
    }

    .industries-needs {
      background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
      border-bottom: 1px solid #d2e3f7;
    }

    .industries-needs .section-header {
      margin-bottom: 1.45rem;
    }

    .industries-needs__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.95rem;
    }

    .industries-needs__card {
      background: #ffffff;
      border: 1px solid #d6e6f8;
      border-radius: var(--radius-md);
      padding: 1rem;
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
    }

    .industries-needs__card:hover {
      transform: translateY(-3px);
      border-color: #a9c9ee;
      box-shadow: 0 10px 24px rgba(30, 75, 125, 0.12);
    }

    .industries-needs__card h3 {
      margin: 0 0 0.5rem;
      font-size: 1.05rem;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #214a7e;
    }

    .industries-needs__card p {
      margin: 0 0 0.7rem;
      font-size: 0.9rem;
      line-height: 1.62;
      color: #4c6887;
    }

    .industries-needs__card span {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #2e6eb7;
      background: #e8f2ff;
      border: 1px solid #c7dcf6;
      border-radius: 999px;
      padding: 0.28rem 0.62rem;
    }

    .industries-use-cases {
      background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
      border-bottom: 1px solid #d5e5f8;
    }

    .industries-use-cases .section-header {
      margin-bottom: 1.45rem;
    }

    .industries-use-cases__grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.95rem;
    }

    .industries-use-cases__card {
      background: #ffffff;
      border: 1px solid #d4e4f7;
      border-radius: var(--radius-md);
      padding: 1rem;
      box-shadow: 0 8px 20px rgba(30, 74, 122, 0.08);
    }

    .industries-use-cases__card h3 {
      margin: 0 0 0.55rem;
      font-size: 1.04rem;
      line-height: 1.3;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: #214a7e;
    }

    .industries-use-cases__card p {
      margin: 0 0 0.7rem;
      font-size: 0.9rem;
      line-height: 1.64;
      color: #4f6988;
    }

    .industries-use-cases__card span {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.64rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #2e6eb7;
      background: #e8f2ff;
      border: 1px solid #c7dcf6;
      border-radius: 999px;
      padding: 0.28rem 0.62rem;
    }

    .industries-compliance {
      background: linear-gradient(180deg, #eff6ff 0%, #e6f1ff 100%);
      border-bottom: 1px solid #cbdef4;
    }

    .industries-compliance__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: 1rem;
      align-items: start;
    }

    .industries-compliance__content p {
      margin: 0 0 0.9rem;
      color: #4a6787;
      line-height: 1.72;
      max-width: 62ch;
    }

    .industries-compliance__list {
      margin: 0;
      padding: 0;
      display: grid;
      gap: 0.5rem;
    }

    .industries-compliance__list li {
      position: relative;
      padding-left: 1rem;
      color: #456481;
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .industries-compliance__list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.68em;
      width: 0.38rem;
      height: 0.38rem;
      border-radius: 50%;
      background: #3e84cc;
    }

    .industries-compliance__note {
      background: #ffffff;
      border: 1px solid #cfe0f4;
      border-radius: var(--radius-md);
      padding: 1rem;
      box-shadow: 0 8px 20px rgba(30, 74, 122, 0.08);
    }

    .industries-compliance__note h3 {
      margin: 0 0 0.55rem;
      font-size: 1rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #214a7e;
    }

    .industries-compliance__note p {
      margin: 0 0 0.9rem;
      font-size: 0.9rem;
      line-height: 1.65;
      color: #4f6988;
    }

    .industries-custom-banner {
      background: #f4f9ff;
      border-top: 1px solid #d9e7f8;
      border-bottom: 1px solid #d9e7f8;
      padding-block: 0.8rem;
    }

    .industries-custom-banner__card {
      position: relative;
      width: 100%;
      overflow: hidden;
      min-height: clamp(180px, 22vw, 260px);
      max-height: 280px;
      border-radius: 10px;
      border: 1px solid #bed7f8;
      box-shadow: 0 14px 30px rgba(31, 76, 128, 0.15);
    }

    .industries-custom-banner__img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .industries-custom-banner__overlay {
      position: absolute;
      inset: 0;
      padding: clamp(1rem, 2.5vw, 2rem);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      gap: 0.7rem;
      background: linear-gradient(100deg, rgba(8, 28, 54, 0.82) 8%, rgba(8, 28, 54, 0.5) 58%, rgba(8, 28, 54, 0.2) 100%);
    }

    .industries-custom-banner__kicker {
      margin: 0;
      font-family: var(--font-mono);
      font-size: 0.68rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(205, 227, 255, 0.9);
    }

    .industries-custom-banner__overlay h2 {
      margin: 0;
      max-width: 42ch;
      color: #ffffff;
      font-size: clamp(1.3rem, 2.9vw, 1.95rem);
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .industries-page-cta {
      background:
        linear-gradient(95deg, rgba(11, 35, 66, 0.96) 0%, rgba(18, 62, 114, 0.95) 100%),
        url("../assets/background/process-bg.webp") no-repeat center / cover;
      border-top: 1px solid rgba(172, 206, 247, 0.35);
    }

    .industries-page-cta__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      padding-block: 2.2rem;
    }

    .industries-page-cta__text h2 {
      margin: 0 0 0.45rem;
      color: #ffffff;
      font-size: clamp(1.5rem, 3.2vw, 2.2rem);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 1.14;
    }

    .industries-page-cta__text p {
      margin: 0;
      max-width: 54ch;
      color: rgba(231, 242, 255, 0.88);
      font-size: 0.95rem;
    }

    @media (max-width: 980px) {
      .industries-snapshot__grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      .industries-hero {
        margin-top: 60px;
      }

      .industries-needs__grid {
        grid-template-columns: 1fr;
      }

      .industries-use-cases__grid,
      .industries-compliance__grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .industries-page-cta__inner {
        justify-content: center;
        text-align: center;
      }

      .industries-custom-banner__overlay {
        text-align: center;
        align-items: center;
      }
    }

    @media (max-width: 620px) {
      .industries-page-cta__inner {
        padding-block: 1.7rem;
      }

      .industries-custom-banner {
        padding-block: 1rem;
      }

      .industries-custom-banner__card {
        min-height: 170px;
        max-height: 210px;
      }
    }

    /* ============================================================
       ABOUT PAGE — HERO + INTRO
    ============================================================ */
    .about-hero {
      position: relative;
      margin-top: 72px;
      min-height: clamp(190px, 33vh, 280px);
      display: flex;
      align-items: center;
      background:
        linear-gradient(90deg, rgba(8, 22, 43, 0.8) 0%, rgba(8, 22, 43, 0.56) 48%, rgba(8, 22, 43, 0.28) 100%),
        url("../assets/background/about-us-hero-bg.webp") no-repeat center / cover;
      border-bottom: 1px solid rgba(19, 70, 130, 0.2);
    }

    .about-hero__inner {
      position: relative;
      z-index: 1;
      padding-block: clamp(1.5rem, 4.2vh, 2.5rem);
      text-align: center;
    }

    .about-hero__kicker {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(200, 224, 255, 0.88);
      margin-bottom: 0.8rem;
    }

    .about-hero__title {
      margin: 0;
      color: #ffffff;
      font-size: clamp(1.9rem, 4.8vw, 3rem);
      line-height: 1.08;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    .about-hero__lead {
      margin-top: 1rem;
      max-width: 56ch;
      color: rgba(233, 243, 255, 0.92);
      font-size: 1rem;
      line-height: 1.75;
      border-left: 3px solid #4a88d3;
      padding-left: 0.8rem;
    }

    .about-story {
      background: var(--clr-bg);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .about-story__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      gap: clamp(1.2rem, 2.5vw, 2.4rem);
      align-items: start;
    }

    .about-story__content .section-title {
      margin-bottom: 0.8rem;
    }

    .about-story__content p {
      margin-bottom: 1rem;
      max-width: 58ch;
      color: var(--clr-text-secondary);
    }

    .about-story__content .btn {
      margin-top: 0.3rem;
    }

    .about-story__highlights {
      display: grid;
      gap: 0.9rem;
    }

    .about-highlight {
      background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
      border: 1px solid #dde9f8;
      border-radius: var(--radius-md);
      padding: 1rem;
      transition: transform var(--transition-mid), border-color var(--transition-mid), box-shadow var(--transition-mid);
    }

    .about-highlight:hover {
      transform: translateY(-3px);
      border-color: #9ebde3;
      box-shadow: 0 10px 24px rgba(40, 90, 150, 0.12);
    }

    .about-highlight h3 {
      margin: 0 0 0.4rem;
      font-family: var(--font-display);
      font-size: 1.05rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #1a4275;
    }

    .about-highlight p {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.62;
      color: #4f6683;
    }

    @media (max-width: 900px) {
      .about-hero {
        margin-top: 60px;
      }

      .about-story__grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .about-highlight {
        padding: 0.9rem;
      }
    }

    .about-metrics {
      background: linear-gradient(180deg, #f4f9ff 0%, #eef5ff 100%);
      border-top: 1px solid #d9e7f8;
      border-bottom: 1px solid #d9e7f8;
      padding-block: 2rem;
    }

    .about-metrics__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.9rem;
    }

    .about-metric {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #d2e2f6;
      border-radius: var(--radius-md);
      padding: 1rem 0.9rem;
      text-align: center;
    }

    .about-metric__value {
      display: block;
      font-family: var(--font-display);
      font-size: clamp(1.55rem, 3.2vw, 2.1rem);
      line-height: 1;
      letter-spacing: 0.03em;
      color: #18509a;
      margin-bottom: 0.35rem;
    }

    .about-metric__label {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.66rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #5b7697;
    }

    .about-foundation {
      background: var(--clr-bg);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .about-foundation .section-header {
      margin-bottom: 1.6rem;
    }

    .about-foundation__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    .about-foundation__card {
      background: linear-gradient(170deg, #ffffff 0%, #f3f8ff 100%);
      border: 1px solid #d9e6f6;
      border-radius: var(--radius-md);
      padding: 1.1rem;
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), border-color var(--transition-mid);
    }

    .about-foundation__card:hover {
      transform: translateY(-3px);
      border-color: #9ebde3;
      box-shadow: 0 9px 22px rgba(32, 74, 122, 0.11);
    }

    .about-foundation__card h3 {
      margin: 0 0 0.45rem;
      font-size: 1.05rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #1e487d;
    }

    .about-foundation__card p {
      margin: 0;
      font-size: 0.93rem;
      color: #4f6785;
      line-height: 1.62;
    }

    .about-timeline {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(244, 250, 255, 0) 100%),
        url("../assets/background/about-how-we-grew-bg.webp") no-repeat center / cover;
    }

    .about-timeline::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
      pointer-events: none;
    }

    .about-timeline .container {
      position: relative;
      z-index: 1;
    }

    .about-timeline .section-header {
      margin-bottom: 1.4rem;
    }

    .about-timeline__track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.9rem;
    }

    .about-timeline__track::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 1.25rem;
      height: 1px;
      background: linear-gradient(90deg, #9fbde3 0%, #6f9fd8 100%);
      z-index: 0;
    }

    .about-milestone {
      position: relative;
      z-index: 1;
      background: #ffffff;
      border: 1px solid #d8e6f8;
      border-radius: var(--radius-md);
      padding: 0.95rem;
      box-shadow: 0 6px 14px rgba(37, 80, 129, 0.06);
    }

    .about-milestone__year {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 2rem;
      min-width: 3.2rem;
      padding-inline: 0.65rem;
      border-radius: 999px;
      background: #e2efff;
      border: 1px solid #bed8fa;
      color: #1f5da8;
      font-family: var(--font-display);
      font-size: 0.88rem;
      letter-spacing: 0.05em;
      margin-bottom: 0.6rem;
    }

    .about-milestone h3 {
      margin: 0 0 0.3rem;
      font-size: 1rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #234d82;
    }

    .about-milestone p {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.6;
      color: #56708f;
    }

    @media (max-width: 1000px) {
      .about-metrics__grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .about-foundation__grid {
        grid-template-columns: 1fr;
      }

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

    @media (max-width: 620px) {
      .about-metrics {
        padding-block: 1.5rem;
      }

      .about-metrics__grid,
      .about-timeline__track {
        grid-template-columns: 1fr;
      }

      .about-timeline__track::before {
        display: none;
      }
    }

    .about-process {
      background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
      border-top: 1px solid #dbe8f8;
      border-bottom: 1px solid #dbe8f8;
    }

    .about-process__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
      gap: 1.2rem;
      align-items: start;
    }

    .about-process__intro .section-title {
      margin-bottom: 0.8rem;
    }

    .about-process__intro p {
      margin-bottom: 1rem;
      max-width: 56ch;
      color: #4f6785;
    }

    .about-process__checks {
      display: grid;
      gap: 0.5rem;
      margin: 0;
      padding: 0;
    }

    .about-process__checks li {
      position: relative;
      padding-left: 1rem;
      font-size: 0.93rem;
      color: #48627f;
      line-height: 1.6;
    }

    .about-process__checks li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.7em;
      width: 0.42rem;
      height: 0.42rem;
      border-radius: 50%;
      background: #3f82d1;
    }

    .about-process__flow {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.9rem;
    }

    .about-process-step {
      background: #ffffff;
      border: 1px solid #d8e5f6;
      border-radius: var(--radius-md);
      padding: 0.95rem;
      transition: transform var(--transition-mid), border-color var(--transition-mid), box-shadow var(--transition-mid);
    }

    .about-process-step:hover {
      transform: translateY(-3px);
      border-color: #a7c4e7;
      box-shadow: 0 10px 24px rgba(37, 84, 138, 0.1);
    }

    .about-process-step__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.1rem;
      height: 2.1rem;
      border-radius: 999px;
      background: #e3efff;
      border: 1px solid #bfd8fa;
      color: #1f60ac;
      font-family: var(--font-display);
      font-size: 0.82rem;
      letter-spacing: 0.08em;
      margin-bottom: 0.55rem;
    }

    .about-process-step h3 {
      margin: 0 0 0.3rem;
      font-size: 1rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #244f82;
    }

    .about-process-step p {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.6;
      color: #56708f;
    }

    .about-page-cta {
      background:
        linear-gradient(105deg, rgba(15, 47, 86, 0.95) 0%, rgba(26, 78, 140, 0.92) 100%),
        url("../assets/background/process-bg.webp") no-repeat center / cover;
      border-top: 1px solid rgba(183, 214, 249, 0.4);
    }

    .about-page-cta__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
      padding-block: 2.3rem;
    }

    .about-page-cta__text h2 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.5rem, 3.3vw, 2.2rem);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: #ffffff;
      line-height: 1.15;
    }

    .about-page-cta__text p {
      margin: 0;
      max-width: 56ch;
      color: rgba(232, 242, 255, 0.88);
      font-size: 0.95rem;
    }

    .about-page-cta .btn {
      white-space: nowrap;
    }

    @media (max-width: 1000px) {
      .about-process__grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      .about-process__flow {
        grid-template-columns: 1fr;
      }

      .about-page-cta__inner {
        text-align: center;
        justify-content: center;
        padding-block: 2rem;
      }

      .about-page-cta__text p {
        margin-inline: auto;
      }
    }

    /* ============================================================
       CONTACT PAGE
    ============================================================ */
    .contact-hero {
      position: relative;
      margin-top: 72px;
      min-height: clamp(190px, 33vh, 280px);
      display: flex;
      align-items: center;
      background:
        linear-gradient(96deg, rgba(10, 30, 56, 0.84) 0%, rgba(10, 30, 56, 0.58) 52%, rgba(10, 30, 56, 0.24) 100%),
        url("../assets/background/contact-us-hero-bg.webp") no-repeat center / cover;
      border-bottom: 1px solid rgba(26, 79, 141, 0.26);
    }

    .contact-hero__inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: none;
      padding-block: clamp(1.5rem, 4.2vh, 2.5rem);
      text-align: center;
    }

    .contact-hero__kicker {
      margin: 0 0 0.75rem;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(207, 230, 255, 0.9);
    }

    .contact-hero__title {
      margin: 0;
      color: #ffffff;
      font-size: clamp(1.9rem, 4.8vw, 3rem);
      line-height: 1.08;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    }

    .contact-hero__lead {
      margin: 0.95rem 0 0;
      max-width: 56ch;
      color: rgba(235, 244, 255, 0.92);
      font-size: 0.98rem;
      line-height: 1.72;
      border-left: 3px solid #5b98df;
      padding-left: 0.8rem;
    }

    .products-hero__lead a,
    .industries-hero__lead a,
    .contact-hero__lead a {
      color: #ffffff;
      text-decoration: underline;
      text-underline-offset: 0.14em;
      text-decoration-thickness: 1.5px;
    }

    .products-hero__lead a:hover,
    .industries-hero__lead a:hover,
    .contact-hero__lead a:hover {
      color: #cde3ff;
    }

    .contact-connect {
      background: linear-gradient(180deg, #ffffff 0%, #f5faff 100%);
      border-bottom: 1px solid #d8e7f8;
    }

    .contact-connect__grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: 1rem;
      align-items: start;
    }

    .contact-form-card,
    .contact-info-card {
      background: #ffffff;
      border: 1px solid #d5e5f7;
      border-radius: var(--radius-md);
      padding: 1rem;
      box-shadow: 0 10px 24px rgba(28, 72, 122, 0.08);
    }

    .contact-form-card .section-header,
    .contact-info-card .section-header {
      margin-bottom: 0.95rem;
    }

    .contact-form {
      position: relative;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.82rem 0.9rem;
    }

    .contact-form__hp {
      position: absolute;
      left: -9999px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .contact-form__row {
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
    }

    .contact-form__row--full,
    .contact-form__submit {
      grid-column: 1 / -1;
    }

    .contact-form label {
      font-family: var(--font-display);
      font-size: 0.76rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #264f83;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      border: 1px solid #c7dbf3;
      border-radius: 10px;
      padding: 0.7rem 0.78rem;
      font-family: var(--font-body);
      font-size: 0.92rem;
      color: #274a74;
      background: #fbfdff;
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      outline: none;
      border-color: #66a0df;
      box-shadow: 0 0 0 3px rgba(79, 142, 214, 0.18);
    }

    .contact-form textarea {
      min-height: 120px;
      resize: vertical;
    }

    .contact-form__submit {
      justify-self: flex-start;
      margin-top: 0.2rem;
    }

    .contact-form__submit:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

    .contact-form__status {
      grid-column: 1 / -1;
      margin: 0.15rem 0 0;
      min-height: 1.25rem;
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .contact-form__status.is-pending {
      color: #2e6eb7;
    }

    .contact-form__status.is-success {
      color: #17724f;
    }

    .contact-form__status.is-error {
      color: #b23333;
    }

    .contact-info__list {
      display: grid;
      gap: 0.7rem;
    }

    .contact-info__item {
      display: grid;
      grid-template-columns: 2.25rem 1fr;
      gap: 0.68rem;
      align-items: flex-start;
      padding: 0.68rem;
      border: 1px solid #deebfa;
      border-radius: 10px;
      background: #f8fbff;
    }

    .contact-info__icon {
      width: 2.25rem;
      height: 2.25rem;
      border-radius: 999px;
      background: #e6f1ff;
      border: 1px solid #c4dbf8;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .contact-info__icon svg {
      width: 1.15rem;
      height: 1.15rem;
      stroke: #2d6cb1;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .contact-info__item h3 {
      margin: 0 0 0.22rem;
      font-size: 0.86rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #255081;
    }

    .contact-info__item a,
    .contact-info__item p {
      margin: 0;
      font-size: 0.92rem;
      line-height: 1.58;
      color: #4c6887;
      text-decoration: none;
      transition: color var(--transition-fast);
    }

    .contact-info__item a:hover {
      color: #1769cf;
    }

    .contact-map {
      background: #f2f8ff;
      border-bottom: 1px solid #d6e5f7;
    }

    .contact-map .section-header {
      margin-bottom: 1rem;
    }

    .contact-map__frame-wrap {
      border: 1px solid #cadcf3;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 12px 26px rgba(32, 74, 120, 0.1);
      background: #ffffff;
    }

    .contact-map__frame {
      width: 100%;
      height: clamp(290px, 46vh, 430px);
      border: 0;
      display: block;
    }

    .contact-support {
      background: var(--clr-bg);
      border-bottom: 1px solid var(--clr-border-light);
    }

    .contact-support__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
    }

    .contact-hours,
    .contact-quick-links {
      background: #ffffff;
      border: 1px solid #d4e5f8;
      border-radius: var(--radius-md);
      padding: 1rem;
    }

    .contact-hours .section-title,
    .contact-quick-links .section-title {
      margin-bottom: 0.7rem;
    }

    .contact-hours p {
      margin: 0 0 0.38rem;
      color: #4d6887;
      line-height: 1.62;
    }

    .contact-quick-links__items {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .contact-quick-links__items .btn--outline {
      background: #ffffff;
      color: #173f70;
      border-color: #bfd5ef;
    }

    .contact-quick-links__items .btn--outline:hover,
    .contact-quick-links__items .btn--outline:focus-visible {
      background: #1f62ab;
      color: #ffffff;
      border-color: #1f62ab;
    }

    @media (max-width: 980px) {
      .contact-connect__grid,
      .contact-support__grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 760px) {
      .contact-form {
        grid-template-columns: 1fr;
      }

      .contact-form__submit {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 620px) {
      .contact-hero {
        margin-top: 60px;
      }

      .contact-hero__lead {
        font-size: 0.94rem;
      }

      .contact-map__frame {
        height: 280px;
      }
    }

    .whatsapp-float {
      position: fixed;
      right: clamp(0.7rem, 2vw, 1.15rem);
      bottom: clamp(0.8rem, 2vw, 1.15rem);
      width: 58px;
      height: 58px;
      border-radius: 999px;
      background: #25d366;
      border: 1px solid rgba(255, 255, 255, 0.32);
      box-shadow: 0 12px 28px rgba(6, 48, 26, 0.32);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 1200;
      text-decoration: none;
      transition: transform var(--transition-mid), box-shadow var(--transition-mid), background var(--transition-mid);
    }

    .whatsapp-float::before {
      content: "";
      position: absolute;
      inset: -14px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(37, 211, 102, 0.35) 0%, rgba(37, 211, 102, 0) 72%);
      z-index: -1;
      pointer-events: none;
    }

    .whatsapp-float svg {
      width: 29px;
      height: 29px;
      fill: #ffffff;
    }

    .whatsapp-float::after {
      content: "Chat with us";
      position: absolute;
      right: calc(100% + 0.55rem);
      top: 50%;
      transform: translateY(-50%) translateX(6px);
      background: rgba(8, 24, 41, 0.92);
      color: #ffffff;
      font-family: var(--font-display);
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      border-radius: 999px;
      padding: 0.34rem 0.58rem;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    }

    .whatsapp-float:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 16px 30px rgba(6, 48, 26, 0.38);
      background: #1ec85f;
    }

    .whatsapp-float:hover::after,
    .whatsapp-float:focus-visible::after {
      opacity: 1;
      visibility: visible;
      transform: translateY(-50%) translateX(0);
    }

    .whatsapp-float:focus-visible {
      outline: 2px solid #ffffff;
      outline-offset: 3px;
    }

    @media (max-width: 620px) {
      .whatsapp-float {
        width: 52px;
        height: 52px;
      }

      .whatsapp-float svg {
        width: 25px;
        height: 25px;
      }
    }

    /* ============================================================
       SECTION 9 — FOOTER
    ============================================================ */
    .site-footer {
      position: relative;
      overflow: hidden;
      background: linear-gradient(145deg, #ffffff 0%, #edf5ff 44%, #dbeaff 100%);
      color: #2f4f73;
      border-top: 1px solid rgba(45, 102, 175, 0.28);
    }

    .site-footer::before {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        115deg,
        transparent 0px,
        transparent 7px,
        rgba(35, 88, 148, 0.032) 7px,
        rgba(35, 88, 148, 0.032) 14px
      );
      pointer-events: none;
    }

    .site-footer::after {
      content: "";
      position: absolute;
      top: -70%;
      right: -10%;
      width: 48%;
      height: 220%;
      background: radial-gradient(ellipse, rgba(37, 109, 196, 0.2) 0%, transparent 72%);
      pointer-events: none;
    }

    .footer__inner {
      position: relative;
      z-index: 1;
      padding-block: 3.2rem 2.4rem;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr 1fr;
      gap: 2.3rem;
    }

    .footer__col h3,
    .footer__col h4 {
      position: relative;
      margin: 0 0 1rem;
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #153e70;
      line-height: 1.2;
    }

    .footer__col h3::after,
    .footer__col h4::after {
      content: "";
      display: block;
      width: 2.1rem;
      height: 2px;
      margin-top: 0.45rem;
      background: #2f78d1;
      opacity: 0.82;
    }

    .footer__col h3 {
      font-size: 1.35rem;
    }

    .footer__col h4 {
      font-size: 0.92rem;
    }

    .footer__brand p {
      margin: 0;
      max-width: 44ch;
      font-size: 0.95rem;
      line-height: 1.75;
      color: #4a678a;
    }

    .footer__links,
    .footer__contact {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .footer__links li,
    .footer__contact li {
      margin-bottom: 0.6rem;
      font-size: 0.9rem;
      line-height: 1.65;
      color: #4f6c8e;
    }

    .footer__links a,
    .footer__contact a {
      color: #1f4c84;
      text-decoration: none;
      transition: color var(--transition-fast), padding-left var(--transition-fast);
    }

    .footer__links a:hover,
    .footer__contact a:hover {
      color: #0f66cc;
      padding-left: 0.22rem;
    }

    .footer__links li::marker,
    .footer__contact li::marker {
      color: transparent;
    }

    .footer__links li {
      position: relative;
      padding-left: 0.95rem;
    }

    .footer__links li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.75em;
      width: 0.35rem;
      height: 0.35rem;
      border-radius: 50%;
      background: rgba(46, 112, 190, 0.72);
    }

    .footer__bottom {
      position: relative;
      z-index: 1;
      border-top: 1px solid rgba(45, 102, 175, 0.2);
      background: rgba(255, 255, 255, 0.78);
      padding-block: 0.95rem;
    }

    .footer__bottom p {
      margin: 0;
      text-align: center;
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      color: #4d6684;
    }

    @media (max-width: 920px) {
      .footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
      }

      .footer__brand {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 620px) {
      .footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.1rem;
        padding-block: 1.75rem 1.2rem;
      }

      .footer__brand {
        grid-column: 1 / -1;
      }

      .footer__col h3,
      .footer__col h4 {
        margin-bottom: 0.65rem;
      }

      .footer__col h3 {
        font-size: 1.15rem;
      }

      .footer__col h4 {
        font-size: 0.8rem;
      }

      .footer__col h3::after,
      .footer__col h4::after {
        width: 1.6rem;
        margin-top: 0.3rem;
      }

      .footer__brand p,
      .footer__links li,
      .footer__contact li {
        font-size: 0.84rem;
        line-height: 1.5;
      }

      .footer__links li,
      .footer__contact li {
        margin-bottom: 0.35rem;
      }

      .footer__bottom {
        padding-block: 0.75rem;
      }

      .footer__bottom p {
        font-size: 0.72rem;
        letter-spacing: 0.04em;
      }
    }

    @media (max-width: 360px) {
      .footer__inner {
        grid-template-columns: 1fr;
        gap: 0.95rem;
      }

      .footer__brand {
        grid-column: auto;
      }
    }

    /* ============================================================
       HOME PAGE — RESPONSIVE LAYOUT FIXES
       Moved from inline styles in index.html so the page uses css/style.css only.
    ============================================================ */

    @media (max-width: 900px) {
      body {
        padding-top: 64px;
      }

      .home-page {
        --home-header-offset: 64px;
      }

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

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

      .hero {
        min-height: clamp(420px, 68svh, 560px);
      }

      .hero__content {
        min-height: clamp(420px, 68svh, 560px);
      }

      .cta-strip {
        padding-block: 2.2rem;
      }
    }

    @media (min-width: 901px) {
      .products-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .work-process__grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 480px) {
      .products-grid,
      .work-process__grid {
        grid-template-columns: 1fr;
      }

      .hero,
      .hero__content {
        min-height: 360px;
      }
    }

    @media (max-width: 900px) and (min-width: 769px) {
      .trust-bar__inner {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .trust-item + .trust-item::before {
        display: none;
      }

      .trust-item {
        border-bottom: 1px solid var(--clr-border);
        border-right: 1px solid var(--clr-border);
        min-width: unset;
        padding: 0.85rem 0.75rem;
        gap: 0.65rem;
      }

      .trust-item:nth-child(3n) {
        border-right: none;
      }

      .trust-item:nth-last-child(-n + 3) {
        border-bottom: none;
      }

      .trust-item__icon {
        width: 38px;
        height: 38px;
      }

      .trust-item__icon svg {
        width: 18px;
        height: 18px;
      }

      .trust-item__value {
        font-size: 1.02rem;
      }

      .trust-item__label {
        font-size: 0.52rem;
        letter-spacing: 0.1em;
        line-height: 1.35;
      }
    }

    @media (max-width: 980px) {
      .clients-slider {
        --clients-per-view: 2;
      }
    }

    .cta-strip {
      padding-block: 3rem;
    }

    @media (max-width: 640px) {
      .cta-strip {
        padding-block: 0.75rem;
      }

      .cta-strip__inner {
        flex-direction: column;
        justify-content: center;
        gap: 0.6rem;
        text-align: center;
      }

      .cta-strip__text {
        flex: none;
      }

      .cta-strip__text h2 {
        font-size: 1.15rem;
      }

      .cta-strip__text p {
        margin-inline: auto;
        font-size: 0.82rem;
      }

      .btn--cta-strip {
        padding: 0.7em 1.1em;
        font-size: 0.75rem;
      }
    }

    @media (max-width: 620px) {
      .clients-slider {
        --clients-per-view: 1;
      }

      .hero {
        min-height: clamp(380px, 62svh, 480px);
      }

      .hero__content {
        min-height: clamp(380px, 62svh, 480px);
        padding-bottom: 3.5rem;
      }
    }

    .header__cta {
      padding: 0.42rem 0.85rem;
      font-size: 0.7rem;
      letter-spacing: 0.09em;
    }

    /* ============================================================
       INNER PAGE HERO TIGHTENING
       Applies to all page heroes except the home page hero.
    ============================================================ */
    .products-hero,
    .industries-hero,
    .about-hero,
    .contact-hero {
      margin-top: 64px;
      min-height: clamp(160px, 26vh, 230px);
    }

    .products-hero__inner,
    .industries-hero__inner,
    .about-hero__inner,
    .contact-hero__inner {
      padding-block: clamp(1.1rem, 3.2vh, 1.8rem);
    }

    @media (max-width: 900px) {
      .products-hero,
      .industries-hero,
      .about-hero,
      .contact-hero {
        margin-top: 56px;
        min-height: clamp(150px, 24vh, 210px);
      }

      .products-hero__inner,
      .industries-hero__inner,
      .about-hero__inner,
      .contact-hero__inner {
        padding-block: clamp(1rem, 2.8vh, 1.45rem);
      }
    }

    @media (max-width: 620px) {
      .products-hero,
      .industries-hero,
      .about-hero,
      .contact-hero {
        margin-top: 52px;
        min-height: clamp(140px, 22vh, 185px);
      }

      .products-hero__inner,
      .industries-hero__inner,
      .about-hero__inner,
      .contact-hero__inner {
        padding-block: 0.9rem 1.2rem;
      }
    }