/* ============================================================
   VAISHNAVMATA AGRO INDUSTRIES — inner pages
   Components used only away from the homepage. Tokens, buttons,
   .wrap, .sec, .eyebrow, .tt, .card and .btn all come from style.css.
   ============================================================ */


/* ============================================================
   PAGE THEME
   Every product and destination carries an accent, set as a
   class on <body> by page-open.php. Components below reference
   --accent rather than a fixed green, so a page picks up its own
   identity without a single bespoke rule being written.
   ============================================================ */
body.inner{
  --accent:var(--green); --accent-dk:var(--green-dk);
  --accent-lt:var(--green-lt); --accent-soft:rgba(27,107,69,.09);
  --accent-line:rgba(27,107,69,.26);
}
body.t-gold  {--accent:#B98D14;--accent-dk:#7A5A08;--accent-lt:#E0BC4A;--accent-soft:rgba(201,162,39,.13);--accent-line:rgba(201,162,39,.34)}
body.t-amber {--accent:#B4661C;--accent-dk:#7C4410;--accent-lt:#DE9440;--accent-soft:rgba(180,102,28,.11);--accent-line:rgba(180,102,28,.28)}
body.t-teal  {--accent:#0F6E69;--accent-dk:#0A4E4A;--accent-lt:#2A9C95;--accent-soft:rgba(18,122,117,.11);--accent-line:rgba(18,122,117,.28)}
body.t-clay  {--accent:#A24A1B;--accent-dk:#6F3211;--accent-lt:#CE7440;--accent-soft:rgba(162,74,27,.10);--accent-line:rgba(162,74,27,.26)}
body.t-indigo{--accent:#1B4F87;--accent-dk:#12365E;--accent-lt:#3E7CBC;--accent-soft:rgba(27,79,135,.10);--accent-line:rgba(27,79,135,.26)}
body.t-plum  {--accent:#5C3E90;--accent-dk:#3F2A65;--accent-lt:#8262B8;--accent-soft:rgba(92,62,144,.10);--accent-line:rgba(92,62,144,.26)}
body.t-slate {--accent:#3C5148;--accent-dk:#28372F;--accent-lt:#5E7A6C;--accent-soft:rgba(60,81,72,.10);--accent-line:rgba(60,81,72,.26)}

/* ============================================================
   PAGE HERO — three variants
   .phero.v-split  text panel beside a framed image  (products)
   .phero.v-wide   full-bleed photo, side-anchored scrim (markets)
   .phero.v-slim   no photo, compact accent wash     (utility pages)
   The old single treatment put white type straight onto whatever
   the photo happened to be, which was unreadable on light images;
   every variant here puts the text on a controlled surface.
   ============================================================ */
.phero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--accent-dk)}
.phero-in{position:relative}
.phero-bg{position:absolute;inset:0;z-index:-2}
/* No desaturation: these are rice photographs and a washed-out grain shot
   reads as poor product. A touch of contrast only. */
.phero-bg .im{filter:contrast(1.03)}

h1.ptt{
  font-size:clamp(30px,4.3vw,54px);font-weight:400;letter-spacing:-.03em;
  margin-top:14px;color:#fff;line-height:1.06;
}
h1.ptt em{
  font-style:italic;font-weight:300;
  background:linear-gradient(100deg,#F6E4A6,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.phero .lead{color:rgba(255,255,255,.8);margin-top:18px;max-width:58ch;font-size:clamp(15px,1.5vw,17.4px)}
.phero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* -- v-wide: photo behind, scrim anchored to the text side -- */
.phero.v-wide{padding:clamp(60px,8vw,112px) 0 clamp(52px,6.5vw,84px)}
.phero.v-wide::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,26,17,.94) 0%,rgba(8,26,17,.86) 38%,rgba(8,26,17,.52) 68%,rgba(8,26,17,.42) 100%),
    linear-gradient(180deg,rgba(8,26,17,.55),transparent 34%,rgba(8,26,17,.62));
}
.phero.v-wide .phero-in{max-width:760px}
[dir="rtl"] .phero.v-wide::after{transform:scaleX(-1)}

/* -- v-split: text on solid colour, image framed alongside -- */
.phero.v-split{padding:clamp(46px,5.6vw,78px) 0 clamp(46px,5.6vw,78px)}
.phero.v-split::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,26,17,.9),rgba(8,26,17,.82)),
    radial-gradient(820px 420px at 84% 6%,var(--accent-soft),transparent 66%);
}
.phero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,64px);align-items:center}
.phero-shot{
  position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/3;box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.16);
}
.phero-shot img{width:100%;height:100%;object-fit:cover;display:block}
.phero-shot .ptag{
  position:absolute;top:0;inset-inline-start:0;z-index:2;
  background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;
}
@media (max-width:920px){
  .phero-split{grid-template-columns:1fr}
  .phero-shot{aspect-ratio:16/9;order:-1;margin-bottom:6px}
}

