/* =========================================================
   Paktec — hand-written stylesheet
   General Sans only · 4px grid · light theme
   Brand: logo green + navy, kraft as an accent
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/fonts/GeneralSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --green:#21B182;
  --green-dark:#006D64;
  --green-deep:#03332C;
  --green-tint:#EAF7F2;
  --green-tint-2:#D3EFE4;

  --navy:#0E0E10;
  --navy-deep:#17171B;
  --navy-tint:#EAF7F2;

  --kraft:#D09048;
  --kraft-tint:#FBF0E3;
  --kraft-ink:#8A5A22;

  --ink:#1F2937;
  --gray:#6B7280;
  --line:#E5E7EB;
  --line-soft:#F0F0EE;
  --danger:#C81E1E;

  --white:#FFFFFF;
  --off:#FAFAF8;

  --container:1376px;
  --pad:32px;

  --r-sm:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:24px;
  --pill:999px;

  --shadow-sm:0 1px 2px rgba(14,14,16,.05);
  --shadow-md:0 6px 20px -6px rgba(14,14,16,.10);
  --shadow-xl:0 24px 48px -18px rgba(14,14,16,.22), 0 4px 12px -4px rgba(14,14,16,.06);
  --shadow-accent:0 20px 40px -16px rgba(33,177,130,.38);

  --ease:cubic-bezier(0.215,0.61,0.355,1);
  --t:300ms ease-in-out;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

body{
  font-family:"General Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

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

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

.skip-link{
  position:absolute;left:16px;top:-64px;z-index:200;
  background:var(--green);color:#fff;padding:12px 20px;border-radius:0 0 var(--r) var(--r);
  font-weight:600;transition:top 200ms var(--ease);
}
.skip-link:focus{top:0}

:where(a,button,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--green);outline-offset:2px;border-radius:4px;
}
.masthead :where(a,button,input):focus-visible{outline-color:#fff}

.ico-arrow{width:17px;height:17px;stroke-width:2.3;flex:none;transition:transform var(--t)}
.ico-chev{width:15px;height:15px;stroke-width:2.3;flex:none}

.tag{display:inline-block;padding:2px 8px;border-radius:var(--pill);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.5}
.tag--pop{background:var(--kraft-tint);color:var(--kraft-ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--pill);border:1px solid transparent;cursor:pointer;
  font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.01em;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t);
}
.btn svg{width:18px;height:18px;stroke-width:2.2;transition:transform var(--t)}
.btn--green{background:var(--green);color:#fff;box-shadow:0 6px 16px -8px rgba(33,177,130,.75)}
.btn--green:hover{background:var(--green-dark);transform:translateY(-2px);box-shadow:0 12px 24px -10px rgba(33,177,130,.7)}
.btn--green:hover svg{transform:translateX(3px)}
.btn--ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--navy);background:var(--navy-tint);transform:translateY(-2px)}
.btn--onnavy{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}
.btn--onnavy:hover{background:#fff;color:var(--navy-deep);transform:translateY(-2px)}
.btn--sm{padding:9px 18px;font-size:14px}

/* =========================================================
   1 · UTILITY BAR
   ========================================================= */
