/* ==========================================================================
   Lunar Packaging — frontend (Bootstrap 5.3 + custom)
   Tokens + layout mirrored from the live site's Elementor kit and rendering.
   ========================================================================== */

:root{
  --lp-primary:#000000;
  --lp-secondary:#343434;
  --lp-text:#111111;
  --lp-accent:#ED1F24;
  --lp-accent-dark:#c8161b;
  --lp-light:#F9F9F9;
  --lp-white:#FFFFFF;
  --lp-pink:#FFE6E7;
  --lp-pink-2:#FFD7D8;
  --lp-card-dark:#141414;
  --lp-border:#ececec;

  --lp-font-head:'Lora', serif;
  --lp-font-heading:'Lora', serif;
  --lp-font-body:'Outfit', sans-serif;

  --lp-container:1320px;
  --lp-radius:30px;
  --lp-inset:15px;

  --bs-body-font-family:var(--lp-font-body);
  --bs-body-color:var(--lp-text);
  --bs-link-color:var(--lp-accent);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}

body{
  font-family:var(--lp-font-body);
  font-size:17px;line-height:26px;font-weight:400;
  color:var(--lp-text);background:var(--lp-white);
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}

.container{max-width:var(--lp-container);padding-left:15px;padding-right:15px}

/* ---------- Type ---------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--lp-font-heading);color:var(--lp-primary);margin:0 0 .5rem;
}
h1,.h1{font-size:64px;line-height:74px;font-weight:700}
h2,.h2{font-size:42px;line-height:52px;font-weight:700}
h3,.h3{font-size:30px;line-height:40px;font-weight:600}
h4,.h4{font-size:26px;line-height:34px;font-weight:600}
h5,.h5{font-size:23px;line-height:32px;font-weight:600}
h6,.h6{font-size:20px;line-height:28px;font-weight:600}
p{margin:0 0 1rem}p:last-child{margin-bottom:0}
a{text-decoration:none;transition:.3s}

/* Two-tone headings — the live site's signature (span.color) */
.tr{color:var(--lp-accent)}
.lp-on-dark h1,.lp-on-dark h2,.lp-on-dark h3,.lp-on-dark h4,
.lp-on-dark h5,.lp-on-dark h6{color:var(--lp-white)}
.lp-on-dark{color:rgba(255,255,255,.8)}

/* ---------- Buttons ---------- */
.btn-lp{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--lp-font-head);font-size:16px;line-height:24px;font-weight:600;
  background:var(--lp-accent);color:var(--lp-white);
  border:2px solid var(--lp-accent);border-radius:50px;padding:14px 40px;
  transition:.3s;cursor:pointer;max-width:100%;text-align:center;
}
/* :focus-visible, not :focus — a mouse click used to leave the button stuck
   on the black hover colour for the rest of the page's life. */
.btn-lp:hover,.btn-lp:focus-visible{background:var(--lp-primary);border-color:var(--lp-primary);color:var(--lp-white)}

/* Submitting: stay on brand, just read as busy. */
.btn-lp:disabled,.btn-lp.is-loading,
.btn-lp:disabled:hover,.btn-lp.is-loading:hover{
  background:var(--lp-accent);border-color:var(--lp-accent);color:var(--lp-white);
  opacity:.75;cursor:wait;
}
.btn-lp-ghost{background:transparent;color:var(--lp-white);border-color:var(--lp-accent)}
.btn-lp-ghost:hover{background:var(--lp-accent);border-color:var(--lp-accent)}
.btn-lp-sm{padding:9px 24px;font-size:15px}

/* Outline pill badge — "100k+ Boxes Shipped Globally" */
.lp-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lp-white);color:var(--lp-accent);border:1px solid var(--lp-accent);
  font-family:var(--lp-font-head);font-weight:700;font-size:14px;line-height:20px;
  border-radius:50px;padding:8px 20px;
}

/* Section rhythm */
.lp-section{padding:90px 0}
.lp-section-sm{padding:56px 0}

/* Dark rounded panel — used by several sections, inset 15px like the live site */
.lp-panel{
  background:var(--lp-primary);border-radius:var(--lp-radius);
  margin:0 var(--lp-inset);padding:64px 0;
}
.lp-panel-tight{padding:40px 0}
/* CTA bars sit at container width (1320px) on the live site, not the 15px inset.
   35px of padding on every side matches the live spacing — the inner container's
   gutters are zeroed so 35px is the only inset, while the row's negative margin
   and the columns' padding still cancel each other out. */
.lp-panel-cta{
  max-width:var(--lp-container);
  margin-left:auto;
  margin-right:auto;
  padding:35px;
}
.lp-panel-cta > .container{max-width:none;padding-left:0;padding-right:0}
.lp-panel-cta p{color:var(--lp-white)}

/* Red rule above/below headings */
.lp-rule{width:86px;height:4px;background:var(--lp-accent);border-radius:4px}

/* ==========================================================================
   HEADER — solid red bar, full-bleed, sitting over the black hero
   ========================================================================== */
.lp-header{
  position:absolute;left:var(--lp-inset);right:var(--lp-inset);top:20px;z-index:1030;
  max-width:var(--lp-container);margin:0 auto;
  background:var(--lp-primary);
  border-radius:var(--lp-radius) var(--lp-radius) 0 0;
  transition:padding .3s,box-shadow .3s,border-radius .3s;
}
.lp-header.is-fixed{
  position:fixed;top:0;
  border-radius:0 0 var(--lp-radius) var(--lp-radius);
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.lp-header-inner{display:flex;align-items:center;gap:26px;padding:34px 0 21px;position:relative}
.lp-header.is-fixed .lp-header-inner{padding:12px 0}
.lp-header-rule{height:1px;background:rgba(255,255,255,.45)}
.lp-header>.container{padding-bottom:51px}
.lp-header.is-fixed>.container{padding-bottom:0}
.lp-header.is-fixed .lp-header-rule{display:none}

.lp-logo img{height:83px;width:auto;display:block;transition:height .3s}
.lp-header.is-fixed .lp-logo img{height:54px}

.lp-nav{display:flex;align-items:center;gap:2px;margin:0 auto 0 34px;padding:0;list-style:none}
.lp-nav>li{position:static}
.lp-nav>li>a{
  font-family:var(--lp-font-head);font-weight:600;font-size:15px;line-height:22px;white-space:nowrap;
  color:var(--lp-white);padding:9px 13px;display:inline-flex;align-items:center;gap:7px;border-radius:8px;
}
.lp-nav>li>a:hover,.lp-nav>li.is-open>a{color:var(--lp-primary)}
.lp-nav>li>a .fa-chevron-down{font-size:10px;transition:.3s}
.lp-nav>li.is-open>a .fa-chevron-down{transform:rotate(180deg)}

.lp-header-phone{
  font-family:var(--lp-font-head);font-weight:700;font-size:15px;color:var(--lp-white);white-space:nowrap;
}
.lp-header-phone:hover{color:var(--lp-primary)}
.lp-header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.lp-icon-btn{
  width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);color:var(--lp-white);border:none;transition:.3s;flex:0 0 auto;
}
.lp-icon-btn:hover{background:var(--lp-white);color:var(--lp-accent)}
.lp-burger{display:none}

/* Mega menu */
.lp-mega{
  position:absolute;left:0;right:0;top:100%;margin:26px auto 0;
  width:min(1080px,100%);
  background:var(--lp-white);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.18);
  padding:26px;opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;
}
.lp-nav>li.is-open .lp-mega{opacity:1;visibility:visible;transform:none}
.lp-mega-grid{display:grid;gap:8px}
.lp-mega-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:14px 8px;border-radius:14px;color:var(--lp-text);
  font-size:14px;line-height:20px;font-weight:500;transition:.25s;
}
.lp-mega-item img{width:40px;height:40px;object-fit:contain}
.lp-mega-item:hover{background:var(--lp-pink);color:var(--lp-accent)}
.lp-mega-prod{padding:9px}
.lp-mega-prod img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px}

/* Mobile drawer */
.lp-drawer{
  position:fixed;inset:0 auto 0 0;width:min(370px,86vw);background:var(--lp-white);
  z-index:1080;transform:translateX(-100%);transition:.35s;overflow-y:auto;padding:22px;
}
.lp-drawer.is-open{transform:none}
.lp-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:.3s;z-index:1070}
.lp-backdrop.is-open{opacity:1;visibility:visible}
.lp-drawer .lp-icon-btn{background:var(--lp-light);color:var(--lp-primary)}
.lp-drawer-nav li{list-style:none;border-bottom:1px solid var(--lp-border)}
.lp-drawer-nav a{display:block;padding:13px 4px;font-family:var(--lp-font-head);font-weight:600;color:var(--lp-primary)}
.lp-drawer-nav .sub a{padding-left:16px;font-weight:400;font-family:var(--lp-font-body);font-size:15px}
.lp-drawer-parent{display:flex;align-items:center;gap:4px}
.lp-drawer-parent > a{flex:1 1 auto;min-width:0}
.lp-drawer-toggle{
  flex:0 0 44px;width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--lp-primary);font-size:14px;
}
.lp-drawer-toggle i{transition:transform .2s}
.lp-drawer-sub{display:none;padding-bottom:6px}
.lp-drawer-sub.is-open{display:block}

/* ==========================================================================
   HERO — black inset panel, text left / product image right
   ========================================================================== */