/* -- v-slim: no photograph at all -- */
.phero.v-slim{
  padding:clamp(44px,5vw,72px) 0 clamp(40px,4.6vw,64px);
  background:
    linear-gradient(180deg,var(--accent-dk),#0C2417),
    var(--accent-dk);
}
.phero.v-slim::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(700px 320px at 8% 0%,rgba(255,255,255,.09),transparent 62%);
}
.phero.v-slim .phero-in{max-width:800px}
.phero.v-slim h1.ptt{font-size:clamp(27px,3.5vw,44px)}

/* a hairline of the page's accent under every hero */
.phero::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--accent),var(--gold) 62%,transparent);
}

/* ---------- Breadcrumbs ---------- */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.crumbs a{color:rgba(255,255,255,.78);border-bottom:1px solid transparent;transition:.3s var(--ease)}
.crumbs a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.crumbs .sep{color:rgba(255,255,255,.34)}
.crumbs [aria-current]{color:var(--gold)}

/* ---------- Page blocks ---------- */
.pblock{padding:clamp(54px,7vw,92px) 0;position:relative}

/* ---------- Section tones ----------
   block_start() cycles these so no two neighbouring sections share a
   surface. The previous rule alternated between transparent and a 42%
   white wash, a difference too slight to read as separate sections. */
