/* BLDC solar water pumps — the page layer for page-bldc-solar-water-pumps.php.
 *
 * One sheet for one template. The twelve modules of that page are the only place
 * on the site that prints the .bldc-* classes, so they are kept out of pages.css,
 * sections.css and product-line.css: each of those is read by pages that do not
 * print this markup, and a change made for this page must not be a change to
 * them.
 *
 * What is written here is only what this page adds on top of the shared blocks it
 * is built from, and those blocks are left alone for every other page:
 * .container, .section (and --pale), .section__head, .panel, .lift, .card-grid
 * (--2), .media-frame (--4x3), .btn (--outline), .compare and .compare__wrap,
 * .icon-grid, .field, .field__hint, .fields, .actions, .product-note, .eyebrow,
 * .text-link, .feedback, .diagram and the reveal states in motion.css. Where one
 * of them has to be adjusted for this page, the adjustment is a compound
 * selector (.card-grid.bldc-families), so it cannot reach another page.
 *
 * Every colour, space, radius, shadow and duration comes from tokens.css:
 * --color-* for the ground, the text and the interaction states, --space-* for
 * the rhythm, --radius-* and --shadow-* for the boxes, and --transition-fast /
 * --transition-mid for the two speeds the site allows. --ill-* is not needed
 * here: the drawings this page prints are painted by illustrations.css.
 *
 * It is loaded as a page sheet — after style.css and after the motion, sections,
 * illustrations and nav layers — which is what lets a single-class rule sit on
 * top of a shared block while the compound selectors stay scoped to this page.
 */

/* ------------------------------------------------------------ Page root -- */
/* The root of this page and the scope every rule below hangs from. It adds no
   layout of its own.
   [hidden] is restated for a child whose class sets a display: the series cards,
   the accordions, the model rows, the empty state and the sticky action are
   shown and hidden by the page's script, and .panel{display:flex} would
   otherwise outrank the browser's own [hidden] rule. The overflow is clipped on
   this axis alone, as a last guard against a sideways scroll bar on a phone: the
   model table scrolls inside .compare__wrap, which is its own scroller. */
.bldc-page{overflow-x:clip}
.bldc-page [hidden]{display:none}

/* A <button> does not inherit the page's face the way a link does, so it is set
   here once for every button of this page: the filter switch, the card's second
   action and the filter reset. */
.bldc-page button{font-family:inherit}

/* -------------------------------------------------------- Small helpers -- */
/* Present for a screen reader, off the visual page: the same clip pattern the
   shared .visually-hidden in pages.css uses. */
.bldc-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The line that says a picture is a drawing rather than a photograph: above the
   drawing of the system, and above the drawing in the summary. */
.bldc-illustration-note{margin:0 0 var(--space-1);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}

/* ------------------------------------------------- 01 · Opening figures -- */
/* The three figures of the models this page shows, in the strip under the hero.
   Each is a label that names the models it covers with the figure under it, so
   the strip is read as one line of figures rather than as three claims about the
   line: the same three are stated again in module 04, and the two are one reading
   of the same records. The accent hairline on the left of a cell is what makes
   the row read as figures rather than as a paragraph. Three columns on a desk,
   three rows on a phone. */
.bldc-open__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3) clamp(20px,2.6vw,36px);margin:0;padding:0;list-style:none}
.bldc-open__item{display:grid;gap:4px;padding-left:var(--space-3);border-left:2px solid var(--color-accent)}
.bldc-open__icon{display:flex;color:var(--color-accent)}
.bldc-open__label{font-size:13px;font-weight:600;line-height:1.4;color:var(--color-muted)}
.bldc-open__value{font-size:clamp(20px,2.4vw,26px);font-weight:700;line-height:1.15;letter-spacing:-.01em;color:var(--color-heading);font-variant-numeric:tabular-nums}
/* The shared .product-note under the strip: the two limits are not one operating
   point, and that is what this strip must not be misread about. */
.product-note.bldc-open__note{margin-top:var(--space-3)}

/* ------------------------------------------------------- 02 · Families -- */
/* Four families as two pairs: a row of three and one alone would make the last
   family read as an afterthought. The shared .card-grid--2 already collapses to
   one column on a narrow screen. */