.lp-hero-wrap{margin:16px var(--lp-inset) 0;border-radius:var(--lp-radius);overflow:hidden}
.lp-hero{background:var(--lp-primary);padding:250px 0 60px}
.lp-hero h1{color:var(--lp-white);margin-bottom:20px}
.lp-hero p{color:rgba(255,255,255,.8);max-width:60ch;margin-bottom:30px}
.lp-hero-img{max-width:100%;height:auto}

/* Brand band — #343434, bottom of the hero panel.
   The logo strip is a seamless marquee: frontend.js repeats the logo set until
   it covers the strip twice over, so translateX(-50%) loops without a seam.
   Spacing lives in the image margin, not a flex gap, so every repeat measures
   the same and the two halves stay identical. */
.lp-brands{background:var(--lp-secondary);padding:34px 0}
.lp-brands h4{color:var(--lp-white);font-size:26px;line-height:36px;margin:0}
.lp-brand-carousel{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.lp-brand-row{
  display:flex;
  align-items:center;
  width:max-content;
  animation:lp-brand-scroll var(--lp-brand-dur,32s) linear infinite;
}
.lp-brand-row img{
  flex:0 0 auto;
  height:34px;
  width:auto;
  margin:0 21px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
@keyframes lp-brand-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.lp-brand-carousel:hover .lp-brand-row{animation-play-state:paused}
/* No JS / no motion: fall back to a plain wrapped row */
@media (prefers-reduced-motion:reduce){
  .lp-brand-row{animation:none;width:auto;flex-wrap:wrap;justify-content:flex-end}
}

/* Hero fade slider — the first slide holds the box, the rest stack over it */
.lp-hero-slider{position:relative;display:inline-block;max-width:100%}
.lp-hero-slide{opacity:0;transition:opacity .7s ease}
.lp-hero-slide:first-child{position:relative}
.lp-hero-slide:not(:first-child){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain}
.lp-hero-slide.is-active{opacity:1}
.lp-hero-dots{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.lp-hero-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.38);
  transition:width .25s ease,background .25s ease;
}
.lp-hero-dot.is-active{width:22px;border-radius:99px;background:var(--lp-accent)}
@media (prefers-reduced-motion:reduce){
  .lp-hero-slide{transition:none}
}

/* ==========================================================================
   CARDS
   ========================================================================== */
/* light grey feature card (section 1) */
.lp-card-soft{background:var(--lp-light);border-radius:20px;padding:30px 26px;height:100%}
.lp-card-soft h4{color:var(--lp-accent);font-size:22px;line-height:30px;margin-bottom:10px}
.lp-card-soft p{font-size:15px;line-height:24px;color:var(--lp-secondary);margin:0}
.lp-icon-circle{
  width:56px;height:56px;border-radius:50%;background:var(--lp-pink);color:var(--lp-accent);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;
}

/* dark card, used inside black panels */
.lp-card-dark{background:var(--lp-card-dark);border-radius:16px;padding:24px 22px;height:100%}
.lp-card-dark h6{color:var(--lp-white);margin-bottom:8px}
.lp-card-dark p{font-size:15px;line-height:23px;color:rgba(255,255,255,.66);margin:0}
.lp-card-dark .ic{color:var(--lp-accent);font-size:26px;margin-bottom:14px;display:block}
.lp-feature-carousel{position:relative}
.lp-feature-arrow{display:none}

/* pink card (process) */
.lp-card-pink{background:var(--lp-pink);border-radius:16px;padding:24px 20px;height:100%}
.lp-card-pink img{width:54px;height:54px;object-fit:contain;margin-bottom:14px}
.lp-card-pink h6{font-size:18px;line-height:26px;margin-bottom:8px;color:var(--lp-primary)}
.lp-card-pink p{font-size:14px;line-height:22px;color:var(--lp-secondary);margin:0}

/* ---------- product / category card ---------- */
.lp-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--lp-white);
  border:1px solid var(--lp-border);
  border-radius:16px;overflow:hidden;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.lp-card:hover{
  transform:translateY(-4px);
  border-color:transparent;
  box-shadow:0 18px 38px rgba(0,0,0,.12);
}
/* keyboard users get a clear ring */
.lp-card:focus-visible{
  outline:3px solid var(--lp-accent);outline-offset:3px;
  transform:translateY(-4px);box-shadow:0 18px 38px rgba(0,0,0,.12);
}

/* No forced square — the image keeps the proportions it was shot at. */
.lp-card-img{position:relative;overflow:hidden;background:var(--lp-light)}
.lp-card-img img{display:block;width:100%;height:auto;object-fit:initial;transition:transform .6s ease}
.lp-card:hover .lp-card-img img,
.lp-card:focus-visible .lp-card-img img{transform:scale(1.06)}

.lp-card-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--lp-font-head);font-weight:700;font-size:16px;line-height:24px;
  color:var(--lp-primary);padding:16px 22px 20px;
  transition:color .3s ease;
}
.lp-card:hover .lp-card-title,
.lp-card:focus-visible .lp-card-title{color:var(--lp-accent)}
/* action arrow, right of the title */
.lp-card-title i{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--lp-accent);color:var(--lp-white);font-size:12px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateX(-8px);
  transition:opacity .3s ease,transform .3s ease,background .3s ease,color .3s ease;
}
.lp-card:hover .lp-card-title i,
.lp-card:focus-visible .lp-card-title i{opacity:1;transform:none}
/* pointing at the arrow itself flips its colour (same as .btn-lp) */
.lp-card-title i:hover{background:var(--lp-primary);color:var(--lp-white)}

/* touch devices never hover — keep the affordance visible */
@media (hover:none){
  .lp-card-title i{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .lp-card,.lp-card-img img,.lp-card-title i{transition:none}
  .lp-card:hover{transform:none}
  .lp-card:hover .lp-card-img img{transform:none}
}
@media (max-width:767px){
  .lp-card-title{padding:14px 18px 16px;font-size:15px;line-height:22px}
  .lp-card-title i{width:28px;height:28px;font-size:11px}
}

/* ==========================================================================
   CAROUSEL (shared) — red circular arrows like the live site
   ========================================================================== */
.lp-carousel{position:relative}
.lp-track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.lp-track::-webkit-scrollbar{display:none}
.lp-track>*{scroll-snap-align:start;flex:0 0 calc((100% - 4*24px)/5)}
.lp-track.per-3>*{flex:0 0 calc((100% - 2*24px)/3)}
.lp-track.per-blog>*{flex:0 0 calc((100% - 24px)/2)}
.lp-track.per-related>*{flex:0 0 calc((100% - 3*24px)/4)}
.lp-blog-btn-mob{display:none}
.lp-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:40px;height:40px;border-radius:50%;border:none;
  background:var(--lp-accent);color:var(--lp-white);
  display:flex;align-items:center;justify-content:center;font-size:14px;transition:.3s;
}
.lp-arrow:hover{background:var(--lp-primary)}
@media (min-width:768px){
  .lp-arrow.lp-feature-arrow,
  .lp-arrow.lp-process-arrow{display:none}
}
.lp-arrow-prev{left:-52px}
.lp-arrow-next{right:-52px}
.lp-arrows-tr{position:static;display:flex;gap:10px}
.lp-arrows-tr .lp-arrow{position:static;transform:none}

/* ==========================================================================
   FORM (inside the black quote panel)
   ========================================================================== */
/* Fields carry a faint fill rather than sitting transparent — on the black
   panel a hairline border alone left them nearly invisible. */
