/* ==========================================================================
   Go Dumpster Rentals — landing page
   Fonts : Montserrat (display) + Open Sans (text)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --green-900:#00220d;
  --green-800:#012910;   /* brand deep green (sampled from the design) */
  --green-700:#043a17;
  --green-600:#0a5127;
  --green-500:#0f7a3a;
  --green-dot:#12b552;

  --orange-500:#ff6500;
  --orange-600:#f25c00;
  --orange-700:#d84f00;

  --ink:#12241a;
  --ink-soft:#3d4a42;
  --line:#e2e7e3;
  --line-soft:#eef0ed;
  --paper:#f9f9f8;
  --panel:#f0f1ef;
  --white:#fff;

  --font-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-text:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --shell:1400px;
  --gutter:clamp(16px,4vw,40px);
  /* distance from the shell's inner edge out to the viewport edge */
  --bleed:max(var(--gutter),calc((100vw - var(--shell)) / 2 + var(--gutter)));

  --radius-sm:6px;
  --radius:12px;
  --radius-lg:18px;

  --shadow-card:0 10px 28px rgba(1,41,16,.09);
  --shadow-card-hover:0 20px 44px rgba(1,41,16,.18);
  --shadow-cta:0 12px 26px rgba(255,101,0,.32);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--orange-500);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--radius-sm) 0;
  font-family:var(--font-display);font-weight:800;
}
.skip-link:focus{left:0}

:where(a,button):focus-visible{
  outline:3px solid var(--orange-500);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 3. Shared pieces ---------- */
.icon-badge{
  flex:none;
  display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--orange-500);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,101,0,.34);
}
.icon-badge svg{width:26px;height:26px}
.icon-badge--lg{width:68px;height:68px}
.icon-badge--lg svg{width:34px;height:34px}

.live-dot{
  flex:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--green-dot);
  box-shadow:0 0 0 0 rgba(18,181,82,.55);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(18,181,82,.5)}
  70%{box-shadow:0 0 0 10px rgba(18,181,82,0)}
  100%{box-shadow:0 0 0 0 rgba(18,181,82,0)}
}

/* Dynamic Number Insertion.
   Phone numbers are injected by leads-magician.com/dni.js, so the markup ships
   without digits. In their place sits a shimmering skeleton bar that occupies
   the exact footprint of the finished number, then cross-fades into it.

   The placeholder is a real string of digits — "(000) 000-0000" — held at
   opacity 0 inside the skeleton. That is what makes the width correct for free:
   the browser measures the same glyphs it will later paint, at whatever font
   size that particular button happens to use. tabular-nums keeps every digit the
   same width so the swap lands pixel-for-pixel. */
.dni-num{display:inline-block;font-variant-numeric:tabular-nums}

/* Two stacked layers, both tinted with currentColor so the bar reads correctly
   on white, on orange and on deep green without any per-context overrides:
   ::before is the resting bar, ::after is a brighter highlight travelling across
   it. They have to be separate layers — painting currentColor onto a
   currentColor background produces no contrast at all, and no shimmer. */
.dni-skeleton{position:relative;display:inline-block;user-select:none}
.dni-skeleton i{font-style:inherit;opacity:0}
.dni-skeleton::before,
.dni-skeleton::after{
  content:"";
  position:absolute;
  left:0;right:0;top:50%;
  height:.66em;
  transform:translateY(-56%);
  border-radius:.16em;
}
.dni-skeleton::before{
  background:currentColor;
  opacity:.16;
}
.dni-skeleton::after{
  background-image:linear-gradient(90deg,transparent 0%,currentColor 50%,transparent 100%);
  background-size:45% 100%;
  background-repeat:no-repeat;
  opacity:.24;
  animation:dni-sweep 1.4s linear infinite;
}
@keyframes dni-sweep{
  from{background-position:-60% 0}
  to{background-position:160% 0}
}

/* The number itself eases in, so it arrives rather than snaps.
   Deliberately no fill-mode: with "both" the element would sit at the 0%
   keyframe — invisible — whenever the animation does not actually run, which
   happens in a backgrounded tab. Unfilled, the resting state is the visible one
   and the fade is purely additive. */
