/* ============================================================================
   MCT CHEMICALS — PREMIUM VISUAL SYSTEM (review build)
   Logo-driven: heavy geometric display + wide-tracked technical labels,
   charcoal-navy foundation, white technical space, orange as a PRECISION accent.
   Loaded last; refines the existing system without restructuring markup.
   ========================================================================== */

/* ---- 1. TYPE FOUNDATION — Inter as display + body (loads reliably) -------- */
:root{
  --font-display: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* tighter, more editorial display scale — confident, not oversized */
  --type-display-xl: clamp(2.4rem, 1.6rem + 2.8vw, 4rem);    /* ~38 -> 64 */
  --type-display-l:  clamp(2rem, 1.5rem + 2vw, 3rem);        /* 32 -> 48 */
  --fw-display: 800;
  --tracking-tight: -0.022em;
  --tracking-overline: 0.16em;
}

/* Heavy, confident headings with optical tightening */
.t-display-xl, .t-display-l, .t-h1{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.04;
}
.t-h2{ font-weight: 700; letter-spacing: -0.018em; line-height: 1.12; }
.t-h3{ font-weight: 700; letter-spacing: -0.01em; }
h1,h2,h3,h4{ font-family: var(--font-display); text-wrap: balance; }
body{ font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

/* Wide-tracked technical overline — echoes "CHEMICALS" in the logo */
.t-overline{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--accent);
}
/* overline on dark sections: keep orange but a touch softer */
.section--tint .t-overline, .hero .t-overline{ color: #F0873A; }

/* Body copy: calmer, more readable secondary tone */
.t-body-l{ font-size: clamp(1.02rem,0.97rem+0.2vw,1.15rem); line-height: 1.6; }
p{ text-wrap: pretty; }

/* ---- 2. COLOR DISCIPLINE — orange as accent only ------------------------- */
:root{
  --accent:       #E9721C;
  --accent-hover: #F5852E;
  /* refined navy foundation with a hint more depth */
  --hairline: rgba(255,255,255,0.09);
  --hairline-strong: rgba(255,255,255,0.16);
}
.border-hairline, .split__media, .industry, .product-card, .article, .proj-app, .cert{
  border-color: var(--hairline) !important;
}

/* ---- 3. SPACING — significantly more generous section rhythm ------------- */
.section{ padding-block: clamp(4.5rem, 3rem + 6vw, 8.5rem); }
.sec-head{ margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.sec-head .t-overline{ margin-bottom: 0.9rem; display:block; }
.container{ max-width: 1240px; }

/* ---- 4. BUTTONS — restrained, confident, corporate ---------------------- */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 10px;
  padding: 0.9rem 1.5rem;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn--primary{ background: var(--accent); color:#fff; border:1px solid var(--accent); }
.btn--primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn--ghost, .btn--secondary{
  background: transparent; color: inherit;
  border:1px solid var(--hairline-strong);
}
.btn--ghost:hover, .btn--secondary:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

/* ---- 5. SECTION HEADS — editorial technical alignment ------------------- */
.sec-head .t-h1, .sec-head .t-h2{ max-width: 20ch; }
.sec-head--center .t-h2{ max-width: 24ch; margin-inline:auto; }

/* thin technical rule under overlines in centered heads */
.sec-head--center .t-overline{ position:relative; }

/* ---- 6. CARDS — flatter, more editorial, less "floating rounded box" ---- */
.industry, .product-card, .article{
  border-radius: 14px;
  box-shadow: none;
  transition: transform .2s ease, border-color .2s ease;
}
.industry:hover, .product-card:hover, .article:hover{
  transform: translateY(-3px);
  border-color: var(--hairline-strong) !important;
}
/* "why" value cards: strip heavy chrome, make them quiet editorial blocks */
.why-card, .feature-card, .value-card{
  background: transparent !important;
  border:1px solid var(--hairline) !important;
  border-radius: 12px;
}

/* ---- 7. STATS — large precise numerals, disciplined (light, not all-orange) ---- */
.stat-b b, .hero-stat b, .stat-num{
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-primary) !important;   /* numerals light, not orange slab */
}
.stat-b, .hero-stat{ position:relative; padding-top: 1.1rem; }
.stat-b::before, .hero-stat::before{        /* thin orange precision accent above each stat */
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:2px; background:var(--accent); border-radius:2px;
}
.stat-b span, .hero-stat span{
  letter-spacing: 0.02em; text-transform: none;
  color: var(--text-secondary);
}

/* ---- 8. IMAGE TREATMENT — clean, architectural, subtle depth ----------- */
.pic, .tile-img, .split-img{ }
.industry::after{ /* subtle bottom scrim so titles stay legible on photos */
  content:""; position:absolute; inset:auto 0 0 0; height:55%;
  background:linear-gradient(to top, rgba(6,12,20,.78), rgba(6,12,20,0));
  pointer-events:none; z-index:0;
}
.industry > *{ position:relative; z-index:1; }
.industry span{ font-weight:700; letter-spacing:-0.01em; }

/* ---- 9. FOOTER — sophisticated, quiet ---------------------------------- */
.site-footer, footer{ padding-block: clamp(3.5rem,2rem+4vw,5.5rem) 2rem; }
.site-footer h4, footer h4{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--text-muted); font-weight:700; margin-bottom:1rem;
}

/* ---- 10. NAV — deliberate spacing, subtle hover ------------------------ */
.site-nav a, nav a{ letter-spacing:.005em; }
.site-nav a:hover, nav a:hover{ color: var(--accent); }

/* ---- 11. RESPONSIVE refinement ---------------------------------------- */
@media (max-width: 768px){
  .section{ padding-block: clamp(3.25rem, 2rem + 5vw, 4.5rem); }
  .sec-head .t-h1, .sec-head .t-h2{ max-width: none; }
}

/* ---- 12. HERO refinements ---------------------------------------------- */
/* Remove scattered interactive hotspot dots — reads as clutter on a premium hero */
.hero__hotspots, .hotspot{ display:none !important; }

/* Accent word: precise, not a heavy block */
.hero__headline .acc{ color: var(--accent); font-weight:800; }

/* Hero headline: fixed line-box so fallback and Inter occupy identical space (zero CLS) */
.hero__headline{ letter-spacing:-0.02em; font-size:clamp(1.9rem,1.35rem+2.1vw,3.9rem); line-height:1.08; overflow-wrap:break-word; }
@media (min-width:769px){ .hero__headline{ font-size:56px; line-height:60px; min-height:240px; } }
.hero__eyebrow{ margin-bottom:1.1rem; }
.hero__sub{ max-width:44ch; color:var(--text-secondary); font-size:clamp(1.02rem,0.97rem+0.2vw,1.16rem); line-height:1.62; margin-top:1.3rem; }
.hero__ctas{ margin-top:2.2rem; gap:0.9rem; }

/* Hero photo: architectural framing, subtle depth, no gimmick lighting */
.hero__media, .hero__photo{ border-radius:16px; overflow:hidden; }

/* Utility top bar: quieter, more corporate */
.util-bar, .topbar{ font-size:0.8rem; letter-spacing:0.01em; }

/* ---- 13. CLS guard: reserve hero headline space so webfont swap can't shift layout ---- */
.hero__content{ contain: layout; }
.hero__headline{ min-height: 4.35em; }  /* holds up to 4 lines at display size; swap won't grow it */
@media (min-width:769px){ .hero__content{ min-height: 430px; } }  /* reserve hero content block so font swap can't shift below-fold */
@media (max-width:768px){ .hero__headline{ min-height: 4.4em; } }

/* ---- 14. CLS fix: lock utility-bar height so webfont swap can't reflow it ---- */
.util__inner{ min-height: 44px; height: 44px; }
@media (min-width: 601px){
  .util__inner{ flex-wrap: nowrap !important; white-space: nowrap; overflow: hidden; }
  .util__identity{ flex-wrap: nowrap; white-space: nowrap; min-width: 0; overflow:hidden; }
  .util__contact{ flex-wrap: nowrap; white-space: nowrap; }
}

/* ---- 15. PROJECT cards: stronger bottom scrim so title reads clearly over photo/placeholder ---- */
.project::before{
  background: linear-gradient(to top, rgba(6,12,20,.94) 0%, rgba(6,12,20,.55) 38%, rgba(6,12,20,.05) 70%) !important;
}
.project__meta b{ font-weight:700; letter-spacing:-0.01em; }
.project__meta{ text-shadow: 0 1px 12px rgba(0,0,0,.45); }
/* demo placeholder label: seat it at the top so it never collides with the bottom title */
.project .pic[data-ph="demo"] .v11-asset::after,
.project .v11-asset::after{ align-self:flex-start; margin-top:10px; }
.project .v11-asset{ align-items:flex-start !important; justify-content:flex-start !important; padding-top:8px; }

/* ============================================================================
   16. PREMIUM FINISHED EMPTY-STATE for slots awaiting the client's photography.
   Instead of raw "PHOTO PENDING / DEMO" labels, empty slots render as intentional
   branded panels: subtle navy gradient, a fine hairline frame, a small orange
   corner mark, and (where a caption exists) an elegant slot name. Reads as
   designed, not unfinished — no fabricated imagery.
   ========================================================================== */

/* Hide the build-time affordance labels entirely */
.pic[data-ph="svg"]::after,
.pic[data-ph="ph"]::after{ content:"" !important; display:none !important; }

/* Base premium panel for any placeholder slot (svg fallback or ph) */
.pic[data-ph="svg"], .pic[data-ph="ph"]{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(233,114,28,0.05), transparent 60%),
    linear-gradient(160deg, #12203033 0%, #0C18248f 55%, #0A131E 100%);
  border-radius: inherit;
}
/* Dim the generic SVG tower/icon so it reads as a subtle texture, not clip-art */
.pic[data-ph="svg"] > img, .pic[data-ph="ph"] > img{ opacity:0.10 !important; filter:grayscale(1); }

/* Fine hairline inset frame + orange corner tick — the "engineered" mark */
.pic[data-ph="svg"]::before, .pic[data-ph="ph"]::before{
  content:""; position:absolute; inset:10px; z-index:1;
  border:1px solid rgba(255,255,255,0.07); border-radius:8px;
  background:
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/16px 2px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left 0 top 0/2px 16px no-repeat;
  opacity:1; animation:none;
}

/* Elegant slot caption from data-caption (industry / project / evidence name) */
.pic[data-caption]{ }
.pic[data-caption]::after{
  content: attr(data-caption) !important; display:block !important;
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px; text-align:center;
  font-family:var(--font-display); font-weight:600; font-size:0.82rem;
  letter-spacing:0.01em; color:rgba(255,255,255,0.78);
  background:linear-gradient(to top, rgba(6,12,20,0.55), transparent);
  text-transform:none;
}
/* industry tiles already print their own <span> title, so suppress the duplicate caption there */
.industry .pic[data-caption]::after{ content:"" !important; display:none !important; }

/* Project tiles: the card prints its own title/meta — keep the panel clean, no caption dup */
.project .pic[data-caption]::after{ content:"" !important; display:none !important; }

/* ---- 17. QUALITY / DOCUMENTATION grid (replaces thin certifications row) ---- */
.qual-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:14px; overflow:hidden;
}
.qual-item{
  background:var(--bg-base,#0B1420); padding:2rem 1.75rem;
  display:flex; flex-direction:column; gap:0.5rem; position:relative;
}
.qual-item::before{ content:""; position:absolute; top:1.75rem; left:1.75rem; width:20px; height:2px; background:var(--accent); border-radius:2px; }
.qual-item__t{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:-0.01em; margin-top:1.4rem; color:var(--text-primary); }
.qual-item__d{ font-size:0.9rem; line-height:1.55; color:var(--text-secondary); margin:0; }
@media (max-width:860px){ .qual-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .qual-grid{ grid-template-columns:1fr; } }

/* ============================================================================
   18. CHAKORE VENTURE — real project photograph hero
   Portrait tower shot: give this slot a 4:5 ratio so the building stays the
   dominant subject (16:9 would crop the tower). Subtle MCT watermark.
   ========================================================================== */
.proj-detail__main--photo{ aspect-ratio: 4 / 5 !important; }
@media (max-width:900px){ .proj-detail__main--photo{ aspect-ratio: 4 / 3 !important; } }
.proj-detail__main--photo .pic > img{ object-fit:cover; object-position:center 32%; }

/* once the real photo is in, suppress the premium empty-state frame/caption on THIS slot */
.proj-detail__main--photo .pic[data-ph]::before,
.proj-detail__main--photo .pic[data-caption]::after{ content:"" !important; display:none !important; }
.proj-detail__main--photo .pic{ background:#0A131E; }
.proj-detail__main--photo .pic > img{ opacity:1 !important; filter:none !important; }

/* subtle MCT watermark, ~10% opacity, bottom-right, never covering the tower */
.proj-detail__main--photo{ position:relative; }
.proj-watermark{
  position:absolute; right:16px; bottom:14px; z-index:3;
  width:92px; height:26px; pointer-events:none;
  background:url("../assets/brand/mct-logo-white.png") right bottom / contain no-repeat;
  opacity:0.11;
}
@media (max-width:600px){ .proj-watermark{ width:74px; height:21px; right:12px; bottom:11px; } }

/* ---- 19. CHAKORE application photo tile (retaining wall waterproofing) ---- */
.proj-app--photo{ position:relative; }
.proj-app--photo .pic[data-ph]::before,
.proj-app--photo .pic[data-caption]::after{ content:"" !important; display:none !important; }
.proj-app--photo .pic{ background:#0A131E; }
.proj-app--photo .pic > img{ opacity:1 !important; filter:none !important; object-fit:cover; }
/* discreet MCT watermark, smaller for the application tile */
.proj-watermark--sm{
  position:absolute; right:12px; top:10px; z-index:3;
  width:70px; height:20px; pointer-events:none;
  background:url("../assets/brand/mct-logo-white.png") right top / contain no-repeat;
  opacity:0.10;
}
@media (max-width:600px){ .proj-watermark--sm{ width:58px; height:17px; right:10px; top:8px; } }

/* ============================================================================
   20. START YOUR PROJECT — full-bleed construction-site CTA background
   Twilight towers frame the edges; dark navy center supports the headline.
   Sophisticated navy gradient overlay keeps white type readable while the
   buildings + crane stay recognizable. Decorative background (empty alt).
   ========================================================================== */
.cta-band--photo{
  background: #0A1420 !important;   /* fallback base under the photo */
  border-color: rgba(255,255,255,0.10) !important;
  /* Restore a compact, wide footprint close to the original band so the 16:9
     photo is shown as a wide architectural background, not a zoomed crop.
     Aspect ratio near 16:9 means object-fit:cover barely crops the source. */
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) !important;
  aspect-ratio: 16 / 9;                /* match the source image → object-fit:cover barely crops */
  min-height: 380px;                   /* guarantee room for the centred content */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  isolation: isolate;
}
.cta-band__bg{
  position:absolute; inset:0; z-index:0; display:block; pointer-events:none;
}
.cta-band__bg img{
  width:100%; height:100%; object-fit:cover;
  /* wide band ≈ image ratio, so this stays close to the true composition;
     centre keeps both framing towers + the dark negative-space middle */
  object-position: center center;
}
/* Sophisticated overlay: darker at centre-behind-text for legibility, lighter
   toward the sides so the towers/crane stay clearly visible; plus a subtle
   navy top-to-bottom wash for depth. */
.cta-band__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(115% 80% at 50% 62%, rgba(9,17,28,0.82) 0%, rgba(9,17,28,0.55) 40%, rgba(9,17,28,0.20) 74%, rgba(9,17,28,0.08) 100%),
    linear-gradient(180deg, rgba(9,17,28,0.42) 0%, rgba(9,17,28,0.22) 38%, rgba(9,17,28,0.40) 100%);
}
/* Lift all content above the photo + overlay */
.cta-band--photo > :not(.cta-band__bg):not(.cta-band__overlay){ position:relative; z-index:2; }
/* keep the orange glow, but a touch subtler over photography */
.cta-band--photo .cta-band__glow{ opacity:0.7; }
/* headline: ensure crisp legibility over imagery */
.cta-band--photo h2{ text-shadow: 0 2px 24px rgba(0,0,0,0.45); }
.cta-band--photo > p{ text-shadow: 0 1px 14px rgba(0,0,0,0.4); }

/* Tablet: relax the wide ratio (viewport narrower), keep the crane/tower in frame */
@media (max-width: 900px){
  .cta-band--photo{ aspect-ratio: 16 / 10; min-height: 420px; }
  .cta-band__bg img{ object-position: 60% center; }
  .cta-band__overlay{
    background:
      radial-gradient(140% 90% at 50% 55%, rgba(9,17,28,0.80) 0%, rgba(9,17,28,0.58) 46%, rgba(9,17,28,0.34) 100%),
      linear-gradient(180deg, rgba(9,17,28,0.42), rgba(9,17,28,0.46));
  }
}
/* Mobile: let content drive height (drop the wide aspect); intelligent crop but no extra zoom */
@media (max-width: 560px){
  .cta-band--photo{ aspect-ratio: auto; min-height: 0; padding-block: clamp(3.25rem, 2rem + 6vw, 4.5rem) !important; }
  .cta-band__bg img{ object-position: 66% center; }
  .cta-band__overlay{
    background: linear-gradient(180deg, rgba(9,17,28,0.66) 0%, rgba(9,17,28,0.80) 100%);
  }
}

/* ---- 21. On-page anchor navigation: smooth scroll + comfortable offset ---- */
html{ scroll-behavior: smooth; }
:target, [id]{ scroll-margin-top: 84px; }  /* clean landing below the top bar */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ============================================================================
   22. SIKA DISTRIBUTION — editorial full-bleed band (replaces the yellow card)
   MCT message dominant on the left over a navy scrim; the Sika product range
   emerges from MCT's dark environment on the right. Technical category taxonomy
   connects the range to MCT engineering. Sika stays genuine but never dominant.
   ========================================================================== */
.sika-dist{ padding:0 !important; }
.sika-dist__inner{
  position:relative; overflow:hidden;
  min-height:clamp(460px, 46vw, 620px);
  display:flex; align-items:center;
  background:#0A1420;
  border-block:1px solid rgba(255,255,255,0.06);
  isolation:isolate;
}
.sika-dist__bg{ position:absolute; inset:0; z-index:0; }
.sika-dist__bg img{
  width:100%; height:100%; object-fit:cover;
  object-position:right center;   /* anchor products to the right */
}
/* Navy scrim: opaque left (text zone) → clear right (products visible),
   plus a base tint so the bright yellow reads as part of MCT's dark world. */
.sika-dist__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, #0A1420 0%, #0A1420 34%, rgba(10,20,32,0.86) 48%, rgba(10,20,32,0.35) 72%, rgba(10,20,32,0.15) 100%),
    linear-gradient(0deg, rgba(10,20,32,0.35), rgba(10,20,32,0.10));
}
.sika-dist__content{
  position:relative; z-index:2;
  width:min(100%, var(--container, 1200px));
  margin-inline:auto; padding-inline:clamp(1.5rem, 4vw, 4rem);
  max-width:none;
}
.sika-dist__content > *{ max-width:34rem; }
.sika-dist__eyebrow{
  font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent); margin:0 0 1rem;
  display:inline-flex; align-items:center; gap:0.6rem;
}
.sika-dist__eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.sika-dist__title{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.02em;
  font-size:clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); line-height:1.06;
  color:#fff; margin:0; text-shadow:0 2px 24px rgba(0,0,0,0.5);
}
.sika-dist__lede{
  color:rgba(226,234,242,0.86); font-size:clamp(1rem,0.95rem+0.3vw,1.15rem);
  line-height:1.6; margin:1.25rem 0 0; text-shadow:0 1px 12px rgba(0,0,0,0.4);
}
/* Technical category taxonomy — thin rules, not cards */
.sika-dist__cats{
  list-style:none; margin:1.75rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:0.5rem 0;
  max-width:34rem;
}
.sika-dist__cats li{
  font-size:0.82rem; font-weight:600; letter-spacing:0.01em; color:rgba(226,234,242,0.92);
  padding:0.35rem 0.9rem; position:relative;
}
.sika-dist__cats li:not(:last-child)::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:1px; height:14px; background:rgba(255,255,255,0.16);
}
.sika-dist__cats li:first-child{ padding-left:0; }
.sika-dist__actions{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:2rem; }
/* Ghost (secondary) button: refined outline over photography */
.btn--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.28);
  padding:0.8rem 1.4rem; border-radius:10px; font-weight:600;
  transition:border-color .2s, background .2s;
}
.btn--ghost:hover{ border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.06); }

