/* Layout: container, section rhythm, the 12 / 8 / 4 column cells and the frame lines.
   Breakpoints: desktop >= 1024 (designed at 1440) · tablet 768-1023 (designed at 768) · mobile < 768 (designed at 375).
   Container: 100% wide up to 1440, margins 72 / 40 / 20; fluid between the three design widths, centred above 1440.
   Every layout box is display:flex with gap + padding (no grid, no sibling margins) so the Figma importer can rebuild it
   as auto-layout. Cells abut: a cell spanning N columns is N x (column + gutter) wide, and the gutter becomes part of the
   cell padding, so text always sits --cell-pad (32 / 24 / 16) inside the lines that frame it.
   THE 0f RULE (BRIEF §0f.1-2, overrides the 0e halves): every section and the footer draws partials/bays.html, the
   continuous 1 px column lines behind everything: desktop 7 lines (columns 0 2 4 6 8 10 12 of the 12-col grid = six
   columns of 220 at 1440), tablet 5 (four columns), phones 3 (two columns: the margins + the centre). Opaque objects
   (photos, media stages, cards, panels, buttons, motifs) sit on top and cover them; nothing masks a line behind text.
   Content is placed ON the columns: a block starts and ends on a line (spans 2 4 6 8 10 of 12 = 1-5 of the six
   columns; the last cell of a row fills to the margin line) and its text sits --cell-pad (32 / 24 / 16) in from the
   line it starts at (+1 px after an inner line). A line may run behind a run of text well inside it (A did; lint
   allows it beyond the clearance from both ends of the run). Compose with variety (Statement across 4-6 columns,
   Full-width media, Split 2+4 / 4+2 / 3+3, Cards 2+2+2 / 3+3 via .cols below, Photo strip), never two text columns
   competing side by side (R2-F5). Below 1024 the same columns at 4 (tablet) and 2 (phones).
   Surface sequence (R2-F13, tokens.css): paper after the hero, paper-2 once further down, Roger Blue once, low. */

