/* home2.css — the home-page sections ported onto home-v2, re-set in the
   landing design language. Loads AFTER landing.css and leans on its tokens;
   everything here styles the `hreviews` and `hmii` blocks, whose markup lives
   in chrome.py and whose original styling belongs to home.css. Nothing in
   this file may contradict a landing.css rule — it only adds bands that
   stylesheet never knew. */

/* ---------- Google reviews (blk_hreviews) ---------- */
.reviews{background:var(--light-bg);padding:clamp(56px,8vw,96px) 0}
.review-card{background:var(--canvas);border:1px solid var(--hairline);
  border-radius:12px;padding:clamp(24px,4vw,44px)}
.review-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:8px}
.review-head h2{font-size:clamp(22px,3vw,30px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-active);color:#fff}
.review-ratings{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:24px}
.rate{color:var(--muted);font-size:14px}
.rate b{color:var(--dark)}
.rate em{font-style:normal;font-weight:700;color:var(--dark)}
/* Google's own amber, not the brand red: the stars quote Google's rating and
   should look like it. */
.review-stars{color:#fbbc05;letter-spacing:2px}
.review-all{color:var(--ink);font-weight:600;font-size:14px;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  min-height:44px}
.review-all:hover{color:var(--red)}
.rev-carousel{position:relative}
.rev-viewport{overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.rev-viewport::-webkit-scrollbar{display:none}
.rev-track{display:flex;gap:16px}
.rcard{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;
  background:var(--canvas);border:1px solid var(--hairline);border-radius:10px;
  padding:20px 20px 22px}
.rcard p{color:var(--ink);font-size:14px;line-height:1.65;margin-top:10px}
.rcard-head{display:flex;justify-content:space-between;align-items:center;
  gap:10px}
.rcard-name{font-weight:700;color:var(--dark);font-size:14px}
.rcard-src svg{width:18px;height:18px;display:block}
.rev-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;background:var(--canvas);
  border:1px solid var(--hairline);box-shadow:0 4px 14px rgba(0,0,0,.10);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--dark)}
.rev-arrow svg{width:18px;height:18px}
.rev-prev{left:-14px}
.rev-next{right:-14px}
/* The dot is 8px of ink inside a 44px control — a thumb target first,
   a decoration second. */
.review-dots{display:flex;justify-content:center;flex-wrap:wrap;
  margin-top:8px}
.rdot{flex:0 0 44px;width:44px;height:44px;background:transparent;border:0;
  padding:0;cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.rdot::after{content:"";width:8px;height:8px;border-radius:50%;
  background:#d8d8d8}
.rdot.is-active::after{background:var(--red)}
@media (max-width:1023px){.rcard{flex-basis:calc((100% - 16px)/2)}}
@media (max-width:719px){
  .rcard{flex-basis:100%}
  .rev-arrow{display:none}
}

/* ---------- Impact stories (blk_cases, with photo + client mark) --------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  max-width:1120px;margin:0 auto}
.case-card{background:#161616;color:#fff;border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column}
.case-pic{aspect-ratio:16/10;overflow:hidden;background:#0d0d0d}
.case-pic img{width:100%;height:100%;object-fit:cover}
.case-body{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.case-head{display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;margin-bottom:12px}
/* The client's own mark, knocked to white so six different brand palettes
   read as one calm row on the dark card. */
.case-logo{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.case-sector{font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red-hover)}
.case-metric{font-size:clamp(19px,1.8vw,23px);font-weight:800;
  letter-spacing:-.01em;line-height:1.25;color:#fff}
.case-metric-label{font-size:12.5px;font-weight:600;color:#9a9a9a;
  margin:4px 0 12px}
.case-card p{color:#bdbdbd;font-size:13.5px;line-height:1.65}
@media (max-width:1023px){.cases{grid-template-columns:1fr 1fr}}
@media (max-width:719px){.cases{grid-template-columns:1fr}}

/* ---------- The spool carousel ---------- */
/* The dark spool photographs are all 1152x928; the generic photo-card frame
   is 16:10 and `cover` was shaving the spool tops. Matching the frame to the
   shot means cover crops nothing. Arrows re-centre on the taller thumb. */
.spool-cards .product-card .thumb{aspect-ratio:1152/928}
.spool-cards .prod-arrow{top:140px}

/* ---------- Made in India (blk_hmii) ---------- */
.mii{background:var(--canvas);border-top:1px solid var(--hairline);
  padding:clamp(48px,7vw,84px) 0}
.mii-band{display:flex;align-items:center;justify-content:center;
  gap:clamp(18px,4vw,44px);flex-wrap:wrap;text-align:center}
.mii-word{font-weight:800;font-size:clamp(20px,3.2vw,36px);
  letter-spacing:-0.02em;color:var(--dark)}
.mii-lion{height:clamp(64px,9vw,104px);width:auto}
.mii-support{display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,3.5vw,40px);flex-wrap:wrap;margin-top:36px}
.mii-support-label{font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--muted)}
/* Grayscale at rest, colour on hover — the same contract as the trusted
   marquee, so the two logo rows read as one system. */
.mii-support img{height:44px;width:auto;filter:grayscale(1);opacity:.75;
  transition:filter .15s ease,opacity .15s ease}
.mii-support img:hover{filter:none;opacity:1}
@media (max-width:719px){.mii-support img{height:34px}}