.utility{background:var(--navy-deep);color:rgba(255,255,255,.72);font-size:12.5px}
.utility__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:44px;padding-block:6px;flex-wrap:wrap;
}
.utility__left{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-width:0}
.utility__phone{font-weight:700;color:#fff;letter-spacing:-.01em;white-space:nowrap;transition:color var(--t)}
.utility__phone:hover{color:var(--green-tint-2)}
.utility__badges{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.utility__badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tick{color:#6FD7B5;font-weight:700}
.utility__cutoff{white-space:nowrap;line-height:1.3}
.utility__cutoff strong{color:#fff;font-weight:600}

/* =========================================================
   2 · MASTHEAD
   ========================================================= */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--navy);
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow var(--t);
}
.masthead.is-stuck{box-shadow:0 10px 30px -12px rgba(0,20,70,.55)}
.masthead__inner{display:flex;align-items:center;gap:24px;min-height:106px}

.brand{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border-radius:12px;padding:8px 14px;flex:none;
  box-shadow:0 2px 10px rgba(0,0,0,.24);
  transition:transform var(--t),box-shadow var(--t);
}
.brand img{height:76px;width:auto}
.brand:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}

.mainnav{display:flex;align-items:center;gap:2px;margin-right:auto}
.mainnav__item{display:flex}
.mainnav__link{
  position:relative;display:inline-flex;align-items:center;gap:5px;
  padding:10px 14px;border-radius:var(--r-sm);border:0;background:transparent;cursor:pointer;
  color:rgba(255,255,255,.88);font-size:14.5px;font-weight:500;white-space:nowrap;
  transition:color var(--t),background var(--t);
}
.mainnav__link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;
  background:rgba(255,255,255,.9);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 300ms var(--ease);
}
.mainnav__link:hover,.mainnav__link.is-open,.mainnav__link.is-current{color:#fff;background:rgba(255,255,255,.08)}
.mainnav__link:hover::after,.mainnav__link.is-open::after,.mainnav__link.is-current::after{transform:scaleX(1)}
.caret{width:14px;height:14px;stroke-width:2.4;opacity:.75;transition:transform var(--t)}
.mainnav__link.is-open .caret{transform:rotate(180deg)}

.masthead__tools{display:flex;align-items:center;gap:14px;flex:none}
.masthead__quote{white-space:nowrap}

/* =========================================================
   2b · MEGA MENU
   ========================================================= */
.mega{
  position:absolute;left:0;right:0;top:100%;z-index:70;
  background:#fff;border-top:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-xl);
  animation:megaDrop 200ms var(--ease);
}
.mega[hidden]{display:none}
@keyframes megaDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.mega__inner{display:grid;grid-template-columns:284px minmax(0,1fr);align-items:start}
.mega__cats{
  display:flex;flex-direction:column;gap:2px;
  padding:16px 22px 16px 0;border-right:1px solid var(--line);
  max-height:min(78vh,660px);overflow:auto;
}
.mega__cats-title{
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gray);padding:0 12px 8px;
}
.mega__cat{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 12px;border:1px solid transparent;border-radius:10px;
  background:transparent;cursor:pointer;
  font-size:14.5px;font-weight:500;line-height:1.3;color:var(--ink);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.mega__cat-ico{width:20px;height:20px;flex:none;color:var(--green);transition:color var(--t)}
.mega__cat-ico svg{stroke-width:1.7}
.mega__cat-name{flex:1 1 auto;min-width:0}
.mega__cat .ico-chev{opacity:0;transform:translateX(-4px);transition:opacity var(--t),transform var(--t)}
.mega__cat:hover{background:var(--green-tint);color:var(--green-deep)}
.mega__cat.is-active{background:var(--green-tint);color:var(--green-deep);font-weight:600}
.mega__cat.is-active .ico-chev{opacity:.65;transform:none}
.mega__cat.is-pinned{background:var(--navy-tint);color:var(--navy-deep);border-color:rgba(14,14,16,.28);box-shadow:inset 0 1px 2px rgba(14,14,16,.14)}
.mega__cat.is-pinned .mega__cat-ico{color:var(--navy)}
.mega__cats-all{
  display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:10px 12px;
  color:var(--green-dark);font-size:14px;font-weight:600;border-top:1px solid var(--line-soft);
}
.mega__cats-all:hover .ico-arrow{transform:translateX(4px)}

.mega__panes{padding:18px 0 22px 28px;min-width:0}
.mega__pane{display:none}
.mega__pane.is-active{display:block}
.mega__pane-title{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--navy-deep)}
.mega__pane-blurb{margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--gray);max-width:70ch}
.mega__products{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin-top:14px;
  max-height:min(48vh,340px);overflow:auto;
}
.mega__products a{display:block;padding:8px 12px;border-radius:10px;transition:background var(--t)}
.mega__products a:hover{background:var(--green-tint)}
.mega__pname{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mega__pdesc{display:block;margin-top:1px;font-size:12.5px;line-height:1.4;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega__all{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  color:var(--green-dark);font-size:14.5px;font-weight:600;
}
.mega__all:hover .ico-arrow{transform:translateX(4px)}

/* =========================================================
   2c · LIVE SEARCH
   ========================================================= */
.search{position:relative}
.search form{position:relative;display:flex;align-items:center}
.search__icon{
  position:absolute;left:13px;width:16px;height:16px;
  color:var(--gray);pointer-events:none;stroke-width:2;
}
.search input{
  width:250px;height:40px;padding:0 16px 0 38px;
  border-radius:var(--pill);border:1px solid transparent;background:#fff;
  font-size:14px;color:var(--ink);
  transition:box-shadow var(--t),border-color var(--t);
}
.search input::placeholder{color:#9CA3AF}
.search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(33,177,130,.3)}
.search input::-webkit-search-cancel-button{filter:grayscale(1)}

.search__results{
  position:absolute;top:calc(100% + 8px);right:0;z-index:90;
  width:max(100%,360px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xl);padding:6px;
  max-height:min(60vh,420px);overflow:auto;
}
.search__results[hidden]{display:none}
.sres{display:block;padding:9px 12px;border-radius:10px;transition:background var(--t)}
.sres:hover,.sres.is-active{background:var(--green-tint)}
.sres__name{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.sres__name mark{background:var(--green-tint-2);color:inherit;border-radius:3px;padding:0 1px}
.sres__cat{display:block;margin-top:1px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.search__empty{padding:14px 12px;font-size:13.5px;line-height:1.5;color:var(--gray)}
.search__empty a{color:var(--green-dark);font-weight:600}

/* hamburger */
.hamburger{
  display:none;width:40px;height:40px;padding:9px;flex:none;
  background:rgba(255,255,255,.1);border:0;border-radius:var(--r-sm);cursor:pointer;
  flex-direction:column;justify-content:space-between;
  transition:background var(--t);
}
.hamburger:hover{background:rgba(255,255,255,.2)}
.hamburger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform 300ms var(--ease),opacity 200ms ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* =========================================================
   2d · MOBILE PANEL
   ========================================================= */
.mobile-panel{
  display:none;grid-template-rows:0fr;
  background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.1);
  opacity:0;visibility:hidden;
  transition:grid-template-rows 400ms var(--ease),opacity 300ms ease,visibility 0s linear 400ms;
}
.mobile-panel > *{min-height:0}
.mobile-panel__inner{overflow:hidden;max-height:min(78vh,760px);overflow-y:auto}
.mobile-panel.is-open{
  grid-template-rows:1fr;opacity:1;visibility:visible;
  transition:grid-template-rows 400ms var(--ease),opacity 300ms ease,visibility 0s linear;
}
.search--mobile{padding:16px 24px 8px}
.search.search--mobile input{width:100%}
.search.search--mobile .search__icon{left:13px}
.search.search--mobile .search__results{left:24px;right:24px;width:auto}

.mobile-panel__nav{display:flex;flex-direction:column;padding:4px 24px}
.mobile-panel__link,.macc__top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:14px 0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.9);font-size:16px;font-weight:500;text-align:left;cursor:pointer;
  transition:color var(--t);
}
.mobile-panel__link:hover,.macc__top:hover{color:#fff}
.macc__top .ico-chev{transition:transform 300ms var(--ease);opacity:.7}
.macc__top[aria-expanded="true"] .ico-chev{transform:rotate(90deg)}

.macc__body,.macc__cat-body{display:none;padding-left:2px}
.macc__body.is-open,.macc__cat-body.is-open{display:block}
.macc__body{padding-bottom:6px}
.macc__cat-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  padding:11px 0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.78);font-size:14.5px;font-weight:500;text-align:left;cursor:pointer;
}
.macc__cat-btn .ico-chev{transition:transform 300ms var(--ease);opacity:.6}
.macc__cat-btn[aria-expanded="true"]{color:#fff}
.macc__cat-btn[aria-expanded="true"] .ico-chev{transform:rotate(90deg)}
.macc__cat-body{padding:4px 0 10px 14px;border-left:2px solid rgba(255,255,255,.14);margin:6px 0 10px}
.macc__cat-body a,.macc__all{
  display:block;padding:8px 0;color:rgba(255,255,255,.68);font-size:14px;
  transition:color var(--t),transform var(--t);
}
.macc__cat-body a:hover,.macc__all:hover{color:#fff;transform:translateX(4px)}
.macc__all{font-weight:600;color:var(--green-tint-2)}
.macc__all--root{padding:10px 0}

.mobile-panel__meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:16px 24px 4px;color:#fff;font-size:15px;font-weight:700;
}
.mobile-panel__cta{margin:12px 24px 24px;width:calc(100% - 48px)}

/* =========================================================
   3 · HERO
   ========================================================= */
.hero{padding:24px 0 8px}
.hero__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:24px;align-items:stretch}

