:root {
      --yellow:#f5a300; --yellow2:#ffc044; --black:#050505; --dark:#0b0b0b; --panel:#151515; --line:#2b2b2b; --text:#fff; --muted:#cfcfcf;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body { margin:0; font-family:Arial, Helvetica, sans-serif; background:var(--dark); color:var(--text); line-height:1.55; }
    img { max-width:100%; display:block; }
    a { color:inherit; }
    .container { width:min(1180px, 90%); margin:auto; }
    .top-strip { background:linear-gradient(90deg,#f5a300,#ffc044,#f5a300); color:#111; padding:10px 16px; text-align:center; font-weight:950; display:flex; align-items:center; justify-content:center; gap:10px; }
    .top-strip span { background:#fff3cf; border-radius:999px; padding:4px 10px; border:1px solid rgba(0,0,0,.2); }
    header { background:#000; padding:14px 0; border-bottom:1px solid #242424; position:sticky; top:0; z-index:100; }
    .nav { display:grid; grid-template-columns:290px 1fr 290px; align-items:center; gap:18px; }
    .logo img { height:92px; max-width:300px; object-fit:contain; }
    .nav-links { display:flex; gap:16px; justify-content:center; color:#ddd; font-weight:800; font-size:14px; }
    .nav-links a { text-decoration:none; }
    .nav-links a:hover { color:var(--yellow); }
    .header-actions { display:flex; justify-content:flex-end; gap:12px; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:950; transition:.2s ease; }
    .btn-primary { background:var(--yellow); color:#111; box-shadow:0 10px 24px rgba(245,163,0,.22); }
    .btn-primary:hover { transform:translateY(-1px); background:var(--yellow2); }
    .btn-dark { background:#0b0b0b; color:#fff; border:1px solid rgba(255,255,255,.2); }
    a.btn-dark[href^="tel:"] { background:linear-gradient(135deg,#f5a300,#ff7a00); color:#111; border-color:rgba(255,184,64,.95); }

    .hero {
      position:relative; min-height:700px; display:grid; align-items:center; overflow:hidden;
      background:
        linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(6,6,6,.9) 33%, rgba(6,6,6,.58) 58%, rgba(6,6,6,.12) 82%, rgba(6,6,6,.04) 100%),
        radial-gradient(circle at 22% 15%, rgba(245,163,0,.24), transparent 34%),
        url('../images/packing-services-hero.webp') center right/cover no-repeat;
      border-bottom:1px solid #1e1e1e;
    }
    .hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:160px; background:linear-gradient(180deg, rgba(11,11,11,0), var(--dark)); }
    .hero-content { position:relative; z-index:2; max-width:650px; padding:72px 0 60px; }
    .breadcrumbs { color:#cfcfcf; font-size:14px; margin-bottom:18px; font-weight:700; }
    .breadcrumbs a { text-decoration:none; color:#fff; }
    .breadcrumbs span { color:var(--yellow); }
    .eyebrow { display:inline-flex; padding:8px 13px; border-radius:999px; background:rgba(245,163,0,.12); border:1px solid rgba(245,163,0,.35); color:var(--yellow); font-size:13px; font-weight:950; margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px; }
    h1 { margin:0 0 18px; font-size:62px; line-height:.98; letter-spacing:-1.8px; }
    .hero p { font-size:19px; color:#ededed; margin:0 0 24px; }
    .hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
    .mobile-hero-photo { display:none; }
    .hero-badges { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .hero-badge { padding:14px 15px; border-radius:18px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13); }
    .hero-badge strong { display:block; color:var(--yellow); font-size:22px; line-height:1; }
    .hero-badge span { display:block; color:#ddd; font-size:13px; font-weight:850; margin-top:6px; }

    .section { padding:82px 0; }
    .section.alt { background:#090909; border-top:1px solid #171717; border-bottom:1px solid #171717; }
    .section-head { max-width:840px; margin:0 auto 34px; text-align:center; }
    .kicker { display:inline-flex; color:var(--yellow); border:1px solid rgba(245,163,0,.25); background:rgba(245,163,0,.1); border-radius:999px; padding:7px 12px; font-size:13px; font-weight:950; margin-bottom:14px; text-transform:uppercase; letter-spacing:.5px; }
    .section-head h2 { margin:0 0 12px; font-size:44px; line-height:1.07; letter-spacing:-1.1px; }
    .section-head p { margin:0; color:#cecece; font-size:18px; }

    .split { display:grid; grid-template-columns:.95fr 1.05fr; gap:28px; align-items:center; }
    .image-card { border-radius:28px; overflow:hidden; border:1px solid #2a2a2a; min-height:520px; background:#111; box-shadow:0 24px 70px rgba(0,0,0,.34); }
    .image-card img { width:100%; height:100%; object-fit:cover; }
    .content-panel { background:linear-gradient(180deg,#171717,#101010); border:1px solid #292929; border-radius:28px; padding:34px; box-shadow:0 24px 70px rgba(0,0,0,.34); }
    .content-panel h2 { margin:0 0 14px; font-size:38px; line-height:1.08; letter-spacing:-1px; }
    .content-panel p { color:#d7d7d7; margin:0 0 14px; font-size:17px; }
    .check-grid { list-style:none; padding:10px 0 0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
    .check-grid li { position:relative; padding-left:28px; color:#f0f0f0; font-weight:850; }
    .check-grid li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--yellow); }

    .price-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
    .price-card {
      position:relative; overflow:hidden; background:radial-gradient(circle at 90% 0%, rgba(245,163,0,.18), transparent 34%), linear-gradient(180deg,#1a1a1a,#101010);
      border:1px solid rgba(255,255,255,.14); border-radius:26px; padding:28px 24px; box-shadow:0 24px 62px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
    }
    .price-card.featured { border-color:rgba(245,163,0,.78); }
    .price-card h3 { margin:0 0 14px; font-size:24px; line-height:1.1; }
    .price { color:var(--yellow); font-size:52px; line-height:1; font-weight:950; letter-spacing:-1px; margin-bottom:16px; }
    .price-card p { margin:0 0 16px; color:#ddd; }
    .price-card span { display:inline-flex; padding:9px 12px; border-radius:999px; background:rgba(245,163,0,.1); border:1px solid rgba(245,163,0,.25); color:#ffd27a; font-size:13px; font-weight:900; }
    .price-note { margin:22px auto 0; max-width:920px; padding:20px 22px; border-radius:20px; border:1px solid rgba(245,163,0,.34); background:linear-gradient(180deg, rgba(245,163,0,.12), rgba(255,255,255,.025)); text-align:center; color:#ededed; font-weight:850; }
    .price-note strong { color:var(--yellow); }

    .packing-flow { display:grid; gap:24px; }
    .flow-item { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center; background:linear-gradient(180deg,#171717,#101010); border:1px solid rgba(255,255,255,.12); border-radius:28px; padding:22px; box-shadow:0 22px 58px rgba(0,0,0,.34); }
    .flow-item.reverse .flow-image { order:2; }
    .flow-item.reverse .flow-copy { order:1; }
    .flow-image { min-height:360px; border-radius:22px; overflow:hidden; border:1px solid #2a2a2a; background:#111; }
    .flow-image img { width:100%; height:100%; object-fit:cover; }
    .flow-copy { padding:12px; }
    .flow-copy span { display:inline-flex; padding:8px 12px; border-radius:999px; background:rgba(245,163,0,.12); border:1px solid rgba(245,163,0,.3); color:var(--yellow); font-size:13px; font-weight:950; margin-bottom:13px; }
    .flow-copy h3 { margin:0 0 12px; font-size:34px; line-height:1.06; letter-spacing:-.8px; }
    .flow-copy p { margin:0; color:#d8d8d8; font-size:17px; line-height:1.6; }

    .supplies { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
    .supply { padding:24px; background:linear-gradient(180deg,#171717,#101010); border:1px solid #282828; border-radius:22px; box-shadow:0 18px 44px rgba(0,0,0,.24); }
    .supply .icon { width:50px; height:50px; border-radius:16px; background:rgba(245,163,0,.12); border:1px solid rgba(245,163,0,.24); display:grid; place-items:center; font-size:24px; margin-bottom:14px; }
    .supply h3 { margin:0 0 9px; font-size:21px; }
    .supply p { margin:0; color:#d4d4d4; font-size:15.5px; }

    .areas { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:24px; }
    .areas span { background:#171717; border:1px solid #2b2b2b; border-radius:999px; padding:10px 15px; color:#eee; font-weight:850; box-shadow:0 10px 24px rgba(0,0,0,.18); }
    .areas span:first-child { background:rgba(245,163,0,.14); border-color:rgba(245,163,0,.5); color:var(--yellow); }

    .faq-wrap { max-width:900px; margin:0 auto; display:grid; gap:14px; }
    details { border:1px solid #2a2a2a; border-radius:18px; background:linear-gradient(180deg,#171717,#111); overflow:hidden; }
    summary { list-style:none; cursor:pointer; padding:20px 22px; font-size:19px; font-weight:950; display:flex; justify-content:space-between; gap:18px; }
    summary::-webkit-details-marker { display:none; }
    summary::after { content:"+"; color:var(--yellow); font-size:28px; line-height:1; }
    details[open] summary::after { content:"−"; }
    details .answer { padding:0 22px 22px; color:#d4d4d4; }

    .cta { padding:76px 0; background:linear-gradient(135deg,#f5a300,#ffc044); color:#111; text-align:center; }
    .cta h2 { margin:0 0 10px; font-size:44px; line-height:1.05; letter-spacing:-1px; }
    .cta p { max-width:760px; margin:0 auto 24px; font-weight:850; font-size:18px; }
    .cta .btn { background:#050505; color:#fff; border-radius:16px; }

    footer { background:#000; padding:48px 0 24px; border-top:1px solid #202020; }
    .footer-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr 1fr; gap:28px; }
    footer h3, footer h4 { margin:0 0 14px; color:#fff; }
    footer p, footer a { color:#c7c7c7; text-decoration:none; }
    footer a:hover { color:var(--yellow); }
    .footer-bottom { margin-top:26px; padding-top:18px; border-top:1px solid #1d1d1d; color:#888; text-align:center; }

    @media(max-width:1100px) {
      .nav, .split, .footer-grid { grid-template-columns:1fr; }
      .logo, .nav-links, .header-actions { justify-self:center; }
      .price-grid, .supplies { grid-template-columns:1fr 1fr; }
    }
    @media(max-width:800px) {
      .top-strip { font-size:12px; padding:8px; }
      header { padding:8px 0; }
      .nav { display:grid; grid-template-columns:minmax(112px,40%) minmax(0,1fr); grid-template-rows:auto auto; gap:8px 10px; }
      .logo { grid-column:1; grid-row:1; justify-self:start; }
      .logo img { height:70px; max-width:150px; }
      .header-actions { grid-column:2; grid-row:1; display:grid; grid-template-columns:1fr 1fr; gap:7px; width:100%; justify-self:stretch; }
      .header-actions .btn { min-height:38px; padding:8px 7px; border-radius:12px; font-size:11px; white-space:nowrap; }
      .nav-links { grid-column:1 / -1; grid-row:2; flex-wrap:wrap; gap:9px 13px; font-size:13px; }

      .hero { min-height:auto; background:linear-gradient(180deg, rgba(5,5,5,.96), rgba(7,7,7,.95)) !important; }
      .hero-content { max-width:none; padding:38px 0 44px; }
      .hero-card-mobile { padding:22px 18px; border-radius:24px; border:1px solid rgba(255,255,255,.13); background:linear-gradient(180deg, rgba(16,16,16,.88), rgba(6,6,6,.95)); box-shadow:0 24px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.06); }
      h1 { font-size:36px; line-height:1.03; }
      .hero p { font-size:16.5px; }
      .hero-actions { display:grid; grid-template-columns:1fr; }
      .hero-actions .btn { width:100%; min-height:50px; }
      .mobile-hero-photo { display:block; margin:18px 0 6px; border-radius:20px; overflow:hidden; border:1px solid rgba(245,163,0,.36); box-shadow:0 22px 54px rgba(0,0,0,.46); }
      .mobile-hero-photo img { width:100%; height:250px; object-fit:cover; object-position:center center; }
      .hero-badges { grid-template-columns:1fr; }

      .section { padding:60px 0; }
      .section-head h2, .content-panel h2, .cta h2 { font-size:32px; }
      .image-card { min-height:360px; }
      .check-grid, .price-grid, .supplies { grid-template-columns:1fr; }
      .flow-item, .flow-item.reverse { grid-template-columns:1fr; }
      .flow-item.reverse .flow-image, .flow-item.reverse .flow-copy { order:initial; }
      .flow-image { min-height:260px; }
      .flow-copy h3 { font-size:28px; }
    }
  
    /* Desktop hero fix: text on one side, image on the other, blended into the heading area */
    @media (min-width: 801px) {
      .hero {
        min-height: 680px !important;
        background:
          linear-gradient(90deg, #050505 0%, #050505 34%, rgba(5,5,5,.92) 43%, rgba(5,5,5,.62) 55%, rgba(5,5,5,.16) 72%, rgba(5,5,5,.02) 100%),
          radial-gradient(circle at 26% 18%, rgba(245,163,0,.22), transparent 32%),
          url('../images/packing-services-css-02.webp') center right/cover no-repeat !important;
        display: block !important;
      }

      .hero .container {
        min-height: 680px !important;
        display: grid !important;
        grid-template-columns: minmax(500px, 48%) minmax(0, 52%) !important;
        align-items: center !important;
      }

      .hero-content {
        max-width: none !important;
        width: 100% !important;
        padding: 70px 0 70px !important;
        grid-column: 1 !important;
      }

      .hero-card-mobile {
        max-width: 610px !important;
        padding: 34px 32px !important;
        border-radius: 30px !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        background: linear-gradient(180deg, rgba(12,12,12,.86), rgba(5,5,5,.94)) !important;
        box-shadow: 0 28px 85px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07) !important;
        backdrop-filter: blur(2px) !important;
      }

      .hero-card-mobile h1,
      .hero-card-mobile p,
      .hero-card-mobile .eyebrow,
      .hero-card-mobile .breadcrumbs,
      .hero-card-mobile .hero-actions,
      .hero-card-mobile .hero-badges {
        position: relative !important;
        z-index: 2 !important;
      }

      .hero-card-mobile h1 {
        font-size: 58px !important;
        max-width: 560px !important;
        text-shadow: 0 8px 32px rgba(0,0,0,.7) !important;
      }

      .hero-card-mobile p {
        max-width: 560px !important;
      }

      .hero::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        pointer-events: none !important;
        background:
          linear-gradient(90deg, transparent 0%, transparent 42%, rgba(245,163,0,.06) 51%, transparent 67%),
          linear-gradient(180deg, transparent 0%, rgba(11,11,11,.9) 100%) !important;
        z-index: 1 !important;
      }

      .hero-content {
        position: relative !important;
        z-index: 2 !important;
      }

      .mobile-hero-photo {
        display: none !important;
      }
    }

    @media (min-width: 801px) and (max-width: 1080px) {
      .hero .container {
        grid-template-columns: minmax(430px, 54%) minmax(0, 46%) !important;
      }

      .hero-card-mobile h1 {
        font-size: 48px !important;
      }
    }

  
    /* FINAL FIX: packing page hero overflow + new desktop hero image */
    @media (min-width: 801px) {
      .hero {
        min-height: 640px !important;
        overflow: hidden !important;
        background:
          linear-gradient(90deg, #050505 0%, #050505 38%, rgba(5,5,5,.92) 48%, rgba(5,5,5,.62) 60%, rgba(5,5,5,.18) 76%, rgba(5,5,5,.04) 100%),
          radial-gradient(circle at 23% 18%, rgba(245,163,0,.18), transparent 32%),
          url('../images/packing-services-hero.webp') center right/cover no-repeat !important;
      }

      .hero .container {
        min-height: 640px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 510px) minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 24px !important;
      }

      .hero-content {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 510px !important;
        padding: 42px 0 !important;
        margin: 0 !important;
      }

      .hero-card-mobile {
        width: 100% !important;
        max-width: 510px !important;
        padding: 26px 24px !important;
        border-radius: 26px !important;
        overflow: visible !important;
      }

      .hero-card-mobile h1 {
        font-size: clamp(38px, 4vw, 50px) !important;
        line-height: 1.02 !important;
        letter-spacing: -1.2px !important;
        max-width: 100% !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        margin-bottom: 14px !important;
      }

      .hero-card-mobile p {
        font-size: 17px !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
        margin-bottom: 18px !important;
      }

      .hero-badges {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }

      .hero-badge {
        padding: 12px 12px !important;
      }

      .hero-badge strong {
        font-size: 18px !important;
      }

      .hero-badge span {
        font-size: 12px !important;
      }
    }

    @media (min-width: 801px) and (max-width: 1040px) {
      .hero .container {
        grid-template-columns: minmax(0, 470px) minmax(0, 1fr) !important;
      }

      .hero-content,
      .hero-card-mobile {
        max-width: 470px !important;
      }

      .hero-card-mobile h1 {
        font-size: 40px !important;
      }

      .hero-badges {
        grid-template-columns: 1fr !important;
      }
    }

    @media (max-width: 800px) {
      .hero-card-mobile h1 {
        overflow-wrap: normal !important;
        word-break: normal !important;
      }
    }

  
/* CLEAN PACKING HERO FIX */
@media (min-width: 801px) {
  .hero {
    min-height: 650px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background:
      radial-gradient(circle at 14% 14%, rgba(245,163,0,.18), transparent 34%),
      linear-gradient(135deg, #050505 0%, #070707 55%, #121212 100%) !important;
  }

  .hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.90) 43%, rgba(5,5,5,.55) 58%, rgba(5,5,5,.08) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  .hero::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 130px !important;
    background: linear-gradient(180deg, rgba(9,9,9,0), var(--dark)) !important;
    z-index: 1 !important;
  }

  .packing-hero-layout {
    position: relative !important;
    z-index: 2 !important;
    min-height: 650px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 500px) minmax(0, 1fr) !important;
    gap: 46px !important;
    align-items: center !important;
  }

  .packing-hero-text {
    width: 100% !important;
    max-width: 500px !important;
    padding: 42px 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .hero-content {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .hero-card-mobile {
    width: 100% !important;
    max-width: 500px !important;
    padding: 26px 24px !important;
    border-radius: 26px !important;
    overflow: visible !important;
    background: linear-gradient(180deg, rgba(14,14,14,.91), rgba(5,5,5,.97)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 26px 78px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  .hero-card-mobile h1 {
    font-size: clamp(36px, 3.25vw, 48px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1px !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-card-mobile p {
    font-size: 16.5px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  .hero-actions {
    margin-bottom: 18px !important;
  }

  .hero-badges {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .hero-badge {
    padding: 11px 12px !important;
  }

  .hero-badge strong {
    font-size: 17px !important;
  }

  .hero-badge span {
    font-size: 12px !important;
  }

  .mobile-hero-photo {
    display: none !important;
  }

  .packing-hero-image {
    display: block !important;
    width: 100% !important;
    height: 540px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    border: 1px solid rgba(245,163,0,.34) !important;
    box-shadow: 0 34px 96px rgba(0,0,0,.58) !important;
    position: relative !important;
    background: #111 !important;
  }

  .packing-hero-image::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(90deg, rgba(5,5,5,.32), rgba(5,5,5,0) 38%),
      linear-gradient(180deg, rgba(5,5,5,.04), rgba(5,5,5,.22)) !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .packing-hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (min-width: 801px) and (max-width: 1060px) {
  .packing-hero-layout {
    grid-template-columns: minmax(0, 455px) minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  .packing-hero-text,
  .hero-card-mobile {
    max-width: 455px !important;
  }

  .hero-card-mobile h1 {
    font-size: 38px !important;
  }

  .hero-badges {
    grid-template-columns: 1fr !important;
  }

  .packing-hero-image {
    height: 500px !important;
  }
}

@media (max-width: 800px) {
  .packing-hero-layout {
    display: block !important;
  }

  .packing-hero-image {
    display: none !important;
  }
}