/* ==========================================================================
   Binns Canada — engineered & technical
   Signal orange (#f09000, sampled from the logo) on corporate blue (#05023f, matched to the existing BINNS website).
   Audience: specifiers and security consultants who must verify a certification
   rating before writing it into a tender. Specs and ratings are content, not
   decoration.
   ========================================================================== */

:root{
  --accent:#f09000;
  --accent-dark:#c97600;
  --accent-soft:#fff4e3;

  --ink:#05023f;
  --surface:#0d0a4a;
  --surface-2:#171459;
  --border-dark:#383572;
  --on-dark:#e6ebf0;
  --on-dark-muted:#bcc5dc;

  --paper:#ffffff;
  --paper-alt:#f5f7f9;
  --text:#0c1116;
  --text-muted:#54626f;
  --border:#dde3e9;

  --warning:#d0342c;

  --wrap:1240px;
  --gut:24px;
  --radius:4px;              /* engineered: tight radii, not soft cards */
  --radius-lg:6px;

  --font:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --shadow:0 1px 2px rgba(12,17,22,.06),0 4px 16px rgba(12,17,22,.06);
  --shadow-lg:0 12px 40px rgba(12,17,22,.14);

  --t:180ms cubic-bezier(.2,.6,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
/* Remove the 300ms tap delay and stray tap highlight on touch (WIG). */
a,button,summary,input,label,.btn,.faq__q{touch-action:manipulation}
a,button,summary,.faq__q{-webkit-tap-highlight-color:transparent}
body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse;width:100%}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{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:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--ink);padding:12px 20px;font-weight:700;
}
.skip-link:focus{left:8px;top:8px}

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;                       /* >=44px tap target */
  padding:12px 22px;
  font-family:var(--font);font-weight:700;font-size:.95rem;
  letter-spacing:.01em;
  text-decoration:none;border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;transition:background var(--t),border-color var(--t),color var(--t),transform var(--t);
  white-space:nowrap;
}
.btn--accent{background:var(--accent);color:#231400;border-color:var(--accent)}
.btn--accent:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn--ghost{background:transparent;color:var(--on-dark);border-color:var(--border-dark)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--block{display:flex;width:100%}
.btn:active{transform:translateY(1px)}

/* Ghost button on light backgrounds */
.on-paper .btn--ghost,.formcard .btn--ghost{color:var(--text);border-color:var(--border)}
.on-paper .btn--ghost:hover{border-color:var(--accent);color:var(--accent-dark)}

/* ---------------------------------------------------------------- topbar */
.topbar{background:var(--ink);color:var(--on-dark-muted);font-size:.82rem;border-bottom:1px solid var(--border-dark)}
.topbar__in{display:flex;align-items:center;gap:24px;min-height:40px;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit}
.topbar__item:hover{color:var(--accent)}
.topbar__loc{margin-right:auto}
.topbar svg{flex:none;opacity:.7}

/* ---------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--border-dark);
}
.header__in{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{flex:none;display:block}
.brand img{width:150px;height:auto}

.main-nav{margin-left:auto}
.main-nav>ul{display:flex;align-items:center;gap:4px;list-style:none}
.main-nav>ul>li{position:relative}
.main-nav>ul>li>a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 13px;
  color:var(--on-dark);text-decoration:none;
  font-weight:600;font-size:.93rem;
  border-radius:var(--radius);
  transition:color var(--t),background var(--t);
}
.main-nav>ul>li>a:hover,.main-nav>ul>li>a.is-active{color:var(--accent)}
.main-nav .chev{display:inline-flex;opacity:.6;transition:transform var(--t)}
.main-nav>ul>li:hover>a .chev{transform:rotate(180deg)}

.header__cta{flex:none;display:flex;gap:10px}
.nav-toggle{display:none}

/* Dropdown (hover-revealed, offset below the toggle) */
.dropdown,.submenu{
  position:absolute;list-style:none;
  background:var(--surface-2);
  border:1px solid var(--border-dark);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:8px;
  min-width:280px;
  opacity:0;visibility:hidden;
  transform:translateY(-4px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
  z-index:110;
}
.dropdown{top:calc(100% + 10px);left:0}

/* HOVER BRIDGE — the dropdown sits 10px below its toggle, leaving a dead gap.
   Without a transparent bridge across it the panel closes the instant the
   cursor crosses the gap, forcing users to CLICK instead of hover.
   (completeness sub-check 21) */
.dropdown::before{
  content:"";position:absolute;
  top:-12px;left:0;right:0;height:12px;
}
.has-dropdown:hover>.dropdown,
.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;transform:translateY(0)}

.dropdown li>a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;
  color:var(--on-dark);text-decoration:none;
  font-size:.9rem;font-weight:500;
  border-radius:var(--radius);
  transition:background var(--t),color var(--t);
}
.dropdown li>a:hover{background:var(--ink);color:var(--accent)}
.dropdown__all>a,.submenu__all>a{
  color:var(--accent);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid var(--border-dark);
  border-radius:var(--radius) var(--radius) 0 0;
  margin-bottom:4px;
}

/* Cascading flyout: submenu overlaps its parent so there is no dead gap */
.has-submenu{position:relative}
.submenu{top:-9px;left:calc(100% + 1px);min-width:320px;max-height:70vh;overflow-y:auto}
.has-submenu:hover>.submenu,
.has-submenu:focus-within>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
.has-submenu>a .chev{transform:rotate(-90deg);margin-left:auto}
.has-submenu:hover>a{background:var(--ink);color:var(--accent)}

/* ---------------------------------------------------------------- mobile nav */
.mobile-nav{display:none}
.mobile-nav__list{list-style:none}

@media (max-width:1080px){
  .main-nav,.header__cta{display:none}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;
    width:48px;height:48px;padding:12px;
    background:transparent;border:1px solid var(--border-dark);border-radius:var(--radius);
    cursor:pointer;
  }
  .nav-toggle span{display:block;height:2px;background:var(--on-dark);border-radius:2px;transition:transform var(--t),opacity var(--t)}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-nav{
    display:block;
    background:var(--surface);
    border-top:1px solid var(--border-dark);
    padding:16px var(--gut) 28px;
    max-height:calc(100vh - 116px);
    overflow-y:auto;
  }
  .mobile-nav[hidden]{display:none}
  /* The cascade FLATTENS on touch — hover doesn't exist here, so every hub and
     every product is visible in a nested list (sub-check 7). */
  .mobile-nav ul{list-style:none}
  .mobile-nav a{
    display:block;padding:12px 0;
    color:var(--on-dark);text-decoration:none;font-weight:600;
    border-bottom:1px solid var(--border-dark);
  }
  .mobile-nav a:hover{color:var(--accent)}
  .mnav-group__label{
    display:block;padding:16px 0 8px;
    color:var(--accent);font-size:.76rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.1em;
  }
  .mnav-group>ul{padding-left:12px}
  .mnav-sub>a{color:var(--on-dark);font-weight:700}
  .mnav-sub>ul{padding-left:14px;border-left:2px solid var(--border-dark);margin:4px 0 10px}
  .mnav-sub>ul a{font-weight:400;font-size:.9rem;color:var(--on-dark-muted);border-bottom:0;padding:8px 0}
  .mobile-nav__cta{display:grid;gap:10px;margin-top:20px}
}