.lp-form .form-control{
  border:1px solid rgba(255,255,255,.9);border-radius:10px;padding:12px 16px;
  font-family:var(--lp-font-body);font-size:15px;
  background:rgba(255,255,255,.07);color:var(--lp-white);
}
.lp-form .form-control::placeholder{color:rgba(255,255,255,.62)}
.lp-form .form-control:hover{background:rgba(255,255,255,.1);border-color:#fff}
.lp-form .form-control:focus{
  border-color:var(--lp-accent);box-shadow:0 0 0 .2rem rgba(237,31,36,.22);
  background:rgba(255,255,255,.12);color:var(--lp-white);
}
/* Chrome paints autofilled fields near-white, which hides white text */
.lp-form .form-control:-webkit-autofill,
.lp-form .form-control:-webkit-autofill:hover,
.lp-form .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--lp-white);
  -webkit-box-shadow:0 0 0 1000px #1c1c1c inset;
  caret-color:var(--lp-white);
}
.lp-form input[type=file]::file-selector-button{
  background:var(--lp-white);color:var(--lp-primary);border:none;border-radius:6px;
  padding:5px 12px;margin-right:12px;font-family:var(--lp-font-head);font-weight:600;font-size:14px;
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.lp-testimonial{
  background:var(--lp-white);border:1px solid var(--lp-border);border-radius:16px;
  padding:28px 26px;height:100%;display:flex;flex-direction:column;
}
.lp-testimonial .quote{color:var(--lp-pink-2);font-size:34px;line-height:1;margin-bottom:14px}
.lp-testimonial p{font-size:15px;line-height:25px;color:var(--lp-secondary);flex:1}
.lp-testimonial hr{border-color:var(--lp-border);opacity:1;margin:18px 0 14px}
.lp-testimonial h5{font-size:18px;line-height:26px;margin-bottom:2px}
.lp-testimonial .role{font-size:13px;line-height:20px;color:var(--lp-accent);font-weight:600}

/* ==========================================================================
   FAQ — two columns of pink pills
   ========================================================================== */
.lp-accordion .accordion-item{border:none;border-radius:12px!important;margin-bottom:14px;overflow:hidden;background:var(--lp-pink)}
.lp-accordion .accordion-button{
  font-family:var(--lp-font-head);font-weight:600;font-size:16px;line-height:24px;
  color:var(--lp-primary);background:var(--lp-pink);padding:16px 20px;box-shadow:none;
}
.lp-accordion .accordion-button:not(.collapsed){color:var(--lp-accent);background:var(--lp-pink)}
.lp-accordion .accordion-button:focus{box-shadow:none}
.lp-accordion .accordion-button::after{
  content:"\f067";font-family:"Font Awesome 7 Free";font-weight:900;
  background:none;font-size:13px;width:auto;height:auto;transition:.3s;
}
.lp-accordion .accordion-button:not(.collapsed)::after{content:"\f068"}
.lp-accordion .accordion-body{padding:0 20px 18px;font-size:15px;line-height:24px;color:var(--lp-secondary)}

/* ==========================================================================
   COUNTERS — black bar, big red numbers
   ========================================================================== */
.lp-counter .num{font-family:var(--lp-font-heading);font-weight:700;font-size:52px;line-height:60px;color:var(--lp-accent)}
.lp-counter .lbl{font-size:15px;line-height:22px;color:var(--lp-white)}
.lp-vrule{width:1px;background:rgba(255,255,255,.28);align-self:stretch}

/* ==========================================================================
   PROCESS TABS
   ========================================================================== */
/* Tab strips — every set of tabs in the theme is one tinted track with the
   active tab as a solid pill inside it, rather than loose pills in a row.
   .lp-tabs is the process/section strip, .lp-otabs the panel strip. */
.lp-tabs-scroller{margin-bottom:28px}
.lp-tabs-scroller .lp-tabs{margin-bottom:0}
.lp-tabs-range{display:none}
.lp-tabs,
.lp-otabs{
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  list-style:none;
  background:var(--lp-pink);
  border:1px solid var(--lp-pink-2);
  border-radius:999px;
  padding:5px;
  margin:0 0 30px;
  max-width:100%;
}
.lp-tab,
.lp-otab{
  border:none;
  background:transparent;
  color:var(--lp-secondary);
  font-family:var(--lp-font-head);
  font-weight:600;
  font-size:15px;
  border-radius:999px;
  padding:10px 28px;
  transition:.3s;
  white-space:nowrap;
}
.lp-tab:hover,
.lp-otab:hover{background:var(--lp-pink-2);color:var(--lp-primary)}
.lp-tab.is-active,
.lp-otab.is-active{
  background:var(--lp-accent);
  color:var(--lp-white);
  box-shadow:0 2px 10px rgba(237,31,36,.28);
}
.lp-tab:focus-visible,
.lp-otab:focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}

/* ==========================================================================
   BLOG
   ========================================================================== */
.lp-blog-card{background:var(--lp-white);border:1px solid var(--lp-border);border-radius:16px;overflow:hidden;height:100%;display:flex;flex-direction:column}
.lp-blog-thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.lp-blog-thumb img{width:100%;height:100%;object-fit:cover;transition:.6s}
.lp-blog-card:hover .lp-blog-thumb img{transform:scale(1.05)}
.lp-blog-date{
  position:absolute;right:0;bottom:0;background:var(--lp-accent);color:var(--lp-white);
  font-family:var(--lp-font-head);font-weight:600;font-size:13px;
  padding:7px 18px;border-radius:50px 0 0 0;
}
.lp-blog-body{padding:20px;display:flex;flex-direction:column;flex:1;gap:12px}
.lp-blog-body h6{margin:0;flex:1;font-size:17px;line-height:25px}
.lp-read-more{font-family:var(--lp-font-head);font-weight:600;font-size:15px;color:var(--lp-accent);display:inline-flex;align-items:center;gap:8px}
.lp-read-more:hover{color:var(--lp-primary)}

/* ==========================================================================
   LONG-FORM (white text inside the black panel)
   ========================================================================== */
.lp-longform h2{font-size:30px;line-height:40px;margin:30px 0 14px;color:var(--lp-white)}
.lp-longform h3{font-size:24px;line-height:34px;margin:24px 0 12px;color:var(--lp-white)}
.lp-longform p{margin-bottom:14px;color:rgba(255,255,255,.72);font-size:16px;line-height:26px}
.lp-longform ul{padding-left:0;list-style:none;margin:0 0 16px}
.lp-longform ul li{position:relative;padding-left:28px;margin-bottom:9px;color:rgba(255,255,255,.72);font-size:16px}
.lp-longform ul li::before{
  content:"\f00c";font-family:"Font Awesome 7 Free";font-weight:900;
  position:absolute;left:0;top:1px;color:var(--lp-accent);font-size:13px;
}
.lp-longform a{color:var(--lp-accent)}
.lp-longform a:hover{text-decoration:underline}
/* Live site: a fixed 500px scroll box with a pink/red custom scrollbar */
.lp-longform-wrap{height:500px;overflow-y:scroll;padding-right:16px}
/* Beside the quote form the description matches the form's height instead of a
   fixed 500px: the column stretches to the row, and the scroll box is pinned
   inside it so its own content length never drives the row taller. */
@media (min-width:992px){
  /* column, not row — cosmetics.php puts an h2 above the box, and a row
     direction would sit the heading and the description side by side */
  .lp-longform-col{display:flex;flex-direction:column}
  .lp-longform-col > h2{flex:0 0 auto}
  /* wrapped form (home): the box is pinned inside a slot that stretches */
  .lp-longform-fit{position:relative;flex:1 1 auto;min-height:0;min-width:0}
  .lp-longform-fit > .lp-longform-wrap{
    position:absolute;
    inset:0;
    height:auto;
    overflow-y:scroll;   /* scroll, not auto — the red track stays visible */
  }
  /* bare form (category pages): the box is the stretching slot itself */
  .lp-longform-col > .lp-longform-wrap{
    flex:1 1 auto;
    min-height:0;
    height:auto;
    overflow-y:scroll;
  }
}
/* Keep the bar's space reserved so it is always on show rather than an overlay
   that fades in only while scrolling. */
.lp-longform-wrap{scrollbar-gutter:stable}
.lp-longform-wrap::-webkit-scrollbar{width:8px}
.lp-longform-wrap::-webkit-scrollbar-track{background-color:var(--lp-pink-2);border-radius:30px}
.lp-longform-wrap::-webkit-scrollbar-thumb{background-color:var(--lp-accent);border-radius:30px}
.lp-longform-wrap::-webkit-scrollbar-thumb:hover{background-color:var(--lp-accent-dark)}
/* Firefox has no ::-webkit-scrollbar, so it needs the standard properties. */
@supports not selector(::-webkit-scrollbar){
  .lp-longform-wrap{scrollbar-width:thin;scrollbar-color:var(--lp-accent) var(--lp-pink-2)}
}

/* Power of custom boxes — offset collage.
   A pink block sits behind and up-left of the images, a tall portrait leads,
   two squares stack beside it, and the fourth image floats over the seam with
   a white edge so the group reads as layered rather than as a flat grid. */
.lp-collage{position:relative;padding:26px 0 0 26px}
.lp-collage::before{
  content:"";
  position:absolute;
  inset:0 32% 14% 0;
  background:var(--lp-pink);
  border-radius:26px;
  z-index:0;
}
.lp-collage-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:16px;
}
.lp-collage-main img{
  width:100%;height:100%;min-height:460px;
  object-fit:cover;border-radius:18px;display:block;
}
.lp-collage-side{display:grid;gap:16px;align-content:start}
.lp-collage-side img{
  width:100%;aspect-ratio:1/1;
  object-fit:cover;border-radius:16px;display:block;
}
.lp-collage-float{position:absolute;left:34%;bottom:4%;width:44%;z-index:2}
.lp-collage-float img{
  width:100%;aspect-ratio:4/3;
  object-fit:cover;border-radius:16px;display:block;
  border:6px solid var(--lp-white);
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
/* Stacked on small screens the layering has nowhere to go, so the collage
   flattens into a plain image stack. */
@media (max-width:991px){
  .lp-collage{padding:0}
  .lp-collage::before{display:none}
  .lp-collage-main img{min-height:300px}
  .lp-collage-float{position:static;width:100%;margin-top:16px}
  .lp-collage-float img{border:0;box-shadow:none;aspect-ratio:16/9}
}

/* Quote panel on the category pages — the form and the description each have
   their own heading, so a plain two-column row leaves the description running
   well past the form. A two-row grid puts both headings on one row and both
   bodies on the next, which lands the description box level with the form and
   ends it level too. */
.lp-quote-grid{display:grid;gap:0 48px}
@media (min-width:992px){
  .lp-quote-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr)}
  .lp-quote-grid > .q-head-a{grid-area:1 / 1}
  .lp-quote-grid > .q-head-b{grid-area:1 / 2}
  .lp-quote-grid > .q-body-a{grid-area:2 / 1}
  .lp-quote-grid > .q-body-b{grid-area:2 / 2;min-height:0}
}
/* Stacked, the grid areas would interleave the two headings, so fall back to
   flow order: heading, form, heading, description. */
@media (max-width:991px){
  .lp-quote-grid{display:flex;flex-direction:column;gap:0}
  .lp-quote-grid > .q-head-a{order:1}
  .lp-quote-grid > .q-body-a{order:2;margin-bottom:36px}
  .lp-quote-grid > .q-head-b{order:3}
  .lp-quote-grid > .q-body-b{order:4;margin-top:16px}
}

