:root{
  --red:#df1b23;
  --dark-red:#b51219;
  --ink:#111;
  --muted:#555;
  --line:#e7e7e7;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.18,1.18,.28,1);
  --cinema:cubic-bezier(.16,1,.3,1);
  --smooth:cubic-bezier(.16,1,.3,1);
}

*{
  box-sizing:border-box;
}

html{
  margin:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  /* Single document scroller only — always reserve track so width never jumps */
  overflow-y:scroll;
  scrollbar-gutter:stable;
}

body{
  margin:0;
  width:100%;
  min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#f2f2f0;
  -webkit-font-smoothing:antialiased;
  /* CRITICAL: body must NOT be a scroll container — only html scrolls */
  overflow:visible;
  padding:7px;
  box-sizing:border-box;
}

body.modal-open{
  overflow:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

button{
  font:inherit;
}




/* After in-site navigation: logo + nav stay put (no intro animation, no jump) */
.no-chrome-intro .logo,
.no-chrome-intro .nav-item,
.no-chrome-intro .installer{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* =========================================================
   SITE SHELL
   ========================================================= */

.site-shell{
  width:100%;
  max-width:1500px;
  min-height:calc(100vh - 14px);
  height:auto;
  margin:0 auto;
  background:#fff;
  border-radius:16px;
  /* Never create a nested scrollbar — document (html) is the only scroller */
  overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.10);
  position:relative;
  display:flex;
  flex-direction:column;
}


/* =========================================================
   HEADER
   ========================================================= */

.header{
  height:64px;
  flex:0 0 64px;
  display:grid;
  grid-template-columns:150px 1fr auto;
  align-items:center;
  padding:0 18px 0 22px;
  background:#fff;
  position:relative;
  z-index:50;
  gap:12px;
}


/* ---------------------------------------------------------
   LOGO
   --------------------------------------------------------- */

.logo{
  display:flex;
  align-items:center;
  height:100%;
  transform:translateY(-64px);
  opacity:0;
  animation:logoEnter 1.5s var(--smooth) .06s forwards;
}

.logo img{
  width:98px;
  height:auto;
  display:block;
}

@keyframes logoEnter{
  0%{
    opacity:0;
    transform:translateY(-64px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}


/* ---------------------------------------------------------
   DESKTOP NAV
   --------------------------------------------------------- */

.desktop-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:38px;
  height:100%;
}

.nav-item{
  height:100%;
  display:flex;
  align-items:center;
  position:relative;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-54px);
  animation:navDrop 1.15s var(--smooth) forwards;
  transition:
    color .22s ease,
    transform .35s var(--spring);
}

.nav-item:nth-child(1){
  animation-delay:.35s;
}

.nav-item:nth-child(2){
  animation-delay:.52s;
}

.nav-item:nth-child(3){
  animation-delay:.69s;
}

.nav-item:nth-child(4){
  animation-delay:.86s;
}

.nav-item:nth-child(5){
  animation-delay:1.03s;
}

.nav-item:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  height:2px;
  background:var(--dark-red);
  transform:scaleX(0);
  transition:transform .55s var(--spring);
}

.nav-item:hover{
  color:var(--dark-red);
  transform:translateY(-3px);
}

.nav-item.active{
  color:var(--dark-red);
}

.nav-item.active:after,
.nav-item:hover:after{
  transform:scaleX(1);
}