/* Tablet: products recede further, text panel widens */
@media (max-width:900px){
  .sika-dist__inner{ min-height:520px; }
  .sika-dist__bg img{ object-position:72% center; }
  .sika-dist__scrim{
    background:
      linear-gradient(90deg, #0A1420 0%, rgba(10,20,32,0.92) 40%, rgba(10,20,32,0.55) 78%, rgba(10,20,32,0.35) 100%),
      linear-gradient(0deg, rgba(10,20,32,0.45), rgba(10,20,32,0.12));
  }
}
/* Mobile: product band on top, content below on a solid base for legibility */
@media (max-width:600px){
  .sika-dist__inner{ min-height:0; flex-direction:column; align-items:stretch; }
  .sika-dist__bg{ position:relative; height:230px; }
  .sika-dist__bg img{ object-position:center center; }
  .sika-dist__scrim{
    background:linear-gradient(180deg, rgba(10,20,32,0.20) 0%, rgba(10,20,32,0.55) 70%, #0A1420 100%);
  }
  .sika-dist__content{ padding-block:2.25rem 2.75rem; }
  .sika-dist__content > *{ max-width:none; }
  .sika-dist__cats{ max-width:none; }
}

/* ============================================================================
   23. GLOBAL ART-DIRECTION SYSTEM — section rhythm, reduced card/border noise
   ========================================================================== */

/* Deliberate section rhythm: alternate dark / elevated / deep tones so the page
   reads as an art-directed sequence rather than uniform panels. */
.section--tint{ background:linear-gradient(180deg,#0C1826,#0A1420) !important; }
.section{ position:relative; }

/* Thin architectural top-rule on major sections (technical, not decorative) */
.section[aria-labelledby]::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(100% - 3rem, var(--container,1200px)); height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.09) 20%, rgba(255,255,255,0.09) 80%, transparent);
  opacity:0.7;
}
/* Sika band + hero manage their own edges */
.sika-dist::before, .cta-band--photo::before{ display:none !important; }

/* Section heads: keep the eyebrow but make it a refined technical index marker,
   not a loud orange repeat. Add a small monospace-feel section number rhythm. */
.sec-head .t-overline, .t-overline{
  font-weight:700; letter-spacing:0.16em; font-size:0.72rem;
}

/* Reduce the "rounded card" reflex globally: flatter radii, hairline borders,
   remove heavy fills. Cards become quiet surfaces, not boxes. */
.why-card, .ind-card, .kn-card, .dl-item, .cert, .qual-item, .sup-card,
.product-card, .project{
  border-radius:10px;
}
.why-card, .sup-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005)) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
}