/* ---------------------------------------------------------------- hero */
.hero{
  background:var(--ink);
  color:var(--on-dark);
  border-bottom:1px solid var(--border-dark);
  position:relative;
  overflow:hidden;
}
/* Faint engineered grid — reads as a technical drawing, not a texture */
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(240,144,0,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(240,144,0,.05) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 30% 40%,#000 30%,transparent 75%);
  pointer-events:none;
}
.hero__in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:72px 24px 80px}
.hero--plain .hero__in{grid-template-columns:1fr;max-width:860px;margin-inline:auto;text-align:center;padding-block:64px}
.hero--plain .hero__actions,.hero--plain .chips{justify-content:center}

.hero__eyebrow{
  display:inline-block;                  /* alignment set EXPLICITLY below */
  text-align:left;
  color:var(--accent);
  font-family:var(--mono);
  font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:16px;
  padding-left:14px;
  border-left:3px solid var(--accent);
}
/* An inline-block child follows the PARENT's text-align, so a centred hero
   would otherwise strand this label to the left (sub-check 27). */
.hero--plain .hero__eyebrow{text-align:center;border-left:0;padding-left:0}

.hero__h1{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:-.03em;margin-bottom:20px;text-wrap:balance}
.hero__sub{color:var(--on-dark-muted);font-size:1.12rem;max-width:56ch;margin-bottom:26px}
.hero--plain .hero__sub{margin-inline:auto}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero__media{position:relative}
.hero__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius-lg);
  border:1px solid var(--border-dark);
}

