@charset "utf-8";
/* ==========================================================================
   BECT Ltd — Fabrication Page Template Stylesheet
   Phase 4A · 26 July 2026
   Design system:

   THIS FILE EXTENDS bect-redesign-core.css AND DOES NOT REPLACE IT.
   Load order, without exception:
       <link rel="stylesheet" href="style/bect-redesign-core.css" />
       <link rel="stylesheet" href="style/bect-redesign-fabrication.css" />

   Nothing here overrides an approved core value; this file only ADDS. No
   approved stylesheet was modified to build this page.

   Reused from core, with no new CSS written: .container, .section,
   .section--surface, .section--tight, .section__head, .section__intro,
   .eyebrow, .grid, .grid--3, .card, .card__foot, .btn, .link-arrow,
   .site-header, .nav, .breadcrumb, .band, .site-footer, .proto-banner,
   .skip-link, .visually-hidden, plus every responsive, reduced-motion and
   print rule those carry.

   WHY A SEPARATE TEMPLATE RATHER THAN THE SERVICE ONE
   The service template fits about two thirds of this page, and loading it
   would have been defensible. It was not used for one substantive reason:
   this page's central component does not exist anywhere else in the system.
   D1 is unresolved, so the page must state plainly and visibly which work is
   BECT's and which is the fabrication partner's. That is .role-split below,
   and it is the whole point of the page. The remaining shared components are
   copied value for value rather than inherited, so the page carries no
   dependency on a template it only partly uses.

   ⚠ DELIBERATE DUPLICATION, recorded in
   .fab-steps is the approved .workflow renamed, value for value.
   .tag-list and .gallery are copied byte-for-byte from the approved service
   stylesheet. table.spec is NOT reproduced: this page uses no table.

   PROTOTYPE ONLY. Not published. Does not modify any X5 file.
   ========================================================================== */

/* ---------- 1. FABRICATION HERO ------------------------------------------ */
/* Same navy field, accent rule and split geometry as the approved equipment
   and service heroes, so the page reads as one site. */
.fab-hero {
  background: var(--c-navy-deep);
  color: #fff;
  padding-block: var(--s-8);
  border-bottom: 4px solid var(--c-accent);
}
.fab-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.fab-hero h1 { color: #fff; }
.fab-hero__lead { color: rgba(255,255,255,.92); font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 52ch; }
.fab-hero__figure { margin: 0; }
/* Native asset is 545x337, smaller than the 600px assets elsewhere. Capped at
   its own native width so it is never upscaled. */
.fab-hero__figure img {
  width: 100%; max-width: 545px;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
}
/* Caption colour from the core token --c-caption-on-dark (#B9C0CC, verified
   8.52:1 on --c-navy-deep). Solid, never an alpha value. Size --fs-caption
   (15px), which is the direction design system sets for new templates. */
.fab-hero__caption {
  font-size: var(--fs-caption);
  color: var(--c-caption-on-dark);
  margin-top: var(--s-3); max-width: 545px;
}

/* ---------- 2. ROLE SPLIT ------------------------------------------------
   The component this page exists for. Two panels, side by side, stating what
   BECT does and what the fabrication partner does. They are deliberately
   equal in width and weight: neither role is presented as subordinate, and
   the reader can see the division at a glance rather than inferring it from
   prose. The accent rule sits on BECT's panel only, because the accent marks
   the subject of the site, not the more important party. */
.role-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.role-split > div {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-6);
}
.role-split > div.is-bect { border-top: 3px solid var(--c-accent); }
.role-split > div.is-partner { border-top: 3px solid var(--c-border-fn); }
.role-split h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.role-split .role-split__who {
  display: block; font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted);
  margin-bottom: var(--s-3);
}
.role-split ul { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.role-split li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--fs-body); color: var(--c-body);
}
.role-split li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-border-fn);
}
.role-split .is-bect li::before { background: var(--c-accent); }

/* ---------- 3. CAPABILITY LIST ------------------------------------------- */
/* The approved .feature-list geometry, renamed so this page carries no
   dependency on the equipment stylesheet. Values are identical. */
.fab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.fab-list > li {
  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);
}
.fab-list h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.fab-list p { font-size: var(--fs-body); max-width: none; }

/* ---------- 4. FABRICATION ROUTE ----------------------------------------- */
/* The approved .workflow, renamed. The step number is generated from a CSS
   counter, so it stays correct if a step is added or removed. */
.fab-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); counter-reset: step; margin-top: var(--s-6); }
.fab-steps > li {
  counter-increment: step;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.fab-steps > li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: var(--s-4);
  background: var(--c-navy); color: #fff;
  border-radius: 50%;
  font-size: var(--fs-small); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fab-steps h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.fab-steps p { font-size: var(--fs-small); max-width: none; }

/* ---------- 5. TAG LIST -------------------------------------------------- */
/* Copied value for value from the approved service stylesheet. */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.tag-list li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: var(--s-2) var(--s-5);
  font-size: var(--fs-small); font-weight: 600; color: var(--c-navy);
}
.tag-list li:has(a) { padding: 0; }
.tag-list a {
  display: inline-flex; align-items: center;
  padding: var(--s-2) var(--s-5);
  color: var(--c-navy); text-decoration: none; border-radius: 999px;
}
.tag-list a:hover { text-decoration: underline; }

/* ---------- 6. GALLERY --------------------------------------------------- */
/* Copied value for value from the approved service stylesheet. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.gallery figure {
  margin: 0; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
/* Native assets are ~505-545 x 337. Displayed at ~360px on desktop, so always
   downscaled, never blurred by upscaling. */
.gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-bottom: 1px solid var(--c-border);
}
.gallery figcaption {
  padding: var(--s-4); font-size: var(--fs-small);
  color: var(--c-body); line-height: 1.5;
}

/* ---------- 7. SECTION SPACING HELPER ------------------------------------ */
.fab-h3-spaced { margin-top: var(--s-7); margin-bottom: var(--s-4); }

/* ==========================================================================
   8. RESPONSIVE — X5 breakpoints 1162 / 720 / 480
   Shared responsive behaviour lives in the core stylesheet.
   ========================================================================== */
@media (max-width: 1161px) {
  .fab-hero__grid { gap: var(--s-6); }
  .fab-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fab-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

/* Mobile (480px) and Mobile Fluid below it — also covers 375px */
@media (max-width: 480px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .fab-steps { grid-template-columns: minmax(0, 1fr); }
  .role-split > div { padding: var(--s-5); }
  .tag-list { gap: var(--s-2); }
  .tag-list li { padding: var(--s-2) var(--s-4); }
  .tag-list li:has(a) { padding: 0; }
  .tag-list a { padding: var(--s-2) var(--s-4); }
}

/* ---------- 9. REDUCED MOTION -------------------------------------------- */
/* Core suppresses every transition and transform site-wide. Nothing in this
   file animates beyond that; the block is the documented place for one. */
@media (prefers-reduced-motion: reduce) {
  .role-split > div { transition: none; }
}

/* ---------- 10. PRINT ---------------------------------------------------- */
@media print {
  .gallery { display: none; }
  .fab-hero { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .fab-hero h1, .fab-hero__lead, .fab-hero__caption { color: #000; }
  .fab-hero__figure { display: none; }
  .role-split > div, .fab-list > li, .fab-steps > li { border: 1px solid #999; break-inside: avoid; }
  .fab-steps > li::before { background: #eee; 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. */
.fab-hero__grid > *, .role-split > *, .role-split ul > *, .fab-list > *,
.fab-steps > *, .gallery > * { min-width: 0; }