/* Buttons: tighten into a consistent premium system */
.btn{ border-radius:10px; font-weight:600; letter-spacing:0.005em; }
.btn--primary{ box-shadow:0 1px 0 rgba(255,255,255,0.12) inset, 0 8px 22px rgba(233,114,28,0.18); }
.btn__arrow{ margin-left:0.5rem; transition:transform .2s; display:inline-block; }
.btn:hover .btn__arrow{ transform:translateX(3px); }

/* "View all / link-more" refined as a technical link with rule, not a chip */
.link-more{
  font-weight:600; font-size:0.9rem; color:var(--accent);
  display:inline-flex; align-items:center; gap:0.5rem; position:relative;
}
.link-more::after{ content:"→"; transition:transform .2s; }
.link-more:hover::after{ transform:translateX(3px); }

/* ============================================================================
   24. PROJECTS — engineering portfolio (editorial, photographic weight)
   ========================================================================== */
.proj-head{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:2.5rem; }
.proj-head__note{ color:var(--text-secondary); font-size:0.98rem; line-height:1.6; max-width:40ch; justify-self:end; }
@media (max-width:760px){ .proj-head{ grid-template-columns:1fr; gap:1rem; } .proj-head__note{ justify-self:start; } }

/* Large lead project — full-width architectural image with overlaid data panel */
.proj-lead{
  display:block; position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:2.4/1; min-height:340px; border:1px solid rgba(255,255,255,0.08);
  text-decoration:none;
}
.proj-lead__img{ position:absolute; inset:0; }
.proj-lead__img img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:1 !important; }
.proj-lead::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,14,22,0.95) 0%, rgba(8,14,22,0.82) 30%, rgba(8,14,22,0.30) 60%, transparent 100%);
}
.proj-lead__panel{ position:absolute; left:0; bottom:0; z-index:2; padding:clamp(1.5rem,3vw,2.75rem); display:flex; flex-direction:column; gap:0.5rem; max-width:34rem; }
.proj-lead__tag{ font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.proj-lead__name{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,1.1rem+1.6vw,2.4rem); color:#fff; letter-spacing:-0.02em; line-height:1.05; }
.proj-lead__loc{ color:rgba(226,234,242,0.85); font-size:0.95rem; }
.proj-lead__scope{ color:rgba(226,234,242,0.72); font-size:0.9rem; line-height:1.5; margin-top:0.25rem; }
.proj-lead__cta{ color:var(--accent); font-weight:600; font-size:0.92rem; margin-top:0.6rem; }
.proj-lead:hover .proj-lead__cta span{ display:inline-block; transform:translateX(3px); transition:transform .2s; }

/* Lower row: 2 photo items + references column */
.proj-row{ display:grid; grid-template-columns:1fr 1fr 0.85fr; gap:1.25rem; margin-top:1.25rem; }
@media (max-width:900px){ .proj-row{ grid-template-columns:1fr 1fr; } .proj-refs{ grid-column:1/-1; } }
@media (max-width:560px){ .proj-row{ grid-template-columns:1fr; } }
.proj-item{ position:relative; display:block; border-radius:12px; overflow:hidden; aspect-ratio:3/2; border:1px solid rgba(255,255,255,0.08); text-decoration:none; }
.proj-item__img{ position:absolute; inset:0; }
.proj-item__img img{ width:100%; height:100%; object-fit:cover; opacity:1 !important; }
.proj-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,14,22,0.90), rgba(8,14,22,0.10) 55%, transparent); }
.proj-item__meta{ position:absolute; left:0; bottom:0; z-index:2; padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:0.15rem; }
.proj-item__meta b{ color:#fff; font-weight:700; font-size:1.05rem; }
.proj-item__meta span{ color:rgba(226,234,242,0.78); font-size:0.82rem; }

/* References column — text-forward, no empty photo boxes */
.proj-refs{ border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:1.5rem; display:flex; flex-direction:column; gap:0.75rem; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }
.proj-refs__label{ font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); margin:0 0 0.25rem; }
.proj-ref{ display:flex; justify-content:space-between; align-items:baseline; padding:0.6rem 0; border-top:1px solid rgba(255,255,255,0.06); text-decoration:none; }
.proj-ref__name{ color:#fff; font-weight:600; font-size:0.98rem; }
.proj-ref__loc{ color:var(--text-secondary); font-size:0.8rem; }
.proj-ref--cta{ color:var(--accent); font-weight:600; font-size:0.9rem; border-top:1px solid rgba(255,255,255,0.06); padding-top:0.9rem; margin-top:0.25rem; }
.proj-ref--cta span{ transition:transform .2s; display:inline-block; }
.proj-ref--cta:hover span{ transform:translateX(3px); }
@media (max-width:900px){ .proj-lead{ aspect-ratio:16/9; } }
@media (max-width:560px){ .proj-lead{ aspect-ratio:4/5; } .proj-lead::after{ background:linear-gradient(0deg, rgba(8,14,22,0.94) 0%, rgba(8,14,22,0.55) 45%, rgba(8,14,22,0.15) 100%); } }

/* ============================================================================
   25. KNOWLEDGE — technical publication index (no weak image boxes)
   ========================================================================== */
.kn-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:2rem; flex-wrap:wrap; }
.kn-list{ border-top:1px solid rgba(255,255,255,0.10); }
.kn-entry{
  display:grid; grid-template-columns:auto 9rem 1fr auto; align-items:center; gap:1.5rem;
  padding:1.5rem 0.5rem; border-bottom:1px solid rgba(255,255,255,0.08);
  text-decoration:none; transition:background .2s, padding-left .2s;
}
.kn-entry:hover{ background:linear-gradient(90deg, rgba(233,114,28,0.06), transparent); padding-left:1rem; }
.kn-entry__no{ font-family:var(--font-display); font-size:0.9rem; color:var(--accent); font-weight:700; letter-spacing:0.05em; }
.kn-entry__cat{ font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-secondary); }
.kn-entry__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.05rem,0.95rem+0.5vw,1.3rem); color:#fff; letter-spacing:-0.01em; line-height:1.25; }
.kn-entry__meta{ font-size:0.82rem; color:var(--text-secondary); display:inline-flex; align-items:center; gap:0.8rem; white-space:nowrap; }
.kn-entry__meta span{ color:var(--accent); font-weight:700; transition:transform .2s; }
.kn-entry:hover .kn-entry__meta span{ transform:translateX(3px); }
@media (max-width:760px){
  .kn-entry{ grid-template-columns:auto 1fr; gap:0.4rem 1rem; padding:1.25rem 0.25rem; }
  .kn-entry__no{ grid-row:1/3; align-self:start; }
  .kn-entry__cat{ grid-column:2; }
  .kn-entry__title{ grid-column:2; }
  .kn-entry__meta{ grid-column:2; margin-top:0.25rem; }
}

