/* ==========================================================================
   TEMPLATE — /insurance/ landing page
   --------------------------------------------------------------------------
   Depends on, and loads after: tokens.css, base.css, sections/nav.css,
   sections/testimonials.css.

   templates/listing.css used to be a fifth. /insurance/ stopped linking it
   when "The complete list" band came out on Warren's review — that band held
   the page's only .br-listing__* markup. /industry/ and /blog/ still load
   both files in that order, so nothing here may assume listing.css is absent
   either; this file must be correct with it and without it.

   This file carries ONLY what the stylesheets above do not already own:
   the hero's photographic band, the featured card grid, the two form rows,
   the quote captions and the locations strip. Every colour, radius, gap,
   button, control and type size below resolves through a token that already
   existed — there is not one new hex value or one new magic number in here.

   NAMESPACE. `.br-ix__*` for this page's own blocks, `.br-places-strip` for
   the locations strip, which is site chrome in the class registry
   (docs/SECTION-PATTERNS.md §N3) and is named that way here so that promoting
   it to a shared fragment later is a move, not a rewrite.
   ========================================================================== */

/* ==========================================================================
   0. BAND HEAD — the eyebrow / heading / lede stack that opens five of the
   seven bands. One rule, five uses: without it each band re-declares the same
   centred measure and they drift a pixel apart the first time one is edited.
   ========================================================================== */

.br-ix__band-head {
  max-width: var(--br-measure-prose);
  margin-inline: auto;
  text-align: center;
}

.br-ix__band-title { margin: 0; }

/* The lede sits at the prose measure, not the band's — a centred paragraph
   wider than ~65 characters is hard to track back to the start of the next
   line, and this one runs to three sentences on the Quick Check band. */
.br-ix__band-lede {
  margin: var(--br-flow-2xs) auto 0;
  max-width: 40rem;
  color: var(--br-text);
}

.br-ix__band-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--br-flow-2xs);
  margin-top: var(--br-flow-sm);
}

/* Same guard as the home page's hero actions: .br-btn is `white-space: nowrap`,
   and a flex item's automatic minimum size is its min-content width — so a
   long label in a narrow column cannot shrink and pushes scrollWidth past the
   viewport. Stacked, the label may wrap inside the pill; side by side it may
   not. Measured at 320: without this the two-button row is 41px wider than
   the viewport. */
.br-ix__band-actions > .br-btn {
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal;
}

@media (min-width: 480px) {
  .br-ix__band-actions > .br-btn { flex: 0 1 auto; white-space: nowrap; }
  .br-ix__band-actions > .br-btn--primary,
  .br-ix__band-actions > .br-btn--dark { min-width: min(var(--br-btn-min-w), 100%); }
}

/* --------------------------------------------------------------------------
   PROOF STRIP (§S11) — the one-line credential row. Small, muted, and the
   separators are decorative <span>s in the markup so a screen reader reads
   three claims rather than the word "bullet" twice.
   -------------------------------------------------------------------------- */
.br-ix__proof {
  margin: var(--br-flow-2xs) 0 0;
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-white-a85);
  text-wrap: balance;
}

.br-ix__proof--light { color: var(--br-text-muted); }
.br-ix__proof--gold { color: var(--br-ink-on-gold); }

/* ==========================================================================
   1. HERO
   Full-bleed photograph under the shared .br-on-photo overlay. The photo, the
   overlay and the fallback ink are the home page's hero verbatim — hero.css
   measured 7.4:1 worst-case contrast for white type against THAT image under
   THAT overlay, and the numbers do not transfer to a different photograph.

   `overflow-x: clip`, and the reason is hero.css's: the h1 runs
   `overflow-wrap: normal` so a long cover name can hang a pixel rather than
   break mid-word, which leaves one route for pathological content to widen
   the document. `clip` closes it without making this a scroll container.
   ========================================================================== */