.card-grid.bldc-families{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The group the family belongs to (Submersible / Surface), read as a pill so it
   is never mistaken for the card's heading. */
.bldc-family__tag{align-self:flex-start;margin:0 0 var(--space-2);padding:4px 11px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-accent-pale);color:var(--color-accent);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* The series codes this family holds. A code is what a buyer writes in an
   enquiry, so the digits are set at a fixed width (tabular-nums) and one code
   does not reflow as it is compared with the next. */
.bldc-chips{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:var(--space-2) 0 0;padding:0;list-style:none}
.bldc-chips__item{padding:5px 10px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-pale);color:var(--color-navy);font-size:13px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* -------------------------------------------------- 03 · Water sources -- */
/* Four sources, again as two pairs, so the section reads like the one above it. */
.card-grid.bldc-sources{grid-template-columns:repeat(2,minmax(0,1fr))}

/* The card's own picture block. The .panel already carries the border the card
   is read by, so the frame inside it keeps only the pale ground the site's
   photographs sit on. */
.bldc-source .bldc-source__media{margin:0 0 var(--space-3);border:0;background:var(--color-pale)}
/* These are photographs of a place rather than cut-outs of a product, so the
   picture fills its frame. */
.bldc-source__media .bldc-source__photo{object-fit:cover}

/* The source a visitor has not decided on yet has no photograph: the empty tile
   keeps the card's shape, so the row stays a row of equal pictures. */
.bldc-source__icon{display:flex;align-items:center;justify-content:center;margin:0 0 var(--space-3);aspect-ratio:4/3;border-radius:var(--radius-lg);background:var(--color-pale);color:var(--color-accent)}

/* Where the enquiry is taken from here: the one line of the card a buyer acts
   on, so it is boxed rather than left as another paragraph. */
.bldc-source__route{margin:var(--space-2) 0 0;padding:var(--space-2);border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-pale);font-size:14px;color:var(--color-navy)}
.bldc-source__route-label{display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}

/* ------------------------------------------------- 04 · Range figures -- */
/* The same three figures of the models this page shows, read as one strip: the
   hairline between the cells is the strip's own ground showing through a 1px
   gap, the way the shared .stat-strip is built. Three columns on a desk, three
   rows on a phone. */
.bldc-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-line);overflow:hidden}
.bldc-range__item{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3) clamp(18px,2.4vw,28px);background:var(--color-surface)}
.bldc-range__icon{display:flex;align-items:center;justify-content:center;align-self:flex-start;width:44px;height:44px;border-radius:var(--radius-md);background:var(--color-accent-pale);color:var(--color-accent)}
.bldc-range__figure{font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--color-heading)}
/* "Up to" and "300 W–" qualify the figure rather than being it, so they are set
   above the number at the size a qualifier is read at. */
.bldc-range__from{display:block;font-size:13px;font-weight:600;letter-spacing:0;color:var(--color-muted)}
/* The counted number: fixed-width digits, so the unit beside it does not travel
   while the page counts it up. */
.bldc-range__to{font-variant-numeric:tabular-nums}
.bldc-range__label{font-size:14px;font-weight:600;color:var(--color-navy)}
/* The shared .product-note under the strip, given its own room: the flow limit
   and the head limit are not one operating point, and that is what this module
   must not be misread about. */
.product-note.bldc-range__note{margin-top:var(--space-4)}

/* ------------------------------------------------------- 05 · Series -- */
/* The switch above the grid. It is a group of buttons rather than the shared
   .tab strip's tablist: the page's script presses one of them, so the state is
   read from aria-pressed and printed from here. */
.bldc-segment{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0 0 var(--space-3)}
.bldc-segment__btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-navy);font-size:15px;font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}
.bldc-segment__btn:hover{border-color:var(--color-accent);background:var(--color-accent-pale);color:var(--color-accent)}
/* The pressed button fills with the action colour and prints on it in the same
   white the shared .btn and .tab use. */
.bldc-segment__btn[aria-pressed="true"],
.bldc-segment__btn[aria-pressed="true"]:hover{border-color:var(--color-accent);background:var(--color-accent);color:#fff}

/* The eight series, four to a row on a desk. A card the switch has narrowed away
   is a [hidden] card, which the page root above keeps hidden. */
.bldc-series-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,28px)}

/* One series card: its picture, its code, its name, the figures its record
   states, and the two ways on from it. */