/* Checklist with red ticks (section 6) */
.lp-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.lp-checks li{display:flex;gap:12px;font-size:15px;line-height:23px;color:var(--lp-secondary)}
.lp-checks i{color:var(--lp-accent);font-size:13px;margin-top:5px;flex:0 0 auto}

/* ==========================================================================
   FOOTER — black rounded card
   ========================================================================== */
/* Footer sizing mirrors the live site: 78px of head room, a 140px logo,
   23px column titles, 16/24 links, and a 30 / 20 / 20 / 30 split with no
   gutter so the copy starts flush with the container edge. */
.lp-footer{background:var(--lp-primary);border-radius:var(--lp-radius);margin:0 var(--lp-inset) 20px;padding:78px 0 30px;color:rgba(255,255,255,.76);font-size:16px;line-height:24px}
.lp-footer h5{color:var(--lp-accent);font-size:23px;line-height:32px;margin-bottom:15px}
.lp-footer h6{color:var(--lp-accent);font-size:18px;line-height:26px;margin-bottom:14px}
@media (min-width:992px){
  .lp-footer > .container{padding-left:0;padding-right:0}
  .lp-footer > .container > .row{--bs-gutter-x:0}
  .lp-footer > .container > .row > .col-lg-4{flex:0 0 30%;max-width:30%}
  .lp-footer > .container > .row > .col-lg-2{flex:0 0 20%;max-width:20%}
}
.lp-footer a{color:rgba(255,255,255,.86)}
.lp-footer a:hover{color:var(--lp-accent)}
.lp-footer ul{list-style:none;padding:0;margin:0}
.lp-footer ul li{margin-bottom:9px}
.lp-footer .lp-contact li{display:flex;gap:12px;align-items:flex-start}
.lp-footer .lp-contact i{color:var(--lp-accent);font-size:14px;margin-top:5px;flex:0 0 auto}
.lp-footer-logo{height:140px;width:auto;margin-bottom:18px}
.lp-certs{display:flex;gap:10px;align-items:center}
.lp-certs img{height:56px;width:auto}
/* Category hero slider — same fade component as the home hero, but it fills
   the column and carries the .hero-img rounding rather than sitting inline. */
.lp-plp-slider{display:block;width:100%;margin-top:26px}
.lp-plp-slider .lp-hero-slide{margin-top:0;border-radius:18px}
.lp-plp-slider .lp-hero-slide:not(:first-child){object-fit:cover}
.lp-plp-slider .lp-hero-dots{margin-top:14px}

/* "?" hint beside the product price — hover or keyboard focus opens it */
.lp-tip{position:relative;display:inline-flex;vertical-align:middle;margin-left:8px}
.lp-tip-btn{
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--lp-accent);background:var(--lp-accent);
  color:var(--lp-white);font-family:var(--lp-font-body);font-size:12px;font-weight:600;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:.25s;padding:0;
}
.lp-tip-btn:hover,
.lp-tip-btn:focus-visible,
.lp-tip:hover .lp-tip-btn{
  background:var(--lp-accent-dark);border-color:var(--lp-accent-dark);color:var(--lp-white);
  transform:scale(1.12);box-shadow:0 0 0 3px var(--lp-pink);
}
.lp-tip-bubble{
  position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  z-index:20;width:270px;max-width:70vw;
  background:#222;color:var(--lp-white);
  border-radius:8px;padding:8px 12px;
  font-size:12px;line-height:20px;font-weight:400;text-align:left;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s;
}
.lp-tip:hover .lp-tip-bubble,
.lp-tip:focus-within .lp-tip-bubble{opacity:1;visibility:visible}

/* Header "Get Quote" — outline red with white text, filling red on hover.
   Sized to sit level with the phone pill rather than the full .btn-lp height. */
.lp-quote-btn{padding:11px 26px;font-size:15px;border-width:2px}
.lp-quote-btn:hover,
.lp-quote-btn:focus-visible{background:var(--lp-accent);border-color:var(--lp-accent);color:var(--lp-white)}

/* WhatsApp button in the header — brand green (#25D366), darkening on hover
   to WhatsApp's own darker teal-green rather than the site's red. */