.tone-paper{background:transparent}
.tone-sand{background:linear-gradient(180deg,rgba(240,237,226,.72),rgba(240,237,226,.4))}
.tone-accent{background:var(--accent-soft)}
.tone-accent::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--accent-line);
}
.tone-dark{background:linear-gradient(165deg,#0E2A1B,#10352180 60%,#0C2417);color:#fff}
.tone-dark .tt,.tone-dark h2,.tone-dark h3,.tone-dark h4{color:#fff}
.tone-dark .lead,.tone-dark .prose,.tone-dark .prose p{color:rgba(255,255,255,.76)}
.tone-dark .eyebrow{color:var(--gold)}
.tone-dark .note{color:rgba(255,255,255,.52)}
.tone-dark .tile{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.tone-dark .tile h3{color:#fff}
.tone-dark .tile p{color:rgba(255,255,255,.7)}
.tone-dark .tile .num{color:var(--gold)}
.tone-dark .chips li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.86)}
.tone-dark .checklist li{color:rgba(255,255,255,.82)}
.tone-dark .checklist svg{stroke:var(--gold)}
.tone-dark .related{border-top-color:rgba(255,255,255,.16)}
.tone-dark .related h3{color:rgba(255,255,255,.5)}
.tone-dark .related a{color:var(--gold)}
.tone-dark .fq,.tone-dark .faq{border-color:rgba(255,255,255,.16)}
.tone-dark .fq summary{color:#fff}
.tone-dark .fq .fa p{color:rgba(255,255,255,.72)}
.tone-dark .ctarow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.tone-dark .ctarow p{color:rgba(255,255,255,.84)}
.tone-dark .prail li{border-color:rgba(255,255,255,.15)}
.tone-dark .prail h3{color:#fff}
.tone-dark .prail p{color:rgba(255,255,255,.7)}
.pb-head{max-width:74ch;margin-bottom:clamp(28px,3.6vw,44px)}
.pb-head h2.tt{font-size:clamp(26px,3.2vw,40px);margin-top:15px}
.pb-head .lead{margin-top:16px}

.prose{max-width:74ch;color:var(--ink-2);font-size:16px;line-height:1.78}
.prose p+p{margin-top:16px}
.prose.wide{max-width:none;columns:2;column-gap:56px}
@media (max-width:860px){.prose.wide{columns:1}}

/* ---------- Specification table ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--stroke-2);border-radius:var(--r);background:rgba(255,255,255,.72);backdrop-filter:blur(10px);box-shadow:var(--sh-s)}
.spec-table{width:100%;border-collapse:collapse;min-width:460px;font-size:14.5px}
.spec-table th,.spec-table td{padding:14px 20px;text-align:start;vertical-align:top}
.spec-table thead th{
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--accent);white-space:nowrap;
}
.spec-table tbody tr+tr{border-top:1px solid var(--stroke)}
.spec-table tbody th{font-weight:600;color:var(--ink);width:38%;font-family:var(--sans)}
.spec-table tbody td{color:var(--muted)}
.spec-table tbody tr:nth-child(even){background:rgba(240,237,226,.44)}

/* ---------- Tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(14px,1.6vw,22px)}
.tile{
  padding:26px 24px 28px;border:1px solid var(--stroke-2);border-radius:var(--r);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);box-shadow:var(--sh-s);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-m);border-color:rgba(201,162,39,.5)}
.tile .num{font-family:var(--serif);font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:12px}
.tile h3{font-size:19px;color:var(--ink);font-weight:500}
.tile p{margin-top:10px;color:var(--muted);font-size:14.2px;line-height:1.7}

/* ---------- Card grid links ---------- */
.prod-grid .card h3 a{transition:color .3s var(--ease)}
.prod-grid .card:hover h3 a{color:var(--accent)}
.prod-grid .card .ph{display:block}
@media (max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.prod-grid{grid-template-columns:1fr}}

/* ---------- Chips & checklist ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0;padding:0}
.chips li{
  padding:9px 15px;border:1px solid var(--stroke-2);border-radius:var(--r-p);
  background:rgba(255,255,255,.7);font-size:12.6px;color:var(--ink-2);letter-spacing:.02em;
}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:13px 30px}
.checklist li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);font-size:14.6px;line-height:1.62}
.checklist svg{flex:none;margin-top:3px}

/* ---------- Process rail ---------- */
.prail{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.prail li{display:flex;gap:24px;padding:24px 0;border-top:1px solid var(--stroke)}
.prail li:last-child{border-bottom:1px solid var(--stroke)}
.prail .pn{
  flex:none;width:52px;font-family:var(--serif);font-size:26px;font-weight:300;
  color:var(--accent);line-height:1;padding-top:2px;
}
.prail h3{font-size:19px;color:var(--ink);font-weight:500}
.prail p{margin-top:8px;color:var(--muted);font-size:14.6px;line-height:1.72;max-width:70ch}
@media (max-width:640px){.prail li{gap:14px}.prail .pn{width:36px;font-size:20px}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--stroke);max-width:900px}
.fq{border-bottom:1px solid var(--stroke)}
.fq summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  padding:20px 2px;font-family:var(--serif);font-size:18.5px;font-weight:500;color:var(--ink);
  list-style:none;transition:color .3s var(--ease);
}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--accent)}
.fq .pm{position:relative;flex:none;width:14px;height:14px}
.fq .pm::before,.fq .pm::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--gold);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.fq .pm::before{width:14px;height:1.5px}
.fq .pm::after{width:1.5px;height:14px}
.fq[open] .pm::after{transform:rotate(90deg);opacity:0}
.fq .fa{padding:0 2px 22px}
.fq .fa p{color:var(--muted);font-size:15px;line-height:1.76;max-width:74ch}

/* ---------- Inline CTA row ---------- */
.ctarow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
  margin-top:clamp(26px,3vw,38px);padding:26px 28px;
  border:1px solid var(--stroke-2);border-inline-start:3px solid var(--accent);border-radius:var(--r);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);
}
.ctarow p{color:var(--ink-2);font-size:15.4px;max-width:62ch}