/* round 9: the truck reel fills the whole banner (round 8 variant B,
   chosen by the client). A short dark green fade on the left edge only,
   so the truck stays bright; the copy carries its own soft shadow. */
.hero__banner{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);
  min-height:400px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  gap:20px;align-items:center;
  padding:40px 36px;
  background:#03332C;
  box-shadow:var(--shadow-xl);
}
.hero__banner-copy{position:relative;z-index:2;color:#fff}
.hero__eyebrow{
  font-size:clamp(22px,2.6vw,34px);font-weight:500;line-height:1;
  letter-spacing:-.02em;color:rgba(255,255,255,.9);margin-bottom:2px;
}
.hero__title{display:block;margin-bottom:20px}
.hero__number{
  display:block;
  font-size:clamp(48px,7vw,88px);font-weight:700;line-height:1;letter-spacing:-.035em;
  color:#fff;
  text-shadow:0 2px 0 var(--green),0 12px 34px rgba(33,177,130,.55);
}
.hero__unique{
  display:block;margin-top:2px;
  font-size:clamp(20px,2.5vw,32px);font-weight:500;line-height:1.1;letter-spacing:-.02em;
  color:rgba(255,255,255,.92);
}
.hero__pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:var(--pill);
  background:rgba(255,255,255,.96);color:var(--green-deep);
  font-size:clamp(14px,1.35vw,17px);font-weight:700;letter-spacing:-.01em;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.7);
}
.hero__pill svg{width:17px;height:17px;flex:none;stroke-width:2}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* the reel: poster img paints first, the video sits on top; the
   Proudly Canadian badge lives inside the frame, bottom right */
.hero__frame{position:absolute;inset:0;z-index:0;overflow:hidden;background:#03332C}
.hero__poster,.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
}
/* wide screens: the reel is drawn 22% wider than the banner and
   anchored left, so the truck sits in the right half, clear of the copy */
@media (min-width:761px){
  .hero__poster,.hero__video{inset:0 auto 0 0;width:122%;object-position:0 30%}
  .hero__banner{padding-left:24px}
  .hero__banner .hero__title--text{font-size:clamp(28px,2.9vw,38px)}
  /* slim dark plate under the copy, so it reads over the bright footage */
  .hero__banner-copy{
    justify-self:start;max-width:352px;padding:24px 24px 26px;border-radius:var(--r-lg);
    background:rgba(3,51,44,.56);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  }
}
/* left edge fade, about 15% of the frame */
.hero__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,51,44,.78) 0%,rgba(3,51,44,.42) 7%,rgba(3,51,44,.12) 12%,rgba(3,51,44,0) 15%);
}
.hero__maple{
  position:absolute;right:28px;bottom:28px;z-index:3;
  width:96px;height:96px;border-radius:50%;
  display:grid;place-content:center;justify-items:center;gap:1px;
  background:radial-gradient(circle at 32% 28%,var(--green),var(--green-deep));
  color:#fff;text-align:center;
  box-shadow:0 12px 28px -10px rgba(3,51,44,.85),0 0 0 4px rgba(255,255,255,.95);
  transform:rotate(-8deg);
}
.hero__maple span[aria-hidden]{font-size:20px;line-height:1}
.hero__maple-txt{font-size:10.5px;font-weight:700;line-height:1.15;letter-spacing:.02em;text-transform:uppercase}

/* four cards stacked beside the banner; tighter padding so the column
   stays about the banner's height */
