/* ==========================================================================
   APC Solutions — HOME PAGE only (/index.html)
   The company-level page that sits in front of both divisions.
   Built to the client wireframe (Aug 2026):
     header → hero (logo left / photos right) → divisions → introduction
     → Freudenberg → vision & mission → industries → customers → contact
   Reads the same tokens as base.css, so colours and fonts stay in one place.
   Deliberately static — no auto-playing slider, no "motion poster".
   ========================================================================== */

/* ==========================================================================
   HEADING SIZES — client ko poore home page pe bade headings chahiye the
   ("OUR DIVISIONS" jaisa chhota label sabse zyada chhota lag raha tha).
   Sab kuch .home ke andar scope kiya hai, taaki Air/Water division pages ka
   design waisa hi rahe. Ek jagah se poore page ka scale control hota hai.
   ========================================================================== */
.home .eyebrow            { font-size: 1rem; letter-spacing: .13em; gap: 13px; }
.home .eyebrow::before    { width: 36px; }
.home .h-lg               { font-size: clamp(2.6rem, 5.9vw, 4.5rem); }
.home .lead               { font-size: clamp(1.12rem, 1.6vw, 1.32rem); }
.home .hb-left h1         { font-size: clamp(1.6rem, 3.2vw, 2.7rem); }
.home .fbg-title          { font-size: clamp(1.95rem, 4vw, 3.15rem); }
.home .mv-card h3         { font-size: clamp(1.68rem, 2.95vw, 2.3rem); }
.home .mv-card p          { font-size: 1.07rem; }
.home .mv-card .mv-kicker { font-size: clamp(1.14rem, 1.5vw, 1.32rem); }
.home .fbg-cert h3        { font-size: 1.36rem; }
.home .fbg-cert p         { font-size: 1.05rem; }
.home .contact-card h3    { font-size: 1.02rem; letter-spacing: .14em; }
.home .contact-card .blurb,
.home .c-list li          { font-size: 1.07rem; }
.home .ind-box            { font-size: clamp(1.02rem, 1.32vw, 1.18rem); }
.home .hb-strip a         { font-size: clamp(.94rem, 1.25vw, 1.12rem); }
.home .div-card .div-label { font-size: clamp(1.1rem, 1.78vw, 1.52rem); }

/* ==========================================================================
   HEADER — logo left, three links, WhatsApp circle. No division links here.
   ========================================================================== */
.home-top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 253, 248, .9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  /* Border HAMESHA dikhta hai. Pehle sirf scroll pe aata tha, aur cream header
     safed hero me ghul jaata tha — koi separation nahi dikhti thi. */
  border-bottom: 1px solid var(--slate-100);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.home-top.is-stuck {
  border-color: var(--slate-300);
  box-shadow: 0 10px 26px -18px rgba(8, 19, 27, .45);
  background: rgba(255, 253, 248, .97);
}
.home-top .bar {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 24px);
  min-height: clamp(84px, 9vw, 112px);
}
.home-top .brand { display: block; margin-right: auto; }
.home-top .brand img { height: clamp(58px, 6.4vw, 88px); width: auto; }

.home-nav { display: flex; align-items: center; gap: 2px; }
.home-nav a {
  padding: 10px 14px; border-radius: 999px;
  font-size: clamp(.88rem, 1.1vw, .98rem); font-weight: 500;
  color: var(--slate-700); white-space: nowrap;
  transition: color .2s, background .2s;
}
.home-nav a:hover, .home-nav a:focus-visible { color: var(--ink); background: var(--paper-2); }

.wa-btn {
  flex: none; width: clamp(42px, 4.4vw, 52px); aspect-ratio: 1;
  border-radius: 50%; display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 12px 26px -12px rgba(37, 211, 102, .8);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(37, 211, 102, .9); }
.wa-btn svg { width: 58%; height: 58%; }

/* phone: row 1 = logo + WhatsApp, row 2 = the three links, centred */
@media (max-width: 640px) {
  .home-top .bar { flex-wrap: wrap; padding-block: 10px; gap: 6px 10px; min-height: 0; }
  .home-top .brand { order: 1; margin-right: auto; }
  .wa-btn { order: 2; }
  .home-nav { order: 3; flex-basis: 100%; justify-content: center; }
  .home-nav a { padding: 8px 12px; }
}

/* ==========================================================================
   ① HERO — client ke banner ka HTML version ("same to same"):
     navy frame + green swoosh corners · LEFT logo + tagline + since
     · RIGHT product photos · neeche email / phone / website ki strip.
   Image nahi hai — asli text hai, isliye mobile pe reflow hota hai,
   Google padh sakta hai, aur badalna aasan hai.
   ========================================================================== */