/* ============================================================================
   26. DOWNLOADS — professional technical resource table (split layout)
   ========================================================================== */
.dl-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width:860px){ .dl-layout{ grid-template-columns:1fr; gap:2rem; } }
.dl-intro__note{ color:var(--text-secondary); font-size:1rem; line-height:1.6; max-width:38ch; margin:1.25rem 0 1.75rem; }
.dl-table{ border-top:1px solid rgba(255,255,255,0.12); }
.dl-row{
  display:grid; grid-template-columns:3.5rem 1fr auto 2rem; align-items:center; gap:1.25rem;
  padding:1.25rem 0.5rem; border-bottom:1px solid rgba(255,255,255,0.08);
  text-decoration:none; transition:background .2s, padding-left .2s;
}
.dl-row:hover{ background:linear-gradient(90deg, rgba(233,114,28,0.06), transparent); padding-left:1rem; }
.dl-row__type{ font-size:0.68rem; font-weight:700; letter-spacing:0.08em; color:var(--accent); border:1px solid rgba(233,114,28,0.35); border-radius:5px; padding:0.25rem 0; text-align:center; }
.dl-row__name{ color:#fff; font-weight:600; font-size:1rem; }
.dl-row__size{ color:var(--text-secondary); font-size:0.82rem; font-variant-numeric:tabular-nums; }
.dl-row__act{ color:var(--accent); font-weight:700; text-align:center; transition:transform .2s; }
.dl-row:hover .dl-row__act{ transform:translateY(2px); }

/* ============================================================================
   27. TECHNICAL SUPPORT — engineering capability (numbered, ruled, no cards)
   ========================================================================== */
.sup-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:860px){ .sup-grid{ grid-template-columns:1fr; gap:2.5rem; } }
.sup-lead__body{ color:var(--text-secondary); font-size:1.05rem; line-height:1.65; margin:1.25rem 0 1.75rem; max-width:44ch; }
.sup-lead__actions{ display:flex; flex-wrap:wrap; gap:0.75rem; }
.sup-caps{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,0.12); }
.sup-cap{ display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding:1.4rem 0; border-bottom:1px solid rgba(255,255,255,0.09); align-items:baseline; }
.sup-cap__no{ font-family:var(--font-display); font-weight:700; font-size:0.9rem; color:var(--accent); letter-spacing:0.05em; }
.sup-cap__body{ display:flex; flex-direction:column; gap:0.3rem; }
.sup-cap__body b{ color:#fff; font-weight:700; font-size:1.08rem; }
.sup-cap__body span{ color:var(--text-secondary); font-size:0.92rem; line-height:1.55; }

/* ============================================================================
   28. INDUSTRIES — editorial mosaic (asymmetric, architectural weight)
   Clean-tiling 12-col layout: rows sum to 12 with no gaps.
   Row1: Commercial(6, tall x2) · Industrial(6) / Infrastructure(6)
   Row2: Residential(6) · Water(6)
   Row3: Car Parks(6) · Precast & Concrete Mfg(3) · Protective Coating(3)
   ========================================================================== */
@media (min-width:901px){
  .industry-grid{ grid-template-columns:repeat(12,1fr) !important; grid-auto-rows:210px; gap:1rem !important; grid-auto-flow:row dense; }
  .industry:nth-child(1){ grid-column:span 6; grid-row:span 2; } /* Commercial — large hero */
  .industry:nth-child(2){ grid-column:span 6; }                  /* Industrial */
  .industry:nth-child(3){ grid-column:span 6; }                  /* Infrastructure */
  .industry:nth-child(4){ grid-column:span 6; }                  /* Water Retaining */
  .industry:nth-child(5){ grid-column:span 6; }                  /* Residential */
  .industry:nth-child(8){ grid-column:span 6; }                  /* Car Parks */
  .industry:nth-child(6){ grid-column:span 3; }                  /* Precast & Concrete Manufacturing */
  .industry:nth-child(7){ grid-column:span 3; }                  /* Protective Coating */
  .industry{ aspect-ratio:auto !important; height:100%; }
}
/* Refine label typography + gradient for a more architectural read */
.industry span{ font-size:1.02rem; letter-spacing:-0.01em; text-shadow:0 1px 10px rgba(0,0,0,0.5); }
.industry::before{ background:linear-gradient(to top, rgba(6,12,20,0.90), rgba(6,12,20,0.10) 60%, transparent) !important; }
.industry > .pic .tile-img{ transition:transform .5s ease; }
.industry:hover > .pic .tile-img{ transform:scale(1.04); }

/* ============================================================================
   29. PRODUCTS — technical catalogue with MCT vs Sika brand architecture
   ========================================================================== */
.prod-head{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:end; margin-bottom:2rem; }
.prod-head__note{ color:var(--text-secondary); font-size:0.98rem; line-height:1.6; max-width:44ch; justify-self:end; }
@media (max-width:760px){ .prod-head{ grid-template-columns:1fr; } .prod-head__note{ justify-self:start; } }

/* Two-brand architecture rail — MCT dominant, Sika clearly the distributed brand */
.prod-brands{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:2.5rem; }
@media (max-width:640px){ .prod-brands{ grid-template-columns:1fr; } }
.prod-brand{ padding:1.4rem 1.5rem; border-radius:12px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); position:relative; }
.prod-brand__tag{ display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.35rem 0.7rem; border-radius:6px; margin-bottom:0.75rem; }
.prod-brand__tag--mct{ color:#fff; background:var(--accent); }
.prod-brand__tag--sika{ color:var(--accent); background:transparent; border:1px solid rgba(233,114,28,0.4); }
.prod-brand__desc{ color:var(--text-secondary); font-size:0.92rem; line-height:1.55; margin:0; }
.prod-rail-label{ font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-secondary); margin:0 0 1rem; }
.prod-cta-row{ margin-top:1.75rem; }
/* refine the product cards into a cleaner catalogue treatment */
.product-card{ border:1px solid rgba(255,255,255,0.08) !important; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent) !important; }
.product-card__brand{ color:var(--accent); font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }

/* ============================================================================
   30. CHAKORE — remove empty placeholder boxes; 2 real photos + text scope
   ========================================================================== */
.proj-apps--two{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media (max-width:640px){ .proj-apps--two{ grid-template-columns:1fr; } }
.proj-apps--two .proj-app{ aspect-ratio:auto; }
.proj-apps--two .proj-app--photo .pic{ aspect-ratio:3/2; display:block; position:relative; border-radius:12px; overflow:hidden; }
.proj-apps--two .proj-app__cap{ padding-top:0.9rem; }
.proj-apps--two .proj-app__cap b{ color:#fff; font-weight:700; display:block; }
.proj-apps--two .proj-app__cap span{ color:var(--text-secondary); font-size:0.88rem; }

/* Technical scope — ruled text list, no empty photo boxes */
.proj-scope-list{ list-style:none; margin:1rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid rgba(255,255,255,0.10); }
@media (max-width:640px){ .proj-scope-list{ grid-template-columns:1fr; } }
.proj-scope-list li{ padding:1.1rem 1.25rem 1.1rem 0; border-bottom:1px solid rgba(255,255,255,0.07); }
.proj-scope-list li:nth-child(odd){ border-right:1px solid rgba(255,255,255,0.07); padding-right:2rem; }
@media (max-width:640px){ .proj-scope-list li:nth-child(odd){ border-right:none; padding-right:0; } }
.proj-scope-list b{ color:#fff; font-weight:700; font-size:1rem; display:block; margin-bottom:0.2rem; }
.proj-scope-list span{ color:var(--text-secondary); font-size:0.9rem; line-height:1.5; }

/* ============================================================================
   31. CERTIFICATIONS — authoritative editorial (no bordered card grid)
   ========================================================================== */
.cert-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:860px){ .cert-grid{ grid-template-columns:1fr; gap:2rem; } }
.cert-lead__body{ color:var(--text-secondary); font-size:1.05rem; line-height:1.65; margin-top:1.25rem; max-width:42ch; }
.cert-list{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,0.12); }
.cert-list li{ display:grid; grid-template-columns:1fr; gap:0.25rem; padding:1.25rem 0 1.25rem 2.25rem; border-bottom:1px solid rgba(255,255,255,0.08); position:relative; }
.cert-list li::before{ content:""; position:absolute; left:0; top:1.55rem; width:12px; height:2px; background:var(--accent); }
.cert-list__t{ color:#fff; font-weight:700; font-size:1.05rem; }
.cert-list__d{ color:var(--text-secondary); font-size:0.92rem; line-height:1.5; }

/* ============================================================================
   32. STATS — authoritative ruled technical band
   ========================================================================== */
.stats-band--ruled{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,0.12); border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
@media (max-width:640px){ .stats-band--ruled{ grid-template-columns:1fr 1fr; } }
.stats-band--ruled .stat-b{
  padding:clamp(1.75rem,3vw,2.75rem) 1.5rem; text-align:left;
  border-right:1px solid rgba(255,255,255,0.08); border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; flex-direction:column; gap:0.4rem; margin:0;
}
.stats-band--ruled .stat-b:last-child{ border-right:none; }
@media (min-width:641px){ .stats-band--ruled .stat-b{ border-bottom:none; } .stats-band--ruled .stat-b:nth-child(4){ border-right:none; } }
@media (max-width:640px){ .stats-band--ruled .stat-b:nth-child(2n){ border-right:none; } .stats-band--ruled .stat-b:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,0.08); } }
.stats-band--ruled .stat-b b{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,1.3rem+1.6vw,2.7rem); color:#fff; letter-spacing:-0.02em; line-height:1; }
.stats-band--ruled .stat-b span{ color:var(--text-secondary); font-size:0.82rem; letter-spacing:0.02em; }
/* accent tick before each number for a technical read */
.stats-band--ruled .stat-b::before{ content:""; width:22px; height:2px; background:var(--accent); border-radius:2px; margin-bottom:0.25rem; }

