@charset "utf-8";
/* ==========================================================================
   BECT Ltd - homepage template stylesheet.

   THIS FILE EXTENDS bect-redesign-core.css AND DOES NOT REPLACE IT.
   The page must link them in this order:
       <link rel="stylesheet" href="style/bect-redesign-core.css" />
       <link rel="stylesheet" href="style/bect-redesign-home.css" />

   Everything the homepage shares with other templates - tokens, reset,
   accessibility primitives, layout, typography, buttons, header, navigation,
   cards, enquiry band, footer, responsive behaviour, reduced-motion and print
   rules - lives in the core stylesheet.

   What remains here is the homepage hero and the "Why BECT" fact row: the two
   components no other template uses.
   ========================================================================== */

/* ---------- 1. HERO ----------------------------------------------------- */
.hero {
  background: var(--c-navy-deep);
  color: #fff;
  padding-block: var(--s-10) var(--s-9);
  border-bottom: 4px solid var(--c-accent);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.hero h1 { color: #fff; }
.hero__lead { color: rgba(255,255,255,.92); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 54ch; }
.hero .eyebrow { color: #F3B7B0; }        /* 9.07:1 on --c-navy-deep — verified AA */
.hero__figure { margin: 0; }
/* Hero image is displayed at <=560px CSS width — at or below its native 600px —
   so it is never upscaled. */
.hero__figure img {
  width: 100%; max-width: 560px; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,.18);
}
/* Caption refined, matching the treatment already proved on the
   equipment template:
     colour — solid --c-caption-on-dark (#B9C0CC), 8.52:1 on --c-navy-deep.
              The previous rgba(255,255,255,.72) was an alpha value, so its
              rendered contrast varied with whatever composited behind it.
     size   — --fs-caption (15px), up from 14px, for legibility at normal
              browser zoom. The caption sits below the image in a grid column
              that is centre-aligned against a much taller text column, so one
              extra pixel of line height changes no other element's position. */
.hero__caption {
  font-size: var(--fs-caption);
  color: var(--c-caption-on-dark);
  margin-top: var(--s-3);
  max-width: 560px;
}

/* ---------- 2. FACT ROW ("Why BECT") ------------------------------------ */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.facts > div { background: var(--c-surface); border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent); border-radius: var(--radius); padding: var(--s-5); }
.facts h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.facts p { font-size: var(--fs-small); max-width: none; }

/* ---------- 3. REMOVED: INTERNATIONAL CAPABILITY ("reach") ---------------
   Removed 26 July 2026 with the homepage section it served. The owner declined
   the International engineering capability section and every map treatment
   offered for it, so .reach, .reach__map, .reach__body, .reach__regions and
   .reach__note no longer match anything on any page, and their responsive and
   print rules went with them. The reduced-motion note that recorded "the map
   does not animate" went too: there is no map.

   Nothing else moved. The standards section that precedes this position never
   needed any CSS: it is the approved core .grid--4 and .card, unchanged.

   This is an intentional omission, not an unfinished component. Do not restore
   these rules to add a replacement graphic. The design study is preserved
   outside the website; see
   ------------------------------------------------------------------------ */

/* ==========================================================================
   4. RESPONSIVE — X5 breakpoints: 1162 / 720 / 480
   Shared responsive behaviour lives in the core stylesheet. Only the hero and
   the fact row are handled here.
   ========================================================================== */

@media (max-width: 1161px) {
  .hero__grid { gap: var(--s-7); }
}

@media (max-width: 900px) {
  .facts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .hero { padding-block: var(--s-8); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .hero__figure { order: -1; }                 /* image first when stacked */
  .hero__figure img { max-width: 100%; }
  .hero__caption { max-width: none; }
}

/* ---------- 5. PRINT ---------------------------------------------------- */
@media print {
  .hero { background: #fff; color: #000; }
  /* .hero__caption is included because this revision gives it a solid light
     colour (#B9C0CC), which would print almost invisibly on white. The
     equipment template already resets its caption the same way. Print only:
     no effect on screen. */
  .hero h1, .hero__caption { color: #000; }
}


/* ---------- GRID ITEM SHRINK -------------------- */
/* A grid item's initial `min-width: auto` resolves to its MIN-CONTENT width,
   so an item refuses to shrink below its longest word even when its track is
   minmax(0, 1fr). At 200% text that made items overflow their own tracks and
   pushed the page sideways. `min-width: 0` releases the item; the text then
   wraps inside the track via the overflow-wrap rule in core section 5.
   No effect at normal text size, where nothing needs to shrink this far. */
.hero__grid > *, .facts > * { min-width: 0; }