/* =====================================================================
   CMC DRY ICE — RESPONSIVE / MOBILE LAYER
   ---------------------------------------------------------------------
   Loaded AFTER styles.css via its own <link> on every page. styles.css
   was authored for a fixed 1280px desktop mockup and contains no
   breakpoints at all; this file retrofits the whole site for tablet and
   phone without touching that approved base.

   WHY A SEPARATE FILE: the hosting connector is full-overwrite only, so
   keeping the mobile layer isolated means the base stylesheet is never
   rewritten (desktop cannot regress) and rollback is just removing the
   <link>. Load order matters -- this MUST come after styles.css.

   IMPORTANT — SPECIFICITY: many base rules are ID-scoped (#home .fork,
   #b2c .grid4, #b2b .hero). A bare-class override inside a media query
   LOSES to those. Selectors below therefore mirror the original
   selector's specificity exactly. If you add rules here, match the
   specificity of the rule you're overriding or it will silently no-op.

   Breakpoints:
     <=1024px  narrow desktop / landscape tablet — tighten gutters
     <=900px   MOBILE NAV takes over (hamburger + slide-down panel)
     <=768px   portrait tablet — split heroes stack, wide grids collapse
     <=560px   large phone — remaining multi-column grids go single
     <=430px   small phone — tightest padding + type
   ===================================================================== */

/* Mobile nav toggle button — hidden on desktop, revealed at <=900px.
   Lives in markup on every page so the CSS alone controls visibility. */
.navtoggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; flex-shrink:0;
  background:transparent; border:1px solid var(--border-default);
  border-radius:var(--radius-sm); cursor:pointer; color:var(--text-strong);
  padding:0; margin-left:auto;
}
.navtoggle:hover{ background:var(--gray-100); }
/* Dark-header shells (#b2b) invert the toggle to stay visible on gray-950 */
#b2b .navtoggle{ color:#fff; border-color:rgba(255,255,255,0.28); }
#b2b .navtoggle:hover{ background:rgba(255,255,255,0.10); }
/* Icons are wrapped in spans so lucide's <i> -> <svg> swap can't break the
   show/hide rules (.frame i[data-lucide] would otherwise out-specify these). */
.navtoggle .ico-open, .navtoggle .ico-close{ display:none; line-height:0; }

/* ---------------------------------------------------------------------
   <=1024px — tighten gutters before anything collapses
   --------------------------------------------------------------------- */
@media (max-width:1024px){
  #home{ --pad:44px; }
  #b2c{ --pad:40px; }
  #b2b{ --pad:40px; }

  #home .hero h1{ font-size:50px; }
  #b2c .hero h1{ font-size:44px; }
  #b2b .hero h1{ font-size:46px; }
  #b2b .secHead h2{ font-size:34px; }

  .lrn-uses{ grid-template-columns:repeat(3,1fr); }
  .rfoot .cols{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:28px; }
}

/* ---------------------------------------------------------------------
   <=900px — MOBILE NAV
   Desktop nav is a horizontal row that clips off-screen on phones (the
   logo and phone/cart/quote CTA were being cut away entirely). Below
   this width the row becomes a hamburger + full-width slide-down panel.
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .navtoggle{ display:inline-flex; }
  .navtoggle .ico-open{ display:inline-block; }
  .nav.open .navtoggle .ico-open{ display:none; }
  .nav.open .navtoggle .ico-close{ display:inline-block; }

  /* Header row wraps so the panel can occupy a full-width third line */
  #home .nav, #b2c .nav, #b2b .nav{
    flex-wrap:wrap; gap:12px 10px; padding:14px var(--pad);
  }

  /* Collapse the link row into a stacked panel, hidden until toggled */
  #home .nav nav, #b2c .nav nav, #b2b .nav nav{
    display:none;
    order:3; flex-basis:100%; width:100%;
    flex-direction:column; align-items:stretch; gap:0;
    margin:0 calc(var(--pad) * -1) -14px;
    padding:6px var(--pad) 10px;
    border-top:1px solid var(--border-subtle);
  }
  #home .nav.open nav, #b2c .nav.open nav, #b2b .nav.open nav{ display:flex; }
  #b2b .nav nav{ border-top-color:rgba(255,255,255,0.14); }

  /* Panel rows: full-width, comfortable 48px+ touch targets */
  #home .nav nav a.link, #b2c .nav nav a.link, #b2b .nav nav a.link{
    display:flex; align-items:center;
    padding:14px 2px; font-size:15px;
    border-bottom:1px solid var(--border-subtle);
  }
  #b2b .nav nav a.link{
    border-bottom-color:rgba(255,255,255,0.10);
    font-size:14px; padding:15px 2px;
  }
  #b2b .nav nav a.link.active{ border-bottom:1px solid var(--brand-accent); padding-bottom:15px; }

  /* Trailing CTAs (phone / cart / quote) become full-width buttons */
  #home .nav nav .phone{
    justify-content:center; margin-top:12px; padding:14px;
    border:1px solid var(--blue-100); border-radius:var(--radius-sm);
    background:var(--blue-50); font-size:15px;
  }
  #b2c .nav nav .cart{ justify-content:center; margin-top:12px; padding:14px; }
  #b2b .nav nav .quote{ text-align:center; margin-top:14px; padding:14px; }

  /* Shell badge ("Shop" / "Business Supply") would crowd the toggle */
  #b2c .nav .logo span, #b2b .nav .logo span{ display:none; }
}