.dni-num.is-live{animation:dni-in .45s var(--ease)}
@keyframes dni-in{
  from{opacity:0;transform:translateY(.14em)}
  to{opacity:1;transform:none}
}

.dispatch{
  display:flex;align-items:flex-start;gap:11px;
}
.dispatch .live-dot{margin-top:6px}
.dispatch strong{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(15px,1.35vw,18px);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--green-500);
}
.dispatch small{
  display:block;
  font-size:clamp(13px,1.1vw,15px);
  color:var(--ink-soft);
  margin-top:2px;
}
.dispatch--light strong{color:#fff}
.dispatch--light small{color:#dceadf}

/* ---------- 4. Header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(120deg,var(--green-900) 0%,var(--green-800) 45%,var(--green-700) 100%);
  color:#fff;
  box-shadow:0 3px 20px rgba(0,0,0,.22);
}
.header-inner{
  min-height:104px;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding-block:12px;
}
.brand{
  display:block;
  background:#fff;
  border-radius:14px;
  padding:9px 20px;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  transition:transform .25s var(--ease);
}
.brand:hover{transform:translateY(-1px)}
.brand img{width:clamp(230px,26vw,352px);height:auto}

.header-phone{
  display:flex;align-items:center;gap:14px;
  transition:transform .2s var(--ease);
}
.header-phone:hover{transform:translateY(-1px)}
.header-phone-text strong{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(21px,2.5vw,34px);
  line-height:1;
  letter-spacing:-.01em;
}
.header-phone-text small{
  display:block;
  font-size:clamp(12px,1.15vw,16px);
  color:#dbe8de;
  margin-top:5px;
}

/* ---------- 5. Hero ---------- */
/* overflow:hidden trims the scene bleed at the viewport edge, so the page
   never reports horizontal overflow no matter how wide the scrollbar is */
.hero{position:relative;background:#fff;overflow:hidden}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,40%) minmax(0,60%);
  align-items:stretch;
}
.hero-copy{
  position:relative;z-index:3;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,3.2vw,44px) clamp(18px,2.2vw,30px) clamp(30px,3.2vw,42px) 0;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(44px,5.1vw,72px);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--green-900);
}
.hero-sub{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px,2.5vw,35px);
  line-height:1.06;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--green-900);
  margin:clamp(12px,1.4vw,20px) 0 clamp(14px,1.6vw,22px);
}
.hero-sub span{color:var(--orange-500)}

.hero-checks{display:grid;gap:clamp(7px,.8vw,11px);margin-bottom:clamp(16px,1.9vw,25px)}
.hero-checks li{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(14px,1.4vw,19px);
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--green-900);
}
.hero-checks .tick{
  flex:none;
  width:clamp(20px,1.9vw,26px);height:clamp(20px,1.9vw,26px);
  color:var(--green-700);
}

.cta-button{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,var(--orange-500),var(--orange-600));
  color:#fff;
  border-radius:var(--radius);
  padding:clamp(11px,1.15vw,16px) clamp(18px,1.8vw,26px);
  box-shadow:var(--shadow-cta);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease);
}
.cta-button:hover{
  transform:translateY(-3px);
  background:linear-gradient(135deg,var(--orange-600),var(--orange-700));
  box-shadow:0 18px 34px rgba(255,101,0,.4);
}
.cta-button:active{transform:translateY(-1px)}
.cta-icon{
  flex:none;display:grid;place-items:center;
  width:clamp(38px,3.4vw,50px);height:clamp(38px,3.4vw,50px);
  border-radius:50%;
  background:#fff;color:var(--orange-500);
}
.cta-icon svg{width:56%;height:56%}
.cta-text strong{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(23px,2.55vw,36px);
  line-height:1;
  letter-spacing:-.01em;
}
.cta-text small{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(12px,1.15vw,16px);
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-top:6px;
}

