/* -------------------------------------------------------------
       CORE DESIGN TOKENS & SYSTEM RESET
    ------------------------------------------------------------- */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --charcoal: #1C1C1E;
      --charcoal-surface: #242426;
      --charcoal-card: #2B2B2E;
      --charcoal-border: #38383C;
      --charcoal-dark: #141416;
      --warm-white: #F4F2EF;
      --warm-surface: #EAE6E1;
      --white: #FFFFFF;
      --orange: #F97316;
      --orange-hover: #EA580C;
      --text-muted: #57534E;
      --font-display: 'Bebas Neue', sans-serif;
      --font-body: 'Barlow', sans-serif;
      --header-h: 76px;
      --max-w: 1280px;
    }

    html {
      font-size: 16px;
      overflow-x: hidden;
      background-color: var(--warm-white);
      color: var(--charcoal);
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
    }

    body {
      min-width: 320px;
      overflow-x: hidden;
      line-height: 1.5;
      padding-top: var(--header-h);
      padding-bottom: 70px; /* offset for mobile sticky bar */
    }

    @media (min-width: 769px) {
      body {
        padding-bottom: 0;
      }
    }

    /* Strict Image Rules: Never cropped, full image in frame */
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    a {
      color: inherit;
      text-decoration: none;
      font-size: 16px;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }

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

    .container {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding-left: 20px;
      padding-right: 20px;
    }

    @media (min-width: 768px) {
      .container {
        padding-left: 32px;
        padding-right: 32px;
      }
    }

    @media (min-width: 1440px) {
      .container {
        padding-left: 48px;
        padding-right: 48px;
      }
    }

    /* -------------------------------------------------------------
       TYPOGRAPHY
    ------------------------------------------------------------- */
    h1, h2, h3 {
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 0.95;
      font-weight: 400;
    }

    h1 {
      font-size: clamp(2.4rem, 8vw, 5.4rem);
      margin-bottom: 20px;
      color: #FFFFFF;
    }

    h2 {
      font-size: clamp(2.4rem, 4.5vw, 3.8rem);
      margin-bottom: 24px;
      line-height: 0.95;
    }

    p {
      font-size: 17px;
      line-height: 1.6;
    }

    /* -------------------------------------------------------------
       BUTTONS & INDUSTRIAL ACTION TOKENS
    ------------------------------------------------------------- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 16px 28px;
      font-family: var(--font-display);
      font-size: 21px;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      line-height: 1;
      border: 2px solid transparent;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
      white-space: nowrap;
      text-align: center;
    }

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

    .btn-orange {
      background-color: var(--orange);
      color: #FFFFFF;
      border-color: var(--orange);
    }

    .btn-orange:hover {
      background-color: var(--orange-hover);
      border-color: var(--orange-hover);
    }

    .btn-charcoal {
      background-color: var(--charcoal);
      color: #FFFFFF;
      border-color: var(--charcoal);
    }

    .btn-charcoal:hover {
      background-color: #000000;
      border-color: #000000;
    }

    .btn-outline-white {
      background-color: transparent;
      color: #FFFFFF;
      border-color: #FFFFFF;
    }

    .btn-outline-white:hover {
      background-color: #FFFFFF;
      color: var(--charcoal);
    }

    .btn-outline-charcoal {
      background-color: transparent;
      color: var(--charcoal);
      border-color: var(--charcoal);
    }

    .btn-outline-charcoal:hover {
      background-color: var(--charcoal);
      color: #FFFFFF;
    }

    /* -------------------------------------------------------------
       HEADER: STRICT SINGLE ROW ON DESKTOP + WORKING SLIDE DRAWER
    ------------------------------------------------------------- */
    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: var(--header-h);
      background-color: var(--charcoal);
      color: #FFFFFF;
      z-index: 1000;
      border-bottom: 3px solid var(--orange);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      gap: 12px;
      min-width: 0;
      width: 100%;
      overflow: hidden;
    }

    .brand-link {
      display: flex;
      align-items: center;
      flex-shrink: 1;
      min-width: 0;
    }

    .brand-logo {
      height: 42px;
      width: auto;
      max-width: 200px;
      object-fit: contain;
    }

    @media (max-width: 379px) {
      .brand-logo {
        height: 36px;
        max-width: 160px;
      }
    }

    /* Desktop Navigation: Strict Single Row */
    .desktop-nav {
      display: none;
      align-items: center;
      gap: 18px;
      margin-left: auto;
      margin-right: 16px;
      white-space: nowrap;
    }

    @media (min-width: 1280px) {
      .desktop-nav {
        display: flex;
      }
    }

    .desktop-nav a.nav-link {
      font-size: 16px;
      font-weight: 500;
      color: #E2E8F0;
      padding: 6px 0;
      border-bottom: 2px solid transparent;
      line-height: 1.2;
    }

    .desktop-nav a.nav-link:hover {
      color: #FFFFFF;
      border-bottom-color: var(--orange);
    }

    .header-cta-group {
      display: none;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    @media (min-width: 1280px) {
      .header-cta-group {
        display: flex;
      }
    }

    .header-cta-group .btn {
      padding: 10px 20px;
      font-size: 18px;
    }

    .basket-link {
      font-size: 16px;
      font-weight: 600;
      color: #FFFFFF;
      padding: 10px 14px;
      background: var(--charcoal-surface);
      border: 1px solid var(--charcoal-border);
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }

    .basket-link:hover {
      background-color: var(--charcoal-border);
    }

    /* Mobile Hamburger Trigger */
    .menu-toggle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      margin-left: auto;
      border: 1px solid var(--charcoal-border);
      background-color: var(--charcoal-surface);
      cursor: pointer;
    }

    @media (min-width: 1280px) {
      .menu-toggle {
        display: none;
      }
    }

    .menu-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background-color: #FFFFFF;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .menu-toggle.active span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
      opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    /* Mobile Drawer with Working Search */
    .mobile-drawer {
      position: fixed;
      top: var(--header-h);
      left: 0;
      width: 100%;
      height: calc(100vh - var(--header-h));
      background-color: var(--charcoal);
      color: #FFFFFF;
      z-index: 999;
      display: flex;
      flex-direction: column;
      padding: 24px 20px 80px;
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .mobile-drawer.open {
      transform: translateX(0);
    }

    .mobile-search-form {
      display: flex;
      margin-bottom: 20px;
      border: 2px solid var(--charcoal-border);
      background-color: var(--charcoal-surface);
    }

    .mobile-search-form input {
      flex: 1;
      padding: 14px 16px;
      font-size: 16px;
      color: #FFFFFF;
      background: transparent;
      border: none;
      outline: none;
      font-family: var(--font-body);
    }

    .mobile-search-form input::placeholder {
      color: #9CA3AF;
    }

    .mobile-search-form button {
      padding: 0 20px;
      background-color: var(--orange);
      color: #FFFFFF;
      font-family: var(--font-display);
      font-size: 19px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .mobile-nav-links {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-bottom: 24px;
    }

    .mobile-nav-links a {
      font-size: 18px;
      font-weight: 500;
      color: #E2E8F0;
      padding: 12px 14px;
      background-color: var(--charcoal-surface);
      border-left: 4px solid transparent;
    }

    .mobile-nav-links a:hover,
    .mobile-nav-links a:active {
      background-color: var(--charcoal-card);
      border-left-color: var(--orange);
      color: #FFFFFF;
    }

    .mobile-drawer-cta {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
    }

    .mobile-drawer-cta .btn {
      width: 100%;
    }

    /* -------------------------------------------------------------
       HERO: INTEGRATED INDUSTRIAL SHOWCASE
    ------------------------------------------------------------- */
    .hero-section {
      background-color: var(--charcoal);
      color: #FFFFFF;
      border-bottom: 1px solid var(--charcoal-border);
      position: relative;
    }

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

    @media (min-width: 992px) {
      .hero-grid {
        grid-template-columns: 1.15fr 0.85fr;
        min-height: calc(88vh - var(--header-h));
      }
    }

    .hero-content {
      padding: 44px 0 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    @media (min-width: 992px) {
      .hero-content {
        padding: 64px 48px 64px 0;
      }
    }

    .hero-badge {
      display: inline-block;
      align-self: flex-start;
      background-color: var(--orange);
      color: #FFFFFF;
      font-family: var(--font-display);
      font-size: 16px;
      letter-spacing: 0.08em;
      padding: 6px 14px;
      margin-bottom: 20px;
      line-height: 1;
    }

    .hero-lead {
      font-size: 19px;
      line-height: 1.5;
      color: #D1D5DB;
      max-width: 580px;
      margin-bottom: 24px;
    }

    @media (min-width: 768px) {
      .hero-lead {
        font-size: 21px;
      }
    }

    /* Plain text phone number - not a link */
    .hero-phone-box {
      display: inline-flex;
      align-items: center;
      background-color: var(--charcoal-surface);
      border: 1px solid var(--charcoal-border);
      border-left: 4px solid var(--orange);
      padding: 10px 18px;
      margin-bottom: 28px;
      width: fit-content;
      max-width: 100%;
    }

    .phone-text {
      font-family: var(--font-display);
      font-size: clamp(18px, 5vw, 26px);
      letter-spacing: 0.05em;
      color: #FFFFFF;
      user-select: all;
      word-break: break-word;
    }
    .phone-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 36px;
    }

    .hero-actions .btn {
      flex: 1 1 200px;
    }

    @media (min-width: 768px) {
      .hero-actions .btn {
        flex: 0 0 auto;
      }
    }

    .hero-trust-bar {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      padding-top: 24px;
      border-top: 1px solid var(--charcoal-border);
    }

    @media (min-width: 640px) {
      .hero-trust-bar {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .trust-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 500;
      color: #E5E7EB;
    }

    .trust-pill::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      background-color: var(--orange);
      flex-shrink: 0;
    }

    .hero-media {
      background-color: var(--charcoal-surface);
      min-height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-top: 1px solid var(--charcoal-border);
    }

    @media (min-width: 992px) {
      .hero-media {
        border-top: none;
        border-left: 1px solid var(--charcoal-border);
      }
    }

    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    /* -------------------------------------------------------------
       SECTION SYSTEM & REUSABLE INDUSTRIAL COMPOSITION
    ------------------------------------------------------------- */
    .section {
      padding: 64px 0;
    }

    @media (min-width: 768px) {
      .section {
        padding: 88px 0;
      }
    }

    @media (min-width: 1440px) {
      .section {
        padding: 104px 0;
      }
    }

    .section-warm {
      background-color: var(--warm-white);
      color: var(--charcoal);
    }

    .section-charcoal {
      background-color: var(--charcoal);
      color: #FFFFFF;
    }

    .section-header {
      margin-bottom: 36px;
    }

    .section-header p {
      max-width: 740px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    .section-charcoal .section-header p {
      color: #9CA3AF;
    }

    /* -------------------------------------------------------------
       STICKER FRAME WORKBENCH (FULL DISPLAY, NEVER CROPPED, NO TEXT OVER IMAGE)
    ------------------------------------------------------------- */
    .sticker-frame {
      background-color: #F8FAFC;
      border-bottom: 1px solid #E2E8F0;
      padding: 24px;
      min-height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .sticker-frame img {
      max-height: 170px;
      width: auto;
      max-width: 100%;
      object-fit: contain; /* strict full image rendering */
      transition: transform 0.2s ease;
    }

    .sticker-frame-dark {
      background-color: var(--charcoal-dark);
      border-bottom: 1px solid var(--charcoal-border);
    }

    /* -------------------------------------------------------------
       SECTION 1: MACHINE CATEGORIES (6 items: 1/2/3 cols)
    ------------------------------------------------------------- */
    .grid-machines {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    @media (min-width: 640px) {
      .grid-machines {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .grid-machines {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
    }

    .card-machine {
      background-color: var(--white);
      border: 1px solid #E2E8F0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .card-machine:hover {
      transform: translateY(-4px);
      border-color: var(--charcoal);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    }

    .card-machine:hover .sticker-frame img {
      transform: scale(1.02);
    }

    .card-body {
      padding: 20px 22px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      justify-content: space-between;
      gap: 16px;
    }

    .card-title {
      font-family: var(--font-display);
      font-size: 25px;
      letter-spacing: 0.03em;
      line-height: 1.1;
      color: var(--charcoal);
    }

    .card-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: var(--orange);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .card-link::after {
      content: "→";
      display: inline-block;
      transition: transform 0.15s ease;
    }

    .card-machine:hover .card-link::after,
    .card-spec:hover .card-link::after,
    .card-bespoke:hover .card-link::after {
      transform: translateX(4px);
    }

    /* -------------------------------------------------------------
       SECTION 2: LOLER, SAFETY & FLEET STICKERS (8 items: 1/2/4 cols)
    ------------------------------------------------------------- */
    .grid-specs {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
    }

    @media (min-width: 600px) {
      .grid-specs {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .grid-specs {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
    }

    .card-spec {
      background-color: var(--charcoal-card);
      border: 1px solid var(--charcoal-border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }

    .card-spec:hover {
      transform: translateY(-4px);
      border-color: var(--orange);
    }

    .card-spec .sticker-frame {
      min-height: 190px;
      padding: 20px;
    }

    .card-spec .sticker-frame img {
      max-height: 140px;
    }

    .card-spec .card-body {
      padding: 20px;
      justify-content: flex-start;
      gap: 12px;
    }

    .card-spec .card-title {
      color: #FFFFFF;
      font-size: 22px;
    }

    .card-spec-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--charcoal-border);
      width: 100%;
    }

    .spec-price {
      font-size: 16px;
      font-weight: 500;
      color: #CBD5E1;
    }

    .spec-price strong {
      color: var(--orange);
      font-weight: 700;
    }

    /* -------------------------------------------------------------
       SECTION 3: BESPOKE & REPLACEMENT STICKERS (4 items: 1/2/4 cols)
    ------------------------------------------------------------- */
    .grid-bespoke {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      margin-bottom: 40px;
    }

    @media (min-width: 600px) {
      .grid-bespoke {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .grid-bespoke {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
      }
    }

    .card-bespoke {
      background-color: var(--white);
      border: 1px solid #E2E8F0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }

    .card-bespoke:hover {
      transform: translateY(-4px);
      border-color: var(--charcoal);
    }

    .card-bespoke .sticker-frame {
      min-height: 200px;
      background-color: #F8FAFC;
    }

    .card-bespoke .card-title {
      font-size: 22px;
    }

    .bespoke-cta-wrap {
      text-align: center;
    }

    /* -------------------------------------------------------------
       SECTION 4: WHAT CUSTOMERS SAY (3 items: 1/3 cols)
    ------------------------------------------------------------- */
    .grid-testimonials {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

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

    .card-quote {
      background-color: var(--white);
      border: 1px solid #E2E8F0;
      border-top: 4px solid var(--orange);
      padding: 32px 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 20px;
    }

    .quote-text {
      font-size: 18px;
      line-height: 1.6;
      color: var(--charcoal);
      font-style: italic;
    }

    .quote-author {
      font-size: 16px;
      font-weight: 700;
      color: var(--charcoal);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .quote-author::before {
      content: "✓";
      color: var(--orange);
      font-weight: 800;
    }

    /* -------------------------------------------------------------
       SECTION 5: HIGH IMPACT ORANGE MOMENT (SAMPLE PACK)
    ------------------------------------------------------------- */
    .banner-orange {
      background-color: var(--orange);
      color: #FFFFFF;
      padding: 72px 0;
      position: relative;
    }

    .orange-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      gap: 28px;
    }

    @media (min-width: 880px) {
      .orange-inner {
        flex-direction: row;
        align-items: center;
      }
    }

    .orange-text h2 {
      color: #FFFFFF;
      margin-bottom: 8px;
      font-size: clamp(2.8rem, 5vw, 4.4rem);
    }

    .orange-text p {
      font-size: 21px;
      color: #FFF7ED;
      max-width: 640px;
    }

    .banner-orange .btn {
      flex-shrink: 0;
      padding: 18px 36px;
      font-size: 22px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    }

    /* -------------------------------------------------------------
       SECTION 6: HOW IT WORKS (3 items: 1/3 cols)
    ------------------------------------------------------------- */
    .grid-process {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

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

    .card-process {
      background-color: var(--white);
      border: 1px solid #E2E8F0;
      border-left: 4px solid var(--charcoal);
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      transition: border-left-color 0.2s ease;
    }

    .card-process:hover {
      border-left-color: var(--orange);
    }

    .process-num {
      font-family: var(--font-display);
      font-size: 56px;
      line-height: 0.9;
      color: var(--orange);
    }

    .card-process p {
      color: var(--text-muted);
      font-size: 17px;
    }

    .card-process p strong {
      color: var(--charcoal);
    }

    /* -------------------------------------------------------------
       SECTION 7: STICKER & DECAL MATERIALS (4 items: 1/2/4 cols)
    ------------------------------------------------------------- */
    .grid-materials {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 24px;
    }

    @media (min-width: 600px) {
      .grid-materials {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1024px) {
      .grid-materials {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
      }
    }

    .card-material {
      background-color: var(--charcoal-card);
      border: 1px solid var(--charcoal-border);
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .material-title {
      font-family: var(--font-display);
      font-size: 26px;
      color: var(--orange);
      letter-spacing: 0.04em;
    }

    .material-desc {
      font-size: 16px;
      color: #E2E8F0;
      font-weight: 500;
    }

    .materials-note {
      color: #9CA3AF;
      font-size: 16px;
      margin-bottom: 20px;
    }

    .materials-link-wrap a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-display);
      font-size: 20px;
      color: var(--orange);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .materials-link-wrap a:hover {
      color: #FFFFFF;
    }

    /* -------------------------------------------------------------
       SECTION 8: SEO EDITORIAL BLOCK (VISIBLE, HIGH CONTRAST)
    ------------------------------------------------------------- */
    .seo-box {
      background-color: var(--white);
      border: 1px solid #E2E8F0;
      padding: 36px 28px;
      max-width: 1080px;
    }

    @media (min-width: 768px) {
      .seo-box {
        padding: 48px 44px;
      }
    }

    .seo-box p {
      margin-bottom: 20px;
      color: var(--charcoal);
      font-size: 17px;
      line-height: 1.7;
    }

    .seo-box p:last-child {
      margin-bottom: 0;
    }

    .seo-box a {
      color: var(--orange);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .seo-box a:hover {
      color: var(--charcoal);
    }

    /* -------------------------------------------------------------
       FOOTER
    ------------------------------------------------------------- */
    .site-footer {
      background-color: var(--charcoal);
      color: #FFFFFF;
      border-top: 4px solid var(--orange);
      padding: 56px 0 36px;
    }

    .footer-top {
      margin-bottom: 28px;
    }

    .footer-desc {
      font-size: 18px;
      font-weight: 500;
      color: #E2E8F0;
      max-width: 580px;
    }

    .footer-links-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 24px;
      padding-top: 24px;
      border-top: 1px solid var(--charcoal-border);
    }

    .footer-links-wrap a {
      color: #9CA3AF;
      font-size: 16px;
    }

    .footer-links-wrap a:hover {
      color: var(--orange);
    }

    /* -------------------------------------------------------------
       STICKY BOTTOM BAR (MOBILE ONLY)
    ------------------------------------------------------------- */
    .sticky-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 64px;
      background-color: var(--charcoal);
      border-top: 2px solid var(--orange);
      display: grid;
      grid-template-columns: 1fr 1fr;
      z-index: 1000;
    }

    @media (min-width: 769px) {
      .sticky-bar {
        display: none !important;
      }
    }

    .sticky-bar a {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-family: var(--font-display);
      font-size: 19px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-align: center;
      line-height: 1;
      padding: 0 8px;
    }

    .sticky-bar-shop {
      background-color: var(--charcoal);
      color: #FFFFFF;
      border-right: 1px solid var(--charcoal-border);
    }

    .sticky-bar-quote {
      background-color: var(--orange);
      color: #FFFFFF;
    }

    /* ---- Claude review layer ---- */
    .btn-orange,.mobile-search-form button,.sticky-bar-quote,.hero-badge{color:var(--charcoal)}
    .btn-orange:hover{color:var(--charcoal)}
    .banner-orange,.orange-text h2{color:var(--charcoal)}
    .orange-text p{color:var(--charcoal);font-weight:500}
    .btn-charcoal{border-color:#fff}.banner-orange .btn-charcoal{border-color:var(--charcoal)}
    .hero-actions .btn-charcoal{background:transparent}
    .card-machine,.card-spec,.card-bespoke{position:relative;height:100%}
    .card-link::before{content:"";position:absolute;inset:0}
    .card-link{color:#C2410C}.card-spec .card-link{color:var(--orange)}
    .sticker-frame,.card-spec .sticker-frame,.card-bespoke .sticker-frame{aspect-ratio:4/3;min-height:0;padding:16px;background:#EDEAE5;border-bottom:0;overflow:hidden}
    .sticker-frame img,.card-spec .sticker-frame img{width:100%;height:100%;max-height:none;object-fit:contain}
    .sticker-frame.photo-frame,.card-bespoke .sticker-frame.photo-frame{padding:0;background:var(--charcoal-dark)}
    .sticker-frame.photo-frame img{object-fit:cover}
    .card-machine:hover .sticker-frame img{transform:scale(1.04)}
    .card-title,.card-spec .card-title,.card-bespoke .card-title{font-size:clamp(21px,2vw,26px);min-height:2.2em}
    .card-body,.card-spec .card-body{padding:16px;gap:12px}
    .card-spec-footer{flex-direction:column;align-items:flex-start;gap:8px;border-top:0;padding-top:0;margin-top:auto}
    .grid-machines,.grid-specs,.grid-bespoke{grid-template-columns:repeat(2,1fr);gap:12px}
    .grid-materials{grid-template-columns:repeat(2,1fr);gap:12px}
    @media(min-width:768px){.grid-machines{grid-template-columns:repeat(3,1fr);gap:20px}.grid-specs,.grid-bespoke,.grid-materials{grid-template-columns:repeat(4,1fr);gap:20px}.grid-testimonials,.grid-process{grid-template-columns:repeat(3,1fr)}}
    .section-charcoal .card-quote{background:var(--charcoal-card);border-color:var(--charcoal-border);border-top:4px solid var(--orange)}
    .section-charcoal .quote-text,.section-charcoal .quote-author{color:#fff}
    .quote-text{font-style:normal}
    .quote-author::before{content:none}
    .card-process{gap:8px}.card-process .card-title{min-height:0}
    .bespoke-cta-wrap{text-align:left}
    .seo-box{max-width:none;background:transparent;border:0;padding:0}.seo-box p{max-width:860px}
    .seo-box a{color:#C2410C}
    /* full-bleed hero */
    .hero-media{min-height:0;aspect-ratio:16/9;border:0}
    .hero-grid{display:block;min-height:0}
    .hero-content{padding:32px 0 40px}
    .hero-section{display:flex;flex-direction:column}
    .hero-section>.hero-media{order:-1}
    @media(min-width:992px){
      .hero-section{display:block;min-height:calc(100vh - var(--header-h));max-height:860px;overflow:hidden}
      .hero-section>.hero-media{position:absolute;inset:0;aspect-ratio:auto}
      .hero-section>.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,28,30,.85) 0%,rgba(28,28,30,.72) 30%,rgba(28,28,30,.45) 50%,rgba(28,28,30,0) 70%)}
      .hero-content h1,.hero-content .hero-lead{text-shadow:0 2px 12px rgba(0,0,0,.55)}
      .hero-section .container{position:relative;z-index:1}
      .hero-content{max-width:680px;padding:72px 0}
      .hero-trust-bar{grid-template-columns:repeat(2,auto);justify-content:start;gap:12px 32px}
    }
    .phone-text{font-size:22px}
    .btn{white-space:normal}
    .hero-trust-bar{grid-template-columns:1fr 1fr}
    .card-machine,.card-spec,.card-bespoke,.sticker-frame{min-width:0}
    .grid-machines>*,.grid-specs>*,.grid-bespoke>*,.grid-materials>*{min-width:0}
    .card-link{font-size:16px;letter-spacing:.02em}