.bldc-series .bldc-series__media{margin:0 0 var(--space-3);border:0;background:var(--color-pale)}
/* A cut-out of the pump, held clear of the block's own 12px corner. */
.bldc-series__media .bldc-series__photo{padding:10px;object-fit:contain}
/* The code above the name: the label a buyer scans the row for. */
.bldc-series__code{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
/* The card's name is the way to the series' own page. It reads as the heading it
   sits in rather than as a second link under the code, and takes the accent on
   hover so the card still says it opens something. */
.bldc-series .panel__title a{color:inherit;text-decoration:none}
.bldc-series .panel__title a:hover{color:var(--color-accent);text-decoration:underline;text-underline-offset:4px}
/* The three figures of the models this page shows for the series, one row each.
   Each label names the models it covers, so it is longer than the figure beside
   it: at four cards to a row the two are stacked rather than set on one line,
   where the label would wrap into the value. A series whose record states no such
   figure prints no list at all, and this rule is written for the list rather than
   for the card. */
.bldc-series__facts{margin:var(--space-2) 0 0;padding:var(--space-2) 0 0;border-top:1px solid var(--color-line)}
.bldc-series__facts > div{display:grid;gap:2px;padding:6px 0}
.bldc-series__facts dt{font-size:12px;line-height:1.4;color:var(--color-muted)}
.bldc-series__facts dd{margin:0;font-size:15px;font-weight:700;color:var(--color-navy);font-variant-numeric:tabular-nums}
/* Two actions at the foot of the card, stacked so neither is squeezed at the
   four-column width. */
.bldc-series__actions{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}

/* The card's second action is a <button>, because it opens the model table below
   rather than going anywhere: it is reset to read as the text link it looks
   like, and it keeps a 44px touch target and the site's focus ring. */
button.text-link.bldc-series__models{display:inline-flex;align-items:center;gap:var(--space-1);min-height:44px;padding:0;border:0;border-radius:var(--radius-sm);background:none;font:inherit;font-size:14px;font-weight:600;color:var(--color-accent);cursor:pointer;text-align:left;transition:color var(--transition-fast)}
button.text-link.bldc-series__models:hover{color:var(--color-accent-dark);text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------- 06 · Models and table -- */
/* The finder: one bar over the page's own model table. */
.bldc-models{margin-top:var(--space-2)}

/* Search, series, reset and the count on one line — the two fields take the
   width, the two controls keep their own. A narrow screen stacks all four. */
.bldc-models__bar{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) auto auto;gap:var(--space-2) var(--space-3);align-items:end;padding:clamp(18px,2vw,24px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-float)}
.bldc-models__search,
.bldc-models__segment{min-width:0}
.bldc-models__reset{align-self:end}
/* The count is a status line rather than a figure: the script writes it, and
   until it has something to say it takes no room at all. */
.bldc-models__count{align-self:center;margin:0;font-size:13px;color:var(--color-muted);font-variant-numeric:tabular-nums}
.bldc-models__count:empty{display:none}

/* One table for the whole page, grouped under the series each model belongs to:
   a row per model the eight records show here, read from their own selected
   lists. The group heading is the series' own code, its name and how many of its
   models this page lists, and it is the anchor a series card's "View Models"
   lands on. */
.bldc-table__group .bldc-table__group-head th{padding-top:var(--space-3);border-top:1px solid var(--color-line);background:var(--color-pale)}
.bldc-table__group:first-of-type .bldc-table__group-head th{border-top:0}
.bldc-table__group-code{display:inline-block;padding:3px 10px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-accent);font-size:12px;font-weight:700;letter-spacing:.08em}
.bldc-table__group-name{margin-left:var(--space-2);font-size:15px;font-weight:600;color:var(--color-heading)}
/* How many of the series' models this page lists: a figure about the table, so
   it is set under the name rather than beside the code it belongs to. */
.bldc-table__group-count{display:block;margin-top:2px;font-size:12px;color:var(--color-muted);font-variant-numeric:tabular-nums}

/* The prompt the series pages print above and below their own model table, in
   the same words: the sentence on the left and the one button that answers it on
   the right, which is the page's own inquiry form. */
.bldc-models__callout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-3);align-items:center;margin-top:var(--space-3);padding:var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale)}
.bldc-models__callout-text{margin:0;font-size:15px;line-height:1.55;color:var(--color-navy)}
.bldc-models__callout-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.bldc-models__callout--foot{margin-top:var(--space-4)}

/* The model table itself. The shared .compare__wrap is the scroller, so a wide
   table never widens the page; what this page adds is the one thing that makes
   the scroller usable — the model column of a model's own row stays put while the
   figures move. A group heading is not held: it spans the table, and holding it
   would cover the rows under it. */
.compare__wrap .bldc-table thead th:first-child,
.compare__wrap .bldc-table tbody tr[data-bldc-row] th{position:sticky;left:0;z-index:1;background:var(--color-surface)}
.bldc-table caption{text-align:left}

/* A model its record holds for review. It is a state rather than a figure, so it
   is boxed in the accent the site keeps for "check this" and reads as one quiet
   chip beside the model code instead of as another value. */