.hero-copy .dispatch{margin-top:clamp(12px,1.3vw,18px)}

/* Hero photography — one composite image.
   The diagonal seam and the "Residential / Commercial Projects" labels are baked
   into the artwork, so there is nothing to clip or position here. The block
   bleeds past the shell so the photo reaches the viewport edge.

   Framing rule that drives every number below: the two labels sit only ~8% in
   from the left and right edges of the artwork, so ANY horizontal crop starts
   eating them almost immediately. The frame therefore has to stay wider than
   3:2 — the artwork's own ratio — at every size, which keeps object-fit: cover
   trimming vertically and never from the sides. object-position pins that
   trimming near the top, where the labels are, so the loss comes off the
   driveway and dirt at the bottom instead. Side by side that means a generous
   media column (60%) and a compact copy column; below 1520px the two stack and
   the whole composite is shown uncropped, capped at 980px wide. */
.hero-media{
  position:relative;
  aspect-ratio:1536/1024;
  min-height:clamp(400px,34vw,520px);
  /* aspect-ratio lets the artwork set the row height, so a wide viewport gets
     the whole composite uncropped. Without this cap the same rule would also let
     the frame derive its WIDTH from a copy-driven row and spill past the
     viewport, clipping the right-hand label. */
  max-width:calc(100% + var(--bleed));
  margin-right:calc(-1 * var(--bleed));
  background:#fff;
  overflow:hidden;
}
.hero-media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 8%;
}
.hero-media::after{ /* blend the photo into the white copy column */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.8) 4%,rgba(255,255,255,0) 20%);
  pointer-events:none;
}

/* ---------- 6. Benefit strip ---------- */
.benefits{
  background:linear-gradient(120deg,var(--green-900) 0%,var(--green-800) 50%,var(--green-700) 100%);
  color:#fff;
}
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.benefit{
  display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  padding:clamp(20px,2.2vw,30px) clamp(14px,1.9vw,30px);
  border-right:1px solid rgba(255,255,255,.16);
}
.benefit:last-child{border-right:0}
.benefit:first-child{padding-left:0}
.benefit-icon{
  flex:none;
  width:clamp(42px,3.9vw,56px);height:clamp(42px,3.9vw,56px);
  color:#fff;
}
.benefit strong{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(13px,1.25vw,17px);
  letter-spacing:.015em;
  text-transform:uppercase;
  line-height:1.2;
}
.benefit span{
  display:block;
  font-size:clamp(12.5px,1.1vw,15px);
  line-height:1.45;
  color:#dbe8de;
  margin-top:5px;
}

/* ---------- 7. Sizes ---------- */
.sizes{background:var(--paper);padding:clamp(40px,5vw,68px) 0 clamp(34px,4vw,54px)}
.section-title{
  display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,22px);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(22px,3.1vw,38px);
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--green-900);
  text-align:center;
  margin-bottom:clamp(24px,3vw,40px);
}
.section-title i{
  flex:none;
  width:clamp(28px,4.4vw,62px);height:3px;border-radius:3px;
  background:var(--orange-500);
}