/* ---------- Related links ---------- */
.related{margin-top:clamp(30px,3.4vw,44px);padding-top:26px;border-top:1px solid var(--stroke)}
.related h3{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-family:var(--sans)}
.related ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0;padding:0}
.related a{
  display:inline-flex;align-items:center;gap:8px;font-size:13.6px;font-weight:500;color:var(--accent);
  border-bottom:1px solid transparent;transition:.3s var(--ease);
}
.related a:hover{color:var(--gold-dk);border-bottom-color:var(--gold)}
.related .ar{transition:transform .35s var(--ease)}
.related a:hover .ar{transform:translateX(4px)}

/* ---------- Closing CTA band ---------- */
.endcta{
  position:relative;color:#fff;background:var(--green-dk);
  padding:clamp(52px,6.5vw,86px) 0;overflow:hidden;
}
.endcta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(760px 400px at 12% 0%,rgba(201,162,39,.24),transparent 64%);
}
.endcta-in{position:relative;display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(26px,4vw,60px);align-items:center}
.endcta h2.tt{color:#fff;font-size:clamp(25px,3vw,38px)}
.endcta .lead{color:rgba(255,255,255,.74);margin-top:14px}
.endcta-act{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media (max-width:900px){
  .endcta-in{grid-template-columns:1fr}
  .endcta-act{justify-content:flex-start}
}

/* ---------- Contact details ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(14px,1.6vw,22px)}
.ccard{
  padding:28px 26px;border:1px solid var(--stroke-2);border-radius:var(--r);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px);box-shadow:var(--sh-s);
}
.ccard h3{font-size:18px;color:var(--ink);font-weight:500;display:flex;align-items:center;gap:10px}
.ccard p,.ccard address{margin-top:12px;color:var(--muted);font-size:14.4px;line-height:1.75;font-style:normal}
.ccard a{color:var(--green);border-bottom:1px solid rgba(27,107,69,.28)}
.ccard a:hover{color:var(--gold-dk);border-bottom-color:var(--gold)}

/* ---------- 404 ---------- */
.nf{padding:clamp(70px,10vw,130px) 0;text-align:center}
.nf .code{font-family:var(--serif);font-size:clamp(66px,12vw,140px);line-height:1;color:var(--gold);font-weight:300}
.nf h1{font-size:clamp(26px,3.4vw,40px);margin-top:18px;font-weight:400}
.nf .lead{margin:18px auto 30px}
.nf .chips{justify-content:center}

/* ---------- RTL ---------- */
[dir="rtl"] .prail .pn,[dir="rtl"] .crumbs{direction:rtl}
[dir="rtl"] .related a:hover .ar,[dir="rtl"] .tlink:hover .ar{transform:translateX(-4px)}

/* ---------- Small shared bits ---------- */
.note{margin-top:16px;color:var(--muted);font-size:12.8px;line-height:1.7;max-width:74ch;font-style:italic}
.regionh{
  font-size:clamp(19px,2.1vw,25px);font-weight:500;color:var(--ink);
  margin:clamp(30px,3.4vw,44px) 0 20px;padding-bottom:12px;border-bottom:1px solid var(--stroke);
}
.pblock > .wrap > .regionh:first-of-type{margin-top:0}
.regionh a{display:inline-flex;align-items:center;gap:10px;transition:color .3s var(--ease)}
.regionh a:hover{color:var(--green)}
.regionh .ar{font-size:.7em;color:var(--gold)}
.chips li a{color:var(--green);transition:color .3s var(--ease)}
.chips li:hover a{color:var(--gold-dk)}
.tablewrap+.regionh,.tiles+.regionh,.chips+.regionh{margin-top:clamp(34px,4vw,50px)}

/* ============================================================
   SIGNATURE BLOCKS
   These exist so page *sequences* differ, not just page colours.
   A product page and a country page draw on different members of
   this set, which is what stops them reading as one template.
   ============================================================ */

/* ---------- At-a-glance key facts ---------- */
.glance{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  border:1px solid var(--stroke-2);border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.76);backdrop-filter:blur(10px);box-shadow:var(--sh-s);
}
.glance div{padding:22px 24px;border-inline-end:1px solid var(--stroke)}
.glance div:last-child{border-inline-end:0}
.glance dt{
  font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--muted);font-family:var(--sans);
}
.glance dd{margin:9px 0 0;font-family:var(--serif);font-size:clamp(19px,2vw,25px);color:var(--ink);font-weight:400;line-height:1.16}
.glance dd small{display:block;font-family:var(--sans);font-size:12.4px;color:var(--muted);margin-top:5px;letter-spacing:0}
@media (max-width:760px){.glance div{border-inline-end:0;border-bottom:1px solid var(--stroke)}}