.bldc-table__held{display:inline-block;margin-left:6px;padding:2px 8px;border:1px solid var(--color-sun);border-radius:var(--radius-sm);background:var(--color-sun-pale);color:var(--color-heading);font-size:12px;font-weight:600;white-space:nowrap}

/* No row matched the search: the notice takes the place of the table and says
   where to go instead. Written by the script; without it the markup stays hidden
   and every table is simply there. */
.bldc-empty{margin:var(--space-3) 0 0;padding:var(--space-3);border:1px dashed var(--color-field-line);border-radius:var(--radius-md);background:var(--color-pale);font-size:15px;color:var(--color-navy)}

/* --------------------------------------------------------- 07 · System -- */
/* What the pump set contains, read as three boxed lines beside the drawing. */
.bldc-supply{display:grid;gap:var(--space-2);margin:0 0 var(--space-3);padding:0;list-style:none}
.bldc-supply__item{display:grid;gap:4px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-line);border-left:3px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-surface)}
.bldc-supply__term{font-size:16px;font-weight:700;color:var(--color-heading)}
.bldc-supply__note{font-size:14px;line-height:1.55;color:var(--color-muted)}

/* The drawing takes the width of its column; illustrations.css paints it. */
.bldc-system__diagram{width:100%;margin:0}

/* ------------------------------------------------------ 08 · Why HOBER -- */
/* Four things a buyer checks, then the three pictures the site may publish. */
ul.icon-grid.bldc-reasons{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 var(--space-4)}
.bldc-proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin:0 0 var(--space-4)}
.bldc-proof{margin:0}
.bldc-proof__media{margin:0 0 var(--space-1);border:0;background:var(--color-pale)}
.bldc-proof__media .bldc-proof__photo{object-fit:cover}
.bldc-proof__caption{margin:0;font-size:13px;color:var(--color-muted)}

/* ----------------------------------------------------- 09 · Two routes -- */
/* The two arrangements drawn from the site's own glyphs, one panel each, so the
   comparison table above them keeps the words and this keeps the shapes. */
.bldc-arch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0}
.bldc-arch__panel{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.bldc-arch__icons{display:flex;gap:var(--space-2);margin:0;color:var(--color-accent)}
.bldc-arch__label{margin:0;font-size:16px;font-weight:700;color:var(--color-heading)}
.bldc-arch__note{margin:0;font-size:14px;line-height:1.55;color:var(--color-muted)}

/* ---------------------------------------------------- 10 · Applications -- */
.card-grid.bldc-apps{grid-template-columns:repeat(2,minmax(0,1fr))}
.bldc-app .bldc-app__media{margin:0 0 var(--space-3);border:0;background:var(--color-pale)}
.bldc-app__media .bldc-app__photo{object-fit:cover}

/* ------------------------------------------------ 11 and 12 · One form -- */
/* The requirement on the left, its summary on the right; on a phone the summary
   follows the fields, which is where it is read from. */
.bldc-form{margin-top:var(--space-3)}
.bldc-form__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--space-4);align-items:start}
.bldc-form__requirement{min-width:0}

/* Project or stocking, asked as two radio cards rather than as a dropdown: the
   answer changes what the rest of the form is for, so both readings stay on
   screen. */
.bldc-fieldset{margin:0 0 var(--space-3);padding:var(--space-2) var(--space-3) var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface)}
.bldc-fieldset__legend{padding:0 6px;font-size:13px;font-weight:600;color:var(--color-navy)}
.bldc-choices{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.bldc-choice{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);font-size:15px;color:var(--color-navy);cursor:pointer;transition:border-color var(--transition-fast),background var(--transition-fast)}
.bldc-choice:hover{border-color:var(--color-accent)}
.bldc-choice:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.bldc-choice input{width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
/* The chosen card says so twice: the box takes the action colour, and the label
   with it. :has() is the direct read; the sibling rule covers a browser without
   it. */
.bldc-choice:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-pale)}
.bldc-choice input:checked+span{font-weight:700;color:var(--color-accent-dark)}

/* The requirement's own fields: two to a row on a desk, one on a phone. */
.fields.bldc-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3)}

/* What the script has to say about the requirement — a source was carried in, a
   figure is not a number. Empty, it is not there at all. */
.bldc-form__status{margin:var(--space-2) 0 0;font-size:14px;color:var(--color-muted)}
.bldc-form__status:empty{display:none}

/* The live summary. It is a reading of the fields beside it, not a second form,
   so nothing in it is editable: the values are the fields' own. */
