/*
 * Design CSS ported verbatim from projects/column-radiator-company/category-v1.html (signed off 15 Sep 2026),
 * lines 11-530 of its <style>. Keep it byte-close to the design so a diff against the mockup stays readable.
 * Build-only additions (fonts, focus states, real form controls, placeholder, list resets) live in theme.css.
 */
  :root {
    --ink: #0D1B2A;
    --ink-deep: #1a2638;
    --ink-soft: #2b3a4d;
    --gold: #C9A96E;
    --gold-muted: #a08850;
    --gold-light: #e3cf9f;
    --ivory: #FAF4E8;
    --warm-white: #FBF8F2;
    --grey: #5a6470;
    --grey-soft: #8a929b;
    --line: rgba(13, 27, 42, 0.10);
    --line-gold: rgba(201, 169, 110, 0.30);
    --ivory-70: rgba(250, 244, 232, 0.70);
    --ivory-80: rgba(250, 244, 232, 0.80);
    --ivory-55: rgba(250, 244, 232, 0.55);
    --ink-darkest: #08111c;
    --line-gold-strong: rgba(201, 169, 110, 0.55);
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --container: 1320px;
    --pad-x: 48px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--warm-white);
    color: var(--ink-deep);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img { max-width: 100%; display: block; }
  em, i, cite, address, dfn, var { font-style: normal; }
  .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }

  /* =====================================================================
     SHARED CHROME : copied from homepage-v5.html (util bar, nav, mega, support, footer)
     ===================================================================== */
  .util-bar { background: #08111c; color: var(--ivory-80); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; height: 38px; white-space: nowrap; display: flex; align-items: center; border-bottom: 1px solid rgba(201, 169, 110, 0.16); }
  /* Claims on the LEFT, email on the right : the original layout. 24 Sep, Myles : lose the dot separators but keep the
     position, so a 40px gap (about what dot plus its 20px either side used to take) now does the separating. */
  .util-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .util-left { display: flex; gap: 40px; align-items: center; }
  .util-right { display: flex; gap: 22px; align-items: center; }
  .util-bar a { color: var(--ivory-80); text-decoration: none; transition: color 0.2s; }
  .util-bar a:hover { color: var(--gold); }
  /* BTU Calculator + My Account : a thin gold rule parts them from the contact details, no dots (25 Sep). */
  .util-links { display: flex; gap: 22px; align-items: center; padding-left: 22px; border-left: 1px solid rgba(201, 169, 110, 0.35); line-height: 1; padding-block: 2px; }
  .util-right > .util-links:first-child { padding-left: 0; border-left: 0; }

  svg.ic { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; }
  svg.ic.sm { width: 16px; height: 16px; }
  svg.ic.xs { width: 14px; height: 14px; stroke-width: 2.2; }
  .nav-wrap { position: sticky; top: 0; z-index: 100; }
  .nav-wrap .main { height: 88px; background: rgba(13, 27, 42, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--gold); }
  .nav-wrap .main > .container { display: flex; align-items: center; justify-content: space-between; gap: 34px; height: 100%; }
  .nav-wrap .left { display: flex; align-items: center; gap: 34px; flex: 1; min-width: 0; height: 100%; }
  .wordmark { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 19px; letter-spacing: 0.10em; color: var(--ivory); text-transform: uppercase; white-space: nowrap; text-decoration: none; flex-shrink: 0; line-height: 1.1; }
  .wordmark .co { color: var(--gold); }
  .wordmark small { display: block; font-family: 'Inter', sans-serif; font-size: 9px; letter-spacing: 0.30em; color: var(--gold-muted); margin-top: 5px; font-weight: 500; }
  .nav-menu { display: flex; gap: 28px; list-style: none; align-items: center; white-space: nowrap; height: 100%; }
  .nav-menu > li { position: static; display: flex; align-items: center; height: 100%; }
  .nav-menu > li > a { position: relative; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11.5px; color: var(--ivory-80); text-decoration: none; letter-spacing: 0.10em; text-transform: uppercase; padding: 8px 0; line-height: 1; display: inline-flex; align-items: center; gap: 6px; transition: color 0.25s ease; }
  .nav-menu > li > a .caret { display: none; }
  .nav-menu > li > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s ease; }
  .nav-menu > li:hover > a::after { transform: scaleX(1); }
  .nav-menu > li:hover > a { color: var(--gold); }
  .mega { position: absolute; left: 0; right: 0; transform: translateY(-6px); top: 100%; width: 100%; background: var(--ivory); box-shadow: 0 24px 48px -16px rgba(13, 27, 42, 0.25); border-top: 1px solid var(--line-gold); padding: 56px 0; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; z-index: 99; white-space: normal; }
  .nav-menu > li:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }
  .mega-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; align-items: start; }
  .mega-inner > * { min-width: 0; }
  .mega-cards { display: grid; gap: 24px; }
  .mega-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .mega-card { min-width: 0; text-decoration: none; color: var(--ink); background: var(--warm-white); border: 1px solid rgba(160, 136, 80, 0.18); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; }
  .mega-card:hover { transform: translateY(-2px); border-color: rgba(201, 169, 110, 0.55); box-shadow: 0 18px 36px -20px rgba(13, 27, 42, 0.22); }
  .mega-img { height: 130px; position: relative; overflow: hidden; background: linear-gradient(180deg, #ebe2cf 0%, #d8cdb6 100%); }
  .mega-img .photo { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .mega-card-body { padding: 16px 18px 20px; flex: 1; }
  .mega-card-name { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 17px; color: var(--ink); margin-bottom: 6px; }
  .mega-card-desc { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--grey); line-height: 1.5; margin-bottom: 10px; }
  .mega-card-link { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--gold-muted); letter-spacing: 0.10em; text-transform: uppercase; }
  .mega-sidebar h5 { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 18px; }
  .mega-sidebar ul { list-style: none; }
  .mega-sidebar li { margin-bottom: 12px; }
  .mega-sidebar a { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink-deep); text-decoration: none; transition: color 0.25s ease; }
  .mega-sidebar a:hover { color: var(--gold-muted); }
  .mega-note { grid-column: 1 / -1; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--grey); margin-bottom: 20px; letter-spacing: 0.02em; }
  .mega-note strong { color: var(--gold-muted); }
  .icons { display: flex; align-items: center; gap: 22px; flex-shrink: 0; white-space: nowrap; }
  .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--ivory); background: none; border: 0; cursor: pointer; padding: 0; text-decoration: none; transition: color 0.2s; }
  .icon-btn:hover { color: var(--gold); }
  .badge { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
  /* My Project count : the same gold badge as the basket. cir-my-projects' own `.nav-my-project-link .cir-project-count` (0-2-0, Cast Iron burgundy circle) is beaten on specificity, not load order. */
  /* Heart hover : GOLD like the search and basket icons. cir-my-projects' `.nav-my-project-link:hover svg` sets the stroke
     to var(--cir-brand), which on Column is the navy, so the heart went near black on hover (24 Sep). Hand the stroke back
     to currentColor, which .icon-btn:hover already turns gold. (0-3-1 beats the plugin's 0-2-1.) */
  .icons .nav-my-project-link:hover svg, .icons .nav-my-project-link:focus-visible svg { stroke: currentColor; }
  .icons .nav-my-project-link .cir-project-count.badge { top: -7px; right: -9px; width: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--ink); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; line-height: 1; }
  /* The close x sits INSIDE the field at its right-hand end, where the browser's blue clear x used to be, as Cast Iron's
     cir-smart-search places its own (absolute, right, vertically centred). The input's 44px right padding keeps typed text
     from running under it. (24 Sep, Myles) */
  .search-box { display: none; position: relative; align-items: center; flex: 1; min-width: 0; max-width: 560px; }
  .search-box input { flex: 1; min-width: 0; height: 40px; background: rgba(250,244,232,0.06); border: 1px solid rgba(201,169,110,0.45); color: var(--ivory); font-family: 'Inter', sans-serif; font-size: 14px; padding: 0 44px 0 16px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
  .search-box input::placeholder { color: rgba(250,244,232,0.45); }
  /* The browser's own clear button (a blue x) drew inside the field beside our close x. Hidden, as Cast Iron's
     cir-smart-search does : our close x, in the same spot, is the only one. (24 Sep) */
  .search-box input::-webkit-search-cancel-button, .search-box input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
  .search-box input::-ms-clear { display: none; }
  .search-box input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.18); }
  .search-box .close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; color: var(--ivory); }
  .search-box .close svg.ic { width: 18px; height: 18px; }
  /* cir-btu-showroom slide-out (opened by the homepage BTU button, 24 Sep) : Cast Iron's panel in Column's colours.
     Its header is hard coded #1A1A1A (Cast Iron black) ; on Column it is the brand navy. Icons : see theme.js. */
  .cir-btu-overlay .cir-btu-header { background: var(--ink); }
  /* Its fonts are Cast Iron's : Lora on the question titles and result figures, Outfit on nearly everything else.
     Neither is loaded here, so the titles fell back to Times and the rest to Arial. On Column : Inter throughout, Playfair
     Display where Cast Iron uses its serif. Two-class selectors so this wins over the plugin's single-class rules whatever
     the load order. Covers the slide-out and the [cir_btu_calculator] page (.cir-btu-inline). (25 Sep) */
  :is(.cir-btu-overlay, .cir-btu-inline, .cir-showroom-overlay) :is([class*="cir-btu-"], [class*="cir-showroom-"], [class*="cir-datepicker-"], input, button, select, textarea) { font-family: var(--sans); }
  :is(.cir-btu-overlay, .cir-btu-inline, .cir-showroom-overlay) :is(.cir-btu-question-title, .cir-btu-result-value, .cir-showroom-success-title) { font-family: var(--serif); font-weight: 400; }
  :is(.cir-btu-overlay, .cir-btu-inline) .cir-btu-question-title { font-size: 17px; }
  .search-box .close:hover { color: var(--gold); }
  .nav-wrap.search-open .nav-menu { display: none; }
  .nav-wrap.search-open .search-box { display: flex; }
  .nav-wrap.search-open .search-toggle { color: var(--gold); }
  .mega.m3 { background: var(--ink); color: var(--ivory); border-top: 1px solid rgba(201,169,110,0.45); padding: 48px 0 52px; }
  .mega.m3 > .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 300px; gap: 40px; align-items: start; }
  .mega.m3 > .container > * { min-width: 0; }
  .m3 h5 { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(201,169,110,0.25); }
  .m3 ul { list-style: none; }
  .m3 li { margin-bottom: 12px; }
  .m3 li a { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ivory-80); text-decoration: none; transition: color 0.2s; }
  .m3 li a:hover { color: var(--gold); }
  .m3 .feat { position: relative; height: 230px; overflow: hidden; border: 1px solid rgba(201,169,110,0.35); }
  .m3 .feat img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
  .m3 .feat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,17,28,0) 25%, rgba(8,17,28,0.92) 100%); }
  .m3 .feat .cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; }
  .m3 .feat .cap .k { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
  .m3 .feat .cap .t { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--ivory); margin: 6px 0 12px; line-height: 1.3; }
  .m3 .feat .cap .btn { display: inline-flex; align-items: center; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-decoration: none; padding: 8px 14px; border: 1px solid var(--gold); transition: background 0.2s, color 0.2s; }
  .m3 .feat .cap .btn:hover { background: var(--gold); color: var(--ink); }

  .support { background: var(--ink); color: var(--ivory); padding: 64px 0; text-align: center; }
  .support h2 { font-family: 'Playfair Display', serif; font-weight: 300; font-size: 38px; color: var(--ivory); margin-bottom: 14px; }
  .support h2 em { font-style: normal; color: var(--gold); font-weight: 400; }
  .support p { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--ivory-70); margin-bottom: 28px; }
  .support .phone-link { font-family: 'Playfair Display', serif; font-size: 32px; color: var(--gold); text-decoration: none; letter-spacing: 0.06em; border-bottom: 1px solid var(--gold); padding-bottom: 6px; transition: color 0.25s ease; }
  .support .phone-link:hover { color: var(--gold-light); }
  .support .sister { margin: 40px 0 0; font-size: 13px; letter-spacing: 0.02em; color: var(--ivory-70); }
  .support .sister a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201, 169, 110, 0.45); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
  .support .sister a:hover { color: var(--gold-light); border-color: var(--gold-light); }

  .footer { background: var(--ink); color: var(--ivory-80); padding: 80px 0 0; border-top: 1px solid rgba(201, 169, 110, 0.20); }
  /* minmax(0, …) tracks (24 Sep) : with plain fr the newsletter form's intrinsic width pushed the page to 1088px at 1025 to 1087 wide. */
  .footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(201, 169, 110, 0.18); }
  .footer-brand .wordmark { font-size: 18px; color: var(--ivory); }
  .footer-brand p a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201,169,110,0.45); padding-bottom: 1px; }
  .footer-brand p a:hover { color: var(--gold-light); border-color: var(--gold-light); }
  .footer-brand p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ivory-70); line-height: 1.7; margin: 22px 0; max-width: 320px; }
  .footer-contact { display: flex; flex-direction: column; gap: 10px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ivory-80); }
  .footer-contact a { color: var(--ivory-80); text-decoration: none; transition: color 0.25s; }
  .footer-contact a:hover { color: var(--gold); }
  .footer-contact .label { color: var(--gold-muted); text-transform: uppercase; letter-spacing: 0.18em; font-size: 10px; margin-right: 6px; }
  .footer-col h5 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 12px; }
  .footer-col a { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ivory-80); text-decoration: none; transition: color 0.25s; }
  .footer-col a:hover { color: var(--gold); }
  .footer-bottom { padding: 28px 0; display: flex; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; font-size: 12px; color: var(--ivory-70); letter-spacing: 0.04em; }
  .footer-bottom-left { display: flex; gap: 24px; align-items: center; }
  .footer-payments { display: flex; gap: 8px; align-items: center; }
  .payment-tile { width: 38px; height: 24px; border-radius: 3px; background: var(--warm-white); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; }
  .footer-socials { display: flex; gap: 16px; }
  .social { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(201, 169, 110, 0.3); display: inline-flex; align-items: center; justify-content: center; color: var(--ivory-80); text-decoration: none; font-size: 14px; transition: all 0.25s; }
  .social:hover { border-color: var(--gold); color: var(--gold); }


  /* =====================================================================
     CATEGORY PAGE : shared components (prefix .cl), from category-lab.html
     ===================================================================== */
  .cl a { text-decoration: none; color: inherit; }
  .cl button, .cl select, .cl input { font-family: inherit; }
  .cl button { cursor: pointer; }
  .cl .k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-muted); display: block; }
  .cl .k.on-ink { color: var(--gold); }
  .cl .h2 { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1.15; color: var(--ink); }
  .cl h1.title { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; margin: 10px 0 14px; }
  .cl .lede { font-size: 15.5px; line-height: 1.7; color: var(--grey); max-width: 640px; }
  .cl .crumb { font-size: 12px; color: var(--grey); display: flex; gap: 8px; align-items: center; margin-bottom: 22px; }
  .cl .crumb span.sep { color: var(--gold); }
  .cl .crumb .here { color: var(--ink); }
  .cl .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 24px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border: 1px solid transparent; border-radius: 2px; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap; cursor: pointer; }
  .cl .btn-gold { background: var(--gold); color: var(--ink); border-color: var(--gold); }
  .cl .btn-gold:hover { background: #d6b982; border-color: #d6b982; }
  .cl .btn-ghost-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
  .cl .btn-ghost-ink:hover { background: var(--ink); color: var(--ivory); }
  .cl .btn-text { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--gold); }
  .cl .btn-text:hover { color: var(--gold-muted); }
  .cl .sel { position: relative; }
  .cl .sel select { width: 100%; height: 44px; appearance: none; -webkit-appearance: none; background: var(--warm-white); border: 1px solid rgba(13,27,42,0.22); color: var(--ink); font-size: 13.5px; font-weight: 500; padding: 0 38px 0 14px; border-radius: 2px; outline: none; }
  .cl .sel::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
  .cl .sortl { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
  .cl .sortl .sel { min-width: 190px; }

  /* hero : cream band */
  .cl .hero { background: var(--ivory); padding: 26px 0 28px; border-bottom: 1px solid var(--line-gold); }

  /* count + sort bar */
  .cl .bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0 18px; border-bottom: 1px solid var(--line-gold); margin-bottom: 24px; }
  .cl .count { font-size: 13.5px; color: var(--grey); white-space: nowrap; }
  .cl .count b { color: var(--ink); font-weight: 600; }
  .cl .bar .active { display: flex; gap: 8px; flex: 1; }
  .cl .af { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--ink); background: var(--ivory); border: 1px solid var(--line-gold-strong); padding: 6px 10px 6px 12px; border-radius: 2px; }
  .cl .af svg { width: 12px; height: 12px; color: var(--gold-muted); }

  /* the card : the homepage v5 range tile (.sec-range .t), extended with chips, dots and a price row */
  .cl .grid { display: grid; gap: 22px; }
  .cl .grid.three { grid-template-columns: repeat(3, 1fr); }
  .cl .grid.four { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .cl .card { display: flex; flex-direction: column; background: var(--warm-white); border: 1px solid var(--line-gold); transition: transform 0.25s, box-shadow 0.25s; min-width: 0; }
  .cl .card:hover { transform: translateY(-4px); box-shadow: 0 30px 40px -30px rgba(13,27,42,0.45); }
  .cl .card .pic { aspect-ratio: 1 / 1; overflow: hidden; background: #fff; position: relative; }
  .cl .card .pic img { width: 100%; height: 100%; object-fit: cover; }
  .cl .card .flag { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); background: var(--gold); padding: 5px 9px; }
  .cl .card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
  .cl .card h3 { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--ink); line-height: 1.2; }
  .cl .card p { font-size: 12.5px; color: var(--grey); line-height: 1.5; margin-top: -4px; }
  .cl .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .cl .chip { font-size: 11.5px; font-weight: 500; color: var(--ink-deep); background: var(--ivory); border: 1px solid var(--line-gold); padding: 4px 9px; border-radius: 2px; white-space: nowrap; }
  .cl .dots { display: flex; align-items: center; gap: 6px; }
  .cl .d { width: 16px; height: 16px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(13,27,42,0.12) inset; position: relative; }
  .cl .d.ring { box-shadow: 0 0 0 1px rgba(13,27,42,0.22) inset; }
  .cl .d.on::after { content: ''; position: absolute; inset: -4px; border: 1.5px solid var(--gold); border-radius: 50%; }
  .cl .dots .more { font-size: 11px; color: var(--grey); margin-left: 4px; letter-spacing: 0.04em; }
  .cl .card .pr { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .cl .card .from { font-size: 12.5px; color: var(--grey); }
  .cl .card .from b { font-family: var(--sans); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -0.01em; margin-left: 4px; }
  .cl .card .view { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-muted); white-space: nowrap; }
  .cl .card .view svg { width: 12px; height: 12px; }
  .cl .card:hover .view { color: var(--ink); }
  /* small cards for the four across grid */
  .cl .card.sm .body { padding: 14px 14px 16px; gap: 8px; }
  .cl .card.sm h3 { font-size: 17px; }
  .cl .card.sm p { font-size: 12px; }
  .cl .card.sm .chip { font-size: 10.5px; padding: 3px 7px; }
  .cl .card.sm .d { width: 14px; height: 14px; }
  .cl .card.sm .from b { font-size: 17px; }
  .cl .card.sm .view { font-size: 10px; }

  /* pagination */
  .cl .pag { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 34px 0 48px; padding-top: 22px; border-top: 1px solid var(--line-gold); }
  .cl .pinfo { font-size: 13px; color: var(--grey); }
  .cl .pn { display: flex; gap: 6px; }
  .cl .pg { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; color: var(--ink); border: 1px solid var(--line-gold-strong); border-radius: 2px; transition: all 0.15s; }
  .cl .pg:hover { border-color: var(--gold); }
  .cl .pg.on { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
  .cl .pg.dis { opacity: 0.35; }
  .cl .pg svg { width: 14px; height: 14px; }
  .cl .pg svg.flip { transform: rotate(180deg); }

  /* trust band : ink */
  .cl .trust { background: var(--ink); color: var(--ivory); border-top: 1px solid var(--line-gold-strong); border-bottom: 1px solid var(--line-gold-strong); }
  .cl .trust .container { display: grid; grid-template-columns: repeat(4, 1fr); }
  .cl .trust .t { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-left: 1px solid rgba(201,169,110,0.22); }
  .cl .trust .t:first-child { border-left: 0; padding-left: 0; }
  .cl .trust .t svg { width: 24px; height: 24px; color: var(--gold); stroke-width: 1.6; }
  .cl .trust .t b { display: block; font-size: 13px; font-weight: 600; color: var(--ivory); }
  .cl .trust .t span { display: block; font-size: 12px; color: var(--ivory-70); margin-top: 2px; }

  /* SEO copy + FAQ : cream */
  .cl .seo { background: var(--ivory); padding: 64px 0 72px; }
  .cl .seo .cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; }
  .cl .seo .h2 { margin: 10px 0 20px; }
  .cl .seo p { font-size: 15px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 16px; }
  .cl .seo p a { color: var(--gold-muted); border-bottom: 1px solid var(--line-gold-strong); }
  .cl .faq { padding-top: 6px; }
  .cl .faq .k { margin-bottom: 12px; }
  .cl .faq details { border-top: 1px solid var(--line-gold-strong); }
  .cl .faq details:last-child { border-bottom: 1px solid var(--line-gold-strong); }
  .cl .faq summary { list-style: none; cursor: pointer; font-family: var(--serif); font-size: 17px; color: var(--ink); padding: 16px 32px 16px 0; position: relative; }
  .cl .faq summary::-webkit-details-marker { display: none; }
  .cl .faq summary::after { content: '+'; position: absolute; right: 2px; top: 14px; font-family: var(--sans); font-size: 18px; color: var(--gold-muted); }
  .cl .faq details[open] summary::after { content: '\2212'; }
  .cl .faq details p { font-size: 14px; line-height: 1.65; color: var(--grey); padding: 0 32px 16px 0; margin: 0; }
  /* C1 : sidebar layout */
  .cl .layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; padding-top: 6px; }
  .cl .side { padding-top: 22px; }
  .cl .side .sh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
  .cl .clear { font-size: 11px; color: var(--gold-muted); text-decoration: underline; text-underline-offset: 3px; letter-spacing: 0.04em; }
  .cl .grp { padding: 18px 0; border-bottom: 1px solid var(--line-gold-strong); }
  .cl .gh { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 12px; display: flex; justify-content: space-between; }
  .cl .gh::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg) translateY(-2px); margin-right: 4px; }
  .cl .cb { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-deep); padding: 5px 0; cursor: pointer; }
  .cl .cb input { position: absolute; opacity: 0; width: 0; height: 0; }
  .cl .cb .box { width: 16px; height: 16px; border: 1px solid rgba(13,27,42,0.35); border-radius: 2px; background: var(--warm-white); flex-shrink: 0; position: relative; }
  .cl .cb .box.rd { border-radius: 50%; }
  .cl .cb input:checked + .box { background: var(--ink); border-color: var(--ink); }
  .cl .cb input:checked + .box::after { content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); }
  .cl .cb input:checked + .box.rd::after { left: 4px; top: 4px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--gold); transform: none; }
  .cl .cb .n { margin-left: auto; font-size: 11.5px; color: var(--grey-soft); font-style: normal; }
  .cl .cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
  .cl .cgrid .clear { grid-column: 1 / -1; margin-top: 8px; }
  .cl .cb.sw { font-size: 12.5px; }
  .cl .range { padding: 10px 6px 0; }
  .cl .track { display: block; position: relative; height: 2px; background: rgba(13,27,42,0.15); margin: 8px 0 14px; }
  .cl .fill { position: absolute; top: 0; bottom: 0; background: var(--gold); }
  .cl .knob { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--warm-white); border: 1.5px solid var(--ink); transform: translate(-50%, -50%); }
  .cl .rl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--grey); }
  .cl .grp.help { border: 1px solid var(--line-gold-strong); background: var(--ivory); padding: 18px; margin-top: 18px; }
  .cl .grp.help p { font-size: 13px; color: var(--grey); margin: 8px 0 12px; line-height: 1.5; }
  .cl .main .bar { padding-top: 22px; }

  /* K7 card : ruled spec line + colour row as a promise (card-lab.html) */
  /* K1 : ruled spec line (the P6 buy box specline, sized for a 393px card) */
  .cl .specline { display: flex; align-items: center; flex-wrap: nowrap; gap: 0 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); line-height: 1; padding: 8px 0; border-top: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); white-space: nowrap; overflow: hidden; }
  .cl .specline span { flex-shrink: 0; }
  .cl .specline b { font-weight: 600; color: var(--ink); }
  .cl .specline .dv { width: 1px; height: 12px; background: var(--gold); opacity: 0.85; }
  .cl .card p.in { color: var(--gold-muted); font-weight: 500; }
  .cl .k7 .dots { gap: 5px; margin-top: 2px; }
  .cl .k7 .d { width: 16px; height: 16px; box-shadow: 0 0 0 1px rgba(13,27,42,0.14) inset; }
  .cl .k7 .d.hov::after { content: ''; position: absolute; inset: -3px; border: 1.5px solid var(--gold); border-radius: 50%; }
  .cl .k7 .dots { align-items: center; }
  .cl .k7 .dots .more { font-size: 11.5px; font-weight: 500; color: var(--ink-deep); margin-left: 6px; letter-spacing: 0.02em; line-height: 1; display: inline-flex; align-items: center; height: 16px; }
  .cl .k7 .pic.preview { background: #fff; }
  .cl .k7 .pic.preview img { object-fit: contain; transform: scale(1.18); transform-origin: 50% 55%; background: #fff; }
  .cl .k7 .pic .ptag { position: absolute; left: 12px; bottom: 12px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: rgba(250,244,232,0.92); border: 1px solid var(--line-gold-strong); padding: 5px 9px; }

  /* K7 spec line at 295px card width (three across beside the sidebar) */
  .cl .card.k7 .body { padding: 16px 14px 18px; }
  .cl .card.k7 .specline { font-size: 9px; gap: 0 7px; letter-spacing: 0.05em; justify-content: space-between; }
  .cl .card.k7 .l2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: -2px; white-space: nowrap; font-size: 11.5px; color: var(--grey); line-height: 1.2; }
  .cl .card.k7 .l2 .out { display: inline-flex; align-items: center; }
  .cl .card.k7 .l2 .out b { font-weight: 600; color: var(--ink); margin-right: 4px; }
  .cl .card.k7 .l2 { padding-bottom: 8px; border-bottom: 1px solid var(--line-gold); }
  .cl .card.k7 .l2 .dep { font-size: 9px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--grey); line-height: 1; }
  .cl .card.k7 .l2 .dep b { font-weight: 600; color: var(--ink); }
  .cl .card.k7 .l2 .out .bdv { display: inline-block; width: 1px; height: 12px; background: var(--gold); opacity: 0.85; margin: 0 8px; flex-shrink: 0; }
  .cl .card.k7 .dots .dv { width: 1px; height: 12px; background: var(--gold); opacity: 0.85; margin-left: 5px; flex-shrink: 0; }
  .cl .card.k7 .dots .more { font-size: 11.5px; font-weight: 500; color: var(--ink-deep); letter-spacing: 0.02em; line-height: 1; display: inline-flex; align-items: center; height: 16px; }
  .cl .card.k7 .dots .dv + .more { margin-left: 4px; }


  /* colours band : white */
  .cl .colours { background: #fff; padding: 32px 0 34px; border-top: 1px solid var(--line-gold); text-align: center; }
  .cl .colours .h2 { font-size: 32px; margin: 6px 0 8px; }
  .cl .colours .line { font-size: 14.5px; line-height: 1.6; color: var(--grey); max-width: 720px; margin: 0 auto; }
  .cl .swrow { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px 6px; margin: 18px 0 20px; }
  .cl .swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
  .cl .swatch .sw { width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10), 0 6px 14px -8px rgba(13,27,42,0.5); }
  .cl .swatch .n { font-size: 10px; line-height: 1.25; color: var(--grey); white-space: nowrap; }
  .cl .swatch .n b { display: block; font-weight: 600; font-size: 10px; color: var(--gold-muted); letter-spacing: 0.04em; }
  .cl .colours .acts { display: flex; justify-content: center; gap: 12px; }
  .foot-note { background: var(--ink-darkest); color: var(--ivory-55); font-size: 11px; letter-spacing: 0.04em; text-align: center; padding: 12px var(--pad-x); border-top: 1px solid rgba(201,169,110,0.16); }

  /* =====================================================================
     RESPONSIVE : phone + tablet only. Nothing above 1280px changes (the hamburger arrives at 1280, the rest at 1024).
     The mobile-only elements (hamburger, header drawer, scrim, Filter
     button, drawer close + Apply foot) are display:none at desktop so the
     1440 render is untouched ; the media queries switch them on.
     ===================================================================== */
  .ham, .scrim, .hdrawer, .fbtn, .fclose, .ffoot { display: none; }

  /* ---------- HAMBURGER : 1280px and below ----------
     Cast Iron's switch point, measured headless on castironradiatorcompany.co.uk 24 Sep : full menu and header
     search at 1281px, hamburger with the search moved into the slide-out at 1280px and below
     (cir-theme main.css, "HAMBURGER TRIGGER", max-width 1280px). Column switched at 1024, so from 1025 to 1280 it
     still showed the full menu and the search icon. Everything the hamburger needs lives here ; the rest of the
     tablet layout (shorter bar, filter drawer, grids) still starts at 1024. */
  @media (max-width: 1280px) {
    body.drawer-open { overflow: hidden; }

    /* header : menu hidden, hamburger on the right */
    .nav-menu { display: none; }
    .ham { display: inline-flex; }
    .nav-wrap.search-open .search-box { max-width: none; }
    /* Search moves INTO the menu drawer once the hamburger shows, as Cast Iron does (its header search icon goes when its
       hamburger arrives and the search sits at the top of the slide-out). 24 Sep. */
    .search-toggle, .nav-wrap .search-box { display: none !important; }

    /* scrim : shared by both drawers */
    .scrim { display: block; position: fixed; inset: 0; background: rgba(8, 17, 28, 0.62); z-index: 180; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; }
    body.drawer-open .scrim { opacity: 1; visibility: visible; }

    /* header drawer : ink, from the right */
    .hdrawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); background: var(--ink); color: var(--ivory); z-index: 200; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; border-left: 1px solid var(--line-gold-strong); box-shadow: -24px 0 48px -24px rgba(8, 17, 28, 0.6); }
    body.menu-open .hdrawer { transform: translateX(0); }
    .hd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; height: 72px; flex-shrink: 0; border-bottom: 1px solid var(--gold); }
    .hd-top .wordmark { font-size: 15px; }
    .hd-close { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ivory-80); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; padding: 8px 0; }
    .hd-close:hover { color: var(--gold); }
    /* Drawer search : Cast Iron's placement (top of the panel, under its header, icon then field), Column's colours. */
    .hd-search { position: relative; padding: 16px 20px; border-bottom: 1px solid rgba(201, 169, 110, 0.22); flex-shrink: 0; }
    .hd-search svg.ic { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gold); pointer-events: none; }
    .hd-search input { width: 100%; height: 46px; background: rgba(250,244,232,0.06); border: 1px solid rgba(201,169,110,0.45); color: var(--ivory); font-family: 'Inter', sans-serif; font-size: 16px; padding: 0 14px 0 42px; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; }
    .hd-search input::placeholder { color: rgba(250,244,232,0.45); }
    .hd-search input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,0.18); }
    .hd-search input::-webkit-search-cancel-button, .hd-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
    .hd-acc { flex: 1; }
    .hd-acc details { border-bottom: 1px solid rgba(201, 169, 110, 0.22); }
    .hd-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory); }
    .hd-acc summary::-webkit-details-marker { display: none; }
    .hd-acc summary::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg) translateY(-2px); transition: transform 0.2s ease; flex-shrink: 0; margin-right: 4px; }
    .hd-acc details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
    .hd-acc details[open] summary { color: var(--gold); }
    .hd-lists { padding: 0 20px 20px; display: grid; gap: 18px; }
    .hd-lists h5 { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 8px; }
    .hd-lists ul { list-style: none; }
    .hd-lists li { margin-bottom: 2px; }
    .hd-lists li a { display: block; padding: 7px 0; font-family: var(--sans); font-size: 15px; color: var(--ivory-80); text-decoration: none; }
    .hd-lists li a:hover { color: var(--gold); }
    .hd-foot { padding: 22px 20px 28px; border-top: 1px solid var(--line-gold-strong); background: var(--ink-darkest); flex-shrink: 0; }
    .hd-foot .k { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 10px; }
    .hd-phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 24px; color: var(--gold); text-decoration: none; letter-spacing: 0.04em; }
    .hd-phone svg { color: var(--gold); }
    .hd-mail { display: block; margin-top: 8px; font-family: var(--sans); font-size: 12.5px; color: var(--ivory-70); text-decoration: none; overflow-wrap: anywhere; }
  }

  /* utility bar, 1025px to 1199px : three claims, the email, BTU Calculator and My Account need about 1,044px, so below
     1200px the email ran into the last claim (0px apart at 1100). The email goes here, as it already does at 1024px and
     below (it stays in the support band, the footer and the menu drawer). With no phone, nothing then sits left of the
     links, so their rule goes too. (25 Sep) */
  @media (max-width: 1199px) {
    .util-right a[href^="mailto"] { display: none; }
    .util-right > a[href^="mailto"]:first-child + .util-links { padding-left: 0; border-left: 0; }
  }

  /* ---------- TABLET : 1024px and below ---------- */
  @media (max-width: 1024px) {
    :root { --pad-x: 24px; }

    /* utility bar : drop the email, keep the promises and the phone */
    .util-right a[href^="mailto"] { display: none; }

    /* header : shorter bar (the hamburger itself arrives at 1280px, above) */
    .nav-wrap .main { height: 72px; }
    .nav-wrap .main > .container { gap: 20px; }
    .icons { gap: 18px; }

    /* hero */
    .cl .hero { padding: 20px 0 24px; }
    .cl h1.title { font-size: 38px; }
    .cl .lede { max-width: none; }

    /* filter sidebar : out of the flow, becomes a drawer from the left */
    .cl .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .cl .side { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; width: min(360px, 88vw); background: var(--warm-white); z-index: 200; padding: 0; transform: translateX(-100%); transition: transform 0.3s ease; border-right: 1px solid var(--line-gold-strong); box-shadow: 24px 0 48px -24px rgba(8, 17, 28, 0.5); }
    body.filter-open .cl .side { transform: translateX(0); }
    .cl .side .sh { flex-shrink: 0; align-items: center; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--ink); }
    .cl .side .sh .clear { margin-left: auto; margin-right: 18px; }
    .fclose { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; background: none; border: 0; color: var(--ink); cursor: pointer; }
    .cl .side .grp { flex-shrink: 0; margin: 0 20px; }
    .cl .side .grp.help { margin: 18px 20px; }
    .cl .side .grp:nth-last-child(2) { margin-bottom: auto; }
    .cl .side { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .cl .side .sh { position: sticky; top: 0; background: var(--warm-white); z-index: 1; }
    .ffoot { display: block; position: sticky; bottom: 0; flex-shrink: 0; padding: 14px 20px; border-top: 1px solid var(--line-gold-strong); background: var(--ivory); }
    .ffoot .btn { width: 100%; }

    /* count + sort row : Filter button on the left, Sort on the right, count beneath */
    .cl .main .bar { flex-wrap: wrap; gap: 12px 16px; padding-top: 18px; }
    .fbtn { display: inline-flex; order: 1; align-items: center; gap: 8px; height: 44px; padding: 0 16px; font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: var(--warm-white); border: 1px solid var(--ink); border-radius: 2px; cursor: pointer; white-space: nowrap; }
    .fbtn .fn { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--gold); font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
    .fbtn .fn:empty, .fbtn .fn.zero { display: none; }
    .cl .sortl { order: 2; margin-left: auto; }
    .cl .count { order: 3; flex-basis: 100%; }
    .cl .bar .active { order: 4; flex-basis: 100%; flex-wrap: wrap; }
    .cl .bar .active:empty { display: none; }

    /* grid : two across */
    .cl .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .cl .card.k7 .specline { font-size: 10px; letter-spacing: 0.06em; }
    .cl .card.k7 .l2 .dep { font-size: 10px; }

    /* colours band */
    .cl .swrow { grid-template-columns: repeat(6, 1fr); gap: 14px 8px; }

    /* trust band : two across, ruled top not left */
    .cl .trust .container { grid-template-columns: repeat(2, 1fr); }
    .cl .trust .t { border-left: 0; padding: 20px 0; border-top: 1px solid rgba(201,169,110,0.22); }
    .cl .trust .t:nth-child(-n+2) { border-top: 0; }
    .cl .trust .t:nth-child(even) { padding-left: 24px; border-left: 1px solid rgba(201,169,110,0.22); }

    /* SEO copy + FAQ stack */
    .cl .seo { padding: 52px 0 60px; }
    .cl .seo .cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }

    /* support + footer */
    .support h2 { font-size: 32px; }
    .footer { padding-top: 60px; }
    .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding-bottom: 44px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand p { max-width: 460px; }
    .footer-bottom { flex-wrap: wrap; gap: 14px 24px; }
    .footer-bottom-left { flex-wrap: wrap; gap: 10px 20px; }
  }

  /* utility bar links : off at 768px and below, where Cast Iron hides its util-bar right-hand side too. Both live in the
     menu drawer and the footer, and beside three claims they would crowd. (25 Sep) */
  @media (max-width: 768px) {
    .util-links { display: none; }
    /* cir-btu-showroom Save Room row : the plugin stacks it at 768px and below but keeps the field's flex: 1, whose zero
       basis in a column crushed it to 22px tall. Back to its own 48px. Two classes, so it wins whatever the load order ;
       the plugin's CSS is untouched. (29 Sep) */
    :is(.cir-btu-overlay, .cir-btu-inline) .cir-btu-save-input { flex: 0 0 auto; }
  }

  /* ---------- PHONE : 640px and below ---------- */
  @media (max-width: 640px) {
    :root { --pad-x: 16px; }

    /* utility bar : one promise and the phone number */
    .util-bar { font-size: 10px; letter-spacing: 0.06em; }
    .util-left { gap: 0; }
    .util-left > :nth-child(n+2) { display: none; }

    /* header */
    .nav-wrap .main { height: 64px; }
    .wordmark { font-size: 16px; letter-spacing: 0.08em; }
    .wordmark small { font-size: 8px; letter-spacing: 0.24em; margin-top: 3px; }
    .icons { gap: 16px; }
    .nav-wrap.search-open .wordmark { display: none; }
    /* iOS zooms the page when a focused field is under 16px. Same threshold fix as Cast Iron's cir-smart-search. */
    .search-box input { font-size: 16px; }

    /* hero */
    .cl .crumb { margin-bottom: 16px; flex-wrap: wrap; row-gap: 4px; }
    .cl h1.title { font-size: 32px; margin: 8px 0 10px; }
    .cl .lede { font-size: 14.5px; }

    /* count + sort row : Filter and Sort share the line, Sort select shrinks */
    .cl .sortl .sel { min-width: 0; width: 158px; }
    .cl .sortl .sel select { font-size: 13px; padding: 0 32px 0 12px; }
    .cl .count { font-size: 13px; white-space: normal; }

    /* grid : one across, the W2 card at 358px */
    .cl .grid.three { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .cl .card.k7 .body { padding: 16px 16px 18px; }
    .cl .card.k7 .specline { font-size: 10.5px; letter-spacing: 0.08em; gap: 0 8px; }
    .cl .card.k7 .l2 .dep { font-size: 10.5px; }
    .cl .card.k7 .l2 { font-size: 12px; }
    .cl .k7 .d { width: 16px; height: 16px; }
    .cl .card.k7 .dots { flex-wrap: nowrap; overflow: hidden; }
    .cl .card.k7 .dots .more { white-space: nowrap; }

    /* pagination : centred, Show 24 beneath */
    .cl .pag { flex-direction: column; align-items: center; gap: 16px; margin: 28px 0 40px; }
    .cl .pn { order: 1; justify-content: center; flex-wrap: wrap; }
    .cl .pinfo { order: 2; }
    .cl .pag .btn { order: 3; width: 100%; }

    /* colours band : swatches wrap, buttons stack full width */
    .cl .colours { padding: 28px 0 30px; }
    .cl .colours .h2 { font-size: 26px; }
    .cl .colours .line { font-size: 13.5px; }
    .cl .swrow { grid-template-columns: repeat(4, 1fr); gap: 14px 6px; margin: 16px 0 18px; }
    .cl .swatch .sw { width: 32px; height: 32px; }
    .cl .swatch .n { white-space: normal; }
    .cl .colours .acts { flex-direction: column; gap: 10px; }
    .cl .colours .acts .btn { width: 100%; }

    /* trust band : one across */
    .cl .trust .container { grid-template-columns: minmax(0, 1fr); }
    .cl .trust .t { padding: 16px 0; border-top: 1px solid rgba(201,169,110,0.22); }
    .cl .trust .t:nth-child(-n+2) { border-top: 1px solid rgba(201,169,110,0.22); }
    .cl .trust .t:first-child { border-top: 0; }
    .cl .trust .t:nth-child(even) { padding-left: 0; border-left: 0; }

    /* SEO + FAQ */
    .cl .seo { padding: 44px 0 48px; }
    .cl .h2 { font-size: 28px; }
    .cl .faq summary { font-size: 16px; }

    /* support + footer : one column */
    .support { padding: 48px 0; }
    .support h2 { font-size: 28px; }
    .support .phone-link { font-size: 26px; }
    .footer { padding-top: 48px; }
    .footer-top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 36px; }
    .footer-contact a, .footer-contact span { overflow-wrap: anywhere; }
    .footer-bottom { flex-direction: column; align-items: flex-start; padding: 22px 0 26px; }

    /* drawers fill most of the phone */
    .hdrawer { width: min(360px, 88vw); }
    .cl .side { width: min(340px, 88vw); }
  }

  /* Phone header with FOUR icons (search, My Project, basket, menu). Measured 16 Sep in mobile contexts : the 16px
   * wordmark ends at x=262. Without the heart the icon row began at 276 at 390 (14px clear), 261 at 375 (touching) and
   * 206 at 320 (already overlapping). The heart moves the row 38px left : -24px at 390, 0 at 414, so the wordmark ran
   * under the search icon. The wordmark steps down and the icon gap tightens ; nothing is hidden. */
  @media (max-width: 480px) {
    .nav-wrap .icons { gap: 12px; }
    .nav-wrap .wordmark { font-size: 13px; letter-spacing: 0.04em; }
    .nav-wrap .wordmark small { font-size: 7px; letter-spacing: 0.18em; }
  }
  @media (max-width: 374px) {
    .nav-wrap .icons { gap: 10px; }
    .nav-wrap .wordmark { font-size: 11.5px; letter-spacing: 0.02em; }
    .nav-wrap .wordmark small { font-size: 6.5px; letter-spacing: 0.14em; }
  }