/* ---------- Statistic band ---------- */
.statband{
  position:relative;overflow:hidden;color:#fff;
  padding:clamp(46px,5.6vw,78px) 0;
  background:linear-gradient(150deg,var(--accent-dk),#0C2417 78%);
}
.statband::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 340px at 82% 8%,rgba(201,162,39,.22),transparent 66%);
}
.statband .wrap{position:relative}
.statband-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,44px)}
.statband .sb b{
  display:block;font-family:var(--serif);font-weight:300;line-height:1;
  font-size:clamp(34px,4.6vw,58px);
  background:linear-gradient(100deg,#F6E4A6,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.statband .sb span{display:block;margin-top:12px;font-size:13.2px;letter-spacing:.05em;color:rgba(255,255,255,.72);line-height:1.6}
.statband .sb{padding-inline-start:20px;border-inline-start:1px solid rgba(255,255,255,.2)}

/* ---------- Editorial figure + text ---------- */
.figsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,66px);align-items:center}
.figsplit.rev .figsplit-media{order:2}
.figsplit-media{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-m)}
.figsplit-media img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.figsplit-media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 22px 15px;
  background:linear-gradient(180deg,transparent,rgba(8,26,17,.82));
  color:rgba(255,255,255,.9);font-size:12.2px;letter-spacing:.05em;
}
.figsplit-body h3{font-size:clamp(21px,2.4vw,29px);font-weight:500;color:var(--ink);letter-spacing:-.01em}
.figsplit-body .kick{
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);font-family:var(--sans);margin-bottom:12px;
}
.figsplit-body p{margin-top:14px;color:var(--muted);font-size:15.4px;line-height:1.78}
.tone-dark .figsplit-body h3{color:#fff}
.tone-dark .figsplit-body p{color:rgba(255,255,255,.74)}
@media (max-width:860px){
  .figsplit{grid-template-columns:1fr}
  .figsplit.rev .figsplit-media{order:0}
}

/* ---------- Pull quote ---------- */
.pquote{
  max-width:900px;margin-inline:auto;text-align:center;
  padding:clamp(10px,2vw,26px) 0;
}
.pquote .mark{font-family:var(--serif);font-size:64px;line-height:.6;color:var(--accent);opacity:.5}
.pquote blockquote{
  margin:20px 0 0;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(20px,2.6vw,32px);line-height:1.34;color:var(--ink);letter-spacing:-.015em;
}
.pquote cite{
  display:block;margin-top:22px;font-style:normal;font-family:var(--sans);
  font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);
}
.tone-dark .pquote blockquote{color:#fff}
.tone-dark .pquote cite{color:rgba(255,255,255,.56)}
.tone-dark .pquote .mark{color:var(--gold)}

/* ---------- Shipping route band ---------- */
.route{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:clamp(24px,3vw,36px) clamp(22px,3vw,38px);
  border:1px solid var(--stroke-2);border-radius:var(--r);
  background:rgba(255,255,255,.74);backdrop-filter:blur(10px);box-shadow:var(--sh-s);
}
.route .pt{min-width:0}
.route .pt .lbl{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.route .pt .nm{display:block;margin-top:8px;font-family:var(--serif);font-size:clamp(18px,2vw,24px);color:var(--ink)}
.route .pt.to{text-align:end}
.route .line{position:relative;min-width:clamp(70px,16vw,220px);height:26px}
.route .line::before{
  content:"";position:absolute;top:50%;left:0;right:0;height:1px;
  background:repeating-linear-gradient(90deg,var(--accent-line) 0 7px,transparent 7px 14px);
}
.route .line svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);padding:0 7px;color:var(--accent)}
.route .transit{
  grid-column:1/-1;margin-top:18px;padding-top:16px;border-top:1px solid var(--stroke);
  font-size:13.4px;color:var(--muted);
}
.route .transit b{color:var(--ink);font-weight:600}
[dir="rtl"] .route .line svg{transform:translate(-50%,-50%) scaleX(-1)}
@media (max-width:620px){
  .route{grid-template-columns:1fr;text-align:start}
  .route .pt.to{text-align:start}
  .route .line{min-width:0;height:22px;width:60px}
}