.lp-wa-btn{background:#25D366;color:var(--lp-white);text-decoration:none}
.lp-wa-btn i{font-size:20px}
.lp-wa-btn:hover,
.lp-wa-btn:focus-visible{background:#128C7E;color:var(--lp-white)}
.lp-social{display:flex;gap:20px;margin-top:6px}
.lp-social a{color:var(--lp-white);font-size:16px}
.lp-social a:hover{color:var(--lp-accent)}
.lp-footer .lp-contact + h6{margin-top:52px !important}
.lp-footer-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:56px;padding:30px 0 0}
.lp-footer-bottom p{font-size:17px;line-height:26px;margin:0;color:rgba(255,255,255,.72)}
.lp-pay img{height:26px;width:auto}

/* Floating */
.lp-whatsapp{position:fixed;left:22px;bottom:22px;z-index:1040;width:54px;height:54px;transition:.3s}
.lp-whatsapp:hover{transform:scale(1.08)}
.lp-whatsapp img{width:100%;height:100%}
.lp-top{
  position:fixed;right:22px;bottom:22px;z-index:1040;width:44px;height:44px;border-radius:50%;
  background:var(--lp-accent);color:var(--lp-white);border:none;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:.3s;
}
.lp-top.is-visible{opacity:1;visibility:visible}
.lp-top:hover{background:var(--lp-primary)}

/* ==========================================================================
   RESPONSIVE (1300 / 1024 / 767)
   ========================================================================== */
@media (max-width:1400px){
  .lp-arrow-prev{left:-10px}
  .lp-arrow-next{right:-10px}
}
/* Live override: hero H1 steps down between 1025px and 1450px */
@media screen and (min-width:1025px) and (max-width:1450px){
  .lp-hero h1{font-size:54px;line-height:64px}
}
@media (max-width:1300px){
  .lp-nav>li>a{padding:9px 9px;font-size:14px}
  .lp-logo img{height:64px}
}
@media (max-width:1024px){
  h1,.h1{font-size:48px;line-height:58px}
  h2,.h2{font-size:36px;line-height:44px}
  .lp-longform h2{font-size:26px;line-height:34px}
  h3,.h3{font-size:26px;line-height:36px}
  h4,.h4{font-size:24px;line-height:32px}
  .lp-nav{display:none}
  .lp-burger{display:inline-flex}
  .lp-logo img{height:56px}
  .lp-header>.container{padding-bottom:22px}
  .lp-header-inner{padding:26px 0 16px}
  .lp-header.is-fixed .lp-logo img{height:46px}
  .lp-hero{padding:180px 0 50px}
  .lp-section{padding:64px 0}
  .lp-panel{padding:48px 0}
  .lp-track>*{flex:0 0 calc((100% - 2*24px)/3)}
  .lp-track.per-3>*{flex:0 0 calc((100% - 24px)/2)}
  .lp-track.per-blog>*{flex:0 0 calc((100% - 24px)/2)}
  .lp-track.per-related>*{flex:0 0 calc((100% - 2*24px)/3)}
  .lp-brand-row img{margin:0 16px}
}
@media (max-width:767px){
  h1,.h1{font-size:34px;line-height:44px}
  h2,.h2{font-size:28px;line-height:37px}
  .lp-longform h2{font-size:22px;line-height:30px}
  .lp-longform h3{font-size:20px;line-height:28px}
  h3,.h3{font-size:23px;line-height:32px}
  h4,.h4{font-size:20px;line-height:28px}
  h5,.h5{font-size:19px;line-height:27px}
  body{font-size:16px;line-height:25px}
  :root{--lp-radius:20px;--lp-inset:10px}
  .lp-hero{padding:172px 0 40px}
  .lp-section{padding:48px 0}
  .lp-panel{padding:36px 0}
  .lp-brands .col-lg-4{text-align:center;min-width:0;max-width:100%}
  .lp-brands h4{font-size:22px;line-height:30px;text-align:center;width:100%}
  .lp-section .row.align-items-end > .col-lg-6:first-child{text-align:center;min-width:0;max-width:100%}
  .lp-section .row.align-items-end > .col-lg-6:first-child h2{font-size:22px;line-height:30px;text-align:center;width:100%}
  .lp-section .row.align-items-center.mb-4 > .col-lg-6:first-child{text-align:center;min-width:0;max-width:100%}
  .lp-section .row.align-items-center.mb-4 > .col-lg-6:first-child h2{text-align:center;width:100%}
  .lp-section .row.align-items-center.mb-4 > .col-lg-8{text-align:center;min-width:0;max-width:100%}
  .lp-section .row.align-items-center.mb-4 > .col-lg-8 h2,
  .lp-section .row.align-items-center.mb-4 > .col-lg-8 p{text-align:center;width:100%}
  .lp-testimonial{padding:20px}
  .lp-tabs,
  .lp-otabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    padding:4px;
  }
  .lp-tabs::-webkit-scrollbar,
  .lp-otabs::-webkit-scrollbar{display:none}
  .lp-tabs > li,
  .lp-otabs > li{flex:0 0 auto;scroll-snap-align:start}
  .lp-tab,
  .lp-otab{padding:9px 20px;font-size:14px}
  .lp-tabs-range{
    display:block;
    width:100%;
    height:4px;
    margin-top:14px;
    appearance:none;
    -webkit-appearance:none;
    background:var(--lp-pink);
    border-radius:99px;
    outline:none;
  }
  .lp-tabs-range::-webkit-slider-thumb{
    appearance:none;
    -webkit-appearance:none;
    width:22px;height:22px;border-radius:50%;
    background:var(--lp-accent);border:none;cursor:pointer;
  }
  .lp-tabs-range::-moz-range-thumb{
    width:22px;height:22px;border-radius:50%;
    background:var(--lp-accent);border:none;cursor:pointer;
  }
  .lp-tabs-range::-moz-range-track{
    height:4px;background:var(--lp-pink);border-radius:99px;
  }
  .lp-process-carousel.is-active{padding:0 40px}
  .lp-process-arrow{display:flex;width:32px;height:32px;font-size:12px}
  .lp-process-carousel .lp-arrow-prev{left:0}
  .lp-process-carousel .lp-arrow-next{right:0}
  .lp-tabpanel.is-active{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    gap:16px;
    margin-left:0;
    margin-right:0;
    --bs-gutter-x:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .lp-tabpanel.is-active::-webkit-scrollbar{display:none}
  .lp-tabpanel.is-active > [class*="col-"]{
    flex:0 0 100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    scroll-snap-align:start;
  }
  .lp-feature-carousel{padding:0 40px}
  .lp-feature-arrow{display:flex;width:32px;height:32px;font-size:12px}
  .lp-feature-carousel .lp-arrow-prev{left:0}
  .lp-feature-carousel .lp-arrow-next{right:0}
  .lp-feature-carousel .row{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    gap:16px;
    margin-left:0;
    margin-right:0;
    --bs-gutter-x:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .lp-feature-carousel .row::-webkit-scrollbar{display:none}
  .lp-feature-carousel .row > [class*="col-"]{
    flex:0 0 100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    scroll-snap-align:start;
  }
  .lp-brand-row img{height:28px;margin:0 14px}
  .lp-hero-dots{margin-top:14px}
  .lp-track>*,.lp-track.per-3>*{flex:0 0 78%}
  .lp-track.per-blog>*{flex:0 0 86%}
  .lp-track.per-related>*{flex:0 0 86%}
  .col-6:has(.lp-card){flex:0 0 50%;max-width:50%}
  .lp-blog-btn-desk{display:none}
  .lp-blog-btn-mob{display:block}
  .lp-panel.lp-panel-cta{
    margin-left:var(--lp-inset);
    margin-right:var(--lp-inset);
    max-width:none;
    width:auto;  padding:24px;
  }
  .lp-counter .num{font-size:36px;line-height:44px}
  .btn-lp{padding:11px 24px;font-size:15px}
  .lp-arrow-prev{left:-6px}.lp-arrow-next{right:-6px}
  .lp-footer-logo{height:62px}
  .lp-footer .col-6{flex:0 0 100%;max-width:100%}
  .lp-whatsapp{width:46px;height:46px;left:14px;bottom:14px}
  .lp-top{width:38px;height:38px;right:14px;bottom:14px}
}

/* ==========================================================================
   INNER PAGE HERO — black rounded panel with breadcrumb + centred heading
   ========================================================================== */
.lp-page-hero{background:var(--lp-primary);padding:261px 0 76px;text-align:center}
.lp-page-hero h1{font-size:42px;line-height:52px}
.lp-page-hero h1,.lp-page-hero h2{color:var(--lp-white);max-width:700px;margin:0 auto 18px}
.lp-page-hero p{color:rgba(255,255,255,.78);max-width:74ch;margin:0 auto}
.lp-crumb{font-size:15px;color:rgba(255,255,255,.7);margin-bottom:18px}
.lp-crumb a{color:var(--lp-accent)}
.lp-crumb a:hover{text-decoration:underline}

/* Listing grid: live uses the full container with 20px gaps (no side padding) */
.lp-grid{margin-left:-10px;margin-right:-10px}
.lp-grid>[class*=col-]{padding-left:10px;padding-right:10px;margin-bottom:20px}

/* Industry / listing grid card */
.lp-grid-card{display:block;height:100%}
.lp-grid-card .thumb{overflow:hidden;border-radius:14px;aspect-ratio:1;background:var(--lp-light)}
.lp-grid-card .thumb img{width:100%;height:100%;object-fit:cover;transition:.6s}
.lp-grid-card:hover .thumb img{transform:scale(1.06)}
.lp-grid-card h3{
  font-size:17px;line-height:25px;font-weight:700;color:var(--lp-primary);
  margin:14px 0 0;transition:.3s;
}
.lp-grid-card:hover h3{color:var(--lp-accent)}
/* Live keeps the category count in the DOM but hides it visually */
.lp-grid-card .count{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Centred quote panel (inner pages) */
.lp-quote-centred{max-width:840px;margin:0 auto;text-align:center}
.lp-quote-centred.lp-quote-wide{max-width:1220px}
.lp-quote-centred .lp-form{text-align:left;margin-top:26px}

/* Rich text block for policy / article pages */
.lp-prose h2{font-size:32px;line-height:42px;margin:36px 0 14px}
.lp-prose h3{font-size:25px;line-height:34px;margin:28px 0 12px}
.lp-prose h4{font-size:21px;line-height:30px;margin:22px 0 10px}
.lp-prose p{margin-bottom:16px;color:var(--lp-secondary)}
.lp-prose ul,.lp-prose ol{padding-left:0;list-style:none;margin:0 0 18px}
.lp-prose ol{counter-reset:lpo}
.lp-prose ul li,.lp-prose ol li{position:relative;padding-left:30px;margin-bottom:10px;color:var(--lp-secondary)}
.lp-prose ul li::before{
  content:"\f00c";font-family:"Font Awesome 7 Free";font-weight:900;
  position:absolute;left:0;top:2px;color:var(--lp-accent);font-size:13px;
}
.lp-prose ol li::before{
  counter-increment:lpo;content:counter(lpo) ".";
  position:absolute;left:0;top:0;color:var(--lp-accent);font-weight:700;font-family:var(--lp-font-head);
}
.lp-prose img{max-width:100%;height:auto;border-radius:14px;margin:18px 0}
.lp-prose a{color:var(--lp-accent)}
.lp-prose a:hover{text-decoration:underline}
.lp-prose table{width:100%;border-collapse:collapse;margin:18px 0}
.lp-prose th,.lp-prose td{border:1px solid var(--lp-border);padding:12px 14px;font-size:15px;text-align:left}
.lp-prose th{background:var(--lp-pink);font-family:var(--lp-font-head);font-weight:600}
.lp-prose-wrap{overflow-x:auto}

@media (max-width:1024px){
  .lp-page-hero{padding:180px 0 80px}
  .lp-page-hero h1{font-size:36px;line-height:44px}
}
@media (max-width:767px){
  .lp-page-hero{padding:172px 0 56px}
  .lp-page-hero h1{font-size:28px;line-height:37px}
  .lp-prose h2{font-size:25px;line-height:34px}
  .lp-prose h3{font-size:21px;line-height:30px}
}

/* Form gets depth without a fill: transparent background, soft shadow and a
   hairline ring so it lifts off the dark panel. */
.lp-form{
  background:transparent;
  border-radius:18px;
  padding:26px;
  box-shadow:0 22px 55px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10);
}
.lp-quote-centred .lp-form{text-align:left}
/* light pages: same idea, stronger lift on the white card */
.lp-form-light{box-shadow:none;padding:0;border-radius:0}
.lp-form-card{box-shadow:0 20px 46px rgba(0,0,0,.10)}
@media (max-width:767px){
  .lp-form{padding:18px}
  #quote .lp-form{padding:0;box-shadow:none;border-radius:0}
}

/* ==========================================================================
   FORM — light variant (form pages sit on white, unlike the dark panels)
   ========================================================================== */
/* Doubled up on .lp-form so these beat the dark rules further down the sheet —
   otherwise a select on a light form renders white-on-white and looks empty. */
.lp-form.lp-form-light .form-control,
.lp-form.lp-form-light .form-select{
  border:1px solid var(--lp-border);border-radius:10px;padding:12px 16px;
  font-family:var(--lp-font-body);font-size:15px;background:var(--lp-light);color:var(--lp-text);
}
.lp-form.lp-form-light .form-control::placeholder{color:#8a8a8a}
.lp-form.lp-form-light .form-control:hover,
.lp-form.lp-form-light .form-select:hover{background:var(--lp-white);border-color:#cfcfcf}
.lp-form.lp-form-light .form-select option{background:var(--lp-white);color:var(--lp-text)}
.lp-form.lp-form-light .form-control:focus,
.lp-form.lp-form-light .form-select:focus{
  border-color:var(--lp-accent);box-shadow:0 0 0 .2rem rgba(237,31,36,.14);background:var(--lp-white);color:var(--lp-text);
}
.lp-form.lp-form-light .form-control:-webkit-autofill,
.lp-form.lp-form-light .form-control:-webkit-autofill:hover,
.lp-form.lp-form-light .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--lp-text);
  -webkit-box-shadow:0 0 0 1000px var(--lp-light) inset;
  caret-color:var(--lp-text);
}
.lp-form.lp-form-light input[type=file]::file-selector-button{
  background:var(--lp-primary);color:var(--lp-white);border:none;border-radius:6px;
  padding:5px 12px;margin-right:12px;font-family:var(--lp-font-head);font-weight:600;font-size:14px;
}
.lp-form-card{background:var(--lp-white);border:1px solid var(--lp-border);border-radius:20px;padding:36px}

/* Contact info blocks */
.lp-info li{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px;list-style:none}
.lp-info{padding:0;margin:0 0 26px}
.lp-info i{color:var(--lp-accent);font-size:15px;margin-top:5px;flex:0 0 auto}
.lp-info a{color:var(--lp-text)}
.lp-info a:hover{color:var(--lp-accent)}
.lp-social-dark{display:flex;gap:12px}
.lp-social-dark a{
  width:40px;height:40px;border-radius:50%;background:var(--lp-pink);color:var(--lp-accent);
  display:inline-flex;align-items:center;justify-content:center;
}
.lp-social-dark a:hover{background:var(--lp-accent);color:var(--lp-white)}
@media (max-width:767px){
  .lp-form-card{padding:16px}
  .lp-quote-centred .lp-form{margin-top:0}
  .lp-form .row.g-3{--bs-gutter-y:.7rem;--bs-gutter-x:.7rem}
  .lp-form.lp-form-light .form-control,
  .lp-form.lp-form-light .form-select{padding:10px 14px}
}

/* ==========================================================================
   ARTICLE + SIDEBAR
   ========================================================================== */
.lp-article-hero{background:var(--lp-primary);padding:248px 0 80px}
/* The global 64px h1 is too heavy for a headline this long beside an image. */
.lp-article-hero h1{color:var(--lp-white);max-width:22ch;font-size:clamp(28px,2.9vw,42px);line-height:1.22}
.lp-article-hero .lp-crumb{margin-bottom:16px}
/* The banner carries its own text — show all of it, never crop to a ratio. */
.lp-article-hero-img{display:block;width:100%;height:auto;border-radius:20px;object-fit:initial}
/* post meta row */
.lp-article-meta{display:flex;flex-wrap:wrap;gap:12px 26px;list-style:none;padding:0;margin:22px 0 0}
.lp-article-meta li{display:flex;align-items:center;gap:9px;font-size:15px;color:rgba(255,255,255,.72)}
.lp-article-meta i{color:var(--lp-accent);font-size:14px}
.lp-article-meta a{color:rgba(255,255,255,.72)}
.lp-article-meta a:hover{color:var(--lp-accent)}
.lp-sidebar{position:sticky;top:110px}
.lp-widget{background:var(--lp-light);border-radius:16px;padding:24px;margin-bottom:24px}
.lp-widget h5{font-size:19px;margin-bottom:16px}
.lp-widget ul{list-style:none;padding:0;margin:0}
.lp-widget ul li{margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid var(--lp-border)}
.lp-widget ul li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.lp-widget a{color:var(--lp-text);font-size:15px;line-height:23px}
.lp-widget a:hover{color:var(--lp-accent)}
.lp-search{display:flex;gap:8px}
.lp-search input{flex:1;border:1px solid var(--lp-border);border-radius:10px;padding:11px 14px;font-family:var(--lp-font-body);font-size:15px}
.lp-search input:focus{outline:none;border-color:var(--lp-accent)}
.lp-search button{border:none;background:var(--lp-accent);color:#fff;border-radius:10px;padding:0 16px}
.lp-search button:hover{background:var(--lp-primary)}
.lp-recent{display:flex;gap:12px;align-items:flex-start}
.lp-recent img{width:72px;height:52px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.lp-postnav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--lp-border);padding-top:26px;margin-top:36px}
.lp-postnav a{font-family:var(--lp-font-head);font-weight:600;color:var(--lp-primary);max-width:46ch}
.lp-postnav a:hover{color:var(--lp-accent)}
.lp-postnav small{display:block;color:var(--lp-accent);font-weight:600;margin-bottom:4px}
@media (max-width:1024px){
  .lp-article-hero{padding:170px 0 50px}
  .lp-sidebar{position:static}
}
@media (max-width:767px){ .lp-article-hero{padding:162px 0 46px} .lp-article-meta{gap:10px 18px;font-size:14px} }

/* ==========================================================================
   PRODUCT LANDING HERO — content left, quote form right, feature strip below
   ========================================================================== */
.lp-plp-hero{background:var(--lp-primary);padding:236px 0 0}
.lp-plp-hero h1{color:var(--lp-white);margin-bottom:14px}
.lp-plp-hero>.container>.row>div>p{color:rgba(255,255,255,.78)}
.lp-plp-hero .hero-img{width:100%;height:auto;border-radius:18px;margin-top:26px}
.lp-form-labeled label{
  display:block;font-family:var(--lp-font-head);font-weight:600;font-size:14px;
  color:var(--lp-white);margin-bottom:6px;
}
.lp-form .form-select{
  border:1px solid rgba(255,255,255,.9);border-radius:10px;padding:12px 16px;
  font-family:var(--lp-font-body);font-size:15px;
  background-color:rgba(255,255,255,.07);color:var(--lp-white);
}
.lp-form .form-select:hover{background-color:rgba(255,255,255,.1);border-color:#fff}
.lp-form .form-select option{background:var(--lp-primary);color:var(--lp-white)}
.lp-form .form-select:focus{border-color:var(--lp-accent);box-shadow:0 0 0 .2rem rgba(237,31,36,.18)}
.lp-feature-strip{
  background:#1e1e1e;border-radius:16px;margin-top:44px;padding:22px 10px;
}
.lp-feature-strip .item{display:flex;gap:14px;align-items:center}
.lp-feature-strip i{color:var(--lp-accent);font-size:22px;flex:0 0 auto}
.lp-feature-strip h5{margin:0;font-family:var(--lp-font-heading);font-size:16px;color:var(--lp-white);line-height:22px}
.lp-feature-strip span{font-size:14px;color:rgba(255,255,255,.6);line-height:20px}
@media (max-width:1024px){ .lp-plp-hero{padding:160px 0 0} }
@media (max-width:767px){
  .lp-plp-hero{padding:154px 0 0}
  .lp-feature-strip{margin-top:30px}
  .lp-feature-strip .item{flex-direction:column;align-items:center;text-align:center;gap:10px}
}

/* ==========================================================================
   PRODUCT DETAIL — option galleries, price, spec blocks
   ========================================================================== */
.lp-opt{text-align:center}
.lp-opt img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;margin-bottom:12px}
.lp-opt h6{font-size:16px;line-height:24px;margin:0}
/* Courier logos are marks, not product shots: cap them so they stop stretching
   to the full column (414px, past their own 360px source) and contain rather
   than crop. */
.lp-opt-logo img{
  max-width:190px;
  margin-left:auto;margin-right:auto;
  object-fit:contain;
  background:var(--lp-light);
}
.lp-price{font-family:var(--lp-font-head);font-weight:700;font-size:30px;color:var(--lp-accent)}
.lp-price small{display:block;font-family:var(--lp-font-body);font-weight:400;font-size:14px;color:rgba(255,255,255,.65)}
.lp-qty{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.lp-qty input{
  width:88px;border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:11px 14px;
  background:transparent;color:var(--lp-white);font-family:var(--lp-font-body);
}
.lp-spec{background:var(--lp-light);border-radius:16px;padding:26px}
.lp-spec h6{color:var(--lp-accent);font-size:15px;line-height:22px;margin:0 0 6px}
.lp-spec p{font-size:15px;line-height:24px;color:var(--lp-secondary);margin:0}
/* Every label after the first opens a new row, so the pairs read as a spec
   sheet instead of running together in one block. */
.lp-spec p + h6{margin-top:16px;padding-top:16px;border-top:1px solid var(--lp-border)}

/* Visible field labels on light form pages */
.lp-form-labeled.lp-form-light label{color:var(--lp-primary)}

/* Process tab panels — all panels in the DOM, one visible at a time */
.lp-process-carousel{display:none;position:relative}
.lp-process-carousel.is-active{display:block}
.lp-tabpanel{display:none}
.lp-tabpanel.is-active{display:flex}

/* Recent-article titles are headings; keep them sized like list text */
.lp-recent h6{margin:0;font-size:14px;line-height:20px;font-weight:600;color:inherit}
.lp-widget a:hover h6{color:var(--lp-accent)}

/* Recent-article excerpts in the sidebar */
.lp-recent{flex-wrap:wrap}
.lp-recent .excerpt{display:block;width:100%;font-size:13px;line-height:19px;color:var(--lp-secondary);margin-top:4px}

/* Sub-heading inside a form (e.g. "Select Size" on Beat My Quote) */
.lp-form-subhead{font-family:var(--lp-font-head);font-weight:700;font-size:15px;color:var(--lp-primary);margin:6px 0 0}
.lp-on-dark .lp-form-subhead{color:var(--lp-white)}

/* Skip link */
.lp-skip{
  position:absolute;left:-9999px;top:0;z-index:2000;background:var(--lp-accent);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 0;font-family:var(--lp-font-head);font-weight:600;
}
.lp-skip:focus{left:0}

/* ==========================================================================
   PRODUCT PAGE — compact price row, option tabs, offset info cards
   ========================================================================== */
.lp-plp-hero .lp-prod-title{font-size:30px;line-height:40px;font-weight:700;color:var(--lp-white);margin-bottom:14px}
.lp-buyrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 6px}
.lp-buyrow .from{font-size:14px;color:rgba(255,255,255,.7)}
.lp-buyrow .amt{font-family:var(--lp-font-head);font-weight:700;font-size:20px;color:var(--lp-accent)}
.lp-buyrow input{
  width:64px;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 10px;
  background:transparent;color:var(--lp-white);font-family:var(--lp-font-body);
}
.lp-buyrow .btn-lp{padding:9px 22px;font-size:15px}

.lp-opanel{display:none}
.lp-opanel.is-active{display:block}
.lp-opanel>p{margin-bottom:24px}

/* Offset info cards: pink block behind, white card overlapping */
.lp-offset{position:relative}
.lp-offset .back{background:var(--lp-pink);border-radius:18px;padding:34px 30px}
.lp-offset .back h3{font-size:24px;line-height:33px;margin-bottom:14px}
.lp-offset .back p{font-size:15px;line-height:24px;color:var(--lp-secondary);margin:0}
.lp-offset .front{
  background:var(--lp-white);border:1px solid var(--lp-border);border-radius:18px;
  padding:32px;box-shadow:0 20px 50px rgba(0,0,0,.09);
}
.lp-offset .front h2{font-size:28px;line-height:38px;margin-bottom:8px}
@media (min-width:992px){
  .lp-offset .front{margin-left:-70px;margin-top:52px}
  /* The white card slides 70px over the pink block, so the block's own copy
     needs to stop short of that or it disappears under the overlap. */
  .lp-offset .back{margin-top:34px;padding-right:96px}
}
@media (max-width:991px){
  .row.lp-offset{row-gap:32px}
  .lp-offset .front{margin-top:0}
}

/* Listing card title with trailing arrow (materials) */
.lp-grid-card h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lp-grid-card h3 i{font-size:13px;transition:.3s}
.lp-grid-card:hover h3 i{transform:translateX(5px)}

/* About: four values in a dark strip (red icon + red title + light copy) */
.lp-value{text-align:center}
.lp-value i{color:var(--lp-accent);font-size:24px;display:block;text-align:center;margin-bottom:12px}
.lp-value h5{color:var(--lp-accent);font-size:18px;line-height:26px;margin-bottom:8px}
.lp-value p{font-size:14px;line-height:22px;color:rgba(255,255,255,.75);margin:0}

/* Contact page specifics: pink form card, hidden labels, red sub-headings, plain socials */
.lp-form-pink{background:var(--lp-pink);border-color:transparent}
.lp-form-pink .form-control{background:var(--lp-white);border-color:transparent}
.lp-form-pink.lp-form-card label,
.lp-form-pink .lp-form-labeled label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.lp-contact-side h5{color:var(--lp-accent)}
.lp-contact-side .lp-info .hours{color:var(--lp-accent);font-weight:600}
.lp-social-plain{display:flex;gap:16px}
.lp-social-plain a{color:var(--lp-primary);font-size:16px}
.lp-social-plain a:hover{color:var(--lp-accent)}

/* Elementor "labels-" (label position: none): kept in the DOM, hidden visually */
.lp-labels-none label{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ==========================================================================
   HEADER — phone as a button, search icon + modal
   ========================================================================== */
.lp-phone-btn{padding:11px 24px;font-size:15px;gap:9px}
.lp-phone-btn i{font-size:13px}
.lp-phone-btn:hover{background:var(--lp-white);border-color:var(--lp-white);color:var(--lp-primary)}

/* Search modal */
.lp-search-modal .modal-dialog{max-width:620px}
.lp-search-modal .modal-content{
  background:var(--lp-primary);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--lp-radius);color:var(--lp-white);padding:6px;
}
.lp-search-modal .modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid rgba(255,255,255,.14);padding:22px 26px 16px;
}
.lp-search-modal .modal-title{flex:1 1 auto}
.lp-search-modal .modal-title{font-family:var(--lp-font-heading);font-weight:700;font-size:24px;color:var(--lp-white);margin:0}
.lp-modal-close{
  width:38px;height:38px;border-radius:50%;border:none;flex:0 0 auto;margin-left:auto;
  background:rgba(255,255,255,.12);color:var(--lp-white);transition:.3s;
  display:inline-flex;align-items:center;justify-content:center;
}
.lp-modal-close:hover{background:var(--lp-accent)}
.lp-search-modal .modal-body{padding:24px 26px 28px}
.lp-search-form{display:flex;gap:12px;flex-wrap:wrap}
.lp-search-form .form-control{
  flex:1 1 260px;border:1px solid rgba(255,255,255,.28);border-radius:50px;
  padding:13px 22px;background:transparent;color:var(--lp-white);
  font-family:var(--lp-font-body);font-size:16px;
}
.lp-search-form .form-control::placeholder{color:rgba(255,255,255,.5)}
.lp-search-form .form-control:hover{border-color:rgba(255,255,255,.45)}
.lp-search-form .form-control:focus{
  outline:none;border-color:rgba(255,255,255,.6);box-shadow:none;
  background:transparent;color:var(--lp-white);
}
.lp-search-hint{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.55)}
@media (max-width:767px){
  .lp-search-modal .modal-title{font-size:20px}
  .lp-search-form .btn-lp{width:100%;justify-content:center}
}