@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:36px;padding:48px 24px 56px}
  .hero__media{order:-1}
  .hero__media img{aspect-ratio:16/10}
}

/* ---------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:4px}
.chip{
  display:inline-flex;align-items:center;
  padding:5px 11px;
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  letter-spacing:.04em;
  color:var(--accent);
  background:rgba(240,144,0,.1);
  border:1px solid rgba(240,144,0,.32);
  border-radius:2px;
  white-space:nowrap;
}
.chip--sm{font-size:.7rem;padding:3px 8px}
/* On light surfaces the chip needs a darker ink for contrast */
.pcard .chip,.on-paper .chip{color:var(--accent-dark);background:var(--accent-soft);border-color:#f0c98a}

/* ---------------------------------------------------------------- crumbs */
.crumbs{background:var(--paper-alt);border-bottom:1px solid var(--border);font-size:.84rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:12px 0;color:var(--text-muted)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.45}
.crumbs a{color:var(--text-muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-dark);text-decoration:underline}
.crumbs [aria-current]{color:var(--text);font-weight:600}

/* ---------------------------------------------------------------- sections */
.sec{padding:76px 0}
.sec--alt{background:var(--paper-alt)}
.sec--dark{background:var(--ink);color:var(--on-dark)}
.sec--dark .sec__h,.sec--dark h2,.sec--dark h3{color:var(--on-dark)}
.sec--dark .sec__lead,.sec--dark p{color:var(--on-dark-muted)}
.sec__head{max-width:62ch;margin-bottom:40px}
.sec__head--center{margin-inline:auto;text-align:center}
.sec__eyebrow{
  display:block;text-align:inherit;
  color:var(--accent-dark);
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;
  margin-bottom:12px;
}
.sec--dark .sec__eyebrow{color:var(--accent)}
.sec__h{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:14px;text-wrap:balance}
.sec__lead{color:var(--text-muted);font-size:1.06rem}

.prose>*+*{margin-top:20px}
.prose h2{font-size:1.5rem;margin-top:40px}
.prose h3{font-size:1.18rem;margin-top:32px}
.prose h4{font-size:1.02rem;margin-top:24px}
.prose p{color:var(--text-muted)}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}
.prose ul{padding-left:22px;color:var(--text-muted)}
.prose ul li{margin-top:8px;list-style:disc}
/* Numbered process steps (e.g. the cyber policy's incident-response plan):
   real <ol> numbering, the step name in bold, its detail inline — no stray
   bullet sitting under each number. */
.prose ol.steps{padding-left:22px;color:var(--text-muted);list-style:decimal}
.prose ol.steps li{margin-top:10px;padding-left:4px}
.prose ol.steps strong{color:var(--text)}

/* ---------------------------------------------------------------- product grid */
.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;list-style:none;
  align-items:start;         /* uneven cards must NOT stretch to equal height (Rule 8) */
}
/* Catalogue grouped by range: one labelled band per category. */
.catgroup{margin-top:40px}
.catgroup:first-child{margin-top:0}
.catgroup__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:12px;margin-bottom:24px;border-bottom:2px solid var(--border);
}
.catgroup__h{font-size:1.4rem;line-height:1.2;margin:0}
.catgroup__link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent-dark);text-decoration:none;white-space:nowrap;
}
.catgroup__link:hover{text-decoration:underline}
.catgroup__count{color:var(--text-muted)}
.catgroup__link svg{width:14px;height:14px}
.pcard{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.pcard:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pcard__link{display:block;text-decoration:none;color:inherit;height:100%}
.pcard__media{background:var(--paper-alt);border-bottom:1px solid var(--border)}
.pcard__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pcard__media--empty{aspect-ratio:4/3}
.pcard__body{padding:20px}
.pcard__chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.pcard__title{font-size:1.02rem;margin-bottom:8px;letter-spacing:-.01em}
.pcard__blurb{color:var(--text-muted);font-size:.9rem;line-height:1.55;margin-bottom:14px}
.pcard__more{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent-dark);font-weight:700;font-size:.84rem;
}
.pcard:hover .pcard__more svg{transform:translateX(3px)}
.pcard__more svg{transition:transform var(--t)}

