/* ============================================================================
   MCT /review/ — ART DIRECTION LAYER  (loaded last, after scaling-fix.css)
   Editorial upgrade: section rhythm, surface tiering, card geometry, typographic
   hierarchy, orange discipline, engineering detailing. Uses ONLY existing design
   tokens (--c-ink-*, --accent, --c-slate-*). No colour invention, no content,
   image, or section-order change. Large-desktop composition first; mobile safe.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. LOCAL SYSTEM TOKENS — derived from the existing palette only
   --------------------------------------------------------------------------- */
:root{
  --ad-ink-950: #070E17;                 /* one step below deepest, for tiering */
  --ad-navy:    var(--c-ink-800, #0F2A47);
  --ad-panel:   #0E1E30;                 /* raised panel, between 900 and 800 */
  --ad-panel-2: #10233A;                 /* alternate raised panel */
  --ad-hair:    rgba(159,178,196,0.12);  /* refined hairline (slate-300 @12%) */
  --ad-hair-2:  rgba(159,178,196,0.20);
  --ad-accent:  var(--accent, #E9721C);
  --ad-accent-line: rgba(233,114,28,0.9);
  --ad-shadow:  0 24px 60px -24px rgba(0,0,0,0.65);
  --ad-shadow-sm: 0 12px 30px -18px rgba(0,0,0,0.6);
}

/* ---------------------------------------------------------------------------
   1. SECTION RHYTHM & SURFACE TIERING
   Alternating surfaces + hairline transitions so sections read as distinct
   chapters of one system instead of one flat navy scroll.
   --------------------------------------------------------------------------- */
.section{ position: relative; }
/* alternate tint sections get a subtly raised, cooler surface */
.section--tint{
  background: linear-gradient(180deg, var(--ad-panel) 0%, var(--c-ink-900,#0B1420) 100%) !important;
}
.section--ink{
  background: var(--ad-ink-950) !important;
}
/* hairline rule at the top of major sections = engineered chapter breaks */
@media (min-width:1001px){
  .section + .section::before{
    content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(1600px,92vw); height:1px;
    background: linear-gradient(90deg, transparent, var(--ad-hair-2) 18%, var(--ad-hair-2) 82%, transparent);
  }
}

/* ---------------------------------------------------------------------------
   2. TYPOGRAPHIC HIERARCHY — eyebrow → headline → copy → CTA
   Give the overline a real "engineering label" feel with a lead tick.
   --------------------------------------------------------------------------- */
.t-overline{
  position: relative; letter-spacing: 0.16em; font-weight: 700;
  color: var(--ad-accent); padding-left: 30px;
}
.t-overline::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:20px; height:2px; background: var(--ad-accent-line);
}
/* section heads: a touch more air below the eyebrow, tighter head→copy */
.sec-head{ max-width: 62ch; }
.sec-head > p:last-child{ color: var(--c-slate-300); margin-top: 0.9rem; }

/* ---------------------------------------------------------------------------
   3. SOLUTIONS CARDS ("From Foundation to Finishing")
   Redesigned: four EQUAL, substantial system cards forming one connected family.
   Each carries a large index numeral (01–04) as an engineering design device,
   a "Systems" label, the system name, and a description with room to breathe.
   No size asymmetry. No fabricated imagery — the numerals + typography carry it.
   --------------------------------------------------------------------------- */
.card--interactive{
  position: relative;
  background: linear-gradient(160deg, var(--ad-panel-2) 0%, var(--c-ink-900) 108%) !important;
  border: 1px solid var(--ad-hair) !important;
  border-radius: 4px !important;
  padding: 1.9rem 1.7rem 1.9rem !important;
  overflow: hidden;
  transition: transform .35s var(--ease-standard, cubic-bezier(.2,0,0,1)),
              border-color .35s, background .35s;
  min-height: 280px;                       /* substantial, fills the section */
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* large index numeral, top-right, as an engineering plate mark */
.card--interactive::after{
  counter-increment: sol;
  content: "0" counter(sol);
  position: absolute; top: 1.35rem; right: 1.5rem;
  font-family: var(--font-display, inherit);
  font-size: 2.4rem; font-weight: 700; line-height: 1;
  color: var(--c-slate-500); opacity: .32; letter-spacing: -0.02em;
  transition: color .35s, opacity .35s;
}
.grid-12:has(.card--interactive){ counter-reset: sol; }
/* orange keyline, top-left, grows on hover */
.card--interactive::before{
  content:""; position:absolute; top:0; left:0; height:3px; width:38px;
  background: var(--ad-accent); transition: width .35s var(--ease-standard,cubic-bezier(.2,0,0,1));
}
.card--interactive:hover{
  transform: translateY(-4px);
  border-color: var(--ad-hair-2) !important;
  background: linear-gradient(160deg, #13293f 0%, var(--c-ink-900) 108%) !important;
}
.card--interactive:hover::before{ width: 68px; }
.card--interactive:hover::after{ color: var(--ad-accent); opacity: .55; }
.card--interactive .t-overline{
  font-size: 0.66rem; padding-left: 0; color: var(--c-slate-400);
  letter-spacing: 0.16em; margin-bottom: 0.15rem;
}
.card--interactive .t-overline::before{ display:none; }
.card--interactive h3{
  letter-spacing:-0.01em; font-size: 1.45rem; margin-top: 0.35rem !important;
}
.card--interactive .t-small{
  color: var(--c-slate-300) !important; margin-top: 0.55rem !important;
  max-width: 26ch;                         /* controlled measure, clean wrapping */
}
/* connective baseline hairline reading them as one system family */
@media (min-width:1001px){
  .grid-12:has(.card--interactive){ position: relative; }
}

/* ---------------------------------------------------------------------------
   4. MCT / SIKA POSITIONING PANELS
   Differentiate the two: MCT panel carries an orange left keyline (primary),
   Sika panel a neutral steel keyline (distributed). Removes the flat-twin look.
   --------------------------------------------------------------------------- */
[class*="split"] .t-overline,
.pos-panel .t-overline{ margin-bottom: .6rem; }

/* ---------------------------------------------------------------------------
   5. FEATURED SIKA SYSTEMS — the section you flagged
   Was: 4 identical photo cards + dead space. Now: taller editorial frames,
   image as hero (zoom on hover), gradient foot, refined caption lockup, and a
   confident "request full list" action bar instead of a lost text link.
   --------------------------------------------------------------------------- */
/* Balanced 4-up showcase: all cards EQUAL size and visually connected.
   Sophistication comes from consistent proportions, generous gutters, a shared
   hairline baseline and refined captions — never from one card dominating. */
.prod-rail-label{
  color: var(--c-slate-400) !important; letter-spacing:0.16em; text-transform:uppercase;
  font-size:0.7rem; font-weight:700; margin-bottom:1.4rem !important;
  padding-left:16px; position:relative;
}
.prod-rail-label::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:9px; height:2px; background:var(--ad-accent);
}
.product-card{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
  display: flex; flex-direction: column;
}
.product-card__img{
  position: relative; border-radius: 3px; overflow: hidden;
  aspect-ratio: 3 / 2;                        /* balanced landscape crop, all equal */
  box-shadow: var(--ad-shadow-sm);
  border: 1px solid var(--ad-hair);
}
.product-card__img::after{                    /* subtle bottom scrim for depth */
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(7,14,23,.42) 0%, transparent 40%);
  pointer-events:none;
}
.product-card__img .pic,
.product-card__img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .55s var(--ease-standard,cubic-bezier(.2,0,0,1)); }
.product-card:hover .product-card__img img{ transform: scale(1.04); }
/* caption lockup: brand → name → category, immediately visible, ruled top */
.product-card__body{
  padding: 0.95rem 0 0 !important;
  border-top: 2px solid var(--ad-hair);
  margin-top: 0.95rem;
  position: relative;
}
.product-card__body::before{               /* short orange tick on the baseline */
  content:""; position:absolute; top:-2px; left:0; width:32px; height:2px;
  background: var(--ad-accent);
  transition: width .35s var(--ease-standard,cubic-bezier(.2,0,0,1));
}
.product-card:hover .product-card__body::before{ width: 56px; }
.product-card__brand{
  color: var(--ad-accent) !important; letter-spacing:0.14em; font-weight:700;
  font-size:0.64rem !important; display:block;
}
.product-card__name{
  letter-spacing:-0.01em; font-weight:600; display:block;
  margin-top:.3rem !important; font-size:1.02rem;
}
.product-card__cat{ color: var(--c-slate-400) !important; display:block; margin-top:.15rem; }

/* ---------------------------------------------------------------------------
   6. WHY-MCT FEATURE GRID
   Was: 6 identical bordered boxes. Now: borderless, ruled-top lockups with a
   larger orange icon and a numbered engineering rhythm. Reads as a system spec.
   --------------------------------------------------------------------------- */
.feature-grid{ gap: 0 !important; }
.feature{
  position: relative;
  border: none !important;
  background: transparent !important;
  padding: 1.9rem 1.7rem 1.9rem 0 !important;
  border-top: 1px solid var(--ad-hair) !important;
  margin-right: 1.7rem;
}
.feature__icon{
  color: var(--ad-accent) !important;
  width: 34px !important; height: 34px !important; margin-bottom: 1rem;
  background: none !important; border: none !important;
}
.feature__icon svg{ width:30px; height:30px; }
.feature h3{ letter-spacing:-0.01em; margin-bottom:.5rem; }
.feature p{ color: var(--c-slate-300) !important; }
.feature:hover{ } /* keep static; these are informational, not interactive */

/* ---------------------------------------------------------------------------
   7. INDUSTRIES MOSAIC
   Keep the real photos; upgrade the tiles: sharper corners, richer scrim,
   refined uppercase labels with a lead tick, subtle zoom on hover.
   --------------------------------------------------------------------------- */
.industry{
  border-radius: 3px !important; overflow: hidden; position: relative;
  border: 1px solid var(--ad-hair) !important;
}
.industry::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top, rgba(7,14,23,.86) 0%, rgba(7,14,23,.15) 46%, transparent 72%);
}
.industry > span{
  position:absolute; left:1rem; bottom:.95rem; z-index:2;
  font-weight:600; letter-spacing:0.01em; padding-left: 16px;
}
.industry > span::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:9px; height:2px; background:var(--ad-accent);
}
.industry .tile-img{ transition: transform .6s var(--ease-standard,cubic-bezier(.2,0,0,1)); }
.industry:hover .tile-img{ transform: scale(1.05); }
/* empty (photo-pending) industry tiles: give a branded engineered texture,
   never a fake photo — a fine grid + centred label reads intentional */
