:root{
    --gold:#FFDE00;
    --gold-hover:#E6C700;
    --gold-tint:#FCDE74;
    --ink:#1C1C1C;
    --ink-800:#2A2A2A;
    --slate:#3F4A4D;
    --slate-500:#6B7679;
    --white:#FFFFFF;
    --light:#F8F8F8;
    --border:#E5E5E5;
    --border-strong:#D6D6D6;
    --radius:10px;
    --maxw:1280px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    color:var(--ink);
    background:var(--white);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4,.display{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:800;
    line-height:1.08;
    letter-spacing:-0.01em;
    margin:0;
    text-transform:none;
  }
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;max-width:100%;}
  button,.btn{font-family:'Plus Jakarta Sans',sans-serif;cursor:pointer;background: none;border: none;}
  :focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
  @media (max-width:720px){.wrap{padding:0 20px;}}

  .eyebrow{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    font-size:12.5px;
    color:var(--ink);
    display:flex;align-items:center;gap:10px;
  }
  /* Gold dash removed (Mario review, Aug 2026: "remove the yellow dash ...
     and make sure the eyebrow content left aligns with the heading
     beneath") -- every eyebrow/heading pair in this file is a direct
     sibling with no offsetting wrapper, so dropping the dash (and the gap
     it was consuming) is enough on its own to flush-align the eyebrow text
     with the heading's left edge underneath it. */
  .eyebrow.on-dark{color:#fff;}
  .eyebrow.center{justify-content:center;}

  .btn-primary{
    background:var(--gold);color:var(--ink);border:none;
    padding:14px 26px;border-radius:var(--radius);
    font-weight:700;font-size:15px;
    display:inline-flex;align-items:center;gap:8px;
    transition:background .15s ease;
  }
  .btn-primary:hover{background:var(--gold-hover);}
  .btn-secondary{
    background:transparent;color:var(--ink);
    border:1.5px solid var(--border-strong);
    padding:12.5px 24px;border-radius:var(--radius);
    font-weight:700;font-size:15px;
    display:inline-flex;align-items:center;gap:8px;
    transition:border-color .15s ease, background .15s ease;
  }
  .btn-secondary:hover{border-color:var(--ink);background:var(--light);}
  .btn-secondary.on-dark{border-color:#4A4A4A;color:#fff;}
  .btn-secondary.on-dark:hover{background:rgba(255,255,255,.08);border-color:#fff;}
  .btn-ghost{
    font-weight:700;font-size:14px;color:var(--ink);
    display:inline-flex;align-items:center;gap:6px;
    border-bottom:2px solid var(--gold);padding-bottom:2px;width: fit-content;
  }

  .tag-chip{
    display:inline-flex;align-items:center;
    background:var(--gold-tint);color:var(--ink);
    font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    padding:4px 10px;border-radius:20px;
  }

  .ph{
    background:repeating-linear-gradient(135deg,#EFEFEF,#EFEFEF 10px,#E6E6E6 10px,#E6E6E6 20px);
    border:1.5px dashed var(--border-strong);
    border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    color:var(--slate-500);
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    text-align:center;padding:10px;
    position:relative;
  }


  .btn-primary{
    background:var(--gold);color:var(--ink);border:none;
    padding:14px 26px;border-radius:var(--radius);
    font-weight:700;font-size:15px;
    display:inline-flex;align-items:center;gap:8px;
    transition:background .15s ease;
  }
  .btn-primary:hover{background:var(--gold-hover);}

  /* ---------- Announcement / tool bar ---------- */
  /* ---------- Header colour concept (Nik, Sep 2026: "different colour
     combinations for the main header menu" -- trial on homepage only before
     site-wide rollout). Announcement bar flips from the dark/ink strip to
     solid AWC yellow with black text/icons; the white mainnav row and the
     grey .quicknav row underneath are untouched since they already matched
     the concept. If approved, port this same .annbar rule block into every
     other Live Working Site page's own embedded <style>. */
  .annbar{background:var(--ink);color:#E9E9E9;font-size:12.5px;}
  .annbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 32px;flex-wrap:wrap;gap:6px;}
  .annbar .tool-link{color:#B7B7B7;font-weight:700;display:flex;align-items:center;gap:6px;}
  .annbar .contact-strip{display:flex;gap:20px;color:#B7B7B7;}
  .annbar a:hover{color:#fff;}
  @media (max-width:720px){.annbar .contact-strip{display:none;}}


  .btn-primary{
    background:var(--gold);color:var(--ink);border:none;
    padding:14px 26px;border-radius:var(--radius);
    font-weight:700;font-size:15px;
    display:inline-flex;align-items:center;gap:8px;
    transition:background .15s ease;
  }
  .btn-primary:hover{background:var(--gold-hover);}

  /* ---------- Announcement / tool bar ---------- */
  /* ---------- Header colour concept (Nik, Sep 2026: "different colour
     combinations for the main header menu" -- trial on homepage only before
     site-wide rollout). Announcement bar flips from the dark/ink strip to
     solid AWC yellow with black text/icons; the white mainnav row and the
     grey .quicknav row underneath are untouched since they already matched
     the concept. If approved, port this same .annbar rule block into every
     other Live Working Site page's own embedded <style>. */
  .annbar{background:var(--ink);color:#E9E9E9;font-size:12.5px;}
  .annbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 32px;flex-wrap:wrap;gap:6px;}
  .annbar .tool-link{color:#B7B7B7;font-weight:700;display:flex;align-items:center;gap:6px;}
  .annbar .contact-strip{display:flex;gap:20px;color:#B7B7B7;}
  .annbar a:hover{color:#fff;}
  @media (max-width:720px){.annbar .contact-strip{display:none;}}

  /* ---------- Header ---------- */
  /* Nik, Sep 2026: header colour concept round 3 -- "Try this one" --
     mainnav + quicknav both flip to solid dark (var(--ink)), text/icons
     flip to white/light-grey, and the header logo swaps to the same
     light-on-dark lockup already used in the dark footer (gold "AUSTRALIAN",
     white "WRAPPING COMPANY") instead of the black-text daytime version.
     Homepage-only trial, same as rounds 1-2, pending approval. */
  header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--border);}
  nav.mainnav .wrap{display:flex;align-items:center;height:78px;gap:32px;}
  .logo-mark{width:170px;flex:none;display:flex;align-items:center;}
  .logo-mark img{height:34px;width:auto;display:block;}
  .navlinks{display:flex;align-items:center;gap:19px;}
  .navlinks a{font-weight:600;font-size:12.5px;color:var(--ink);padding:8px 0;position:relative;display:flex;align-items:center;gap:4px;white-space:nowrap;}
  .navlinks a:hover{color:var(--slate);}
  .nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto;}

  /* ---------- Mega menu: Packaging Machines ---------- */
  .nav-item{position:relative;}
  .nav-item.mega-open > .dd,
  .nav-item:hover > .dd{color:var(--ink);}
  .nav-item .dd svg{transition:transform .15s ease;}
  .nav-item.mega-open .dd svg,
  .nav-item:hover .dd svg{transform:rotate(180deg);}
  .mega-panel{
    position:absolute;top:100%;left:0;padding-top:14px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease;
    z-index:150;
  }
  .nav-item:hover .mega-panel,
  .nav-item.mega-open .mega-panel{
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .mega-panel-inner{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:0 24px 48px -12px rgba(0,0,0,.18);
    display:flex;overflow:hidden;
  }
  .mega-cats{
    width:236px;flex:none;border-right:1px solid var(--border);
    padding:14px;max-height:440px;overflow-y:auto;background:var(--light);
  }
  .mega-cat{
    display:block;width:100%;text-align:left;background:none;border:none;
    padding:10px 12px;border-radius:8px;margin-bottom:2px;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:13px;color:var(--slate);
    cursor:pointer;white-space:nowrap;transition:background .12s ease,color .12s ease;
  }
  .mega-cat:hover{background:#fff;color:var(--ink);}
  .mega-cat.active{background:#fff;color:var(--ink);box-shadow:inset 3px 0 0 var(--gold);}
  /* Sub-category buttons that sit under a .mega-cats-heading (Materials &
     Supplies) are indented and slightly lighter-weight than the heading
     above them, so the heading reads as a clear parent, not just another
     row in the same list. */
  .mega-cat--sub{padding-left:22px;font-weight:500;}
  .mega-cat--sub.active,.mega-cat--sub:hover{font-weight:600;}
  .mega-cats-heading{
    font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-800);padding:16px 12px 8px;
  }
  .mega-cats-heading:first-child{padding-top:2px;}
  .mega-cats-heading:not(:first-child){margin-top:8px;border-top:1px solid var(--border);}
  .mega-products{width:720px;flex:none;padding:24px 30px;max-height:440px;overflow-y:auto;}
  .mega-products-panel{display:none;}
  .mega-products-panel.active{display:block;}
  .mega-group + .mega-group{margin-top:22px;}
  .mega-group-heading{
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--slate-500);margin:0;
  }
  /* Groups with a real "href" (a type with its own child category page) get
     an always-visible "View All {short}" link next to the heading, instead
     of relying on a hover-only affordance -- Nik: a hover-only arrow "isn't
     intuitive... we can't leave it up to chance." .mega-group-head wraps
     both and carries the border/spacing .mega-group-heading used to carry
     alone, so groups without a link (Materials & Supplies) still look
     identical to before -- just wrapped in one extra row div. */
  .mega-group-head{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);
  }
  .mega-group-viewall{
    font-size:10.5px;font-weight:700;color:var(--ink);white-space:nowrap;flex:none;
    display:flex;align-items:center;gap:4px;border-bottom:2px solid var(--gold);
    padding-bottom:1px;transition:border-color .12s ease,color .12s ease;
  }
  .mega-group-viewall:hover{color:var(--slate);border-color:var(--gold-hover);}
  /* Groups with no link render .mega-group-heading as the sole, direct
     child of .mega-group (no .mega-group-head wrapper) -- that variant
     needs the border/spacing back, since the base rule above stripped it
     to margin:0 (avoiding a double border when nested inside .mega-group-
     head, where the wrapper itself already carries it). Higher specificity
     than the plain .mega-group-heading rule, so this always wins for the
     standalone case regardless of source order. */
  .mega-group > .mega-group-heading{
    margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);
  }
  .mega-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 14px;}
  .nav-item .mega-product{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0;gap:0;white-space:normal;}
  .mega-product-img{
    width:79px;height:79px;border-radius:8px;background:var(--light);
    border:1.5px dashed var(--border-strong);
    display:flex;align-items:center;justify-content:center;padding:4px;
    font-size:6.5px;font-weight:700;color:var(--slate-500);text-transform:uppercase;line-height:1.25;
    margin-bottom:8px;overflow:hidden;transition:border-color .12s ease,background .12s ease;
  }
  .mega-product:hover .mega-product-img{border-color:var(--gold);background:#fff;}
  .mega-product span{
    display:flex;align-items:flex-start;justify-content:center;
    width:150px;min-height:2.6em;
    font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3;
  }
  .nav-item .mega-cat-viewall{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:20px;
    width:fit-content;white-space:nowrap;
    font-weight:700;font-size:12px;color:var(--ink);text-align:center;
    background:var(--light);border:1.5px solid var(--border-strong);border-radius:var(--radius);
    padding:8px 16px;transition:border-color .12s ease,background .12s ease;
  }
  .nav-item .mega-cat-viewall:hover{border-color:var(--ink);background:#fff;}
  /* Flat dropdown's own "View All" footer link (Industries) -- unlike the
     per-category .mega-cat-viewall pills above (one per rail category,
     naturally left-aligned inline pills inside a narrow products column),
     the flat panel has no rail/columns to sit alongside, just one 420px-wide
     link grid -- so this variant stretches full-width as a single footer
     row instead, reading as "done browsing, see the whole list" rather than
     a per-item action. */
  .nav-item .mega-flat-viewall{display:flex;width:100%;margin-top:16px;}
  .nav-item .mega-finder-cta{
    display:flex;align-items:center;gap:8px;margin-top:18px;
    width:100%;box-sizing:border-box;white-space:normal;
    font-weight:700;font-size:12.5px;color:var(--ink);text-align:left;
    background:var(--gold-tint);border:1.5px solid var(--gold);border-radius:var(--radius);
    padding:12px 16px;transition:background .12s ease,border-color .12s ease;
  }
  .nav-item .mega-finder-cta:hover{background:var(--gold);border-color:var(--gold-hover);}

  /* Flat dropdown variant -- Industries (and any future simple category
     list that doesn't need a rail + product-preview panel). Reuses the
     same .mega-panel/.mega-panel-inner wrapper and JS (open/close, hover,
     viewport-edge repositioning) as the Machines/Materials mega-menus for
     free, since that JS only ever looks for a .dd trigger + .mega-panel --
     it doesn't require the rail/product markup to exist. This modifier
     just swaps the inner layout from the 950px rail+products flex row to
     a compact link grid. */
  .mega-panel--flat .mega-panel-inner{display:block;width:420px;padding:20px;}
  /* Narrow + single-column variant -- Resources & Tools (3 items) would
     look lopsided in the 2-col grid sized for Industries' 8. */
  .mega-panel--flat.mega-panel--narrow .mega-panel-inner{width:290px;}
  .flat-dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
  .flat-dd-grid--1col{grid-template-columns:1fr;}
  .flat-dd-grid a{
    display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;
    font-weight:600;font-size:13.5px;color:var(--ink);
    transition:background .12s ease;
  }
  .flat-dd-grid a svg{color:var(--slate-500);transition:color .12s ease;}
  .flat-dd-grid a:hover{background:var(--light);}
  .flat-dd-grid a:hover svg{color:var(--ink);}

  @media (max-width:1080px){.mega-panel{display:none !important;}}
  .nav-search{
    display:flex;align-items:center;gap:8px;
    border:1.5px solid var(--border-strong);border-radius:var(--radius);
    padding:9px 14px;font-size:13.5px;color:var(--slate-500);min-width:190px;
  }
  .navlinks-mobile-toggle{display:none;}
  @media (max-width:1080px){
    .navlinks,.nav-search{display:none;}
    /* Below 1080px the mobile top bar (.mobile-topbar) takes over as the
       entire header -- so the desktop announcement bar, logo/CTA row and
       grey quicknav row (Pallet Wrapper Machine Finder / Account / Rent a
       Machine / Locations) all need to disappear completely here too, not
       just the nav links inside them, or both headers stack on top of each
       other. */
    .annbar,header{display:none;}
  }

  /* ---------- Search / help bar ---------- */
  /* Nik, Sep 2026: header colour concept round 2 -- quicknav now matches
     the annbar's solid yellow instead of light grey, so both the top and
     bottom bars bracket the white logo/nav row in AWC yellow. Search input
     gets an explicit cream fill so it still reads as a distinct field
     against the yellow background (it had no background before, relying
     on the page's white/grey backdrop showing through). */
  .quicknav{background:var(--light);border-bottom:1px solid var(--border);}
  .quicknav .wrap{display:flex;align-items:center;gap:32px;padding:12px 32px;}
  .logo-spacer{width:170px;flex:none;}
  /* Nik, Sep 2026: "change the Pallet Wrapper Machine Finder text to a
     button... instead of a check icon, show an icon of a pallet wrapper" --
     was a plain text link with a checkbox/tick icon and a fixed 170px
     logo-spacer width (to align under the logo column); now a real bordered
     pill button that sizes to its own content, with a custom wrapped-pallet
     icon (box + wrap bands sitting on a pallet deck) instead of the tick. */
  .audit-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.3;padding:9px 16px;border:1.5px solid var(--border-strong);border-radius:var(--radius);background:#fff;white-space:nowrap;transition:border-color .15s ease,background .15s ease;}
  .audit-link:hover{border-color:var(--ink);background:var(--light);}
  .search-col{display:flex;align-items:center;gap:16px;flex:1;}
  .need-help{font-size:13px;font-weight:600;color:var(--slate);white-space:nowrap;flex:none;}
  .need-help b{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;}
  .quicknav .nav-search{margin:0;flex:1;min-width:0;}
  .util-links{display:flex;align-items:center;gap:18px;margin-left:auto;}
  .util-links a{font-size:12.5px;font-weight:600;color:var(--slate);display:flex;align-items:center;gap:5px;white-space:nowrap;}
  .util-links a:hover{color:var(--ink);}

  /* Locations -- small dropdown (Melbourne / Sydney / Brisbane), same
     family as the util-links text links but with a panel instead of a
     single href, since each city gets its own page. Right-aligned to its
     own trigger (not viewport-relative like the mega-panels) since it's
     already the right-most item in the row, so a right:0 anchor keeps it
     on-screen at every width without needing JS boundary correction. */
  .util-dd{position:relative;}
  .util-dd-trigger{
    font-family:'Plus Jakarta Sans',sans-serif;background:none;border:none;padding:0;cursor:pointer;
    font-size:12.5px;font-weight:600;color:var(--slate);display:flex;align-items:center;gap:5px;white-space:nowrap;
  }
  .util-dd-trigger:hover{color:var(--ink);}
  .util-dd-trigger svg{transition:transform .15s ease;}
  .util-dd.open .util-dd-trigger{color:var(--ink);}
  .util-dd.open .util-dd-trigger svg:last-child{transform:rotate(180deg);}
  .util-dd-panel{
    position:absolute;top:100%;right:0;margin-top:12px;min-width:150px;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:0 20px 40px -12px rgba(0,0,0,.18);padding:8px;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease;z-index:150;
  }
  .util-dd.open .util-dd-panel{opacity:1;visibility:visible;pointer-events:auto;}
  .util-dd-panel a{display:block;padding:9px 10px;border-radius:6px;font-size:13px;font-weight:600;color:var(--ink);}
  .util-dd-panel a:hover{background:var(--light);}


  /* ---------- Mobile top bar (replaces the desktop 3-row header below 1080px) ---------- */
  .mobile-topbar{display:none;}
  @media (max-width:1080px){
    .mobile-topbar{
      display:flex;align-items:center;gap:14px;height:64px;
      padding:0 20px;border-bottom:1px solid var(--border);background:var(--white);
    }
    .mobile-topbar .logo-mark{width:auto;flex:none;}
    .mobile-topbar .logo-mark img{height:28px;}
    .mobile-topbar-search{
      flex:1;display:flex;align-items:center;gap:8px;min-width:0;
      border:1.5px solid var(--border-strong);border-radius:var(--radius);
      padding:8px 12px;font-size:13px;color:var(--slate-500);
    }
    .mobile-topbar-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .mnav-toggle{
      flex:none;background:none;border:none;padding:6px;margin:-6px;color:var(--ink);
      display:flex;align-items:center;justify-content:center;cursor:pointer;
    }
  }

  /* ---------- Mobile drawer ---------- */
  .mnav-backdrop{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;
    opacity:0;transition:opacity .2s ease;
  }
  .mnav-backdrop.open{display:block;opacity:1;}
  .mnav-drawer{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,86vw);
    background:#fff;z-index:301;box-shadow:-16px 0 40px rgba(0,0,0,.2);
    display:flex;flex-direction:column;
    transform:translateX(100%);transition:transform .22s ease;
  }
  .mnav-backdrop.open .mnav-drawer{transform:translateX(0);}
  .mnav-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;border-bottom:1px solid var(--border);flex:none;
  }
  .mnav-head img{height:26px;}
  .mnav-close{background:none;border:none;padding:6px;margin:-6px;color:var(--ink);cursor:pointer;}
  .mnav-body{flex:1;overflow-y:auto;padding:14px 18px 24px;}
  .mnav-search{
    display:flex;align-items:center;gap:8px;
    border:1.5px solid var(--border-strong);border-radius:var(--radius);
    padding:10px 14px;font-size:13.5px;color:var(--slate-500);margin-bottom:16px;
  }
  .mnav-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
  .mnav-item{border-bottom:1px solid var(--border);}
  .mnav-item-toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:none;border:none;padding:15px 2px;font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:700;font-size:14.5px;color:var(--ink);cursor:pointer;text-align:left;
  }
  .mnav-item-toggle svg{transition:transform .15s ease;flex:none;}
  .mnav-item.open .mnav-item-toggle svg{transform:rotate(180deg);}
  .mnav-item > a.mnav-item-toggle{display:flex;}
  .mnav-panel{max-height:0;overflow:hidden;transition:max-height .22s ease;}
  .mnav-item.open .mnav-panel{max-height:4000px;}
  .mnav-subitem{
    display:flex;align-items:center;gap:10px;padding:11px 2px 11px 14px;font-size:13.5px;font-weight:600;
    color:var(--slate);border-top:1px solid var(--border);
  }
  .mnav-subitem svg{color:var(--slate-500);flex:none;}
  .mnav-subitem:first-child{border-top:none;}
  /* Nested child-category accordion level (Aug 2026) -- one level inside
     .mnav-panel, for categories with real child groups (e.g. Pallet
     Wrappers). Same open/close mechanics as .mnav-item-toggle above, at a
     smaller scale, so it reads as a step down in hierarchy. */
  .mnav-catlevel{border-top:1px solid var(--border);}
  .mnav-catlevel:first-child{border-top:none;}
  .mnav-catlevel-toggle{
    width:100%;display:flex;align-items:center;gap:10px;
    background:none;border:none;padding:11px 2px 11px 14px;
    font-size:13.5px;font-weight:600;color:var(--slate);cursor:pointer;text-align:left;
  }
  .mnav-catlevel-toggle svg:first-child{color:var(--slate-500);flex:none;}
  .mnav-catlevel-toggle span{flex:1;}
  .mnav-catlevel-toggle svg:last-child{flex:none;transition:transform .15s ease;}
  .mnav-catlevel.open .mnav-catlevel-toggle{color:var(--ink);}
  .mnav-catlevel.open .mnav-catlevel-toggle svg:last-child{transform:rotate(180deg);}
  .mnav-catlevel-panel{max-height:0;overflow:hidden;transition:max-height .2s ease;padding-left:24px;}
  .mnav-catlevel.open .mnav-catlevel-panel{max-height:600px;}
  .mnav-grouplink{
    display:block;padding:9px 2px;font-size:12.5px;font-weight:600;
    color:var(--slate);border-top:1px solid var(--border);
  }
  .mnav-grouplink:first-child{border-top:none;}
  .mnav-cat-viewall-sub{
    display:block;padding:9px 2px;font-size:12px;font-weight:700;color:var(--ink);
    border-top:1px solid var(--border);
  }
  /* Section headings inside a mobile accordion panel (Materials & Supplies) --
     same contrast idea as the desktop rail's .mega-cats-heading, so the
     grouping reads the same on both breakpoints. */
  .mnav-sub-heading{
    font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-800);padding:14px 2px 8px;
  }
  .mnav-sub-heading:first-child{padding-top:10px;border-top:none;}
  .mnav-sub-heading:not(:first-child){margin-top:4px;border-top:1px solid var(--border);}
  .mnav-viewall{
    display:block;padding:12px 2px;font-size:13px;font-weight:700;color:var(--ink);
    border-top:1px solid var(--border);
  }
  .mnav-cta{margin:18px 0 6px;}
  .mnav-cta .btn-primary{width:100%;justify-content:center;}
  .mnav-utils{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);
    display:flex;flex-direction:column;gap:12px;}
  .mnav-utils a{font-size:13px;font-weight:600;color:var(--slate);display:flex;align-items:center;gap:8px;}
  /* Locations -- inline expand within the utils list (Melbourne / Sydney /
     Brisbane), same open/close mechanics as the .mnav-item accordions
     above but styled to match the lighter utils rows it lives among. */
  .mnav-util-dd-toggle{
    width:100%;border:none;background:none;padding:0;cursor:pointer;text-align:left;
    font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;color:var(--slate);
    display:flex;align-items:center;gap:8px;
  }
  .mnav-util-dd-toggle svg:last-child{margin-left:auto;transition:transform .15s ease;}
  .mnav-util-dd.open .mnav-util-dd-toggle{color:var(--ink);}
  .mnav-util-dd.open .mnav-util-dd-toggle svg:last-child{transform:rotate(180deg);}
  .mnav-util-dd-panel{max-height:0;overflow:hidden;transition:max-height .2s ease;padding-left:22px;}
  .mnav-util-dd.open .mnav-util-dd-panel{max-height:200px;margin-top:10px;}
  .mnav-util-dd-panel a{display:block;padding:8px 0;font-size:13px;font-weight:600;color:var(--ink);}
  .mnav-contact{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);
    font-size:13px;color:var(--slate-500);}
  .mnav-contact a{color:var(--ink);font-weight:700;display:block;margin-top:4px;}

  /* ---------- Hero ---------- */
  .hero{background:#fff;color:var(--ink);position:relative;overflow:visible;}
  .hero .eyebrow{color:var(--slate-500);}
  .hero .wrap{max-width:1680px;margin-left:max(0px, (100vw - var(--maxw))/2);margin-right:0;display:grid;grid-template-columns:600px 1fr;gap:0px;padding-top:132px;padding-bottom:48px;align-items:start;}
  .hero .wrap>div:first-child{max-width:560px;position:relative;z-index:1;}
  .hero-visual{width:100%;height:550px;margin-top:-60px;margin-left:-160px;margin-right:calc(-1 * max(0px, (100vw - 1680px)/2 + 32px));border-radius:0;overflow:hidden;}
  .hero-visual.ph{color:#7C7C7C;border-color:#3A3A3A;}
  @media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding-top:48px;padding-bottom:44px;}.hero .wrap>div:first-child{max-width:none;}.hero-visual{height:280px;margin-right:0;}}
  .hero h1{font-size:clamp(36px,4.6vw,54px);color:var(--ink);margin-top:14px;}
  .hero h1 em{font-style:normal;color:var(--gold);}
  .hero p.lede{font-size:17px;color:var(--slate);max-width:520px;margin-top:16px;}
  .hero .cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
  
  /* ---------- Hero Awards strip -- moved back out of the Why AWC section
     to sit directly under the hero, per Nik's request. ---------- */
  .hero-awards{background:var(--light);border-bottom:1px solid var(--border);padding:32px 0;margin-top:-120px;position:relative;}
  .hero-awards .usp-awards{border-top:none;margin-top:0;padding-top:0;}

  /* ---------- Trust bar (Awards & Accreditations) ----------
     Formerly its own full-bleed strip directly under the hero; now lives
     inside the Why AWC section as .usp-awards (see that block below) --
     .trustbar-label/.award-row/.award-badge stay here since they're still
     the classes that render the actual content. */
  .trustbar-label{font-size:11px;}
  .award-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;}
  .award-badge{width:150px;height:56px;font-size:10px;letter-spacing:.03em;}

  /* ---------- Manufacturer logo marquee (Nik, Sep 2026: same rotating
     OEM-logo ticker built for food-industry.html, now placed directly under
     the homepage hero in place of the old static awards row -- Awards &
     Accreditations moved down to the .brand-logos slot instead, as a static
     row. Full-bleed, no max-width wrapper, so the item set is repeated 8x
     (48 logo spans) and the keyframe moves -12.5% (=-100%/8) per loop --
     this is the same fix applied on the Food page so the strip always
     overflows the viewport and never shows a blank gap on wide screens. */
  .trustbar{background:var(--light);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 0;overflow:hidden;position:relative;}
  .trustbar::before,.trustbar::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;}
  .trustbar::before{left:0;background:linear-gradient(90deg,var(--light),rgba(248,248,248,0));}
  .trustbar::after{right:0;background:linear-gradient(270deg,var(--light),rgba(248,248,248,0));}
  .trustbar-track{display:flex;align-items:center;width:max-content;animation:trustbar-scroll 32s linear infinite;}
  .trustbar:hover .trustbar-track{animation-play-state:paused;}
  @keyframes trustbar-scroll{from{transform:translateX(0);}to{transform:translateX(-12.5%);}}
  .trustbar-logo-item{display:inline-flex;align-items:center;justify-content:center;padding:0 40px;}
  .trustbar-logo-item img{height:34px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(100%);opacity:.75;transition:filter .15s ease,opacity .15s ease;}
  .trustbar:hover .trustbar-logo-item img{filter:none;opacity:1;}
  @media (prefers-reduced-motion:reduce){.trustbar-track{animation:none;overflow-x:auto;}}
  @media (max-width:600px){.trustbar-logo-item{padding:0 26px;}.trustbar-logo-item img{height:26px;}}

	/* Shared imagery blocks (split sections, perks row, location strip) */
  .sx-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .sx-split.rev .sx-split-img{order:2;}
  @media (max-width:900px){.sx-split{grid-template-columns:1fr;gap:28px;}.sx-split.rev .sx-split-img{order:0;}}
  .sx-split-img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;}
  .sx-split-copy h2{font-size:28px;margin-top:0;}
  .sx-split-copy > p{color:var(--slate-500);margin-top:12px;font-size:15px;max-width:52ch;}
  .sx-checks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .sx-checks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;}
  .sx-checks li strong{display:block;font-size:14.5px;}
  .sx-checks li span.t{color:var(--slate-500);font-size:13.5px;}
  .sx-chk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;margin-top:1px;}
  .sx-split-cta{margin-top:26px;}
  .sx-perks{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:28px;max-width:560px;}
  .sx-perk{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.3;}
  .sx-perk-ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--light);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink);}
  .sx-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:900px){.sx-why-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.sx-why-grid{grid-template-columns:1fr;}}
  .sx-loc-head{margin:44px 0 20px;font-size:20px;}
  .sx-loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media (max-width:700px){.sx-loc-grid{grid-template-columns:1fr;}}
  .sx-loc{margin:0;}
  .sx-loc-img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;}
  .sx-loc figcaption{font-size:13px;font-weight:700;margin-top:10px;color:var(--ink);}


  /* ---------- Section shell ---------- */
  section{padding:80px 0;}
  section.tight{padding:60px 0;}
  .section-head{max-width:640px;margin-bottom:36px;}
  .section-head h2{font-size:clamp(26px,3.2vw,38px);margin-top:12px;}
  .section-head p{color:var(--slate-500);font-size:15.5px;margin-top:14px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head.split{display:flex;align-items:flex-end;justify-content:space-between;max-width:none;gap:24px;flex-wrap:wrap;}

	/* ---------- CTA Cards -- NEW component ---------- */
  /* Distinct from the full-width .cta-strip / .cta-band already live on the
     homepage: a smaller, self-contained promo card for use in sidebars,
     end-of-article placements, or a 3-up grid on resource/category pages. */
  .cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media (max-width:860px){.cta-grid{grid-template-columns:1fr;}}
  .cta-card{border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;background:var(--light);display:flex;flex-direction:column;transition:border-color .15s ease;}
  .cta-card:hover{border-color:var(--gold);}
  .cta-card .cc-ic{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .cta-card h4{font-size:16.5px;font-weight:700;}
  .cta-card p{font-size:13px;color:var(--slate-500);margin-top:8px;line-height:1.5;flex:1;}
  .cta-card .btn-ghost{margin-top:16px;}

  /* ---------- Hero -- two-column (copy+CTAs left, enquiry form card +
     mini term tiles right), same grid pattern as the Contact Us hero but
     with the enquiry form itself in the right column instead of a
     placeholder photo (Nik, second-round feedback: "I would actually place
     the form in the hero for this section"). No eyebrow (Nik: "Remove
     eyebrow from hero section") -- headline sits directly at the top of the
     column. ---------- */
  .ram-hero{background:var(--ink);color:#fff;padding:64px 0 72px;}
  .ram-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:start;}
  @media (max-width:900px){.ram-hero-grid{grid-template-columns:1fr;}}
  .ram-hero-copy h1{color:#fff;font-size:clamp(30px,3.8vw,46px);margin-top:0;max-width:14ch;}
  .ram-hero-copy .lede{color:#B7B7B7;max-width:48ch;margin-top:16px;font-size:16px;}

  /* .ram-hero-copy .cta-row -- DEAD, no longer in the markup. Round 3
     (Nik): the two CTA buttons under the headline were removed outright --
     "Start Your Rental Enquiry" already sits one column over as the form's
     own heading, so a second CTA pair was redundant. Rule left documented
     (not deleted) per the standing dead-CSS convention, in case a CTA row
     is ever wanted back here. */
  .ram-hero-copy .cta-row{margin-top:30px;flex-wrap:wrap;gap:22px;}

  /* Enquiry form card, sitting directly in the dark hero, now alone in its
     column with no mini-terms below it (those moved to the left column,
     round 3) -- more room, so padding/gap opened up a little for cleaner,
     more even spacing between fields (Nik: "the elements in the form are
     not spaced evenly"). Stronger shadow lifts it off the dark background. */
  .ram-form.on-hero{box-shadow:0 30px 70px -20px rgba(0,0,0,.45);}
  .ram-hero-form-heading{font-size:17px;color:var(--ink);margin-bottom:2px;}
  .ram-hero-form-subnote{font-size:12.5px;color:var(--slate-500);margin-bottom:14px;line-height:1.5;}

  /* Term Flexibility -- round 3: relocated from under the form to under the
     hero lede on the left (Nik: "remove the two cards under the form...
     reduce in size, add an icon to each card and reduce copy"). Now sits
     on the dark hero background directly, so the cards switched from a
     solid white fill to a subtle translucent-white overlay treatment, with
     a small round icon chip above each title. */
  .ram-hero-terms-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;max-width:46ch;align-items:start;}
  @media (max-width:520px){.ram-hero-terms-row{grid-template-columns:1fr;}}
  .ram-hero-term-mini{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:8px 10px;}
  .ram-hero-term-mini .term-ic{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
  .ram-hero-term-mini h5{font-size:11.5px;color:#fff;line-height:1.25;}
  .ram-hero-term-mini p{font-size:10.5px;color:#B7B7B7;margin-top:2px;line-height:1.3;}

  /* ---------- When Renting Makes Sense ---------- */
  .ram-r2o{margin-top:36px;border:1px solid var(--border);border-radius:var(--radius);background:var(--gold-tint);padding:26px 28px;display:flex;align-items:flex-start;gap:18px;}
  .ram-r2o .cc-ic{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;}
  .ram-r2o h4{font-size:16px;}
  .ram-r2o p{font-size:13.5px;color:var(--slate);margin-top:6px;line-height:1.6;max-width:66ch;}
  @media (max-width:600px){.ram-r2o{flex-direction:column;}}

  /* ---------- How Renting Works ---------- */
  .ram-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px;}
  @media (max-width:860px){.ram-steps{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.ram-steps{grid-template-columns:1fr;}}
  .ram-step-num{width:38px;height:38px;border-radius:10px;background:var(--light);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:14px;}
  .ram-step h4{font-size:14.5px;}
  .ram-step p{font-size:12.5px;color:var(--slate-500);margin-top:6px;line-height:1.55;}

  /* ---------- What's Included ---------- */
  .ram-included{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;}
  @media (max-width:640px){.ram-included{grid-template-columns:1fr;}}
  .ram-inc-item{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;background:#fff;}
  .ram-inc-item .inc-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--ink);}
  .ram-inc-item h5{font-size:14px;}
  .ram-inc-item p{font-size:12.5px;color:var(--slate-500);margin-top:4px;line-height:1.5;}

  /* ---------- Term Flexibility ---------- */
  .ram-terms{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
  @media (max-width:640px){.ram-terms{grid-template-columns:1fr;}}
  .ram-term-tile{border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;background:var(--light);}
  .ram-term-tile h4{font-size:15px;}
  .ram-term-tile p{font-size:13px;color:var(--slate);margin-top:8px;line-height:1.6;}

  /* ---------- Picker + Enquiry Form -- reuses the .field/.field-row/
     .field select field-kit language Contact Us established (same class
     names, same look) but self-contained here rather than cross-imported,
     same "small stable CSS gets ported per-file" pattern as
     BASE_SECTION_CSS above. Two extra pieces the Contact form doesn't need:
     .ram-picker-row (the 2-up Category/Machine step) and select:disabled
     styling for the Machine dropdown before a category is chosen.

     .ram-form-section/.ram-form-wrap below are dormant -- left over from
     the form's original standalone full-width section (now embedded
     directly in the hero, see .ram-hero-grid above, per Nik's "place the
     form in the hero" feedback). Not deleted, same "leave dead CSS
     documented" convention as build_phone_banner()'s CSS in
     gen_contact_page.py, in case the form ever needs to move back out. ---------- */
  .ram-form-section{background:var(--light);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .ram-form-wrap{max-width:720px;margin:0 auto;}
  .ram-picker-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media (max-width:600px){.ram-picker-row{grid-template-columns:1fr;}}

  /* .ram-form is the outer white card (h3 + subnote + <form> as its only
     three direct children) -- NOT the field container. Bug found on
     review (Nik: "that didn't fix anything" after a first attempt at
     button spacing): the actual field rows/button/note all live INSIDE
     the nested <form> tag, so `.ram-form{gap:19px}` was only ever spacing
     the heading/subnote/form apart from each other, never the fields --
     and `.ram-form > button{margin-top:...}` could never match at all,
     since button isn't a direct child of .ram-form. Fixed by giving the
     <form> element itself the flex/gap layout, which is what actually
     evens out the field-row-to-field-row spacing Nik originally flagged
     ("elements in the form are not spaced evenly"). */
  .ram-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:34px 32px;}
  .ram-form form{display:flex;flex-direction:column;gap:18px;}

  /* Button sits inside the <form>, spaced from the field above it by the
     18px .ram-form form{gap} like everything else, plus an extra 10px on
     top (Nik: "CTA button on form needs more padding above") so the
     submit action reads as a distinct step, not just another field. */
  .ram-form form > button{align-self:stretch;justify-content:center;margin-top:10px;}
  .ram-form-note{font-size:12px;color:var(--slate-500);text-align:center;margin:0;}

  /* ---------- Machines Available for Rent -- real (placeholder) SKUs
     pulled from catp.PRODUCTS, one per wrapper type. Deliberately its own
     lighter card language (not catp's .prod-card, which is built for
     Add-to-Quote/purchase and carries a Quote Drawer JS dependency this
     page doesn't load) -- image placeholder, name, one spec line, and a
     "Rent This Machine" link that scrolls back to the on-page form rather
     than navigating away.

     Round 3 (Nik): moved to sit directly under the hero (was further down
     the page, after Why Rent With AWC), and changed from a 3-col/2-row
     grid to a single horizontally-scrolling row -- a "feed" rather than a
     fixed grid, so it reads as ongoing stocked inventory rather than a
     capped, finite set. Fixed-width cards + overflow-x:auto + scroll-snap
     so it scrolls cleanly on both desktop (drag/wheel) and touch. -- NEW
     */
  .ram-machines-row{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;padding-bottom:10px;margin-top:0;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
  .ram-machines-row::-webkit-scrollbar{height:6px;}
  .ram-machines-row::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px;}

  .ram-machine-card{flex:0 0 272px;scroll-snap-align:start;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;}
  .ram-machine-card .ram-machine-img{aspect-ratio:4/3;font-size:11px;}
  .ram-machine-card .ram-machine-body{padding:16px 18px 18px;}
  .ram-machine-card h5{font-size:14px;}
  .ram-machine-card .ram-machine-spec{font-size:12px;color:var(--slate-500);margin-top:4px;}
  .ram-machine-card .ram-machine-link{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--gold);}
  .ram-machine-card .ram-machine-link:hover{color:var(--slate);}
  .ram-machines-note{margin-top:20px;font-size:13px;color:var(--slate-500);}

  /* .ram-machines-grid -- DEAD, replaced by .ram-machines-row above (round
     3: single-row feed instead of a 2-row grid). Left documented per the
     standing dead-CSS convention. */
  .ram-machines-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;}
  @media (max-width:900px){.ram-machines-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.ram-machines-grid{grid-template-columns:1fr;}}

  /* ---------- Reviews -- compact cards, same language as Contact Us's
     small review-card-sm section. ---------- */
  .ram-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;}
  @media (max-width:860px){.ram-review-grid{grid-template-columns:1fr;}}
  .ram-review-card{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;background:#fff;}
  .ram-review-card .r-stars{color:var(--gold);font-size:12px;letter-spacing:1px;}
  .ram-review-card p{font-size:12.5px;color:var(--slate);margin-top:8px;line-height:1.5;}
  .ram-review-card .r-foot{display:flex;align-items:center;gap:8px;margin-top:12px;}
  .ram-review-card .r-avatar{width:26px;height:26px;border-radius:50%;background:var(--gold-tint);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--ink);flex:none;}
  .ram-review-card .r-name{font-size:12px;font-weight:700;color:var(--ink);}

  /* ---------- Rental page v4: category-page product cards + vertical "fully supported" cards + hero image placeholder ---------- */
.ram-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
@media (max-width:900px){.ram-card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.ram-card-grid{grid-template-columns:1fr;}}
.ram-card-grid .prod-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:0 6px 20px -8px rgba(0,0,0,.14);transition:box-shadow .15s ease,transform .15s ease;}
.ram-card-grid .prod-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.18);}
.ram-card-grid .prod-card .prod-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;border-bottom:1px solid var(--border);}
.ram-card-grid .prod-card .prod-img img{width:100%;height:100%;object-fit:cover;display:block;}
.ram-card-grid .prod-card .stock-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.ram-card-grid .prod-card .stock-badge .dot{width:7px;height:7px;border-radius:50%;background:#2E9E4F;flex:none;}
.ram-card-grid .prod-card .body{padding:18px 18px 20px;display:flex;flex-direction:column;}
.ram-card-grid .prod-card .cat{font-size:11px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em;}
.ram-card-grid .prod-card h4{font-size:18px;margin-top:8px;font-weight:800;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ram-card-grid .prod-card .spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);padding-bottom: 0;background: transparent;border-radius: 0;border-width: 1px 0 0 0;padding-left: 0;padding-right: 0;}
.ram-card-grid .prod-card .spec-item{font-size:11px;color:var(--slate-500);line-height:1.3;}
.ram-card-grid .prod-card .spec-item b{display:block;font-size:13px;color:var(--ink);font-weight:700;margin-top:2px;}
.ram-card-grid .prod-card .prod-actions{display:flex;gap:8px;margin-top:14px;padding-top: 0;}
.ram-card-grid .prod-card .prod-actions a{flex:1;justify-content:center;padding:10px 8px;font-size:13px;}
.ram-card-grid .prod-card .prod-actions .btn-primary{background:var(--ink);color:#fff;}
.ram-card-grid .prod-card .rent-link{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;font-weight:700;color:var(--slate-500);}
.ram-card-grid .prod-card .rent-link .dash{width:14px;height:3px;background:var(--gold);border-radius:2px;flex:none;}
.ram-hero-img{margin-top:32px;aspect-ratio:16/10;border-radius:var(--radius);font-size:12px;}
.ram-sup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px;}
@media (max-width:980px){.ram-sup-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.ram-sup-grid{grid-template-columns:1fr;}}
.ram-sup-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;}
.ram-sup-card .ph{aspect-ratio:4/3;border-radius:0;border-width:0 0 1px 0;font-size:11px;}
.ram-sup-card .body{padding:18px 18px 20px;}
.ram-sup-card h5{font-size:15px;}
.ram-sup-card p{font-size:13px;color:var(--slate-500);margin-top:6px;line-height:1.55;}

	/* ---------- Hero -- v2: photo-forward, no embedded form (Nik: "move the
     form to the bottom of the page"). Left: headline + lede + two trust
     chips + a single CTA scrolling down to the bottom form. Right: a large
     photo placeholder (AWC specialist on-site with a customer) -- imagery
     starts at the very top of the page now, not a form card. v4 (Nik:
     "reduce the height [of the hero image], and therefore reduce the
     height of the hero section"): photo aspect-ratio changed from a tall
     4/5 portrait to a shorter 4/3 landscape, matching the mobile hero
     photo's aspect-ratio (which was already 4/3 -- see MOBILE_EXTRA_CSS in
     gen_book_a_consultation_mobile.py) so desktop and mobile are now
     visually consistent. Since the hero's overall height is
     max(left-column content height, right-column photo height) (see
     render_book_a_consultation_desktop.py), shortening the photo directly
     shortens the whole hero section whenever the photo was the taller
     side. ---------- */
  .bac-hero{background:#fff;color:var(--ink);padding:64px 0 72px;border-bottom:1px solid var(--border);}
  .bac-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
  @media (max-width:900px){.bac-hero-grid{grid-template-columns:1fr;}}
  .bac-hero-copy h1{color:var(--ink);font-size:clamp(30px,3.8vw,46px);margin-top:0;max-width:16ch;}
  .bac-hero-copy .lede{color:var(--slate-500);max-width:50ch;margin-top:16px;font-size:16px;}
  .bac-hero-photo{aspect-ratio:4/3;}

  /* Two trust chips under the lede -- dark-hero-appropriate translucent
     card treatment, directly answering "obligation-free" and "on-site or
     phone" before the visitor has to go looking for the answer. */
  .bac-hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;max-width:48ch;align-items:start;}
  @media (max-width:520px){.bac-hero-chips{grid-template-columns:1fr;}}
  .bac-hero-chip{background:#3D3D3D;border:1px solid #3D3D3D;border-radius:var(--radius);padding:10px 12px;}
  .bac-hero-chip .term-ic{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
  .bac-hero-chip h5{font-size:12.5px;color:#fff;line-height:1.25;}
  .bac-hero-chip p{font-size:11px;color:#D2D2D2;margin-top:3px;line-height:1.35;}

  .bac-hero-cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

  /* ---------- What's Covered in Your Consultation -- v3 (Nik: "have one
     image left hand side, and then have the content to the right, stacked,
     as toggle content. Remove the remaining images in this section, I just
     want to feature one image."): a single fixed photo left, the 4 items
     as a right-hand accordion. Reuses the site's existing FAQ accordion
     classes (.faq-item/.faq-q/.faq-a, defined in catp.CSS) and its JS
     (already wired via querySelectorAll('.faq-q') in catp.JS, reused
     wholesale below) -- zero new JS needed, same "reuse an existing
     component" convention as everywhere else in this project. Deliberately
     un-numbered (no step badges) so it reads as "what's covered", not
     "step 1, step 2..." (Nik: "This page doesn't need a process
     section"). ---------- */
  .bac-covered-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start;}
  @media (max-width:860px){.bac-covered-grid{grid-template-columns:1fr;gap:28px;}}
  .bac-covered-photo{aspect-ratio:4/5;position:sticky;top:100px;}
  @media (max-width:860px){.bac-covered-photo{position:static;aspect-ratio:4/3;}}
  .bac-covered-toggle-list{border-top:1px solid var(--border);}
  .bac-covered-toggle-list .faq-item{border-bottom:1px solid var(--border);}
  .bac-covered-toggle-list .faq-q{font-size:16.5px;padding:22px 4px;}
  .bac-covered-toggle-list .faq-a{font-size:14px;max-width:none;padding-bottom:24px;}

  /* ---------- On Your Floor With AWC -- 3-image gallery band, real city
     captions. ---------- */
  .bac-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:860px){.bac-gallery-grid{grid-template-columns:1fr;}}
  .bac-gallery-img{aspect-ratio:4/3;}
  .bac-gallery-cap{margin-top:10px;font-size:12.5px;color:var(--slate-500);font-weight:600;}

  /* ---------- On-Site or Over the Phone -- Your Choice -- reuses the
     Elements Library's .cta-card component (imported via CTA_CARD_CSS
     above) at 2-up instead of its native 3-up .cta-grid, since there are
     exactly 2 formats. ---------- */
  .bac-format-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
  @media (max-width:640px){.bac-format-grid{grid-template-columns:1fr;}}
  .bac-format-note{margin-top:22px;font-size:13px;color:var(--slate-500);text-align:center;}

  /* ---------- What You Walk Away With -- outcome cards (3-up), same
     checklist-card visual language as a typical "What's Included" section
     elsewhere on the site, reused here for outcomes instead of inclusions. ---------- */
  .bac-walkaway-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:780px){.bac-walkaway-grid{grid-template-columns:1fr;}}
  .bac-walkaway-item{border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;background:#fff;}
  .bac-walkaway-item .inc-ic{width:34px;height:34px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:14px;}
  .bac-walkaway-item h5{font-size:14.5px;}
  .bac-walkaway-item p{font-size:12.5px;color:var(--slate-500);margin-top:6px;line-height:1.55;}

	/* ---------- Hero -- same "no embedded form" pattern Book a Consultation
     settled on (v2): copy + trust chips + single CTA left, a large photo
     placeholder right. This page doesn't need a category/machine picker
     (unlike Rent a Machine), so a hero-embedded form would just be extra
     friction ahead of the Service Types self-select section below. Photo
     aspect-ratio 4/3 from the start (not 4/5), matching the Book a
     Consultation v4 fix so every hero photo on the site reads consistently. ---------- */
  .rq-hero{background:#fff;color:var(--ink);padding:64px 0 72px;border-bottom:1px solid var(--border);}
  .rq-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
  @media (max-width:900px){.rq-hero-grid{grid-template-columns:1fr;}}
  .rq-hero-copy h1{color:var(--ink);font-size:clamp(30px,3.8vw,46px);margin-top:0;max-width:16ch;}
  .rq-hero-copy .lede{color:var(--slate-500);max-width:50ch;margin-top:16px;font-size:16px;}
  .rq-hero-photo{aspect-ratio:4/3;}

  .rq-hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;max-width:48ch;align-items:start;}
  @media (max-width:520px){.rq-hero-chips{grid-template-columns:1fr;}}
  .rq-hero-chip{background:#3D3D3D;border:1px solid #3D3D3D;border-radius:var(--radius);padding:10px 12px;}
  .rq-hero-chip .term-ic{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
  .rq-hero-chip h5{font-size:12.5px;color:#fff;line-height:1.25;}
  .rq-hero-chip p{font-size:11px;color:#D2D2D2;margin-top:3px;line-height:1.35;}

  .rq-hero-cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

  /* ---------- Service Types -- 4 tiles, reuses .cta-card (imported via
     CTA_CARD_CSS) inside a dedicated 4-up grid rather than the Elements
     Library's native 3-up .cta-grid, same "small stable CSS gets ported
     per-file" pattern as gen_rent_a_machine_page.py's .ram-steps. ---------- */
  .rq-types-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;}
  @media (max-width:900px){.rq-types-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.rq-types-grid{grid-template-columns:1fr;}}

  /* ---------- How It Works -- 4-step process strip, ported verbatim from
     gen_rent_a_machine_page.py's .ram-steps (same class shape, rq- prefix). ---------- */
  .rq-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px;}
  @media (max-width:860px){.rq-steps{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.rq-steps{grid-template-columns:1fr;}}
  .rq-step-num{width:38px;height:38px;border-radius:10px;background:var(--light);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:14px;}
  .rq-step h4{font-size:14.5px;}
  .rq-step p{font-size:12.5px;color:var(--slate-500);margin-top:6px;line-height:1.55;}

  /* ---------- What We Service -- 2-up, reuses .cta-card at 2-up like Book
     a Consultation's On-Site or Over the Phone format cards. ---------- */
  .rq-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
  @media (max-width:640px){.rq-service-grid{grid-template-columns:1fr;}}

  /* ---------- What Happens During Your Service -- 3-up outcome cards, same
     checklist-card visual language as Book a Consultation's "What You Walk
     Away With" (bac-walkaway-item), rq- prefixed here. ---------- */
  .rq-expect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:780px){.rq-expect-grid{grid-template-columns:1fr;}}
  .rq-expect-item{border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;background:#fff;}
  .rq-expect-item .inc-ic{width:34px;height:34px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:14px;}
  .rq-expect-item h5{font-size:14.5px;}
  .rq-expect-item p{font-size:12.5px;color:var(--slate-500);margin-top:6px;line-height:1.55;}

  /* ---------- Request a Service -- the enquiry form's home, a full-width
     section (v3: Service FAQs now sits below this, not above -- see
     catp.build_faq() at the end of BODY). Centred single-column layout
     (Nik: "remove the what to expect section. Make the form centred.") --
     the "What to Expect" trust-recap card that used to sit alongside the
     form is gone, and the form itself is now a centred column rather than
     a 2-up grid, so the section head is centred to match. ---------- */
  .rq-form-section .section-head{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
  .rq-form-wrap{max-width:640px;margin:0 auto;}
  .rq-form{display:flex;flex-direction:column;gap:16px;}

	/* Shared imagery blocks (split sections, perks row, location strip) */
  .sx-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .sx-split.rev .sx-split-img{order:2;}
  @media (max-width:900px){.sx-split{grid-template-columns:1fr;gap:28px;}.sx-split.rev .sx-split-img{order:0;}}
  .sx-split-img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;}
  .sx-split-copy h2{font-size:28px;margin-top:0;}
  .sx-split-copy > p{color:var(--slate-500);margin-top:12px;font-size:15px;max-width:52ch;}
  .sx-checks{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .sx-checks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;}
  .sx-checks li strong{display:block;font-size:14.5px;}
  .sx-checks li span.t{color:var(--slate-500);font-size:13.5px;}
  .sx-chk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;margin-top:1px;}
  .sx-split-cta{margin-top:26px;}
  .sx-perks{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:28px;max-width:540px;}
  @media (max-width:520px){.sx-perks{grid-template-columns:1fr;}}
  .sx-perk{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--ink);line-height:1.3;}
  .sx-perk-ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--light);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--ink);}
  .sx-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:900px){.sx-why-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.sx-why-grid{grid-template-columns:1fr;}}
  .sx-loc-head{margin:44px 0 20px;font-size:20px;}
  .sx-loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media (max-width:700px){.sx-loc-grid{grid-template-columns:1fr;}}
  .sx-loc{margin:0;}
  .sx-loc-img{aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;}
  .sx-loc figcaption{font-size:13px;font-weight:700;margin-top:10px;color:var(--ink);}

  .rq-toggle{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
  .rq-pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--border-strong);background:#fff;color:var(--ink);border-radius:999px;padding:11px 22px;font-weight:700;font-size:14px;transition:background .15s,border-color .15s,color .15s;}
  .rq-pill:hover{border-color:var(--ink);}
  .rq-pill.on{background:var(--ink);border-color:var(--ink);color:#fff;}
  .rq-pill-tick{display:none;color:var(--gold);}
  .rq-pill.on .rq-pill-tick{display:inline-flex;}
  .rq-toggle-hint{text-align:center;font-size:12.5px;color:var(--slate-500);margin:-6px 0 4px;}
  .rq-block{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;min-width:0;}
  .rq-block[hidden]{display:none;}
  .rq-block legend{font-size:15px;font-weight:800;padding:0;margin-bottom:14px;}
  .rq-divider{height:1px;background:var(--border);margin:4px 0;}
  .rq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
  .rq-chip input{position:absolute;opacity:0;pointer-events:none;}
  .rq-chip span{display:inline-block;border:1.5px solid var(--border-strong);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;background:#fff;cursor:pointer;transition:background .15s,border-color .15s;}
  .rq-chip input:checked + span{background:var(--gold);border-color:var(--gold);color:var(--ink);}
  .rq-chip input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px;}

  .sx-dark{background:#111;color:#fff;}
  .sx-dark .sx-split-copy h2{color:#fff;}
  .sx-dark .sx-split-copy > p{color:#C9C9C9;}
  .sx-dark .sx-checks li strong{color:#fff;}
  .sx-dark .sx-checks li span.t{color:#BDBDBD;}
  .rq-form-wrap{max-width:720px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:40px 44px;box-shadow:0 10px 36px rgba(0,0,0,.07);}
  @media (max-width:600px){.rq-form-wrap{padding:26px 20px;}}
  .rq-form{gap:20px;}
  .rq-fstep{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:800;color:var(--ink);padding-bottom:12px;border-bottom:1px solid var(--border);}
  .rq-step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;}
  .rq-block legend{display:flex;align-items:center;gap:12px;width:100%;font-size:16px;font-weight:800;padding:0 0 12px;margin-bottom:18px;border-bottom:1px solid var(--border);}
  .rq-form .field input,.rq-form .field select,.rq-form .field textarea{background-color:#FAFAFA;border-color:#D0D0D0;}
  .rq-form .field input:focus,.rq-form .field select:focus,.rq-form .field textarea:focus{background-color:#fff;box-shadow:0 0 0 3px rgba(255,222,0,.35);}
  .rq-form .req{color:#C62828;font-style:normal;font-weight:800;}
  .rq-form > button{align-self:stretch;width:100%;justify-content:center;padding:16px 26px;font-size:16px;margin-top:6px;}
  .rq-req-note{text-align:center;font-size:12px;color:var(--slate-500);margin:-6px 0 0;}
  .rq-req-note .req{color:#C62828;font-style:normal;font-weight:800;}

  .rq-phone-list{list-style:none;margin:10px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px;}
  .rq-phone-list a{font-weight:700;text-decoration:underline;}


  .rq-route-note{background:#FAFAFA;border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--radius);padding:14px 16px;margin:0 0 22px;font-size:13.5px;line-height:1.55;color:var(--slate-500);}
  .rq-route-note a{font-weight:700;color:var(--ink);text-decoration:underline;}



  /* ---------- Hero -- same "no embedded form" pattern Book a Consultation
     settled on (v2): copy + trust chips + single CTA left, a large photo
     placeholder right. This page doesn't need a category/machine picker
     (unlike Rent a Machine), so a hero-embedded form would just be extra
     friction ahead of the Service Types self-select section below. Photo
     aspect-ratio 4/3 from the start (not 4/5), matching the Book a
     Consultation v4 fix so every hero photo on the site reads consistently. ---------- */
  .bas-hero{background:#fff;color:var(--ink);padding:64px 0 72px;border-bottom:1px solid var(--border);}
  .bas-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
  @media (max-width:900px){.bas-hero-grid{grid-template-columns:1fr;}}
  .bas-hero-copy h1{color:var(--ink);font-size:clamp(30px,3.8vw,46px);margin-top:0;max-width:16ch;}
  .bas-hero-copy .lede{color:var(--slate-500);max-width:50ch;margin-top:16px;font-size:16px;}
  .bas-hero-photo{aspect-ratio:4/3;}

  .bas-hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;max-width:48ch;align-items:start;}
  @media (max-width:520px){.bas-hero-chips{grid-template-columns:1fr;}}
  .bas-hero-chip{background:#3D3D3D;border:1px solid #3D3D3D;border-radius:var(--radius);padding:10px 12px;}
  .bas-hero-chip .term-ic{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.12);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
  .bas-hero-chip h5{font-size:12.5px;color:#fff;line-height:1.25;}
  .bas-hero-chip p{font-size:11px;color:#D2D2D2;margin-top:3px;line-height:1.35;}

  .bas-hero-cta-row{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}

	/* ---------- Service Types -- 4 tiles, reuses .cta-card (imported via
     CTA_CARD_CSS) inside a dedicated 4-up grid rather than the Elements
     Library's native 3-up .cta-grid, same "small stable CSS gets ported
     per-file" pattern as gen_rent_a_machine_page.py's .ram-steps. ---------- */
  .bas-types-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;}
  @media (max-width:900px){.bas-types-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.bas-types-grid{grid-template-columns:1fr;}}

  /* ---------- How It Works -- 4-step process strip, ported verbatim from
     gen_rent_a_machine_page.py's .ram-steps (same class shape, bas- prefix). ---------- */
  .bas-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px;}
  @media (max-width:860px){.bas-steps{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.bas-steps{grid-template-columns:1fr;}}
  .bas-step-num{width:38px;height:38px;border-radius:10px;background:var(--light);border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--ink);margin-bottom:14px;}
  .bas-step h4{font-size:14.5px;}
  .bas-step p{font-size:12.5px;color:var(--slate-500);margin-top:6px;line-height:1.55;}

  /* ---------- What We Service -- 2-up, reuses .cta-card at 2-up like Book
     a Consultation's On-Site or Over the Phone format cards. ---------- */
  .bas-service-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
  @media (max-width:640px){.bas-service-grid{grid-template-columns:1fr;}}

  /* ---------- What Happens During Your Service -- 3-up outcome cards, same
     checklist-card visual language as Book a Consultation's "What You Walk
     Away With" (bac-walkaway-item), bas- prefixed here. ---------- */
  .bas-expect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:780px){.bas-expect-grid{grid-template-columns:1fr;}}
  .bas-expect-item{border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;background:#fff;}
  .bas-expect-item .inc-ic{width:34px;height:34px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:14px;}
  .bas-expect-item h5{font-size:14.5px;}
  .bas-expect-item p{font-size:12.5px;color:var(--slate-500);margin-top:6px;line-height:1.55;}

	/* ---------- Book Your Consultation -- the enquiry form's new home, a
     full-width section at the very bottom of the page (Nik: "move the form
     to the bottom of the page"). Two-column layout modelled directly on
     gen_contact_page.py's build_contact_form()/.contact-form-grid pattern
     (form left, a "What to Expect" trust-recap card right) rather than v1's
     white-card-on-dark-hero treatment, since the form is no longer sitting
     inside the hero. ---------- */
  .bac-form-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start;}
  @media (max-width:860px){.bac-form-grid{grid-template-columns:1fr;}}
  .bac-form{display:flex;flex-direction:column;gap:16px;}
  .bac-form > button{align-self:flex-start;margin-top:4px;}
  .bac-expect-card{border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;background:var(--light);}
  .bac-expect-card h4{font-size:15px;font-weight:700;margin-bottom:6px;}
  .bac-expect-card .info-row{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ink);
    padding:12px 0;border-top:1px solid var(--border);line-height:1.5;}
  .bac-expect-card .info-row:first-of-type{border-top:none;}
  .bac-expect-card .info-row svg{margin-top:2px;flex:none;}

  /* ---------- Request a Service -- the enquiry form's home, a full-width
     section (v3: Service FAQs now sits below this, not above -- see
     catp.build_faq() at the end of BODY). Centred single-column layout
     (Nik: "remove the what to expect section. Make the form centred.") --
     the "What to Expect" trust-recap card that used to sit alongside the
     form is gone, and the form itself is now a centred column rather than
     a 2-up grid, so the section head is centred to match. ---------- */
  .bas-form-section .section-head{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}
  .bas-form-wrap{max-width:640px;margin:0 auto;}
  .bas-form{display:flex;flex-direction:column;gap:16px;}
  .field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media (max-width:600px){.field-row{grid-template-columns:1fr;}}
  .field input,.field select,.field textarea{
    width:100%;box-sizing:border-box;
    font-family:inherit;font-size:14px;font-weight:400;color:var(--ink);
    border:1.5px solid var(--border-strong);border-radius:var(--radius);
    padding:11px 14px;background:#fff;
  }
  .field textarea{resize:vertical;min-height:88px;line-height:1.5;}
  .field select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    padding-right:36px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;background-position:right 14px center;
  }
  .field select:invalid{color:var(--slate-500);}
  .field input::placeholder,.field textarea::placeholder{color:var(--slate-500);font-weight:400;opacity:1;}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
  .bas-form > button{align-self:center;margin-top:4px;}

	.lmp-form .field input{background-color:#FAFAFA;border-color:#D0D0D0;}
  .lmp-form .field input:focus{background-color:#fff;box-shadow:0 0 0 3px rgba(255,222,0,.35);}
  
  .lmp-hero{background:linear-gradient(180deg,#fff 0%,var(--light) 100%);color:var(--ink);padding:64px 0 72px;}
  .lmp-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;}
  @media (max-width:900px){.lmp-hero-grid{grid-template-columns:1fr;}}
  .lmp-hero-copy h1{font-size:clamp(30px,3.3vw,40px);margin-top:12px;max-width:none;text-wrap:balance;}
  .lmp-hero-copy .lede{color:var(--slate-500);max-width:54ch;margin-top:16px;font-size:16px;}
  .lmp-bens{display:flex;flex-direction:column;gap:20px;margin-top:30px;}
  .lmp-ben{display:flex;gap:16px;align-items:flex-start;}
  .lmp-ben-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;}
  .lmp-ben h4{font-size:16px;margin:0 0 3px;}
  .lmp-ben p{font-size:14px;color:var(--slate-500);line-height:1.55;margin:0;max-width:52ch;}
  .lmp-cover-card{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--radius);padding:20px;margin-top:34px;box-shadow:0 10px 30px -18px rgba(0,0,0,.25);max-width:560px;}
  .lmp-cover-card h4{font-size:16px;margin:0 0 4px;}
  .lmp-cover-card p{font-size:13.5px;color:var(--slate-500);line-height:1.55;margin:0;}
  .lmp-cover{width:120px;flex:none;aspect-ratio:1055/1491;object-fit:cover;border-radius:6px;box-shadow:0 12px 24px -10px rgba(0,0,0,.4);display:block;}
  .lmp-form{background:#fff;border:1px solid var(--border);border-radius:14px;padding:34px 32px;box-shadow:0 30px 60px -28px rgba(0,0,0,.28);}
  .lmp-form-heading{font-size:20px;color:var(--ink);}
  .lmp-form-subnote{font-size:13.5px;color:var(--slate-500);margin-top:6px;margin-bottom:22px;line-height:1.5;}
  .lmp-form form{display:flex;flex-direction:column;gap:16px;}
  .lmp-form form > button{align-self:stretch;justify-content:center;margin-top:6px;}
  .lmp-form .req{color:#D93025;}
  .lmp-form-note{font-size:12px;color:var(--slate-500);text-align:center;margin-top:12px;}
  .lmp-form-pill{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:11px;border-radius:8px;background:#FFF9CC;border:1px solid #F1DE55;font-size:13px;font-weight:700;color:var(--ink);}
  .lmp-form-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--ink);}
  .lmp-inside-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:900px){.lmp-inside-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:520px){.lmp-inside-grid{grid-template-columns:1fr;}}
  .lmp-inside-grid .cc-ic{font-size:17px;font-weight:800;}

	/* Thank-you page -- white hero (matches Book a Consultation / Book a Service heroes), step cards and link cards. */
  .ty-hero{background:#fff;color:var(--ink);padding:72px 0 80px;text-align:center;border-bottom:1px solid var(--border);}
  .ty-hero .ty-check{width:60px;height:60px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
  .ty-hero h1{color:var(--ink);font-size:clamp(30px,3.8vw,46px);max-width:20ch;margin:0 auto;}
  .ty-hero .lede{color:var(--slate-500);max-width:54ch;margin:16px auto 0;font-size:16px;}
  .ty-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
  .ty-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
  @media (max-width:780px){.ty-steps{grid-template-columns:1fr;}}
  .ty-step{border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;background:#fff;}
  .ty-step .ty-num{font-size:13px;font-weight:800;color:var(--slate-500);letter-spacing:.06em;margin-bottom:10px;display:block;}
  .ty-step h5{font-size:14.5px;}
  .ty-step p{font-size:12.5px;color:var(--slate-500);margin-top:6px;line-height:1.55;}
  .ty-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
  @media (max-width:900px){.ty-links{grid-template-columns:1fr;}}
  .ty-links .cta-card .btn-ghost{margin-top:16px;display:inline-flex;}
  .ty-contact{margin-top:28px;font-size:14px;color:var(--slate-500);text-align:center;}
  .ty-contact a{color:var(--ink);font-weight:700;}
  .ty-ebook{padding:72px 0 88px;background:linear-gradient(180deg,#fff 0%,var(--light) 100%);}
  .ty-ebook .lede strong{color:var(--ink);}
  .ty-ebook-card{display:flex;gap:32px;align-items:center;text-align:left;max-width:640px;margin:44px auto 0;background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px;box-shadow:0 30px 60px -32px rgba(0,0,0,.3);}
  .ty-ebook-card img{width:150px;flex:none;aspect-ratio:1055/1491;object-fit:cover;border-radius:6px;box-shadow:0 14px 28px -12px rgba(0,0,0,.45);display:block;}
  .ty-ebook-info h3{font-size:22px;margin:10px 0 18px;}
  .ty-ebook-info .btn-primary{display:inline-flex;}
  .ty-ebook-note{font-size:12.5px;color:var(--slate-500);margin-top:14px;line-height:1.5;}
  @media (max-width:560px){.ty-ebook-card{flex-direction:column;text-align:center;}.ty-ebook-info .btn-primary{width:100%;justify-content:center;}}

  .csh-hero{background:linear-gradient(180deg,#fff 0%,var(--light) 100%);padding:64px 0 40px;text-align:center;}
  .csh-hero h1{font-size:clamp(32px,4vw,46px);margin:0;}
  .csh-hero .lede{color:var(--slate-500);max-width:60ch;margin:16px auto 0;font-size:16px;}
  .csh-list{padding:24px 0 80px;background:var(--light);}
  .csh-stack{display:flex;flex-direction:column;gap:28px;}
  .csh-stack .case-feature{background:#fff;}
  .case-feature{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  @media (max-width:860px){.case-feature{grid-template-columns:1fr;}}
  .case-feature-media{aspect-ratio:auto;min-height:320px;border-radius:0;}
  .case-feature-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;}
  .case-feature-body .logo-ph{display:inline-flex;align-self:flex-start;height:48px;width:auto;min-width:160px;padding:0;margin-bottom:16px;margin-left:0;white-space:nowrap;}
  .case-feature-body h3{font-size:24px;line-height:1.35;}
  .case-feature-body p{color:var(--slate);font-size:15px;margin-top:14px;max-width:48ch;}
  .case-feature-body .btn-primary{margin-top:20px;align-self:flex-start;}

  .cs-hero{background:linear-gradient(180deg,#fff 0%,var(--light) 100%);padding:64px 0 72px;}
  .cs-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
  @media (max-width:900px){.cs-hero-grid{grid-template-columns:1fr;}}
  .cs-hero-copy h1{font-size:clamp(30px,3.6vw,44px);margin-top:12px;max-width:20ch;text-wrap:balance;}
  .cs-hero-copy .lede{color:var(--slate-500);max-width:52ch;margin-top:16px;font-size:16px;}
  .cs-hero-logo{margin-top:32px;display:flex;align-items:center;gap:18px;}
  .cs-hero-logo-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500);}
  .cs-logo-ph{width:180px;height:64px;font-size:11px;}
  .cs-hero-img{aspect-ratio:4/3;width:100%;font-size:12px;}
  .cs-hero-img img {border-radius: var(--radius);}
  .cs-stats{background:var(--ink);color:#fff;padding:36px 0;}
  .cs-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  @media (max-width:800px){.cs-stats-grid{grid-template-columns:1fr 1fr;}}
  .cs-stat strong{display:block;font-size:clamp(28px,3.4vw,40px);font-weight:800;color:var(--gold);line-height:1.1;}
  .cs-stat span{display:block;font-size:13.5px;color:#C7C7C7;margin-top:6px;line-height:1.45;}
  .cs-layout{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:start;}
  @media (max-width:900px){.cs-layout{grid-template-columns:1fr;gap:32px;}}
  .cs-facts{background:var(--light);border:1px solid var(--border);border-left:4px solid var(--gold);border-radius:var(--radius);padding:24px;position:sticky;top:24px;}
  .cs-facts h4{font-size:16px;margin:0 0 14px;}
  .cs-fact{padding:11px 0;border-top:1px solid var(--border);}
  .cs-fact span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500);}
  .cs-fact strong{display:block;font-size:14.5px;margin-top:3px;}
  .cs-facts-link{display:inline-flex;margin-top:14px;}
  .cs-story h2{font-size:26px;margin:34px 0 12px;}
  .cs-story h2:first-child{margin-top:0;}
  .cs-story p{font-size:15.5px;line-height:1.7;color:var(--slate);margin:0 0 14px;max-width:68ch;}
  .cs-inline-img{aspect-ratio:16/9;width:100%;margin:26px 0 6px;}
  .cs-list{margin:6px 0 0;padding-left:20px;max-width:68ch;}
  .cs-list li{font-size:15.5px;line-height:1.65;color:var(--slate);margin-bottom:8px;}
  .cs-quote{background:#fff;padding:56px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .cs-quote blockquote{margin:0 auto;max-width:760px;font-size:clamp(17px,1.8vw,20px);font-weight:300;font-style:italic;line-height:1.6;color:var(--slate);text-align:center;}
  .cs-quote-by{text-align:center;margin-top:18px;font-size:13.5px;font-style:normal;color:var(--slate-500);}
  .cs-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media (max-width:700px){.cs-gallery{grid-template-columns:1fr;}}
  .cs-gal{aspect-ratio:4/3;}
  .cs-cta{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  .cs-cta h2{font-size:28px;margin:0 0 8px;}
  .cs-cta p{color:var(--slate-500);margin:0;max-width:56ch;font-size:15px;}
  .cs-cta-btns{display:flex;gap:14px;flex-wrap:wrap;}

	@media (max-width:600px){
    /* Section rhythm: desktop's generous vertical padding is tightened for
       a phone-height viewport -- same treatment as every other mobile
       mockup in this project, no content changes. */
    section.tight{padding:36px 0;}
    .section-head{margin-bottom:20px !important;}
    .section-head h2{font-size:24px !important;}

    /* Hero -- tighten the dark section's own padding/type-scale to true
       phone width, same treatment as every other dark hero in this
       project. Trust chips under the lede already drop to 1 column at
       <=520px via desktop's own .rq-hero-chips rule -- just tighten their
       top margin here so they don't float too far from the lede on a
       short phone viewport. Photo placeholder stays a normal block below
       the copy (the hero grid is already 1 column at <=900px). */
    .rq-hero{padding-top:40px;padding-bottom:36px;}
    .rq-hero h1{font-size:26px;}
    .rq-hero .lede{margin-top:12px;}
    .rq-hero-chips{margin-top:20px !important;}
    .rq-hero-photo{margin-top:28px;}

    /* What Kind of Service Do You Need: .rq-types-grid already 1 column at
       <=520px -- tighten card padding to match every other card's
       phone-width treatment. */
    .cta-card{padding:22px 20px;}

    /* How Booking a Service Works: .rq-steps already 1 column at <=520px --
       nothing further needed, already covered.

       What We Service: .rq-service-grid already 1 column at <=640px --
       cards use the same .cta-card padding tightened above.

       What Happens During Your Service: .rq-expect-grid already 1 column
       at <=780px -- tighten item padding to match. */
    .rq-expect-item{padding:18px 18px;}

    /* Request a Service: .rq-form-wrap is already a centred single column
       (v2) -- just full-width the submit button, same treatment as every
       other form kit in this project. */
    .rq-form > button{width:100%;justify-content:center;}
  }

  /* ---------- COMPONENT: Category Icon Tile (browse by category, toggled) ---------- */
  .browse-strip{padding:56px 0;border-bottom:1px solid var(--border);}
  .cat-tabs{
    display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
    width:fit-content;margin:0 auto 32px;
    background:var(--light);border:1px solid var(--border);border-radius:999px;padding:6px;
  }
  .cat-tab{
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;
    padding:10px 20px;border-radius:999px;border:none;
    background:transparent;color:var(--slate);cursor:pointer;transition:all .15s ease;
  }
  .cat-tab:hover{color:var(--ink);}
  .cat-tab.active{background:var(--ink);color:var(--white);}
  .cat-panel[hidden]{display:none;}
  /* Card size doubled site-wide for this component (Nik/Mario review, Aug 2026:
     "cards need to be double in size... client wants these to be prominent") --
     covers the Browse Our Catalogue grid (.tile-grid) AND the Packaging
     Materials horizontal scroll strip below (.tile-scroll .tile-track), since
     both reuse this same .cat-tile/.ic/.accent markup. One resize, both
     sections match, per Mario's request that the Materials cards be brought
     in line with the Browse Our Catalogue cards. */
  /* Browse Our Catalogue grid specifically (not .tile-scroll below, which
     stays a horizontal-scroll strip): fixed 3-column layout per Mario
     review, Aug 2026 ("cards in a 3 X 3 setup") -- .tile-grid only ever
     renders inside the browse-strip's 3 tab panels, so this doesn't touch
     the Packaging Materials scroll strip further down the page, which
     reuses the same .cat-tile markup in a different container. Tile width
     is pinned to the same 240px "doubled" size approved last round (rather
     than letting each tile stretch to fill its 1/3 column, which would
     leave the icon looking lost in an overly wide cell) and centred within
     its column. */
  /* Tile spacing tightened (Mario review, Aug 2026: "reduce the padding
     between each tile") -- was 32px/28px when the cards were first doubled
     in size, now snugged up now that the 3-column layout is locked in. */

  .tile-grid{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;gap:22px 20px;}
	.cat-panel .tile-grid {
	    justify-items: stretch;
		gap: 16px 16px;
	}
  .tile-grid .cat-tile{width:300px;}
	.cat-panel .tile-grid .cat-tile{width:100%;flex: 1 1 auto;}
  .cat-tile{flex:0 0 300px;text-align:center;}
  .cat-tile .ic{
    width:220px;height:220px;margin:0 auto 14px;
    background:var(--light);border:1px solid var(--border);
    border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;color:var(--slate-500);text-transform:uppercase;
    transition:border-color .15s ease, background .15s ease;overflow:hidden;
  }
  .cat-panel .cat-tile .ic{
	    width: 100%;
    	height: 270px;
	}
	.cat-panel .ic img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
  .cat-tile:hover .ic{border-color:var(--gold);background:#fff;}
  .cat-tile .accent{width:22px;height:4px;background:var(--gold);margin:0 auto 12px;border-radius:2px;}
  .cat-tile span{font-size:16px;font-weight:600;color:var(--ink);display:block;line-height:1.3;}
  /* View All now renders as a real CTA button rather than an underlined text
     link (Mario review, Aug 2026: "turn the View All hyperlink ... into a
     CTA button"), with extra top margin so it reads as a deliberate,
     separated action beneath the grid rather than a caption clinging to it. */
  .cat-viewall-row{text-align:center;margin-top:40px;}
  .cat-tile-viewall{
    display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    font-weight:700;font-size:14.5px;color:var(--ink);
    border:1.5px solid var(--border-strong);border-radius:var(--radius);
    padding:12.5px 26px;
    transition:border-color .15s ease,background .15s ease;
  }
  .cat-tile-viewall:hover{border-color:var(--ink);background:var(--light);}
  @media (max-width:720px){
    /* Not a literal doubling on phone width (92px doubled = 184px would only
       fit ~1.5 tiles across a ~350px content area) -- scaled up proportionally
       instead so the 6-tile Packaging Machines grid still reads as a grid
       rather than one tile per row. 3 columns is also too tight at phone
       width, so Browse Our Catalogue drops to 2 columns down here. */
    .tile-grid{grid-template-columns:repeat(2,1fr);gap:14px 12px;}
    .tile-grid .cat-tile{width:150px;}
    .cat-tile{flex-basis:150px;}
    .cat-tile .ic{width:120px;height:120px;font-size:11px;}
    .cat-tile span{font-size:13.5px;}
  }

  /* Single-row, manually-scrollable variant of the tile grid (e.g. Packaging Materials
     consumables) — same overflow-x carousel pattern as .prod-row.five, no auto animation. */
  .tile-scroll{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;}
  .tile-scroll .tile-track{display:flex;gap:20px;width:max-content;}
  .tile-scroll .cat-tile{scroll-snap-align:start;}

  /* ---------- COMPONENT: Why Partner With AWC (USP accordion) ---------- */
  .usp{padding:80px 0;background:var(--light);border-bottom:1px solid var(--border);}
  .usp .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  @media (max-width:900px){.usp .wrap{grid-template-columns:1fr;}}
  .usp-visual{aspect-ratio:16/10;}
  .usp-content h2{margin-bottom:22px;}
  .usp-accordion{border-top:1px solid var(--border);}
  .usp-item{border-bottom:1px solid var(--border);}
  .usp-toggle{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:none;border:none;padding:20px 2px;cursor:pointer;text-align:left;
    font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15.5px;color:var(--ink);
  }
  .usp-toggle .chev{transition:transform .2s ease;flex:none;color:var(--slate-500);}
  .usp-item.active .usp-toggle .chev{transform:rotate(180deg);color:var(--ink);}
  .usp-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .usp-item.active .usp-panel{max-height:160px;}
  .usp-panel p{font-size:14.5px;color:var(--slate);line-height:1.6;margin:0;padding:0 2px 22px;max-width:44ch;}
  /* Awards & Accreditations strip, relocated here from underneath the hero
     (Mario review, Aug 2026: "moved into the Why AWC section ... sit under
     the content toggle") -- sits below the full two-column .wrap (image +
     accordion), spanning the section's full width, with its own top border
     as a clean break from the accordion above rather than blending into it. */
  .usp-awards{border-top:1px solid var(--border);margin-top:56px;padding-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px;}

  /* ---------- COMPONENT: Category Spotlight Block ---------- */
  .spotlight{padding:72px 0;border-bottom:1px solid var(--border);}
  .spotlight .top{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;margin-bottom:36px;}
  @media (max-width:900px){.spotlight .top{grid-template-columns:1fr;}}
  /* Stacked variant: eyebrow, headline, description, and CTAs all in one column
     (description sits directly under the headline instead of beside it). */
  .spotlight .top.stacked{display:block;max-width:680px;}
  .spotlight .top.stacked .copy{margin-top:16px;}
  .spotlight h2{font-size:24px;margin-top:10px;}
  .spotlight .cta-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap;}
  .spotlight .copy p{color:var(--slate);font-size:15px;margin-top:12px;}
  .spotlight .copy p:first-child{margin-top:0;}
  .spotlight .stat-list{display:flex;flex-direction:column;gap:14px;}
  .spotlight .stat-item{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--slate);}
  .spotlight .stat-item b{color:var(--ink);}
  .spotlight .stat-item .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);margin-top:7px;flex:none;}

  /* Reusable CTA strip — used for the "Book a Consult" prompt. Light-grey card treatment
     (not dark) so it reads as a prompt, not an overpowering block. Full width, low height. */
  .cta-strip{
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    background:var(--light);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius);
    padding:14px 28px;margin-top:36px;
  }
  .cta-strip .txt b{display:block;font-size:17px;font-weight:700;color:var(--ink);}
  .cta-strip .txt span{font-size:13.5px;color:var(--slate-500);display:block;margin-top:4px;max-width:56ch;}
  /* Team member photo beside the Book a Consult button (Mario review, Aug 2026:
     "add an image ... a team member, positioned next to the book a consult
     button") -- makes the recommendation feel like a real person, not a form. */
  .cta-strip-action{display:flex;align-items:center;gap:14px;}
  .cta-team-photo{width:84px;height:84px;border-radius:50%;flex:none;font-size:6.5px;line-height:1.2;padding:0;overflow:hidden;}

  /* ---------- COMPONENT: Featured Product Spotlight ---------- */
  /* Standalone section (not a strip) for a single hero product, e.g. MOTION 2.0 Mobile
     Wrapper: media left, name/description/CTA right. Swap .fp-media's contents for a real
     image or GIF once the asset is supplied. */
  /* Black background — deliberate: this section is a visual break in the page rhythm
     between Packaging Machines and Packaging Materials, not just another white/light card. */
  .featured-product{padding:72px 0;background:var(--ink);}
  .featured-product .fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  @media (max-width:900px){.featured-product .fp-grid{grid-template-columns:1fr;}}
  .featured-product .fp-media{
    position:relative;
    aspect-ratio:16/10;border-radius:var(--radius);
    background:repeating-linear-gradient(45deg,rgba(255,255,255,.05),rgba(255,255,255,.05) 10px,rgba(255,255,255,.09) 10px,rgba(255,255,255,.09) 20px);
    border:1px solid rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#C7C7C7;
    padding:16px;
  }
  .featured-product .fp-badge{
    position:absolute;top:14px;left:14px;
    display:inline-flex;align-items:center;gap:6px;
    background:var(--gold);color:var(--ink);
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    padding:6px 13px;border-radius:999px;
  }
  .featured-product .fp-badge-logo{height:11px;width:auto;display:block;}
  .featured-product .fp-content h2{font-size:24px;margin-top:10px;color:#fff;}
  .featured-product .fp-content p{color:#C7C7C7;font-size:15px;margin-top:12px;max-width:46ch;}
  .featured-product .fp-content .btn-primary{margin-top:22px;}
  .featured-product .fp-benefits{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap;}
  .featured-product .fpb-item{display:flex;align-items:center;gap:9px;}
  .featured-product .fpb-item svg{width:24px;height:24px;color:var(--gold);flex-shrink:0;}
  .featured-product .fpb-item span{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;}
  .featured-product .fpb-divider{width:1px;height:26px;background:rgba(255,255,255,.18);flex-shrink:0;}
  @media (max-width:520px){.featured-product .fp-benefits{gap:12px;}.featured-product .fpb-divider{display:none;}}

  /* ---------- COMPONENT: Product Mini Card ---------- */
  .prod-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
	.prod-row.three{grid-template-columns:repeat(3,1fr);}
  @media (max-width:960px){.prod-row{grid-template-columns:repeat(2,1fr);}.prod-row.three{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.prod-row{grid-template-columns:1fr;}.prod-row.three{grid-template-columns:repeat(1,1fr);}}
  .prod-card{border: 1px solid var(--border);border-radius: var(--radius);overflow: hidden;background: #fff;box-shadow: 0 6px 20px -8px rgba(0,0,0,.14);transition: box-shadow .15s ease,transform .15s ease;display: flex;flex-direction: column;height: 100%;}
  .prod-card:hover{box-shadow:0 16px 32px -12px rgba(0,0,0,.24);transform:translateY(-2px);}
  .prod-card .ph{position:relative;aspect-ratio:4/3;border-radius:0;border-width:0 0 1px 0;font-size:10px;}
	.prod-card .prod-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff;border-bottom:1px solid var(--border);}
  .prod-card .prod-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .prod-card .stock-badge{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
  .prod-card .stock-badge .dot{width:7px;height:7px;border-radius:50%;background:#2E9E4F;flex:none;}
  .prod-card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex: 1;}
  .prod-card .cat{font-size:11px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em;}
  /* Fixed 2-line reservation so every card's spec grid / buttons / rent link start at the
     same vertical position regardless of how long the product name is. */
  .prod-card h4{font-size:19px;margin-top:8px;font-weight:800;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .prod-card .link{margin-top:10px;font-weight:700;font-size:11.5px;display:flex;align-items:center;gap:5px;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px;width:fit-content;}

  /* Machine-specific card additions: spec grid + Add to Quote / Rent actions.
     This is the standard machine product card — reuse as-is on Category and Product pages. */
  .prod-card .spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;margin-top:16px;padding:14px 16px;background:var(--light);border:1px solid var(--border);border-radius:var(--radius);}
  .prod-card .spec-item{font-size:11px;color:var(--slate-500);line-height:1.3;}
  .prod-card .spec-item svg{color:var(--slate-500);margin-bottom:2px;width:15px;height:15px;}
  .prod-card .spec-item b{display:block;font-size:13.5px;color:var(--ink);font-weight:700;margin-top:3px;}
  .prod-actions{display:flex;gap:8px;margin-top:auto;padding-top: 16px;}
  .prod-actions a{flex:1;justify-content:center;padding:13px 10px;font-size:13.5px;}
  /* Add to Quote is black/white on this card — deliberately distinct from the site's gold
     .btn-primary so it reads as the higher-intent action next to View/rent. */
  .prod-actions .btn-primary{background:var(--ink);color:#fff;}
  .prod-actions .btn-primary:hover{background:var(--ink-800);}
  .prod-card .rent-link{display:flex;align-items:center;gap:8px;text-align:left;margin-top:14px;font-size:12.5px;font-weight:700;color:var(--slate-500);transition:color .15s ease;}
  .prod-card .rent-link .dash{width:14px;height:3px;background:var(--gold);border-radius:2px;flex:none;}
  .prod-card .rent-link:hover{color:var(--ink);}
	.grid-pagination{display:flex;justify-content:center;margin-top:32px;}
  .grid-pagination .btn-secondary{padding:11px 28px;font-size:13.5px;}

  /* Scrollable 4-up variant (Shop Packaging Machines): shows 4 cards edge-to-edge
     (widened from 5, Mario review Aug 2026 -- "reduce it to 4 ... cards can be
     wider and more prominent"), extra cards scroll into view — paired with the
     scroll-hint arrows above the row. Card width computed off the section's
     ~1160px content area: (1160 - 3 gaps of 16px) / 4 ≈ 278px, rounded to 280px. */
  .scroll-hint{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-bottom:10px;font-size:11px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.03em;}
  .scroll-hint .chev-circle{
    display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
    background:#fff;border:1px solid var(--border-strong);color:var(--slate-500);padding:0;cursor:pointer;
    transition:border-color .15s ease,color .15s ease;
  }
  .scroll-hint .chev-circle:hover{border-color:var(--ink);color:var(--ink);}
  .scroll-hint .chev-circle:disabled{opacity:.35;cursor:default;}
  .scroll-hint .chev-circle:disabled:hover{border-color:var(--border-strong);color:var(--slate-500);}
  /* Base chevron points right (scroll forward); .chev-prev is flipped so the
     pair reads as a real back/forward control now that they're clickable. */
  .scroll-hint .chev-circle svg{transform:rotate(-90deg);}
  .scroll-hint .chev-circle.chev-prev svg{transform:rotate(90deg);}

  /* ---------- Support / Service / Delivery card scroll (Beyond The Sale) ---------- */
  .support-scroll{padding:72px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--light);}
  .support-row{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;}
  .support-card{flex:0 0 300px;max-width:none;scroll-snap-align:start;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;}
  .support-card .img{aspect-ratio:4/3;overflow:hidden;background:var(--light);}
  .support-card .img img{width:100%;height:100%;object-fit:cover;display:block;}
  .support-card .body{padding:18px 18px 20px;}
  .support-card .tag{font-size:9.5px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em;}
  .support-card h4{font-size:16px;margin-top:6px;font-weight:800;line-height:1.3;}
  .support-card p{font-size:13.5px;color:var(--slate-500);margin-top:8px;line-height:1.5;}
  .support-scroll h2{font-size:24px;margin-top:10px;}
  .prod-row.five{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;
  }
  .prod-row.five .prod-card{flex:0 0 320px;max-width:none;margin:0;scroll-snap-align:start;}

  /* ---------- Process rail (turnkey story) ---------- */
  .process{background:var(--ink);color:#fff;}
  .process .section-head h2{color:#fff;}
  .process .section-head p{color:#B7B7B7;}
  /* Two-column layout on desktop: intro copy left, wheel right, vertically centered.
     Collapses to a single stacked column (copy, then the mobile .rail list) below 900px. */
  .process-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  @media (max-width:900px){.process-grid{grid-template-columns:1fr;}}
  .process-grid .section-head{max-width:none;margin-bottom:0;}
  /* Linear rail is now the MOBILE fallback only — circular diagrams don't reflow to small
     screens, so below 761px we drop back to this stacked list. Desktop uses .wheel-wrap. */
  .rail{display:none;position:relative;margin-top:52px;}
  @media (max-width:760px){.rail{display:block;}}
  .rail-track{position:absolute;top:23px;left:0;right:0;height:2px;background:var(--gold);opacity:.3;}
  @media (max-width:860px){.rail-track{display:none;}}
  .rail-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;position:relative;}
  @media (max-width:860px){.rail-steps{grid-template-columns:1fr;gap:0;}}
  .rail-step{position:relative;}
  @media (max-width:860px){.rail-step{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid #333;}.rail-step:last-child{border-bottom:none;}}
  .rail-node{
    width:44px;height:44px;border-radius:50%;background:var(--ink);border:2px solid var(--gold);
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--gold);
    flex:none;margin-bottom:16px;
  }
  .rail-step h4{font-size:17.5px;color:#fff;}
  .rail-step p{font-size:13px;color:#9A9A9A;margin-top:7px;line-height:1.5;}
  .rail-step .proof{font-size:12px;color:var(--gold);margin-top:9px;font-weight:600;}

  /* ---------- COMPONENT: Circular Process Wheel (desktop, 761px+) ---------- */
  /* Nodes hold a number + short label only. Clicking one swaps its full description into
     the center hub, so the wheel stays clean like a reference infographic while the full
     copy (title/description/proof) is preserved rather than trimmed to fit inside a circle. */
  .wheel-wrap{display:none;justify-content:center;}
  @media (min-width:761px){.wheel-wrap{display:flex;}}
  .wheel{position:relative;width:460px;height:460px;max-width:100%;}
  .wheel-ring{position:absolute;inset:9%;border-radius:50%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);}
  .wheel-hub{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:186px;height:186px;border-radius:50%;
    background:var(--ink-800);border:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;justify-content:center;padding:22px;text-align:center;
  }
  .hub-panel{display:none;}
  .hub-panel.active{display:block;}
  .hub-panel .hub-num{font-size:11px;font-weight:800;color:var(--gold);letter-spacing:.06em;text-transform:uppercase;}
  .hub-panel h4{font-size:16.5px;color:#fff;margin-top:5px;}
  .hub-panel p{font-size:11.5px;color:#B7B7B7;margin-top:9px;line-height:1.5;}
  .hub-panel .hub-proof{font-size:10.5px;color:var(--gold);margin-top:9px;font-weight:700;}
  .wheel-node{
    position:absolute;transform:translate(-50%,-50%);
    width:106px;height:106px;border-radius:50%;
    background:var(--ink-800);border:2px solid rgba(255,222,0,.4);color:var(--gold);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
    font-family:'Plus Jakarta Sans',sans-serif;
  }
  .wheel-node:hover{border-color:var(--gold);}
  .wheel-node.active{background:var(--gold);color:var(--ink);border-color:var(--gold);}
  .wheel-node .node-num{font-size:10px;font-weight:800;opacity:.75;}
  .wheel-node.active .node-num{opacity:1;}
  .wheel-node .node-label{font-size:13px;font-weight:700;text-align:center;line-height:1.2;}

  /* ---------- COMPONENT: Featured Case Study (full-width strip) ---------- */
  /* One case study only for now — client has flagged that sourcing multiple write-ups will
     take time, so this replaces the old 4-up case-hero grid until more are available. */
  .case-feature{
    display:grid;grid-template-columns:1fr 1fr;
    border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  }
  @media (max-width:860px){.case-feature{grid-template-columns:1fr;}}
  .case-feature-media{aspect-ratio:auto;min-height:320px;border-radius:0;}
  .case-feature-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;}
  .case-feature-body .logo-ph{display:inline-flex;align-self:flex-start;height:48px;width:auto;min-width:160px;padding:0;margin-bottom:16px;margin-left:0;white-space:nowrap;}
  .case-feature-body h3{font-size:24px;line-height:1.35;}
  .case-feature-body p{color:var(--slate);font-size:15px;margin-top:14px;max-width:48ch;}
  .case-feature-body .date{font-size:12px;color:var(--slate-500);margin-top:14px;}
  .case-feature-body .btn-primary{margin-top:20px;align-self:flex-start;}
  /* Real Google reviews, replacing the old placeholder client-logo strip. */
  .review-strip{margin-top:48px;padding-top:36px;border-top:1px solid var(--border);}
  .review-strip-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;}
  .review-strip-head .g-rating{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink);}
  .review-strip-head .g-rating .stars{color:var(--gold);letter-spacing:1px;}
  .review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  @media (max-width:860px){.review-cards{grid-template-columns:1fr;}}
  .review-card{border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px;}
  .review-card .r-top{display:flex;align-items:center;gap:8px;}
  .review-avatar{width:26px;height:26px;border-radius:50%;background:var(--gold-tint);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;flex:none;}
  .review-card .r-name{font-weight:700;font-size:12px;color:var(--ink);}
  .review-card .r-meta{font-size:10px;color:var(--slate-500);margin-top:0;}
  .review-card .r-stars{color:var(--gold);font-size:11px;margin-top:6px;letter-spacing:1px;}
  .review-card p{font-size:11.5px;color:var(--slate);margin-top:5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

  /* ---------- COMPONENT: Industry Tile ---------- */
  .industries{background:var(--light);}
  .ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  @media (max-width:900px){.ind-grid{grid-template-columns:repeat(2,1fr);}}
  .ind-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px 14px 18px;text-align:center;transition:border-color .15s ease;overflow:hidden;}
  .ind-card:hover{border-color:var(--gold);}
  .ind-card .ic{width:100%;aspect-ratio:16/9;margin:0 auto 12px;border-radius:calc(var(--radius) - 4px);background:var(--ink);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;overflow:hidden;}
  .ind-card .ic img{width:100%;height:100%;object-fit:cover;display:block;}
  .ind-card span{font-weight:600;font-size:13.5px;}

  /* ---------- COMPONENT: Tool Teaser Card ---------- */
  /* Two-card resource strip: Ultimate Buying Guide (black) + 2026 Product Catalogue (grey),
     now sitting below a full-width Automation showcase card (text left, photo right). */
  /* Extra top padding (scoped to this section only, via the .tools.tight combo selector,
     so other section.tight instances site-wide are unaffected) -- more breathing room
     between the Industries section above and the automation card. */
  .tools.tight{padding-top:120px;}
  @media (max-width:760px){.tools.tight{padding-top:70px;}}
  .tools .wrap{display:flex;flex-direction:column;gap:48px;}
  .tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media (max-width:860px){.tool-grid{grid-template-columns:1fr;}}
  .tool-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:32px 30px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;}
  .tool-card.primary{background:var(--ink);color:#fff;}
  .tool-card.secondary{background:var(--light);border:1px solid var(--border);}
  .tool-card .eyebrow{color:var(--gold);}
  .tool-card.secondary .eyebrow{color:var(--ink);}
  .tool-card h3{font-size:24px;margin-top:12px;}
  .tool-card.secondary h3{color:var(--ink);}
  .tool-card p{font-size:14px;margin-top:10px;max-width:38ch;}
  .tool-card.primary p{color:#C7C7C7;}
  .tool-card.secondary p{color:var(--slate-500);}
  .tool-card .btn-secondary{margin-top:20px;align-self:flex-start;}
  /* Full-width automation showcase card -- reuses the .case-feature shell (white body +
     full-height cropped photo) so it reads consistently with the case study card below,
     just with the media/body column order flipped (copy left, photo right). */
  .case-feature.automation-feature{grid-template-columns:1fr 1fr;}
  @media (max-width:760px){.case-feature.automation-feature{grid-template-columns:1fr;}}
  .automation-feature .case-feature-body p{max-width:46ch;}

  /* Front-cover thumbnail — sits in the card's empty bottom-right corner (text/CTA are
     left-aligned and capped at 38ch, so this space is free). Swap for a real cover photo. */
  .tool-card .cover-thumb{
    position:absolute;right:18px;bottom:18px;
    width:150px;aspect-ratio:3/4;border-radius:7px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.3;
    box-shadow:0 12px 22px -10px rgba(0,0,0,.4);transform:rotate(3deg);
  }
  .tool-card.primary .cover-thumb{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#D8D8D8;}
  .tool-card.secondary .cover-thumb{background:#fff;border:1px solid var(--border-strong);color:var(--slate-500);}
  @media (max-width:480px){.tool-card .cover-thumb{display:none;}}

  /* ---------- COMPONENT: Warehouse Locations ---------- */
  /* Cards sized down and capped to a narrower max-width so three small warehouse
     cards read as a tidy trio rather than stretching full section width. */
  .locations{padding:80px 0;border-bottom:1px solid var(--border);}
  .loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin:0 auto;}
  @media (max-width:800px){.loc-grid{grid-template-columns:1fr;max-width:340px;}}
  .loc-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;}
  .loc-img{aspect-ratio:16/11;border-radius:0;border-width:0 0 1px 0;font-size:9px;}
  .loc-body{padding:14px 16px 16px;}
  .loc-body h3{font-size:15px;font-weight:700;}
  .loc-body p{color:var(--slate-500);font-size:12px;margin-top:5px;line-height:1.45;}
  .loc-body .loc-phone{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-weight:700;font-size:12px;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px;width:fit-content;}

  /* ---------- Blog / resources ---------- */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  @media (max-width:860px){.blog-grid{grid-template-columns:1fr;}}
  .blog-card .ph{aspect-ratio:16/10;border-radius:var(--radius);}
  .blog-card .tag-chip{margin-top:16px;}
  .blog-card h4{font-size:18px;margin-top:10px;font-weight:700;}
  .blog-card p{font-size:13.5px;color:var(--slate-500);margin-top:8px;}

  /* ---------- Brand / Manufacturer Logo Row ---------- */
  /* Nik, Aug 2026: "manufacturers logo row" sourced from the client's live
     site. Plain, unlabelled strip (matching the reference exactly -- no
     eyebrow/heading on the source), boxed off with top/bottom hairlines +
     a light tint like .trust-strip so it doesn't just float between the
     Blog grid and the dark CTA band. Each logo is a real image at a fixed
     height with width:auto (object-fit:contain) so the very different
     native aspect ratios (Smipack vs. PKG vs. TLM etc.) all sit on one
     visual baseline without distortion. */
  .brand-logos{background:var(--light);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:36px 0;}
  .brand-logos-row{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
  .brand-logos-row img{height:38px;width:auto;max-width:150px;object-fit:contain;flex:none;}
  @media (max-width:900px){
    .brand-logos-row{justify-content:center;gap:28px 48px;}
  }
  @media (max-width:600px){
    .brand-logos{padding:28px 0;}
    .brand-logos-row{gap:22px 32px;}
    .brand-logos-row img{height:28px;max-width:110px;}
  }

  /* ---------- Final CTA ---------- */
  .cta-band{background:var(--ink);color:#fff;text-align:center;}
  .cta-band h2{color:#fff;font-size:clamp(28px,3.6vw,42px);}
  .cta-band p{color:#B7B7B7;margin-top:12px;font-size:16px;}
  .cta-band .cta-row{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap;}

  /* ---------- Trust Strip (Service / Delivery / Warranty / Payment) ---------- */
  /* Deliberately thin — a single row of icon+label pairs, not a full section. Wraps to
     a stacked column on narrow screens rather than shrinking or scrolling horizontally. */
  .trust-strip{background:var(--light);border-top:1px solid var(--border);padding:14px 0;margin-top:40px;}
  .trust-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
  .trust-strip-item{
    display:flex;align-items:center;gap:8px;padding:6px 26px;
    font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;
  }
  .trust-strip-item svg{color:var(--slate-500);}
  .trust-strip-item + .trust-strip-item{border-left:1px solid var(--border-strong);}
  @media (max-width:700px){
    .trust-strip .wrap{flex-direction:column;}
    .trust-strip-item{width:100%;justify-content:center;padding:8px 0;}
    .trust-strip-item + .trust-strip-item{border-left:none;border-top:1px solid var(--border-strong);}
  }
  /* Dark variant — used inside the footer, above the review bar */
  .trust-strip.on-dark{background:transparent;border-top:none;margin-top:0;padding:4px 0;}
  .trust-strip.on-dark .trust-strip-item{color:#D8D8D8;}
  .trust-strip.on-dark .trust-strip-item svg{color:#8A8A8A;}
  .trust-strip.on-dark .trust-strip-item + .trust-strip-item{border-left-color:#3A3A3A;}
  @media (max-width:700px){
    .trust-strip.on-dark .trust-strip-item + .trust-strip-item{border-top-color:#3A3A3A;}
  }

  /* ---------- Video Module -- NEW component ---------- */
  .video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
  @media (max-width:760px){.video-grid{grid-template-columns:1fr;}}
  .video-module{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
  .video-thumb{position:relative;aspect-ratio:16/9;border-radius:0;}
  .video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;color:var(--ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.5);transition:transform .15s ease,background .15s ease;}
  .video-module:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:var(--gold);}
  .video-duration{position:absolute;right:10px;bottom:10px;background:rgba(28,28,28,.85);color:#fff;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;}
  .video-caption{padding:14px 16px;}
  .video-caption h4{font-size:14px;font-weight:700;}
  .video-caption p{font-size:12px;color:var(--slate-500);margin-top:4px;}



  /* ---------- COMPONENT: Product Hero (gallery + info + path box) ---------- */
  .pdp-hero{padding:28px 0 44px;}
  .pdp-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
  @media (max-width:900px){.pdp-hero-grid{grid-template-columns:1fr;}}

  .pdp-gallery-main{position:relative;width:100%;aspect-ratio:584/438;font-size:13px;background:#fff;border-radius:var(--radius);overflow:hidden;}
  .pdp-gallery-main img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
  @media (max-width:900px){.pdp-gallery-main{aspect-ratio:4/3;}}
  .pdp-thumb-row{display:flex;gap:10px;margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:6px;}
  .pdp-thumb{width:100%;max-width: 110px;height:110px;flex:none;font-size:8px;cursor:pointer;border-width:1.5px;transition:border-color .15s ease;border-radius:var(--radius);overflow:hidden;}
  .pdp-thumb.active{border-color:var(--gold);border-style:solid;}
  .pdp-thumb:hover{border-color:var(--border-strong);}

  .pdp-info .tag-chip{margin-bottom:10px;}
  .pdp-info h1{font-size:clamp(26px,3vw,36px);margin-top:6px;}
  .pdp-item-no{font-size:12px;color:var(--slate-500);margin-top:6px;font-weight:600;}

  /* ---------- COMPONENT: Manufacturer logo row ----------
     Nik, Aug 2026: "the client said he wants to show the logo of the
     machine manufacturer and possibly link to their website" -- sits
     directly under the Item No. line (still identifying "what is this
     product") and above the benefits list, so it doesn't compete with the
     CTA buttons or spec strip for attention. The logo itself is the click
     target (opens the manufacturer's site in a new tab -- rel="noopener"
     since target="_blank" is used -- so a shopper checking the brand
     doesn't lose their place in the quote flow). */
  .pdp-manufacturer{display:flex;align-items:center;gap:10px;margin-top:14px;}
  .pdp-manufacturer-label{font-size:12px;color:var(--slate-500);font-weight:600;}
  .pdp-manufacturer-logo-link{display:block;line-height:0;transition:opacity .15s ease;}
  .pdp-manufacturer-logo-link:hover{opacity:.7;}
  img.pdp-manufacturer-logo{height:34px;width:auto;object-fit:contain;display:block;}

  .pdp-benefits{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
  .pdp-benefit{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;color:var(--slate);}
  .pdp-benefit svg{color:var(--gold);margin-top:3px;flex:none;}

  .pdp-spec-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px;margin-top:20px;padding:16px;background:linear-gradient(180deg,#EDEEF0,#E2E4E7);border-radius:var(--radius);border:1px solid #D2D5D9;}
  .pdp-spec-strip .spec-item{font-size:10px;color:var(--slate-500);text-align:center;padding:0 4px;}
  .pdp-spec-strip .spec-item b{display:block;font-size:12.5px;color:var(--ink);font-weight:700;margin-top:2px;}
  @media (max-width:480px){.pdp-spec-strip{grid-template-columns:repeat(2,1fr);}}

  /* ---------- COMPONENT: 3-Path CTA Box (Quote / Rent / Consult) ---------- */
  /* Hero CTA stack -- one dominant action + two lightweight text-link
     alternates, not a 3-up equal-weight card grid (that pattern reads too
     close to Omni Group's boxed CTA rows). Hierarchy does the work instead
     of borders/icon-circles. */
  .pdp-cta-block{margin-top:22px;}
  .pdp-cta-main{width:100%;justify-content:center;padding:14px;font-size:14.5px;}
  .pdp-cta-rent{width:100%;justify-content:center;padding:12.5px;font-size:14px;margin-top:10px;}
  .pdp-cta-sub{font-size:12px;color:var(--slate-500);text-align:center;margin-top:10px;}
  .pdp-cta-help{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
  .pdp-cta-help-label{font-size:12.5px;color:var(--slate-500);}
  .pdp-cta-alt-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
  .pdp-cta-alt-link:hover{color:var(--slate);}
  .pdp-trust-strip{margin-top:22px;}
  .pdp-trust-strip .wrap{gap:0;flex-wrap:nowrap;justify-content:space-between !important;}
  .pdp-trust-strip .trust-strip-item{flex:1 1 0;justify-content:center;font-size:10.5px;padding:8px 8px;gap:5px;white-space:nowrap;}
  .pdp-trust-strip .trust-strip-item svg{width:12px;height:12px;}

  /* ---------- COMPONENT: Tab Bar (first tabbed component in the design
     system -- reused wherever a page needs to switch between several
     content panels without a full section break, e.g. future Product Page
     rollout across all 106 SKUs) ---------- */
  .pdp-tabs-section{padding:8px 0 56px;}
  .pdp-tabs{margin-top:8px;}
  .pdp-tab-bar{display:flex;gap:4px;border-bottom:1.5px solid var(--border);overflow-x:auto;}
  .pdp-tab{padding:14px 18px;font-size:13.5px;font-weight:700;color:var(--slate-500);white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .15s ease,border-color .15s ease;}
  .pdp-tab:hover{color:var(--ink);}
  .pdp-tab.active{color:var(--ink);border-color:var(--gold);}
  .pdp-tab-panel{display:none;padding:32px 0 8px;}
  .pdp-tab-panel.active{display:block;}
  .pdp-tab-subhead{font-size:14px;margin-bottom:14px;}
  .pdp-desc h5.pdp-tab-subhead{margin-top:26px;}
  .pdp-desc h5.pdp-tab-subhead:first-child{margin-top:0;}
	.pdp-tab.active:before {
		content: "";
		width: 100%;
		height: 1px;
		background: var(--gold);
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.pdp-tab {
		position: relative;
	}

  /* Description panel */
  .pdp-desc p{font-size:14.5px;color:var(--slate);line-height:1.75;max-width:74ch;}
  .pdp-desc p+p{margin-top:14px;}
  .pdp-desc .pdp-tab-jump{font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--gold);cursor:pointer;}

  /* Specifications panel */
  .pdp-spec-table{width:100%;border-collapse:collapse;max-width:640px;}
  .pdp-spec-table tr{border-bottom:1px solid var(--border);}
  .pdp-spec-table td{padding:13px 4px;font-size:13.5px;}
  .pdp-spec-table td:first-child{color:var(--slate-500);font-weight:600;width:44%;}
  .pdp-spec-table td:last-child{color:var(--ink);font-weight:700;}


  /* Maintenance Guide panel */
  .pdp-maint-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;}
  @media (max-width:760px){.pdp-maint-grid{grid-template-columns:1fr;}}
  .pdp-maint-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
  .pdp-maint-list li{display:flex;gap:12px;font-size:13.5px;color:var(--slate);line-height:1.5;}
  .pdp-maint-list svg{color:var(--gold);flex:none;margin-top:2px;}
  .pdp-maint-schedule{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
  .pdp-maint-list b{color:var(--ink);display:block;font-size:13px;}
  .pdp-maint-covered{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
  .pdp-maint-covered h5{font-size:14px;}
  .pdp-maint-covered ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
  .pdp-maint-covered li{display:flex;gap:8px;font-size:13px;color:var(--slate);align-items:flex-start;}
  .pdp-maint-covered svg{color:#3DA35D;flex:none;margin-top:2px;}
  .pdp-maint-covered .btn-primary{margin-top:16px;width:100%;justify-content:center;}

  /* Comparison Guide panel */
  .pdp-compare-table{width:100%;border-collapse:collapse;font-size:13px;}
  .pdp-compare-table th,.pdp-compare-table td{padding:12px 10px;text-align:left;border-bottom:1px solid var(--border);}
  .pdp-compare-table th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-500);font-weight:700;}
  .pdp-compare-table td.this-machine,.pdp-compare-table th.this-machine{background:var(--gold);}
  .pdp-compare-table .compare-name{font-weight:700;color:var(--ink);}
  .pdp-compare-table .compare-link{font-size:11px;font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--gold);display:inline-flex;align-items:center;gap:3px;}
  .pdp-compare-note{margin-top:18px;font-size:13px;color:var(--slate-500);}
  .pdp-compare-note a{font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--gold);}

  /* Certifications panel */
  .pdp-cert-bar{border:none;background:none;padding:0;}
  .pdp-cert-bar .wrap{padding:0;}
  .pdp-cert-copy{margin-top:20px;font-size:13.5px;color:var(--slate);line-height:1.7;max-width:64ch;}

  /* ---------- COMPONENT: Purchase Info Accordion (Shipping / Warranty /
     Returns / Payment / Support / Finance / Setup -- answers logistics
     questions right at the buying decision point, reskinned from the
     competitor reference Nik shared to AWC's own colours/type) ---------- */
  .pdp-infoacc-section{padding:28px 0 48px;}
  .pdp-infoacc-row{display:flex;flex-wrap:wrap;gap:12px;}
  .pdp-infoacc-pill{
    display:flex;align-items:center;gap:12px;flex:1 1 220px;
    border:1.5px solid var(--border-strong);border-radius:var(--radius);
    padding:12px 16px;text-align:left;background:var(--white);cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
  }
  .pdp-infoacc-pill:hover{border-color:var(--ink);}
  .pdp-infoacc-pill.active{border-color:var(--gold);background:var(--gold-tint);}
  .pdp-infoacc-pill .ia-ic{flex:none;color:var(--ink);display:flex;}
  .pdp-infoacc-pill .ia-text{flex:1;min-width:0;display:flex;flex-direction:column;}
  .pdp-infoacc-pill .ia-text b{font-size:13.5px;color:var(--ink);}
  .pdp-infoacc-pill .ia-text small{font-size:11.5px;color:var(--slate-500);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .pdp-infoacc-pill .ia-chev{flex:none;color:var(--slate-500);transition:transform .15s ease;}
  .pdp-infoacc-pill.active .ia-chev{transform:rotate(180deg);}

  .pdp-infoacc-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .pdp-infoacc-panel.open{max-height:220px;margin-top:14px;padding:18px 20px;background:var(--light);border:1px solid var(--border);border-radius:var(--radius);}
  .pdp-infoacc-panel h5{font-size:14px;}
  .pdp-infoacc-panel p{font-size:13.5px;color:var(--slate);line-height:1.65;margin-top:8px;max-width:70ch;}

  /* ---------- COMPONENT: Benefits List (Frank-Kern-style benefit
     stacking -- each block compounds the case rather than listing specs --
     laid out as a clean, text-only numbered list since per-benefit product
     photography isn't available; no visual column, a small numbered
     placeholder instead) ---------- */
  .pdp-benefits-section{padding:64px 0;background:var(--light);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
  .pdp-benefits-head{max-width:640px;margin:0 auto 48px;text-align:center;}
  .pdp-benefits-head .eyebrow{margin:0 auto;width:fit-content;}
  .pdp-benefits-head h2{font-size:clamp(24px,3vw,34px);margin-top:10px;line-height:1.25;}
  .pdp-benefits-head p{font-size:14.5px;color:var(--slate);margin-top:14px;line-height:1.6;}

  /* Universal 4-card benefit grid -- same .ind-benefit-card component used
     on the Parent Category Page, reused here so this section can be shared
     verbatim across every machine product page rather than writing bespoke
     copy per-product. Card 4 (Support) replaces the category page's
     mobile-specific 4th card since "local service" applies to every
     machine, not just mobile wrappers. */
  .ind-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:0;}
  @media (max-width:900px){.ind-benefits-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.ind-benefits-grid{grid-template-columns:1fr;}}
  .ind-benefit-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
  .ind-benefit-media{aspect-ratio:4/3;font-size:11px;}
  .ind-benefit-body{padding:20px 22px 24px;}
  .ind-benefit-stat{display:block;font-size:28px;font-weight:800;color:var(--ink);line-height:1;}
  .ind-benefit-unit{display:block;font-size:11px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.03em;margin-top:6px;}
  .ind-benefit-card p{font-size:13px;color:var(--slate-500);margin-top:10px;line-height:1.6;}

  /* ---------- COMPONENT: Features Breakdown (scannable grid, feature ->
     one-line benefit translation) -- lives inside the "Features" tab now,
     not a standalone section ---------- */
  /* ---------- Features tab v3 -- reverted to a card grid per Nik's call
     (photo+list trial felt right conceptually but she wants to keep working
     the card treatment instead), rebuilt with the researched mechanism+
     benefit copy and a less flat visual style: 2-up grid (more room per
     card for the longer copy), gold-tint icon roundel instead of flat grey,
     a subtle index number, and a hover lift/shadow so the cards read as
     an intentional surface rather than a bordered box. ---------- */
  .pdp-feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  @media (max-width:700px){.pdp-feat-grid{grid-template-columns:1fr;}}
  .pdp-feat-card{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px 19px 20px;background:var(--light);transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;}
  .pdp-feat-card:hover{box-shadow:0 20px 44px -24px rgba(0,0,0,.22);border-color:var(--border-strong);transform:translateY(-2px);}
  .pdp-feat-card .pf-num{position:absolute;top:19px;right:20px;font-size:10.5px;font-weight:700;color:var(--slate-500);letter-spacing:.03em;}
  .pdp-feat-card .pf-ic{width:36px;height:36px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:11px;}
  .pdp-feat-card .pf-ic svg{width:15px;height:15px;}
  .pdp-feat-card h5{font-size:14.5px;padding-right:24px;line-height:1.3;}
  .pdp-feat-card p{font-size:12.5px;color:var(--slate-500);margin-top:5px;line-height:1.55;}

  /* ---------- Related Products section ---------- */
  .pdp-related{padding:48px 0;}
  .pdp-related-head{margin-bottom:20px;}
  .pdp-related-viewall{font-weight:700;font-size:12.5px;color:var(--ink);border-bottom:1.5px solid var(--gold);display:inline-flex;align-items:center;gap:4px;}

  /* ---------- COMPONENT: Real Results proof card -- sits right after the
     Benefits stack, echoing its "Up to 30%" ROI stat with a concrete result
     instead of pairing it with an unrelated resource download. ---------- */
  .pdp-proof-section{padding:64px 0;background:var(--light);}
  .pdp-proof-card{max-width:800px;margin:0 auto;display:flex;align-items:center;gap:30px;background:var(--ink);border-radius:var(--radius);padding:34px 36px;}
  .pdp-proof-stat{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-right:30px;border-right:1px solid #3A3A3A;}
  .pdp-proof-num{font-size:38px;font-weight:800;color:var(--gold);line-height:1;}
  .pdp-proof-label{font-size:11px;font-weight:700;color:#B7B7B7;text-transform:uppercase;letter-spacing:.04em;margin-top:6px;max-width:9ch;}
  .pdp-proof-copy{flex:1;}
  .pdp-proof-copy .eyebrow{color:var(--gold);}
  .pdp-proof-copy h3{color:#fff;font-size:18px;margin-top:8px;line-height:1.35;}
  .pdp-proof-copy p{color:#B7B7B7;font-size:13px;margin-top:8px;line-height:1.6;max-width:52ch;}
  .pdp-proof-btn{flex:none;}
  @media (max-width:760px){
    .pdp-proof-card{flex-direction:column;align-items:flex-start;gap:18px;padding:26px;}
    .pdp-proof-stat{flex-direction:row;gap:10px;border-right:none;padding-right:0;padding-bottom:16px;border-bottom:1px solid #3A3A3A;width:100%;justify-content:flex-start;}
    .pdp-proof-label{max-width:none;text-align:left;}
    .pdp-proof-btn{width:100%;justify-content:center;}
  }

  /* ---------- Footer ---------- */
  footer{background:var(--ink);color:#A9A9A9;padding-top:60px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px;padding-bottom:40px;border-bottom:1px solid #333;}
  @media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,1fr);}}
  .foot-grid h5{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px;}
  .foot-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .foot-grid a{font-size:13.5px;}
  .foot-grid a:hover{color:#fff;}
  .foot-brand img{height:30px;width:auto;}
  .foot-brand p{font-size:13px;margin-top:14px;max-width:32ch;color:#8A8A8A;}
  .foot-brand .cta-row{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
  .foot-brand .cta-row .btn-primary,.foot-brand .cta-row .btn-secondary{padding:10px 18px;font-size:13px;}
  .foot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;}
  .foot-badge{
    background:#fff;border-radius:6px;padding:8px 12px;height:40px;
    display:flex;align-items:center;justify-content:center;
  }
  .foot-badge img{height:100%;width:auto;max-width:120px;object-fit:contain;display:block;}
  .review-bar{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
    padding:20px 0;border-top:1px solid #333;font-size:12.5px;color:#A9A9A9;text-align:center;
  }
  .review-bar .stars{color:var(--gold);font-size:15px;letter-spacing:2px;}
  .review-bar .ph-tag{
    font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#6B6B6B;
    border:1px dashed #444;border-radius:20px;padding:3px 9px;
  }
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:12px;flex-wrap:wrap;gap:12px;}
  .foot-bottom .legal{display:flex;gap:20px;flex-wrap:wrap;}
  .foot-social{display:flex;gap:10px;}
  .foot-social a{width:32px;height:32px;border:1px solid #3A3A3A;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;}
  .foot-social a:hover{border-color:var(--gold);color:var(--gold);}

  .build-tag{
    position:fixed;bottom:16px;right:16px;z-index:200;
    background:var(--ink);color:var(--gold);font-size:11px;font-weight:700;
    padding:8px 12px;border-radius:20px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);letter-spacing:.02em;
  }

  @media (max-width:600px){
    /* Footer: desktop's own 900px breakpoint stops at 2 columns, which is
       tight once you're down to a ~350px-wide content area. */
    .foot-grid{grid-template-columns:1fr;gap:28px;}
    .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
    /* Section rhythm: desktop's 80px vertical padding is generous for a
       phone-height viewport -- tightened so more of the page is visible
       per scroll without changing any content. */
    section{padding:52px 0;}
    section.tight{padding:40px 0;}
    .hero .wrap{padding-top:36px;padding-bottom:36px;}
    .featured-product{padding:52px 0;}
    .usp,.process,.locations{padding:52px 0;}

    /* Browse Our Catalogue pill switcher -- with 3 tab labels ("Packaging
       Machines" / "Packaging Materials" / "General Packaging Supplies") it
       wraps to 2 rows on a phone-width screen, and the grey pill container
       was carrying its full desktop padding/gap around both rows, reading
       as an oversized grey block. Tightened padding, gap and tab sizing so
       the container hugs the (still-wrapped) tabs closely instead. */
    .cat-tabs{padding:4px;gap:4px;margin-bottom:20px;}
    .cat-tab{padding:8px 14px;font-size:12px;}
  }

  /* ---------- PROTOTYPE: Quote Drawer (nav trigger + slide-out panel) ---------- */
  .quote-trigger{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--border-strong);background:#fff;color:var(--ink);flex:none;transition:border-color .15s ease,background .15s ease;}
  .quote-trigger:hover{border-color:var(--ink);background:var(--light);}
  .quote-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--gold);color:var(--ink);font-size:10px;font-weight:800;align-items:center;justify-content:center;line-height:1;border:2px solid #fff;}
  .mnav-cta-row{display:flex;gap:10px;align-items:center;margin:18px 0 6px;}
  .mnav-cta-row .quote-trigger{background:var(--light);}

  .quote-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s ease;}
  .quote-backdrop.open{opacity:1;pointer-events:auto;}
  .quote-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:#fff;box-shadow:-12px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .25s ease;}
  .quote-backdrop.open .quote-drawer{transform:translateX(0);}
  .quote-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--border);flex:none;}
  .quote-drawer-head h3{font-size:17px;}
  .quote-drawer-head h3 span{font-weight:500;color:var(--slate-500);font-size:14px;}
  .quote-drawer-close{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border-strong);color:var(--slate-500);flex:none;}
  .quote-drawer-close:hover{border-color:var(--ink);color:var(--ink);}
  .quote-drawer-body{flex:1;overflow-y:auto;padding:4px 22px;}
  .quote-empty{padding:70px 10px;text-align:center;color:var(--slate-500);}
  .quote-empty p{font-weight:700;color:var(--ink);font-size:15px;}
  .quote-empty span{display:block;margin-top:8px;font-size:13px;line-height:1.6;max-width:32ch;margin-left:auto;margin-right:auto;}
  .quote-item{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--border);align-items:flex-start;}
  .quote-item .ph{width:56px;height:56px;flex:none;font-size:7px;border-radius:8px;padding:2px;}
  .quote-item-info{flex:1;min-width:0;}
  .quote-item-cat{font-size:10px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em;}
  .quote-item-name{font-size:13.5px;font-weight:700;margin-top:2px;line-height:1.3;}
  .quote-item-variant{font-size:11px;color:var(--slate-500);margin-top:2px;}
  .quote-item-qty{display:flex;align-items:center;gap:10px;margin-top:10px;}
  .quote-item-qty button{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--border-strong);font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none;}
  .quote-item-qty button:hover{border-color:var(--ink);}
  .quote-item-qty span{font-weight:700;font-size:13px;min-width:14px;text-align:center;}
  .quote-item-remove{flex:none;color:var(--slate-500);font-size:20px;line-height:1;padding:2px 4px;}
  .quote-item-remove:hover{color:#C0392B;}
  .quote-drawer-foot{padding:18px 22px 24px;border-top:1px solid var(--border);flex:none;}

  .quote-toast{position:fixed;bottom:24px;right:24px;background:var(--ink);color:#fff;padding:13px 20px;border-radius:10px;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:1100;opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;pointer-events:none;}
  .quote-toast.show{opacity:1;transform:translateY(0);}
  .quote-add-btn.added{background:#3DA35D !important;}

/* ---------- Product Archive ---------- */

  /* ---------- PROTOTYPE: Rent This Machine pop-up (product-page-scoped, NOT the Quote Drawer) ---------- */
  .rental-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1200;opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:24px;transition:opacity .2s ease;}
  .rental-backdrop.open{opacity:1;pointer-events:auto;}
  .rental-modal{background:#fff;border-radius:var(--radius);width:460px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 70px -20px rgba(0,0,0,.35);transform:scale(.94);opacity:0;transition:transform .2s ease,opacity .2s ease;}
  .rental-backdrop.open .rental-modal{transform:scale(1);opacity:1;}
  .rental-modal-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 0;}
  .rental-modal-head h3{font-size:18px;}
  .rental-modal-close{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border-strong);color:var(--slate-500);flex:none;}
  .rental-modal-close:hover{border-color:var(--ink);color:var(--ink);}
  .rental-modal-body{padding:18px 24px 26px;}
  .rental-modal-machine{background:var(--light);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:20px;}
  .rental-modal-machine .m-label{font-size:10.5px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.04em;display:block;}
  .rental-modal-machine .m-name{font-size:14px;font-weight:700;color:var(--ink);margin-top:2px;}
  .rental-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  @media (max-width:520px){.rental-field-row{grid-template-columns:1fr;}}
  .rental-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink);}
  .rental-field-period{margin-bottom:14px;}
  .rental-field input,.rental-field select{
    font-family:inherit;font-size:14px;font-weight:400;color:var(--ink);
    border:1.5px solid var(--border-strong);border-radius:var(--radius);
    padding:11px 14px;background:#fff;width:100%;box-sizing:border-box;
  }
  .rental-field select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    padding-right:36px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23555555' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;background-position:right 14px center;
  }
  .rental-field select:invalid{color:var(--slate-500);}
  .rental-field input::placeholder{color:var(--slate-500);font-weight:400;}
  .rental-field input:focus,.rental-field select:focus{outline:none;border-color:var(--gold);}
  .rental-modal-submit{width:100%;justify-content:center;margin-top:4px;}
  .rental-modal-note{font-size:11.5px;color:var(--slate-500);text-align:center;margin-top:12px;}
  .rental-modal-success{display:none;text-align:center;padding:20px 4px 6px;}
  .rental-modal-success.show{display:block;}
  .rental-modal-success h4{font-size:16px;color:var(--ink);}
  .rental-modal-success p{font-size:13px;color:var(--slate-500);margin-top:8px;line-height:1.6;}
  .rental-modal-body.hide-form form,.rental-modal-body.hide-form .rental-modal-machine{display:none;}

  /* ---------- Isolation harness (not part of the real component) ---------- */
  .harness-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 32px;border-bottom:1px solid var(--border);}
  .harness-bar .brand{font-weight:800;font-size:16px;}
  .harness-note{background:var(--light);border-bottom:1px dashed var(--border-strong);padding:14px 32px;font-size:12.5px;color:var(--slate-500);text-align:center;}
  .harness-demo{padding:48px 32px 80px;text-align:center;}
  .harness-demo h2{font-size:20px;margin-bottom:6px;}
  .harness-demo p.sub{color:var(--slate-500);font-size:14px;margin:0 auto 26px;max-width:60ch;}
  .build-tag{
    position:fixed;bottom:16px;right:16px;z-index:200;
    background:var(--ink);color:var(--gold);font-size:11px;font-weight:700;
    padding:8px 12px;border-radius:20px;
    box-shadow:0 6px 18px rgba(0,0,0,.25);letter-spacing:.02em;
  }

/* ---------- Breadcrumbs ---------- */
  .breadcrumbs{border-bottom:1px solid var(--border);padding:12px 0;}
  .breadcrumbs .wrap{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--slate-500);flex-wrap:wrap;}
  .breadcrumbs a{font-weight:600;color:var(--slate-500);transition:color .15s ease;}
  .breadcrumbs a:hover{color:var(--ink);}
  .breadcrumbs .sep{color:var(--border-strong);}
  .breadcrumbs .current{font-weight:700;color:var(--ink);}

	/* ---------- COMPONENT: Category Header ---------- */
  .cat-header{padding:44px 0 36px;border-bottom:1px solid var(--border);}
  .cat-header-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;}
  @media (max-width:860px){.cat-header-grid{grid-template-columns:1fr;}}
  .cat-header h1{font-size:clamp(30px,3.6vw,44px);margin-top:12px;}
  .cat-header .lede{font-size:15.5px;color:var(--slate);margin-top:16px;max-width:56ch;}
  .cat-header-media{aspect-ratio:16/10;border-radius:var(--radius);}

	/* ---------- COMPONENT: Conversion Pathway Strip ---------- */
  .conv-strip{background:var(--ink);padding:22px 0;}
  .conv-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .conv-item{display:flex;align-items:center;gap:9px;font-weight:700;font-size:13.5px;color:#fff;padding:11px 18px;border-radius:var(--radius);border:1.5px solid #3A3A3A;transition:border-color .15s ease,background .15s ease;}
  .conv-item:hover{border-color:#5A5A5A;background:rgba(255,255,255,.05);}
  .conv-item svg{color:var(--gold);}
  .conv-item.primary{background:var(--gold);color:var(--ink);border-color:var(--gold);}
  .conv-item.primary svg{color:var(--ink);}
  .conv-item.primary:hover{background:var(--gold-hover);}
  .conv-item.grey{background:#4A4A4A;border-color:#4A4A4A;color:#fff;}
  .conv-item.grey svg{color:#fff;}
  .conv-item.grey:hover{background:#5A5A5A;}

	/* ---------- COMPONENT: Shop by Type tile row (nested above the catalogue grid) ---------- */
  .shop-type{margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border);}
  .shop-type-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:8px;}
  .shop-type-head h2{font-size:17px;}
  .shop-type-head span{font-size:12.5px;color:var(--slate-500);}
  /* Compact tiles, 4-up grid sized to the catalogue's right-hand column
     (920px at max-width:1280 -> ~221px per column at gap:12px), so all
     4 types sit in a single row rather than wrapping. */
  .type-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
  .type-tile{border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease;background:#fff;}
  .type-tile:hover{border-color:var(--gold);box-shadow:0 10px 24px -14px rgba(0,0,0,.2);}
  .type-tile.active{border-color:var(--ink);}
  .type-tile .ph{aspect-ratio:4/3;border-radius:0;border-width:0 0 1px 0;font-size:8.5px;}
  .type-tile .t-img{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--border);background:#fff;}
  .type-tile .t-img img{width:100%;height:100%;object-fit:cover;display:block;}
  .type-tile .t-body{padding:11px 12px;}
  .type-tile h4{font-size:12.5px;font-weight:700;}
  .type-tile .t-count{font-size:10px;color:var(--slate-500);margin-top:2px;}
  .type-tile .t-link{margin-top:7px;font-weight:700;font-size:10px;display:flex;align-items:center;gap:4px;color:var(--ink);border-bottom:2px solid var(--gold);padding-bottom:2px;width:fit-content;}
  @media (max-width:640px) and (min-width:601px){.type-row{grid-template-columns:repeat(2,1fr);}}
  /* True phone widths: stacked single column, each tile flipped to a
     horizontal row (small image left, name/count/link right) rather than
     the desktop's vertical image-on-top card -- reads as a compact list
     instead of a squeezed 2-column grid. */
  @media (max-width:600px){
    .type-row{grid-template-columns:1fr;gap:8px;}
    .type-tile{display:flex;align-items:stretch;flex-wrap: wrap;}
    .type-tile .ph{width:84px;aspect-ratio:auto;border-width:0 1px 0 0;flex:none;font-size:7.5px;}
    .type-tile .t-body{padding:10px 12px;display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0;}
  }

	/* ---------- COMPONENT: Shop by Type, STANDALONE section variant ----------
     Used on child category pages, where "Shop by Type" is deliberately
     demoted below the catalogue (a visitor already inside a type doesn't
     need it competing with the product grid for attention) -- so instead of
     nesting .shop-type above the grid-toolbar (the parent page's treatment),
     it gets its own full-width band lower on the page. Reuses .shop-type/
     .shop-type-head/.type-row/.type-tile unchanged; this just resets the
     inner margin/border those rules add for the nested context, since the
     section itself now supplies the boundary. */
  .shop-type-section{padding:48px 0;background:var(--light);border-top:1px solid var(--border);}
  .shop-type-section .shop-type{margin-bottom:0;padding-bottom:0;border-bottom:none;}
  .shop-type-cta{margin-top:22px;display:flex;justify-content:center;}

  /* ---------- Catalogue layout: filter column + product grid ---------- */
  .catalogue{padding:40px 0 64px;}
  .cat-layout{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start;}
  @media (max-width:900px){.cat-layout{grid-template-columns:1fr;}}
  .filter-empty-state{margin-top:18px;text-align:center;padding:56px 24px;border:1.5px dashed var(--border-strong);border-radius:var(--radius);background:var(--light);}
  .filter-empty-state p{color:var(--slate-500);font-size:14px;line-height:1.7;margin-bottom:18px;}
  .filter-empty-state p b{color:var(--ink);font-size:16px;}

  /* ---------- COMPONENT: Pallet Wrapper Finder (square promo, sits above the
     filter so the filter itself starts level with the product catalogue) ---------- */
  .filter-col{display:flex;flex-direction:column;}
  .finder-box{aspect-ratio:1/1;border-radius:var(--radius);background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:24px;position:relative;overflow:hidden;}
  .finder-box::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(255,222,0,.18), transparent 60%);}
  .finder-box>*{position:relative;}
  .finder-box .eyebrow{color:var(--gold);}
  .finder-box h3{font-size:18px;color:#fff;margin-top:12px;line-height:1.3;}
  .finder-box p{font-size:12.5px;color:#B7B7B7;margin-top:8px;line-height:1.6;}
  .finder-box .btn-primary{margin-top:auto;width:100%;justify-content:center;font-size:13px;padding:11px;}
  /* On mobile, cat-layout collapses to 1 column below 900px, so this box
     goes full-width -- desktop's aspect-ratio:1/1 would then make it a huge
     square dominating the top of the page, ahead of the actual product
     grid. Dropped the aspect-ratio, tightened padding, and clamped the
     description to 2 lines so it reads as a small compact promo banner
     instead of the most prominent thing on the screen. */
  @media (max-width:900px){
    .finder-box{aspect-ratio:auto;padding:14px 16px;margin-bottom:16px;}
    .finder-box h3{font-size:14px;margin-top:6px;}
    .finder-box p{font-size:11px;margin-top:4px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .finder-box .btn-primary{margin-top:10px;padding:9px;font-size:12px;}
  }

  /* ---------- COMPONENT: Filter Sidebar ---------- */
  /* background:#fff is load-bearing, not decorative -- without it this
     element is transparent, which is invisible on desktop (nothing sits
     behind it in the grid) but became a real bug once this same element
     started doubling as a position:fixed mobile overlay: page content
     underneath (Shop by Type tiles, product cards) showed straight through
     the "drawer", overlapping its own text illegibly. */
  .filter-sidebar{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:sticky;top:20px;}
  @media (max-width:900px){.filter-sidebar{position:static;}}
  .filter-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);background:var(--light);}
  .filter-head h3{font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
  .filter-head-right{display:flex;align-items:center;gap:14px;}
  .filter-head .clear{font-size:11.5px;font-weight:700;color:var(--slate-500);border-bottom:1.5px solid var(--border-strong);}
  .filter-close{display:none;color:var(--slate-500);}
  .filter-close:hover{color:var(--ink);}
  .filter-group{border-bottom:1px solid var(--border);}
  .filter-group:last-child{border-bottom:none;}
  .filter-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-weight:700;font-size:13px;color:var(--ink);}
  .filter-group-toggle svg{transition:transform .15s ease;color:var(--slate-500);}
  .filter-group.open .filter-group-toggle svg{transform:rotate(180deg);}
  .filter-group-panel{display:none;padding:0 18px 16px;}
  .filter-group.open .filter-group-panel{display:block;}
  .filter-opt{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13px;color:var(--slate);cursor:pointer;transition:color .15s ease;}
  .filter-opt input{width:16px;height:16px;accent-color:var(--gold);flex:none;}
  /* Checking a box applies the filter immediately -- no separate Apply step.
     .filter-opt.checked is toggled via JS on the input's change event and
     just gives instant visual confirmation that the filter is live. */
  .filter-opt.checked{color:var(--ink);font-weight:700;}
  .filter-live-note{display:flex;align-items:center;gap:6px;margin:2px 18px 16px;font-size:11px;color:var(--slate-500);}
  .filter-live-note .dot{width:6px;height:6px;border-radius:50%;background:#3DA35D;flex:none;}

  /* ---------- Mobile Filter Drawer -----------------------------------------
     Below 900px (same breakpoint cat-layout already collapses the sidebar
     out of its sticky column at), the filter checkbox list moves off-screen
     by default and only opens when the Filter button (in the grid toolbar)
     is tapped -- so the product grid, the important part, is what's visible
     first rather than a long list of checkboxes pushing it below the fold.
     The Pallet Wrapper Finder promo box deliberately stays put above the
     grid as a compact banner (per Nik) -- only the filter list itself moves
     into this drawer. Reuses the exact same DOM node as the desktop sidebar
     (no duplicated markup/checkboxes to fall out of sync) -- CSS alone
     repositions it into an overlay panel, and the same JS listeners already
     bound to its checkboxes keep working unchanged. ---------------------- */
  .filter-trigger-mobile{display:none;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);border:1.5px solid var(--border-strong);border-radius:8px;padding:9px 14px;background:#fff;position:relative;}
  .filter-trigger-mobile .filter-count-badge{display:none;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--gold);color:var(--ink);font-size:10px;font-weight:800;}
  .filter-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998;opacity:0;pointer-events:none;transition:opacity .2s ease;display:none;}
  @media (max-width:900px){
    /* Filter is the button that actually matters here -- Sort ("Featured")
       doesn't do much real work yet, so it shouldn't visually compete with
       Filter for attention. Filter gets a solid dark fill to read as the
       primary action in this row; Sort drops its border/background and
       becomes a quieter, secondary-looking control next to it. */
    .filter-trigger-mobile{display:flex;background:var(--ink);border-color:var(--ink);color:#fff;}
    .filter-trigger-mobile svg{color:#fff;}
    .filter-trigger-mobile:hover{background:#000;border-color:#000;}
    .filter-trigger-mobile .filter-count-badge{border:1.5px solid var(--ink);}
    .sort-select{border:none;background:transparent;padding:9px 4px;color:var(--slate-500);font-weight:600;}
    .filter-close{display:flex;}
    .filter-backdrop{display:block;}
    .filter-backdrop.open{opacity:1;pointer-events:auto;}
    .filter-sidebar{
      position:fixed;top:0;left:0;bottom:0;z-index:999;
      width:320px;max-width:86vw;border-radius:0;border:none;
      box-shadow:16px 0 40px rgba(0,0,0,.18);
      transform:translateX(-100%);transition:transform .25s ease;
      overflow-y:auto;
    }
    .filter-sidebar.mobile-open{transform:translateX(0);}
  }

	/* ---------- Product grid + sort bar ---------- */
  .grid-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
  .grid-toolbar .count{font-size:13px;color:var(--slate-500);}
  .grid-toolbar .count b{color:var(--ink);}
  .grid-toolbar-right{display:flex;align-items:center;gap:10px;}
  .sort-select > button{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--ink);border:1.5px solid var(--border-strong);border-radius:8px;padding:9px 14px;}
  .sort-select svg{color:var(--slate-500);}

	/* ---------- COMPONENT: Why Automated Wrapping Pays Off ----------
     New section (Nik, Sep 2026 review): sits between the catalogue and the
     About copy, answering "why does this equipment matter" before the About
     block gets into type-by-type detail. Stat-tile grid is copy-pasted from
     the Food Industry page's .ind-benefit-card component (same class names,
     kept in sync on purpose) so the two pages share one visual language for
     "here's the payoff" content. Media slot is a placeholder -- Nik is
     sourcing real AWC photography for this section separately. */
  .ind-benefits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px;}
  @media (max-width:900px){.ind-benefits-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.ind-benefits-grid{grid-template-columns:1fr;}}
  /* Image top half, stat as the single headline -- Nik felt the icon + stat +
     text heading was three competing headers doing the same job. Now it's
     just: photo (pending Nik's own imagery), then one big number that IS
     the headline, then the supporting line. */
  .ind-benefit-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;}
  .ind-benefit-media{font-size:11px;}
  .ind-benefit-body{padding:20px 22px 24px;}
  .ind-benefit-stat{display:block;font-size:28px;font-weight:800;color:var(--ink);line-height:1;}
  .ind-benefit-unit{display:block;font-size:11px;font-weight:700;color:var(--slate-500);text-transform:uppercase;letter-spacing:.03em;margin-top:6px;}
  .ind-benefit-card p{font-size:13px;color:var(--slate-500);margin-top:10px;line-height:1.6;}

	/* ---------- COMPONENT: How Can We Help You Decide (redesign) ----------
     Replaces the old single .support-card text box. Same two jobs (book a
     consult / try the Finder) but each now gets its own full card instead of
     competing for space inside one paragraph.
     Left panel reuses the homepage's cta-strip team-photo idea so this page
     and the homepage read as the same brand system, just laid out as a
     stacked panel instead of a slim strip since it needs to hold its own
     next to the Finder card.
     Right panel is a static, non-interactive preview of the real Finder
     quiz card (question 1, verbatim) -- same classes/visual language as the
     live quiz on the standalone Finder page, so this reads as a genuine
     entry point into that tool rather than a text link buried in a
     paragraph. */
  .decide-head{max-width:640px;margin:80px auto 0;text-align:center;}
  .decide-grid{display:flex;flex-direction:column;gap:20px;margin-top:28px;}

  /* Split media/content card: full-height image on the left half, stacked
     left-aligned copy + CTA on the right half. Not a literal homepage
     component (the homepage's .cta-strip is a slim horizontal bar) -- this
     is a purpose-built layout for this page per Nik's request. */
  .decide-card{display:grid;grid-template-columns:1fr 1fr;background:var(--light);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;min-height:240px;}
  .decide-card-media{position:relative;overflow:hidden;font-size:11px;}
  .decide-card-badge{position:absolute;bottom:14px;left:14px;display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
  .decide-card-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;}
  .decide-card-body{padding:32px 36px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;}
  .decide-card-body .txt b{display:block;font-size:20px;font-weight:700;color:var(--ink);}
  .decide-card-body .txt span{font-size:14px;color:var(--slate-500);display:block;margin-top:8px;max-width:42ch;}
  .decide-card-action{display:flex;align-items:center;gap:12px;margin-top:20px;}
  /* Team photo now rides alongside the button at a much smaller footprint,
     rather than sitting apart from it as a large circle. */
  .cta-team-photo-sm{width:40px;height:40px;border-radius:50%;flex:none;overflow:hidden;}
  .cta-team-photo-sm img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block;}
  @media (max-width:760px){
    .decide-card{grid-template-columns:1fr;}
    .decide-card-media{min-height:200px;}
  }

  /* ---------- Supporting SEO copy block ---------- */
  /* No border-bottom here -- the grey background continues straight into the
     FAQ section below so the two read as one continuous band. */
  .seo-copy{padding:48px 0;background:var(--light);border-top:1px solid var(--border);}
  /* Centered treatment (chosen over the left-aligned original after side-by-
     side comparison): the inner column is centered on the page, heading and
     Read More toggle center with it. Body copy inside .copy-block stays
     left-aligned on purpose -- centering multi-line paragraph text hurts
     readability, so only the column itself is centered, not the running
     copy within it. */
  .seo-copy-inner{max-width:820px;margin:0 auto;text-align:center;}
  .seo-copy-head{max-width:820px;margin:0 auto;text-align:center;}
  .ind-benefits-grid{margin-top:32px;margin-bottom:8px;}
  .seo-copy h2{font-size:22px;}
  .seo-copy .copy-block{margin-top:16px;font-size:14.5px;color:var(--slate);line-height:1.75;max-height:130px;overflow:hidden;position:relative;text-align:left;}
  .seo-copy .copy-block::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--light));}
  .seo-copy .copy-block.expanded{max-height:none;}
  .seo-copy .copy-block.expanded::after{display:none;}
  .seo-copy .copy-block p+p{margin-top:12px;}
  .seo-copy .copy-block a{font-weight:700;color:var(--ink);border-bottom:1.5px solid var(--gold);}
  .seo-copy-toggle{margin-top:16px;}

  /* ---------- COMPONENT: FAQ Accordion ---------- */
  /* Same grey as .seo-copy above, so About AWC Pallet Wrappers + FAQ read as
     one continuous grey band. No border-bottom here now -- the grey
     closes off with its own border-bottom -- the .tools section below is
     back on white, so the two bands read as distinct again. Head + accordion box
     centered as a column; the question/answer text inside stays
     left-aligned (.faq-q already sets text-align:left) since a centered
     accordion is much harder to scan. */
  .faq{padding:48px 0;background:var(--light);}
  .faq-head{margin:0 auto 24px;max-width:640px;text-align:center;}
  .faq-head .eyebrow{margin:0 auto;width:fit-content;}
  .faq-head h2{font-size:24px;margin-top:10px;}
  .faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--border);}
  .faq-item{border-bottom:1px solid var(--border);}
  .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;text-align:left;font-weight:700;font-size:15px;color:var(--ink);}
  .faq-q .faq-ic{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .2s ease,background .15s ease,border-color .15s ease;}
  .faq-q .faq-ic svg{color:var(--slate-500);}
  .faq-item.open .faq-q .faq-ic{transform:rotate(45deg);background:var(--ink);border-color:var(--ink);}
  .faq-item.open .faq-q .faq-ic svg{color:#fff;}
  .faq-a{display:none;padding:0 4px 20px;font-size:13.5px;color:var(--slate);line-height:1.6;max-width:70ch;}
  .faq-item.open .faq-a{display:block;}

  /* ---------- Cross-sell / trust ---------- */
  /* Same grey as .seo-copy/.faq above -- the band now runs continuously from
     About AWC Pallet Wrappers all the way through the FAQ and this section,
     closed off by this border-bottom right before the (dark) footer. */
  /* ---------- COMPONENT: Resource cards (synced to homepage's .tool-card) ----------
     Same dark-primary/light-secondary treatment and rotated cover-thumb as the
     homepage's Ultimate Buying Guide / Product Catalogue cards, kept on its own
     white section (was a grey band sitting directly under the also-grey FAQ,
     which read as one oversized grey block). Cover art is a placeholder --
     pending real Guide/Case Study cover art. */
  .tools{padding:56px 0;border-bottom:1px solid var(--border);}
  .tools .wrap{display:flex;flex-direction:column;gap:48px;}
  .tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
  @media (max-width:860px){.tool-grid{grid-template-columns:1fr;}}
  .tool-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:32px 30px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;}
  .tool-card.primary{background:var(--ink);color:#fff;}
  .tool-card.secondary{background:var(--light);border:1px solid var(--border);}
  .tool-card .eyebrow{color:var(--gold);}
  .tool-card.secondary .eyebrow{color:var(--ink);}
  .tool-card h3{font-size:24px;margin-top:12px;}
  .tool-card.secondary h3{color:var(--ink);}
  .tool-card p{font-size:14px;margin-top:10px;max-width:38ch;}
  .tool-card.primary p{color:#C7C7C7;}
  .tool-card.secondary p{color:var(--slate-500);}
  .tool-card .btn-secondary{margin-top:20px;align-self:flex-start;}
  .tool-card .cover-thumb{
    position:absolute;right:18px;bottom:18px;
    width:150px;aspect-ratio:3/4;border-radius:7px;
    box-shadow:0 12px 22px -10px rgba(0,0,0,.4);transform:rotate(3deg);
  }
  @media (max-width:480px){.tool-card .cover-thumb{display:none;}}
  /* Case study card -- literal .case-feature reuse from the homepage's Real
     Results section (same component the automation card also borrows). */
  .case-feature{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
  @media (max-width:860px){.case-feature{grid-template-columns:1fr;}}
  .case-feature-media{aspect-ratio:auto;min-height:320px;border-radius:0;}
  .case-feature-body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;}
  .case-feature-body .logo-ph{display:inline-flex;align-self:flex-start;height:48px;width:auto;min-width:160px;padding:0;margin-bottom:16px;margin-left:0;white-space:nowrap;}
  .case-feature-body h3{font-size:24px;line-height:1.35;}
  .case-feature-body p{color:var(--slate);font-size:15px;margin-top:14px;max-width:48ch;}
  .case-feature-body .btn-primary{margin-top:20px;align-self:flex-start;}

  /* Scoped down: when the case-feature sits inside the .tools tool-grid
     (next to the Guide card) it needs to match that card's ~220px
     footprint instead of the homepage's full-width Real Results size. */
  .tools .tool-grid .case-feature{min-height:220px;}
  .tools .tool-grid .case-feature-media{min-height:auto;}
  .tools .tool-grid .case-feature-body{padding:22px 24px;}
  .tools .tool-grid .case-feature-body .logo-ph{height:30px;min-width:100px;margin-bottom:10px;}
  .tools .tool-grid .case-feature-body h3{font-size:16px;line-height:1.35;}
  .tools .tool-grid .case-feature-body p{font-size:12.5px;margin-top:8px;}
  .tools .tool-grid .case-feature-body .btn-primary{margin-top:14px;}
  @media (max-width:860px){.tools .tool-grid .case-feature{grid-template-columns:1fr;}.tools .tool-grid .case-feature-media{min-height:160px;}}

/* ---------- Product Archive End ---------- */