/* ============================================================================
   33. CONTACT — precise CTA (not a giant orange block), refined photo & fields
   ========================================================================== */
/* Submit button: sized to content, not a full-width slab */
.contact__form button[type="submit"], .contact__form .btn--primary{
  justify-self:start; align-self:start; width:auto; height:auto; padding:0.95rem 2.2rem; margin-top:0.5rem;
}
/* Form fields: quieter, more technical */
.contact__form .field input,
.contact__form .field textarea{
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  transition:border-color .2s;
}
.contact__form .field input:focus,
.contact__form .field textarea:focus{ border-color:rgba(233,114,28,0.55); outline:none; }
.contact__form .field label{ color:var(--text-secondary); font-size:0.85rem; letter-spacing:0.01em; }
/* Contact photo: refined architectural crop, less "card" */
.contact__illus{ max-width:none !important; }
.contact__illus .pic{ border-radius:12px; overflow:hidden; aspect-ratio:4/3; border:1px solid rgba(255,255,255,0.08); position:relative; display:block; }
.contact__illus .pic img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================================
   34. HERO — less "rounded card", more architectural image treatment
   ========================================================================== */
.hero__stage{
  border-radius:4px !important;      /* subtle, not a pronounced card */
  border:1px solid rgba(255,255,255,0.06);
}
/* a fine navy vignette so the photo integrates rather than floating as a card */
.hero__stage::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 60px rgba(8,14,22,0.35);
  border-radius:inherit;
}