/* ---------------------------------------------------------------- hub cards */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;list-style:none;align-items:start}
.hubcard{
  display:flex;flex-direction:column;
  padding:30px;
  background:var(--surface);
  border:1px solid var(--border-dark);
  border-radius:var(--radius-lg);
  text-decoration:none;color:var(--on-dark);
  transition:border-color var(--t),transform var(--t);
}
.hubcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.hubcard__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin-bottom:18px;
  color:var(--accent);
  background:rgba(240,144,0,.1);
  border:1px solid rgba(240,144,0,.28);
  border-radius:var(--radius);
}
.hubcard__h{font-size:1.2rem;margin-bottom:10px}
.hubcard__p{color:var(--on-dark-muted);font-size:.94rem;flex:1;margin-bottom:18px}
.hubcard__count{
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  color:var(--accent);letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;
}

/* ---------------------------------------------------------------- product page */
/* Bottom padding was 0, so the last section's final paragraph ran straight into
   the next band with no breathing room. */
.product{padding:56px 0 84px}
.product__top{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
@media (max-width:960px){.product__top{grid-template-columns:1fr;gap:32px}}

.gallery__main{
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--paper-alt);
}
.gallery__main img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;list-style:none}
.gallery__thumbs button{
  display:block;width:100%;padding:0;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--paper-alt);overflow:hidden;cursor:pointer;
  transition:border-color var(--t);
}
.gallery__thumbs button[aria-current="true"]{border-color:var(--accent);border-width:2px}
.gallery__thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover}

.product__title{font-size:clamp(1.7rem,3vw,2.35rem);margin-bottom:14px}
.product__hub{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent-dark);text-decoration:none;margin-bottom:12px;
}
.product__hub:hover{text-decoration:underline}
/* The page's own, fuller product name where the catalogue name is the shorter of
   the two — it carries the model designation ("TITAN EAG05000 Range"). */
.product__fullname{color:var(--text-muted);font-size:.95rem;margin-top:8px;max-width:52ch}
.product__lead{color:var(--text-muted);margin:18px 0 24px;font-size:1.03rem}
/* margin-top was missing entirely, so the rating chips sat directly on top of the
   "Request a Quote" button. */
.product__actions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 32px}
.product__info .subhead{margin-top:4px}

.spec-table{font-size:.92rem;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.spec-table th,.spec-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{
  width:40%;font-family:var(--font);font-weight:600;color:var(--text);
  background:var(--paper-alt);
}
.spec-table td{font-family:var(--mono);font-size:.86rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.spec-note{font-family:var(--font)!important;font-size:.9rem!important}
.spec-table td.spec-prose{font-family:var(--font);font-size:.9rem;line-height:1.55}

.feature-list{list-style:none;display:grid;gap:10px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text-muted);font-size:.95rem}
.feature-list svg{flex:none;color:var(--accent-dark);margin-top:4px}

.subhead{
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);
  margin-bottom:12px;
}

/* ------------------------------------------------------------- product body
   A product page is long by nature — prose, variants, and a spec table that can
   run to twelve rows. The job is not to hide content but to give it structure a
   reader can skim: numbered sections, one idea per block, and a sticky contents
   list so the page is navigable instead of merely scrollable. */
/* Two columns only when there IS a contents list to put in the second one.
   Otherwise the grid reserves 232px of nothing and the body sits oddly off-centre. */
.pbody{margin-top:56px}
.pbody--toc{
  display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:56px;align-items:start;
}
@media (max-width:960px){.pbody--toc{grid-template-columns:1fr;gap:32px}}
.pbody__main{max-width:none}

.pblock{padding-top:40px;margin-top:40px;border-top:1px solid var(--border)}
.pblock:first-child{padding-top:0;margin-top:0;border-top:0}

/* Vertical rhythm INSIDE the section.
   `.prose>*+*` only spaces DIRECT children, so the moment content was wrapped in
   a .pblock every paragraph became a grandchild and silently lost its margin —
   which is why the product prose ran together as one slab. Any wrapper we
   introduce has to re-establish the rhythm, or it swallows it. */
.pblock>*+*{margin-top:20px}
/* Prose stays at a readable measure even though the block itself is full width —
   tables and feature grids are free to use the whole column. */
.pblock>p{max-width:68ch}
.pblock__h{
  font-size:1.32rem;margin-bottom:0;scroll-margin-top:100px;
  display:flex;align-items:baseline;gap:14px;
}
.pblock__n{
  font-family:var(--mono);font-size:.8rem;font-weight:600;color:var(--accent-dark);
  flex:none;
}
.pblock>.pblock__sub{font-size:1.02rem;margin-top:34px;color:var(--text)}
.pblock .spec-table{width:100%}