.industry .pic[data-ph="svg"]{
  background:
    linear-gradient(180deg, var(--ad-panel-2), var(--c-ink-900)),
    repeating-linear-gradient(0deg, transparent 0 22px, var(--ad-hair) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--ad-hair) 22px 23px);
  background-blend-mode: normal;
}

/* ---------------------------------------------------------------------------
   8. TECHNICAL SUPPORT numbered list  &  KNOWLEDGE index
   Publication rhythm: big index numerals, ruled rows, hover states, chips.
   --------------------------------------------------------------------------- */
.kn-entry{
  border-top: 1px solid var(--ad-hair) !important;
  padding: 1.35rem 0.25rem !important;
  transition: background .3s, padding-left .3s;
}
.kn-entry:hover{ background: rgba(255,255,255,0.015); padding-left: 0.75rem !important; }
.kn-entry__no{ color: var(--ad-accent) !important; font-weight:700; opacity:.9; }
.kn-entry__cat{
  color: var(--c-slate-300) !important; letter-spacing:0.12em;
  border:1px solid var(--ad-hair-2); border-radius:2px; padding:2px 8px;
  font-size:0.66rem; text-transform:uppercase;
}
.kn-entry__title{ letter-spacing:-0.01em; }
.kn-entry__meta{ color: var(--c-slate-400) !important; }

