/*
Theme Name: Pragati Aroma Global
Theme URI: https://pragatiaroma.in
Author: Big Bang Commerce
Description: Bespoke locked theme for Pragati Aroma Global. Layout is fixed; content is edited from the dashboard. Built from supplied HTML. No page builder.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: pragati
*/

:root{
  --brown:#2A221B; --ivory:#FFFCF5; --black:#0F100C;
  --orange:#842F14; --cream:#C3B89C;
  --grad:linear-gradient(135deg,#842F14 0%,#984F28 52%,#B17741 100%);

  /* CREAM EDITORIAL — selected direction */
  --page:#EDE6D6; --ink:#2A221B;
  --ink-60:rgba(42,34,27,.66); --ink-40:rgba(42,34,27,.46);
  --rule:rgba(42,34,27,.18);
  --accent:#842F14;
  --band-bg:#2A221B; --band-ink:#FFFCF5; --band-muted:rgba(255,252,245,.72);
  --band-rule:rgba(255,252,245,.18); --band-eyebrow:#C3B89C;
  --form-bg:#2A221B;
  --surface:#FFFCF5; --surface-ink:#2A221B;

  /* CTA — dark brown, hover orange crimson */
  --btn-bg:#2A221B; --btn-ink:#FFFCF5; --btn-hover:#842F14;
  --ghost-border:rgba(42,34,27,.34);
  --foot-bg:#2A221B;
  --chip-hover-bg:#2A221B; --chip-hover-ink:#FFFCF5;

  /* margins tightened, gutter locked to 20px */
  --gut:clamp(20px,3vw,40px);
  --gap:20px;
  --maxw:1360px;
  --sec:clamp(52px,5.6vw,88px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--page);color:var(--ink);
  font-family:'Fustat',system-ui,sans-serif;font-weight:400;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.03em;font-weight:500;line-height:1.1}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ---- DM Mono carries every label, subtitle, number and spec value ---- */
.mono{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.eyebrow{color:var(--accent)}
.sub{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-40);font-weight:400;margin-top:14px;display:block}
.num{font-family:'DM Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);font-weight:500;display:block}
.spec{font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);font-weight:400}
.figure{font-family:'DM Mono',ui-monospace,monospace;color:var(--accent);font-weight:500;
  letter-spacing:.04em;font-size:clamp(26px,2.8vw,36px);display:block}

/* ---- header ---- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--page) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
header.stuck{border-bottom-color:var(--rule)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:28px;height:78px}
.logo{display:flex;align-items:center;gap:12px}
.logo-svg{display:block;height:42px;width:auto;aspect-ratio:1059.37/407.34;color:var(--ink);
  transition:color .35s}
.logo:hover .logo-svg{color:var(--accent)}
footer .logo-svg{height:52px;color:var(--ivory)}
footer .logo:hover .logo-svg{color:var(--cream)}
@media(max-width:720px){.logo-svg{height:32px}}
.logo .mark{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--page);
  display:grid;place-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:12.5px}
.logo .wordmark b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.02em;line-height:1.2}
.logo .wordmark span{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-40);font-family:'DM Mono',monospace;margin-top:2px}
nav{display:flex;align-items:center;gap:30px}
nav a.nl{font-size:14.5px;color:var(--ink-60);position:relative;padding:4px 0;transition:color .35s}
nav a.nl::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width .35s}
nav a.nl:hover{color:var(--ink)}
nav a.nl:hover::after,nav a.nl.on::after{width:100%}
nav a.nl.on{color:var(--ink)}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn i{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0;
  transition:transform .35s cubic-bezier(.16,.84,.3,1),opacity .25s}
.mnav{display:none}
.stickycta{display:none}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:15px 26px;border:1px solid transparent;cursor:pointer;border-radius:3px;
  transition:background .45s cubic-bezier(.16,.84,.3,1),color .45s,border-color .45s;white-space:nowrap}
.btn-solid{background:var(--btn-bg);color:var(--btn-ink)}
.btn-solid:hover{background:var(--btn-hover);color:var(--btn-ink)}
.btn-ghost{border-color:var(--ghost-border);color:var(--ink)}
.btn-ghost:hover{border-color:var(--btn-bg);background:var(--btn-bg);color:var(--btn-ink)}
.btn-light{background:var(--ivory);color:var(--brown)}
.btn-light:hover{background:var(--btn-hover);color:var(--ivory)}
.btn .ar{transition:transform .35s}
.btn:hover .ar{transform:translateX(4px)}

/* ---- page hero ---- */
.phero{padding:clamp(46px,5vw,78px) 0 clamp(40px,4.4vw,64px);position:relative}
.phero::after{content:'';position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 8%,var(--rule) 92%,transparent)}
.phero .inner{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap);align-items:end}
.page-home .phero .inner{align-items:center}
.phero h1{font-size:clamp(32px,4.2vw,58px);margin-top:18px;max-width:18ch}
.phero h1.h1-2l{max-width:none;font-size:clamp(27px,3.55vw,50px)}
.phero h1.h1-2l span{display:block;white-space:nowrap}
@media(max-width:640px){.phero h1.h1-2l span{white-space:normal}}
.phero p.lede{color:var(--ink-60);font-size:17px;font-weight:300;max-width:46ch;padding-bottom:6px}

/* ---- sections ---- */
section{padding:var(--sec) 0}
.sec-head{max-width:760px}
.sec-head h2{font-size:clamp(26px,3.1vw,40px);margin-top:14px}
.sec-head p{color:var(--ink-60);font-weight:300;margin-top:16px;max-width:56ch;font-size:16.5px}
.rule{height:1px;background:var(--rule);margin-top:26px}

/* ---- 3-up / 4-up numbered cards ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:40px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:40px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:40px}
.grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);margin-top:40px}
.tile{border-top:1px solid var(--rule);padding-top:20px}
.tile h3{font-size:19px;margin-top:14px}
.tile p{color:var(--ink-60);font-weight:300;font-size:15.5px;margin-top:9px}

/* ---- media blocks ---- */
.media{position:relative;overflow:hidden;border-radius:4px;background:var(--brown);
  box-shadow:0 34px 70px -48px rgba(132,47,20,.6)}