/* ---------- Three-up image strip ---------- */
.imgstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.imgstrip figure{position:relative;margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-s)}
.imgstrip img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;transition:transform .8s var(--ease)}
.imgstrip figure:hover img{transform:scale(1.045)}
.imgstrip figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(8,26,17,.84));
  color:#fff;font-size:11.6px;letter-spacing:.06em;
}
@media (max-width:720px){.imgstrip{grid-template-columns:1fr 1fr}.imgstrip figure:last-child{display:none}}

/* ---------- Full-bleed image band with copy ---------- */
.imgband{position:relative;isolation:isolate;color:#fff;padding:clamp(60px,8vw,120px) 0;overflow:hidden}
.imgband img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.imgband::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,26,17,.9),rgba(8,26,17,.66) 52%,rgba(8,26,17,.42));
}
[dir="rtl"] .imgband::after{transform:scaleX(-1)}
.imgband-in{max-width:660px}
.imgband h2{font-size:clamp(24px,3vw,38px);font-weight:400;color:#fff;letter-spacing:-.02em}
.imgband p{margin-top:16px;color:rgba(255,255,255,.8);font-size:15.6px;line-height:1.76}
.imgband .eyebrow{color:var(--gold)}

/* ---------- Section index number (editorial marker) ---------- */
.pb-head{position:relative}
.pb-num{
  font-family:var(--serif);font-size:12px;font-weight:400;letter-spacing:.2em;
  color:var(--accent);opacity:.85;display:block;margin-bottom:6px;
}
.tone-dark .pb-num{color:var(--gold)}

/* ---------- File download row ---------- */
.dlrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(24px,3vw,36px);padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--stroke-2);border-inline-start:3px solid var(--accent);
  border-radius:var(--r);background:rgba(255,255,255,.74);backdrop-filter:blur(10px);
}
.dl-ico{flex:none;color:var(--accent);position:relative;display:grid;place-items:center}
/* The file type sits on the sheet itself, so the format is legible before the
   button is read — and the size beside it is derived, so it cannot go stale. */
