/* Page composition: measures and the few page-level decisions that are not a component's own. */

/* headline measures: two balanced lines for the section H2s at desktop and tablet */
.h2-measure { max-width: 760px; }
@media (max-width: 1023px) { .h2-measure { max-width: 600px; } }
@media (max-width: 767px) { .h2-measure { max-width: none; } }

/* a stacked row draws no hairline between its cells: the cell padding separates them (BRIEF §0e.5, not wireframe) */

/* ---------- styleguide (/styleguide): specimens on the page grid, each wrapped in its data-comp master ---------- */
.sg-head { gap: var(--s-16); }
.sg-group { gap: var(--s-32); }
.sg-note { color: var(--ink-3); font-size: 16px; line-height: 24px; max-width: 640px; }
/* the sheet's own specimen labels (data-sg) keep a one-column measure from the line they start on (--bay is one of
   the six / four / two columns): a long label wraps inside its column, so it never crosses a column line nor ends
   within the clearance of the next one (C6), at any width. The sheet is the reference the client and Figma read, so
   it keeps the rule the pages keep. */
.sg .t-label[data-sg] { max-width: calc(var(--bay) - var(--gutter) / 2 - var(--cell-pad) - var(--clear) - 1px); }
/* sheet text inset from a line keeps --cell-pad from the line's own pixel (+1: a line takes the first pixel of the
   column after it, layout.css), as page cells do after an inner line */
.sg .inset[data-sg] { padding-left: calc(var(--cell-pad) + 1px); }
/* a note is a paragraph, too long for one column: it sits on its own tile on whole columns (an opaque surface, as a
   QuoteTile on the blue field), columns 1-3 on desktop and the full row below, its text --cell-pad in. The lines stop
   at the tile, so the paragraph wraps freely and no line of it ends on a column line. paper-2 on paper, paper on
   paper-2. .sg-tile is the same surface on a specimen cell that holds a note. */
.sg .sg-bays > .sg-note { max-width: none; padding-top: var(--cell-pad); padding-bottom: var(--cell-pad); background: var(--paper-2); }
.sg .sg-tile { background: var(--paper-2); }
/* the type specimens set real headlines across several columns: they sit on one paper panel, margin line to margin
   line, so the lines stop at it and a specimen of any length never ends on a line */
.sg .sg-panel { padding-top: var(--cell-pad); padding-bottom: var(--cell-pad); background: var(--paper); }
.sg .section--paper-2 :is(.sg-bays > .sg-note, .sg-tile) { background: var(--paper); }
/* a specimen block set in the left half (BRIEF §0e: text lives in one half) */
@media (min-width: 1024px) { .sg-half { width: calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); } }
.sg-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-32) var(--s-48); }
/* specimens in cells (BRIEF §0e): .sg-bays is a wrap row of cells; sg-d6 / sg-d2 = 6 or 2 a line on desktop (sg-d2 =
   the two halves either side of the centre line), sg-t4 / sg-t2 / sg-t1 on tablet, sg-m2 / sg-m1 on phones. The first
   cell of a line ends half a gutter early, the last fills (-1 px: never wraps), the others pad 1 px more. */
.sg-bays { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; row-gap: var(--s-48); width: 100%; }
.sg-bays > * { min-width: 0; padding: 0 var(--cell-pad) 0 calc(var(--cell-pad) + 1px); }
@media (min-width: 1024px) {
  .sg-d6 > * { flex: 0 0 calc((100% + var(--gutter)) / 6); }
  .sg-d6 > :nth-child(6n+1) { flex-basis: calc((100% + var(--gutter)) / 6 - var(--gutter) / 2); padding-left: var(--cell-pad); }
  .sg-d6 > :nth-child(6n) { flex: 1 1 calc((100% + var(--gutter)) / 6 - var(--gutter) / 2 - 1px); }
  .sg-d2 > * { flex: 1 1 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2 - 1px); }
  .sg-d2 > :nth-child(2n+1) { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); padding-left: var(--cell-pad); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .sg-t4 > * { flex: 0 0 calc((100% + var(--gutter)) / 4); }
  .sg-t4 > :nth-child(4n+1) { flex-basis: calc((100% + var(--gutter)) / 4 - var(--gutter) / 2); padding-left: var(--cell-pad); }
  .sg-t4 > :nth-child(4n) { flex: 1 1 calc((100% + var(--gutter)) / 4 - var(--gutter) / 2 - 1px); }
  .sg-t2 > * { flex: 1 1 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2 - 1px); }
  .sg-t2 > :nth-child(2n+1) { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); padding-left: var(--cell-pad); }
  .sg-t1 > * { flex: 0 0 100%; padding-left: var(--cell-pad); }
}
@media (max-width: 767px) {
  .sg-m2 > * { flex: 1 1 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2 - 1px); }
  .sg-m2 > :nth-child(2n+1) { flex: 0 0 calc((100% + var(--gutter)) / 2 - var(--gutter) / 2); padding-left: var(--cell-pad); }
  .sg-m1 > * { flex: 0 0 100%; padding-left: var(--cell-pad); }
}
.sg-spec { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); }
.sg-spec--block { width: 335px; align-items: stretch; }
.sg-bays > .sg-spec--block { width: auto; }
.sg-pad { padding-top: var(--s-48); }
.sg-chrome { width: 100%; display: flex; flex-direction: column; }
.sg-chrome .site-header { position: relative; }
/* the header's open-state masters: below 1024 the open menu is drawn in the flow at the viewport's height, as it covers
   the page (its own bar replaces the header's); from 1024 the Services dropdown hangs below its bar, over a gap as deep
   as the dropdown, so it never lies on the next specimen */