/* Upar koi gap NAHI — hero seedha header ke neeche chipka hua hai. Separation
   header ke apne border se aati hai (jo hamesha dikhta hai). Neeche ka gap bhi
   kam kiya — pehle hero aur "Our Divisions" ke beech ~95px khali tha. */
.home-hero { padding: 0 0 clamp(14px, 2vw, 28px); }

/* FULL WIDTH — screen ke ek kinare se doosre kinare tak.
   Border bilkul nahi (client ne upar-neeche ki navy line hatwa di) — uski jagah
   soft shadow hai, jisse hero page se thoda uthta hua dikhta hai. Safed
   background + cream page ka farak shadow ke saath saaf dikh jaata hai. */
.hero-banner {
  position: relative; overflow: hidden; isolation: isolate;
  background: #fff;
  border: 0;
  /* hero header se chipka hua hai, to upar wali shadow hata di — sirf neeche */
  box-shadow: 0 16px 38px -14px rgba(8, 19, 27, .18);
  /* upar ka padding jitna kam ho sake — logo navbar ke bilkul paas rahe */
  padding: clamp(8px, 1vw, 14px) var(--gut) 0;
}
/* content bahut chaudi screen pe faila na rahe, par 1600px tak full width lage */
.hero-banner > .hb-main,
.hero-banner > .hb-strip { max-width: 1600px; margin-inline: auto; }

/* green swoosh — do corners, banner jaise */
.hero-banner .swoosh { position: absolute; z-index: 0; pointer-events: none; line-height: 0; }
.hero-banner .swoosh svg { width: 100%; height: 100%; display: block; }
.swoosh--tl { top: 0; left: 0; width: clamp(150px, 30vw, 420px); height: clamp(96px, 15vw, 210px); }
.swoosh--br { bottom: 0; right: 0; width: clamp(150px, 30vw, 420px); height: clamp(96px, 15vw, 210px); transform: rotate(180deg); }

.hb-main {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(20px, 3vw, 44px); align-items: center;
}
@media (max-width: 900px) { .hb-main { grid-template-columns: 1fr; gap: 26px; } }

.hb-left { padding-left: clamp(0px, 1.5vw, 22px); }
.hb-logo { width: clamp(200px, 27vw, 372px); height: auto; }
.hb-left h1 {
  margin-top: clamp(14px, 2vw, 26px);
  color: var(--accent-2);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.3rem, 2.55vw, 2.15rem);
  letter-spacing: .012em; line-height: 1.22;
}
.hb-since {
  display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(14px, 1.9vw, 24px);
  max-width: 27em;
}
.hb-since span {
  font-weight: 600; font-size: clamp(.82rem, 1.05vw, .98rem);
  letter-spacing: .16em; color: var(--ink); white-space: nowrap;
}
/* line + diamond, banner ke divider jaisa */
.hb-since i { flex: 1; height: 1px; background: var(--accent-2); position: relative; opacity: .55; }
.hb-since i::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  background: var(--accent-2); transform: rotate(45deg);
}
.hb-since i:first-child::after { right: 0; }
.hb-since i:last-child::after { left: 0; }