.media .ph{position:absolute;inset:0}
.media .cap{position:absolute;left:0;bottom:0;z-index:2;padding:12px 16px;
  background:rgba(15,16,12,.44);backdrop-filter:blur(6px);color:rgba(255,252,245,.78)}
.m1 .ph{background:radial-gradient(78% 66% at 34% 26%,#C98A50 0%,rgba(201,138,80,0) 62%),
  radial-gradient(88% 74% at 74% 82%,#842F14 0%,rgba(132,47,20,0) 64%),
  radial-gradient(120% 100% at 50% 50%,#984F28 0%,#3A2A1E 88%)}
.m2 .ph{background:radial-gradient(85% 75% at 30% 24%,#8A6E56 0%,#43352A 56%,#241C16 100%)}
.m3 .ph{background:radial-gradient(82% 74% at 40% 22%,#E0D2B4 0%,#B17741 52%,#6E3418 100%)}
.m4 .ph{background:radial-gradient(80% 70% at 62% 30%,#B4623A 0%,#842F14 58%,#3A2118 100%)}

/* ---- image thumbs on tiles ---- */
.thumb{aspect-ratio:4/3.05;border-radius:4px;position:relative;overflow:hidden;margin-bottom:20px;
  box-shadow:0 28px 60px -46px rgba(132,47,20,.62)}
.thumb .ph{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.thumb::after{content:'';position:absolute;inset:0;
  background:radial-gradient(75% 60% at 50% 20%,rgba(255,238,205,.3),transparent 68%),
             radial-gradient(120% 90% at 50% 110%,rgba(15,16,12,.55),transparent 62%);transition:opacity .6s}
.tile:hover .thumb .ph,.mos .cell:hover .ph{transform:scale(1.05)}
.tile:hover .thumb::after{opacity:.7}
.tile.hasimg{border-top:0;padding-top:0}
.tile.hasimg .num{margin-bottom:8px}

/* warm placeholder fills — swap for photography */
.g1{background:radial-gradient(78% 66% at 34% 26%,#C98A50 0%,rgba(201,138,80,0) 62%),
  radial-gradient(88% 74% at 74% 82%,#842F14 0%,rgba(132,47,20,0) 64%),
  radial-gradient(120% 100% at 50% 50%,#984F28 0%,#3A2A1E 88%)}
.g2{background:radial-gradient(85% 75% at 30% 24%,#8A6E56 0%,#43352A 56%,#241C16 100%)}
.g3{background:radial-gradient(82% 74% at 40% 22%,#E0D2B4 0%,#B17741 52%,#6E3418 100%)}
.g4{background:radial-gradient(80% 70% at 62% 30%,#B4623A 0%,#842F14 58%,#3A2118 100%)}
.g5{background:radial-gradient(76% 70% at 28% 30%,#D8C5A4 0%,#A98A5E 46%,#4A3722 100%)}
.g6{background:radial-gradient(80% 72% at 66% 26%,#C3B89C 0%,#8A6B44 50%,#2E2418 100%)}
.g7{background:radial-gradient(84% 70% at 36% 24%,#E7C79A 0%,#984F28 56%,#33200F 100%)}
.g8{background:radial-gradient(78% 68% at 58% 32%,#9E8C6E 0%,#5C4A34 52%,#1F1811 100%)}

/* ---- full-bleed strip of unequal images ---- */
.bleed{display:grid;grid-template-columns:1.55fr 1fr 1.22fr;gap:var(--gap);
  padding:0 var(--gut);max-width:calc(var(--maxw) + 0px);margin:0 auto}
.bleed .cell{position:relative;overflow:hidden;border-radius:4px;
  box-shadow:0 30px 66px -50px rgba(132,47,20,.6)}
.bleed .cell .ph{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.bleed .cell:hover .ph{transform:scale(1.05)}
.bleed .c1{height:clamp(220px,26vw,360px)}
.bleed .c2{height:clamp(180px,21vw,290px);align-self:end}
.bleed .c3{height:clamp(200px,24vw,325px);align-self:center}
.bleed .cap{position:absolute;left:0;bottom:0;padding:11px 15px;background:rgba(15,16,12,.44);
  backdrop-filter:blur(6px);color:rgba(255,252,245,.78)}

/* ---- mosaic ---- */
.mos{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:repeat(2,minmax(140px,20vw));
  gap:var(--gap);margin-top:40px}
.mos .cell{position:relative;overflow:hidden;border-radius:4px;
  box-shadow:0 28px 62px -50px rgba(132,47,20,.58)}
.mos .cell .ph{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.mos .tall{grid-row:span 2}
.mos .wide{grid-column:span 2}
.mos .cap{position:absolute;left:10px;bottom:10px;padding:7px 11px;border-radius:3px;
  background:var(--surface);color:var(--brown)}

/* ---- tinted + gradient panels (colour breaks) ---- */
.tint{background:var(--surface)}
.gpanel{background:var(--grad);color:var(--ivory);position:relative;overflow:hidden;border-radius:4px;
  padding:clamp(26px,3.4vw,46px)}
.gpanel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 76% 12%,rgba(255,238,205,.28),transparent 62%),
             radial-gradient(80% 70% at 8% 100%,rgba(15,16,12,.3),transparent 64%)}
.gpanel h3{font-size:clamp(20px,2.3vw,28px);position:relative;z-index:1}
.gpanel p{color:rgba(255,252,245,.86);font-weight:300;margin-top:12px;position:relative;z-index:1;max-width:40ch}
.gpanel .mono{color:rgba(255,252,245,.72);position:relative;z-index:1}
.gpanel .figure{color:var(--ivory);position:relative;z-index:1}

/* colour swatch chip on the materials index */
.sw{width:100%;height:44px;border-radius:3px;margin-bottom:12px;position:relative;overflow:hidden}

/* ---- split (text + image) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split.rev .col-a{order:2}
.split .media{aspect-ratio:4/3.1}
.split p{color:var(--ink-60);font-weight:300;margin-top:16px;max-width:50ch}

/* ---- timeline ---- */
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);margin-top:44px;
  border-top:1px solid var(--rule);padding-top:24px}
.tl .yr{font-family:'DM Mono',monospace;color:var(--accent);font-size:clamp(20px,2.1vw,27px);
  letter-spacing:.02em;font-weight:500;display:block}
.tl > div{display:flex;flex-direction:column}
.tl p{color:var(--ink-60);font-weight:300;font-size:15px;margin-top:12px;text-wrap:pretty}

/* ---- spec table ---- */
.tbl{margin-top:40px;border-top:1px solid var(--rule)}
.tr{display:grid;grid-template-columns:120px 1.05fr 2fr 130px;gap:var(--gap);
  padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline;transition:background .4s}
.tr:hover{background:rgba(42,34,27,.035)}
.tr h3{font-size:19px}
.tr p{color:var(--ink-60);font-weight:300;font-size:15.5px}
.tr .rt{text-align:right}

/* ---- index of materials ---- */
.idx{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);margin-top:40px}
.idx .it{border-top:1px solid var(--rule);padding-top:16px}
.idx .it b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:16px;letter-spacing:-.02em;display:block}
.idx .it .spec{display:block;margin-top:7px}

/* ---- chips ---- */
.cats{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cat{padding:15px 24px;border:1px solid var(--rule);border-radius:3px;font-size:15px;
  transition:background .45s,color .45s,border-color .45s;cursor:default}
.cat:hover{border-color:transparent;background:var(--chip-hover-bg);color:var(--chip-hover-ink)}

/* ---- dark band ---- */
.band{background:var(--band-bg);color:var(--band-ink);position:relative;isolation:isolate}
.band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 55% at 78% 8%,rgba(177,119,65,.28),transparent 64%),
             radial-gradient(70% 60% at 8% 96%,rgba(132,47,20,.24),transparent 66%)}
.band h2{font-size:clamp(26px,3.1vw,40px)}
.band p{color:var(--band-muted);font-weight:300;margin-top:18px;max-width:50ch}
.band .eyebrow{color:var(--band-eyebrow)}
.band .sub{color:rgba(255,252,245,.55)}
.band .num,.band .spec,.band .yr{color:var(--band-eyebrow)}
.band .tile,.band .tbl,.band .tr,.band .idx .it{border-color:var(--band-rule)}
.band .tile p,.band .tr p{color:var(--band-muted)}

/* ---- team ---- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:44px}
.person .shot{aspect-ratio:3/3.7;border-radius:4px;position:relative;overflow:hidden;
  box-shadow:0 30px 64px -48px rgba(132,47,20,.62)}
.person .shot .ph{position:absolute;inset:0}
.person:nth-child(1) .shot .ph{background:radial-gradient(80% 70% at 38% 26%,#C7A277 0%,#8A5F3C 54%,#33241A 100%)}
.person:nth-child(2) .shot .ph{background:radial-gradient(80% 70% at 58% 24%,#B99C7E 0%,#6F5540 55%,#2A1F17 100%)}
.person:nth-child(3) .shot .ph{background:radial-gradient(80% 70% at 44% 22%,#D8C5A4 0%,#9A7550 55%,#3A2A1D 100%)}
.person .shot .cap{position:absolute;left:0;bottom:0;padding:11px 14px;background:rgba(15,16,12,.42);
  backdrop-filter:blur(6px);color:rgba(255,252,245,.78)}
.person h3{font-size:19px;margin-top:18px}
.person .role{margin-top:8px}
.person p{color:var(--ink-60);font-weight:300;font-size:15px;margin-top:10px}

/* ---- map ---- */
.map{height:100%;min-height:420px;border:1px solid var(--band-rule);border-radius:4px;position:relative;
  overflow:hidden;background:linear-gradient(150deg,rgba(15,16,12,.42),rgba(15,16,12,.72));
  box-shadow:inset 0 0 80px 10px rgba(15,16,12,.4)}
.map .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--cream);
  box-shadow:0 0 22px 5px rgba(195,184,156,.28);animation:pulse 2.8s infinite}
.map .dot span{position:absolute;left:15px;top:-6px;white-space:nowrap;font-family:'DM Mono',monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,252,245,.82)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(195,184,156,.55)}70%{box-shadow:0 0 0 13px rgba(195,184,156,0)}100%{box-shadow:0 0 0 0 rgba(195,184,156,0)}}
.locs .lr{display:grid;grid-template-columns:150px 1fr;gap:var(--gap);padding:17px 0;
  border-bottom:1px solid var(--band-rule);align-items:baseline}
.locs{display:flex;flex-direction:column;height:100%}
.locs.light .lr{border-bottom-color:var(--rule)}
.locs.light .lr:first-child{border-top-color:var(--rule)}
.locs.light .lr p{color:var(--ink-60)}
.map.light{border-color:var(--rule)}
.locs .lr:first-child{border-top:1px solid var(--band-rule)}
.locs .lr{flex:1}
.eqrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:stretch;margin-top:44px}
.locs .lr b{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:17px;letter-spacing:-.02em}
.locs .lr p{margin:0;font-size:14.5px}

/* ---- form ---- */
.form-band{background:var(--form-bg);color:var(--ivory);position:relative;isolation:isolate}
.form-band::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 55% at 78% 8%,rgba(177,119,65,.28),transparent 64%),
             radial-gradient(70% 60% at 8% 96%,rgba(132,47,20,.24),transparent 66%)}
.band + .form-band{border-top:1px solid rgba(255,252,245,.16)}
.form-band .inner{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4.6vw,76px);align-items:start}
.form-band h2{font-size:clamp(26px,3.1vw,40px)}
.form-band .eyebrow{color:var(--band-eyebrow)}
.form-band p{color:rgba(255,252,245,.74);margin-top:18px;font-weight:300;max-width:42ch}
.assure{margin-top:30px;border-top:1px solid rgba(255,252,245,.2);padding-top:22px;display:grid;gap:11px}
.assure li{list-style:none;display:flex;gap:12px;color:rgba(255,252,245,.78);font-size:15px;font-weight:300}
.assure li::before{content:'—';color:var(--cream)}
.assure.plain{border-top:0;margin-top:44px;padding-top:0;gap:9px}
.assure.plain li::before{content:''}
.assure.plain li{gap:0;color:rgba(255,252,245,.82)}
form{background:var(--surface);color:var(--surface-ink);padding:clamp(24px,3vw,40px);border-radius:4px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1/-1}
.f label{color:rgba(42,34,27,.45)}
.f input,.f select,.f textarea{font-family:'Fustat',sans-serif;font-size:15px;color:#2A221B;
  border:0;border-bottom:1px solid rgba(42,34,27,.25);background:transparent;padding:11px 2px;
  outline:none;transition:border-color .3s;border-radius:3px}
.f textarea{resize:vertical;min-height:100px;border:1px solid rgba(42,34,27,.25);padding:12px;border-radius:4px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--orange)}
.f input::placeholder,.f textarea::placeholder{color:rgba(42,34,27,.35)}
form .btn{width:100%;margin-top:26px;padding:18px;background:var(--btn-bg);color:var(--btn-ink)}
form .btn:hover{background:var(--btn-hover)}
form .note{text-align:center;margin-top:14px;color:rgba(42,34,27,.45)}

/* ---- pre-footer CTA ---- */
.cta{border-top:1px solid var(--rule)}
.cta .inner{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta h2{font-size:clamp(24px,2.7vw,34px)}
.cta p{color:var(--ink-60);font-weight:300;margin-top:10px}

/* ---- footer ---- */
footer{background:var(--foot-bg);color:rgba(255,252,245,.72);padding:clamp(48px,5vw,76px) 0 30px;
  border-top:1px solid rgba(255,252,245,.16)}
.fcols{display:grid;grid-template-columns:1.12fr 1.16fr 1.16fr .92fr .79fr;gap:clamp(20px,2.4vw,40px)}
@media(max-width:1240px){.fcols{grid-template-columns:repeat(3,1fr);row-gap:40px}}
/* Scoped: in the three-column footer, start Contact under the India office so
   Site lands under U.A.E. and the logo column stands on its own. Roshni,
   22 Aug 2026. Deliberately not applied at 720px and below, where the footer
   is a single column and forcing a column would invent a second one. */
@media(min-width:721px) and (max-width:1240px){
  .fcols > div:nth-child(4){grid-column:2}
}
footer address + .fphone{margin-top:12px}
footer .fphone a{display:block}
footer h4{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);font-weight:400;margin-bottom:16px}
footer p,footer a{font-size:14.5px;font-weight:300;line-height:1.95}
footer address{font-style:normal}
footer .fcols > div{padding-top:2px}
footer a:hover{color:#FFFCF5}
footer .logo .mark{background:#FFFCF5;color:#2A221B}
footer .logo .wordmark b{color:#FFFCF5}
footer .logo .wordmark span{color:rgba(255,252,245,.5)}
footer .tag{margin-top:16px;max-width:34ch;color:rgba(255,252,245,.6);text-wrap:pretty}
.fbot{margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,252,245,.16);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(255,252,245,.5)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(22px);filter:blur(2.5px);
  transition:opacity .9s cubic-bezier(.16,.84,.3,1),transform .9s cubic-bezier(.16,.84,.3,1),filter .6s}
.rv.in{opacity:1;transform:none;filter:blur(0)}
@media(prefers-reduced-motion:reduce){.rv{filter:none;transform:none;opacity:1}}


/* ================= WIREFRAME-EXACT BLOCKS (About) ================= */
.wfimg{position:relative;overflow:hidden;border-radius:4px;background:var(--brown);
  box-shadow:0 30px 66px -50px rgba(132,47,20,.6)}
.wfimg .ph{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.wfimg:hover .ph{transform:scale(1.04)}
.figcap{display:block;margin-top:12px;color:var(--ink-40)}
.band .figcap{color:rgba(255,252,245,.55)}

/* full-width hero image under the About intro */
.heroimg{aspect-ratio:31/10;margin-top:clamp(30px,3.6vw,48px)}

/* 3 columns divided by vertical hairlines, full rule above */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--rule)}
.cols3 > div{padding:26px var(--gap) 0 0}
.cols3 > div + div{border-left:1px solid var(--rule);padding-left:var(--gap)}
.cols3 h3{font-size:19px;margin-top:14px}
.cols3 p{color:var(--ink-60);font-weight:300;font-size:15.5px;margin-top:9px}

/* contact details — phones above the address, footer-style */
.cols3 .cphone{margin-top:14px}
.cols3 .cphone a{display:block}
.cols3 address{font-style:normal;color:var(--ink-60);font-weight:300;font-size:15.5px;margin-top:14px}

/* values — short rule, title, text. no numbers */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin-top:44px}
.vals > div{border-top:1px solid var(--rule);padding-top:22px}
.vals h3{font-size:19px}
.vals > div{display:flex;flex-direction:column}
.vals p{color:var(--ink-60);font-weight:300;font-size:15.5px;margin-top:12px;text-wrap:pretty}

/* leadership — founder featured, managers below; name and title only */
.founder{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,3.6vw,56px);
  align-items:center;margin-top:44px}
.founder .wfimg{aspect-ratio:4/3.1}
.founder h3{font-size:clamp(24px,2.6vw,34px);margin-top:0;letter-spacing:-.02em}
.founder .role{display:block;margin-top:12px}
.team2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.6vw,56px);
  margin-top:clamp(38px,4.2vw,60px);padding-top:clamp(34px,3.6vw,50px);border-top:1px solid var(--rule)}
.team2 .wfimg{aspect-ratio:4/3}
.team2 h3{font-size:19px;margin-top:18px}
.team2 .role{display:block;margin-top:8px}

/* equal-height facilities row */
.mapcol{display:flex;flex-direction:column}
.mapcol .map{flex:1;min-height:0}


@media(max-width:1080px){
  .vals{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .cols3{grid-template-columns:1fr}
  .cols3 > div{padding:22px 0 0}
  .cols3 > div + div{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .vals{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr;gap:22px}
  .team2{grid-template-columns:1fr 1fr;gap:20px}
  .team2 h3{font-size:17px;margin-top:14px}
  .heroimg{aspect-ratio:16/10}
}


/* ================= WIREFRAME-EXACT BLOCKS (R&D) ================= */
/* process — stage | title | description */
.proc{margin-top:44px;border-top:1px solid var(--rule)}
.proc .r{display:grid;grid-template-columns:110px 260px 1fr;gap:var(--gap);
  padding:26px 0;border-bottom:1px solid var(--rule);align-items:start;transition:background .4s}
.proc .r:hover{background:rgba(42,34,27,.035)}
.proc h3{font-size:18px}
.proc p{color:var(--ink-60);font-weight:300;font-size:15px;text-wrap:pretty}

/* naturals — 6 across, square image, name, spec */
.idx6{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap) var(--gap);margin-top:44px}
.idx6 .it b{display:block;margin-top:16px;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500;font-size:15.5px;letter-spacing:-.02em}
.idx6 .it .spec{display:block;margin-top:8px}
.idx6 .sq{aspect-ratio:1}

/* categories — 3 x 2, divided both ways */
.cat6{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--rule)}
.cat6 > div{padding:26px var(--gap) 30px 0;border-bottom:1px solid var(--rule)}
.cat6 > div:not(:nth-child(3n+1)){border-left:1px solid var(--rule);padding-left:var(--gap)}
.cat6 h3{font-size:18px}
.cat6 p{color:var(--ink-60);font-weight:300;font-size:15px;margin-top:10px;text-wrap:pretty}
/* eight title-only cells — 4 x 2 */
.cat6.cat8{grid-template-columns:repeat(4,1fr)}
.cat6.cat8 > div{padding-top:22px;padding-bottom:24px}
.cat6.cat8 > div:not(:nth-child(3n+1)){border-left:0;padding-left:0}
.cat6.cat8 > div:not(:nth-child(4n+1)){border-left:1px solid var(--rule);padding-left:var(--gap)}

/* document list on the dark band */
.doc{border-top:1px solid var(--band-rule)}
.doc .d{padding:18px 0;border-bottom:1px solid var(--band-rule);
  color:var(--band-muted);font-weight:300;font-size:15px}

/* 4-up short-rule columns work on the dark band too */
.band .vals > div{border-top-color:var(--band-rule)}
.band .vals p{color:var(--band-muted)}

@media(max-width:1080px){
  .proc .r{grid-template-columns:110px 1fr;row-gap:6px}
  .proc .r h3,.proc .r p{grid-column:2}
  .idx6{grid-template-columns:repeat(3,1fr)}
  .cat6{grid-template-columns:repeat(2,1fr)}
  .cat6 > div:not(:nth-child(3n+1)){border-left:0;padding-left:0}
  .cat6 > div:nth-child(even){border-left:1px solid var(--rule);padding-left:var(--gap)}
  .cat6.cat8{grid-template-columns:repeat(2,1fr)}
  .cat6.cat8 > div:not(:nth-child(4n+1)){border-left:0;padding-left:0}
  .cat6.cat8 > div:nth-child(even){border-left:1px solid var(--rule);padding-left:var(--gap)}
}
@media(max-width:720px){
  .proc .r{grid-template-columns:1fr;row-gap:10px;padding:22px 0}
  .proc .r h3,.proc .r p{grid-column:1}
  .idx6{grid-template-columns:repeat(2,1fr)}
  .cat6{grid-template-columns:1fr}
  .cat6 > div{padding:24px 0 26px}
  .cat6 > div:nth-child(even){border-left:0;padding-left:0}
  .cat6.cat8{grid-template-columns:1fr}
  .cat6.cat8 > div{padding-left:0}
  .cat6.cat8 > div:nth-child(even){border-left:0;padding-left:0}
}



/* ================= HOMEPAGE ================= */
/* grand opening banner — video goes here */
.banner{position:relative;height:calc(100svh - 78px);min-height:520px;overflow:hidden;background:var(--brown);
  display:grid;place-items:center;isolation:isolate}
@media(max-width:720px){.banner{height:calc(100svh - 66px)}}
.banner .ph{position:absolute;inset:0;z-index:-2;
  background:radial-gradient(70% 58% at 64% 34%,#C98A50 0%,rgba(201,138,80,0) 62%),
             radial-gradient(85% 70% at 30% 78%,#842F14 0%,rgba(132,47,20,0) 66%),
             radial-gradient(120% 100% at 50% 50%,#984F28 0%,#3A2A1E 88%);
  animation:drift 34s ease-in-out infinite alternate}
.banner::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 44% at 50% 46%,rgba(15,16,12,.44),transparent 72%),
             radial-gradient(90% 80% at 18% 98%,rgba(15,16,12,.5),transparent 66%)}
@keyframes drift{0%{transform:scale(1.05) translate3d(0,0,0)}100%{transform:scale(1.14) translate3d(-2%,-1.4%,0)}}
@media(prefers-reduced-motion:reduce){.banner .ph{animation:none}}
.banner .inner{text-align:center;color:var(--ivory);padding:0 var(--gut);position:relative;z-index:1;
  transform:translateY(clamp(-58px,-4.4vw,-26px))}
.banner .logo-svg{height:clamp(54px,6.75vw,99px);color:var(--ivory);margin:0 auto}
.banner .tag{position:absolute;z-index:1;left:var(--gut);bottom:clamp(30px,4vw,54px);
  margin:0;text-align:left;color:rgba(255,252,245,.9);
  font-size:clamp(13px,1.5vw,21px);letter-spacing:.14em;line-height:1.2;white-space:nowrap}
@media(max-width:720px){.banner .tag{font-size:11px;letter-spacing:.1em;bottom:26px}}
.banner .bcta{position:absolute;z-index:1;right:var(--gut);bottom:clamp(30px,4vw,54px);
  background:transparent;color:var(--ivory);border-color:rgba(255,252,245,.5);
  padding:16px 30px;letter-spacing:.18em}
.banner .bcta:hover{background:var(--ivory);color:var(--brown);border-color:var(--ivory)}
@media(max-width:720px){.banner .bcta{right:auto;left:var(--gut);bottom:62px;padding:13px 22px}}
.banner .corner{position:absolute;z-index:1;color:rgba(255,252,245,.6)}
.banner .tl{top:calc(78px + 24px);left:var(--gut)}
.banner .tr{top:calc(78px + 24px);right:var(--gut)}
.banner .bl{bottom:26px;left:var(--gut)}
.banner .br{bottom:26px;right:var(--gut);display:flex;align-items:center;gap:10px}
.banner .br i{display:block;width:1px;height:26px;background:rgba(255,252,245,.5);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(max-width:720px){.banner .tl,.banner .tr{display:none}}

/* stats strip */
.stats{border-bottom:1px solid var(--rule)}
.stats .row{display:grid;grid-template-columns:repeat(5,1fr);padding:clamp(34px,3.6vw,52px) 0}
.stat{text-align:center;position:relative}
.stat+.stat::before{content:'';position:absolute;left:0;top:14%;height:72%;width:1px;background:var(--rule)}
.stat b{display:block;font-family:'DM Mono',monospace;font-weight:500;color:var(--accent);
  font-size:clamp(26px,2.9vw,38px);letter-spacing:.02em}
.stat span{display:block;margin-top:10px;color:var(--ink-40)}

/* client logo row */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);margin-top:32px}
.logos div{height:78px;border:1px solid var(--rule);border-radius:3px;display:grid;place-items:center;
  color:var(--ink-40);transition:border-color .45s,color .45s}
.logos div:hover{border-color:var(--accent);color:var(--ink)}

/* category chips */
.chips{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);margin-top:32px}
.chips div{padding:22px 24px;border:1px solid var(--rule);border-radius:3px;font-size:15.5px;
  transition:background .45s,color .45s,border-color .45s;cursor:default}
.chips div:hover{border-color:transparent;background:var(--chip-hover-bg);color:var(--chip-hover-ink)}

/* testimonial — no photograph */
.quote{position:relative}
.quote::before,.quote::after{content:'';position:absolute;left:var(--gut);right:var(--gut);height:1px;
  background:linear-gradient(90deg,transparent,var(--rule) 8%,var(--rule) 92%,transparent)}
.quote::before{top:0}.quote::after{bottom:0}
.quote blockquote{font-family:'Plus Jakarta Sans',sans-serif;font-weight:400;
  font-size:clamp(20px,2.3vw,31px);line-height:1.42;letter-spacing:-.03em;max-width:34ch}
.quote .attr{display:block;margin-top:26px;color:var(--ink-40)}

@media(max-width:1080px){
  .stats .row{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .stat:nth-child(3n+1)::before{display:none}
  .logos{grid-template-columns:repeat(3,1fr)}
  .chips{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .stats .row{grid-template-columns:repeat(2,1fr)}
  .stat::before{display:none!important}
  .logos{grid-template-columns:repeat(2,1fr)}
  .chips{grid-template-columns:1fr}
}


/* ---- ingredients carousel ---- */
.carou{position:relative;margin-top:40px}
.carou .track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.carou .track::-webkit-scrollbar{display:none}
.carou .card{flex:0 0 clamp(210px,20vw,272px);scroll-snap-align:start}
.carou .card .wfimg{aspect-ratio:3/3.7}
.carou .card b{display:block;margin-top:16px;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500;font-size:16.5px;letter-spacing:-.02em}
.carou .card .spec{display:block;margin-top:8px}
.carou .nav{display:flex;gap:10px;margin-top:28px}
.carou .nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  font-family:'DM Mono',monospace;font-size:14px;transition:.4s}
.carou .nav button:hover{background:var(--btn-bg);color:var(--btn-ink);border-color:transparent}
.carou .count{margin-left:auto;align-self:center;color:var(--ink-40)}

/* ---- big numbered steps on the dark band ---- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;border-top:1px solid var(--band-rule)}
.steps3 > div{padding:34px var(--gap) 0 0}
.steps3 > div + div{border-left:1px solid var(--band-rule);padding-left:var(--gap)}
.steps3 .big{display:block;font-family:'DM Mono',monospace;font-weight:500;color:var(--band-eyebrow);
  font-size:clamp(34px,4.2vw,56px);letter-spacing:.02em;line-height:1}
.steps3 h3{font-size:21px;margin-top:22px}
.steps3 p{color:var(--band-muted);font-weight:300;font-size:15.5px;margin-top:12px;text-wrap:pretty}

/* ---- category image tiles ---- */
.cattiles{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);margin-top:36px}
.cattiles a{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/3.9;display:block;
  box-shadow:0 28px 62px -50px rgba(132,47,20,.6)}
.cattiles .ph{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.cattiles a::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,16,12,.05) 40%,rgba(15,16,12,.72) 100%)}
.cattiles a:hover .ph{transform:scale(1.06)}
.cattiles span{position:absolute;left:16px;right:12px;bottom:15px;z-index:2;color:var(--ivory);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:16px;letter-spacing:-.02em}

/* ---- testimonial on the brand gradient ---- */
.qpanel{background:var(--grad);color:var(--ivory);position:relative;overflow:hidden;border-radius:4px;
  padding:clamp(34px,4.6vw,72px);margin-top:0}
.qpanel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 78% 10%,rgba(255,238,205,.26),transparent 62%),
             radial-gradient(80% 70% at 6% 100%,rgba(15,16,12,.34),transparent 64%)}
.qpanel blockquote{position:relative;z-index:1;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:400;font-size:clamp(21px,2.5vw,34px);line-height:1.36;letter-spacing:-.03em;max-width:26ch}
.qpanel .attr{display:block;margin-top:30px;color:rgba(255,252,245,.8);position:relative;z-index:1}

@media(max-width:1080px){
  .steps3{grid-template-columns:1fr;border-top:0}
  .steps3 > div{border-left:0!important;border-top:1px solid var(--band-rule);padding:28px 0 0!important}
  .cattiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:720px){
  .cattiles{grid-template-columns:repeat(2,1fr)}
}

/* ---- responsive ---- */
@media(max-width:1080px){
  .phero .inner,.split{grid-template-columns:1fr}
  .bleed{grid-template-columns:1fr 1fr}
  .bleed .c3{display:none}
  .mos{grid-template-columns:1fr 1fr}
  .split.rev .col-a{order:0}
  .grid3,.grid4,.grid5,.tl{grid-template-columns:repeat(2,1fr)}
  .idx{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:repeat(3,1fr)}
  .tr{grid-template-columns:100px 1fr;row-gap:8px}
  .tr .rt{text-align:left}
  .form-band .inner{grid-template-columns:1fr}
  .fcols{grid-template-columns:repeat(3,1fr);row-gap:38px}
}
@media(max-width:720px){
  /* header carries the hamburger only; the CTA becomes a sticky pill */
  nav{display:none}
  .menu-btn{display:block;order:2}
  header{transition:transform .42s cubic-bezier(.16,.84,.3,1),border-color .3s}
  header.hide{transform:translateY(-100%)}
  .stickycta{display:block;position:fixed;top:0;right:var(--gut);z-index:70;
    transform:translateY(74px);opacity:0;pointer-events:none;
    transition:transform .42s cubic-bezier(.16,.84,.3,1),opacity .3s}
  .stickycta.on{opacity:1;pointer-events:auto}
  .stickycta.up{transform:translateY(13px)}
  .stickycta.hidden{opacity:0;pointer-events:none}
  .stickycta .btn{padding:12px 16px;font-size:9.5px;letter-spacing:.14em;
    box-shadow:0 8px 24px rgba(15,16,12,.24)}
  .menu-btn.open i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-btn.open i:nth-child(2){opacity:0}
  .menu-btn.open i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .mnav{display:block;overflow:hidden;max-height:0;
    transition:max-height .45s cubic-bezier(.16,.84,.3,1);border-top:1px solid transparent}
  .mnav.open{max-height:320px;border-top-color:var(--rule)}
  .mnav a{display:block;padding:16px var(--gut);font-size:15px;color:var(--ink-60);
    border-bottom:1px solid var(--rule);transition:color .35s}
  .mnav a:last-child{border-bottom:0}
  .mnav a.on{color:var(--ink)}
  /* keep grid children from being widened by min-content of their contents */
  .split > *,.phero .inner > *,.form-band .inner > *{min-width:0}
  .map{min-height:0}
  .eqrow{grid-template-columns:1fr;row-gap:26px}
  /* Scoped: the homepage map is real artwork now, not an empty decorative panel,
     so it needs a box of its own on phones. Without this the box collapses to its
     own border and reads as a stray second rule under the five points. */
  .whyband .mapcol{display:block}
  .whyband .map{min-height:0;aspect-ratio:640/634}
  /* Scoped: About asked for these; the homepage and Contact keep their own. */
  .page-about .mapcol .map,.page-about .map{min-height:380px}
  .page-about .phero h1.h1-2l span{display:inline}
  .page-about .phero h1.h1-2l span + span::before{content:' '}
  .hbar{gap:10px;height:66px}
  .logo .wordmark b{font-size:13.5px;white-space:nowrap}
  .logo .wordmark span{display:none}
  .logo .mark{width:32px;height:32px;font-size:11.5px}
  .grid3,.grid4,.grid5,.grid2,.tl,.team,.idx{grid-template-columns:1fr}
  .bleed{grid-template-columns:1fr}
  .bleed .c1,.bleed .c2,.bleed .c3{height:220px}
  .mos{grid-template-columns:1fr;grid-template-rows:none}
  .mos .cell{height:200px}.mos .tall,.mos .wide{grid-row:auto;grid-column:auto}
  .fgrid{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr}
  .locs .lr{grid-template-columns:1fr;row-gap:4px}
  .cta .inner{flex-direction:column;align-items:flex-start}
}

/* ================= CMS IMAGE SLOTS =================
   Additive only. A .ph placeholder keeps its gradient until an image or video
   is uploaded from the dashboard, at which point the media fills the same box. */
.ph > img,.ph > video,.ph > picture,.ph > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.banner .ph > video,.banner .ph > img,.banner .ph > picture{z-index:-2}

/* form states — matches the existing .note treatment */
form .note.err{color:var(--orange)}
form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* ================= HOMEPAGE CONTENT UPDATE — additive only ================= */

/* Why Pragati: five points sit beside the map, so the two columns stretch. */
.whyband .split{align-items:stretch}
.whypts{margin-top:30px;border-top:1px solid var(--band-rule)}
.whypts > div{padding:19px 0;border-bottom:1px solid var(--band-rule)}
.whypts h3{font-size:17px;letter-spacing:-.02em}
.whypts p{color:var(--band-muted);font-weight:300;font-size:14.5px;margin-top:7px;max-width:54ch;text-wrap:pretty}

/* Categories: the same tall tiles, scrolled instead of gridded. */
.catcarou{margin-top:34px}
.catcarou .card{flex:0 0 clamp(196px,18.6vw,252px)}
.catcarou .card > a{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/3.9;display:block;
  box-shadow:0 28px 62px -50px rgba(132,47,20,.6)}
.catcarou .card > a::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,16,12,.05) 40%,rgba(15,16,12,.72) 100%)}
.catcarou .card .ph{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
.catcarou .card > a:hover .ph{transform:scale(1.06)}
.catcarou .card > a > span{position:absolute;left:16px;right:12px;bottom:15px;z-index:2;color:var(--ivory);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:16px;letter-spacing:-.02em}
@media(max-width:1080px){.whypts{margin-top:26px}}
@media(max-width:720px){.catcarou .card{flex:0 0 60vw}}

/* ---- enquiry: sent state ---- */
form .fdone{display:none}
form.done .fgrid,form.done > .btn,form.done > .note{display:none}
form.done .fdone{display:block}
form{overflow:hidden}
.fdone{padding:clamp(4px,1vw,12px) 0 6px;animation:pa-rise .55s cubic-bezier(.16,.84,.3,1) both}
.fdone .tick{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(132,47,20,.10);color:var(--orange)}
.fdone .tick svg{width:22px;height:22px;display:block}
.fdone .msg{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;
  font-size:clamp(19px,2.1vw,24px);line-height:1.34;letter-spacing:-.03em;
  color:#2A221B;margin-top:20px;max-width:30ch;text-wrap:pretty}
form .note.err{text-align:left;color:var(--orange);border-top:1px solid rgba(132,47,20,.28);padding-top:14px}
form.sending .btn{opacity:.6;pointer-events:none}
@keyframes pa-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.fdone{animation:none}}

/* ---- About: mission panel on the brand gradient ---- */
.qpanel .eyebrow{display:block;position:relative;z-index:1;color:rgba(255,238,205,.82)}
.qpanel blockquote{margin-top:18px}
.qpanel .qbody{position:relative;z-index:1;margin-top:30px;display:grid;gap:16px;max-width:66ch}
.qpanel .qbody p{color:rgba(255,252,245,.78);font-weight:300;font-size:16px;line-height:1.62;text-wrap:pretty}

/* ---- About: the timeline scrolls, so eight entries keep one row ---- */
.tlcarou .card{flex:0 0 clamp(198px,19vw,248px);border-top:1px solid var(--band-rule);padding-top:20px}
.tlcarou .card .yr{display:block;font-family:'DM Mono',monospace;color:var(--band-eyebrow);
  font-size:clamp(20px,2.1vw,27px);line-height:1;letter-spacing:.01em}
.tlcarou .card p{color:var(--band-muted);font-weight:300;font-size:15px;margin-top:12px;text-wrap:pretty}
.band .carou .nav button{border-color:var(--band-rule);color:var(--band-ink)}
.band .carou .nav button:hover{background:var(--band-ink);color:var(--band-bg);border-color:transparent}
@media(max-width:720px){.tlcarou .card{flex:0 0 68vw}}

/* ---- About: Trust reads as the section intro, so three columns remain ---- */
@media(min-width:1081px){.page-about .vals{grid-template-columns:repeat(3,1fr)}}

/* ---- legal pages: the one place the site sets long prose ---- */
.legal{max-width:76ch}
.legal h2{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.03em;margin-top:40px}
.legal > h2:first-child{margin-top:0}
.legal h3{font-size:17.5px;margin-top:26px}
.legal p,.legal li{color:var(--ink-60);font-weight:300;font-size:16px;line-height:1.72;text-wrap:pretty}
.legal p{margin-top:14px}
.legal ul,.legal ol{margin-top:14px;padding-left:20px}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li{margin-top:8px}
.legal strong{color:var(--ink);font-weight:500}
.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ============== CLIENT FEEDBACK — MOBILE ROUND, 22 Aug 2026 ============== */
/* Footer: Contact page link sits under the email in the Contact column, in the
   same rhythm as the phone and email lines above it — no extra gap. */
footer .fcontact{margin-top:0}
/* The office blocks are <address>, so `footer p,footer a` never reached them and
   they sat at the 16px/400 body default beside a 14.5px/300 column. */
footer address{font-size:14.5px;font-weight:300;line-height:1.95}

@media(max-width:1080px){
  /* Stacked steps carried 28px above the number and nothing below the
     paragraph, so each rule sat hard against the text beneath it. */
  .steps3 > div{padding-bottom:28px!important}
}

@media(max-width:720px){
  /* Same for the numbered detail columns on Contact and About — this is the
     rhythm the .vals rows on Capabilities already read with. */
  .cols3 > div{padding-bottom:22px}
  /* Leadership: Chairman and MD stack instead of sharing the width. */
  .team2{grid-template-columns:1fr;gap:30px}
  .team2 h3{font-size:19px;margin-top:16px}
  /* Request a sample: parked at the foot of the screen and always on. */
  .stickycta{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));
    transform:none;opacity:1;pointer-events:auto;transition:opacity .3s}
  .stickycta.up{transform:none}
  .stickycta.hidden{opacity:0;pointer-events:none}
  /* The pill now sits over the foot of the page, so the footer gives it room
     rather than the copyright line disappearing behind it. */
  footer{padding-bottom:76px}
  /* Homepage: even air either side of the rule under the hero. */
  .page-home .phero{padding-bottom:var(--sec)}
}

/* Keep a '·'-separated phrase whole so a phone never strands its last word.
   Emitted by pa_text_dots(). */
.pa-nb{white-space:nowrap}

/* ============== FOOTER SOCIAL LINKS — 25 Aug 2026 ============== */
/* Roshni: handles sit in the logo column, under the tagline — the only column
   with room. DM Mono at the h4 spec so they read as accents, not body links.
   LinkedIn only for now; Instagram, X and YouTube appear when Site Details
   carries an address for them. */
footer .fsocial{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
footer .fsocial a{display:inline-flex;color:rgba(255,252,245,.6)}
footer .fsocial a:hover{color:#FFFCF5}
footer .fsico{display:block;width:18px;height:18px}