/* ---------------------------------------------------------------------
   <=768px — portrait tablet: split heroes stack, wide grids collapse
   --------------------------------------------------------------------- */
@media (max-width:768px){
  #home{ --pad:30px; }
  #b2c{ --pad:26px; }
  #b2b{ --pad:26px; }

  /* ---- HOME ---- */
  #home .hero{ padding:46px var(--pad) 24px; }
  #home .hero h1{ font-size:38px; }
  #home .hero .lead{ font-size:16px; margin-top:14px; }
  #home .hero .eb{ font-size:11px; }

  #home .fork{ grid-template-columns:1fr; gap:18px; padding:30px var(--pad) 6px; }
  #home .fcard{ padding:28px 24px; min-height:0; }
  #home .fcard h2{ font-size:26px; }
  #home .fcard p{ font-size:14.5px; }
  /* Absolute badge would sit on top of the icon once the card narrows */
  #home .fcard .tagrow{
    position:static; display:inline-block; align-self:flex-start; margin-bottom:18px;
  }
  #home .fcard .ic{ width:48px; height:48px; margin-bottom:18px; }
  /* These list items are single-line on desktop so align-items:center was
     fine; once they wrap on mobile the tick floats to the vertical middle.
     Pin it to the first text line instead. */
  #home .fcard li{ align-items:flex-start; }
  #home .fcard li > *:first-child{ margin-top:3px; flex-shrink:0; }
  #home .fcard .go{ padding-top:20px; }
  #home .fcard .cbtn, #home .fcard.c .cbtn, #home .fcard.b .cbtn{
    width:100%; justify-content:center;
  }

  /* Three stats, not four, since the facilities cell was removed. Keeping all
     three on one row avoids a lone orphaned cell on a second row. */
  #home .strip{ grid-template-columns:repeat(3,1fr); padding:30px var(--pad); margin-top:18px; }
  #home .strip .cell{ padding:16px 4px; border-right:1px solid var(--border-subtle); }
  #home .strip .cell:last-child{ border-right:none; }
  #home .strip .n{ font-size:28px; }
  #home .strip .l{ font-size:11px; }

  /* ---- B2C ---- */
  #b2c .hero{ grid-template-columns:1fr; gap:28px; padding:38px var(--pad); }
  #b2c .hero h1{ font-size:36px; }
  #b2c .hero p{ font-size:15px; max-width:none; }
  #b2c .hero .b1{ width:100%; justify-content:center; }
  #b2c .hero .art{ padding:18px; }

  #b2c .fulfil{ grid-template-columns:1fr; gap:14px; padding:26px var(--pad) 0; }
  #b2c .fopt{ padding:18px 20px; }
  #b2c .fopt h4{ flex-wrap:wrap; gap:8px; }

  #b2c .sec{ padding:38px var(--pad); }
  #b2c .secHead{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:22px; }
  #b2c .secHead h2{ font-size:27px; }
  #b2c .grid4{ grid-template-columns:repeat(2,1fr); gap:14px; }

  #b2c .callnote{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px; }
  #b2c .callnote .num{ margin-left:0; font-size:22px; }

  #b2c .ship3{ grid-template-columns:1fr; gap:20px; padding:24px; }
  #b2c .safety{ padding:0 var(--pad) 14px; }
  #b2c .safety .box{ padding:24px 22px; }
  #b2c .safety .row{ grid-template-columns:1fr; gap:20px; }
  #b2c .safety .hd h2{ font-size:22px; }
  #b2c .safety .sds{ width:100%; justify-content:center; }

  #b2c .calc{ padding:32px var(--pad) 40px; }
  #b2c .calc .band{ flex-direction:column; align-items:flex-start; gap:18px; padding:26px 22px; }
  #b2c .calc h3{ font-size:21px; }
  #b2c .calc p{ font-size:14px; max-width:none; }
  #b2c .calc .btn2{ width:100%; justify-content:center; }

  /* ---- B2B ---- */
  #b2b .hero{ grid-template-columns:1fr; gap:30px; padding:46px var(--pad); }
  #b2b .hero h1{ font-size:38px; }
  #b2b .hero .sub{ font-size:16px; max-width:none; }
  #b2b .hero .cta{ flex-wrap:wrap; gap:10px; margin-top:24px; }
  #b2b .hero .c1, #b2b .hero .c2{ flex:1 1 100%; text-align:center; padding:15px 20px; }

  /* Decorative rings/pin are absolutely positioned with hardcoded px that
     only make sense at ~500px wide. Below that, flatten the whole thing
     into a static info panel instead of letting it break apart. */
  #b2b .map{ height:auto; padding:18px; display:flex; flex-direction:column; gap:10px; }
  #b2b .map .ring{ display:none; }
  #b2b .map .pin{ position:static; transform:none; flex-direction:row; align-items:center; gap:10px; }
  #b2b .map .legend{ position:static; bottom:auto; left:auto; }

  #b2b .vals{ padding:40px var(--pad); }
  #b2b .secHead h2{ font-size:28px; }
  #b2b .vgrid{ margin-top:24px; }
  #b2b .vcell{ padding:24px; }

  #b2b .indSec{ padding:38px var(--pad); }
  #b2b .indSec h2{ font-size:24px; }
  #b2b .indrow{ justify-content:flex-start; gap:9px; }
  #b2b .indrow .chip{ font-size:12.5px; padding:10px 14px; }

  #b2b .quoteBand{ grid-template-columns:1fr; gap:26px; padding:42px var(--pad); }
  #b2b .quoteBand h2{ font-size:28px; }
  #b2b .quoteBand p{ font-size:15px; }

  /* ---- SHARED: footer ---- */
  #home .foot.rfoot, #b2c .foot.rfoot, #b2b .foot.rfoot{ padding:38px var(--pad) 22px; }
  .rfoot .cols{ grid-template-columns:1fr 1fr; gap:26px 22px; }
  .rfoot .brand{ grid-column:1 / -1; }
  .rfoot .brand .tag{ max-width:none; }
  .rfoot .bar{
    flex-direction:column; align-items:flex-start; gap:8px;
    margin-top:28px; padding-top:16px;
  }

  /* ---- SHARED: forms ---- */
  .cform-wrap{ padding:36px var(--pad) 48px; }
  .cform{ padding:26px 22px; }
  .cform h2{ font-size:21px; }
  .cform .row2{ grid-template-columns:1fr; gap:0; }
  .cform .radios{ flex-direction:column; gap:10px; }
  .cform .checks{ gap:10px 16px; }
  /* 16px minimum stops iOS Safari auto-zooming the page on field focus */
  .cform input[type=text], .cform input[type=email], .cform input[type=tel],
  .cform input[type=number], .cform input[type=date], .cform select, .cform textarea{
    font-size:16px; padding:12px 13px;
  }
  .cform .check-item, .cform .radio-item{ font-size:14px; }
  .cform-msg{ padding:18px 20px; }

  /* ---- SHARED: legal ---- */
  .legal-wrap{ padding:36px var(--pad) 48px; }
  .legal h1{ font-size:30px; }
  .legal .intro{ font-size:15px; }
  .legal h2{ font-size:16px; margin-top:28px; padding-top:22px; }
  .legal p, .legal li{ font-size:14.5px; }
  .legal .contactbox{ padding:16px 18px; }

  /* ---- SHARED: about / learn / calculator page furniture ---- */
  .abt-hero{ padding:44px var(--pad) 34px; }
  .abt-hero h1{ font-size:33px; }
  .abt-hero p{ font-size:15.5px; }

  .abt-sec{ padding:38px var(--pad); }
  .abt-sec h2{ font-size:25px; }
  .abt-sec p{ font-size:14.5px; }

  .abt-values{ grid-template-columns:1fr; gap:14px; }
  .abt-vcell{ padding:22px; }

  .abt-team{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .abt-person{ padding:20px; }

  .abt-visit{ grid-template-columns:1fr; gap:26px; padding:26px 24px; }

  .abt-cta{
    flex-direction:column; align-items:flex-start; gap:20px;
    margin:0 var(--pad) 40px; padding:28px 24px;
  }
  .abt-cta h3{ font-size:20px; }
  .abt-cta .btns{ flex-wrap:wrap; gap:10px; width:100%; }
  .abt-cta .btn3, .abt-cta .btn4{
    flex:1 1 100%; justify-content:center; text-align:center;
  }

  .lrn-uses{ grid-template-columns:repeat(2,1fr); gap:12px; }

  .dry-safety{ padding:0 var(--pad) 14px; }
  .dry-safety .box{ padding:24px 22px; }
  .dry-safety .row{ grid-template-columns:1fr; gap:20px; }
  .dry-safety .hd h2{ font-size:22px; }
  .dry-safety .never{ grid-template-columns:1fr; gap:10px; }
  .dry-safety .sds{ width:100%; justify-content:center; }

  .dry-steps{ padding:24px 20px; }

  .calc-wrap{ padding:0 var(--pad) 40px; }
  .calc-card{ padding:26px 22px; }
  .calc-result{ padding:24px 18px; }
  .calc-result-value{ font-size:40px; }
  .calc-tip{ padding:18px; gap:13px; }

  /* ---- SHARED: touch targets & small-text legibility ----
     Pointer hit-testing uses the element box, so several controls that look
     fine on a mouse-driven desktop are too small to hit reliably on a phone. */

  /* Top shell switcher: primary navigation, so give it a full 44px row */
  .ubar .seg{ min-height:44px; }

  /* The range input's box was only 6px tall (the 22px thumb overflows it
     visually but does NOT enlarge the touch area). Transparent top/bottom
     borders grow the hit area to 32px; content-box keeps the visible track
     6px, and background-clip stops the JS-set fill gradient painting over
     the borders. */
  .calc-range{
    box-sizing:content-box; height:6px;
    border-top:13px solid transparent; border-bottom:13px solid transparent;
    background-clip:padding-box;
  }

  /* Native checkboxes/radios render ~13px. The wrapping <label> already
     extends the tappable area, but enlarging the control helps precision. */
  .cform input[type=checkbox], .cform input[type=radio]{
    width:18px; height:18px; flex-shrink:0;
  }

  /* Inline "read more" style links that were bare text on desktop */
  .abt-visit .vlink{ padding:9px 0; }

  /* Footer link rows to a comfortable ~40px */
  .rfoot .fl{ padding:10px 0; margin-bottom:0; }

  /* Square social icon buttons were 34px */
  .rfoot .social a{ width:40px; height:40px; }

  /* Secondary text link in the shop section header */
  #b2c .secHead .link{ padding:9px 0; }

  /* Smallest utility text nudged up for phone legibility */
  #b2b .map .legend{ font-size:11.5px; }
  .rfoot .bar{ font-size:12px; }
}