.hb-right { position: relative; }
.hb-right img {
  width: 100%; height: auto; display: block;
  /* product shot ka background halka grey hai. multiply + kinaron ka fade —
     dono milke us grey ko page me ghol dete hain, koi dabba nahi dikhta. */
  mix-blend-mode: multiply;
  /* do mask layers: chaaron taraf ka radial fade + neeche ka extra fade
     (products ke neeche floor ki reflection ki hard line kaat deta hai) */
  -webkit-mask-image: radial-gradient(124% 120% at 50% 44%, #000 60%, transparent 100%),
                      linear-gradient(to top, transparent 0%, #000 15%);
          mask-image: radial-gradient(124% 120% at 50% 44%, #000 60%, transparent 100%),
                      linear-gradient(to top, transparent 0%, #000 15%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* neeche ki contact strip */
.hb-strip {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(10px, 2vw, 30px);
  padding: clamp(14px, 1.8vw, 20px) 0 clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--slate-100);
  margin-top: clamp(6px, 1vw, 14px);
}
.hb-strip a, .hb-strip span.item {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: clamp(.82rem, 1.05vw, .96rem); font-weight: 500; color: var(--ink);
  white-space: nowrap;
}
.hb-strip a:hover { color: var(--accent-2); }
.hb-strip .ic {
  flex: none; width: clamp(30px, 3.2vw, 38px); aspect-ratio: 1;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-2); color: #fff;
}
.hb-strip .ic svg { width: 52%; height: 52%; }
.hb-strip .bar { width: 1px; align-self: stretch; min-height: 26px; background: var(--slate-100); }
/* phone: teeno ek column me, icons seedhe line me */
@media (max-width: 720px) {
  .hb-strip { flex-direction: column; align-items: flex-start; gap: 13px; padding-inline: clamp(4px, 3vw, 20px); }
  .hb-strip .bar { display: none; }
}

/* ==========================================================================
   ② DIVISIONS — the only place Air / Water appear as a choice
   ========================================================================== */
.div-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); }
@media (max-width: 780px) { .div-grid { grid-template-columns: 1fr; } }

/* Card me sirf division ka naam hai (client ne description aur icon hatwa diye),
   isliye card chhota aur naam beech me — jaan-boojh kar simple. */
.div-card {
  --dc: var(--accent); --dc2: var(--accent-2); --dc-soft: var(--accent-soft);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center;
  min-height: clamp(150px, 15vw, 190px);
  padding: clamp(30px, 3.4vw, 44px) clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--slate-100); border-radius: var(--radius-lg);
  background: var(--paper); color: var(--ink);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s;
}
/* halka corner wash — card ab minimal hai, isliye bahut subtle rakha hai */
.div-card::after {
  content: ""; position: absolute; z-index: -1; right: -110px; top: -130px;
  width: 260px; height: 260px; border-radius: 50%; background: var(--dc-soft); opacity: .5;
}
.div-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.div-card.is-water { --dc: #0f8ecf; --dc2: #0a5f96; --dc-soft: #e6f5fd; }

/* Division ka naam — card ke beech me, gradient pill me. Icon hata diya gaya
   hai (client), isliye yahi card ka poora content hai. */
.div-card .div-label {
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(13px, 1.5vw, 18px) clamp(24px, 3vw, 40px);
  border-radius: 999px;
  background: linear-gradient(100deg, var(--dc2), var(--dc)); color: #fff;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(1rem, 1.55vw, 1.32rem);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.25;
  box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .45);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.div-card .div-soon {                 /* Water division abhi coming soon hai */
  position: absolute; top: 14px; right: 14px;
  padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--dc); color: var(--dc2);
  font-family: var(--ff-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.div-card:hover .div-label {
  transform: scale(1.04);
  box-shadow: 0 20px 38px -16px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   ④ FREUDENBERG — 2–3 lines, certificate underneath
   ========================================================================== */
/* poora company naam lamba hai — .h-lg se thoda chhota, warna 3 line me tootta hai */
.fbg-title {
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  max-width: 24ch; margin-inline: auto;
}
.fbg-note { max-width: 74ch; margin-inline: auto; }
.fbg-cert {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 3vw, 34px);
  align-items: center; max-width: 720px; margin-inline: auto;
  background: var(--paper); border: 1px solid var(--slate-100); border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 26px); box-shadow: var(--shadow-sm);
}
@media (max-width: 620px) { .fbg-cert { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.fbg-shot {
  width: clamp(126px, 16vw, 184px); aspect-ratio: 3 / 4; flex: none;
  border-radius: var(--radius-sm); overflow: hidden;
  background: #fff;                        /* ek document hai — safed hi behtar */
  border: 1px solid var(--slate-100);
  display: grid; place-items: center;
}
/* thumbnail ek link hai (PDF khulta hai) — poora box bharna chahiye */
.fbg-shot > a { display: block; width: 100%; height: 100%; }
/* contain, cover nahi — letter ka koi hissa katna nahi chahiye */
.fbg-shot img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); }
.fbg-shot:hover img { transform: scale(1.04); }
.fbg-shot svg { width: 44px; height: 44px; color: var(--accent-2); opacity: .75; }
.fbg-cert h3 { font-size: 1.08rem; }
.fbg-cert p { font-size: .93rem; color: var(--slate-700); margin-top: 8px; }

/* ==========================================================================
   ⑥ SERVING INDUSTRIES — names only, no descriptions
   ========================================================================== */
.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* chhote phone pe ek hi column — 2 columns me "Pharmaceuticals" jaise lambe
   shabd box se bahar nikal jaate the (horizontal scroll aa raha tha) */
@media (max-width: 560px) { .ind-grid { grid-template-columns: 1fr; } }
.ind-box {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 18px; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--slate-100);
  font-family: var(--ff-display); font-weight: 600; font-size: clamp(.87rem, 1.05vw, .97rem);
  line-height: 1.35; color: var(--ink);
  min-width: 0; overflow-wrap: anywhere;      /* safety net — kabhi bahar na nikle */
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.ind-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.ind-box .ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.ind-box .ico svg { width: 18px; height: 18px; }

/* ==========================================================================
   ⑦ MAJOR CUSTOMERS — circular logo marks (filled from config.js)
   ========================================================================== */
.cust-row {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px); align-items: stretch;
}
@media (max-width: 1080px) { .cust-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .cust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .cust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Chaukor tile, gol nahi — client ke logo chaude hain (kuch 800x100 tak),
   circle me wo bahut chhote pad jaate. Background pura SAFED hai taaki jin
   logos ka apna safed background hai wo bhi seamless dikhein. */
.cust {
  /* PAKKI height (aspect-ratio nahi) — aspect-ratio waale box me image ka
     max-height:100% resolve nahi hota tha, aur khade logo (Ordnance, Mittal)
     tile se bahar nikal jaate the. */
  height: clamp(96px, 9vw, 128px); padding: clamp(12px, 1.5vw, 20px);
  border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--slate-100);
  display: grid; place-items: center; text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.cust:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* max-height PERCENT me nahi, fixed value me — grid item pe height:100%
   resolve nahi hota (Chrome), isliye khade logo bahar nikal rahe the.
   Ye clamp tile ki height minus padding ke barabar hai:
     tile clamp(96,9vw,128) − 2 × padding clamp(12,1.5vw,20) = clamp(72,6vw,88) */
.cust img {
  width: auto; height: auto;
  max-width: 100%; max-height: clamp(72px, 6vw, 88px);
  object-fit: contain;
}
.cust .nm { font-family: var(--ff-display); font-weight: 600; font-size: .84rem; line-height: 1.25; color: var(--slate-700); }

/* SAFED logo (Laxcon, M.P. Power) — safed tile pe gayab ho jaate hain,
   isliye inka tile dark. Sahi rang wala logo mile to config me se
   `dark: true` hata dena, tile apne aap safed ho jaayega. */
.cust.is-dark { background: #23221c; border-color: #23221c; }

.cust.is-empty {
  border-style: dashed; border-color: var(--slate-300);
  box-shadow: none; background: var(--paper-2);
}
.cust.is-empty:hover { transform: none; box-shadow: none; }
.cust.is-empty svg { width: 30px; height: 30px; color: var(--slate-300); }

/* ==========================================================================
   ⑧ CONTACT US — logo · details · quote button + social icons
   ========================================================================== */
.contact-grid {
  display: grid; grid-template-columns: .92fr 1.16fr .92fr;
  gap: clamp(22px, 3.4vw, 46px); align-items: start;
}
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  background: var(--paper); border: 1px solid var(--slate-100); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px); height: 100%;
}
/* logo ab <a> ke andar hai, isliye dono raste cover kiye */
.contact-card > img,
.contact-card > .logo-home img { height: clamp(76px, 8vw, 104px); width: auto; }
.contact-card > .logo-home { display: inline-block; line-height: 0; }
/* home hero ka bada logo */
.hb-left > .logo-home { display: inline-block; line-height: 0; }
.contact-card .blurb { margin-top: 16px; font-size: .93rem; color: var(--slate-700); }
.contact-card h3 {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 16px;
}
.c-list li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; font-size: .95rem; color: var(--slate-700); }
.c-list li:last-child { margin-bottom: 0; }
.c-list a { color: var(--slate-700); }
.c-list a:hover { color: var(--accent-2); }
.c-list .ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.c-list .ico svg { width: 17px; height: 17px; }

.icon-row { display: flex; gap: 11px; margin-top: 20px; }
.icon-row a {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  border: 1px solid var(--slate-100); background: var(--paper-2); color: var(--slate-700);
  transition: transform .28s var(--ease), background .25s, color .25s, border-color .25s;
}
.icon-row a svg { width: 19px; height: 19px; }
.icon-row a:hover { transform: translateY(-3px); color: #fff; border-color: transparent; }
.icon-row a.li:hover { background: #0a66c2; }
.icon-row a.wa:hover { background: #25d366; }
.icon-row a.em:hover { background: var(--accent); }

/* ==========================================================================
   FOOTER — one slim line, plus the two division links
   ========================================================================== */
.home-foot {
  border-top: 1px solid var(--slate-100); background: var(--paper-2);
  padding-block: 26px; font-size: .85rem; color: var(--slate-500);
}
.home-foot .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.home-foot a { color: var(--slate-500); }
.home-foot a:hover { color: var(--accent-2); }
.home-foot .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--slate-300); display: block; flex: none; }
.home-foot .push { margin-left: auto; }
@media (max-width: 700px) { .home-foot .push { margin-left: 0; } }