.dl-ext{
  position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  font-size:8px;font-weight:700;letter-spacing:.1em;
  background:var(--accent);color:#fff;padding:1px 5px;border-radius:2px;
}
.dl-size{
  display:inline-block;margin-left:2px;padding:1px 7px;border-radius:2px;
  background:var(--sand);color:var(--ink-2);letter-spacing:.08em;font-weight:600;
}
.tone-dark .dl-size{background:rgba(255,255,255,.14);color:#fff}
.tone-dark .dl-ext{background:var(--gold);color:var(--ink)}
.dl-body{flex:1;min-width:200px}
.dl-body p{color:var(--ink-2);font-size:15.2px;line-height:1.7;margin:0}
.dl-meta{display:block;margin-top:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tone-dark .dlrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.tone-dark .dl-body p{color:rgba(255,255,255,.84)}

/* ---------- Process rail with real machine photographs ---------- */
.prail .pimg{
  flex:none;width:66px;height:66px;border-radius:var(--r-s);overflow:hidden;
  border:1px solid var(--stroke-2);background:var(--sand);
  box-shadow:var(--sh-s);
}
.prail .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.tone-dark .prail .pimg{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
@media (max-width:640px){.prail .pimg{width:52px;height:52px}}

/* ============================================================
   MOTION
   Transform/opacity only, so everything stays on the compositor.
   Nothing here tints or dims a photograph — hover and scroll
   change position and framing, never colour.
   ============================================================ */

/* ---------- scroll progress ---------- */
.sprog{
  position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent,var(--green)),var(--gold));
  z-index:90;pointer-events:none;will-change:transform;
}
[dir="rtl"] .sprog{transform-origin:right}

/* Failsafe state: show it now, do not animate. Paired with revealAll() in
   main.js — content must never be hidden by an animation that did not run. */
.js .snap,.js .snap *{transition:none!important;animation:none!important}

/* ---------- heading reveal: wipes up from behind a mask ----------
   overflow:hidden clips at the PADDING box, and these headings are set in a
   serif with deep descenders — so g, y and p on the last line were being cut
   off, badly on the italic. The padding opens the clip box far enough for the
   descender and the italic's right overhang; the matching negative margin
   means nothing moves. The mask still works: the reveal translates by 105% of
   the heading's own height, which is an order of magnitude more than this. */
.js h1.ptt,
.js .pb-head h2.tt,
.js .sec-head h2.tt{
  overflow:hidden;
  padding-bottom:.22em;margin-bottom:-.22em;
  padding-inline-end:.08em;margin-inline-end:-.08em;
}
.js h1.ptt > span.ln,
.js h2.tt > span.ln{
  display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.js h1.ptt.in > span.ln,
.js h2.tt.in > span.ln{transform:none}

/* ---------- hero parallax ---------- */
.phero-bg .im,.hero-slides .slide .im{will-change:transform}

/* ---------- images settle into frame ---------- */
.js .figsplit-media,.js .imgstrip figure,.js .phero-shot{overflow:hidden}
.js .figsplit-media img,
.js .imgstrip figure img,
.js .phero-shot img{
  transform:scale(1.12);transition:transform 1.4s var(--ease);
}
.js .figsplit-media.in img,
.js .imgstrip figure.in img,
.js .phero-shot.in img{transform:scale(1)}
.imgstrip figure:hover img{transform:scale(1.05)}

/* ---------- cards rise with a little more life ---------- */
.js .pcard,.js .card,.js .tile,.js .glance div{
  transition:transform .6s var(--ease),
             box-shadow .6s var(--ease),
             border-color .5s var(--ease);
}

/* ---------- stat figures land one after another ---------- */
.statband .sb b{display:block;transform-origin:left bottom}

/* ---------- nav links get a sliding underline ---------- */
.menu .mi > a{position:relative}
.menu .mi > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.menu .mi:hover > a::after{transform:scaleX(1);transform-origin:left}
.menu .mi > a.active::after{transform:scaleX(1)}

/* ---------- honour the user's motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  .sprog{display:none}
  .js h1.ptt > span.ln,.js h2.tt > span.ln{transform:none;transition:none}
  .js .figsplit-media img,.js .imgstrip figure img,.js .phero-shot img{
    transform:none;transition:none;
  }
  .menu .mi > a::after{transition:none}
}