:root{
  --bg:#FBFAF8;
  --panel:#FFFFFF;
  --sunk:#F1EEE9;
  --ink:#1C1A17;
  --ink-soft:#57524B;
  --ink-faint:#8A837A;
  --rule:#DFD9D0;
  --bronze:#8C5A1E;
  --bronze-bright:#A96D24;
  --max:64rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bronze);text-underline-offset:2px}
a:hover{color:var(--bronze-bright)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}

/* header */
.site-head{border-bottom:1px solid var(--rule);background:var(--panel)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.9rem;padding-bottom:.9rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand img{width:46px;height:46px;object-fit:contain}
.brand-name{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:1.12rem;line-height:1.15}
.brand-sub{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:600}
nav.main{display:flex;gap:1.25rem;flex-wrap:wrap}
nav.main a{font-size:.93rem;font-weight:600;text-decoration:none;color:var(--ink-soft)}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--bronze)}

/* hero */
.hero{background:var(--sunk);border-bottom:1px solid var(--rule)}
.hero .wrap{padding-top:3rem;padding-bottom:3rem;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.eyebrow{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);font-weight:700;margin-bottom:.9rem}
h1{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;margin:0 0 1rem;letter-spacing:-.01em;text-wrap:balance}
.lede{font-size:1.14rem;color:var(--ink-soft);margin:0 0 1.5rem;max-width:34rem}
.hero figure{margin:0}
.hero img{border-radius:6px;box-shadow:0 10px 30px rgba(28,26,23,.14)}

h2{font-family:"Spectral",Georgia,serif;font-weight:600;font-size:1.7rem;line-height:1.2;margin:0 0 .9rem;letter-spacing:-.01em;text-wrap:balance}
h3{font-size:1.06rem;font-weight:700;margin:0 0 .4rem}
p{margin:0 0 1rem;max-width:38rem}
section.band{padding:3rem 0;border-bottom:1px solid var(--rule)}
section.band.alt{background:var(--panel)}

/* key facts */
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:0;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:var(--panel);margin:1.75rem 0}
.kf{padding:1.1rem 1.2rem;border-right:1px solid var(--rule)}
.kf:last-child{border-right:none}
.kf-k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:.25rem}
.kf-v{font-size:1.16rem;font-weight:700;font-variant-numeric:tabular-nums}
.kf-n{font-size:.85rem;color:var(--ink-soft);margin-top:.15rem}

/* q&a list */
.qa{display:flex;flex-direction:column;gap:1.6rem;margin-top:1.5rem}
.qa-item h3{font-family:"Spectral",Georgia,serif;font-size:1.15rem;font-weight:600}
.qa-item p{margin-bottom:0;color:var(--ink-soft)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
figure.shot{margin:0}
figure.shot img{border-radius:6px}
figure.shot figcaption{font-size:.85rem;color:var(--ink-faint);margin-top:.5rem}

.cta{background:var(--ink);color:#F6F2EC;padding:2.5rem 0}
.cta h2{color:#fff}
.cta p{color:#CFC7BC}
.btn{display:inline-block;background:var(--bronze-bright);color:#fff;text-decoration:none;font-weight:700;padding:.75rem 1.4rem;border-radius:5px;margin-top:.4rem}
.btn:hover{background:#BE7C2C;color:#fff}
.btn+.btn{margin-left:.6rem}
.btn.ghost{background:none;border:1.5px solid #6E665C;color:#F6F2EC}
.btn.ghost:hover{border-color:#fff;background:none}

footer.site-foot{padding:2.5rem 0;font-size:.92rem;color:var(--ink-soft);background:var(--sunk)}
footer.site-foot .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.75rem}
footer .f-k{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:.4rem}
footer address{font-style:normal;line-height:1.55}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:1.75rem}
  .grid2{grid-template-columns:1fr}
  .kf{border-right:none;border-bottom:1px solid var(--rule)}
  .kf:last-child{border-bottom:none}
}

/* product cards */
.prods{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem;margin-top:1.75rem}
.prod{background:var(--panel);border:1px solid var(--rule);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.prod img{aspect-ratio:4/3;object-fit:cover;width:100%}
.prod-body{padding:1rem 1.1rem 1.2rem}
.prod-body h3{font-family:"Spectral",Georgia,serif;font-size:1.16rem;font-weight:600;margin-bottom:.15rem}
.prod-ml{font-size:.9rem;color:var(--ink-faint);margin-bottom:.5rem}
.prod-body p{font-size:.95rem;color:var(--ink-soft);margin:0 0 .5rem}
.prod-size{font-size:.85rem;font-weight:700;color:var(--bronze);letter-spacing:.02em}
.audience{border-left:3px solid var(--bronze);padding-left:1.15rem;margin-bottom:1.5rem}
.audience h2{margin-bottom:.5rem}

/* keep tall portrait photos from dominating a row */
figure.shot img{max-height:30rem;object-fit:cover;width:100%}
.hero img{max-height:32rem;object-fit:cover;width:100%}

/* bell sound video */
.sound{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.sound video{max-height:30rem;border-radius:6px;background:#000;box-shadow:0 10px 30px rgba(28,26,23,.18)}
@media (max-width:820px){.sound{grid-template-columns:1fr}.sound video{width:100%;max-height:none}}

/* Malayalam summary block */
section.ml{padding:3rem 0;border-bottom:1px solid var(--rule);background:var(--panel)}
section.ml h2{font-size:1.25rem;margin-bottom:.7rem;color:var(--bronze)}
section.ml p{font-size:1.02rem;line-height:1.95;color:var(--ink-soft);margin:0;max-width:38rem}
section.ml h2,section.ml p{font-family:"Noto Sans Malayalam","Source Sans 3",system-ui,sans-serif}

/* ghost button on light backgrounds (hero) — the default ghost is for the dark CTA band */
.hero .btn.ghost{border-color:var(--bronze);color:var(--bronze);background:none}
.hero .btn.ghost:hover{border-color:var(--bronze-bright);color:var(--bronze-bright);background:none}