.hero__usps{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}
.usp{
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.usp:hover{border-color:rgba(33,177,130,.45);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.usp__icon{
  flex:none;width:44px;height:44px;padding:11px;border-radius:var(--r);
  background:var(--green-tint);color:var(--green-dark);
  transition:background var(--t),color var(--t),transform var(--t);
}
.usp:hover .usp__icon{background:var(--green);color:#fff;transform:scale(1.05)}
.usp__icon svg{stroke-width:1.7}
.usp__title{font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--navy-deep);margin-bottom:3px}
.usp__body{font-size:13px;line-height:1.45;color:var(--gray)}
/* the fourth card is the whole-card link down to the quote form */

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{padding:56px 0}
.section--soft{background:var(--off);border-block:1px solid var(--line)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:24px}
.section__title{font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:var(--navy-deep)}
.section__more{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  color:var(--green-dark);font-size:15px;font-weight:600;letter-spacing:-.01em;
}
.section__more:hover .ico-arrow,.section__more:hover svg{transform:translateX(4px)}

/* =========================================================
   CATEGORY VISUAL TILE
   ========================================================= */
.cvis{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:var(--navy-tint);
  display:grid;place-items:center;aspect-ratio:1/1;
}
.cvis--photo{background:var(--green-tint)}
.cvis--photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 48%;
  mix-blend-mode:multiply;transition:transform 500ms var(--ease);
}
/* real client product photos: mixed aspect ratio cut-outs on white, always contained */
.cvis--shot{background:#fff;border:1px solid var(--line)}
.cvis--shot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:50% 50%;padding:9%;
  image-rendering:auto;transition:transform 500ms var(--ease);
}
.cvis--shot.cvis--sm img{padding:7%}
/* a client photo used as a CATEGORY tile: same pale tile as every other category
   visual, contained with generous padding, multiplied so its white ground blends */
.cvis--shot.cvis--tile{background:var(--navy-tint);border:0}
.cvis--shot.cvis--tile img{padding:12%;mix-blend-mode:multiply}
.cvis__glyph{display:block;width:36%;max-width:96px;color:var(--navy);opacity:.9}
.cvis__glyph svg{stroke-width:1.6}
.cvis--sm{aspect-ratio:16/9}
.cvis--sm .cvis__glyph{width:24%;max-width:64px}
.cvis--lg{aspect-ratio:4/3}

/* =========================================================
   CATEGORY CARDS
   ========================================================= */
.ccard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ccard{
  display:flex;flex-direction:column;
  padding:14px 14px 18px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.ccard:hover{border-color:var(--green);box-shadow:var(--shadow-xl);transform:translateY(-4px)}
.ccard:hover .cvis--photo img,.ccard:hover .cvis--shot img{transform:scale(1.05)}
.ccard .cvis{margin-bottom:14px}
.ccard__name{font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--navy-deep);padding-inline:4px}
.ccard__blurb{flex:1;margin-top:6px;padding-inline:4px;font-size:13px;line-height:1.45;color:var(--gray)}
/* /products index: name only, no blurb, at a larger size */
.ccard--index .ccard__name{font-size:21px;line-height:1.2;letter-spacing:-.025em}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.pcard-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pcard-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.pcard:hover{border-color:var(--green);box-shadow:var(--shadow-xl);transform:translateY(-4px)}
.pcard:hover .cvis--photo img,.pcard:hover .cvis--shot img{transform:scale(1.04)}
.pcard .cvis{border-radius:0}
.pcard .cvis--shot{border:0;border-bottom:1px solid var(--line)}
.pcard__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.pcard__cat{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--gray)}
.pcard__name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:5px 0 14px;font-size:15.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--navy-deep);
}
/* no description on cards: the link sits at the bottom so rows stay aligned */
.pcard__more{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;
  font-size:13.5px;font-weight:600;color:var(--green-dark);
}
.pcard:hover .pcard__more .ico-arrow{transform:translateX(4px)}

/* =========================================================
   EQUIPMENT TEASER
   ========================================================= */
.eq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.eq{
  display:flex;flex-direction:column;
  padding:22px 20px;border-radius:var(--r-lg);
  background:var(--navy-tint);border:1px solid transparent;
  transition:background var(--t),border-color var(--t),box-shadow var(--t),transform var(--t);
}
.eq:hover{background:#fff;border-color:var(--navy);box-shadow:var(--shadow-xl);transform:translateY(-4px)}
/* real equipment photo on the same white plate the /equipment cards use,
   sized down to a 140px teaser thumb so the 4+3 grid keeps its proportions */
.eq__shot{width:100%;aspect-ratio:auto;height:156px;margin-bottom:14px;border-radius:var(--r);box-shadow:var(--shadow-sm)}
.eq__shot img{padding:10px}
.eq:hover .cvis--shot img{transform:scale(1.04)}
.eq__name{font-size:15.5px;font-weight:600;letter-spacing:-.015em;color:var(--navy-deep)}

/* =========================================================
   QUOTE BAND
   ========================================================= */
.quoteband{
  padding:44px 0;
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(33,177,130,.42) 0%, rgba(33,177,130,0) 62%),
    linear-gradient(120deg,var(--navy-deep),var(--navy));
}
.quoteband__inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.quoteband__title{font-size:clamp(26px,2.8vw,34px);font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#fff}

/* =========================================================
   ABOUT
   ========================================================= */
.about{padding:64px 0;background:var(--off);border-block:1px solid var(--line)}
.about__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.brand--plate{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  padding:32px 36px;box-shadow:var(--shadow-md);
}
.brand--plate img{width:100%;max-width:440px;height:auto}
.about__kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-dark)}
.about__title{margin:8px 0 16px;font-size:clamp(26px,2.9vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--navy-deep)}
.about__sub{margin:0 0 14px;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--green-dark)}
.about__copy p{font-size:15.5px;line-height:1.6;color:var(--ink);max-width:62ch}
.about__copy .about__focus{font-weight:600;color:var(--navy-deep)}
.about__copy .about__line{
  margin-top:20px;padding-left:14px;border-left:3px solid var(--green);
  font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--green-deep);
}
.about__copy p + p{margin-top:14px}
.about__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* =========================================================
   STATS
   ========================================================= */