.br-ix__hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background-color: var(--br-ink);
  background-image: var(--br-photo-overlay), url("../../assets/homebanner.jpg");
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  background-position: 0% 0%, 50% 50%;
}

/* Asymmetric on purpose, and the same asymmetry the home page's hero uses:
   the approach is longer than the exit because the nav sits on top of it. */
.br-ix__hero-inner {
  padding-block: var(--br-flow-xl) var(--br-flow-lg);
  /* Wide enough that the 52-character headline sets two lines at --display-md
     rather than three. Narrower than the container on purpose: a centred
     column that reaches the gutters has no shape. */
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
}

/* .br-eyebrow paints --br-text-accent (#8a6d00), which is the gold that is
   legible on WHITE. On the photo it is nearly invisible, so the eyebrow takes
   the light gold the rest of the dark surfaces use. */
.br-ix__hero-eyebrow { color: var(--br-gold); }

/* The display utility paints --br-text-heading, which .br-on-dark re-points to
   gold. A full-width gold h1 is the "Built for operational industries" slab's
   treatment, not the hero's — the hero headline is the one that stays white,
   exactly as on the home page. */
.br-ix__hero-title {
  color: var(--br-text-strong);
  margin: var(--br-flow-2xs) 0 0;
  text-wrap: balance;
}

@media (min-width: 320px) {
  /* base.css gives every heading `overflow-wrap: break-word`, which is right
     everywhere else and wrong under `text-wrap: balance` — to even the lines
     out, the balancer will take the permission and split a word with no
     hyphen. Same fix, and the same reasoning, as .br-hero__title. */
  .br-ix__hero-title { overflow-wrap: normal; }
}

.br-ix__hero-lede {
  margin: var(--br-flow-xs) auto 0;
  max-width: 42rem;
  font-size: var(--br-body-size);
  line-height: var(--br-body-lh);
  letter-spacing: var(--br-body-ls);
  font-weight: var(--br-weight-semibold);
  color: var(--br-white-a85);
}

.br-ix__hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--br-flow-2xs);
  margin-top: var(--br-flow-sm);
}

.br-ix__hero-actions > .br-btn {
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal;
}

@media (min-width: 480px) {
  .br-ix__hero-actions > .br-btn { flex: 0 1 auto; white-space: nowrap; }
  .br-ix__hero-actions > .br-btn--primary { min-width: min(var(--br-btn-min-w), 100%); }
}

/* ==========================================================================
   2. THE SIX FEATURED COVERS
   3-up from 900, 2-up from 600, stacked below. The steps are the card's, not
   the page's: at 2-up below 600 a card is ~260px and the longest title
   ("Business Insurance (ISR / Material Damage)") sets four lines.
   ========================================================================== */

.br-ix__cards {
  list-style: none;
  margin: var(--br-flow-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--br-flow-2xs);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) { .br-ix__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .br-ix__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* .br-card supplies the white fill, the 1u radius and the measured padding.
   This adds the hairline (the cards sit on white, so without one they have no
   edge at all), the stacking context the stretched link needs, and the floor
   the "Learn more" row is pinned to so a row of cards ends level. */
.br-ix__card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  box-shadow: var(--br-ring-hairline);
  transition: box-shadow var(--br-dur) var(--br-ease),
              transform var(--br-dur) var(--br-ease);
}

.br-ix__card:hover {
  box-shadow: var(--br-shadow-sm), var(--br-ring-hairline);
  transform: translateY(-2px);
}

/* The focus ring belongs on the CARD, not on the link: the link's own box is
   the title text, and the hit area is the whole card — a ring around three
   words inside a card the user just tabbed to says the wrong thing about what
   Enter will do. */