/* Narrow phones (≤360px): step the display type down so it doesn't dominate */
@media (max-width:360px){
  h1,.h1{font-size:29px;line-height:38px}
  h2,.h2{font-size:25px;line-height:34px}
  .lp-longform h2{font-size:20px;line-height:28px}
  .lp-hero h1{font-size:29px;line-height:38px}
  .btn-lp{padding:11px 20px;font-size:14px}
}
/* comfortable back-to-top target */
@media (max-width:767px){
  .lp-top{width:44px;height:44px}
}

/* ==========================================================================
   PRODUCT GALLERY — main stage + thumbnail carousel
   ========================================================================== */
.lp-gallery{margin-top:22px}
.lp-gallery-stage{
  position:relative;border-radius:18px;overflow:hidden;
  /* 7:5 is the real ratio of the product shots (700x500), not an invented crop */
  background:var(--lp-light);aspect-ratio:7/5;
}
.lp-gallery-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .35s ease;
}
.lp-gallery-stage img.is-active{opacity:1}
.lp-gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(0,0,0,.55);color:var(--lp-white);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  transition:background .3s ease;
}
.lp-gallery-nav:hover{background:var(--lp-accent)}
.lp-gallery-nav:focus-visible{outline:3px solid var(--lp-accent);outline-offset:2px}
.lp-gallery-prev{left:12px}
.lp-gallery-next{right:12px}
.lp-gallery-count{
  position:absolute;right:12px;bottom:12px;z-index:3;
  background:rgba(0,0,0,.6);color:var(--lp-white);
  border-radius:50px;padding:4px 12px;font-size:13px;
  font-family:var(--lp-font-heading);
}
.lp-thumbs{
  display:flex;gap:10px;margin-top:12px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
}
.lp-thumbs::-webkit-scrollbar{display:none}
.lp-thumb{
  flex:0 0 84px;scroll-snap-align:start;
  border:2px solid transparent;border-radius:12px;overflow:hidden;
  background:none;padding:0;cursor:pointer;transition:border-color .3s ease,opacity .3s ease;
  opacity:.65;
}
.lp-thumb img{width:100%;height:64px;object-fit:contain;display:block;background:var(--lp-light)}
.lp-thumb:hover{opacity:1}
.lp-thumb.is-active{border-color:var(--lp-accent);opacity:1}
.lp-thumb:focus-visible{outline:3px solid var(--lp-accent);outline-offset:2px}

