/* Calchroma Minerals & Additives — site styles */

/* Manrope, self-hosted. One variable file covers 200–800, so all four weights the
   site uses (500/600/700/800) come from a single 24 KB request with no third-party
   connection. SIL Open Font Licence 1.1 — see fonts/OFL.txt. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#0E1C29; --blue:#0D4ED1; --cyan:#2BA8E0; --yellow:#F5B301;
  --slate:#5A6B7A; --line:#E3E8EC; --wash:#F5F7F9; --white:#fff;
  /* --faint was #9AA8B4 — 2.43:1 on white, 2.26:1 on wash. It carries the
     specification disclaimer and the pricing note, so it must clear 4.5:1 on both.
     #65737F is 4.87 / 4.53. It sits close to --mut by necessity; the hierarchy
     between them is carried by size, weight and letter-spacing, not lightness. */
  --mut:#64717E; --faint:#65737F;
  --wrap:1120px; --r:12px;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
/* The hidden attribute only sets display:none through the UA sheet, so any author
   rule that sets display beats it — the enquiry form is display:grid and stayed on
   screen behind its own confirmation panel. Make hidden mean hidden. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);
  font-size:17px;line-height:1.65;font-weight:500;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.18;letter-spacing:-.022em;margin:0;font-weight:800}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.2vw,2.3rem)}
h3{font-size:1.16rem;letter-spacing:-.012em}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px}
.lede{font-size:1.14rem;color:var(--mut);max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
/* --blue is only 2.49:1 on --ink, below the 3.0 a focus indicator needs, and the
   dark sections are exactly where the primary buttons live. --cyan is 6.39:1 there,
   and reads as an interaction state rather than as more white text. */
.hero :focus-visible,.band :focus-visible,footer :focus-visible{outline-color:var(--cyan)}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;align-items:center;flex:none}
.brand svg{height:34px;width:auto;display:block}
.nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);font-size:.94rem;font-weight:600}
.nav a:hover{color:var(--blue);text-decoration:none}
.nav a[aria-current="page"]{color:var(--blue)}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:9px;padding:12px 20px;
  font-weight:700;font-size:.95rem;border:1.5px solid transparent;cursor:pointer;
  font-family:inherit;transition:transform .12s ease,background .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn .ico{width:18px;height:18px;flex:none;fill:currentColor;display:block}