.stats{background:var(--navy);color:#fff;padding:48px 0}
.stat{display:flex;flex-direction:column;gap:4px}
.stat__num{font-size:clamp(26px,2.6vw,34px);font-weight:700;line-height:1.05;letter-spacing:-.03em;color:#fff}
.stat__lbl{position:relative;padding-top:10px;font-size:13.5px;color:rgba(255,255,255,.68);line-height:1.4}
.stat__lbl::before{content:"";position:absolute;left:0;top:0;width:24px;height:2px;border-radius:2px;background:#6FD7B5}

/* Right to left marquee. The track holds the list twice and slides
   0 to -50%, so copy two lands exactly where copy one started and the
   seam is invisible. Items are flex:none with a fixed right margin
   (no flex gap) so each half is exactly the same width. Duration is set
   by main.js from the measured width at 40px per second; 40s is the
   no-JavaScript fallback. */
.ticker{--ticker-gap:56px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker__track{display:flex;width:max-content;will-change:transform;
  animation:ticker var(--ticker-duration,40s) linear infinite;
}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
/* With JS running, the marquee is a Web Animation (main.js 2c) so the pause
   freezes in place in every browser; the CSS animation above is only the
   no-JS fallback. */
.ticker--js .ticker__track{animation:none}
.ticker__set{display:flex;flex:none}
.ticker__item{position:relative;flex:none;margin-right:var(--ticker-gap);white-space:nowrap}
.ticker__item::after{
  content:"";position:absolute;top:50%;right:calc(var(--ticker-gap) / -2 - 3px);
  width:6px;height:6px;border-radius:50%;background:var(--green);transform:translateY(-50%);
}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   CONTACT
   ========================================================= */
#about,#contact,#main{scroll-margin-top:126px}
.contact{padding:64px 0}
.contact__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start}
.contact__kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-dark)}
.contact__title{margin:8px 0 12px;font-size:clamp(26px,2.9vw,36px);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--navy-deep)}
.contact__body{font-size:16px;line-height:1.6;color:var(--gray);max-width:40ch}
.contact__phone{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  padding:12px 20px;border-radius:var(--pill);
  background:var(--green-tint);border:1px solid var(--green-tint-2);
  color:var(--green-deep);font-size:17px;font-weight:700;letter-spacing:-.01em;
  transition:background var(--t),color var(--t),transform var(--t);
}
.contact__phone svg{width:18px;height:18px;flex:none}
.contact__phone:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-2px)}
.contact__list{margin-top:24px;display:grid;gap:8px}
.contact__list li{position:relative;padding-left:20px;font-size:14.5px;color:var(--ink)}
.contact__list li::before{content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--green)}

.cform{background:var(--off);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;box-shadow:var(--shadow-sm)}
.cform__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.field label span{color:var(--green-dark)}
.field input,.field textarea{
  width:100%;height:46px;padding:0 14px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  font-size:15px;color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
.field textarea{height:auto;padding:12px 14px;line-height:1.5;resize:vertical;min-height:104px}
.field input::placeholder,.field textarea::placeholder{color:#9CA3AF}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(33,177,130,.18)}
.field.is-invalid input,.field.is-invalid textarea{border-color:var(--danger);background:#FEF4F4}
.field__err{font-size:12.5px;line-height:1.4;color:var(--danger)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cform__submit{width:100%;margin-top:4px;position:relative}
.spinner{
  display:none;width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:spin 700ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.cform.is-loading .spinner{display:block}
.cform.is-loading .cform__submit{opacity:.75;pointer-events:none}
.cform__status{margin-top:14px;font-size:14px;line-height:1.5;min-height:0}
.cform__status:empty{margin-top:0}
.cform__status.is-err{color:var(--danger);font-weight:600}
.cform__fine{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--gray)}
.cform__done{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  background:var(--green-tint);border:1px solid var(--green-tint-2);border-radius:var(--r-lg);
  padding:28px;
}
.cform__done h3{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--green-deep)}
.cform__done p{font-size:14.5px;line-height:1.55;color:var(--ink)}
.cform__done-ico{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--green);color:#fff;flex:none}

/* =========================================================
   BREADCRUMBS · PAGE HEADS · PRODUCT PAGE
   ========================================================= */
/* sticky under the masthead; --mast-h is set from the real masthead height
   by main.js, with the CSS min-heights as the fallback */
.crumbs{
  position:sticky;top:var(--mast-h,106px);z-index:50;
  padding:10px 0;background:#fff;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--gray);
}
.crumbs__inner{display:flex;align-items:center;gap:12px}
.crumbs ol{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-width:0}
.crumbs li{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;flex:0 1 auto}
.crumbs li:first-child{flex:none}
.crumbs li:not(:first-child):not(:last-child){flex-shrink:4}
.crumbs li > a,.crumbs li > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.crumbs li + li::before{content:"/";opacity:.45;flex:none}
.crumbs a{transition:color var(--t)}
.crumbs a:hover{color:var(--green-dark)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:600}

.pagehead{padding:44px 0 4px}
.pagehead__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:center}
.pagehead__title{font-size:clamp(30px,4vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.035em;color:var(--navy-deep)}
.pagehead__blurb{margin-top:12px;font-size:17px;line-height:1.6;color:var(--gray);max-width:62ch}
.pagehead__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.product{padding:36px 0 48px} /* round 8: was 4px, the removed quote note used to supply the gap */
.product__media{max-width:460px}
.product__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.product__media-note{margin-top:10px;font-size:12px;color:var(--gray);text-align:center}
.product__cat{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-dark)}
.product__title{margin:6px 0 12px;font-size:clamp(28px,3.4vw,40px);font-weight:700;line-height:1.1;letter-spacing:-.035em;color:var(--navy-deep)}
.product__desc{font-size:17px;line-height:1.6;color:var(--ink);max-width:58ch}
.spec{margin-top:26px}
.spec__title{margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips li{
  padding:7px 14px;border-radius:var(--pill);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 2px 6px -2px rgba(15,23,42,.10);
  color:var(--navy-deep);font-size:13px;font-weight:600;line-height:1.2;
}
.speclist{display:grid;gap:7px}
.speclist li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.speclist li::before{content:"";position:absolute;left:3px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.speclist--check li::before{background:var(--kraft)}
.product__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--navy-deep);color:rgba(255,255,255,.72)}
.footer__top{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.6fr);gap:48px;padding:56px 32px 48px}
.brand--footer{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:var(--r-lg);padding:18px 22px;margin-bottom:18px;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.6);
}
.brand--footer img{width:260px;max-width:100%;height:auto}
.footer__tag{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em}
.footer__maple{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:14px;color:rgba(255,255,255,.7)}
.footer__phone{display:inline-block;margin-top:16px;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;transition:color var(--t)}
.footer__phone:hover{color:var(--green-tint-2)}