@media (max-width: 1023px) {
  .sg-chrome--menu .site-header__bar { display: none; }
  .sg-chrome--menu .menu { display: flex; position: relative; z-index: auto; height: 100vh; }
  /* the drawn open state is the panel at rest after its entrance (components.css · menu motion) */
  .sg-chrome--menu :is(.menu, .menu__group, .menu__list > li, .menu__col > .btn, .menu__photo) { opacity: 1; }
  .sg-chrome--menu .menu__body { translate: none; }
}
@media (min-width: 1024px) { .sg-chrome--services { padding-bottom: calc(var(--s-64) * 2 + var(--s-32)); } }
.sg-swatch { display: flex; flex-direction: column; gap: var(--s-24); }
.sg-chip { width: 100%; height: 64px; border: 1px solid var(--rule-2); }
.sg-type { display: flex; flex-direction: column; gap: var(--s-8); width: 100%; }

/* ---------- Home (BRIEF §0f, R2-F1 – F5, F13): the column lines are the backdrop and every section is placed on the
   six columns with a different split: Hero 3+3 (text | tower) · The What = a statement across the columns, the sub-head
   (3) beside the warranty stamp (3), the full-width product stage, the ServiceTiles as mini-mock cards · CTABand 4+2 ·
   The Gain 3+3 (model | photo) over 2+2+2 icon cards · the CustomerCarousel 2+4 on the one blue field · the close.
   Reading text that sits on the field keeps its line ends clear of the lines (C6: .nowrap groups set where a line may
   break, typography only); everything longer sits on an opaque object (a card, a panel, a tile) that covers them. ---------- */

/* Line breaks per width range (C6: a line of text never starts or ends within the clearance of a column line). Copy
   on the field wraps where the lines allow: a <br class="bk bk-…"> is a break only in the ranges it names (m320 < 360 ·
   m375 360-459 · m600 460-767 · t 768-1023 = tA 768-789 + tB 790-819 + tC 820-949 + tD 950-1023 · d1 1024-1279 =
   dA 1024-1026 + dB 1027-1052 + dC 1053-1085 + dD 1086-1143 + dE 1144-1279 · d2 >= 1280 = dF 1280-1439 + dG >= 1440),
   hidden elsewhere, where its following space wraps naturally. The lines move with the
   viewport while type holds its size, so a run that clears them at one end of a range can end on one at the other:
   the sub-ranges are where a break set stops clearing. .nowrap groups keep sentences whole; .nw-t holds a group on
   one line at tablet only. Chosen by measuring every break set against the lines at the QA widths and between them. */
@media (max-width: 359px) { .home br.bk:not(.bk-m320) { display: none; } }
@media (min-width: 360px) and (max-width: 459px) { .home br.bk:not(.bk-m375) { display: none; } }
@media (min-width: 460px) and (max-width: 767px) { .home br.bk:not(.bk-m600) { display: none; } }
@media (min-width: 768px) and (max-width: 789px) { .home br.bk:not(.bk-t):not(.bk-tA) { display: none; } }
@media (min-width: 790px) and (max-width: 819px) { .home br.bk:not(.bk-t):not(.bk-tB) { display: none; } }
@media (min-width: 820px) and (max-width: 949px) { .home br.bk:not(.bk-t):not(.bk-tC) { display: none; } }
@media (min-width: 950px) and (max-width: 1023px) { .home br.bk:not(.bk-t):not(.bk-tD) { display: none; } }
/* Oct 8 sweep, every width from 320 to 1920: the What H2's m375 set ended on the centre line at 461-479 (m600 now
   starts at 460); the What eyebrow's "post-award." ends 23 px before the first inner line at 1024-1026 (one short word
   there, "Project operations," / "post-award." from 1027, one line from 1053); the What H2 on one line ends on the
   fifth line at 1086-1143; the Gain's one-line Body 1 ends on the second line at 1269-1436 but clears at 1440. */