.section { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.section--paper-2 { background: var(--paper-2); }
.section--blue { background: var(--blue); color: var(--on-blue); }
.section--sky { background: var(--sky); color: var(--ink); }   /* secondary surface (BRIEF §0): ink text, sky-line rules */
.section--sky-2 { background: var(--sky-2); color: var(--ink); }   /* pale Sky band (one per page at most) */
/* Sky surfaces on a cell or a block (hero asides, proof panels): same roles as the section modifiers (tokens.css) */
.panel--sky { background: var(--sky); color: var(--ink); }
.panel--sky-2 { background: var(--sky-2); color: var(--ink); }
/* --surface: the ground a component sits on, so an unfilled drawn object (the Stamp/Warranty) can take the ground's
   own colour and cover the bay lines behind it without looking filled (BRIEF §0d: opaque objects cover the lines) */
.section, .panel--sky, .panel--sky-2 { --surface: var(--paper); }
.section--paper-2 { --surface: var(--paper-2); }
.section--blue { --surface: var(--blue); }
.section--sky, .panel--sky { --surface: var(--sky); }
.section--sky-2, .panel--sky-2 { --surface: var(--sky-2); }
/* Full-bleed 1 px rules between sections (Tidjane, Oct 2 on the Replit draft: "cleaner horizontal line separators across
   sections, better matching the vertical line shades and weight ... full bleed"; consolidated Oct 8): the rule takes the
   lower section's own line colour, so it reads as the column grid's horizontal, never as a heavier divider. */
.section { --section-rule: var(--rule); }
.section--paper-2 { --section-rule: var(--rule-2); }
.section--blue { --section-rule: var(--grid-on-blue); }
.section--sky, .section--sky-2 { --section-rule: var(--sky-line); }
.section + .section { border-top: 1px solid var(--section-rule); }
/* no rule where the edge is already drawn or the band carries on: under a flush section (a hero ending on its photo or
   product stage, whose crop is the edge) and on a continuation (top-0 container: Related under the FAQ), except the
   CTA band, which opens on this rule */
.section:has(> .container--flush) + .section:not([data-name="CTABand"]),
.section + .section:has(> .container--top-0):not([data-name="CTABand"]) { border-top: 0; }
.site-footer { border-top: 1px solid var(--rule-2); }
.container { position: relative; z-index: 0; width: 100%; max-width: var(--container); display: flex; flex-direction: column;
  padding: var(--section) var(--margin); }
.container--flush { padding-top: 0; padding-bottom: 0; }
.container--top-0 { padding-top: 0; }
.container--top-section { padding-top: var(--section); }   /* explicit: a band that follows a field keeps the rhythm */
.container--bottom-0 { padding-bottom: 0; }

/* rows of cells */
.row { position: relative; z-index: 0; display: flex; flex-direction: row; align-items: stretch; width: 100%; }
.cell { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: var(--cell-pad); flex: 1 1 0; }
.cell--x { padding-top: 0; padding-bottom: 0; }      /* horizontal cell padding only (the row sets the vertical) */
.cell--flush { padding: 0; }                          /* photos and plates fill their cell, edge on the lines */
.cell--stretch { align-items: stretch; }
.inset { padding-left: var(--cell-pad); padding-right: var(--cell-pad); }   /* full-width text inside the margin lines */

/* the hero plate (BRIEF §0e.3): from 1024 every route's hero row starts 48 under the header rule, so the right-half
   object (square photo or Sky field) tops out on the same line on every page and the first screen never jumps between
   routes; the text head shares that top line (Hero · Home and Hero · Page · Halves set the same 48 in components.css) */
@media (min-width: 1024px) {
  .row--plate { padding-top: var(--s-48); }
  .row--plate > .hero__text { padding-top: 0; }
}
/* a half that travels with a long column beside it (an article's title + byline, a FAQ heading), so the left half is
   never an empty slab under the hero (BRIEF §0e.5). Desktop only: below 1024 the halves stack. */
@media (min-width: 1024px) {
  .cell--sticky { position: sticky; top: calc(var(--header-h) + var(--s-48)); align-self: flex-start; }
}

/* stacks + clusters (spacing scale only) */
.stack { display: flex; flex-direction: column; align-items: flex-start; }
.stack--stretch { align-items: stretch; }
.cluster { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.g-4 { gap: 4px; } .g-8 { gap: 8px; } .g-12 { gap: 12px; } .g-16 { gap: 16px; } .g-24 { gap: 24px; }
.g-32 { gap: 32px; } .g-48 { gap: 48px; } .g-64 { gap: 64px; }
.g-section { gap: var(--section); }
.w-full { width: 100%; }
.measure { max-width: 640px; }   /* reading measure (about 65 characters of body type); px, not ch: BRIEF §5 */

/* the line between two cells takes the first pixel of the next cell, so that cell pads 1 px more: text keeps the full
   --cell-pad from the line on both sides (outer lines sit just outside the margin, so they need nothing) */
.row > .cell + .cell:not(.cell--flush) { padding-left: calc(var(--cell-pad) + 1px); }
/* a stacked row has no line between its cells, so every cell keeps the plain pad (the +1 px would push text 1 px off
   the column edge the stacked cells share) */
@media (max-width: 1023px) { .row--stack-t > .cell + .cell:not(.cell--flush) { padding-left: var(--cell-pad); } }
@media (max-width: 767px) { .row--stack-m > .cell + .cell:not(.cell--flush) { padding-left: var(--cell-pad); } }

/* ---------- the column lines ----------
   1 px verticals at the outer margins (just outside the content box) and on every second column boundary (on the
   next cell's first pixel): partials/bays.html, BRIEF §0f.1; a row-local line only inside an opaque panel whose
   columns it divides.
   Behind content (z -1), pointer-events none, continuous through the box that owns them. .gridlines sits in a
   .container (lines offset by the margin) or, as .gridlines--row, in a .row (lines on the row's own edges). */
.gridlines { --gl-m: var(--margin); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.gridlines--row { --gl-m: 0px; }
.gl { position: absolute; top: 0; height: 100%; width: 1px; background: var(--rule); display: none; opacity: .8; }
.gl-d-0, .gl-d-12, .gl-t-0, .gl-t-8, .gl-m-0, .gl-m-4 { opacity: 1; }
.section--paper-2 .gl { background: var(--rule-2); }
.section--blue .gl { background: var(--grid-on-blue); }
.section--sky .gl, .section--sky-2 .gl, .panel--sky .gl, .panel--sky-2 .gl { background: var(--sky-line); }

/* ---------- cell spans: .span-d-N (of 12, >= 1024), .span-t-N (of 8, 768-1023), .span-m-N (of 4, < 768).
   Cell boundaries (and their drawn lines) sit on gutter centres, so 6 + 6 columns are two equal halves. A leading cell
   ends half a gutter early (on the line); a cell between two lines adds .cell--mid. The last cell of a row carries no
   span: it fills the rest (flex 1), so the row always ends on the margin line. ---------- */
.cell--mid { --lead: 0; }
@media (min-width: 1024px) {
  .gl-d-0 { display: block; left: calc(var(--gl-m) - 1px); }
  .gl-d-1 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 1 / 12 - var(--gutter) / 2); }
  .gl-d-2 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 2 / 12 - var(--gutter) / 2); }
  .gl-d-3 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 3 / 12 - var(--gutter) / 2); }
  .gl-d-4 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 4 / 12 - var(--gutter) / 2); }
  .gl-d-5 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 5 / 12 - var(--gutter) / 2); }
  .gl-d-6 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 6 / 12 - var(--gutter) / 2); }
  .gl-d-7 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 7 / 12 - var(--gutter) / 2); }
  .gl-d-8 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 8 / 12 - var(--gutter) / 2); }
  .gl-d-9 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 9 / 12 - var(--gutter) / 2); }
  .gl-d-10 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 10 / 12 - var(--gutter) / 2); }
  .gl-d-11 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 11 / 12 - var(--gutter) / 2); }
  .gl-d-12 { display: block; left: calc(100% - var(--gl-m)); }
  .span-d-1 { flex: 0 0 calc((100% + var(--gutter)) * 1 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-2 { flex: 0 0 calc((100% + var(--gutter)) * 2 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-3 { flex: 0 0 calc((100% + var(--gutter)) * 3 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-4 { flex: 0 0 calc((100% + var(--gutter)) * 4 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-5 { flex: 0 0 calc((100% + var(--gutter)) * 5 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-6 { flex: 0 0 calc((100% + var(--gutter)) * 6 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-7 { flex: 0 0 calc((100% + var(--gutter)) * 7 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-8 { flex: 0 0 calc((100% + var(--gutter)) * 8 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-9 { flex: 0 0 calc((100% + var(--gutter)) * 9 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-10 { flex: 0 0 calc((100% + var(--gutter)) * 10 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-d-11 { flex: 0 0 calc((100% + var(--gutter)) * 11 / 12 - var(--gutter) / 2 * var(--lead, 1)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gl-t-0 { display: block; left: calc(var(--gl-m) - 1px); }
  .gl-t-1 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 1 / 8 - var(--gutter) / 2); }
  .gl-t-2 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 2 / 8 - var(--gutter) / 2); }
  .gl-t-3 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 3 / 8 - var(--gutter) / 2); }
  .gl-t-4 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 4 / 8 - var(--gutter) / 2); }
  .gl-t-5 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 5 / 8 - var(--gutter) / 2); }
  .gl-t-6 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 6 / 8 - var(--gutter) / 2); }
  .gl-t-7 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 7 / 8 - var(--gutter) / 2); }
  .gl-t-8 { display: block; left: calc(100% - var(--gl-m)); }
  .span-t-1 { flex: 0 0 calc((100% + var(--gutter)) * 1 / 8 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-t-2 { flex: 0 0 calc((100% + var(--gutter)) * 2 / 8 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-t-3 { flex: 0 0 calc((100% + var(--gutter)) * 3 / 8 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-t-4 { flex: 0 0 calc((100% + var(--gutter)) * 4 / 8 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-t-5 { flex: 0 0 calc((100% + var(--gutter)) * 5 / 8 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-t-6 { flex: 0 0 calc((100% + var(--gutter)) * 6 / 8 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-t-7 { flex: 0 0 calc((100% + var(--gutter)) * 7 / 8 - var(--gutter) / 2 * var(--lead, 1)); }
}
@media (max-width: 767px) {
  .gl-m-0 { display: block; left: calc(var(--gl-m) - 1px); }
  .gl-m-1 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 1 / 4 - var(--gutter) / 2); }
  .gl-m-2 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 2 / 4 - var(--gutter) / 2); }
  .gl-m-3 { display: block; left: calc(var(--gl-m) + (100% - 2 * var(--gl-m) + var(--gutter)) * 3 / 4 - var(--gutter) / 2); }
  .gl-m-4 { display: block; left: calc(100% - var(--gl-m)); }
  .span-m-1 { flex: 0 0 calc((100% + var(--gutter)) * 1 / 4 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-m-2 { flex: 0 0 calc((100% + var(--gutter)) * 2 / 4 - var(--gutter) / 2 * var(--lead, 1)); }
  .span-m-3 { flex: 0 0 calc((100% + var(--gutter)) * 3 / 4 - var(--gutter) / 2 * var(--lead, 1)); }
}

/* ---------- Cols: a wrapping row of equal cells on the column lines (BRIEF §0f.2: one link or fact per column, Cards
   2+2+2 / 3+3, a photo strip, a 3-up card list that grows).
   Children per line:  desktop .cols--d6 (one column each) · .cols--d3 (two each: 2+2+2) · .cols--d2 (three: 3+3)
                       tablet  .cols--t4 (one each) · .cols--t2 (two each) · .cols--t1
                       phones  .cols--m2 (one each) · .cols--m1
   Without a class for a breakpoint the children take one per line. The first child of a line ends half a gutter early
   (the outer line sits on the content edge), the middle ones are whole columns, the last one fills (absorbs rounding,
   so a line never wraps early); an incomplete last line keeps the column widths. Positions count VISIBLE children
   (:nth-child(… of :not([hidden]))), so a filtered list (the /insights tags) re-flows onto the columns.
   Two modes:
   - text cells (default): a child's text sits --cell-pad in from the line it starts at (+1 px after an inner line,
     which takes the cell's first pixel), so it lines up with the text of every other section;
   - .cols--cards: opaque cards on the 12-column grid itself. Each card spans whole grid columns (2 of the six = 4 of
     12 = 416 at 1440), so every card in a row has the same width; the outer cards' edges sit on the margin lines and
     the inner lines run down the middle of the 24 px gutters between cards. Rows are a gutter apart too. A card pads
     its text --cell-pad (.card), so the first card's text lines up with the page's text edge.
   Row gap = --cols-gap (text cells 48; cards one gutter). ---------- */
.cols { --cols-gap: var(--s-48); --c-lead: var(--cell-pad); --c-in: calc(var(--cell-pad) + 1px); --c-end: var(--cell-pad); --c-last: var(--cell-pad);
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; row-gap: var(--cols-gap); width: 100%; }
.cols--cards { --cols-gap: var(--gutter); --c-lead: 0px; --c-in: calc(var(--gutter) / 2); --c-end: calc(var(--gutter) / 2); --c-last: 0px; }
.cols > * { flex: 0 0 100%; min-width: 0; padding: 0 var(--c-last) 0 var(--c-lead); }
@media (min-width: 1024px) {
  .cols--d6 > *, .cols--d3 > *, .cols--d2 > * { padding: 0 var(--c-end) 0 var(--c-in); }
  .cols--d6 > * { flex: 0 0 calc((100% + var(--gutter)) / 6); }
  .cols--d6 > :nth-child(6n+1 of :not([hidden])) { flex: 0 0 calc((100% + var(--gutter)) / 6 - var(--gutter) / 2); padding-left: var(--c-lead); }
  .cols--d6 > :nth-child(6n of :not([hidden])) { flex: 1 1 calc((100% + var(--gutter)) / 6 - var(--gutter) / 2 - 1px); padding-right: var(--c-last); }
  .cols--d3 > * { flex: 0 0 calc((100% + var(--gutter)) / 3); }
  .cols--d3 > :nth-child(3n+1 of :not([hidden])) { flex: 0 0 calc((100% + var(--gutter)) / 3 - var(--gutter) / 2); padding-left: var(--c-lead); }
  .cols--d3 > :nth-child(3n of :not([hidden])) { flex: 1 1 calc((100% + var(--gutter)) / 3 - var(--gutter) / 2 - 1px); padding-right: var(--c-last); }
  .cols--d2 > * { flex: 1 1 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2 - 1px); padding-right: var(--c-last); }
  .cols--d2 > :nth-child(2n+1 of :not([hidden])) { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); padding: 0 var(--c-end) 0 var(--c-lead); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cols--t4 > *, .cols--t2 > * { padding: 0 var(--c-end) 0 var(--c-in); }
  .cols--t4 > * { flex: 0 0 calc((100% + var(--gutter)) / 4); }
  .cols--t4 > :nth-child(4n+1 of :not([hidden])) { flex: 0 0 calc((100% + var(--gutter)) / 4 - var(--gutter) / 2); padding-left: var(--c-lead); }
  .cols--t4 > :nth-child(4n of :not([hidden])) { flex: 1 1 calc((100% + var(--gutter)) / 4 - var(--gutter) / 2 - 1px); padding-right: var(--c-last); }
  .cols--t2 > * { flex: 1 1 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2 - 1px); padding-right: var(--c-last); }
  .cols--t2 > :nth-child(2n+1 of :not([hidden])) { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); padding: 0 var(--c-end) 0 var(--c-lead); }
}
@media (max-width: 767px) {
  .cols--m2 > * { flex: 1 1 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2 - 1px); padding: 0 var(--c-last) 0 var(--c-in); }
  .cols--m2 > :nth-child(2n+1 of :not([hidden])) { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); padding: 0 var(--c-end) 0 var(--c-lead); }
}

/* rows that stack below a breakpoint: cells become full-width blocks in reading order (no hairline between them:
   spacing separates them, BRIEF §0e.5) */
@media (max-width: 1023px) {
  .row--stack-t { flex-direction: column; }
  .row--stack-t > .cell { flex: 0 0 auto; width: 100%; }
}
@media (max-width: 767px) {
  .row--stack-m { flex-direction: column; }
  .row--stack-m > .cell { flex: 0 0 auto; width: 100%; }
}

/* ---------- horizontal rules (borders on the box they close; text keeps >= --clear from them) ---------- */
.rule-t { border-top: 1px solid var(--rule); }
.rule-b { border-bottom: 1px solid var(--rule); }
.rule-t-ink { border-top: 2px solid var(--ink); }
.rule-t-blue { border-top: 2px solid var(--blue); }
.section--paper-2 .rule-t, .section--paper-2 .rule-b { border-color: var(--rule-2); }
/* on-Sky and on-blue contexts recolour the rules (the rule colour would vanish on Sky and read beige on the blue field) */
:is(.section--sky, .section--sky-2, .panel--sky, .panel--sky-2) :is(.rule-t, .rule-b) { border-color: var(--sky-line); }
.section--blue :is(.rule-t, .rule-b) { border-color: var(--grid-on-blue); }

/* ---------- visibility per breakpoint ---------- */
@media (min-width: 1024px) { .hide-d { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023px) { .hide-t { display: none !important; } }
@media (max-width: 767px) { .hide-m { display: none !important; } }