@charset "utf-8";
/* ===========================================================================
   IceTra — theicetra.com

   The design system is lifted from the bag rather than invented for it.

   INK        Two inks only, navy and unprinted white, because that is what a
              two-colour spot print on poly allows. No accent colour exists in
              this brand, and inventing one for the web would make the site and
              the product look like different companies. The photography
              carries all the warmth; the interface stays at two inks.

   TYPE       Lato Black Italic for display — the wordmark's own face, oblique
              in the way industrial salt packaging has been for decades. Lato
              Bold, wide-tracked and uppercase, for labels, which is exactly
              how the bag sets PROFESSIONAL DEICER SALT and IDEAL FOR. Lato
              Regular for body. Three roles, one family, already subset and
              self-hosted at 64 KB.

   STRUCTURE  The bag is a stack of full-width bands: masthead, rule, product
              card, product card, icon strip, footer. The site is built the
              same way — full-bleed horizontal bands with a strict container
              inside. Band, not grid, is the primary structural unit.

   SIGNATURE  The speckle dissolve. On the packaging, navy resolves into white
              through a stochastic scatter of dots rather than a gradient,
              because a spot print cannot screen a tint. That constraint
              produced the one piece of visual language nothing else has, so it
              is the site's section transition. It is the only flourish; every
              other decision is deliberately quiet.
   ======================================================================== */

@font-face{font-family:"Lato";src:url("../fonts/lato-regular.woff2")format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/lato-bold.woff2")format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lato";src:url("../fonts/lato-blackitalic.woff2")format("woff2");
  font-weight:900;font-style:italic;font-display:swap}