.size-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.4vw,20px);
}
.size-card{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  overflow:hidden;
  text-align:center;
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.size-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover)}
.size-media{position:relative}
.size-media img{
  width:100%;
  aspect-ratio:7/6;
  object-fit:cover;
}
.yard-badge{
  position:absolute;top:10px;left:50%;
  transform:translateX(-50%);
  background:var(--green-900);
  color:#fff;
  padding:6px 15px;
  border-radius:8px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(11px,1.05vw,15px);
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.size-card h3{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(14px,1.35vw,19px);
  letter-spacing:-.005em;
  color:var(--green-900);
  margin:clamp(14px,1.4vw,20px) 12px clamp(9px,1vw,13px);
}
.size-card p{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-align:left;
  padding:0 clamp(10px,1.1vw,16px) clamp(16px,1.8vw,24px);
  font-size:clamp(12px,1.05vw,14.5px);
  line-height:1.45;
  color:var(--ink-soft);
}
.size-card p strong{font-weight:600;color:var(--ink)}
.pickup{
  flex:none;
  width:clamp(26px,2.4vw,34px);height:auto;aspect-ratio:36/24;
  color:var(--green-700);
}

/* ---------- 8. Perfect for ---------- */
.perfect{
  margin-top:clamp(26px,3.2vw,42px);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;gap:clamp(16px,2vw,32px);
  padding:clamp(16px,1.8vw,24px) clamp(16px,2vw,30px);
}
.perfect-head{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);flex:none}
.perfect-mark{
  flex:none;
  display:grid;place-items:center;
  width:clamp(56px,5.4vw,78px);height:clamp(56px,5.4vw,78px);
  border-radius:50%;
  background:var(--green-900);
  color:#fff;
}
.perfect-mark svg{width:58%;height:58%}
.perfect h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(17px,2.1vw,28px);
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--green-900);
}
.perfect-list{
  flex:1;
  display:grid;
  grid-template-columns:repeat(8,1fr);
}
.perfect-list li{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:9px;
  padding:6px 4px;
  border-left:1px solid #dfe2dd;
  text-align:center;
}
.perfect-list svg{
  width:clamp(27px,2.85vw,39px);height:clamp(27px,2.85vw,39px);
  color:var(--green-800);
}
.perfect-list span{
  font-size:clamp(10.5px,.93vw,13px);
  font-weight:600;
  color:var(--ink);
  line-height:1.25;
  white-space:nowrap;
}

/* ---------- 9. Final CTA ---------- */
.final-cta{
  background:linear-gradient(120deg,var(--green-900) 0%,var(--green-800) 50%,var(--green-700) 100%);
  color:#fff;
}
.final-inner{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(22px,3.4vw,52px);
  padding-block:clamp(20px,2.4vw,30px);
}
.final-phone{
  display:flex;align-items:center;gap:clamp(14px,1.7vw,22px);
  padding-right:clamp(18px,2.6vw,42px);
  border-right:1px solid rgba(255,255,255,.28);
}
.final-phone-text small{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(12px,1.25vw,17px);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.final-phone-text a{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(28px,3.5vw,48px);
  line-height:1.05;
  letter-spacing:-.02em;
  transition:color .2s var(--ease);
}
.final-phone-text a:hover{color:#ffd9bf}
.final-phone-text strong{
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(13px,1.35vw,19px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--orange-500);
  margin-top:3px;
}
.final-cta .dispatch strong{font-size:clamp(15px,1.7vw,23px)}
.final-cta .dispatch small{font-size:clamp(13px,1.25vw,17px)}

/* ---------- 10. Footer ---------- */
.site-footer{background:#fff;border-top:1px solid var(--line)}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-block:clamp(12px,1.3vw,16px);
}
.trust-grid span{
  display:flex;align-items:center;justify-content:center;gap:9px;
  border-right:1px solid var(--line);
  padding:4px 8px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(10.5px,1.05vw,14px);
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--green-900);
  text-align:center;
}
.trust-grid span:last-child{border-right:0}
.trust-grid svg{flex:none;width:19px;height:19px;color:var(--green-700)}

.legal{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  border-top:1px solid var(--line-soft);
  padding-block:12px;
  font-size:12.5px;
  color:var(--ink-soft);
}
.legal a{font-weight:700;color:var(--green-700)}
.legal a:hover{color:var(--orange-600)}

/* ---------- 11. Mobile call bar ---------- */
.call-bar{display:none}

/* ---------- 12. Reveal animation ----------
   Opt-in: the .js-anim flag is only added by JS once it can guarantee it will
   reveal the cards again, so content is never hidden when scripting is off. */
.js-anim .reveal{opacity:0;transform:translateY(18px)}
.js-anim .reveal.is-visible{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .benefit{padding-inline:clamp(10px,1.5vw,18px)}
  .benefit:first-child{padding-left:0}
  .perfect{flex-direction:column;align-items:stretch;gap:14px}
  .perfect-head{justify-content:flex-start}
  .perfect-list{grid-template-columns:repeat(8,1fr)}
  .perfect-list li:first-child{border-left:0}
}

@media (max-width:1519px){
  .header-inner{min-height:88px}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:clamp(30px,5vw,44px) 0 clamp(26px,4vw,38px)}
  /* Stacked: the composite keeps its own 3:2 and is shown whole — nothing is
     cropped at any width below this breakpoint. Capped at 980px so it does not
     become a wall of photograph on a tablet held in landscape. */
  .hero-media{
    min-height:0;
    width:min(100%,980px);
    margin-inline:auto;
  }
  .hero-media img{object-position:50% 50%}
  .hero-media::after{background:none}
  .size-grid{grid-template-columns:repeat(3,1fr)}
  .perfect-list{grid-template-columns:repeat(4,1fr);row-gap:14px}
  .perfect-list li:nth-child(4n+1){border-left:0}
  .perfect-list span{white-space:normal}
}