.br-ix__card:focus-within {
  box-shadow: var(--br-shadow-sm), var(--br-ring-hairline);
  outline: var(--br-icon-stroke) solid var(--br-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .br-ix__card:hover { transform: none; }
}

/* THE ICON TILE. A soft gold wash behind a stroked 24-grid glyph — his site's
   pale-yellow icon square, expressed in our two gold tokens rather than his.

   Not .br-icon-circle: that component is a pill, and six gold discs in a
   3-up grid is a great deal more gold than this system spends anywhere except
   the difference band. The wash is --br-gold-wash, the ink is --br-gold-ink
   (#8a6d00, the gold that clears 4.5:1 on a light surface), and the radius is
   the shared --br-radius-md. */
.br-ix__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* 56 / 28 — the glyph takes half the tile. At the 72px tile the same 32px
     glyph took 44% and read as a small mark adrift in a large empty square.
     56 is also --br-icon-circle plus one 8px step, so it stays on the scale. */
  width: 56px;
  height: 56px;
  border-radius: var(--br-radius-md);
  background: var(--br-gold-wash);
  color: var(--br-gold-ink);
}

.br-ix__card-icon > svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--br-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.br-ix__card-title {
  margin: var(--br-flow-xs) 0 0;
  color: var(--br-text-heading);
  text-wrap: initial;
}

/* The link is a plain string. Its underline would fight the card's own hover
   state, and the card is already the affordance. */
.br-ix__card-link {
  color: inherit;
  text-decoration: none;
}

/* The stretched hit area. `inset: 0` on a ::after inside a positioned card
   spreads the anchor over the whole card without wrapping the card in an <a>,
   which would put the description and the arrow inside the link's accessible
   name. Every card is then one tab stop named by its own cover type. */
.br-ix__card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.br-ix__card-link:focus-visible { outline: none; }   /* the card wears it */

.br-ix__card-text {
  margin: var(--br-flow-3xs) 0 0;
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  color: var(--br-text);
}

/* `margin-top: auto` pins this to the card's floor, so the arrows in a row of
   cards line up even when one title wraps to two lines and its neighbour does
   not. .br-card is already a column flex container, so there is nothing to add
   to make that work. */
.br-ix__card-more {
  display: inline-flex;
  align-items: center;
  gap: var(--br-space-2);
  margin-top: auto;
  padding-top: var(--br-flow-xs);
  font-size: var(--br-label-size);
  line-height: var(--br-label-lh);
  font-weight: var(--br-label-weight);
  letter-spacing: var(--br-label-ls);
  color: var(--br-text-accent);
}

.br-ix__card-more > svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--br-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--br-dur) var(--br-ease);
}

.br-ix__card:hover .br-ix__card-more > svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .br-ix__card-more > svg { transition: none; }
  .br-ix__card:hover .br-ix__card-more > svg { transform: none; }
}

/* ==========================================================================
   REMOVED — "3. THE DIRECTORY".

   Four rules (.br-ix__directory, .br-ix__directory-index, that band's eyebrow
   colour and .br-ix__band-head--tight) went with the band they styled, on
   /insurance/ and /industry/ both: "The complete list" was ours rather than
   Warren's and came out on his review. No markup on either page wears those
   classes now, and nothing else in the system does.

   /insurance/ also stopped linking listing.css when the band went — that band
   held the only .br-listing__* markup on the page. /industry/ and /blog/ still
   link it and are unaffected.
   ========================================================================== */

/* ==========================================================================
   3 + 4. THE TWO CENTRED BANDS
   ========================================================================== */

.br-ix__review { background: var(--br-bg); }

/* On the dark band the lede and the proof line both take the light body ink;
   .br-on-dark re-points --br-text, so the band-head rules above resolve
   correctly with nothing added. The one exception is the eyebrow, for the same
   reason as the hero's. */
.br-ix__quickcheck .br-eyebrow { color: var(--br-gold); }