/* numbered support list (01–04): larger numerals, ruled, more air */
[class*="support"] li, .num-list li, .support-list__item{ border-color: var(--ad-hair) !important; }

/* ---------------------------------------------------------------------------
   9. STATS BAND — presence
   Heavier numerals, orange precision tick, ruled separation.
   --------------------------------------------------------------------------- */
.stat-b b, .stat-num{ letter-spacing:-0.02em; }
.stat-b::before{ background: var(--ad-accent) !important; height:2px !important; width:26px !important; }
.stat-b span{ color: var(--c-slate-400) !important; letter-spacing:0.04em; }

/* ---------------------------------------------------------------------------
   10. PROJECTS + CHAKORE — photography dominance
   Larger project tiles, sharper frames, stronger title scrim. The featured
   Chakore tower already carries the section; frame it like an exhibit.
   --------------------------------------------------------------------------- */
.proj-item__img, .project{ border-radius: 3px !important; overflow: hidden; }
.proj-item, .project{ border:1px solid var(--ad-hair); }
.proj-item__meta b, .project__meta b{ letter-spacing:-0.01em; }
.proj-detail__main--photo picture,
.proj-app--photo picture{ border-radius:3px; overflow:hidden; box-shadow: var(--ad-shadow); }

/* Downloads resource rows: ruled, hover-lift */
.dl-row{ border-top:1px solid var(--ad-hair) !important; transition: padding-left .3s, background .3s; }
.dl-row:hover{ background: rgba(255,255,255,0.015); padding-left:.6rem !important; }
.dl-row__type{ color: var(--ad-accent) !important; }