/* A hub's product entries. Eleven systems rendered as eleven bare headings and
   eleven bullet lists is a wall; boxed, each one reads as a discrete thing you
   can stop at, compare, and move past. */
.subcard{
  margin-top:24px;padding:26px 28px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--paper-alt);
}
.subcard>*+*{margin-top:16px}          /* same reason as .pblock above */
.subcard__h{font-size:1.05rem;color:var(--text)}
.subcard>p{max-width:68ch}
.subcard figure{margin:0}
.subcard figure img{border-radius:var(--radius);width:100%;height:auto;border:1px solid var(--border)}
.subcard .spec-table{background:var(--paper)}
.subcard--media figure{margin-bottom:16px}

/* Feature-card grid: parallel short blurbs (why-choose-us, industries, certs)
   read as discrete, comparable things instead of a stack of prose. Short blurbs
   only — long copy stays prose (see digestible-content rules). */
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:8px}
.fcard{
  padding:22px 24px;background:var(--paper-alt);
  border:1px solid var(--border);border-radius:var(--radius-lg);
}
/* margin-top:0 wins over the generic `.prose h3{margin-top:32px}` (which would
   otherwise stack 32px on top of the card's own padding). */
.fgrid .fcard__h{font-size:1.02rem;color:var(--text);margin:0 0 10px;line-height:1.3}
.fcard>p{color:var(--text-muted);max-width:none;font-size:.95rem}

/* Product-range buckets: linked image + blurb cards -> hub pages. */
.rangecards{display:grid;gap:16px;margin-top:8px}
.rangecard{
  display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:center;
  padding:18px;background:var(--paper-alt);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  text-decoration:none;color:inherit;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
/* Beat `.prose a{text-decoration:underline}` — the whole card is a link but its
   heading/blurb must not be underlined. */
.prose a.rangecard,.prose a.rangecard:hover{text-decoration:none;color:inherit}
.rangecard:hover{border-color:var(--accent);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.rangecard__media{margin:0}
.rangecard__media img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--border);
}
.rangecard .rangecard__h{margin:0 0 8px;font-size:1.12rem;color:var(--text)}
.rangecard__body>p{color:var(--text-muted);max-width:none;font-size:.95rem}
.rangecard__cta{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--mono);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent-dark);
}
.rangecard__cta svg{width:14px;height:14px}
@media (max-width:560px){.rangecard{grid-template-columns:1fr}}

/* Team profile cards: photo + name + role + bio. */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px;align-items:start}
.tcard{
  background:var(--paper-alt);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;padding-bottom:22px;
}
.tgrid .tcard__media{margin:0}
/* `.tgrid .tcard__media img` (0,2,1) must out-specify `.layout__main figure img`
   (0,1,2), which otherwise renders each headshot at its natural width (200–400px)
   — the source of the uneven sizes. Force one uniform square for all four. */
.tgrid .tcard__media img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;margin:0;border:0;border-radius:0}
.tgrid .tcard__h{margin:18px 22px 2px;font-size:1.1rem;color:var(--text)}
.tcard__role{margin:0 22px 12px;color:var(--accent-dark);font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.tcard>p{margin:12px 22px 0;color:var(--text-muted);font-size:.92rem;max-width:none}

/* Wide spec rows ("Pre-Treatment: Blast Cleaned SA2.5 - Primer: Interpon PZ790")
   scroll inside their own box rather than forcing the page sideways. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Sticky "On this page" */
.ptoc{position:sticky;top:100px;border-left:2px solid var(--border);padding-left:18px}
@media (max-width:960px){.ptoc{position:static;border-left:0;padding-left:0;
  border-top:1px solid var(--border);padding-top:20px}}
.ptoc__h{
  font-family:var(--mono);font-size:.72rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--text-muted);margin-bottom:12px;
}
.ptoc ul{display:grid;gap:9px;padding-left:0}
.ptoc li{list-style:none;margin:0}
.ptoc a{
  font-size:.9rem;color:var(--text-muted);text-decoration:none;line-height:1.35;
  display:block;
}
.ptoc a:hover{color:var(--accent-dark)}

/* Range cards on /products/ lead with the range's own banner photograph.
   The card carries 30px of padding, so the photo has to be bled out to the edges
   or it sits inset with a dark frame around it. */