.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.footer__col{display:flex;flex-direction:column;gap:9px}
.footer__col h3{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-bottom:5px}
.footer__col a{font-size:14px;color:rgba(255,255,255,.62);line-height:1.4;transition:color var(--t),transform var(--t)}
.footer__col a:hover{color:#fff}

.footer__bar{border-top:1px solid rgba(255,255,255,.1)}
.footer__bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px;font-size:12.5px;color:rgba(255,255,255,.5)}
.footer__credit{font-size:12px}
.footer__credit a{color:rgba(255,255,255,.72);font-weight:600;transition:color var(--t)}
.footer__credit a:hover{color:var(--green-tint-2)}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity 600ms var(--ease),transform 600ms var(--ease);
}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:80ms}
.reveal[data-delay="2"]{transition-delay:160ms}
.reveal[data-delay="3"]{transition-delay:240ms}
.reveal[data-delay="4"]{transition-delay:320ms}

/* =========================================================
   HERO BANNER CAROUSEL
   Every slide sits in the same grid cell, so the banner is
   always as tall as the tallest slide and nothing shifts.
   ========================================================= */
.hcar{position:relative;z-index:2;display:grid;align-content:center}
.hcar__track{display:grid}
.hcar__slide{
  grid-area:1/1;align-content:center;
  opacity:0;visibility:hidden;
  transition:opacity 420ms var(--ease),visibility 420ms var(--ease);
}
.hcar__slide.is-active{opacity:1;visibility:visible}
.hero__eyebrow--label{
  font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-bottom:10px;
}
.hero__title--text{
  font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.08;letter-spacing:-.03em;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 26px rgba(3,51,44,.75);
}
.hero__sub{
  margin-top:14px;max-width:34ch;
  font-size:clamp(15px,1.5vw,18px);line-height:1.5;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4),0 2px 16px rgba(3,51,44,.8);
}
.hcar__controls{display:flex;align-items:center;gap:12px;margin-top:24px}
.hcar__controls[hidden]{display:none}
.hcar__arrow{
  display:inline-grid;place-items:center;flex:none;
  width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.hcar__arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hcar__arrow:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.55)}
.hcar__arrow:active{transform:scale(.94)}
.hcar__dots{display:flex;align-items:center;gap:7px}
.hcar__dot{
  width:9px;height:9px;padding:0;border:0;border-radius:var(--pill);cursor:pointer;
  background:rgba(255,255,255,.34);
  transition:background var(--t),width var(--t);
}
.hcar__dot:hover{background:rgba(255,255,255,.6)}
.hcar__dot.is-active{width:26px;background:#fff}

/* =========================================================
   FLAG OF CANADA
   ========================================================= */
.flag-ca{
  width:26px;height:13px;flex:none;border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.28);
}
/* round 10: beside "Proudly" in the stats ticker, at cap height of the big line */
.stat__num--flag{display:inline-flex;align-items:center;gap:.32em}
.flag-ca--ticker{width:1.44em;height:.72em}

/* =========================================================
   ROUND 6 · TYPE ONE STEP UP
   Michael found the text small. Reading text goes up about 10%,
   the small labels and fine print (the smallest sizes) about 12
   to 15%, headings about 6% so the scale stays in proportion.
   The masthead bar (nav links, search, quote button, utility bar)
   and the hero display type are deliberately unchanged: the
   masthead layout is locked and the hero reserves its height.
   Sits before RESPONSIVE so the breakpoint rules still win.
   ========================================================= */