:root{
  --ink:#1a2d4d;
  --paper:#fff;
  --tint:#f1f4f8;
  --line:rgba(26,45,77,.14);
  --line-ink:rgba(255,255,255,.22);
  --shadow:0 1px 2px rgba(26,45,77,.06),0 12px 32px -18px rgba(26,45,77,.30);
  --wrap:1180px;
  --gut:clamp(1.25rem,4vw,2.75rem);
  --band:clamp(3.5rem,8vw,6.5rem);
  --icon-bg:#fff;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(1rem,.96rem + .22vw,1.075rem)/1.62 "Lato",-apple-system,
       "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* --- containers ---------------------------------------------------------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.band{padding:var(--band) 0}
.band--tint{background:var(--tint)}
.band--ink{background:var(--ink);color:#fff;--icon-bg:#1a2d4d;--line:var(--line-ink)}
.band--ink .icon{color:#fff}
.band--tight{padding:calc(var(--band)*.62) 0}

/* --- the signature: salt dissolve ---------------------------------------- */
/* Sits at a band boundary. Default runs solid-at-the-bottom, so it precedes an
   ink band. Flipped, it follows one. */
.dissolve{
  height:clamp(40px,5.5vw,72px);margin-bottom:-1px;
  /* Two layers of the same tile at coprime widths. 293 and 419 share no
     factors, so the combined scatter only repeats every ~123,000px -- the seam
     of a single repeating tile would otherwise be visible across a wide band. */
  background:
    linear-gradient(to bottom,transparent calc(100% - 5px),var(--ink) calc(100% - 5px)),
    url("../img/speckle.svg") repeat-x bottom/293px 100%,
    url("../img/speckle.svg") repeat-x 91px bottom/419px 84%;
}
.dissolve--up{transform:scaleY(-1);margin:-1px 0 0}

/* --- type ---------------------------------------------------------------- */
.eyebrow{
  font-weight:700;font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  margin:0 0 1rem;opacity:.62;
}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.1;letter-spacing:-.018em;font-weight:700}
h1{font-size:clamp(2.35rem,1.5rem + 3.6vw,4.15rem);font-weight:900;font-style:italic;letter-spacing:-.032em}
h2{font-size:clamp(1.75rem,1.25rem + 2.1vw,2.75rem)}
h3{font-size:clamp(1.12rem,1.04rem + .45vw,1.35rem)}
p{margin:0 0 1rem;max-width:60ch}
.lead{font-size:clamp(1.06rem,1rem + .45vw,1.24rem);opacity:.9;max-width:54ch}
.note{font-size:.86rem;opacity:.72;max-width:58ch}
.icon{width:1.7rem;height:1.7rem;color:var(--ink);flex:none}
.icon-lg{width:2.6rem;height:2.6rem}

/* --- wordmark ------------------------------------------------------------ */
.mark{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.mark svg{width:1.55em;height:1.55em}
.mark b{font-weight:900;font-style:italic;font-size:1.45rem;letter-spacing:-.035em}

/* --- header -------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
}
.hdr .wrap{display:flex;align-items:center;gap:1.5rem;min-height:4.35rem}
.nav{display:flex;gap:1.6rem;margin-left:auto;font-weight:700;font-size:.88rem}
.nav a{text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent;
  white-space:nowrap}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--ink)}
/* Three full labels plus the wordmark do not fit a 360px phone, and a wrapped
   sticky header eats a third of the screen. Swap to short labels instead of
   hiding a destination -- every page stays one tap away. */
.lbl-short{display:none}
@media (max-width:34rem){
  .nav{gap:1.15rem;font-size:.85rem}
  .lbl-full{display:none}
  .lbl-short{display:inline}
  .mark b{font-size:1.25rem}
  .hdr .wrap{gap:.75rem}
}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.6rem;border:2px solid var(--ink);background:var(--ink);
  color:#fff;text-decoration:none;font-weight:700;font-size:.95rem;
  border-radius:2px;cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:active{transform:none}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.band--ink .btn{background:#fff;border-color:#fff;color:var(--ink)}
.band--ink .btn--ghost{background:transparent;color:#fff}
.band--ink .btn--ghost:hover{background:#fff;color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* --- hero ---------------------------------------------------------------- */
.hero{padding-top:clamp(2.5rem,5vw,4.25rem)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media (min-width:58rem){.hero-grid{grid-template-columns:1.02fr .98fr}}
/* Landscape by default. Only the home hero has a purpose-shot 3:4 portrait
   asset, so only it gets the portrait frame on phones -- everything else in a
   .frame is a landscape render, and forcing those into portrait slices the
   subject off both sides. */
.frame{
  margin:0;overflow:hidden;background:var(--tint);border:1px solid var(--line);
  aspect-ratio:4/3;
}
.frame--portrait{aspect-ratio:3/4}
@media (min-width:58rem){.frame,.frame--portrait{aspect-ratio:16/9}}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}

/* --- generic figure ------------------------------------------------------ */
.fig{margin:0;overflow:hidden;background:var(--tint);aspect-ratio:4/3}
@media (min-width:48rem){.fig{aspect-ratio:16/9}}
.fig img,.fig video{width:100%;height:100%;object-fit:cover}
/* .clip is the JS hook for lazily-loaded video. It needs no styling of its own
   -- the tint stops a flash of nothing if a poster is slow -- but it is
   declared here so the class is accounted for. */
.clip{background:var(--tint)}
.cap{font-size:.82rem;opacity:.66;margin:.7rem 0 0;max-width:56ch}

/* --- the spec block: the bag's temperature plate, carrying real numbers --- */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:2.5rem}
@media (min-width:52rem){.specs--4{grid-template-columns:repeat(4,1fr)}}
.spec{background:var(--paper);padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:.15rem}
.band--ink .spec{background:var(--ink)}
.band--tint .spec{background:var(--tint)}
.spec b{font-weight:900;font-style:italic;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem)}
.spec span{font-weight:700;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;opacity:.66}

/* --- product cards ------------------------------------------------------- */
.pair{display:grid;gap:1.25rem}
@media (min-width:50rem){.pair{grid-template-columns:1fr 1fr}}
.card{border:2px solid var(--ink);padding:clamp(1.5rem,3vw,2.1rem);display:flex;flex-direction:column}
.card--lead{background:var(--ink);color:#fff;--icon-bg:#1a2d4d;border-color:var(--ink)}
.card--lead .icon{color:#fff}
.card__name{font-style:italic;font-weight:900;letter-spacing:-.025em;
  font-size:clamp(1.28rem,1.1rem + .8vw,1.6rem);margin:0 0 .35rem}
.card__sub{font-size:.62em;font-weight:700;font-style:normal;opacity:.72;letter-spacing:.04em}
.temp{font-weight:900;font-style:italic;letter-spacing:-.035em;line-height:1;
  font-size:clamp(2.5rem,2rem + 2.6vw,3.6rem);margin:.35rem 0 .1rem}
.temp-alt{font-weight:700;font-size:.92rem;opacity:.7;margin-bottom:1.1rem}
.feats{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:.7rem}
.feats li{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:.9rem}
.fit{border-top:1px solid currentColor;margin-top:auto;padding-top:1.1rem;font-size:.93rem}
.fit b{display:block;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  opacity:.62;margin-bottom:.4rem;font-weight:700}

/* --- tick list: the bag marks its grade with a checkbox, so does this ----- */
.checks{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.5rem}
@media (min-width:44rem){.checks{grid-template-columns:1fr 1fr;gap:1.75rem 2.5rem}}
@media (min-width:70rem){.checks{grid-template-columns:repeat(3,1fr)}}
.checks li{display:grid;grid-template-columns:1.6rem 1fr;gap:.9rem;align-items:start}
.checks svg{width:1.6rem;height:1.6rem;margin-top:.1rem;flex:none}
.checks h3{margin:0 0 .3rem;font-size:1rem}
.checks p{margin:0;font-size:.92rem;opacity:.8;max-width:34ch}

/* --- numbered steps: used only where order is real information ----------- */
.steps{display:grid;gap:2rem;margin-top:2.75rem;counter-reset:s}
@media (min-width:54rem){.steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.step{border-top:3px solid var(--ink);padding-top:1.25rem;counter-increment:s}
.step::before{
  content:counter(s,decimal-leading-zero);display:block;font-weight:900;font-style:italic;
  font-size:1.6rem;letter-spacing:-.03em;opacity:.28;margin-bottom:.4rem;line-height:1;
}
.step h3{margin:0 0 .4rem}
.step p{margin:0;font-size:.95rem;opacity:.85}

/* --- plain columns ------------------------------------------------------- */
.cols{display:grid;gap:1.75rem;margin-top:2.5rem}
@media (min-width:44rem){.cols{grid-template-columns:1fr 1fr}}
@media (min-width:62rem){.cols--3{grid-template-columns:repeat(3,1fr)}
                         .cols--4{grid-template-columns:repeat(4,1fr)}}
.col{border-top:2px solid var(--ink);padding-top:1.2rem}
.band--ink .col{border-top-color:rgba(255,255,255,.5)}
.col h3{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.col h3 .icon{width:1.45rem;height:1.45rem}
.col p{margin:0;font-size:.95rem;opacity:.85}
.col a{font-weight:700;font-size:.9rem;display:inline-block;margin-top:.7rem}

/* --- icon strip ---------------------------------------------------------- */
.uses{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem;
  list-style:none;margin:0;padding:0;text-align:center}
@media (min-width:42rem){.uses{grid-template-columns:repeat(4,1fr)}}
.uses li{display:flex;flex-direction:column;align-items:center;gap:.7rem;
  font-weight:700;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase}

/* --- table --------------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;margin:2rem 0 0}
.tbl caption{text-align:left;font-weight:700;margin-bottom:.75rem}
.tbl th,.tbl td{padding:.95rem .8rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.66}
.tbl tbody th{font-weight:700;width:36%}
.tbl td:last-child{background:rgba(26,45,77,.035)}
.band--ink .tbl td:last-child{background:rgba(255,255,255,.06)}

/* --- callout ------------------------------------------------------------- */
.callout{border:2px solid var(--ink);padding:clamp(1.5rem,3vw,2.25rem);margin-top:2.75rem}
.callout h3{display:flex;align-items:center;gap:.65rem}
.band--tint .callout{background:var(--paper)}

/* --- form ---------------------------------------------------------------- */
.form{display:grid;gap:1rem;max-width:34rem}
.field{display:grid;gap:.35rem}
.field label{font-weight:700;font-size:.84rem}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;padding:.75rem .85rem;border:2px solid var(--line);
  border-radius:2px;background:var(--paper);color:var(--ink);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:6.5rem;resize:vertical}
.hp{position:absolute;left:-9999px}

/* --- sticky call bar ----------------------------------------------------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr;background:var(--ink);
  box-shadow:0 -4px 20px rgba(26,45,77,.28);
}
.callbar a{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem .5rem;color:#fff;text-decoration:none;font-weight:700;font-size:.92rem}
.callbar a+a{border-left:1px solid rgba(255,255,255,.25)}
@media (max-width:52rem){.callbar{display:grid}body{padding-bottom:3.6rem}}

/* --- footer -------------------------------------------------------------- */
.ftr{background:var(--ink);color:#fff;--icon-bg:#1a2d4d;
  padding:clamp(2.75rem,5vw,3.75rem) 0 2rem;font-size:.92rem}
.ftr .icon{color:#fff}
.ftr-grid{display:grid;gap:2rem}
@media (min-width:46rem){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr}}
.ftr a{color:#fff}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ftr h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;opacity:.62;
  margin:0 0 .9rem;font-weight:700}
.fine{border-top:1px solid rgba(255,255,255,.2);margin-top:2.5rem;padding-top:1.25rem;
  font-size:.78rem;opacity:.62;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

/* --- utilities ----------------------------------------------------------- */
.center{text-align:center}
.center p,.center .lead{margin-left:auto;margin-right:auto}
.center .btns{justify-content:center}
.stack-lead{margin-bottom:2.5rem}