@media(max-width:1100px){
  .bl-site .bl-nav{gap:20px;font-size:12px}
  .bl-site .bl-nav .bl-nav-contact{margin-left:0;gap:15px}
  .bl-site .bl-page-heading{gap:35px}
  .bl-site .bl-page-heading>p{max-width:250px;font-size:13px}
  .bl-site .bl-product-overview,.bl-site .bl-specifications{gap:6%}
  .bl-site .bl-product-card-content :is(h2,h3){font-size:28px}
  .bl-site .bl-contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:32px}
  .bl-site .bl-contact-prepare ol{grid-template-columns:1fr}
}
@media(max-width:800px){
  .bl-site .bl-page-heading{align-items:flex-start;flex-direction:column;gap:30px;padding-top:25px}
  .bl-site .bl-page-heading>p{max-width:500px;font-size:14px}
  .bl-site .bl-page-heading h1{font-size:83px}
  .bl-site .bl-page-hero{padding-bottom:48px}
  .bl-site .bl-product-overview,.bl-site .bl-specifications{grid-template-columns:1fr;gap:35px;padding-block:55px}
  .bl-site .bl-news-grid{gap:25px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-site .bl-news-card :is(h2,h3){font-size:31px}
  .bl-site .bl-contact-grid{grid-template-columns:1fr;grid-template-areas:"intro" "form" "prepare";grid-template-rows:auto;row-gap:36px}
  .bl-site .bl-contact-prepare ol{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .bl-site .bl-nav>a{font-size:34px}
  .bl-site .bl-nav .bl-nav-contact{font-size:13px}
  .bl-site .bl-breadcrumbs{padding-block:8px;font-size:13px}
  .bl-site .bl-breadcrumbs ol{flex-wrap:nowrap;gap:0 8px;align-items:center}
  .bl-site .bl-breadcrumbs li{display:flex;align-items:center;flex:none;min-height:44px;white-space:nowrap}
  /* One line: the current page gives way first, cut with an ellipsis. */
  .bl-site .bl-breadcrumbs li:last-child{flex:0 1 auto;min-width:0}
  .bl-site .bl-breadcrumbs li:last-child>*{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .bl-site .bl-breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;margin-inline:-6px}
  .bl-site .bl-breadcrumbs li+li::before{margin-right:8px}
  .bl-site .bl-page-heading{padding-top:24px;gap:25px}
  .bl-site .bl-page-heading h1{font-size:var(--m-h1,clamp(48px,14vw,60px));letter-spacing:-.8px;overflow-wrap:anywhere}
  .bl-site .bl-page-heading .bl-eyebrow{font-size:12px;margin-bottom:22px}
  .bl-site .bl-page-heading>p{font-size:14px;line-height:1.85}
  .bl-site .bl-page-hero{padding-bottom:38px}
  .bl-site .bl-category-nav{gap:20px}
  .bl-site .bl-category-nav>a{font-size:13px;padding-block:15px;white-space:nowrap}
  .bl-site .bl-catalog-tools{gap:14px;padding-block:22px 26px}
  .bl-site .bl-catalog-status{width:100%;margin-left:0;min-height:0;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
  .bl-site .bl-catalog-clear{margin-left:auto}
  .bl-site .bl-catalog-filters{flex-direction:column;gap:18px}
  .bl-site .bl-product-card-content :is(h2,h3){font-size:var(--m-h3,28px)}
  .bl-site .bl-product-card-content dl{gap:45px}
  .bl-site .bl-catalog{padding-bottom:var(--m-sec,56px)}
  .bl-site .bl-page-cta{align-items:stretch;flex-direction:column;padding-block:var(--m-sec,56px)}
  .bl-site .bl-page-cta h2{font-size:var(--m-h2,clamp(38px,11vw,46px))}
  .bl-site .bl-product-display{font-size:var(--m-h2,clamp(38px,11vw,46px))}
  .bl-site .bl-prose{font-size:14px}
  .bl-site .bl-prose .bl-lead{font-size:17px}
  .bl-site .bl-product-main-image>img{padding:15px}
  .bl-site .bl-product-intro h1>span{font-size:25px}
  .bl-site .bl-product-excerpt{font-size:14px}
  .bl-site .bl-product-section-nav{gap:25px;min-height:62px;font-size:13px}
  .bl-site .bl-product-overview,.bl-site .bl-specifications{padding-block:var(--m-sec,56px)}
  .bl-site .bl-related{padding-block:var(--m-sec,56px)}
  .bl-site .bl-related-guides{padding-block:var(--m-sec,56px)}
  .bl-site .bl-small-section-heading{flex-direction:column;align-items:flex-start;gap:22px}
  .bl-site .bl-small-section-heading h2{font-size:var(--m-h2,clamp(38px,11vw,46px))}
  .bl-site .bl-news-grid{grid-template-columns:1fr;gap:40px}
  .bl-site .bl-news-card :is(h2,h3){font-size:var(--m-h3,28px)}
  .bl-site .bl-home-journal{padding-block:var(--m-sec,56px)}
  .bl-site .bl-contact-main{padding-bottom:var(--m-sec,56px)}
  .bl-site .bl-contact-intro h1{font-size:var(--m-h1,clamp(48px,14vw,60px))}
  .bl-site .bl-contact-channels b{font-size:24px}
  .bl-site .bl-contact-prepare ol{grid-template-columns:1fr}
  .bl-site .bl-not-found{padding-block:70px}
  .bl-site .bl-not-found h1{font-size:var(--m-h1,clamp(48px,14vw,60px));font-weight:700;letter-spacing:-.8px;line-height:.9;margin:22px 0 24px}
  .bl-site .bl-not-found>div{flex-direction:column;align-items:flex-start}
  .bl-site .bl-privacy-content{padding:0 var(--gutter) var(--m-sec,56px)}
  /* Contact channels: icon and arrow line up with the large number, and the small label keeps to one line where it can. */
  .bl-site .bl-contact-channels a{align-items:end;column-gap:14px}
  .bl-site .bl-contact-channels small{font-size:13px;line-height:1.4;text-wrap:balance}
}
/* Phones held upright: the four points swipe in one row (pages.css), so no column template here. */
@media(max-width:600px) and (orientation:portrait){
  .bl-site .bl-contact-grid{row-gap:28px}
  .bl-site .bl-contact-prepare ol{grid-template-columns:none}
}
/* Phones turned sideways: two stories fill two columns instead of two thirds of three. */
@media (max-width:1000px) and (max-height:500px){
  .bl-site .bl-news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
}
/* The section bar on long pages pins under the header, whatever height the header has at this width. */
@media(max-width:800px){
  .bl-site .bl-section-nav-live{top:var(--header-height)}
  .bl-site:has(.bl-section-nav-live) section[id]{scroll-margin-top:calc(var(--header-height) + var(--section-nav-height))}
}

/* ---- Catalogue / detail / side bar responsive ---- */
@media(max-width:1500px){.bl-site .bl-catalog .bl-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1150px){
  .bl-site .bl-product-hero{grid-template-columns:1fr;gap:36px}
  .bl-site .bl-product-key-specs dd{font-size:34px}
}
@media(max-width:800px){
  .bl-site .bl-catalog .bl-product-grid,.bl-site .bl-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .bl-site .bl-product-gallery{grid-template-columns:1fr}
  .bl-site .bl-product-main-image{grid-column:1;aspect-ratio:1.15}
  .bl-site .bl-gallery-thumbs{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;align-self:auto;width:auto;contain:none;overflow:visible}
  .bl-site .bl-gallery-thumbs button{width:72px}
  .bl-site .bl-product-intro h1{font-size:84px}
  .bl-site .bl-product-section-nav{position:static}
  .bl-site .bl-compare{padding-top:56px}
}
/* The contact rail becomes a bar along the foot of the screen: up to 800px, and on phones turned sideways, where the
   rail would stand over the page. Keep this query in step with quick.js. */
@media(max-width:800px),(max-width:1000px) and (max-height:500px){
  .bl-site{--bl-bar-height:58px}
  .bl-site .bl-side-contact{top:auto;bottom:0;left:0;right:0;height:calc(var(--bl-bar-height) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);transform:none;flex-direction:row;gap:0;background:var(--ink);border-top:1px solid #ffffff1f}
  .bl-site .bl-side-contact a{flex:1;width:auto;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 4px;border:0;border-right:1px solid #ffffff1f;box-shadow:none;font-size:12px;line-height:1.2;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
  .bl-site .bl-side-contact a:last-child{border-right:0}
  .bl-site .bl-side-contact svg{width:20px;height:20px}
  .bl-site .bl-side-contact span,.bl-site .bl-side-contact a:is(:hover,:focus-visible) span{position:static;transform:none;opacity:1;background:none;padding:0;font-size:12px;line-height:1.2;pointer-events:auto}
  .bl-site .bl-side-contact a:hover{transform:none}
  /* Three cells, Enquiry the widest and always blue; Top leaves the bar for a small round button above its right end,
     shown once the page has scrolled a screen or so (main.js marks the root), and out of the way of the quick enquiry. */
  .bl-site .bl-side-contact .bl-side-wa svg{color:#25d366}
  .bl-site .bl-side-contact .bl-side-enquiry{flex:1.4;flex-direction:row;gap:9px;background:var(--blue);color:#fff;border-right:0;font-size:13px}
  .bl-site .bl-side-contact .bl-side-enquiry span{font-size:13px}
  .bl-quick-on .bl-site .bl-side-contact .bl-side-enquiry{background:#1746ad}
  .bl-site .bl-side-contact .bl-side-top{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(var(--bl-bar-height) + env(safe-area-inset-bottom,0px) + 14px);flex:none;width:44px;height:44px;padding:0;border:1px solid #ffffff2e;border-radius:50%;background:#081c2bdb;color:#fff;box-shadow:0 6px 20px #081c2b40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,visibility 0s linear .25s}
  .bl-site .bl-side-contact a.bl-side-top span{display:none}
  .bl-past-fold .bl-site .bl-side-contact .bl-side-top{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  /* It also steps aside while the menu or the quick enquiry is open, or while it would cover a control (main.js). */
  :is(.bl-quick-on,.bl-menu-on,.bl-top-aside,.bl-typing) .bl-site .bl-side-contact .bl-side-top{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
  /* While a field of the page has focus the keyboard is up: the bar steps aside too, so it never sits over the field being
     typed in or the button that sends it (where the keyboard shrinks the screen), and comes back when typing ends (main.js). */
  .bl-typing .bl-site .bl-side-contact{visibility:hidden}
  /* At the foot of the page the Top button settles beside Privacy rather than over it. */
  .bl-site .bl-footer-bottom{padding-right:76px}
  .bl-site .bl-footer{padding-bottom:calc(var(--bl-bar-height) + env(safe-area-inset-bottom,0px))}
  .bl-site .bl-footer-top>.bl-circle-button{display:none}
}
/* A tap leaves :hover behind on touch screens: the rail's hover colours would stick to the last button pressed. */
@media(hover:none){
  .bl-site .bl-side-contact a:not(.bl-side-enquiry):hover{background:var(--ink);color:#e6edf2}
  .bl-site .bl-side-contact a:active{background:#173346}
  .bl-site .bl-side-contact .bl-side-enquiry:active{background:#1746ad}
}
@media(max-width:600px){
  .bl-site .bl-catalog .bl-product-grid,.bl-site .bl-product-grid{grid-template-columns:1fr;gap:32px}
  .bl-site .bl-product-card-content dl{gap:8px}
  .bl-site .bl-product-intro h1{font-size:var(--m-h1,clamp(48px,14vw,60px))}
  .bl-site .bl-product-key-specs{gap:10px}
  .bl-site .bl-product-key-specs dd{font-size:26px}
  .bl-site .bl-product-actions{gap:16px}
}


@media(max-width:900px){
  .bl-site .bl-contact-visit-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:600px){
  /* The foot line: the copyright on its own row, then the links side by side from the left edge, clear of Top and the contact bar. */
  .bl-site .bl-footer-bottom{padding-right:var(--gutter);column-gap:24px}
  .bl-site .bl-footer-bottom>span:first-child{flex:0 0 100%;text-wrap:balance}
  .bl-site .bl-footer-bottom>a{margin-left:0;padding-left:0}
  .bl-site .bl-contact-visit{padding-block:var(--m-sec,56px)}
  .bl-site .bl-contact-visit-actions{align-items:flex-start;flex-direction:column}
  .bl-site .bl-contact-visit-business{align-items:flex-start;flex-direction:column}
}
/* Phones (and phones sideways): the message box grows with a prefilled message instead of cutting its last line, from
   its usual three lines up to 240px (main.js does the same where field-sizing is not supported). */
@media(max-width:800px),(max-width:1000px) and (max-height:500px){
  .bl-site .bl-inquiry-form textarea{field-sizing:content;min-height:calc(4.5em + 27px);max-height:240px}
  .bl-site .bl-contact-form-panel .bl-inquiry-form textarea{height:auto}
}
/* Phones held upright: three lines of message at a slightly tighter line, the box no taller than its three lines. */
@media(max-width:600px) and (orientation:portrait){
  .bl-site .bl-inquiry-form textarea{min-height:calc(4.5em + 20px);padding-block:10px;line-height:1.5}
  .bl-site .bl-contact-form-panel .bl-inquiry-form textarea{padding-block:10px}
  /* The note and button follow the message a little closer than one step follows another, and the box keeps no drag
     handle (it grows with its text: field-sizing here, main.js elsewhere). The quick panel keeps its own. */
  .bl-site .bl-inquiry-form:not(.bl-quick-form *) fieldset:last-of-type{margin-bottom:22px}
  .bl-site .bl-inquiry-form:not(.bl-quick-form *) textarea{vertical-align:top;resize:none}
  /* Product pages: the heading block above the form packs closer, the two direct lines side by side (label over link,
     each link keeping its 44px target), and the equipment chips swipe out to the edge of the white panel. */
  .bl-site .bl-product-enquiry .bl-product-enquiry-aside{gap:12px}
  .bl-site .bl-product-enquiry .bl-product-enquiry-aside>p:not(.bl-product-display){line-height:1.7}
  .bl-site .bl-product-enquiry .bl-product-enquiry-direct{grid-template-columns:repeat(2,minmax(0,max-content));gap:0 28px;margin-top:4px}
  .bl-site .bl-product-enquiry .bl-product-enquiry-direct li{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:48px;min-width:0}
  .bl-site .bl-product-enquiry .bl-product-enquiry-direct span{min-width:0}
  .bl-site .bl-product-enquiry .bl-product-enquiry-direct a{overflow-wrap:anywhere}
  .bl-site .bl-product-enquiry-form .bl-inquiry-form{--bl-form-bleed:16px}
}

/* With the WordPress toolbar showing: on phones WordPress lets the toolbar scroll away with the page (absolute there,
   not fixed), so the header pins to the very top instead of hanging 46px below an empty strip (pages.css sets 46px). */
@media(max-width:600px){.bl-site.bl-wp-admin-bar .bl-header{top:0}}