/* Once the viewport itself is narrower than the 980px cap there is no reason to
   keep gutters beside the photo — let it run edge to edge. Kept as its own
   query so it lands after the stacked rules above and wins. */
@media (max-width:1000px){
  .hero-media{
    width:auto;
    margin-inline:calc(var(--gutter) * -1);
  }
}

@media (max-width:760px){
  body{padding-bottom:74px}
  .site-header{position:relative}
  .header-inner{min-height:74px;gap:12px}
  .brand{padding:6px 11px;border-radius:10px}
  .brand img{width:min(186px,40vw)}
  .header-phone{gap:9px}
  .header-phone .icon-badge{width:40px;height:40px}
  .header-phone .icon-badge svg{width:20px;height:20px}
  .header-phone-text small{display:none}
  .header-phone-text strong{font-size:clamp(15px,4.3vw,19px);white-space:nowrap}

  .hero h1{font-size:clamp(42px,12vw,60px)}
  .hero-sub{font-size:clamp(21px,6.4vw,32px)}
  .cta-button{align-self:stretch;justify-content:center}

  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .benefit{padding:16px 12px;gap:12px}
  .benefit:first-child{padding-left:12px}
  .benefit:nth-child(2n){border-right:0}
  .benefit:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}

  .section-title{flex-direction:column;gap:12px}
  .section-title i:first-child{display:none}
  .section-title i{width:56px}

  .size-grid{grid-template-columns:repeat(2,1fr)}
  .size-card p{justify-content:flex-start}

  .final-inner{grid-template-columns:1fr;gap:0;padding-block:22px}
  .final-phone{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.24);
    padding:0 0 18px;
  }
  .final-cta .dispatch{padding-top:18px}

  .trust-grid{grid-template-columns:repeat(2,1fr);row-gap:12px}
  .trust-grid span{border-right:0}
  .trust-grid span:nth-child(odd){border-right:1px solid var(--line)}
  .legal{justify-content:center;text-align:center}

  .call-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(0,0,0,.14);
    padding:10px 14px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .call-bar-status{
    display:flex;align-items:center;gap:8px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--green-900);
  }
  .call-bar-status .live-dot{width:10px;height:10px}
  .call-bar a{
    display:inline-flex;align-items:center;gap:9px;
    background:linear-gradient(135deg,var(--orange-500),var(--orange-600));
    color:#fff;
    padding:13px 22px;
    border-radius:10px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:15px;
    letter-spacing:.02em;
    box-shadow:var(--shadow-cta);
  }
  .call-bar a svg{width:19px;height:19px}
}

@media (max-width:520px){
  .perfect-list{grid-template-columns:repeat(2,1fr)}
  .perfect-list li:nth-child(4n+1){border-left:1px solid #dfe2dd}
  .perfect-list li:nth-child(odd){border-left:0}
}

@media (max-width:359px){
  .size-grid{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .benefit{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .benefit:last-child{border-bottom:0}
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
}

@media print{
  .site-header{position:static}
  .call-bar,.skip-link{display:none !important}
  body{padding-bottom:0}
}