body{font-size:17.5px}
.tag{font-size:11px}
.btn{font-size:16px}
.btn--sm{font-size:14px}
/* mega menu, search results and mobile menu panels */
.mega__cats-title{font-size:12px}
.mega__cat{font-size:15.5px}
.mega__cats-all{font-size:15px}
.mega__pane-title{font-size:20.5px}
.mega__pane-blurb{font-size:14.5px}
.mega__pname{font-size:15.5px}
.mega__pdesc{font-size:13.5px}
.mega__all{font-size:15.5px}
.sres__name{font-size:15.5px}
.sres__cat{font-size:12px}
.search__empty{font-size:14.5px}
.mobile-panel__link,.macc__top{font-size:17px}
.macc__cat-btn{font-size:16px}
.macc__cat-body a,.macc__all{font-size:15.5px}
.mobile-panel__meta{font-size:16px}
/* home */
.hero__eyebrow--label{font-size:13px}
.hero__sub{font-size:clamp(16px,1.6vw,19px)}
.usp__title{font-size:16px}
.usp__body{font-size:14.5px}
.about__kicker{font-size:13px}
.about__title{font-size:clamp(28px,3.1vw,38px)}
.about__sub{font-size:20.5px}
.about__copy p{font-size:17px}
.about__copy .about__line{font-size:18.5px}
.stat__num{font-size:clamp(28px,2.8vw,36px)}
.stat__lbl{font-size:15px}
/* sections, cards, quote band */
.section__title{font-size:clamp(26px,2.8vw,34px)}
.section__more{font-size:16.5px}
.ccard__name{font-size:17.5px}
.ccard__blurb{font-size:14.5px}
.ccard--index .ccard__name{font-size:22px}
.pcard__cat{font-size:12.5px}
.pcard__name{font-size:17px}
.pcard__more{font-size:15px}
.eq__name{font-size:17px}
.quoteband__title{font-size:clamp(28px,3vw,36px)}
/* contact */
.contact__kicker{font-size:13px}
.contact__title{font-size:clamp(28px,3.1vw,38px)}
.contact__body{font-size:17.5px}
.contact__phone{font-size:18px}
.contact__list li{font-size:16px}
.contact__list li::before{top:10px}
.field label{font-size:14.5px}
.field input,.field textarea{font-size:16.5px}
.field__err{font-size:14px}
.cform__status{font-size:15.5px}
.cform__fine{font-size:13px}
.cform__done h3{font-size:21.5px}
.cform__done p{font-size:16px}
/* breadcrumbs, page heads, product page */
.crumbs{font-size:14.5px}
.pagehead__title{font-size:clamp(32px,4.2vw,48px)}
.pagehead__blurb{font-size:18.5px}
.product__media-note{font-size:13.5px}
.product__cat{font-size:13px}
.product__title{font-size:clamp(30px,3.6vw,42px)}
.product__desc{font-size:18.5px}
.spec__title{font-size:13px}
.chips li{font-size:14.5px}
.speclist li{font-size:16px}
.speclist li::before{top:10px}
/* footer */
.footer__tag{font-size:16.5px}
.footer__maple{font-size:15.5px}
.footer__phone{font-size:19.5px}
.footer__col h3{font-size:13px}
.footer__col a{font-size:15.5px}
.footer__bar-inner{font-size:14px}
.footer__credit{font-size:13px}

/* =========================================================
   ROUND 6 · FLOATING BACK TAB
   The breadcrumb's parent link again, fixed to the left edge
   halfway down the screen on every page that has a breadcrumb.
   Pages that carry it get a wider left gutter wherever the
   viewport is too narrow for the tab to sit in the margin, so
   it never lies on top of text, cards or photos.
   ========================================================= */
.backfab{
  --fab-w:52px;
  position:fixed;left:0;top:50%;z-index:55;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  width:var(--fab-w);min-height:64px;padding:10px 0 9px;
  border-radius:0 var(--r-lg) var(--r-lg) 0;
  background:var(--green);color:#fff;
  box-shadow:0 10px 24px -10px rgba(3,51,44,.65),0 2px 6px rgba(14,14,16,.12);
  transform:translateY(-50%);
  transition:background var(--t),width var(--t),box-shadow var(--t);
}
.backfab svg{width:22px;height:22px;flex:none;stroke-width:2.3;transition:transform var(--t)}
.backfab__txt{font-size:12.5px;font-weight:700;line-height:1;letter-spacing:.01em}
.backfab:hover{background:var(--green-dark)}
.backfab:hover svg{transform:translateX(-3px)}
.backfab:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px}
/* content starts at least 12px clear of the tab */
body:has(.backfab){--fab-clear:64px}
body:has(.backfab) :is(main .container,.footer__top,.footer__bar .container){
  padding-left:max(var(--pad),calc(var(--fab-clear) - max(0px,(100vw - var(--container)) / 2)));
}
@media (max-width:560px){
  .backfab{--fab-w:46px;min-height:58px;padding-block:9px 8px}
  .backfab svg{width:20px;height:20px}
  .backfab__txt{font-size:11.5px}
  body:has(.backfab){--fab-clear:56px}
  /* on a phone the breadcrumb bar (well above the tab) keeps its normal
     gutter so the trail has every pixel */
  body:has(.backfab) .crumbs .container.crumbs__inner{padding-left:var(--pad)}
  .crumbs{font-size:14px}
}
@media print{.backfab{display:none}}

/* =========================================================
   ROUND 6 · CONTACT ADDRESS
   Bottom of the left column, level with the Submit request
   button on desktop; above the form on tablet and phone.
   ========================================================= */
.contact__copy{align-self:stretch;display:flex;flex-direction:column}
.contact__addr{
  display:flex;align-items:flex-start;gap:14px;
  margin-top:auto;padding-top:28px;
  font-style:normal;font-size:17px;line-height:1.55;color:var(--ink);
}
.contact__addr-ico{
  flex:none;width:44px;height:44px;padding:11px;border-radius:var(--r);
  background:var(--green-tint);color:var(--green-dark);stroke-width:1.8;
}
.contact__addr-lines{display:flex;flex-direction:column}
.contact__addr-lines a{font-weight:600;color:var(--green-dark);transition:color var(--t)}
.contact__addr-lines a:first-of-type{margin-top:8px}
.contact__addr-lines a:hover{color:var(--green-deep);text-decoration:underline}
@media (min-width:1081px){
  /* lines the address up with the button: the form's fine print and
     bottom padding sit below the button */
  .contact__copy{padding-bottom:62px}
}

/* =========================================================
   ROUND 6 · PRODUCT PHOTO GALLERY (products.json "gallery")
   ========================================================= */