/* ---------------------------------------------------------------------
   <=560px — large phone: remaining multi-column grids go single
   --------------------------------------------------------------------- */
@media (max-width:560px){
  .lrn-uses{ grid-template-columns:1fr; }
  #b2c .grid4{ grid-template-columns:1fr; }
  #b2b .vgrid{ grid-template-columns:1fr; }
  .rfoot .cols{ grid-template-columns:1fr; gap:24px; }
  #b2c .hero .art .ship .s{ font-size:11.5px; }
}

/* ---------------------------------------------------------------------
   <=430px — small phone: tightest padding and type
   --------------------------------------------------------------------- */
@media (max-width:430px){
  #home{ --pad:18px; }
  #b2c{ --pad:16px; }
  #b2b{ --pad:16px; }

  .ubar .seg{ font-size:11px; padding:10px 6px; gap:6px; }

  #home .hero{ padding:34px var(--pad) 20px; }
  #home .hero h1{ font-size:30px; }
  #home .hero .lead{ font-size:15px; }
  #home .strip .n{ font-size:27px; }
  #home .fcard{ padding:24px 20px; }
  #home .fcard h2{ font-size:23px; }

  #b2c .hero h1{ font-size:30px; }
  #b2c .secHead h2{ font-size:23px; }
  #b2c .hero .art{ padding:14px; }
  #b2c .callnote .num{ font-size:20px; }

  #b2b .hero{ padding:36px var(--pad); }
  #b2b .hero h1{ font-size:30px; }
  #b2b .secHead h2{ font-size:24px; }
  #b2b .quoteBand h2{ font-size:24px; }
  #b2b .indSec h2{ font-size:21px; }

  .abt-hero{ padding:36px var(--pad) 28px; }
  .abt-hero h1{ font-size:27px; }
  .abt-sec h2{ font-size:22px; }
  .abt-team{ grid-template-columns:1fr; }
  .abt-cta{ padding:24px 20px; }

  .legal h1{ font-size:26px; }
  .cform{ padding:22px 18px; }
  .cform h2{ font-size:19px; }

  .calc-card{ padding:22px 18px; }
  .calc-modes{ flex-direction:column; gap:8px; }
  .calc-result-value{ font-size:36px; }
  .calc-label span:first-child{ font-size:12px; }
}