/* ---------------------------------------------------------------------------
   11. CTA BAND — cinematic
   Stronger gradient scrim over the twilight photo so the lockup reads with
   confidence; refined button rhythm.
   --------------------------------------------------------------------------- */
[class*="cta"]{ position: relative; }
[class*="cta"]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 30%, rgba(11,20,32,.35), rgba(7,14,23,.82));
}
[class*="cta"] > *{ position:relative; z-index:2; }

/* ---------------------------------------------------------------------------
   12. CARDS/PANELS GLOBAL — de-round, refine borders (kills template feel)
   --------------------------------------------------------------------------- */
.card{ border-radius: 4px !important; border-color: var(--ad-hair) !important; }
.cert, .split__media, .article, .proj-app{ border-radius: 3px !important; }

/* ---------------------------------------------------------------------------
   13. MOBILE SAFETY — relax editorial rules that need width
   --------------------------------------------------------------------------- */
@media (max-width: 860px){
  .feature{ margin-right:0; padding-right:0 !important; }
  .product-card__img{ aspect-ratio: 3 / 2; }        /* less tall on phones */
  .section + .section::before{ display:none; }
}

/* ---------------------------------------------------------------------------
   14. EDITORIAL GRIDS (large desktop)
   Solutions: EQUAL 4-column system family (asymmetry removed — it dominated
   without earning it and cramped the other three).
   --------------------------------------------------------------------------- */
@media (min-width:1001px){
  .grid-12:has(.card--interactive){
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
    align-items: stretch;
  }
  .grid-12 > .card--interactive{ grid-column: auto !important; }
}
/* mid sizes: 2x2 so cards stay substantial, never cramped */
@media (min-width:641px) and (max-width:1000px){
  .grid-12:has(.card--interactive){
    display:grid !important; grid-template-columns: repeat(2,1fr) !important; gap:1.25rem !important;
  }
  .grid-12 > .card--interactive{ grid-column: auto !important; }
}

/* FEATURED SIKA: balanced, equal 4-up showcase. All columns equal width, all
   images equal proportion — a spacious Sika/Mapei-style product rail. No card
   dominates. Generous gutters carry the sophistication. */
@media (min-width:1001px){
  .product-scroll{
    display:grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    align-items: stretch;
  }
  .product-card__name{ font-size: 1.05rem; }
}
/* mid sizes: 2x2 so cards stay comfortably sized, never cramped */
@media (min-width:521px) and (max-width:1000px){
  .product-scroll{ display:grid !important; grid-template-columns: repeat(2,1fr) !important; gap:1.75rem !important; }
}