/* Water Retaining tile: keep the dam wall + waterline in frame on the wide mosaic tile */
.industry:nth-child(4) .tile-img{ object-position:center 62%; }

/* ============================================================================
   35. UTILITY BAR — shed items before the line can clip
   Section 14 locks the bar's height with overflow:hidden so a webfont swap can
   never reflow it. That guard alone let the identity line be sliced mid-word
   between 721px and full desktop (473px of text cut at 768px). These rules drop
   the least-critical item at each step instead, so the bar always reads as a
   finished sentence. Nothing is hidden at full desktop width.
   ========================================================================== */
@media (max-width:1320px){
  /* drop "Technical Engineering Support" — it has its own full section below */
  .util__identity > span:nth-child(4),
  .util__identity > span:nth-child(5){ display:none; }
}
@media (max-width:1080px){
  /* drop the email address — phone + WhatsApp remain, and it repeats in Contact */
  .util__contact a[href^="mailto"]{ display:none; }
}
@media (max-width:900px){
  /* drop the distributor line — it is the hero's and Products' headline claim */
  .util__identity > span:nth-child(2),
  .util__identity > span:nth-child(3){ display:none; }
}

/* ============================================================================
   36. CONTACT FORM — submit feedback
   The quick-enquiry form validates and hands off to the published MCT mailbox;
   this is the inline confirmation / correction line it writes to.
   ========================================================================== */
.contact__form-status{
  margin-top:0.9rem;
  font-size:0.92rem;
  line-height:1.55;
  padding:0.7rem 0.9rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  color:var(--text-secondary);
}
.contact__form-status[data-state="ok"]{
  border-color:rgba(197,90,17,0.45);
  color:var(--text-primary);
}
.contact__form-status[data-state="error"]{
  border-color:rgba(255,255,255,0.22);
  color:var(--text-primary);
}

/* ============================================================================
   37. STATS BAND — even columns on mobile
   .stats-band (homepage.css) sets a grid gap; the ruled variant keeps it, so at
   <=640px the default `1fr` columns were floored by their longest label and
   computed unevenly (224px + 121px + gap), pushing both right-hand cells past
   the band's own rounded, overflow-hidden edge. minmax(0,1fr) lets the labels
   wrap instead, so the two columns are exactly equal and nothing is cut.
   Desktop (4 columns) is untouched.
   ========================================================================== */
@media (max-width:640px){
  .stats-band--ruled{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================================
   38. SYSTEMS — "From Foundation to Finishing" portfolio cards
   Completes the four-card stub into the full catalogue-derived system set.
   Card chrome is the untouched .card / .card--interactive (background, border,
   radius, padding, hover); this only adds the photo band, the automatic number
   and a clean 4/2/1 grid. Numbering is a CSS counter, so cards can be added or
   reordered without the sequence ever drifting.
   ========================================================================== */
.sys-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-4);
  counter-reset:sys;
}
@media (max-width:1024px){ .sys-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .sys-grid{ grid-template-columns:1fr; } }

/* .card--interactive is justify-content:flex-end; on a column card that pushes
   the photo down whenever the description is short, and art-direction.css loads
   after this file so equal specificity loses. Pack from the top instead
   so every photo band sits flush with the card edge. */
.sys-grid .sys-card{ counter-increment:sys; display:flex; flex-direction:column; justify-content:flex-start; overflow:hidden; }