/* ---------------------------------------------------------------------
   Accessibility floor
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
}

/* Industries columns (business.html "Trusted By") */
@media (max-width:900px){ #b2b .icols{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #b2b .icols{ grid-template-columns:1fr; } }

/* About — story band + team photo layouts */
@media (max-width:980px){
  .at-tlead{ grid-template-columns:1fr; gap:26px; }
  .at-tlead .at-photo{ max-width:300px; }
  .at-tgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .at-story .at-two{ grid-template-columns:1fr; gap:0; }
  .at-band{ height:220px; }
}
@media (max-width:620px){ .at-tgrid{ grid-template-columns:1fr; } }

/* Proof-point strip */
@media (max-width:760px){
  .at-strip{ grid-template-columns:repeat(2,1fr); }
  .at-strip .cell{ padding:24px 10px; }
  .at-strip .cell:nth-child(even){ border-right:none; }
  .at-strip .n{ font-size:30px; }
}

/* Shop — uses strip */
@media (max-width:1024px){ #b2c .ugrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ #b2c .ugrid{ grid-template-columns:1fr; } }

/* Learn — full-width Basics + DIY steps */
@media (max-width:1000px){ .lrn-diy .dry-steps .steplist{ grid-template-columns:repeat(2,1fr); } }
/* DIY band (B2): heading column stacks above the steps before the steps themselves reflow. */
@media (max-width:1100px){ .lrn-band .inner{ grid-template-columns:1fr; gap:28px; } }
@media (max-width:1100px){ .lrn-band .band{ padding:44px var(--pad); } }
@media (max-width:1100px){ .lrn-diy.lrn-band{ margin-block:8px 36px; } }
/* Keep the safety box evenly spaced at narrower widths too (44px each side). */
@media (max-width:1100px){ .dry-safety{ padding-bottom:44px; } }
@media (max-width:900px){ .lrn-basics{ grid-template-columns:1fr; gap:30px; } }
@media (max-width:640px){ .lrn-diy .dry-steps .steplist{ grid-template-columns:1fr; } }

/* Learn — grouped uses columns */
@media (max-width:900px){ .ug-cols{ grid-template-columns:1fr; gap:0; } .ug-col{ margin-bottom:26px; } }

/* ---------------------------------------------------------------------
   MOBILE TOUCH TARGETS & MINIMUM TEXT SIZE
   Footer legal links, the phone link under forms and the shell segment
   tabs were 14-38px tall — below the 44px minimum for a reliable tap.
   --------------------------------------------------------------------- */
@media (max-width:768px){
  .rfoot .bar{ display:flex; flex-wrap:wrap; gap:2px 14px; align-items:center; }
  .rfoot .bar a,
  .cform .fnote a,
  #home .foot a, #b2c .foot a, #b2b .foot a{
    display:inline-flex; align-items:center; min-height:44px; padding:0 2px;
  }
  /* Shell tabs ("Shop Online" / "For Business") were 38px */
  .ubar .seg{ min-height:44px; }
  /* Smallest utility labels were 10-10.5px */
  #b2c .hero .art .ship .s{ font-size:11.5px; }
  #b2c .fopt .tag{ font-size:11.5px; padding:4px 10px; }
  #b2b .map .legend{ font-size:11.5px; }
  .rfoot .bar{ font-size:12.5px; }
}