.hubcard--photo{padding:0;overflow:hidden}
.hubcard__media{display:block;line-height:0}
.hubcard__media img{width:100%;height:180px;object-fit:cover;display:block}
.hubcard--photo>:not(.hubcard__media){margin-inline:30px}
.hubcard--photo .hubcard__icon{margin-top:26px}
.hubcard--photo .hubcard__count{margin-bottom:30px}

/* ---------------------------------------------------------------- FAQ
   Native <details>/<summary>: no JavaScript, keyboard- and screen-reader-
   accessible for free, and the answer stays in the HTML so it is still indexed
   and still findable with ctrl-F — it is only visually collapsed. */
.faq{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--paper);overflow:hidden;
}
.faq+.faq{margin-top:10px}
.faq__q{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 20px;cursor:pointer;list-style:none;
  font-weight:600;color:var(--text);line-height:1.45;
  transition:background var(--t);
}
.faq__q::-webkit-details-marker{display:none}   /* Safari's default triangle */
.faq__q:hover{background:var(--paper-alt)}
.faq__q:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Chevron: rotates to point down when the item is open. */
.faq__q::after{
  content:"";flex:none;margin-left:auto;margin-top:6px;
  width:9px;height:9px;
  border-right:2px solid var(--accent-dark);border-bottom:2px solid var(--accent-dark);
  transform:rotate(-45deg);transform-origin:center;
  transition:transform var(--t);
}
.faq[open] .faq__q{background:var(--paper-alt);border-bottom:1px solid var(--border)}
.faq[open] .faq__q::after{transform:rotate(45deg)}
.faq__a{padding:18px 20px 20px}
.faq__a>*+*{margin-top:14px}
.faq__a p{color:var(--text-muted);max-width:68ch}
@media (prefers-reduced-motion:reduce){.faq__q,.faq__q::after{transition:none}}

/* Divi "blurb" statements — a one-line claim the source drew as an icon card.
   Content, not headings: rendering them as headings is what put four headers
   with nothing beneath them on /about-us/. */
.statements{display:grid;gap:12px;margin:22px 0;padding-left:0!important}
.statements li{
  list-style:none!important;margin:0!important;padding:14px 18px 14px 44px;
  position:relative;background:var(--paper-2,rgba(255,255,255,.03));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  color:var(--text);font-weight:500;
}
.statements li::before{
  content:"";position:absolute;left:18px;top:20px;
  width:8px;height:8px;border-radius:2px;background:var(--accent);
}

/* ---------------------------------------------------------------- article layout
   ONE fixed template for every repeated content page: main column + sticky
   sidebar. Instances must not drift in width or alignment by how much copy each
   happens to carry (sub-check 27). */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
@media (max-width:960px){.layout{grid-template-columns:1fr;gap:36px}}
.layout__main{max-width:72ch}
.layout__main figure{margin:32px 0}

/* NEVER upscale a content image.
   This was `width:100%`, which stretched every figure to the full ~700px column
   — including the team headshots, which are only 200-224px wide at source. A
   200px image blown up to 700px is a 3.5x upscale and looks exactly as rough as
   it sounds. `width:auto` + the width/height attributes that
   inject_image_dimensions.py stamps on every <img> means an image renders at its
   natural size and is only ever scaled DOWN to fit. */
.layout__main figure img{
  width:auto;max-width:100%;height:auto;
  margin-inline:auto;display:block;
  border-radius:var(--radius-lg);border:1px solid var(--border);
}

/* Small portraits (the team headshots) render at one consistent size rather than
   at four different natural widths (200, 200, 224 and 400px). 200px is at or
   below every source's true resolution, so all four stay crisp. */
.layout__main figure.figure--portrait{margin:24px 0}
.layout__main figure.figure--portrait img{width:200px;margin-inline:0}

.side{position:sticky;top:100px;display:grid;gap:16px}
@media (max-width:960px){.side{position:static}}
.side__card{
  padding:24px;
  background:var(--paper-alt);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
}
.side__p{color:var(--text-muted);font-size:.92rem;margin-bottom:16px}
.side__nav{list-style:none;display:grid;gap:2px}
.side__nav a{
  display:block;padding:9px 0;
  color:var(--text-muted);text-decoration:none;font-size:.92rem;font-weight:500;
  border-bottom:1px solid var(--border);
}
.side__nav li:last-child a{border-bottom:0;color:var(--accent-dark);font-weight:700}
.side__nav a:hover{color:var(--accent-dark)}