@keyframes navDrop{
  0%{
    opacity:0;
    transform:translateY(-54px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.chevron{
  font-size:12px;
  margin-left:5px;
  line-height:1;
  transform:translateY(-1px);
}


/* ---------------------------------------------------------
   INSTALLER BUTTON
   --------------------------------------------------------- */

.installer{
  justify-self:auto;
  align-self:center;
  width:155px;
  height:32px;
  border-radius:4px;
  background:var(--red);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:11px;
  font-weight:700;
  box-shadow:0 5px 12px rgba(223,27,35,.15);
  transition:
    transform .55s var(--spring),
    box-shadow .25s ease;
  opacity:0;
  transform:translateY(-40px);
  animation:installerIn 1.2s var(--smooth) .74s forwards;
}

@keyframes installerIn{
  0%{
    opacity:0;
    transform:translateY(-40px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.installer:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 18px rgba(223,27,35,.22);
}

.header-actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:8px;
}

.where-buy{
  height:32px;
  padding:0 14px;
  border-radius:4px;
  border:1.5px solid var(--red);
  background:transparent;
  color:#111;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:none;
  pointer-events:auto;
  position:relative;
  z-index:2;
  transition:
    transform .55s var(--spring),
    box-shadow .25s ease,
    background .22s ease,
    color .22s ease;
  opacity:0;
  transform:translateY(-40px);
  animation:installerIn 1.2s var(--smooth) .68s forwards;
}

.where-buy:hover{
  transform:translateY(-2px);
  background:rgba(223,27,35,.06);
  color:var(--dark-red);
}

.where-buy-solid{
  background:var(--red);
  color:#fff;
  border:1.5px solid var(--red);
  box-shadow:0 5px 12px rgba(223,27,35,.15);
  opacity:1;
  transform:none;
  animation:none;
}

.where-buy-solid:hover{
  background:var(--dark-red);
  border-color:var(--dark-red);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 9px 18px rgba(223,27,35,.22);
}

.no-chrome-intro .where-buy{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}

/* Dealer / Where to Buy modal */
.dealer-modal{
  position:fixed;
  inset:0;
  z-index:5200;
  display:grid;
  place-items:center;
  visibility:hidden;
  opacity:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px 0;
  -webkit-overflow-scrolling:touch;
  transition:
    opacity .35s ease,
    visibility .35s ease;
}
.dealer-modal.open{
  visibility:visible;
  opacity:1;
}
.dealer-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:none;
}
.dealer-modal.open .dealer-modal-backdrop{
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.dealer-modal-card{
  position:relative;
  z-index:1;
  width:min(520px,calc(100% - 28px));
  max-height:calc(100vh - 40px);
  padding:34px 36px 28px;
  border-radius:13px;
  background:rgba(255,255,255,.97);
  box-shadow:0 25px 70px rgba(0,0,0,.18);
  transform:translateY(25px) scale(.97);
  opacity:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  transition:
    transform .7s var(--spring),
    opacity .3s ease,
    max-height .55s cubic-bezier(.16,1,.3,1);
}
.dealer-modal.open .dealer-modal-card{
  transform:none;
  opacity:1;
}
.dealer-modal-close{
  position:absolute;
  right:14px;
  top:9px;
  border:0;
  background:transparent;
  font-size:28px;
  font-weight:300;
  cursor:pointer;
  color:#111;
  line-height:1;
}
.dealer-modal-eyebrow{
  margin-top:4px;
  color:var(--dark-red);
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
}
.dealer-modal-card h2{
  margin:5px 0 0;
  font-size:24px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.dealer-modal-red-line{
  width:36px;
  height:2px;
  background:var(--dark-red);
  margin:14px 0 18px;
}
.dealer-search-form{
  display:grid;
  gap:12px;
}
.dealer-search-form label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#444;
}
.dealer-search-form input{
  width:100%;
  border:1px solid #e0e0e0;
  border-radius:10px;
  background:#f7f7f7;
  color:#171717;
  font:inherit;
  font-size:15px;
  padding:13px 16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.dealer-search-form input:focus{
  border-color:var(--red);
  background:#fff;
  box-shadow:0 0 0 4px rgba(223,27,35,.12);
}
.dealer-search-form .cta{
  width:100%;
  height:40px;
  font-size:12px;
}
.dealer-results{
  margin-top:0;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:
    max-height .7s cubic-bezier(.16,1,.3,1),
    opacity .5s ease,
    margin-top .4s ease;
}
.dealer-results.is-open{
  margin-top:20px;
  max-height:480px;
  opacity:1;
  overflow-y:auto;
}
.dealer-results-status{
  margin:0 0 12px;
  font-size:13px;
  color:#555;
  line-height:1.45;
}
.dealer-card{
  border:1px solid #ebebeb;
  border-radius:10px;
  padding:16px 18px;
  background:#fafafa;
  margin-bottom:10px;
}
.dealer-card:last-child{ margin-bottom:0; }
.dealer-card-region{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 6px;
}
.dealer-card h3{
  margin:0 0 4px;
  font-size:16px;
  font-weight:750;
  color:#171717;
}
.dealer-card-person{
  margin:0 0 8px;
  font-size:13px;
  color:#555;
}
.dealer-card-rows{
  display:grid;
  gap:4px;
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#333;
}
.dealer-card-rows a{
  color:var(--dark-red);
  font-weight:600;
}
.dealer-card-rows a:hover{ color:#111; }

.contact-panel-head-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.contact-panel-head-row > div{ min-width:0; flex:1; }
.contact-panel-head-row .where-buy-solid{
  flex:0 0 auto;
  margin-top:2px;
}

@media (max-width:768px){
  .header-actions{
    display:none;
  }
  .mobile-where-buy{
    margin-top:7px;
    border:1.5px solid var(--red) !important;
    background:transparent !important;
    color:#111 !important;
    text-align:center;
    border-radius:4px;
    font-weight:700;
  }
  .mobile-where-buy:hover,
  .mobile-where-buy:active{
    color:var(--red) !important;
    background:rgba(223,27,35,.06) !important;
  }
  .dealer-modal-card{
    width:calc(100% - 18px);
    max-height:calc(100dvh - 24px);
    padding:30px 20px 24px;
  }
  .dealer-modal-card h2{ font-size:21px; }
  .contact-panel-head-row{
    flex-wrap:wrap;
  }
  .contact-panel-head-row .where-buy-solid{
    width:100%;
  }
}


.pin{
  font-size:9px;
}

.menu-toggle,
.mobile-menu{
  display:none;
}

.site-shell main{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  /* Do not constrain height — never become a second scroll container */
  min-height:auto;
  overflow:visible;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  width:100%;
  height:430px;
  aspect-ratio:auto;
  min-height:430px;
  flex:0 0 430px;
  position:relative;
  overflow:hidden;
}


/* ---------------------------------------------------------
   HERO BACKGROUND
   --------------------------------------------------------- */

.hero-picture,
.hero-picture img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.hero-picture{
  opacity:0;
  transform:translateX(-6%);
  animation:heroPictureIn 1.85s var(--smooth) .1s forwards;
}

.hero-picture img{
  object-fit:cover;
  object-position:center center;
}

@keyframes heroPictureIn{
  0%{
    opacity:0;
    transform:translateX(-6%);
  }

  100%{
    opacity:1;
    transform:translateX(0);
  }
}


/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.hero-copy{
  position:absolute;
  left:6.2%;
  top:50%;
  width:58%;
  max-width:700px;
  transform:translate(-52px,-49%);
  opacity:0;
  z-index:7;
  isolation:isolate;
  animation:heroCopyIn 1.65s var(--smooth) .38s forwards;
}

@keyframes heroCopyIn{
  0%{
    opacity:0;
    transform:translate(-52px,-49%);
  }

  100%{
    opacity:1;
    transform:translate(0,-49%);
  }
}

.hero-copy::before,
.hero-copy::after{
  display:none !important;
  content:none !important;
  background:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  box-shadow:none !important;
}

.hero-eyebrow{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 8px;
}

/* Desktop / mobile hero headings */
.hero-heading-desktop{ display:block; }
.hero-heading-mobile{ display:none; }

.hero-copy h1{
  position:relative;
  margin:0;
  font-size:clamp(38px,3.25vw,52px);
  line-height:.98;
  letter-spacing:-1.2px;
  font-weight:800;
  color:#fff;
  /* Plain text — no border / stroke / outline */
  -webkit-text-stroke:0;
  text-shadow:none;
  border:none;
}

.hero-copy h1 span{
  display:block;
  white-space:nowrap;
}

.hero-copy h1 .hero-red-line{
  color:var(--red);
}

.hero-copy h1 .hero-red-line,
.hero-copy h1 .red,
.hero-copy h1 .accent,
.hero-copy .red,
.hero-copy .accent{
  text-shadow:none;
}

.red-line{
  display:block;
  width:36px;
  height:2px;
  background:var(--red);
  margin:11px 0 10px;
}

.hero-copy p{
  position:relative;
  max-width:620px;
  margin:0;
  font-size:18px;
  line-height:1.5;
  color:rgba(255,255,255,.92);
  -webkit-text-stroke:0;
  text-shadow:none;
  border:none;
}

.hero-actions{
  display:none;
  gap:11px;
  margin-top:18px;
}

.cta{
  height:36px;
  padding:0 17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:0;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  color:inherit;
  font-family:inherit;
  box-sizing:border-box;
  transition:
    transform .55s var(--spring),
    box-shadow .25s ease,
    background .22s ease,
    color .22s ease;
}

button.cta,
input.cta{
  margin:0;
}

.cta:hover{
  transform:translateY(-2px);
}

.cta-red{
  background:var(--red);
  color:#fff;
  box-shadow:0 5px 12px rgba(223,27,35,.17);
}

.cta-red:hover{
  background:var(--dark-red);
  color:#fff;
}

.cta-white{
  background:#fff;
  color:#111;
  border:1.5px solid var(--red);
  box-shadow:0 3px 8px rgba(0,0,0,.06);
}


/* =========================================================
   HERO GEYSER
   ========================================================= */

.hero-geyser{
  position:absolute;
  z-index:8;
  right:1.5%;
  left:auto;
  top:calc(40% - 30px);
  width:auto;
  max-width:58%;
  height:calc(100% - 52px);
  max-height:calc(100% - 52px);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  transform:translateY(-50%);
  opacity:1;
  pointer-events:none;
  overflow:visible;
}

/* Desktop row: all models side-by-side, sequence starts from the right (6L rightmost → 18L leftward) */
.hero-geyser-row{
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-end;
  justify-content:flex-start;
  gap:clamp(6px,0.9vw,14px);
  height:100%;
  width:auto;
}

.hero-geyser-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  height:100%;
  flex:0 0 auto;
  opacity:0;
  transform:translateY(56px);
  /* Slow rise with strong end deceleration */
  animation:geyserItemUp 2.35s cubic-bezier(.05,.82,.08,1) forwards;
  animation-delay:calc(0.5s + var(--i, 0) * 0.14s);
}

.hero-geyser-item img{
  display:block;
  width:auto;
  height:auto;
  max-height:calc(100% - 32px);
  max-width:clamp(78px,8.8vw,132px);
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.16));
}

.hero-geyser-label{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  margin-top:6px;
  padding-left:12px;
  text-align:left;
  line-height:1.15;
  white-space:nowrap;
}

.hero-geyser-label .size{
  font-size:clamp(10px,0.9vw,13px);
  font-weight:500;
  letter-spacing:0.35px;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}

.hero-geyser-label .type,
.hero-geyser-label .type-red{
  font-size:clamp(7px,0.68vw,10px);
  font-weight:700;
  letter-spacing:0.4px;
  text-transform:uppercase;
  color:var(--red);
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

@keyframes geyserItemUp{
  0%{
    opacity:0;
    transform:translateY(56px);
  }
  70%{
    opacity:1;
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* Mobile layers hidden on desktop */
.hero-geyser-mobile{
  display:none;
}


/* =========================================================
   HERO BENEFIT RAIL
   ========================================================= */

.hero-benefits{
  position:absolute !important;
  left:3.2%;
  right:3.2%;
  bottom:0;
  top:auto !important;
  z-index:8;
  height:62px;
  margin:0;
  padding:0 8px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.12);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow:hidden;
  opacity:0;
  transform:translateY(45px);
  animation:heroBenefitsIn 1.35s var(--smooth) 1.2s forwards;
}

@keyframes heroBenefitsIn{
  0%{
    opacity:0;
    transform:translateY(45px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-benefits .benefit{
  min-width:0;
  height:100%;
  border:0;
  border-right:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#fff;
  padding:7px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  opacity:0;
  transform:translateY(28px);
  animation:heroBenefitItemIn 1.05s var(--smooth) forwards;
  transition:
    transform .45s var(--spring),
    background .3s ease;
}

.hero-benefits .benefit:nth-child(1){
  animation-delay:1.22s;
}

.hero-benefits .benefit:nth-child(2){
  animation-delay:1.32s;
}

.hero-benefits .benefit:nth-child(3){
  animation-delay:1.42s;
}

.hero-benefits .benefit:nth-child(4){
  animation-delay:1.52s;
}

.hero-benefits .benefit:nth-child(5){
  animation-delay:1.62s;
}

.hero-benefits .benefit:nth-child(6){
  animation-delay:1.72s;
}

@keyframes heroBenefitItemIn{
  0%{
    opacity:0;
    transform:translateY(28px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-benefits .benefit:last-child{
  border-right:0;
}

.hero-benefits .benefit:hover{
  background:rgba(255,255,255,.055);
  transform:translateY(-1px) scale(1.035);
  z-index:2;
}

.hero-benefits .benefit img{
  width:31px;
  height:31px;
  flex:0 0 31px;
  object-fit:contain;
  filter:none;
  transition:transform .45s var(--spring);
}

.hero-benefits .benefit:hover img{
  transform:scale(1.12);
}

.hero-benefits .benefit span{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.hero-benefits .benefit strong{
  color:#fff;
  font-size:9px;
  line-height:1.2;
}

.hero-benefits .benefit small{
  color:rgba(255,255,255,.72);
  font-size:7.5px;
  line-height:1.2;
}


/* =========================================================
   RANGE
   ========================================================= */

.range{
  height:auto;
  min-height:170px;
  flex:0 0 auto;
  padding:9px 42px 18px;
  background:#fff;
}

.range-intro{
  display:grid;
  grid-template-columns:1.08fr 1.1fr auto;
  align-items:end;
  gap:25px;
  margin-bottom:5px;
}

.eyebrow{
  font-size:10px;
  font-weight:700;
  color:var(--dark-red);
  margin-bottom:4px;
}

.range-intro h2{
  font-size:18px;
  line-height:1;
  margin:0;
  font-weight:800;
  letter-spacing:-.5px;
}

.range-intro p{
  font-size:11px;
  line-height:1.35;
  color:#444;
  margin:0;
}

.all-products{
  font-size:10px;
  font-weight:700;
  color:var(--dark-red);
  white-space:nowrap;
  padding-bottom:1px;
}

.all-products b{
  font-size:16px;
  font-weight:400;
  margin-left:7px;
  vertical-align:-2px;
}


/* =========================================================
   PRODUCT CARDS
   ========================================================= */

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}

.card{
  height:106px;
  min-height:106px;
  max-height:106px;
  border:1px solid #e7e7e7;
  border-radius:6px;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.055);
  display:grid;
  grid-template-columns:54% 46%;
  overflow:hidden;
  opacity:0;
  transform:translateY(45px);
  animation:cardUp 1.25s var(--smooth) forwards;
  transition:box-shadow .25s ease;
}

.card:nth-child(1){
  animation-delay:1.05s;
}

.card:nth-child(2){
  animation-delay:1.22s;
}

.card:nth-child(3){
  animation-delay:1.39s;
}

.card:nth-child(4){
  animation-delay:1.56s;
}

.card:hover{
  box-shadow:0 9px 19px rgba(0,0,0,.09);
}

@keyframes cardUp{
  0%{
    opacity:0;
    transform:translateY(45px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.card-image{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px;
  min-width:0;
}

.card-image img{
  display:block;
  width:auto;
  height:auto;
  max-width:88%;
  max-height:78px;
  object-fit:contain;
  transition:transform .55s var(--spring);
}

.card:hover .card-image img{
  transform:scale(1.025);
}

.hob-image img{
  max-width:92%;
  max-height:62px;
}

.card-copy{
  padding:8px 8px 7px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.card-copy h3{
  margin:0 0 4px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
}

.card-copy p{
  margin:0;
  font-size:10px;
  color:#333;
}

.card-copy span{
  margin-top:auto;
  color:var(--dark-red);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.card-copy span b{
  font-size:14px;
  font-weight:400;
  margin-left:4px;
  vertical-align:-2px;
}

.faq-graphic{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dark-red);
  font-size:55px;
  font-weight:800;
  line-height:1;
}

.faq-image img{
  max-width:72%;
  max-height:70px;
  object-fit:contain;
}

/* Card title accent (theme red) */
.card-red{
  color:var(--red);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:10px 20px 14px;
  font-size:12px;
  line-height:1.35;
  color:#666;
  background:#fff;
  border-top:1px solid var(--line);
  text-align:center;
}

.site-footer .footer-separator{
  color:#ccc;
  font-weight:300;
}

.site-footer a{
  color:var(--red);
  font-weight:600;
  transition:color .2s ease;
}

.site-footer a:hover{
  color:#111;
}


/* =========================================================
   ZERO START CARD
   ========================================================= */

#zero-image{
  opacity:1;
  transition:
    opacity 1.35s ease,
    transform 1.35s var(--spring);
}

#zero-image.zero-fading,
#ct-image.ct-fading{
  opacity:0;
  transform:scale(.975);
}

#zero-image,
#ct-image{
  transition:opacity 1.8s ease, transform 1.8s cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   LOWER BENEFITS
   ========================================================= */

.benefits{
  height:14%;
  flex:1 1 14%;
  min-height:0;
  margin:0 25px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(6,1fr);
  transform:translateY(40px);
  opacity:0;
  animation:benefitsUp 1.25s var(--smooth) 1.72s forwards;
}

@keyframes benefitsUp{
  0%{
    opacity:0;
    transform:translateY(40px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.benefit{
  border:0;
  border-right:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 7px;
  text-align:left;
  cursor:pointer;
  transition:
    background .25s ease,
    transform .45s var(--spring);
}

.benefit:last-child{
  border-right:0;
}

.benefit:hover{
  background:#fcfcfc;
  transform:translateY(-2px);
}

.benefit img{
  width:29px;
  height:29px;
  object-fit:contain;
  flex:0 0 29px;
}

.benefit span{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.benefit strong{
  font-size:8.5px;
  line-height:1.2;
}

.benefit small{
  font-size:7.5px;
  line-height:1.2;
  color:#666;
}


/* =========================================================
   EXIT ANIMATIONS
   No bounce / no overshoot.
   ========================================================= */

/* Header + logo stay fixed during exit — only main content leaves */
.site-shell.page-exit .header,
.site-shell.page-exit .logo{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}

.site-shell.page-exit main{
  pointer-events:none;
}

.site-shell.page-exit .hero-picture{
  animation:heroPictureOut .8s var(--smooth) forwards !important;
}

@keyframes heroPictureOut{
  0%{
    opacity:1;
    transform:translateX(0);
  }

  100%{
    opacity:0;
    transform:translateX(-12%);
  }
}

.site-shell.page-exit .hero-copy{
  animation:heroCopyOut .75s var(--smooth) forwards !important;
}

@keyframes heroCopyOut{
  0%{
    opacity:1;
    transform:translate(0,-49%);
  }

  100%{
    opacity:0;
    transform:translate(-60px,-49%);
  }
}

.site-shell.page-exit .hero-geyser{
  animation:geyserOut .7s var(--smooth) forwards !important;
}

.site-shell.page-exit .hero-geyser-item{
  animation:none !important;
  opacity:1;
}

@keyframes geyserOut{
  0%{
    opacity:1;
    transform:translateY(-50%);
  }

  100%{
    opacity:0;
    transform:translateY(-20%);
  }
}

.site-shell.page-exit .card{
  animation:cardOut .65s var(--smooth) forwards !important;
}

.site-shell.page-exit .card:nth-child(1){
  animation-delay:0s;
}

.site-shell.page-exit .card:nth-child(2){
  animation-delay:.07s;
}

.site-shell.page-exit .card:nth-child(3){
  animation-delay:.14s;
}

.site-shell.page-exit .card:nth-child(4){
  animation-delay:.21s;
}

@keyframes cardOut{
  0%{
    opacity:1;
    transform:translateY(0);
  }

  100%{
    opacity:0;
    transform:translateY(55px);
  }
}

.site-shell.page-exit .benefits{
  animation:benefitsOut .7s var(--smooth) .18s forwards !important;
}

@keyframes benefitsOut{
  0%{
    opacity:1;
    transform:translateY(0);
  }

  100%{
    opacity:0;
    transform:translateY(50px);
  }
}

.site-shell.page-exit .hero-benefits{
  animation:heroBenefitsOut .65s var(--smooth) forwards !important;
}

@keyframes heroBenefitsOut{
  0%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(40px);
  }
}

.site-shell.page-exit .range{
  animation:rangeOut .7s var(--smooth) .05s forwards !important;
}

@keyframes rangeOut{
  0%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(40px);
  }
}

.site-shell.page-exit .site-footer{
  animation:footerOut .55s var(--smooth) .1s forwards !important;
}

@keyframes footerOut{
  0%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(20px);
  }
}


/* =========================================================
   MODAL
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  visibility:hidden;
  opacity:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px 0;
  -webkit-overflow-scrolling:touch;
  transition:
    opacity .35s ease,
    visibility .35s ease;
}

.modal.open{
  visibility:visible;
  opacity:1;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:none;
}
.modal.open .modal-backdrop{
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.modal-card{
  position:relative;
  z-index:1;
  width:min(600px,calc(100% - 28px));
  max-height:calc(100vh - 40px);
  padding:34px 40px 30px;
  border-radius:13px;
  background:rgba(255,255,255,.97);
  box-shadow:0 25px 70px rgba(0,0,0,.18);
  transform:translateY(25px) scale(.97);
  opacity:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  transition:
    transform .7s var(--spring),
    opacity .3s ease;
}

.modal.open .modal-card{
  transform:none;
  opacity:1;
}

.modal-close{
  position:absolute;
  right:14px;
  top:9px;
  border:0;
  background:transparent;
  font-size:28px;
  font-weight:300;
  cursor:pointer;
}

.modal-icon{
  width:50px;
  height:50px;
  object-fit:contain;
}

.modal-eyebrow{
  margin-top:11px;
  color:var(--dark-red);
  font-size:8px;
  font-weight:700;
  letter-spacing:1px;
}

.modal-card h2{
  margin:5px 0 0;
  font-size:24px;
  line-height:1.05;
}

.modal-red-line{
  width:36px;
  height:2px;
  background:var(--dark-red);
  margin:14px 0 11px;
}

.modal-content{
  font-size:11px;
  line-height:1.65;
  color:#444;
  padding-bottom:4px;
}

.modal-content p{
  margin:0 0 9px;
}

.modal-link{
  display:inline-block;
  margin-top:13px;
  color:var(--dark-red);
  font-size:8px;
  font-weight:700;
}

.modal-link b{
  font-size:15px;
  margin-left:5px;
  font-weight:400;
}


/* =========================================================
   SHORT DESKTOP SCREENS
   ========================================================= */

@media (min-width:769px) and (max-height:700px){

  .header{
    height:60px;
    flex-basis:60px;
  }

  .hero{
    height:410px;
    min-height:410px;
    flex-basis:410px;
  }

  .range{
    height:25%;
    flex-basis:25%;
    padding-top:8px;
  }

  .benefits{
    height:15%;
    min-height:66px;
  }

  .hero-copy h1{
    font-size:34px;
  }

  .hero-copy p{
    font-size:12px;
  }

  .hero-geyser{
    max-width:58%;
    top:calc(40% - 30px);
    height:calc(100% - 48px);
    max-height:calc(100% - 48px);
  }

  .hero-geyser-item img{
    max-width:clamp(70px,8vw,116px);
  }

  .card{
    height:96px;
    min-height:92px;
    max-height:100px;
  }

  .card-image img{
    max-height:76px;
  }

  .benefit img{
    width:29px;
    height:29px;
    flex-basis:29px;
  }

  .hero-benefits{
    height:57px;
  }

  .hero-benefits .benefit{
    padding:6px 7px;
  }

  .hero-benefits .benefit img{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px){

  .site-shell main{
    display:block;
  }

  .site-shell{
    display:block;
    width:100%;
    height:auto;
    min-height:0;
    margin:0 auto 12px;
    border-radius:14px;
    overflow:hidden;
  }

  html,
  body{
    background:#f2f2f0;
  }

  body{
    padding:6px;
    overflow:visible;
  }


  /* -------------------------------------------------------
     MOBILE HEADER
     ------------------------------------------------------- */

  .header{
    height:62px;
    flex-basis:62px;
    padding:3px 12px 3px 15px;
    display:flex;
    justify-content:space-between;
    border-radius:14px 14px 0 0;
  }

  .logo{
    transform:translateY(-72px);
    animation:logoEnterMobile 1.45s var(--smooth) .05s forwards;
  }

  .logo img{
    width:91px;
  }

  @keyframes logoEnterMobile{
    0%{
      opacity:0;
      transform:translateY(-72px);
    }

    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  .desktop-nav,
  .installer{
    display:none;
  }


  /* -------------------------------------------------------
     MOBILE MENU + HAMBURGER
     Open: lines morph to X
     Close: X spins + shrinks, lines spin back into place
     ------------------------------------------------------- */

  .menu-toggle{
    display:block;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    background:transparent;
    position:relative;
    z-index:41;
    cursor:pointer;
  }

  .menu-toggle span{
    position:absolute;
    left:7px;
    width:25px;
    height:1.5px;
    background:#111;
    border-radius:2px;
    transform-origin:center;
    transition:
      top .55s cubic-bezier(.16,1,.3,1),
      transform .6s cubic-bezier(.16,1,.3,1),
      opacity .35s ease,
      width .45s cubic-bezier(.16,1,.3,1);
  }

  .menu-toggle span:nth-child(1){
    top:10px;
    transform:rotate(0deg) scale(1);
  }

  .menu-toggle span:nth-child(2){
    top:19px;
    transform:scaleX(1);
    opacity:1;
  }

  .menu-toggle span:nth-child(3){
    top:28px;
    transform:rotate(0deg) scale(1);
  }

  /* Open → X (extra rotation so close path spins further) */
  .menu-toggle.open span:nth-child(1){
    top:19px;
    transform:rotate(225deg) scale(1);
  }

  .menu-toggle.open span:nth-child(2){
    opacity:0;
    transform:scaleX(0);
  }

  .menu-toggle.open span:nth-child(3){
    top:19px;
    transform:rotate(-225deg) scale(1);
  }

  /* Closing feel: when .open is removed, spans reverse from 225° → 0°
     (spin) while scale settles to 1 — already handled by transitions above */

  .mobile-menu{
    display:flex;
    position:absolute;
    z-index:40;
    top:69px;
    left:8px;
    right:8px;
    flex-direction:column;
    padding:8px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:12px;
    background:rgba(255,255,255,.95);
    box-shadow:0 18px 45px rgba(0,0,0,.13);
    backdrop-filter:blur(12px);
    opacity:0;
    pointer-events:none;
    transform:translateY(-12px) scale(.985);
    transition:
      opacity .35s ease,
      transform .7s var(--spring);
  }

  .mobile-menu.open{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  .mobile-menu a{
    padding:14px 12px;
    border-bottom:1px solid #eee;
    font-size:11px;
    font-weight:600;
    color:#111;
    opacity:0;
    transform:translateY(-8px);
    transition:
      opacity .35s ease,
      transform .65s var(--spring),
      color .22s ease,
      background .22s ease;
  }

  .mobile-menu.open a{
    opacity:1;
    transform:none;
  }

  .mobile-menu a:hover{
    color:var(--red);
  }

  .mobile-menu a.active{
    color:var(--red);
  }

  .mobile-menu a.mobile-installer:hover,
  .mobile-menu a.mobile-installer.active{
    color:#fff;
    background:var(--dark-red);
  }

  .mobile-menu a:nth-child(1){
    transition-delay:.05s;
  }

  .mobile-menu a:nth-child(2){
    transition-delay:.10s;
  }

  .mobile-menu a:nth-child(3){
    transition-delay:.15s;
  }

  .mobile-menu a:nth-child(4){
    transition-delay:.20s;
  }

  .mobile-menu a:nth-child(5){
    transition-delay:.25s;
  }

  .mobile-menu a:nth-child(6){
    transition-delay:.30s;
  }

  .mobile-installer{
    margin-top:7px;
    border:0!important;
    background:var(--red);
    color:#fff;
    text-align:center;
    border-radius:4px;
  }


  /* -------------------------------------------------------
     MOBILE HERO
     ------------------------------------------------------- */

  .hero{
    height:560px;
    min-height:560px;
    aspect-ratio:auto;
    padding-bottom:0;
    border-radius:0 0 10px 10px;
    position:relative;
    overflow:hidden;
  }

  .hero-picture{
    animation:none !important;
    opacity:1;
    transform:none;
  }


  /* Mobile: no product geysers in hero */
  .hero-geyser,
  .hero-geyser-row,
  .hero-geyser-mobile{
    display:none !important;
  }

  .hero-geyser-mobile-layer{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-end;
    opacity:0;
    transition:opacity 1.5s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
  }

  .hero-geyser-mobile-layer.is-active{
    opacity:1;
  }

  .hero-geyser-mobile-layer img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(100% - 32px);
    object-fit:contain;
    object-position:bottom left;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.18));
  }

  .hero-geyser-mobile .hero-geyser-label{
    margin-top:6px;
    padding-left:10px;
    align-items:flex-start;
    text-align:left;
  }

  .hero-geyser-mobile .hero-geyser-label .size{
    font-size:10px;
    font-weight:500;
  }

  .hero-geyser-mobile .hero-geyser-label .type,
  .hero-geyser-mobile .hero-geyser-label .type-red{
    font-size:7px;
    color:var(--red);
  }

  @keyframes mobileGeyserIn{
    0%{
      opacity:0;
      transform:translateY(28px);
    }
    100%{
      opacity:1;
      transform:translateY(0);
    }
  }


  /* -------------------------------------------------------
     MOBILE HERO COPY
     Raised to match geyser vertical centre band
     ------------------------------------------------------- */

  .hero-heading-desktop{ display:none; }
  .hero-heading-mobile{ display:block; }

  .hero-copy{
    z-index:7;
    left:7%;
    top:auto !important;
    bottom:138px !important; /* sits just above the icons tray */
    width:88%;
    transform:translateY(36px);
    opacity:0;
    animation:mobileCopyIn 1.55s var(--smooth) .28s both !important;
  }

  @keyframes mobileCopyIn{
    0%{
      opacity:0;
      transform:translateY(36px);
    }

    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  .hero-copy .hero-eyebrow{
    font-size:11px;
    letter-spacing:1.4px;
    margin-bottom:6px;
  }

  .hero-copy h1{
    position:relative;
    font-size:clamp(29px,9.2vw,38px);
    line-height:.98;
    letter-spacing:-.9px;
    color:#fff;
    -webkit-text-stroke:0;
    text-shadow:none;
    border:none;
  }

  .hero-copy h1 span{
    white-space:normal;
  }

  .hero-copy p{
    position:relative;
    max-width:72%;
    font-size:13px;
    line-height:1.4;
    color:rgba(255,255,255,.92);
    -webkit-text-stroke:0;
    text-shadow:none;
    border:none;
  }

  .desktop-break{
    display:none;
  }

  .red-line{
    margin:9px 0;
  }

  .hero-actions{
    display:flex;
    position:relative;
    margin-top:11px;
    gap:6px;
  }

  .hero-actions .cta{
    height:36px;
    padding:9px 11px;
    font-size:10px;
  }


  /* -------------------------------------------------------
     MOBILE HERO BENEFITS – transparent black (matches desktop)
     ------------------------------------------------------- */

  .hero-benefits{
    left:0;
    right:0;
    bottom:0;
    top:auto !important;
    width:100%;
    height:auto !important;
    min-height:0;
    margin:0;
    padding:0;
    border:0 !important;
    border-radius:0;
    grid-template-columns:repeat(4,1fr) !important;
    grid-template-rows:auto;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:none;
    overflow:hidden;
    opacity:0;
    transform:translateY(28px);
    animation:mobileBenefitsIn 1.2s var(--smooth) .8s both !important;
  }

  @keyframes mobileBenefitsIn{
    0%{
      opacity:0;
      transform:translateY(28px);
    }

    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  .hero-benefits .benefit{
    height:auto !important;
    min-height:0 !important;
    padding:8px 4px !important;
    gap:4px;
    justify-content:center;
    align-items:center;
    border:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    background:transparent;
    color:#fff;
    text-decoration:none !important;
    box-shadow:none !important;
    outline:none !important;
    opacity:0;
    transform:translateY(16px);
    animation:mobileBenefitItemIn .9s var(--smooth) forwards !important;
    transition:background .25s ease;
  }

  .hero-benefits .benefit:nth-child(1){ animation-delay:.85s !important; }
  .hero-benefits .benefit:nth-child(2){ animation-delay:.92s !important; }
  .hero-benefits .benefit:nth-child(3){ animation-delay:.99s !important; }
  .hero-benefits .benefit:nth-child(4){ animation-delay:1.06s !important; }
  .hero-benefits .benefit:nth-child(5){ animation-delay:1.13s !important; }
  .hero-benefits .benefit:nth-child(6){ animation-delay:1.20s !important; }

  @keyframes mobileBenefitItemIn{
    0%{
      opacity:0;
      transform:translateY(16px);
    }

    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  .hero-benefits .benefit:hover,
  .hero-benefits .benefit:focus,
  .hero-benefits .benefit:active{
    background:rgba(255,255,255,.1);
    transform:none;
    text-decoration:none !important;
    outline:none !important;
    box-shadow:none !important;
  }

  .hero-benefits .benefit img{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
    filter:none;
  }

  .hero-benefits .benefit strong{
    font-size:7px !important;
    line-height:1.1;
    color:#fff !important;
    letter-spacing:0.1px;
  }

  .hero-benefits .benefit small{
    font-size:6px !important;
    line-height:1.1;
    color:rgba(255,255,255,.72) !important;
  }


  /* -------------------------------------------------------
     MOBILE RANGE
     ------------------------------------------------------- */

  .range{
    height:auto;
    flex:0 0 auto;
    padding:12px 13px 11px;
  }

  .range-intro{
    display:block;
    margin-bottom:11px;
  }

  .range-intro h2{
    font-size:18px;
  }

  .range-intro p{
    margin-top:7px;
    font-size:11px;
  }

  .all-products{
    display:inline-block;
    margin-top:6px;
  }


  /* -------------------------------------------------------
     MOBILE PRODUCT CARDS
     ------------------------------------------------------- */

  .cards{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .card{
    height:140px;
    min-height:140px;
    max-height:none;
    grid-template-columns:1fr;
    grid-template-rows:84px 56px;
    opacity:0;
    transform:translateY(35px);
    animation:mobileCardIn 1.1s var(--smooth) .5s forwards !important;
  }

  @keyframes mobileCardIn{
    0%{
      opacity:0;
      transform:translateY(35px);
    }

    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  .card-image img{
    max-width:88%;
    max-height:75px;
  }

  .hob-image img{
    max-width:92%;
    max-height:68px;
  }

  .card-copy{
    padding:6px 8px 7px;
  }

  .card-copy h3{
    font-size:8.5px;
  }

  .card-copy p{
    font-size:7px;
  }

  .card-copy span{
    font-size:6.5px;
  }

  .faq-graphic{
    font-size:50px;
  }


  /* -------------------------------------------------------
     MOBILE LOWER BENEFITS
     ------------------------------------------------------- */

  .benefits{
    height:auto;
    flex:0 0 auto;
    min-height:0;
    margin:0 13px;
    grid-template-columns:repeat(2,1fr);
    opacity:0;
    transform:translateY(30px);
    animation:mobileLowerBenefitsIn 1.1s var(--smooth) 1s both !important;
  }

  @keyframes mobileLowerBenefitsIn{
    0%{
      opacity:0;
      transform:translateY(30px);
    }

    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  .benefit{
    min-height:78px;
    padding:8px 5px;
    gap:7px;
  }

  .benefit:nth-child(even){
    border-right:0;
  }

  .benefit img{
    width:31px;
    height:31px;
    flex-basis:31px;
  }

  .benefit strong{
    font-size:8.5px;
  }

  .benefit small{
    font-size:7.5px;
  }


  /* -------------------------------------------------------
     MOBILE MODAL
     ------------------------------------------------------- */

  .modal{
    padding:12px 0;
  }

  .modal-card{
    width:calc(100% - 18px);
    max-height:calc(100dvh - 24px);
    padding:30px 20px 24px;
  }

  .modal-card h2{
    font-size:21px;
  }

  .modal-content{
    font-size:10.5px;
  }


  /* -------------------------------------------------------
     MOBILE FOOTER (same style as desktop, width-fitted)
     ------------------------------------------------------- */

  .site-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px 8px;
    padding:12px 14px 28px;
    font-size:9px;
    line-height:1.4;
    color:#666;
    text-align:center;
    border-top:1px solid var(--line);
  }

  .site-footer .footer-separator{
    color:#ccc;
  }

  .site-footer a{
    color:var(--red);
    font-weight:600;
  }

  .site-footer a:hover{
    color:#111;
  }


  /* -------------------------------------------------------
     MOBILE ASK HABCO
     ------------------------------------------------------- */

  .ask-modal-panel{
    width:100%;
    max-width:100%;
  }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width:390px){

  .hero{
    min-height:510px;
    height:510px;
  }

  .hero-geyser{
    width:32% !important;
    max-width:32% !important;
    height:200px !important;
    max-height:200px !important;
    left:50% !important;
    right:auto !important;
    top:26% !important;
  }

  .hero-copy{
    left:6%;
    top:auto !important;
    bottom:130px !important; /* sits just above the icons tray on small phones */
    width:90%;
  }

  .hero-copy h1{
    font-size:clamp(23px,8vw,31px);
    color:#fff;
  }

  .hero-copy p{
    max-width:64%;
    font-size:8.4px;
    color:rgba(255,255,255,.92);
  }

  .hero-benefits{
    height:auto !important;
    min-height:0 !important;
    grid-template-columns:repeat(4,1fr) !important;
    grid-template-rows:auto;
  }

  .hero-benefits .benefit{
    height:auto !important;
    min-height:0 !important;
    padding:6px 3px !important;
  }

  .hero-benefits .benefit img{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
  }

  .hero-benefits .benefit strong{
    font-size:6.5px !important;
  }

  .hero-benefits .benefit small{
    font-size:5.5px !important;
  }
}






/* About hero: white main heading (red accent stays) */
.hero-about .hero-copy h1{
  color:#fff;
}

.hero-about .hero-copy h1 .hero-red-line{
  color:var(--red);
}

.hero-about .hero-copy p{
  color:rgba(255,255,255,.92);
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-page{
  background:#fff;
  padding:0px 42px 2px;
}

.about-wrap{
  max-width:980px;
  margin:0 auto;
}

.about-block{
  margin-bottom:22px;
  opacity:0;
  transform:translateY(28px);
  animation:aboutIn 1.15s var(--smooth) forwards;
}

.about-block:nth-child(1){ animation-delay:.35s; }
.about-block:nth-child(2){ animation-delay:.48s; }
.about-block:nth-child(3){ animation-delay:.58s; }
.about-block:nth-child(4){ animation-delay:.68s; }
.about-grid .about-block:nth-child(1){ animation-delay:.48s; }
.about-grid .about-block:nth-child(2){ animation-delay:.58s; }

@keyframes aboutIn{
  0%{
    opacity:0;
    transform:translateY(28px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.about-label{
  font-size:9px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:8px;
}

.about-block h2{
  margin:0 0 10px;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.4px;
  color:#111;
}

.about-block h3{
  margin:0 0 10px;
  font-size:clamp(16px,1.6vw,20px);
  line-height:1.2;
  font-weight:700;
  color:#111;
}

.about-rule{
  width:36px;
  height:2px;
  background:var(--dark-red);
  margin:0 0 16px;
}

.about-block p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.65;
  color:#444;
  max-width:72ch;
}

.about-block p:last-child{
  margin-bottom:0;
}

.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 28px;
  margin-bottom:22px;
}

.about-grid .about-block{
  margin-bottom:0;
}



/* Magazine body layout (desktop) */
.about-magazine{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:8px;
  width:100%;
}

.about-section{
  margin-bottom:22px;
  width:100%;
}

.about-section .about-label{
  margin-bottom:8px;
}

.about-section h2,
.about-section h3{
  margin:0 0 10px;
}

.about-section .about-rule{
  margin:0 0 16px;
}

.about-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:22px 40px;
  width:100%;
  align-items:start;
}

.about-row p,
.about-lead p{
  margin:0;
  font-size:13px;
  line-height:1.65;
  color:#444;
  min-width:0; /* critical: stops long text forcing column wider */
  overflow-wrap:break-word;
  word-wrap:break-word;
}

.about-lead{
  width:100%;
  margin-bottom:18px;
}

.about-lead p{
  max-width:100%;
}

.about-row + .about-row{
  margin-top:18px;
}

@media (max-width:768px){
  .about-row{
    grid-template-columns:1fr;
    gap:14px;
  }

  .about-section{
    margin-bottom:28px;
  }

  .about-lead{
    margin-bottom:14px;
  }
}

.about-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding-top:8px;
  opacity:0;
  transform:translateY(20px);
  animation:aboutIn 1.1s var(--smooth) .75s forwards;
}

.cta-outline{
  height:36px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  font-size:11px;
  font-weight:700;
  background:transparent;
  color:var(--red);
  border:1.5px solid var(--red);
  transition:
    background .22s ease,
    color .22s ease,
    transform .45s var(--spring),
    box-shadow .25s ease;
}

.cta-outline:hover{
  background:var(--red);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(223,27,35,.18);
}

/* About page exit */
.site-shell.page-exit .about-block,
.site-shell.page-exit .about-cta{
  animation:aboutOut .55s var(--smooth) forwards !important;
}

@keyframes aboutOut{
  0%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(28px);
  }
}

@media (max-width:768px){
  .about-page{
    padding:28px 16px 36px;
  }

  .about-grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .about-block{
    margin-bottom:28px;
  }

  .about-block h2{
    font-size:22px;
  }

  .about-block h3{
    font-size:16px;
  }

  .about-block p{
    font-size:12.5px;
    line-height:1.6;
  }

  .about-cta{
    gap:10px;
  }

  .about-cta .cta{
    flex:1 1 auto;
    min-width:120px;
  }
}

/* =========================================================
   ASK HABCO
   ========================================================= */

.ask-modal{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:
    opacity .4s cubic-bezier(.16,1,.3,1),
    visibility .4s cubic-bezier(.16,1,.3,1);
}

.ask-modal.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.ask-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:none;
}
.ask-modal.open .ask-modal-backdrop{
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.ask-modal-panel{
  position:relative;
  z-index:2;
  width:min(430px,100vw);
  height:100dvh;
  max-height:100dvh;
  background:#fff;
  box-shadow:12px 0 38px rgba(0,0,0,.25);
  border-radius:0;
  transform:translateX(-105%);
  opacity:0;
  transition:
    transform 1.15s cubic-bezier(.12,1,.28,1),
    opacity 0.95s cubic-bezier(.12,1,.28,1);
  overflow:hidden;
  will-change:transform, opacity;
}

.ask-modal.open .ask-modal-panel{
  transform:translateX(0);
  opacity:1;
}

.ask-modal-panel iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
  overflow:hidden;
}

.ask-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:5;
  width:34px;
  height:34px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#111;
  font-size:24px;
  line-height:30px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

.ask-modal-close:hover{
  transform:scale(1.06);
}




/* About / Contact: show hero action buttons on desktop too */
@media (min-width:769px){
  .hero-about .hero-actions,
  .hero-contact .hero-actions{
    display:flex;
    margin-top:18px;
  }
}

/* Contact page */
.hero-contact .hero-copy h1{ color:#fff; }
.hero-contact .hero-copy h1 .hero-red-line{ color:var(--red); }
.hero-contact .hero-copy p{ color:rgba(255,255,255,.92); }

.contact-page{
  background:#fff;
}

.contact-wrap{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  padding:40px 0 56px;
}

.contact-top{
  max-width:720px;
  margin:0 auto 32px;
  text-align:center;
}

.contact-label{
  margin-bottom:14px;
  font-size:11px;
  line-height:1;
  letter-spacing:.22em;
  font-weight:700;
  color:#e21b23;
  text-transform:uppercase;
}

.contact-top h2{
  margin:0;
  font-size:clamp(28px,3.6vw,42px);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:800;
  color:#171717;
}

.contact-top-rule{
  width:36px;
  height:2px;
  background:#e21b23;
  margin:22px auto 20px;
}

.contact-top p{
  margin:0 auto;
  max-width:520px;
  font-size:16px;
  line-height:1.65;
  color:#555;
}

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:28px;
  align-items:stretch;
}

.contact-panel{
  border:1px solid #ebebeb;
  background:#fff;
  padding:32px 30px 30px;
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-shadow:0 8px 28px rgba(0,0,0,.06);
  border-radius:12px;
}

.contact-panel-dark{
  background:#171717;
  border-color:#171717;
  color:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.18);
  border-radius:12px;
}

.contact-panel-head{
  margin-bottom:28px;
}

.contact-panel-head .contact-label{
  margin-bottom:12px;
}

.contact-panel-dark .contact-label{
  color:#e21b23;
}

.contact-panel-head h3{
  margin:0;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:750;
  color:#171717;
}

.contact-panel-dark .contact-panel-head h3{
  color:#fff;
}

.contact-panel-head p{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.55;
  color:#666;
}

.contact-panel-dark .contact-panel-head p{
  color:rgba(255,255,255,.72);
}

.contact-company{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
}

.contact-address{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.65;
  color:rgba(255,255,255,.78);
}

.contact-map{
  margin:0 0 22px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  background:#0d0d0d;
  aspect-ratio:16 / 11;
  min-height:180px;
}

.contact-map iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:180px;
  border:0;
  filter:grayscale(0.15) contrast(1.02);
}

.contact-rows{
  display:grid;
  gap:0;
  margin-top:auto;
}

.contact-row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  align-items:baseline;
  padding:14px 0;
  border-top:1px solid rgba(255,255,255,.10);
}

.contact-row:last-child{
  border-bottom:1px solid rgba(255,255,255,.12);
}

.contact-row span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.contact-row a{
  font-size:15px;
  font-weight:600;
  color:#fff;
  transition:color .2s ease;
}

.contact-row a:hover{
  color:#e21b23;
}

.contact-form{
  display:grid;
  gap:14px;
  flex:1;
}

.contact-field{
  display:grid;
  gap:7px;
}

.contact-field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact-field label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#444;
}

.contact-field input,
.contact-field textarea,
.contact-field select{
  width:100%;
  border:1px solid #e0e0e0;
  border-radius:10px;
  background:#f7f7f7;
  color:#171717;
  font:inherit;
  font-size:15px;
  padding:13px 16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

.contact-field textarea{
  min-height:120px;
  resize:vertical;
}

.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus{
  border-color:var(--red);
  background:#fff;
  box-shadow:0 0 0 4px rgba(223,27,35,.12);
}

.contact-form-actions{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

.contact-form-actions .cta{
  min-width:160px;
}

.contact-form-note{
  margin:0;
  font-size:13px;
  color:#888;
  line-height:1.5;
}

.contact-form-note a{
  color:#171717;
  font-weight:600;
}

.contact-form-note a:hover{
  color:#e21b23;
}

.site-shell.page-exit .faq-hero,
.site-shell.page-exit .faq-page,
.site-shell.page-exit .about-premium,
.site-shell.page-exit .contact-page,
.site-shell.page-exit .hero-contact,
.site-shell.page-exit .hero-about{
  animation:pageContentOut .7s var(--smooth) forwards !important;
}

@keyframes pageContentOut{
  0%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(36px); }
}

/* FAQ page entrance — same system as other pages */
.faq-hero picture,
.faq-hero img{
  opacity:0;
  transform:translateX(-6%);
  animation:heroPictureIn 1.85s var(--smooth) .1s forwards;
}
.faq-hero-content{
  opacity:0;
  transform:translateX(-40px);
  animation:faqHeroCopyIn 1.5s var(--smooth) .35s forwards;
}
@keyframes faqHeroCopyIn{
  0%{ opacity:0; transform:translateX(-40px); }
  100%{ opacity:1; transform:translateX(0); }
}
.faq-intro,
.faq-search-wrap,
.faq-results-head,
.faq-results,
.faq-note,
.faq-bottom-cta{
  opacity:0;
  transform:translateY(36px);
  animation:faqContentUp 1.2s var(--smooth) forwards;
}
.faq-intro{ animation-delay:.45s; }
.faq-search-wrap{ animation-delay:.58s; }
.faq-results-head{ animation-delay:.7s; }
.faq-results{ animation-delay:.82s; }
.faq-note{ animation-delay:.94s; }
.faq-bottom-cta{ animation-delay:1.06s; }
@keyframes faqContentUp{
  0%{ opacity:0; transform:translateY(36px); }
  100%{ opacity:1; transform:translateY(0); }
}

/* FAQ exit: content leaves downward; header stays (handled by page-exit) */
.site-shell.page-exit .faq-hero picture,
.site-shell.page-exit .faq-hero img{
  animation:heroPictureOut .8s var(--smooth) forwards !important;
}
.site-shell.page-exit .faq-hero-content{
  animation:faqHeroCopyOut .7s var(--smooth) forwards !important;
}
@keyframes faqHeroCopyOut{
  0%{ opacity:1; transform:translateX(0); }
  100%{ opacity:0; transform:translateX(-48px); }
}

@media (max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
}

@media (max-width:768px){
  .contact-wrap{
    width:min(100% - 34px,680px);
    padding:52px 0 70px;
  }
  .contact-top{ margin-bottom:40px; }
  .contact-panel{ padding:28px 24px; }
  .contact-field-row{ grid-template-columns:1fr; gap:14px; }
  .contact-row{ grid-template-columns:80px 1fr; }
}

@media (max-width:480px){
  .contact-wrap{ width:min(100% - 28px,680px); }
  .contact-top h2{ font-size:28px; }
  .contact-form-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .contact-form-actions .cta{
    width:100%;
    text-align:center;
  }
  .contact-row{
    grid-template-columns:1fr;
    gap:4px;
  }
}




/* =========================================================
   PRODUCTS PAGE
   ========================================================= */

.hero-products{
  background:#171717;
}
.hero-products .hero-copy h1{ color:#fff; }
.hero-products .hero-copy h1 .hero-red-line{ color:var(--red); }
.hero-products .hero-copy p{ color:rgba(255,255,255,.92); }

.products-page{
  background:#fff;
}

.products-wrap{
  width:min(1120px,calc(100% - 48px));
  margin:0 auto;
  padding:56px 0 88px;
}

.products-intro{
  max-width:680px;
  margin:0 auto 44px;
  text-align:center;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1);
}

.products-label{
  margin-bottom:12px;
  font-size:11px;
  line-height:1;
  letter-spacing:.22em;
  font-weight:700;
  color:#e21b23;
  text-transform:uppercase;
}

.products-intro h2{
  margin:0;
  font-size:clamp(26px,3.4vw,38px);
  line-height:1.1;
  letter-spacing:-.035em;
  font-weight:800;
  color:#171717;
}

.products-rule{
  width:36px;
  height:2px;
  background:#e21b23;
  margin:18px auto 16px;
}

.products-intro p{
  margin:0 auto;
  max-width:520px;
  font-size:15px;
  line-height:1.65;
  color:#555;
}

.products-group{
  margin-bottom:36px;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1);
}

.products-group-head{
  margin-bottom:16px;
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1);
}

.products-group-head h3{
  margin:0;
  font-size:clamp(18px,2vw,22px);
  letter-spacing:-.02em;
  font-weight:750;
  color:#171717;
}

.products-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.products-grid-single{
  grid-template-columns:minmax(0,1fr);
  max-width:300px;
}
.products-grid-two{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Fan Forced uses same column sizing as other product cards (one cell, not stretched) */
.products-grid-fan{
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-width:none;
}
.products-grid-fan .product-card{
  /* occupies first column only — same width as Zero Start cards */
}

/* ----- Cards (smaller) ----- */
.product-card{
  border:1px solid #e8e8e8;
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-shadow:0 3px 14px rgba(0,0,0,.04);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    box-shadow .3s ease;
  cursor:pointer;
  will-change:transform, opacity;
  position:relative;
  overflow:hidden;
}
.product-card.is-expanded{
  overflow:visible;
}

.product-card:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.product-card-media{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 14px 6px;
  min-height:160px;
  background:linear-gradient(180deg,#f7f7f7 0%,#fff 100%);
  overflow:hidden;
}

.product-card-media img{
  display:block;
  width:auto;
  height:auto;
  max-width:88%;
  max-height:150px;
  object-fit:contain;
  transition:transform .85s cubic-bezier(.16,1,.3,1);
  transform-origin:center center;
}

.product-card:hover .product-card-media img{
  transform:scale(1.08);
}

.product-card-media-hob{
  min-height:130px;
}

.product-card-media-hob img{
  max-height:120px;
}

.product-card-body{
  padding:6px 16px 16px;
  display:flex;
  flex-direction:column;
  flex:1;
  gap:4px;
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .65s cubic-bezier(.16,1,.3,1);
}

.product-card-title{
  margin:0;
  font-size:14px;
  line-height:1.25;
  letter-spacing:-.02em;
  font-weight:750;
  color:#171717;
}
.product-card-title .t-black{
  color:#171717;
}
.product-card-title .t-red{
  color:var(--red);
}
/* Desktop closed cards: keep title parts on one line */
.product-card-title .t-line{
  display:inline;
}
.product-card-title .t-line + .t-line::before{
  content:" ";
}

.product-card-model{
  margin:0;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#888;
}

.product-card-highlight{
  margin:2px 0 4px;
  font-size:12px;
  line-height:1.35;
  color:#444;
  font-weight:600;
}

.product-card-points{
  margin:0 0 12px;
  padding:0 0 0 16px;
  font-size:12px;
  line-height:1.45;
  color:#555;
}

.product-card-points li{
  margin-bottom:2px;
}

.product-card .cta{
  align-self:flex-start;
  margin-top:auto;
  height:32px;
  padding:0 14px;
  font-size:10px;
}

.product-seo-detail{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ----- Page-load entrance: cards slide up + fade, ease out ----- */
.products-page:not(.is-ready) .products-intro,
.products-page:not(.is-ready) .products-group,
.products-page:not(.is-ready) .product-card,
.products-page:not(.is-ready) .products-support{
  opacity:0;
  transform:translateY(36px);
}

.products-page.is-ready .products-intro,
.products-page.is-ready .products-group,
.products-page.is-ready .product-card,
.products-page.is-ready .products-support{
  opacity:1;
  transform:translateY(0);
}

/* ----- OPEN: other cards slide down + fade ----- */
.product-card.is-sliding-out{
  opacity:0 !important;
  transform:translateY(48px) scale(.96) !important;
  pointer-events:none;
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1) !important;
}

.products-group.is-dimming{
  opacity:0 !important;
  transform:translateY(28px) !important;
  pointer-events:none;
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1) !important;
}

.products-page.is-opening .products-intro,
.products-page.is-opening .products-support{
  opacity:0 !important;
  transform:translateY(-12px);
  pointer-events:none;
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1) !important;
}

/* Selected card stays visible and grows in place — no disappear/reappear */
.product-card.is-selected-hold{
  z-index:3;
  transform:scale(1.03);
  box-shadow:0 14px 32px rgba(0,0,0,.12);
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    box-shadow .4s ease !important;
}

.product-card.is-selected-grow{
  z-index:4;
  transform:scale(1.06);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    box-shadow .5s ease !important;
}

/* Card body text slides out / fades while card grows */
.product-card.is-selected-grow .product-card-body,
.product-card.is-selected .product-card-body{
  opacity:0;
  transform:translateY(16px);
  pointer-events:none;
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .65s cubic-bezier(.16,1,.3,1);
}

.product-card.is-selected-grow .product-card-media img,
.product-card.is-selected .product-card-media img{
  transform:scale(1.12);
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}

/* ----- DETAIL MODE: selected card itself expands ----- */
.products-page.is-detail .products-intro,
.products-page.is-opening .products-intro.is-opening-hide,
.products-page.is-opening .products-support.is-opening-hide{
  opacity:0 !important;
  pointer-events:none;
  transform:translateY(-12px);
}

.products-page.is-detail .products-intro,
.products-page.is-detail .products-support{
  display:none;
}

.products-page.is-detail .products-group.is-dimmed{
  display:none;
}

.products-page.is-detail .products-group.is-active-group .products-group-head,
.products-page.is-detail .products-group.is-active-group .product-card.is-hidden-card{
  display:none;
}

/* Expanded card = the one window that contains everything */
.product-card.is-expanded{
  display:block !important;
  width:100%;
  max-width:100%;
  margin:0;
  grid-column:1 / -1;
  transform:none !important;
  box-shadow:0 12px 36px rgba(0,0,0,.10);
  border-color:#e0e0e0;
  pointer-events:auto;
  transition:
    box-shadow .5s ease,
    border-color .4s ease;
}

/* Compact card chrome hides once expanded — detail lives inside the card */
.product-card.is-expanded > .product-card-media,
.product-card.is-expanded > .product-card-body,
.product-card.is-expanded > .product-seo-detail{
  display:none !important;
}

.products-page.is-detail .products-group.is-active-group .products-grid{
  display:grid;
  grid-template-columns:1fr;
}

.product-card.is-collapsing{
  opacity:.92;
  transition:opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}

/* ----- DETAIL PANEL lives INSIDE the expanded card ----- */
.product-detail{
  margin:0;
  padding:22px 22px 28px;
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1);
  width:100%;
  box-sizing:border-box;
}

.product-detail.is-visible{
  opacity:1;
  transform:translateY(0);
}

.product-detail.is-leaving{
  opacity:0;
  transform:translateY(28px);
  pointer-events:none;
  transition:
    opacity .45s cubic-bezier(.16,1,.3,1),
    transform .55s cubic-bezier(.16,1,.3,1);
}

/* Key features: enter LEFT → RIGHT one at a time — list itself stays visible */
.product-detail-features{
  opacity:1 !important;
  transform:none !important;
  list-style:disc;
  visibility:visible;
}
.product-detail-features li{
  opacity:0;
  transform:translateX(-28px);
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity;
  margin-bottom:6px;
}
.product-detail-features li.feat-in{
  opacity:1 !important;
  transform:translateX(0) !important;
}
.product-detail-features li.feat-out{
  opacity:0;
  transform:translateX(-32px);
  transition:
    opacity .45s cubic-bezier(.4,0,1,1),
    transform .55s cubic-bezier(.4,0,1,1);
}

/* Specs + explain drawers */
.product-detail-specs,
.product-detail-explain{
  opacity:0;
  transform:translateY(-18px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1);
}
.product-detail-specs.is-in,
.product-detail-explain.is-in{
  opacity:1;
  transform:translateY(0);
}

/* Actions enter from bottom */
.product-detail-actions{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .75s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
}
.product-detail-actions.is-in{
  opacity:1;
  transform:translateY(0);
}

.product-detail-close{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
  padding:0;
  border:0;
  background:transparent;
  color:#171717;
  font:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s ease;
}

.product-detail-close:hover{
  color:#e21b23;
}

.product-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:32px;
  align-items:center;
  margin-bottom:32px;
}

.product-detail-media{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:340px;
  padding:24px;
  background:linear-gradient(180deg,#f5f5f5 0%,#fff 70%);
  border:1px solid #ececec;
  overflow:hidden;
}

.product-detail-media img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:380px;
  object-fit:contain;
  transition:transform .85s cubic-bezier(.16,1,.3,1);
  transform-origin:center center;
}

.product-detail-media:hover img{
  transform:scale(1.06);
}

.product-detail-info .products-label{
  margin-bottom:10px;
}

.product-detail-info h2{
  margin:0 0 6px;
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.12;
  letter-spacing:-.03em;
  font-weight:800;
  color:#171717;
}

.product-detail-info h2 .t-black{
  color:#171717;
  display:inline;
}

.product-detail-info h2 .t-red{
  color:var(--red);
  display:inline;
}

.product-detail-info h2 .t-line{
  display:block;
}

.product-detail-model{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#888;
}

.product-detail-lead{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.55;
  color:#444;
}

.product-detail-sub{
  margin:0 0 10px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#171717;
}

.product-detail-features{
  margin:0 0 22px;
  padding:0 0 0 18px;
  font-size:14px;
  line-height:1.55;
  color:#444;
}

.product-detail-features li{
  margin-bottom:5px;
}

.product-quote-btn{
  min-width:150px;
}

.product-detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:4px;
}

.product-detail-actions .cta{
  min-width:150px;
}

.product-back-btn{
  /* uses cta cta-white */
}

.product-detail-footer-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #e8e8e8;
  width:100%;
}
.product-detail-footer-actions .product-back-btn{
  min-width:150px;
}


.product-detail-specs{
  padding:22px 0;
  border-top:1px solid #e8e8e8;
  border-bottom:1px solid #e8e8e8;
  margin-bottom:22px;
}

.product-spec-list{
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 28px;
}

.product-spec-row{
  display:grid;
  grid-template-columns:minmax(0,130px) minmax(0,1fr);
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #f0f0f0;
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform 1s cubic-bezier(.16,1,.3,1);
}

.product-spec-row.is-in{
  opacity:1;
  transform:translateY(0);
}

.product-spec-row:last-child{
  border-bottom:0;
}

.product-spec-row dt{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#888;
}

.product-spec-row dd{
  margin:0;
  font-size:13px;
  line-height:1.45;
  color:#333;
}

.product-detail-explain{
  max-width:820px;
}

.product-detail-explain p{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.7;
  color:#444;
}

/* Staggered slide-in top → bottom (ease out / gradually slowing) */
.pd-anim{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity;
}

.product-detail.is-visible .pd-anim.is-in{
  opacity:1;
  transform:translateY(0);
}

.products-support{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid #e8e8e8;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1);
}

.products-support-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-bottom:32px;
}

.products-support-block h3{
  margin:0;
  font-size:clamp(18px,2vw,24px);
  letter-spacing:-.02em;
  font-weight:750;
  color:#171717;
}

.products-support-block .products-rule{
  margin:14px 0 14px;
}

.products-support-block p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:#555;
}

.products-support-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:28px 32px;
  background:#171717;
}

.products-support-cta .products-label{
  margin-bottom:8px;
}

.products-support-cta h3{
  margin:0;
  color:#fff;
  font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-.02em;
  font-weight:700;
}

.products-support-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* ----- CLOSE: cards return sliding up ----- */
.product-card.is-returning{
  opacity:0 !important;
  transform:translateY(40px) !important;
}

.product-card.is-returning.is-in-place{
  opacity:1 !important;
  transform:translateY(0) !important;
}

.products-group.is-returning-group{
  opacity:0 !important;
  transform:translateY(28px) !important;
}

.products-group.is-returning-group.is-in-place{
  opacity:1 !important;
  transform:translateY(0) !important;
}

.products-intro.is-returning-intro{
  opacity:0 !important;
  transform:translateY(24px) !important;
}

.products-intro.is-returning-intro.is-in-place{
  opacity:1 !important;
  transform:translateY(0) !important;
}

.site-shell.page-exit .products-page,
.site-shell.page-exit .hero-products{
  animation:pageContentOut .7s var(--smooth) forwards !important;
}

@media (max-width:960px){
  .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .products-grid-fan{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .products-grid-single{
    max-width:none;
  }
  .product-spec-list{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .products-wrap{
    width:min(100% - 34px,680px);
    padding:40px 0 60px;
  }
  /* Two product cards per row on mobile */
  .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .products-grid-single{
    max-width:none;
  }
  .product-card-media{
    min-height:130px;
    padding:12px 10px 4px;
  }
  .product-card-media img{
    max-height:120px;
  }
  .product-card-media-hob{
    min-height:110px;
  }
  .product-card-media-hob img{
    max-height:100px;
  }
  .product-card-body{
    padding:4px 10px 12px;
  }
  .product-card-title{
    font-size:12px;
  }
  /* Mobile closed cards: second title line (e.g. Zero Start Type D) on its own line */
  .product-card-title .t-line{
    display:block;
  }
  .product-card-title .t-line + .t-line::before{
    content:none;
  }
  .product-card-highlight{
    font-size:11px;
  }
  .product-card-points{
    font-size:11px;
    margin-bottom:8px;
  }
  .product-card .cta{
    height:28px;
    padding:0 10px;
    font-size:9px;
  }
  /* Expanded mobile: image left + heading/desc/quote right; KEY FEATURES full-width below in 2 cols */
  .product-detail{
    position:relative;
    padding:14px 12px 18px;
  }
  .product-detail-layout{
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,1fr);
    column-gap:14px;
    row-gap:4px;
    align-items:start;
    margin-bottom:12px;
  }
  /* Unwrap info so its children can sit in the layout grid */
  .product-detail-info{
    display:contents;
  }
  .product-detail-media{
    grid-column:1;
    grid-row:1 / span 5; /* beside label, title, model, lead, quote */
    float:none;
    width:auto;
    max-width:none;
    min-height:0;
    padding:8px 6px;
    margin:0;
    align-self:start;
  }
  .product-detail-media img{
    max-height:180px;
  }
  .product-detail-info > .products-label{
    grid-column:2;
    grid-row:1;
  }
  .product-detail-info > h2{
    grid-column:2;
    grid-row:2;
    font-size:clamp(15px,4.2vw,18px);
  }
  .product-detail-info > .product-detail-model{
    grid-column:2;
    grid-row:3;
  }
  .product-detail-info > .product-detail-lead{
    grid-column:2;
    grid-row:4;
    font-size:12px;
    margin-bottom:6px;
  }
  .product-detail-info > .product-detail-actions{
    grid-column:2;
    grid-row:5;
    margin-top:2px;
    margin-bottom:0;
    flex-wrap:nowrap;
  }
  /* Quote stays next to image (smaller on mobile) */
  .product-detail-actions .product-quote-btn{
    min-width:0;
    height:28px;
    padding:0 10px;
    font-size:9px;
  }
  /* Single back button lives in footer below tech + explain */
  .product-detail-footer-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid #e8e8e8;
    width:100%;
  }
  .product-detail-footer-actions .product-back-btn{
    min-width:0;
    height:30px;
    padding:0 12px;
    font-size:9px;
    margin:0;
  }
  /* True bottom of open card — below technical info + explain paragraph */
  .product-detail-footer-actions{
    display:flex !important;
    justify-content:flex-end;
    align-items:center;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid #e8e8e8;
    width:100%;
  }
  .product-back-mobile{
    display:inline-flex !important;
    min-width:0;
    height:30px;
    padding:0 12px;
    font-size:9px;
    margin:0;
  }
  /* no longer need extra absolute padding */
  .product-detail{
    position:relative;
    padding:14px 12px 18px;
  }
  /* Key features heading + list span full width under image — shifted up */
  .product-detail-info > .product-detail-sub{
    grid-column:1 / -1;
    grid-row:6;
    margin-top:8px;
  }
  .product-detail-features{
    grid-column:1 / -1;
    grid-row:7;
    font-size:11px;
    padding-left:0;
    margin:0 0 12px;
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px 12px;
  }
  .product-detail-features li{
    position:relative;
    padding-left:12px;
    margin-bottom:0;
  }
  .product-detail-features li::before{
    content:"•";
    position:absolute;
    left:0;
    color:#444;
  }
  /* Mobile open: red part of title always on next line */
  .product-detail-info h2 .t-line{
    display:block;
  }
  .product-detail-actions .cta{
    min-width:0;
  }
  .product-spec-row{
    grid-template-columns:minmax(0,110px) minmax(0,1fr);
    gap:6px;
  }
  .product-spec-list{
    grid-template-columns:1fr;
  }
  .products-support-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  .products-support-cta{
    display:block;
    padding:24px 20px;
  }
  .products-support-actions{
    margin-top:16px;
  }
}

@media (max-width:480px){
  .products-wrap{ width:min(100% - 28px,680px); }
  .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .product-card-media{
    min-height:100px;
    padding:8px 6px 2px;
  }
  .product-card-media img{
    max-height:90px;
  }
  .product-detail-layout{
    grid-template-columns:minmax(0,40%) minmax(0,1fr);
    column-gap:10px;
  }
  .product-detail-media{
    padding:6px 4px;
  }
  .product-detail-media img{
    max-height:140px;
  }
  .product-detail-features{
    font-size:11px;
    gap:5px 10px;
  }
  .products-support-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .products-support-actions .cta{
    text-align:center;
    width:100%;
  }
  .product-quote-btn{
    width:auto;
    text-align:center;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){

  *,
  *:before,
  *:after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   FINAL DESKTOP RULES
   ========================================================= */

@media (min-width:769px){

  .hero-actions{
    display:none;
  }

  .hero .hero-actions,
  .hero-about .hero-actions,
  .hero-contact .hero-actions,
  .hero-products .hero-actions{
    display:flex;
  }

  .hero .hero-trust-rail{
    position:absolute;
    z-index:7;
    left:4.5%;
    right:4.5%;
    bottom:10px;
    height:48px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    background:rgba(255,255,255,.92);
    border:1px solid rgba(255,255,255,.96);
    border-radius:8px;
    box-shadow:0 7px 22px rgba(0,0,0,.09);
    backdrop-filter:blur(7px);
    overflow:hidden;
  }

  .hero-trust-rail .trust-item{
    border:0;
    border-right:1px solid rgba(0,0,0,.09);
    background:transparent;
    display:flex;
    align-items:center;
    gap:6px;
    padding:5px 8px;
    text-align:left;
    opacity:0;
    transform:translateY(28px);
    animation:trustItemIn 1.05s var(--smooth) forwards;
    cursor:pointer;
  }

  @keyframes trustItemIn{
    0%{
      opacity:0;
      transform:translateY(28px);
    }

    100%{
      opacity:1;
      transform:translateY(0);
    }
  }

  .hero-trust-rail .trust-item:last-child{
    border-right:0;
  }

  .hero-trust-rail .trust-item:nth-child(1){
    animation-delay:1.18s;
  }

  .hero-trust-rail .trust-item:nth-child(2){
    animation-delay:1.28s;
  }

  .hero-trust-rail .trust-item:nth-child(3){
    animation-delay:1.38s;
  }

  .hero-trust-rail .trust-item:nth-child(4){
    animation-delay:1.48s;
  }

  .hero-trust-rail .trust-item:nth-child(5){
    animation-delay:1.58s;
  }

  .hero-trust-rail .trust-item:nth-child(6){
    animation-delay:1.68s;
  }

  .hero-trust-rail .trust-item:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.55);
  }

  .hero-trust-rail img{
    width:27px;
    height:27px;
    object-fit:contain;
    flex:0 0 27px;
  }

  .hero-trust-rail strong{
    display:block;
    font-size:8.5px;
    line-height:1.2;
  }

  .hero-trust-rail small{
    display:block;
    font-size:7px;
    line-height:1.15;
    color:#666;
    margin-top:2px;
  }
}


/* =========================================================
   FINAL MOBILE DISPLAY RULES
   ========================================================= */

@media (max-width:768px){

  .hero .hero-trust-rail{
    display:none;
  }

  .hero-actions{
    display:flex;
  }

  .benefits{
    display:grid;
  }
}
@media (max-width:768px){
  .mobile-menu .mobile-where-buy{
    display:block;
    width:100%;
    padding:14px 12px;
    border-bottom:0;
    font-size:11px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    opacity:0;
    transform:translateY(-8px);
    transition:
      opacity .35s ease,
      transform .65s var(--spring),
      color .22s ease,
      background .22s ease;
  }
  .mobile-menu.open .mobile-where-buy{
    opacity:1;
    transform:none;
    transition-delay:.30s;
  }
  .mobile-menu.open a.mobile-installer{
    transition-delay:.35s;
  }
}

@media (max-width:768px){
  /* Mobile: Fan Forced same card width as Zero Start (half row), Hob | Spares same line */
  .products-grid-fan{
    max-width:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .products-grid-two{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
}


/* =========================================================
   SOCIAL ICONS
   Sit on the hero image (not the page chrome)
   ========================================================= */

.social-links{
  position:absolute;
  z-index:12;
  /* Header is 64px — place inside hero top-right */
  top:calc(64px + 16px);
  right:22px;
  display:flex;
  align-items:center;
  gap:12px;
  pointer-events:auto;
}

.social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  line-height:0;
}

.social-links a:hover,
.social-links a:focus-visible{
  transform:scale(1.18);
}

.social-links img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28));
}

/* Index desktop: larger icons, nearer centre of hero, more spacing */
@media (min-width:769px){
  .page-index .social-links{
    top:calc(64px + 215px);
    right:18%;
    left:auto;
    transform:translateY(-50%);
    gap:26px;
  }

  .page-index .social-links a{
    width:42px;
    height:42px;
  }

  .page-index .social-links a:hover,
  .page-index .social-links a:focus-visible{
    transform:scale(1.22);
  }
}

@media (max-width:768px){
  .social-links{
    /* Mobile header ~62px; keep icons on hero, clear of hamburger */
    top:calc(62px + 12px);
    right:14px;
    gap:10px;
  }

  .social-links a{
    width:24px;
    height:24px;
  }

  .social-links a:hover,
  .social-links a:focus-visible,
  .social-links a:active{
    transform:scale(1.15);
  }
}

/* =========================================================
   SIZING GUIDE + BUCKET TEST MODALS
   ========================================================= */

.sizing-modal,
.bucket-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
.sizing-modal.open,
.bucket-modal.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.sizing-modal-backdrop,
.bucket-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.sizing-modal-card,
.bucket-modal-card{
  position:relative;
  z-index:1;
  width:min(920px, calc(100% - 28px));
  max-height:calc(100vh - 36px);
  padding:28px 32px 26px;
  border-radius:13px;
  background:rgba(255,255,255,.97);
  box-shadow:0 25px 70px rgba(0,0,0,.18);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.bucket-modal-card{
  width:min(520px, calc(100% - 28px));
  z-index:2;
}
.bucket-modal{
  z-index:1300;
}
.sizing-modal-close,
.bucket-modal-close{
  position:absolute;
  top:12px;
  right:14px;
  width:36px;
  height:36px;
  border:0;
  background:transparent;
  font-size:28px;
  line-height:1;
  color:#333;
  cursor:pointer;
}
.sizing-modal-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  color:var(--red);
  margin-bottom:6px;
}
.sizing-modal-card h2,
.bucket-modal-card h2{
  margin:0 0 8px;
  font-size:clamp(20px, 2.4vw, 28px);
  line-height:1.15;
  color:#111;
  font-weight:700;
  padding-right:36px;
}
.sizing-modal-red-line{
  width:42px;
  height:3px;
  background:var(--red);
  margin:0 0 14px;
}
.sizing-lead{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.45;
  color:#444;
  max-width:62ch;
}
.sizing-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.sizing-panel{
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  padding:14px 16px 16px;
  background:#fafafa;
}
.sizing-panel-result{
  grid-column:1 / -1;
  background:#fff;
  border-color:rgba(223,27,35,.18);
}
.sizing-panel h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:700;
  color:#111;
}
.sizing-hint{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.4;
  color:#666;
}
.sizing-group-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#888;
  margin:10px 0 6px;
}
.sizing-row,
.sizing-sim-row{
  display:grid;
  grid-template-columns:1fr minmax(90px,1fr) 28px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.sizing-row label,
.sizing-sim-row label{
  font-size:12px;
  color:#333;
}
.sizing-row input[type="range"],
.sizing-sim-row input[type="range"]{
  width:100%;
  accent-color:var(--red);
}
.sizing-val{
  font-size:13px;
  font-weight:700;
  text-align:right;
  color:#111;
}
.sizing-flow-item{
  border:1px solid rgba(0,0,0,.07);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:8px;
  background:#fff;
}
.sizing-flow-head{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.sizing-flow-head strong{
  font-size:13px;
}
.sizing-flow-count{
  font-size:11px;
  color:#777;
}
.sizing-source{
  margin-left:auto;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:99px;
}
.sizing-source.is-estimate{
  background:rgba(0,0,0,.06);
  color:#555;
}
.sizing-source.is-measured{
  background:rgba(34,140,70,.12);
  color:#1a7a3c;
}
.sizing-flow-controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size:12px;
}
.sizing-flow-controls label{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.sizing-flow-input{
  width:64px;
  height:30px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:4px;
  padding:0 6px;
  font-size:13px;
}
.sizing-flow-combined{
  color:#555;
}
.sizing-link-btn{
  border:0;
  background:transparent;
  color:var(--red);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:underline;
  padding:0;
}
.sizing-measure-btn{
  margin-top:8px;
}
.sizing-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}
.sizing-metric{
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
  padding:12px 14px;
  background:#fafafa;
}
.sizing-metric-primary{
  border-color:rgba(223,27,35,.35);
  background:rgba(223,27,35,.04);
}
.sizing-metric-label{
  display:block;
  font-size:11px;
  color:#666;
  margin-bottom:4px;
}
.sizing-metric strong{
  font-size:22px;
  font-weight:700;
  color:#111;
}
.sizing-unit{
  font-size:12px;
  color:#666;
  margin-left:2px;
}
.sizing-explain{
  font-size:13px;
  line-height:1.45;
  color:#333;
  margin:0 0 12px;
}
.sizing-models{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-bottom:12px;
}
.sizing-model{
  position:relative;
  border:1px solid rgba(0,0,0,.1);
  border-radius:8px;
  padding:12px 14px;
  background:#fff;
}
.sizing-model.is-primary{
  border-color:var(--red);
  box-shadow:0 0 0 1px rgba(223,27,35,.15);
}
.sizing-model-name{
  font-size:14px;
  font-weight:700;
  color:#111;
}
.sizing-model-meta{
  font-size:11px;
  color:#666;
  margin-top:2px;
}
.sizing-model-use{
  font-size:11px;
  color:#444;
  margin-top:6px;
}
.sizing-badge{
  display:inline-block;
  margin-top:8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--red);
}
.sizing-note,
.sizing-next{
  font-size:12px;
  line-height:1.45;
  color:#555;
  margin:0 0 8px;
}
.sizing-disclaimer{
  font-size:11px;
  line-height:1.4;
  color:#888;
  margin:12px 0 14px;
}
.sizing-result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Bucket test */
.bucket-tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.bucket-tab{
  flex:1;
  height:36px;
  border:1.5px solid rgba(0,0,0,.12);
  border-radius:4px;
  background:#fff;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  color:#333;
}
.bucket-tab.is-active{
  border-color:var(--red);
  color:var(--red);
  background:rgba(223,27,35,.05);
}
.bucket-steps{
  margin:0 0 14px;
  padding-left:18px;
  font-size:13px;
  line-height:1.45;
  color:#444;
}
.bucket-form{
  display:grid;
  gap:10px;
  margin-bottom:12px;
}
.bucket-form label,
.bucket-sim-inputs label{
  display:grid;
  gap:4px;
  font-size:12px;
  color:#333;
}
.bucket-form input,
.bucket-form select,
.bucket-sim-inputs input{
  height:36px;
  border:1px solid rgba(0,0,0,.15);
  border-radius:4px;
  padding:0 10px;
  font-size:13px;
  font-family:inherit;
}
.bucket-sim-inputs{
  display:grid;
  gap:10px;
  margin-bottom:12px;
}
.bucket-result{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:12px 14px;
  border-radius:8px;
  background:rgba(223,27,35,.05);
  border:1px solid rgba(223,27,35,.15);
  margin-bottom:10px;
  font-size:13px;
}
.bucket-result strong{
  font-size:22px;
  color:#111;
}
.bucket-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

@media (max-width:768px){
  .sizing-modal-card,
  .bucket-modal-card{
    width:calc(100% - 16px);
    max-height:calc(100dvh - 16px);
    padding:20px 16px 18px;
    border-radius:10px;
  }
  .sizing-grid{
    grid-template-columns:1fr;
  }
  .sizing-metrics{
    grid-template-columns:1fr;
  }
  .sizing-row,
  .sizing-sim-row{
    grid-template-columns:1fr 1fr 28px;
  }
  .sizing-flow-controls{
    flex-direction:column;
    align-items:flex-start;
  }
}