@media (min-width: 1024px) and (max-width: 1026px) { .home br.bk:not(.bk-d1):not(.bk-dA) { display: none; } }
@media (min-width: 1027px) and (max-width: 1052px) { .home br.bk:not(.bk-d1):not(.bk-dB) { display: none; } }
@media (min-width: 1053px) and (max-width: 1085px) { .home br.bk:not(.bk-d1):not(.bk-dC) { display: none; } }
@media (min-width: 1086px) and (max-width: 1143px) { .home br.bk:not(.bk-d1):not(.bk-dD) { display: none; } }
@media (min-width: 1144px) and (max-width: 1279px) { .home br.bk:not(.bk-d1):not(.bk-dE) { display: none; } }
@media (min-width: 1280px) and (max-width: 1439px) { .home br.bk:not(.bk-d2):not(.bk-dF) { display: none; } }
@media (min-width: 1440px) { .home br.bk:not(.bk-d2):not(.bk-dG) { display: none; } }
@media (min-width: 768px) and (max-width: 1023px) { .home .nw-t { white-space: nowrap; } }

/* LogoStrip (partials/logo-strip.html, D-25): right under the hero row, --cell-pad from the margin line; it renders
   nothing until src/site.json "logos" holds real marks, so the hero closes on its photo until then */
.hero--home .logos { padding: var(--s-32) var(--cell-pad) 0; }

/* Keep the three-part promise evenly sized and unbroken in the split hero.
   Phones retain the readable shared scale and can wrap longer phrases naturally. */