/* ---------------------------------------------------------------- form */
.formcard{
  background:var(--surface);
  color:var(--on-dark);
  border:1px solid var(--border-dark);
  border-radius:var(--radius-lg);
  padding:32px;
}
.formcard__h{font-size:1.3rem;margin-bottom:8px}
.formcard__intro{color:var(--on-dark-muted);font-size:.94rem;margin-bottom:22px}
.qform{display:grid;gap:16px}
.qform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.qform__row{grid-template-columns:1fr}}
.qform__field{display:grid;gap:6px}
.qform label{font-size:.84rem;font-weight:600;color:var(--on-dark)}
.qform label span{color:var(--accent)}
.qform input,.qform textarea{
  width:100%;padding:12px 14px;min-height:48px;
  font-family:var(--font);font-size:.95rem;
  color:var(--on-dark);
  background:var(--ink);
  border:1px solid var(--border-dark);border-radius:var(--radius);
  transition:border-color var(--t);
}
.qform textarea{min-height:110px;resize:vertical}
.qform input::placeholder,.qform textarea::placeholder{color:#63707c}
.qform input:focus,.qform textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(240,144,0,.18)}
.qform__note{color:var(--on-dark-muted);font-size:.84rem;text-align:center}
.qform__note a{color:var(--accent)}
.qform__status{margin:.75rem 0 0;padding:.6rem .75rem;border-radius:6px;font-size:.9rem;text-align:center}
.qform__status[data-kind=ok]{background:rgba(255,255,255,.1);color:var(--on-dark)}
.qform__status[data-kind=err]{background:rgba(240,144,0,.16);color:var(--on-dark);border:1px solid var(--accent)}

/* ---------------------------------------------------------------- trust strip */
.trust-strip{background:var(--paper);border-block:1px solid var(--border);padding:28px 0}
.trust-strip__in{display:flex;align-items:center;justify-content:center;gap:52px;flex-wrap:wrap}
.trust-card{
  display:inline-flex;align-items:center;justify-content:center;
  filter:grayscale(1);opacity:.62;
  transition:filter var(--t),opacity var(--t);
}
.trust-card:hover{filter:grayscale(0);opacity:1}
/* Per-logo size tuning. These four logos run from 1.00 (square) to 3.06
   (ultrawide) in aspect ratio, so a single max-height would render the AFA mark
   at roughly half the visual area of the square Canadian Advantage badge — they
   would "fit" but read as inconsistent at a glance. Heights below are solved for
   roughly EQUAL VISUAL AREA (~4,600px² each), not equal height (sub-check 16). */
.trust-card--ca  img{max-height:68px;max-width:72px}    /* 1.00 aspect */
.trust-card--cfa img{max-height:54px;max-width:92px}    /* 1.60 */
.trust-card--afa img{max-height:39px;max-width:126px}   /* 3.06 */
.trust-card--ce  img{max-height:62px;max-width:78px}    /* 1.18 */