/* THE FORM CARD, and the one measured override in this file.

   .br-card--form caps at 464px, which is the width of the home page hero's
   right-hand column. This card holds a two-up row (email + phone) and a
   textarea; at 464 each of those controls is 216px, which is narrower than
   its own placeholder. 620px is the width at which the row's two controls
   reach the same 15.5px comfort as the single-column fields above them, and
   it is still inside the prose measure so the card does not read as a
   full-width slab. Everything else about the card — radius, shadow, padding —
   is the shared component. */
.br-ix__form {
  max-width: 620px;
  margin: var(--br-flow-lg) auto 0;
}

/* ⚠️ THE FORM MUST STAY OUTSIDE .br-on-dark. base.css re-points
   --br-bg-surface, --br-text and the control tokens inside that class, so a
   .br-card in there paints itself dark and takes every field with it — and
   .br-on-dark .br-select swaps in a chevron that tiled ten times across the
   control when this was first built. The dark band therefore carries
   .br-surface-dark (a background, nothing more) and .br-on-dark sits on the
   head block only, which is how the signed-off home page puts a white form
   card on a dark photograph. Do not "tidy" the class up onto the section. */

.br-ix__form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--br-space-4);
}

@media (min-width: 480px) {
  .br-ix__form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.br-ix__form-note {
  margin: var(--br-flow-2xs) 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--br-text-muted);
}

/* ==========================================================================
   5. TESTIMONIALS
   The cards, their two surfaces and the quotation's measured typography and
   hyphenation all come from sections/testimonials.css. That file declares
   --br-testimonials-card-gap on .br-testimonials, which this page does not
   use — so the value is handed to the grid instead. It is the same 18px, and
   it is flat at every width from 320 to 1920 in the original.
   ========================================================================== */

.br-ix__voices-grid {
  --br-testimonials-card-gap: 18px;

  list-style: none;
  margin: var(--br-flow-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--br-space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) { .br-ix__voices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .br-ix__voices-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The <li> is the cell and the card fills it, so three cards finish level
   however differently their quotes wrap. `min-width: 0` is not boilerplate:
   grid items default to `min-width: auto` and refuse to shrink below their
   content's minimum. */
.br-ix__voices-item {
  display: flex;
  min-width: 0;
}

/* `align-items: flex-start` in the shared card is what lets the home page's
   Google mark keep its own width. There is no mark here and the caption is a
   full-width block, so it is released. */
.br-ix__quote { align-items: stretch; }

.br-ix__quote-source {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--br-space-1);
}

.br-ix__quote-name {
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  font-weight: var(--br-weight-bold);
  color: var(--br-text-heading);
}

.br-ix__quote-trade {
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-text-muted);
}

/* --br-text-muted is a light-surface neutral. On the ink card it resolves to
   something close to the card, so the trade line takes the dark surface's own
   body ink at 85%. --br-text-heading is already re-pointed by .br-on-dark, so
   the name needs nothing. */
.br-ix__quote.br-testimonials__card--ink .br-ix__quote-trade { color: var(--br-white-a85); }
.br-ix__quote.br-testimonials__card--gold .br-ix__quote-trade { color: var(--br-ink-on-gold); }

/* ==========================================================================
   6. CLOSING GOLD BAND
   .br-on-gold darkens the body ink and re-points the heading. The ghost
   button's plate is defined for dark and light surfaces in base.css; on gold
   it needs the ink treatment, which .br-on-gold already hands it.
   ========================================================================== */

.br-ix__close .br-ix__band-lede { color: var(--br-ink-on-gold); }

/* ==========================================================================
   7. LOCATIONS STRIP (§N3)
   Site chrome, built here first. 4-up from 900, 2-up from 520, stacked below.
   ========================================================================== */

.br-places-strip { padding-block: var(--br-section-y); }

.br-places-strip__head { margin-bottom: var(--br-flow-sm); }

.br-places-strip .br-eyebrow { color: var(--br-gold); }

.br-places-strip__title { margin: 0; }