.product__gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.product__fig .cvis{border-radius:var(--r)}
.product__fig figcaption{margin-top:6px;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);text-align:center}

/* =========================================================
   ROUND 7 · WIDER HEADER
   Michael asked for the header to be wider. The masthead row may
   now run to 1760px instead of the 1376px page column, so on large
   screens the logo sits further left and the quote button further
   right than the content below. Below about 1440px the page column
   is already full width, so nothing changes there. The mega menu
   panel keeps the page column.
   ========================================================= */
.masthead__inner{max-width:1760px}
@media (max-width:560px){
  /* phone: hamburger + logo + quote button used to run 18px past the
     edge (the 2px page overflow since round 3). Tighter gaps and side
     padding; the logo stays the same size. */
  .masthead .masthead__inner{gap:8px}
  .masthead .brand{padding-inline:11px}
  .masthead .masthead__quote{padding-inline:12px}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1300px){
  .search input{width:200px}
  .masthead__inner{gap:18px}
  .mainnav__link{padding-inline:11px;font-size:14px}
}

@media (max-width:1140px){
  .search input{width:160px}
  .ccard-grid,.pcard-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega__inner{grid-template-columns:250px minmax(0,1fr)}
}

@media (max-width:1060px){
  /* the taller logo leaves less room on one line: let the search box give way
     rather than letting the nav wrap */
  .masthead__inner{gap:14px}
  .mainnav__link{padding-inline:9px;font-size:13.5px}
  .masthead__quote{padding:9px 14px}
  .masthead__tools{flex:0 1 auto;min-width:0}
  .masthead__tools > .search,.masthead__tools > .search form{min-width:0}
  .search input{width:190px;min-width:0}
}

@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr}
  .hero__usps{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__top{grid-template-columns:1fr;gap:40px}
  .about__grid,.contact__grid,.product__grid,.pagehead__grid{grid-template-columns:1fr;gap:32px}
  .brand--plate img{max-width:360px}
  .product__media{max-width:460px}
}

@media (max-width:960px){
  :root{--pad:24px}
  .mainnav{display:none}
  .hamburger{display:flex}
  .mobile-panel{display:grid}
  .brand{margin-right:auto}
  .masthead__tools > .search{display:none}
  .masthead__inner{gap:14px;min-height:88px}
  .crumbs{top:var(--mast-h,88px)}
  /* Mobile: keep Home and the current page whole, hide the intermediate
     "Products" hop so the parent category and the page name get the room. */
  .crumbs li:nth-child(2):not(:last-child):not(:nth-last-child(2)){display:none}
  .crumbs li:last-child{flex-shrink:1}
  .brand img{height:58px}
  .utility__cutoff{display:none}
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__banner{padding:32px}
  .ccard-grid,.pcard-grid,.pcard-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quoteband__inner{align-items:flex-start}
}

@media (max-width:760px){
  /* phones: the reel sits on top, the copy below it on solid green */
  .hero__banner{grid-template-columns:1fr;min-height:0;gap:0;padding:0 24px 28px}
  .hero__frame{position:relative;inset:auto;order:-1;margin:0 -24px 24px;aspect-ratio:16/11}
  .hero__frame::after{
    background:
      linear-gradient(90deg,rgba(3,51,44,.6) 0%,rgba(3,51,44,0) 15%),
      linear-gradient(0deg,#03332C 0%,rgba(3,51,44,0) 15%);
  }
  .hero__maple{right:14px;bottom:14px;width:76px;height:76px}
  .hero__maple-txt{font-size:9.5px}
  .hero__usps{grid-template-columns:1fr}
  .utility__badges{gap:12px}
  .section{padding:40px 0}
  .about,.contact{padding:44px 0}
  .footer__top{padding-inline:24px}
  .brand img{height:58px}
  .masthead__quote{padding:8px 14px;font-size:13.5px}
  .cform__row{grid-template-columns:1fr}
  .pagehead{padding:32px 0 0}
}

@media (max-width:560px){
  :root{--pad:16px}
  .ccard-grid,.pcard-grid,.pcard-grid--3,.eq-grid{grid-template-columns:1fr;gap:14px}
  .ticker{--ticker-gap:36px}
  .footer__cols{grid-template-columns:1fr;gap:24px}
  .footer__bar-inner{justify-content:center;text-align:center}
  .utility{font-size:11.5px}
  .utility__inner{min-height:40px;gap:12px}
  .utility__badges{display:none}
  .footer__top{padding-inline:16px}
  .search--mobile{padding-inline:16px}
  .search.search--mobile .search__results{left:16px;right:16px}
  .mobile-panel__nav,.mobile-panel__meta{padding-inline:16px}
  .mobile-panel__cta{margin-inline:16px;width:calc(100% - 32px)}
  .cform{padding:20px}
  .quoteband__inner .btn,.hero__ctas .btn,.about__cta .btn,.product__cta .btn,.pagehead__cta .btn,.cform__done .btn{width:100%}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  /* hero reel: the poster image stays, the video never shows */
  .hero__video{display:none}

  /* no marquee at all: the first four items sit in the container as a
     plain grid, exactly the band this replaced */
  .ticker{overflow:visible;-webkit-mask-image:none;mask-image:none;
    width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--pad);
  }
  .ticker__track{animation:none !important;transform:none !important;display:block;width:auto}
  .ticker__set{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .ticker__set[aria-hidden="true"]{display:none}
  .ticker__item{margin-right:0;white-space:normal}
  .ticker__item::after{display:none}
  .ticker__item:nth-child(n+5){display:none}
}

@media (prefers-reduced-motion:reduce) and (max-width:960px){
  .ticker__set{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .ticker__set{grid-template-columns:1fr;gap:20px}
}