/* ---------------------------------------------------------------- cta band */
.cta-band{background:var(--accent);color:#231400}
.cta-band__in{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:44px 24px;flex-wrap:wrap}
.cta-band__h{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:6px}
.cta-band__p{color:#5c3c00;font-weight:500}
.cta-band__actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn--accent{background:var(--ink);color:#fff;border-color:var(--ink)}
.cta-band .btn--accent:hover{background:#000;border-color:#000}
.cta-band .btn--ghost{color:#231400;border-color:rgba(35,20,0,.35)}
.cta-band .btn--ghost:hover{border-color:var(--ink);color:var(--ink)}

/* ---------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--border-dark);border:1px solid var(--border-dark);border-radius:var(--radius-lg);overflow:hidden;list-style:none}
.stat{background:var(--surface);padding:28px 24px;text-align:center}
.stat__n{display:block;font-family:var(--mono);font-size:2rem;font-weight:600;color:var(--accent);letter-spacing:-.02em}
.stat__l{display:block;color:var(--on-dark-muted);font-size:.86rem;margin-top:6px}
.stat__ico{display:block;color:var(--accent);line-height:0;margin-bottom:10px}
.sec__cta{text-align:center;margin-top:36px}

/* ---------------------------------------------------------------- media split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split--flip .split__media{order:2}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}.split--flip .split__media{order:0}}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--border)}

/* ---------------------------------------------------------------- case cards */
.casegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;list-style:none;align-items:start}
.casecard{background:var(--paper);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--t),transform var(--t)}
.casecard:hover{border-color:var(--accent);transform:translateY(-2px)}
.casecard a{display:block;text-decoration:none;color:inherit}
.casecard img{width:100%;aspect-ratio:16/10;object-fit:cover}
.casecard__body{padding:22px}
.casecard__h{font-size:1.08rem;margin-bottom:8px}
.casecard__p{color:var(--text-muted);font-size:.9rem}

/* ---------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:32px}}
.contact-block{display:grid;gap:22px}
.contact-item{display:flex;gap:14px;align-items:flex-start}
.contact-item__icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;color:var(--accent-dark);
  background:var(--accent-soft);border:1px solid #f0c98a;border-radius:var(--radius);
}
.contact-item__k{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:2px}
.contact-item__v{font-weight:600}
.contact-item__v a{color:var(--text);text-decoration:none}
.contact-item__v a:hover{color:var(--accent-dark)}
.map-embed{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:32px}
.map-embed iframe{display:block;width:100%;height:340px;border:0}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--ink);color:var(--on-dark-muted);border-top:1px solid var(--border-dark)}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.1fr 1.2fr;
  gap:40px;padding:64px 24px 48px;
}
@media (max-width:1080px){.footer__grid{grid-template-columns:1fr 1fr 1fr;gap:36px}}
@media (max-width:680px){.footer__grid{grid-template-columns:1fr;gap:32px}}
.footer__logo{width:150px;height:auto;margin-bottom:16px}
.footer__tag{color:var(--on-dark-muted);font-size:.92rem;max-width:30ch;margin-bottom:20px}
.footer__social{display:flex;gap:10px}
.footer__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:var(--on-dark-muted);
  border:1px solid var(--border-dark);border-radius:var(--radius);
  transition:color var(--t),border-color var(--t);
}
.footer__social a:hover{color:var(--accent);border-color:var(--accent)}
/* BBB Accredited Business seal (static) — white plate so the blue seal reads on the dark footer. */
.footer__bbb{
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  margin-top:22px;padding:12px 14px;
  background:#fff;border-radius:var(--radius);
  text-decoration:none;width:max-content;max-width:100%;
  transition:box-shadow var(--t),transform var(--t);
}
.footer__bbb:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.footer__bbb-img{display:block;width:192px;height:auto;max-width:100%}
.footer__bbb-rating{color:#015A75;font-size:.8rem;font-weight:700;font-family:var(--font)}
.footer__h{
  color:var(--on-dark);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;
}
.footer__col ul{list-style:none;display:grid;gap:9px}
/* :not(.btn) so the "Request a Quote" button keeps its .btn--accent dark text
   (matching the nav button) instead of the muted footer-link colour. */
.footer__col a:not(.btn){color:var(--on-dark-muted);text-decoration:none;font-size:.9rem;transition:color var(--t)}
.footer__col a:not(.btn):hover{color:var(--accent)}
.footer__col address{font-style:normal;display:grid;gap:10px;margin-bottom:18px}
.footer__addr{line-height:1.5;font-size:.9rem}
.footer__line{display:inline-flex;align-items:center;gap:8px;font-size:.9rem}
.footer__bar{border-top:1px solid var(--border-dark)}
.footer__bar-in{display:flex;justify-content:space-between;gap:16px;padding:20px 24px;flex-wrap:wrap;font-size:.84rem}
.footer__bar a{color:var(--on-dark-muted);text-decoration:none}
.footer__bar a:hover{color:var(--accent)}

/* ---------------------------------------------------------------- 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;
  }
}

/* Sub-heading inside a variant block (source <h4>, e.g. "Banding colour options") */

/* Sam Sep 12: independently scrollable catalogue, native links, no new UI state. */
/* Keep long product tables/text from imposing an intrinsic minimum on the grid. */
.layout__main, .product__info, .gallery, .pbody__main { min-width: 0; overflow-wrap: anywhere; }
.layout__main table { max-width: 100%; }
.side .range-scroll {
  max-height: min(55vh, calc(100dvh - 130px));
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.range-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.range-scroll .side__nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.range-bottom { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 28px; padding-bottom: 28px; }
.range-bottom .btn { white-space: normal; text-align: center; }
.gallery--pending, .pcard__media--empty { display: grid; place-items: center; padding: 24px; text-align: center; background: #f1f3f5; color: #05023f; }
@media (min-width: 901px) {
  .side { max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior-y: contain; }
  .side .range-scroll { max-height: none; overflow-y: visible; }
}
@media (max-width: 900px) {
  .side .range-scroll { max-height: min(50vh, 360px); }
}