@media (min-width: 768px) {
  .hero--home .t-hero { --hero-title-fs: clamp(26px, 3.5vw, 48px); --hero-title-lh: 1.12; }
  .hero--home .hero__phrase { white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1023px) { .hero--home .hero__head { gap: var(--s-24); } }
/* the hero's Hire Roger never ends on a column line (the line would read as the button's own edge carrying on): where
   its natural end (143 px from the text edge) falls within the clearance of the first inner line, it grows to cross
   that line by 26 px (percentages of the foot, stretched to the text column, so it tracks the line at every width) */
.hero--home .hero__foot { align-self: stretch; }
@media (max-width: 389px) { .hero--home .hero__foot > .btn { min-width: calc(50% + 26px); } }
@media (min-width: 768px) and (max-width: 1023px) { .hero--home .hero__foot > .btn { min-width: calc(50% + 20px); } }
@media (min-width: 1024px) and (max-width: 1399px) { .hero--home .hero__foot > .btn { min-width: calc(100% / 3 - var(--cell-pad) / 3 + 20px); } }

/* The What · intro: the statement H2 runs across the columns from 1024 (R2-F3 "big empty spaces" gone). Desktop: the
   lede spans the row, the sub-head on columns 1-3 and the warranty seal opening column 4 (centre line + pad, on the
   column system like every block; Oct 8: right-aligned, it floated off the lines with 645 px of paper before it), so
   the seal answers the promise just above the product it signs (L from 1280, M at 1024-1279). Tablet: the H2 on
   columns 1-2 with Stamp · L beside it on 3-4, top on the eyebrow band (the Statement row's own instance; the lede's
   is hidden), the sub-head under the H2. Phones: they stack, sub-head then Stamp · M. */
.what__lede { align-items: flex-start; }
.what__sub { max-width: 30em; }
.what__stamp-m { display: none; }
@media (min-width: 1024px) and (max-width: 1279px), (max-width: 767px) {
  .what__stamp-l { display: none; }
  .what__stamp-m { display: inline-flex; }
}
@media (max-width: 767px) { .what__lede { row-gap: var(--s-32); } }

/* The What · product stage: a Harvey crop whose foot always falls mid-list, in the gap above a line (never through
   blank paper under the list, never a 3 px sliver of a row). The stage takes the frame's height (no fixed 16:10, which
   cut a different place at every width) and the frame shows a set run of the Buyout UI, cut 6 px into the next line's
   top padding, above its tick and bar: from 1024 the whole inclusion list and the first two exclusions (the third runs
   off the foot); below 1024 the inclusions up to the line after the one being edited. */
.what__stage .media[data-ratio] .media__stage { aspect-ratio: auto; }
.what__stage :is(.mframe, .mframe__body, .pui) { flex: none; }   /* here the frame sets the stage's height: content-sized */
.what__stage .pui__doc { padding-bottom: 0; }
.what__stage .pui__rows > .pui__row { flex-shrink: 0; }   /* the cut list keeps whole 36 px lines; its box clips them */
@media (min-width: 1024px) {
  .what__stage .pui__doc > .pui__group:last-child > .pui__rows { height: calc(2 * 36px + 6px); overflow: hidden; }
}
@media (max-width: 1023px) {
  .what__stage .pui__doc > .pui__group:last-child { display: none; }
  .what__stage .pui__doc > .pui__group:nth-last-child(2) > .pui__rows { height: calc(4 * 36px + 6px); overflow: hidden; }
}
/* a phone-width frame sets its lines 32 px tall (visuals.css), so the cut keeps the same place in the line */
@container mframe (max-width: 439px) {
  .what__stage .pui__doc > .pui__group:nth-last-child(2) > .pui__rows { height: calc(4 * 32px + 6px); }
}

/* The What · ServiceTiles: the cards and their rail live with the component (components.css · ServiceTile, Oct 8) */

/* The Gain: the model on columns 1-4 and the 1:1 photo on 5-6 share one top (the band line). Keep the heading,
   copy and action together at the 32 rhythm rather than pushing the copy down to the photo's base.
   Tablet: the model on columns 1-3 (span-t-6: a reading measure for the
   lead, column 4 is air beside it; the full width ran the lead to 90 characters at 900) and the photo opens a 2+2
   strip under it with its pair, edges on the lines; phones: the one photo, full width, under the action. Both follow
   the action at the model's own 32 rhythm.
   The items are opaque cards on the columns (layout.css · Cols, cards mode: 2+2+2 at desktop, one per line below),
   paper on the paper-2 band, each led by its icon on a Sky badge; tablet cards run the full width, so the icon stands
   beside the text instead of over it. */
@media (min-width: 1024px) {
  .gain__model { justify-content: flex-start; }
  /* The wider copy cell no longer needs line breaks tuned for the former half-width layout. */
  .home .gain__model br.bk { display: none; }
}
@media (max-width: 1023px) { .gain__row { row-gap: var(--s-32); } }
@media (min-width: 768px) and (max-width: 1023px) {
  .gain__row { flex-wrap: wrap; }
  /* the centre line takes the second plate's first pixel: the plate starts after it, so the line runs between the
     two photos as the strip's one divider instead of vanishing under a seamless join */
  .gain__photo + .gain__photo { padding-left: 1px; }
}
.gain__items { flex-direction: row; }   /* .items is a column list; here the cards wrap on the columns */
.gain__cell { display: flex; flex-direction: column; }
.gain__card { flex: 1 1 auto; gap: var(--s-24); background: var(--paper); }
.gain__card .items__text { max-width: 28em; }
@media (min-width: 768px) and (max-width: 1023px) { .gain__card { flex-direction: row; } }

/* The Close after a blue field (Home's CustomerCarousel, /approach's register): the surface already changed at the
   field's foot, so the close draws no section rule there; its padding stays the band's own, equal above and below
   (Oct 8 gate: --section on top made it bottom-heavy) */
.section:has(> .container > .cta-band--after-blue) { border-top: 0; }

/* Hero · Page (inner pages): band, H1, lead, CTA on the text cell; a page photo, when it has one, takes the right cell */
.hero__text--page { padding-top: var(--s-64); padding-bottom: var(--s-64); }
.hero__h1 { max-width: 920px; }
.hero__sub--page { max-width: 560px; }
@media (max-width: 767px) { .hero__text--page { padding-top: var(--s-32); padding-bottom: var(--s-48); } }
@media (max-width: 767px) { .sg-stamps .dstamp { --px: 0.8px; } .sg-spec--block { width: 100%; } }
/* below 360 the full-size drawn stamps (346 document px + frame) and Stamp/Warranty · L are wider than the content box:
   the specimens scale down there (the masters themselves are captured at 1440 / 768 / 375) */
@media (max-width: 359px) {
  .sg-stamps .dstamp { --px: 0.72px; }
  .sg .stamp--l .stamp__label { padding: 8px 16px; }
  .sg .stamp--l .stamp__line { padding: 12px 16px; font-size: 20px; line-height: 26px; }
}