/* photo band: bleeds to the card edge, inheriting the card's own top corners */
.sys-card .sys-card__img{
  display:block; position:relative;
  aspect-ratio:3/2;
  /* .pic sets width/height:100%; override both so the ratio drives the box and
     flex can never stretch it (that made one card's photo 4:3 instead of 3:2) */
  /* aspect-ratio suppresses flex cross-axis stretch, so size the bleed
     explicitly: content width + the card's 1.7rem left/right padding */
  /* the global "img, picture { max-width:100% }" reset clamps the bleed */
  width:calc(100% + 3.4rem); max-width:none; height:auto; flex:none;
  /* bleed to the card edge: .card--interactive padding is 1.9rem 1.7rem
     (art-direction.css), and .card radius is 4px with a 1px border */
  margin:-1.9rem -1.7rem var(--space-4);
  border-radius:3px 3px 0 0;
  overflow:hidden;
  background:var(--bg-sunken,#0A1019);
}
.sys-card .sys-card__img .tile-img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease-standard,ease);
}
.sys-card:hover .sys-card__img .tile-img{ transform:scale(1.04); }
@media (prefers-reduced-motion:reduce){
  .sys-card__img .tile-img{ transition:none; }
  .sys-card:hover .sys-card__img .tile-img{ transform:none; }
}

/* eyebrow row: automatic 01..NN in the same treatment as .sup-cap__no */
.sys-card__eyebrow{ display:flex; align-items:baseline; gap:0.6rem; }
.sys-card__no::before{
  content:counter(sys,decimal-leading-zero);
  font-family:var(--font-display); font-weight:700; font-size:0.9rem;
  color:var(--accent); letter-spacing:0.05em;
}
.sys-card__no::after{
  content:""; display:inline-block; width:14px; height:1px;
  background:var(--border-strong); margin-left:0.6rem; vertical-align:middle;
}
.sys-card__name{ margin-top:var(--space-2); }
.sys-card__desc{ margin-top:var(--space-2); }

/* ============================================================================
   39. ENVIRONMENT CARDS — one scrim, no seam
   Three scrims were stacked on every .industry card: ::before (full card,
   homepage.css + §28 here) plus TWO competing ::after rules (§15 here, and
   art-direction.css which loads later and won). The surviving ::after kept
   §15's geometry -- inset:auto 0 0 0; height:55% -- so it was a gradient
   compressed into the bottom 55%, reaching transparency at ~39% of card
   height, while ::before carried on as a shallow tail to the top. Measured on
   the live page that summed to a peak alpha of 1.76 (more than opaque) with a
   slope discontinuity of 0.0144 where the band ended: the visible horizontal
   line across the middle of the photographs.

   Fix: one scrim. ::before is neutralised; a single full-height ::after
   follows a power-ease ramp (0.90 at the bottom, reaching exactly 0 at the
   top) whose slope decreases monotonically, so no seam can exist. Selector is
   .industry-grid .industry to outrank art-direction.css, which loads after
   this file. Photograph, title, orange rule and hover are untouched.
   ========================================================================== */
.industry-grid .industry::before{ background:none !important; }
.industry-grid .industry::after{
  content:""; position:absolute; inset:0; height:auto; width:auto;
  z-index:1; pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,12,20,0.90) 0%,
    rgba(6,12,20,0.72) 10%,
    rgba(6,12,20,0.57) 20%,
    rgba(6,12,20,0.43) 30%,
    rgba(6,12,20,0.31) 40%,
    rgba(6,12,20,0.21) 50%,
    rgba(6,12,20,0.13) 60%,
    rgba(6,12,20,0.07) 70%,
    rgba(6,12,20,0.04) 80%,
    rgba(6,12,20,0.01) 90%,
    rgba(6,12,20,0.00) 100%) !important;
}
/* title, accent rule and photo keep their existing stacking order */
.industry-grid .industry > span{ position:relative; z-index:2; }
.industry-grid .industry > .pic{ z-index:0; }

/* ============================================================================
   40. SEGMENT CARDS — representative product families
   The card already names the segment (layer A) and describes it. This adds the
   PIM product-family layer (layer B, mct_category term names) as a quiet
   footer line, so a specifier can see what sits inside a segment without the
   page needing a separate families section. margin-top:auto pins it to the
   card foot so the lines align across a row regardless of description length.
   ========================================================================== */
.sys-grid .sys-card__fam{
  margin-top:auto;
  padding-top:0.75rem;
  border-top:1px solid var(--border-hairline);
  font-size:0.76rem;
  line-height:1.5;
  letter-spacing:0.01em;
  color:var(--text-secondary);
  opacity:0.92;
}
.sys-grid .sys-card__desc{ margin-bottom:0.9rem; }


/* ============================================================================
   22. CTA BAND — cta-band-overflow-fix
   `.cta-band--photo` sets `aspect-ratio:16/10` with `min-height:420px` below
   900px. Once the height floor dominates, the used width is derived from the
   height (420 x 16/10 = 672px) and nothing capped it, so the band stayed 672px
   wide and the page scrolled horizontally between 561px and 691px viewports.
   Measured: 131px of document overflow at 561px, 72px at 620px, 32px at 660px.
   Below 561px an existing rule already drops the ratio, which is why the defect
   was confined to that band. Capping the width lets min-height win instead.
   No-op at >=1024px: band geometry is identical with and without this rule.
   ========================================================================== */
.cta-band--photo{ max-width: 100%; }


/* ============================================================================
   23. CTA BAND — cta-band-layer-fix
   art-direction.css (loaded last) contains a broad utility:
       [class*="cta"] > *{ position:relative; z-index:2; }
   [class*="cta"] matches `cta-band`, so `> *` also matched .cta-band__bg and
   .cta-band__overlay. Both those rules and the utility have specificity
   (0,1,0), so the later file won: the background <picture> lost
   position:absolute and became an in-flow flex item stacked ABOVE the copy,
   while the overlay collapsed to zero height.
   Consequence: content exceeded the band's aspect-ratio height and
   overflow:hidden clipped it, so BOTH call-to-action buttons were invisible
   at every width from 561px to 1920px. Only <=560px rendered correctly.
   Restored at specificity (0,2,0) so cascade order no longer matters. The
   broad utility is deliberately left untouched — other components may rely
   on it. Band dimensions are unchanged at every width.
   ========================================================================== */
.cta-band--photo > .cta-band__bg{ position:absolute; inset:0; z-index:0; }
.cta-band--photo > .cta-band__overlay{ position:absolute; inset:0; z-index:1; }