.br-places-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--br-space-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 520px) { .br-places-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .br-places-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* THE TILE IS TYPOGRAPHIC, NOT PHOTOGRAPHIC — see the ⚠️ block in the template
   for why (three of the four city photographs in Warren's library are of the
   wrong city, two of them the wrong continent). It is a link card on the band's
   own lighter ink, with a hairline that goes gold on hover.

   No aspect-ratio: a 4:3 box with three words in it is a hole. The tile is as
   tall as its content and the row is level because the grid says so. */
.br-places-strip__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--br-space-4);
  height: 100%;
  padding: var(--br-card-px);
  border-radius: var(--br-radius-lg);
  text-decoration: none;
  background: var(--br-bg-dark-alt);
  box-shadow: inset 0 0 0 1px var(--br-white-a12);
  transition: transform var(--br-dur) var(--br-ease),
              box-shadow var(--br-dur) var(--br-ease);
}

.br-places-strip__tile:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--br-gold);
}

.br-places-strip__tile:focus-visible {
  outline: var(--br-icon-stroke) solid var(--br-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .br-places-strip__tile:hover { transform: none; }
}

.br-places-strip__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.br-places-strip__name {
  font-family: var(--br-font-display);
  font-size: var(--br-h4-size);
  line-height: var(--br-h4-lh);
  font-weight: var(--br-weight-bold);
  color: var(--br-gold);
}

.br-places-strip__where {
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-white-a85);
}

.br-places-strip__arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--br-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--br-gold);
  transition: transform var(--br-dur) var(--br-ease);
}

.br-places-strip__tile:hover .br-places-strip__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .br-places-strip__arrow { transition: none; }
  .br-places-strip__tile:hover .br-places-strip__arrow { transform: none; }
}

/* --------------------------------------------------------------------------
   KEPT WARM FOR THE DAY REAL PHOTOGRAPHS ARRIVE.

   Add <img class="br-places-strip__img" src … width height alt> as the FIRST
   child of the tile and add .br-places-strip--photo to the <ul>. Everything
   the photographic variant needs is below: the 4:3 box, the cover crop, the
   hover scale and the scrim under the type. Nothing else has to change.

   ⚠️ And do NOT put `loading="lazy"` on them. At y≈7000 they sit far past
   Chrome's lazy threshold from a 1200px viewport, and scripts/shot.mjs captures
   fullPage without scrolling — the first build of this strip photographed as
   four empty boxes with the city names floating on them. It is the identical
   trap sections/testimonials.css documents for the Google mark, and it is
   settled the same way: eager, with width/height so nothing shifts.
   -------------------------------------------------------------------------- */
.br-places-strip--photo .br-places-strip__tile {
  display: block;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.br-places-strip__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--br-dur-slow) var(--br-ease);
}

.br-places-strip__tile:hover .br-places-strip__img { transform: scale(1.03); }

.br-places-strip--photo .br-places-strip__label {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--br-space-8) var(--br-card-px) var(--br-space-4);
  background: linear-gradient(rgba(14, 15, 12, 0), rgba(14, 15, 12, 0.78));
}

.br-places-strip--photo .br-places-strip__name { color: var(--br-white); }
.br-places-strip--photo .br-places-strip__arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .br-places-strip__img,
  .br-places-strip__tile:hover .br-places-strip__img { transition: none; transform: none; }
}

/* ==========================================================================
   8. FORCED COLOURS
   The card hairline, the icon wash and the tile scrim are all decoration that
   a high-contrast mode discards. What must survive is the boundary of each
   card and the legibility of the city names.
   ========================================================================== */

@media (forced-colors: active) {
  .br-ix__card { border: 1px solid CanvasText; }
  .br-ix__card-icon { border: 1px solid CanvasText; }
  .br-places-strip__tile { border: 1px solid CanvasText; }
  .br-places-strip--photo .br-places-strip__label { background: Canvas; }
  .br-places-strip__name,
  .br-places-strip__where { color: CanvasText; }
}