/* ==========================================================================
   PRICING TIERS
   ========================================================================== */
.lp-price-note{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--lp-pink);color:var(--lp-accent);
  border-radius:50px;padding:8px 18px;font-size:14px;font-weight:600;
  font-family:var(--lp-font-heading);margin-bottom:22px;
}
.lp-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.lp-tier{
  background:var(--lp-white);border:1px solid var(--lp-border);
  border-radius:16px;padding:22px 18px;text-align:center;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.lp-tier:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.10);border-color:transparent}
.lp-tier .qty{font-family:var(--lp-font-heading);font-weight:700;font-size:18px;color:var(--lp-primary)}
.lp-tier .unit{font-family:var(--lp-font-heading);font-weight:700;font-size:30px;line-height:40px;color:var(--lp-accent);margin:8px 0 2px}
.lp-tier .per{font-size:13px;color:var(--lp-secondary)}
.lp-tier .save{
  display:inline-block;margin-top:12px;background:var(--lp-pink);color:var(--lp-accent);
  border-radius:50px;padding:4px 12px;font-size:12px;font-weight:600;
}
.lp-tier.is-popular{border-color:var(--lp-accent);position:relative}
.lp-tier.is-popular::before{
  content:"Most popular";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--lp-accent);color:var(--lp-white);border-radius:50px;
  padding:3px 14px;font-size:11px;font-weight:600;font-family:var(--lp-font-heading);white-space:nowrap;
}
@media (max-width:1024px){ .lp-tiers{grid-template-columns:repeat(3,1fr)} }
@media (max-width:767px){
  .lp-tiers{grid-template-columns:repeat(2,1fr);gap:12px}
  .lp-tier{padding:18px 12px}
  .lp-tier .unit{font-size:25px;line-height:34px}
  .lp-thumb{flex:0 0 68px}
  .lp-thumb img{height:52px}
}