/* double class so these beat `.nav a` — a single .btn-x loses on specificity */
.btn.btn-p,.btn.btn-p:hover{background:var(--blue);color:#fff}
.btn.btn-p:hover{background:#0A3EA8}
.btn.btn-d,.btn.btn-d:hover{background:var(--ink);color:#fff}
.btn.btn-d:hover{background:#1C3145}
.btn.btn-o,.btn.btn-o:hover{border-color:var(--line);color:var(--ink);background:#fff}
.btn.btn-o:hover{border-color:var(--ink)}
.btn.btn-w,.btn.btn-w:hover{background:#25D366;color:#08301A}
.btn.btn-w:hover{background:#1EB958}
.btn.btn-l,.btn.btn-l:hover{background:#fff;color:var(--ink)}
.btn.btn-l:hover{background:#EDF1F4}
.menu{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);
  border-radius:9px;padding:9px 12px;font:inherit;font-weight:700;cursor:pointer}

/* hero */
.hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero .wrap{padding-top:82px;padding-bottom:82px;position:relative;z-index:2}
.hero h1{max-width:19ch}
.hero .lede{color:#B4C2CE;margin-top:22px;font-size:1.18rem}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-art{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}
.hero-art svg{position:absolute;right:-6%;top:-24%;height:150%;width:auto}
.trust{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:44px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.14);position:relative;z-index:2}
.trust div{font-size:.88rem;color:#8FA2B2}
.trust b{display:block;color:#fff;font-size:1.02rem;font-weight:800;letter-spacing:-.01em}

/* sections */
section{padding:74px 0}
section.wash{background:var(--wash);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.head{max-width:64ch;margin-bottom:42px}
.head p{margin-top:14px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
/* For a grid nested inside one column of a .g2 — the 300px track is wider than the
   column, so auto-fit collapses it to a single stack and the block reads lopsided.
   220px lets the fact tiles sit 2x2 in that space, and still stacks at mobile. */
.g2-tight{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* cards */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px 24px;
  display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease}
a.card:hover{border-color:var(--ink);transform:translateY(-2px);text-decoration:none}
.card .bar{height:5px;width:46px;border-radius:3px;margin-bottom:18px}
/* Card titles are h3 under a section heading, but h2 on the 404 page where the cards
   sit directly under the h1. Both must look identical — the heading level is about
   document structure, not size. */
.card h3,.card h2{color:var(--ink);margin-bottom:4px}
.card h2{font-size:1.16rem;letter-spacing:-.012em}
.card .sub{font-size:.83rem;color:var(--faint);font-weight:700;letter-spacing:.02em;margin-bottom:12px}
.card p{color:var(--mut);font-size:.97rem;margin:0}
.card .more{margin-top:18px;font-weight:700;font-size:.92rem;color:var(--blue)}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.fact b{display:block;font-size:1.45rem;letter-spacing:-.02em;margin-bottom:3px}
.fact span{font-size:.9rem;color:var(--mut)}

/* spec table */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* Panel titles are h2 (they are top-level sections of the page) but must not take
   the global h2 display size — the explicit font-size here keeps them at label scale. */
.panel h2{padding:20px 24px;margin:0;border-bottom:1px solid var(--line);
  font-size:1.02rem;letter-spacing:-.012em}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 24px;font-size:.96rem;border-bottom:1px solid var(--line)}
tr:last-child th,tr:last-child td{border-bottom:0}
th{font-weight:600;color:var(--mut);width:52%}
td{font-weight:700}
.note{font-size:.86rem;color:var(--faint);padding:16px 24px;background:var(--wash);
  border-top:1px solid var(--line);line-height:1.55}

/* lists */
.app{border-top:1px solid var(--line);padding:20px 0}
.app:first-child{border-top:0;padding-top:0}
.app h3{margin-bottom:5px}
.app p{color:var(--mut);margin:0;font-size:.97rem}
ul.ticks{list-style:none;padding:0;margin:0}
ul.ticks li{position:relative;padding:0 0 12px 30px;color:var(--mut);font-size:.99rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:7px;
  border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
  transform:rotate(-45deg)}
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0;list-style:none}
.chips li{background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:8px 15px;font-size:.9rem;font-weight:600;color:var(--mut)}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:700;font-size:1.03rem;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-weight:800;font-size:1.35rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:12px 0 0;color:var(--mut);max-width:74ch;font-size:.99rem}

/* form */
form{display:grid;gap:16px}
.row{display:grid;gap:16px;grid-template-columns:1fr 1fr}
label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px}
input,select,textarea{width:100%;font:inherit;font-size:1rem;font-weight:500;padding:13px 15px;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none}
textarea{min-height:110px;resize:vertical}
.hint{font-size:.85rem;color:var(--faint);margin:0}
/* honeypot: off-screen, unfocusable and aria-hidden, so only an automated filler
   ever completes it. Not .sr-only — that one is meant to be read aloud. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* cta band */
.band{background:var(--ink);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.band .wrap{position:relative;z-index:2}
.band-art{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}
.band-art svg{position:absolute;right:-6%;top:-24%;height:150%;width:auto}
.band h2{max-width:20ch}
.band p{color:#B4C2CE;max-width:56ch;margin-top:14px}
.band .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* footer */
/* Bottom padding reserves clearance for the fixed WhatsApp button so it never sits
   permanently on top of the legal line. Kept on the footer rather than on body, so the
   ink ground extends under the button instead of leaving a white strip. */
footer{background:var(--ink);color:#8FA2B2;padding:58px 0 96px;font-size:.93rem;
  border-top:1px solid rgba(255,255,255,.1)}
footer svg{height:30px;width:auto;margin-bottom:18px}
footer h3{color:#fff;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  margin:0 0 14px;font-weight:800}
footer a{color:#B4C2CE;display:block;margin-bottom:9px}
footer a:hover{color:#fff}
.fgrid{display:grid;gap:36px;grid-template-columns:1.6fr 1fr 1fr 1fr}
/* #6B7F90 was 4.16:1 on --ink; #7E92A3 is 5.36:1. Carries address and hours. */
.legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.84rem;color:#7E92A3}

/* breadcrumb */
.crumb{font-size:.86rem;color:var(--faint);padding:20px 0 0}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--ink)}

/* floating whatsapp — fixed, so it sits over whatever is in the bottom-right of the
   viewport. The page reserves clearance at the end of the document so the last of the
   content is never permanently covered. It still passes over mid-page content while
   scrolling; that is inherent to a floating button and the button stays on every page. */
.float{position:fixed;right:18px;bottom:18px;z-index:60;box-shadow:0 6px 22px rgba(14,28,41,.24)}

/* consent banner — injected by consent.js, and only when a GTM container is set.
   Deliberately a card at bottom-left rather than a full-width bar, so it never covers
   the floating WhatsApp button, which is the primary action on every page. */
.consent{position:fixed;left:18px;bottom:18px;z-index:70;max-width:380px;
  background:var(--ink);color:#fff;border-radius:var(--r);padding:20px 22px;
  box-shadow:0 10px 34px rgba(14,28,41,.34)}
.consent p{font-size:.9rem;color:#B4C2CE;margin:0 0 14px}
.consent a{color:#fff;text-decoration:underline}
.consent-acts{display:flex;gap:10px;flex-wrap:wrap}
.consent .btn{padding:9px 18px;font-size:.9rem}
.consent .btn.btn-d,.consent .btn.btn-d:hover{background:#fff;color:var(--ink)}
.consent .btn.btn-o,.consent .btn.btn-o:hover{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.35)}
.consent :focus-visible{outline-color:var(--cyan)}
@media (max-width:720px){
  /* full width on a phone, lifted clear of the floating button */
  .consent{left:12px;right:12px;max-width:none;bottom:84px}
}

@media (max-width:860px){
  .fgrid{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr}
  .hero-art,.band-art{opacity:.25}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;
    border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:14px;justify-content:center;border-bottom:0}
  .menu{display:block}
  section{padding:54px 0}
  .hero .wrap{padding-top:56px;padding-bottom:56px}
  th,td{padding:12px 16px;font-size:.92rem}
  .fgrid{grid-template-columns:1fr}
}
/* Print. Purchase managers print the typical-values table and take it to the plant,
   so this is a real output, not a nicety.
   The important bug it fixes: .hero and .band set colour:#fff on a dark background,
   and browsers do not print background colours by default — so the h1 printed white
   on white paper and the page came out blank at the top. */
@media print{
  .top,.float,.nav,.band,.crumb,footer,form,.hp,.acts,.more{display:none!important}
  body{font-size:10.5pt;line-height:1.45;color:#000;background:#fff}
  .wrap{max-width:none;padding:0}
  section{padding:10pt 0;border:0}
  section.wash{background:#fff}

  .hero,.band{background:#fff!important;color:#000!important}
  .hero h1,.hero .lede,.hero .trust b,.hero .trust div,.band h2,.band p{color:#000!important}
  .hero-art,.band-art{display:none!important}

  a{color:#000;text-decoration:none}
  h1{font-size:20pt}
  h2{font-size:14pt}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .panel,.card,.fact{break-inside:avoid;page-break-inside:avoid;border:1px solid #999;box-shadow:none}
  tr{break-inside:avoid;page-break-inside:avoid}
  th,td{padding:5pt 8pt}
  .note{background:#fff;border-top:1px solid #999;color:#000}

  /* A printed spec sheet must say where it came from and who to ring about it. */
  main::after{
    content:"Calchroma Minerals & Additives · calchroma.in · +91 72078 48448 · Typical values, indicative not contractual";
    display:block;margin-top:12pt;padding-top:6pt;border-top:1px solid #999;
    font-size:8.5pt;color:#000;
  }
}