.bldc-summary{padding:var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-float)}
.bldc-summary__title{margin:0 0 var(--space-2);font-size:17px;color:var(--color-heading)}
.bldc-summary__list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.bldc-summary__list li{display:grid;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--color-line)}
.bldc-summary__list li:last-child{padding-bottom:0;border-bottom:0}
.bldc-summary__label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.bldc-summary__value{font-size:15px;overflow-wrap:anywhere;color:var(--color-navy)}
.bldc-summary__note{margin:var(--space-2) 0 0;font-size:13px;line-height:1.5;color:var(--color-muted)}
.bldc-summary__figure{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.bldc-summary__diagram{width:100%;margin:0}

/* The inquiry, under the requirement it answers: one form, so the summary is
   read again above the contact fields rather than retyped in them. */
.bldc-page #quick-selection,
.bldc-inquiry{scroll-margin-top:calc(var(--header-height) + var(--space-3))}
.bldc-inquiry{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-line)}
.bldc-review{margin:0 0 var(--space-3);padding:var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-pale);scroll-margin-top:calc(var(--header-height) + var(--space-3))}
.bldc-review__title{margin:0 0 var(--space-2);font-size:16px;color:var(--color-heading)}
.bldc-review__note{margin:var(--space-2) 0 0;font-size:13px;color:var(--color-muted)}
.bldc-contact-note{margin:var(--space-2) 0}

/* -------------------------------------------------- The fixed action -- */
/* One button, on the edge of the page rather than in the flow: a strip down the
   right on a desk, a bar above the site's own quick actions on a phone, so the
   two never sit on top of each other. It is hidden until the hero is behind the
   reader and again as soon as the inquiry is on screen, and [hidden] is what
   does it — the markup carries it from the start. */
.bldc-sticky{position:fixed;z-index:20;right:0;top:50%;transform:translateY(-50%)}
.bldc-sticky__btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:12px 16px;border-radius:var(--radius-md) 0 0 var(--radius-md);box-shadow:var(--shadow-card);font-size:14px;white-space:nowrap}

/* ------------------------------------------------------------- Screens -- */
/* A tablet: the form keeps its two columns a little longer, the pictures go to
   two, and the fixed action is still a strip at the side. */
@media(max-width:1180px){
  .bldc-form__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .bldc-proofs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Below this the summary still fits under the fields, and the two-family grids
   are already collapsing through the shared .card-grid rules — the compound
   selectors above are what keeps them at two, so they are set back to one here
   where that order no longer reads. */
@media(max-width:980px){
  .fields.bldc-fields{grid-template-columns:minmax(0,1fr)}
  .bldc-form__grid{grid-template-columns:minmax(0,1fr)}
  .bldc-summary{box-shadow:none}
  /* The eight series cards carry three labelled figures each, so they are read
     two across here and one across on a phone rather than four. */
  .bldc-series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* A phone: one column throughout, and the action moves to the foot of the window
   — above the site's quickbar, with the safe area allowed for, so neither bar
   covers the other or the form the button points at. */
@media(max-width:760px){
  .card-grid.bldc-families,
  .card-grid.bldc-sources,
  .card-grid.bldc-apps{grid-template-columns:minmax(0,1fr)}
  ul.icon-grid.bldc-reasons{grid-template-columns:minmax(0,1fr)}
  .bldc-range{grid-template-columns:minmax(0,1fr)}
  .bldc-open__strip{grid-template-columns:minmax(0,1fr)}
  .bldc-series-grid{grid-template-columns:minmax(0,1fr)}
  .bldc-models__callout{grid-template-columns:minmax(0,1fr)}
  .bldc-proofs{grid-template-columns:minmax(0,1fr)}
  .bldc-arch{grid-template-columns:minmax(0,1fr)}
  .bldc-sticky{left:0;right:0;top:auto;bottom:calc(var(--quickbar-height) + env(safe-area-inset-bottom,0px) + var(--space-1));padding:0 var(--gutter);transform:none}
  .bldc-sticky__btn{width:100%;border-radius:var(--radius-md)}
}

/* -------------------------------------------------------------- Motion -- */
/* The page's own transitions, held to the two speeds the site allows. Nothing
   here moves more than the shared reveal does. */
.bldc-family,
.bldc-source,
.bldc-series,
.bldc-app{transition:border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}
.bldc-family:hover,
.bldc-series:hover{transform:translateY(-3px)}

/* A reader who has asked for less movement gets none of it: the states are all
   still legible, because every one of them is also written in colour, in a
   border or in words. */
@media(prefers-reduced-motion:reduce){
  .bldc-family,
  .bldc-series,
  .bldc-choice,
  .bldc-family:hover,
  .bldc-series:hover{transition:none;transform:none}
}