/* Process tabs: visible single-row overflow scroller on mobile */
@media (max-width:767px){
  .lp-tabs-scroller{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    margin-bottom:22px;
  }
  #lpTabs.lp-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    width:100%;
    max-width:100%;
    gap:10px;
    padding-bottom:10px;
    scrollbar-width:thin;
    scrollbar-color:var(--lp-accent) var(--lp-pink);
  }
  #lpTabs.lp-tabs::-webkit-scrollbar{
    display:block;
    height:4px;
  }
  #lpTabs.lp-tabs::-webkit-scrollbar-track{
    background:var(--lp-pink);
    border-radius:99px;
  }
  #lpTabs.lp-tabs::-webkit-scrollbar-thumb{
    background:var(--lp-accent);
    border-radius:99px;
  }
  #lpTabs.lp-tabs > li{flex:0 0 auto}
  .lp-tabs-range{display:none}

  /* Process cards: one card + arrows, swipe/slide */
  #lpProcess .lp-process-carousel.is-active{
    display:block;
    position:relative;
    padding:0 40px;
  }
  #lpProcess .lp-arrow.lp-process-arrow{
    display:flex;
    width:32px;
    height:32px;
    font-size:12px;
  }
  #lpProcess .lp-process-carousel .lp-arrow-prev{left:0}
  #lpProcess .lp-process-carousel .lp-arrow-next{right:0}
  #lpProcess .lp-tabpanel.is-active{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    gap:16px;
    margin-left:0;
    margin-right:0;
    --bs-gutter-x:0;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  #lpProcess .lp-tabpanel.is-active::-webkit-scrollbar{display:none}
  #lpProcess .lp-tabpanel.is-active > .col-6{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
    padding-left:0;
    padding-right:0;
    scroll-snap-align:start;
  }
}
.lp-footer-toggle{
  display:block;width:100%;padding:0;border:none;background:none;
  color:inherit;text-align:left;
}
.lp-footer-toggle h5{margin:0 0 15px}
.lp-footer-toggle i{display:none}

@media (min-width:768px){
  #lpProcess .lp-arrow.lp-process-arrow{display:none}
  #lpProcess .lp-process-carousel.is-active{padding:0}
  #lpProcess .lp-tabpanel.is-active{
    flex-wrap:wrap;
    overflow:visible;
  }

  /* Homepage blog: the latest four posts as a grid, no slide */
  .lp-blog-carousel{position:relative}
  .lp-blog-arrow{display:none}
  #blogTrack.lp-track.per-blog{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    overflow:visible;
  }
  #blogTrack.lp-track.per-blog > *{flex:none;width:auto;max-width:none}

  /* Category strip stays a carousel on desktop — five per slide, paged by
     the arrows, so a longer selection is reachable. */

  /* Testimonials stay a carousel on desktop — three per slide, paged by the
     arrows that now sit level with the heading. */

  /* Related products stay a carousel on desktop — .per-related shows four
     per slide and the arrows page through the eight the query returns. */
}
@media (min-width:768px) and (max-width:1199px){
  #blogTrack.lp-track.per-blog{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .lp-blog-carousel{
    position:relative;
    padding:0 40px;
  }
  .lp-arrow.lp-blog-arrow{
    display:flex;
    width:32px;
    height:32px;
    font-size:12px;
  }
  .lp-blog-carousel .lp-arrow-prev{left:0}
  .lp-blog-carousel .lp-arrow-next{right:0}
  #blogTrack.lp-track.per-blog{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  #blogTrack.lp-track.per-blog > *{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
    scroll-snap-align:start;
  }

  .lp-carousel:has(#catTrack),
  .lp-tst-carousel,
  .lp-related-carousel{
    padding:0 40px;
  }
  .lp-arrow.lp-cat-arrow,
  .lp-arrow.lp-tst-arrow,
  .lp-arrow.lp-related-arrow{
    display:flex;
    width:32px;
    height:32px;
    font-size:12px;
  }
  #catTrack.lp-track > *,
  #tstTrack.lp-track > *,
  #relatedTrack.lp-track > *{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
    scroll-snap-align:start;
  }
  .lp-arrows-tr{display:none}

  .lp-footer{text-align:left;padding:32px 0 0}
  .lp-footer > .container > .row{
    --bs-gutter-x:0;
    --bs-gutter-y:0;
  }
  .lp-footer .col-lg-4,
  .lp-footer .col-lg-5,
  .lp-footer .col-lg-7,
  .lp-footer .col-12{
    flex:0 0 100%;
    max-width:100%;
    padding:20px 0;
    margin:0;
    border-top:1px solid rgba(255,255,255,.16);
  }
  .lp-footer > .container > .row > .col-12:first-child{
    border-top:none;
    padding-top:0;
  }
  .lp-footer-logo{display:block;margin:0 0 12px}
  .lp-footer p{margin:0}
  .lp-footer h5,
  .lp-footer-toggle h5{
    margin:0 0 12px;
    font-size:16px;
    line-height:24px;
    white-space:normal;
  }
  .lp-footer h6,
  .lp-footer .mt-4{margin:20px 0 12px !important;font-size:16px;line-height:24px}
  .lp-certs{justify-content:flex-start;margin:0}
  .lp-certs img{max-width:100%;height:auto;max-height:48px}
  .lp-social{justify-content:flex-start;margin:0}
  .lp-footer .lp-contact li{justify-content:flex-start}
  .lp-footer-col{
    display:block;
    overflow:visible;
    text-align:left;
  }
  .lp-footer-toggle{
    display:block;
    width:100%;
    padding:0;
    cursor:default;
    pointer-events:none;
    text-align:left;
  }
  .lp-footer-toggle i{display:none}
  .lp-footer-col-body{display:block;width:100%;padding:0}
  .lp-footer-col-body ul{display:block;margin:0;overflow:visible}
  .lp-footer ul li,
  .lp-footer-col-body ul li,
  .lp-footer .lp-contact li{
    display:block;
    margin:0 0 10px;
    white-space:normal;
  }
  .lp-footer ul li:last-child,
  .lp-footer-col-body ul li:last-child,
  .lp-footer .lp-contact li:last-child{margin-bottom:0}
  .lp-footer-bottom{
    text-align:left;
    margin-top:0;
    padding:20px 0;
  }
  .lp-pay{justify-content:flex-start;margin:0}
  .lp-pay img{max-width:48%;height:auto;max-height:28px}
}

/* Homepage section + description headings */
@media (max-width:1024px){
  #quote .col-lg-9 > h2,
  #quote .col-lg-7 > h2,
  #quote .col-lg-5 > h2{font-size:26px;line-height:34px}
}
@media (max-width:767px){
  .lp-hero h1{font-size:28px;line-height:36px;text-align:center}
  .lp-section h2,
  .lp-panel h2,
  #quote .col-lg-9 > h2,
  #quote .col-lg-7 > h2,
  #quote .col-lg-5 > h2{
    font-size:22px;
    line-height:30px;
    text-align:center;
    width:100%;
  }
  .lp-longform h2{font-size:20px;line-height:28px;text-align:left}
  .lp-rule{margin-left:auto;margin-right:auto}
}
@media (max-width:360px){
  .lp-hero h1{font-size:24px;line-height:32px}
  .lp-section h2,
  .lp-panel h2,
  #quote .col-lg-9 > h2,
  #quote .col-lg-7 > h2,
  #quote .col-lg-5 > h2{font-size:20px;line-height:28px}
  .lp-longform h2{font-size:18px;line-height:26px}
}

/* Sliders: dots under the track, arrows off */
.lp-dots{
  display:none;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.lp-dot{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(17,17,17,.22);
  transition:width .25s ease,background .25s ease;
}
.lp-dot.is-active{
  width:22px;
  border-radius:99px;
  background:var(--lp-accent);
}
.lp-on-dark .lp-dot,
.lp-brands .lp-dot{background:rgba(255,255,255,.38)}
.lp-on-dark .lp-dot.is-active,
.lp-brands .lp-dot.is-active{background:var(--lp-accent)}
@media (min-width:768px){
  .lp-dots{display:none !important}
}
@media (max-width:767px){
  .lp-dots{display:flex}
  .lp-arrow{display:none !important}
  .lp-brand-carousel,
  .lp-feature-carousel,
  .lp-process-carousel.is-active,
  #lpProcess .lp-process-carousel.is-active,
  .lp-blog-carousel,
  .lp-carousel:has(#catTrack),
  .lp-tst-carousel,
  .lp-related-carousel{padding-left:0;padding-right:0}
  .lp-track > *,
  .lp-track.per-3 > *,
  .lp-track.per-blog > *,
  .lp-track.per-related > *{
    flex:0 0 100%;
    width:100%;
    max-width:100%;
  }

  /* Product / category cards: 2-up, compact, no title arrow */
  .row:has(.lp-card){
    --bs-gutter-x:10px;
    --bs-gutter-y:12px;
  }
  .col-12:has(.lp-card),
  .col-6:has(.lp-card){
    flex:0 0 50%;
    max-width:50%;
    padding-left:5px;
    padding-right:5px;
  }
  #catTrack.lp-track > .lp-card,
  #relatedTrack.lp-track > .lp-card,
  #relatedTrack.lp-track > *,
  .lp-track.per-related > .lp-card{
    flex:0 0 calc(50% - 5px);
    width:calc(50% - 5px);
    max-width:calc(50% - 5px);
  }
  #catTrack.lp-track,
  #relatedTrack.lp-track{gap:10px}
  .lp-card{border-radius:12px}
  .lp-card-title{
    justify-content:center;
    text-align:center;
    padding:8px 8px 0;
    font-size:13px;
    line-height:17px;
    gap:0;
  }
  .lp-card-title i{display:none !important}
  .lp-card::after{
    content:"Customize Now";
    display:flex;
    align-items:center;
    justify-content:center;
    margin:7px 8px 10px;
    padding:6px 8px;
    border-radius:99px;
    background:var(--lp-accent);
    color:var(--lp-white);
    font-family:var(--lp-font-head);
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
  }
}