/* ==========================================================================
   INFOTOM — indian food top of mind
   Handwritten stylesheet. No build step, no Node.

   Sections are colour blocks. Each .sec--* theme sets --bg/--fg/--fg-dim/
   --line/--accent, and every component inside reads those, so a section can
   be recoloured by swapping one class.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Brand palette: two colours only — ink black and this one brown. Every
     former spice colour now points at it, so the whole site follows the
     brand from a single value. */
  --brand:      #7E5C22;
  /* Over photographs (home slider, the six category panels) the palette is
     yellow and white instead, which reads on a dark picture. */
  --photo-accent: #E9A81C;
  --chilli:     var(--brand);
  --chilli-dk:  var(--brand);
  --byadgi:     var(--brand);
  --turmeric:   var(--brand);
  --turmeric-dk:var(--brand);
  --saffron:    var(--brand);
  --cardamom:   var(--brand);
  --cardamom-dk:var(--brand);
  --coriander:  var(--brand);
  --cumin:      var(--brand);
  --clove:      var(--brand);
  --pepper:     var(--ink);
  --soil:       var(--ink);
  --gold:       var(--brand);

  /* Ink & paper */
  --ink:        #1C1A17;
  --paper:      #F7F3EC;
  --sand:       #EFE7D9;

  /* Type */
  --display: "Poppins", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --section: clamp(4.5rem, 9vw, 9rem);
  --maxw: 1560px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Defaults, overridden per section */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-dim: #000;   /* secondary text is black too: no grey copy */
  --line: rgba(28, 26, 23, .14);
  --accent: var(--chilli);
}

/* --- 2. Section themes -------------------------------------------------- */

.sec { background: var(--bg); color: var(--fg); position: relative; }

.sec--cream {
  --bg: #F7F3EC; --fg: #1C1A17;
  --fg-dim: #000; --line: rgba(28, 26, 23, .13);
}
.sec--sand {
  --bg: #EFE7D9; --fg: #1C1A17;
  --fg-dim: #000; --line: rgba(28, 26, 23, .15);
}
.sec--ink {
  --bg: #1C1A17; --fg: #F7F3EC;
  --fg-dim: rgba(247, 243, 236, .72); --line: rgba(247, 243, 236, .18);
}
.sec--chilli {
  --bg: var(--brand); --fg: #FFFFFF; --accent: #FFFFFF;
  --fg-dim: #FFFFFF; --line: rgba(255, 255, 255, .26);
}
.sec--turmeric {
  --bg: var(--brand); --fg: #FFFFFF; --accent: #FFFFFF;
  --fg-dim: #FFFFFF; --line: rgba(255, 255, 255, .26);
}
.sec--cardamom {
  --bg: var(--brand); --fg: #FFFFFF; --accent: #FFFFFF;
  --fg-dim: #FFFFFF; --line: rgba(255, 255, 255, .26);
}
.sec--soil {
  --bg: var(--brand); --fg: #FFFFFF; --accent: #FFFFFF;
  --fg-dim: #FFFFFF; --line: rgba(255, 255, 255, .26);
}
.sec--saffron {
  --bg: var(--brand); --fg: #FFFFFF; --accent: #FFFFFF;
  --fg-dim: #FFFFFF; --line: rgba(255, 255, 255, .26);
}
.sec--pepper {
  --bg: #2B2724; --fg: #F4F1EC;
  --fg-dim: rgba(244, 241, 236, .74); --line: rgba(244, 241, 236, .2);
}

/* Accent overrides, usable on a section or any block inside one. */
.a-chilli    { --accent: var(--chilli); }
.a-byadgi    { --accent: var(--byadgi); }
.a-turmeric  { --accent: var(--turmeric); }
.a-saffron   { --accent: var(--saffron); }
.a-cardamom  { --accent: var(--cardamom); }
.a-coriander { --accent: var(--coriander); }
.a-cumin     { --accent: var(--cumin); }
.a-clove     { --accent: var(--clove); }
.a-pepper    { --accent: var(--pepper); }
.a-soil      { --accent: var(--soil); }
.a-gold      { --accent: var(--gold); }
.a-cream     { --accent: var(--brand); }

/* On a narrow screen the same point count compresses into far less width,
   which turns the tear into spikes — so use fewer, shallower points there. */
@media (max-width: 700px) {
  .sec--torn { margin-top: -22px; clip-path: polygon(0.00% 7px, 6.25% 8px, 12.50% 6px, 18.75% 6px, 25.00% 5px, 31.25% 9px, 37.50% 5px, 43.75% 4px, 50.00% 5px, 56.25% 5px, 62.50% 5px, 68.75% 5px, 75.00% 4px, 81.25% 5px, 87.50% 5px, 93.75% 6px, 100.00% 4px, 100% 100%, 0% 100%); }
}

/* Torn-paper top edge, for a colour block meeting the block above it. */
.sec--torn { margin-top: -22px; clip-path: polygon(0.00% 7px, 2.17% 5px, 4.35% 11px, 6.52% 4px, 8.70% 10px, 10.87% 8px, 13.04% 4px, 15.22% 10px, 17.39% 3px, 19.57% 9px, 21.74% 4px, 23.91% 4px, 26.09% 9px, 28.26% 14px, 30.43% 5px, 32.61% 6px, 34.78% 11px, 36.96% 15px, 39.13% 11px, 41.30% 8px, 43.48% 16px, 45.65% 4px, 47.83% 14px, 50.00% 7px, 52.17% 5px, 54.35% 5px, 56.52% 7px, 58.70% 14px, 60.87% 5px, 63.04% 11px, 65.22% 11px, 67.39% 8px, 69.57% 10px, 71.74% 4px, 73.91% 4px, 76.09% 6px, 78.26% 12px, 80.43% 9px, 82.61% 7px, 84.78% 11px, 86.96% 9px, 89.13% 7px, 91.30% 13px, 93.48% 12px, 95.65% 6px, 97.83% 10px, 100.00% 10px, 100% 100%, 0% 100%); }

/* --- 3. Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

/* --- 4. Typography ------------------------------------------------------ */

.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.display em { font-style: normal; color: var(--accent); }

.d-xl { font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: 1.02; }
.d-lg { font-size: clamp(1.9rem, 3.6vw, 3.3rem); }
.d-md { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.d-sm { font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.18; }

.eyebrow {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .8em;
}
/* Labels carry no leading rule; the text alone marks the section. */
.eyebrow::before { display: none; }


.lede {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem);
  line-height: 1.62;
  color: var(--fg-dim);
  text-wrap: pretty;
}
.body-text { color: var(--fg-dim); text-wrap: pretty; }
.body-text + .body-text { margin-top: 1.05em; }

.numeral {
  font-family: var(--display);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--accent);
}

/* --- 5. Layout ---------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }
/* Exactly one screen tall, content centred in it. Everything inside is sized
   against the screen height, so it fits without scrolling on a laptop; on a
   phone, where the content cannot fit, it simply grows. */
.section--screen {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2rem, 5svh, 4.5rem);
}
.section--screen .s-head__main .lede { margin-top: clamp(.7rem, 1.6svh, 1.3rem); }
@media (min-width: 861px) {
  .section--screen .wave {
    --orb: min(clamp(12rem, 24vw, 22rem), 31svh);
    --swing: min(clamp(1rem, 3.2vw, 2.8rem), 3svh);
    margin-top: clamp(1rem, 3svh, 3rem);
    --pad: clamp(.8rem, 2.4svh, 2.6rem);
  }
  .section--screen .mt-l { margin-top: clamp(1rem, 3svh, 3rem); }
}
/* On a short laptop screen the circles cannot hold every line and still fit
   the height, so the secondary line under the rule gives way. */
@media (min-width: 861px) and (max-height: 820px) {
  .section--screen .wave__rule,
  .section--screen .wave__note { display: none; }
}
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.s-head { padding-top: 0; }
.s-head__aside {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem 1.5rem;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}
.s-head__main { max-width: none; }
.s-head__main .lede { margin-top: 1.3rem; max-width: 56ch; }

/* --- 6. Buttons & links ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .95em 1.7em;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--fg);
  transition: color .4s var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--fg);
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { color: var(--bg); }
.btn__arrow { transition: transform .4s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(.25em); }

.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid::before { background: var(--accent); }
.btn--solid:hover { color: var(--fg); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--line);
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.tlink:hover { border-bottom-color: var(--accent); color: var(--accent); }
.tlink--sm { font-size: .7rem; padding-bottom: .25em; }

/* --- 7. Header ---------------------------------------------------------- */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  padding-block: clamp(.8rem, 1.4vw, 1.15rem);
  background: #FFFFFF;
  border-bottom: 1px solid rgba(28, 26, 23, .1);
  box-shadow: 0 .4rem 1.6rem -1rem rgba(28, 26, 23, .25);
  transition: transform .4s var(--ease-out);
}
/* Out of the way while reading down the page, back the moment you scroll up. */
.hdr.is-hidden { transform: translateY(-100%); }
.hdr__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.hdr__mark { position: relative; display: block; width: clamp(112px, 11vw, 150px); flex: none; }
.hdr__mark img { width: 100%; transition: opacity .4s var(--ease); }
.hdr__mark img + img { position: absolute; inset: 0; height: auto; }
.hdr__mark .is-cream { opacity: 0; }

.hdr__nav { display: flex; align-items: center; gap: clamp(.6rem, 1.3vw, 1.45rem); }
.hdr__link {
  font-family: var(--display);
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: .5em 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  transition: color .35s var(--ease);
}
.hdr__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.hdr__link:hover::after, .hdr__link.is-active::after { transform: scaleX(1); }
.hdr__caret { width: 9px; height: 9px; transition: transform .35s var(--ease); }

/* Product dropdown */
.hdr__has-menu { position: relative; }
.hdr__menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translate(-50%, .6rem);
  min-width: 15rem;
  background: #FFFDF9;
  border: 1px solid rgba(28, 26, 23, .12);
  border-radius: 4px;
  box-shadow: 0 1.6rem 3rem -1rem rgba(28, 26, 23, .28);
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .35s var(--ease-out), visibility .3s;
  margin-top: .6rem;
}
.hdr__has-menu:hover .hdr__menu,
.hdr__has-menu:focus-within .hdr__menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.hdr__menu a {
  display: block;
  padding: .62rem .9rem;
  font-size: .84rem;
  color: var(--ink);
  border-radius: 3px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.hdr__menu a:hover { background: var(--chilli); color: #FFF6EE; }

/* Second level: a category opens its products in a menu to its right. */
.hdr__sub-wrap { position: relative; }
.hdr__sub-link {
  display: flex !important; align-items: center; justify-content: space-between; gap: 1rem;
}
.hdr__sub-caret { width: 9px; height: 9px; flex: none; opacity: .55; }
.hdr__sub {
  position: absolute; top: -.5rem; left: 100%;
  min-width: 14rem; margin-left: .4rem;
  background: #FFFDF9;
  border: 1px solid rgba(28, 26, 23, .12);
  border-radius: 4px;
  box-shadow: 0 1.6rem 3rem -1rem rgba(28, 26, 23, .28);
  padding: .5rem;
  opacity: 0; visibility: hidden; transform: translateX(-.4rem);
  transition: opacity .25s var(--ease), transform .3s var(--ease-out), visibility .25s;
}
/* Bridges the small gap so the pointer can cross into the side menu. */
.hdr__sub::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: .6rem; }
.hdr__sub-wrap:hover > .hdr__sub,
.hdr__sub-wrap:focus-within > .hdr__sub { opacity: 1; visibility: visible; transform: none; }
.hdr__sub-wrap:hover > .hdr__sub-link,
.hdr__sub-wrap:focus-within > .hdr__sub-link { background: var(--chilli); color: #FFF6EE; }
.hdr__menu-rule { display: block; height: 1px; margin: .4rem .5rem; background: rgba(28, 26, 23, .1); }

.burger { display: none; width: 2.3rem; height: 2.3rem; position: relative; z-index: 2; }
.burger span {
  position: absolute; left: .3rem; right: .3rem; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .4s var(--ease-out), background .4s var(--ease);
}
.burger span:nth-child(1) { top: .8rem; }
.burger span:nth-child(2) { bottom: .8rem; }
.is-menu .burger span:nth-child(1) { transform: translateY(.33rem) rotate(45deg); }
.is-menu .burger span:nth-child(2) { transform: translateY(-.33rem) rotate(-45deg); }

/* --- Shop call to action ------------------------------------------------ */

/* The right-hand end of the header: the shop pill, then the burger. */
.hdr__end { display: flex; align-items: center; gap: clamp(.6rem, 1.3vw, 1rem); flex: none; }

.shop {
  position: relative;
  display: inline-flex; align-items: center; gap: .6em;
  padding: .74em 1.35em;
  border-radius: 999px;
  background: var(--chilli);
  color: #FFF6EE;
  font-family: var(--display);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 .5rem 1.3rem -.65rem rgba(126, 92, 34, .95);
  transition: background .35s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.shop__label, .shop__arrow { position: relative; z-index: 2; }
.shop__arrow { transition: transform .4s var(--ease-out); }

/* Two layers of attention: a ring that breathes outward, and a gleam that
   crosses the pill every few seconds. Both stop the moment it is engaged. */
.shop__pulse {
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(126, 92, 34, .55);
  animation: shop-pulse 3.6s var(--ease-out) infinite;
}
.shop__shine {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; overflow: hidden; pointer-events: none;
}
.shop__shine::after {
  content: "";
  position: absolute; top: -60%; bottom: -60%; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 238, .5), transparent);
  transform: translateX(-180%) skewX(-18deg);
  animation: shop-shine 4.8s var(--ease) infinite;
}

@keyframes shop-pulse {
  0%        { box-shadow: 0 0 0 0 rgba(126, 92, 34, .5); }
  55%, 100% { box-shadow: 0 0 0 .8rem rgba(126, 92, 34, 0); }
}
@keyframes shop-shine {
  0%, 60%   { transform: translateX(-180%) skewX(-18deg); }
  88%, 100% { transform: translateX(460%) skewX(-18deg); }
}

.shop:hover, .shop:focus-visible {
  background: var(--chilli-dk);
  transform: translateY(-2px);
  box-shadow: 0 .9rem 1.8rem -.7rem rgba(126, 92, 34, .95);
}
.shop:hover .shop__arrow, .shop:focus-visible .shop__arrow { transform: translateX(.3em); }
.shop:hover .shop__pulse, .shop:focus-within .shop__pulse,
.shop:hover .shop__shine::after, .shop:focus-within .shop__shine::after { animation-play-state: paused; }

/* The bar is white, so the pill only needs its own soft red shadow. */
.hdr .shop { box-shadow: 0 .5rem 1.2rem -.7rem rgba(126, 92, 34, .85); }

/* While the drawer is open the drawer carries its own, wider call to action. */
.is-menu .hdr__end .shop { opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s; }

/* The drawer's version: full width, sat above the promise line. It arrives
   with the menu links, a beat after the last of them. */
.shop--wide {
  justify-content: space-between;
  width: 100%;
  padding: 1.05em 1.5em;
  font-size: .8rem;
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
}
.drawer .shop--wide {
  opacity: 0; transform: translateY(1rem);
  transition: opacity .5s var(--ease) .18s, transform .5s var(--ease-out) .18s,
              background .35s var(--ease), box-shadow .45s var(--ease);
}
.is-menu .drawer .shop--wide { opacity: 1; transform: none; }

@media (max-width: 560px) { .shop { padding: .62em 1.05em; font-size: .68rem; gap: .45em; } .shop--wide { padding: 1.05em 1.4em; font-size: .76rem; } }

.drawer {
  position: fixed; inset: 0; z-index: 890;
  background: var(--ink);
  padding: 6.5rem var(--gutter) 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-out);
  overflow-y: auto;
}
.is-menu .drawer { clip-path: inset(0 0 0 0); }
.drawer__list { display: flex; flex-direction: column; }
.drawer__list a {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 5.5vw, 1.9rem);
  color: #F7F3EC;
  padding-block: .5em;
  border-bottom: 1px solid rgba(247, 243, 236, .16);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  opacity: 0; transform: translateY(1rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease-out);
}
.is-menu .drawer__list a { opacity: 1; transform: none; }
.drawer__list a span { font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; color: var(--gold); }
.drawer__foot { color: rgba(247, 243, 236, .6); font-size: .82rem; padding-top: 1.6rem; }

@media (max-width: 1280px) { .hdr__nav { display: none; } .burger { display: block; } }

/* --- 8. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink);
  color: #F7F3EC;
  /* --bg has to be declared too, not just --fg: a filled button paints
     var(--fg) and sets its text to var(--bg). Without it the hero inherited
     the root paper colour and the label went cream-on-cream on hover. */
  --bg: var(--ink);
  --fg: #F7F3EC; --fg-dim: rgba(247, 243, 236, .8); --line: rgba(247, 243, 236, .2);
  --accent: var(--turmeric);
  overflow: hidden;
  padding-top: 8rem;
  isolation: isolate;
}
/* The admin-set still sits under the film: what is on screen before the
   video has loaded, and what stays there if it cannot play. */
.hero__still,
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.03);
}
.hero__still { z-index: 0; }
.hero__video { z-index: 1; }

/* Home hero slider: stacked photographs that cross-fade, each drifting in
   slowly while it is on show. */
.hero__slides { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--ink); }
.hero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transform: scale(1.08);
  filter: saturate(1.06) contrast(1.03);
  transition: opacity 1s var(--ease), transform 4s linear;
}
.hero__slide.is-on { opacity: 1; transform: scale(1); }

/* Progress bars under the headline, one per slide. */
.hero__dots { display: flex; gap: .45rem; margin-top: clamp(1rem, 2vw, 1.6rem); }
.hero__dot {
  width: clamp(2.2rem, 4vw, 3.4rem); height: 1.4rem; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center;
}
.hero__dot span {
  position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(247, 243, 236, .3);
}
.hero__dot span::after {
  content: ""; position: absolute; inset: 0; background: #F7F3EC;
  transform: scaleX(0); transform-origin: left;
}
.hero__dot.is-on span::after { animation: hero-progress var(--hero-interval, 5.5s) linear forwards; }
.hero.is-paused .hero__dot.is-on span::after { animation-play-state: paused; }
.hero__dot:hover span { background: rgba(247, 243, 236, .5); }
@keyframes hero-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity .6s linear; transform: none; }
  .hero__dot.is-on span::after { animation: none; transform: scaleX(1); }
}

/* Keeps the headline readable whatever frame the video is on. Strength is set
   per site from the home page header, defaulting to the original .55. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20,17,14,calc(var(--scrim, .55) * 1.05)) 0%,
      rgba(20,17,14,calc(var(--scrim, .55) * .25)) 18%,
      rgba(20,17,14,calc(var(--scrim, .55) * .11)) 40%,
      rgba(20,17,14,calc(var(--scrim, .55) * .62)) 60%,
      rgba(20,17,14,calc(var(--scrim, .55) * 1.20)) 82%,
      rgba(20,17,14,calc(var(--scrim, .55) * 1.53)) 100%),
    linear-gradient(90deg,
      rgba(20,17,14,.34) 0%,
      rgba(20,17,14,.10) 46%,
      rgba(20,17,14,0) 78%);
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .34;
  background:
    radial-gradient(56% 46% at 74% 22%, rgba(233, 168, 28, .58) 0%, transparent 68%),
    radial-gradient(44% 40% at 16% 74%, rgba(233, 168, 28, .28) 0%, transparent 70%),
    radial-gradient(50% 48% at 52% 108%, rgba(233, 168, 28, .34) 0%, transparent 70%);
  animation: drift 26s var(--ease) infinite alternate;
}
@keyframes drift {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.4%, 1.4%, 0); }
}
.hero__title {
  text-shadow: 0 1px 2px rgba(12, 10, 8, .38), 0 2px 26px rgba(12, 10, 8, .55);
}
.hero__inner { position: relative; z-index: 3; padding-bottom: clamp(3.5rem, 9vw, 8rem); }
.hero__title { max-width: 17ch; }
/* The mask that the words slide up through. Its box has to reach below the
   baseline or it clips the descender of a "g" or a "p" — so it is padded down
   and pulled back by the same amount, which extends the clip without moving
   the text or changing the line box. */
.hero__title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .3em;
  margin-bottom: -.3em;
}
.hero__title .word > span {
  display: inline-block;
  /* Far enough to clear the taller mask before the reveal starts. */
  transform: translateY(150%);
  transition: transform 1s var(--ease-out);
}
.hero.is-in .hero__title.is-on .word > span { transform: translateY(0); }

/* The four headlines share one spot; only the current one shows. */
.hero__titles { display: grid; align-items: end; }   /* every headline sits on the bottom line, however many lines the longest has */
.hero__title { grid-area: 1 / 1; margin: 0; transition: opacity .55s var(--ease); }
.hero__title:not(.is-on) { opacity: 0; pointer-events: none; }

/* Button row — used by the call-to-action band and the product page. */
.hero__actions {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-top: clamp(1.2rem, 2vw, 1.8rem);
}

/* --- 9. Acronym --------------------------------------------------------- */

.acronym { text-align: left; }
.acronym__word {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 4rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  display: flex; flex-wrap: wrap; gap: 0 .4em;
}
.acronym__word span { color: color-mix(in srgb, var(--fg) 32%, transparent); }
.acronym__word b { font-weight: 600; color: var(--fg); position: relative; }
.acronym__word b::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.06em;
  height: 3px; border-radius: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out); transition-delay: var(--d, 0s);
}
.acronym.is-in .acronym__word b::after { transform: scaleX(1); }

/* --- 10. FFF ------------------------------------------------------------ */

.chain {
  display: flex; align-items: center;
  gap: clamp(.7rem, 2vw, 1.6rem); flex-wrap: wrap;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.7rem);
}
.chain i { color: var(--accent); font-style: normal; }

/* --- Philosophy: three stages on a wave --------------------------------- */

/* Farmers, Factory, Family as a run of circles that rides up, down and up
   again — the order read as a process rather than three cards side by side.
   Each circle carries the whole stage: its number, its mark, its name, what
   it is for, and the first of its commitments. The long version is on the
   About page. */
.wave {
  --orb: clamp(14rem, 26vw, 22rem);
  --swing: clamp(1rem, 3.2vw, 2.8rem);    /* how far a circle rides up or down */
  --pad: clamp(1.4rem, 3vw, 2.6rem);
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1.6vw, 1.6rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: var(--pad);

  /* Full bleed, so the line the circles ride runs off both edges of the
     screen. The inline padding puts the columns back in the content column,
     so the circles do not move. body has overflow-x hidden, which is what
     makes the 100vw safe. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* The line the circles ride, drawn in as the section arrives. Its box is the
   band the circles occupy — top of the raised one to bottom of the dropped
   one — so the curve passes through their centres. */
.wave__line {
  position: absolute; left: 0; right: 0;
  /* The band starts at the top of the raised circle, which is one swing
     above where the grid row itself starts. */
  top: calc(var(--pad) - var(--swing)); height: calc(var(--orb) + var(--swing) * 2);
  width: 100%;
}
.wave__line path {
  fill: none; stroke: var(--fg); opacity: .5;
  stroke-width: 2.6; stroke-linecap: round;
}

/* Drawn in by uncovering it left to right. A stroke-dash draw looks the same
   but measures the dash in screen pixels once the stroke is non-scaling, so
   the far end of a wide line silently lands in the gap and never paints. */
.wave__line { clip-path: inset(0 100% 0 0); transition: clip-path 1.7s var(--ease-out) .25s; }
.sec.is-in .wave__line { clip-path: inset(0 0 0 0); }

/* The lift and the arrival are one transform, because a separate
   [data-reveal] would reset it to none the moment the section came in. */
.wave__step {
  position: relative;
  display: flex; justify-content: center;
  opacity: 0;
  transform: translateY(calc(var(--lift, 0) * var(--swing) + 1.6rem));
  transition: opacity .8s var(--ease) var(--delay, 0s),
              transform .9s var(--ease-out) var(--delay, 0s);
}
.sec.is-in .wave__step {
  opacity: 1;
  transform: translateY(calc(var(--lift, 0) * var(--swing)));
}

/* The circle is the card. Padding keeps the copy off the curve. */
.wave__orb {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .45rem; text-align: center;
  width: var(--orb); aspect-ratio: 1;
  padding-inline: 15%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg));
  border: 2px solid color-mix(in srgb, var(--accent) 40%, var(--bg));
  transition: transform .6s var(--ease-out), background .6s var(--ease),
              border-color .6s var(--ease), box-shadow .6s var(--ease);
}
.wave__no {
  font-family: var(--display); font-weight: 700; font-size: .7rem;
  letter-spacing: .2em; color: var(--accent); opacity: .9;
}
.wave__icon { width: clamp(2.4rem, 5vw, 3.8rem); color: var(--accent); }
.wave__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.1rem, 1.9vw, 1.5rem); line-height: 1.1;
}
.wave__lede {
  font-size: clamp(.78rem, .95vw, .9rem); line-height: 1.4;
  color: var(--fg); max-width: 20ch;
}
.wave__rule { width: 2.2rem; height: 2px; border-radius: 2px; background: var(--accent); opacity: .5; }
.wave__note {
  font-size: clamp(.68rem, .82vw, .78rem); line-height: 1.45;
  color: var(--fg-dim); max-width: 21ch;
}

/* The ring that pulses on the live step, so the eye is pulled along 01-02-03. */
.wave__ring {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0; transform: scale(1);
}
/* Its turn, or the pointer on it: the circle swells a little and warms. */
.wave__step.is-live .wave__orb,
.wave__step:hover .wave__orb,
.wave__step:focus-within .wave__orb { transform: scale(1.04); }
.wave__step.is-live .wave__orb {
  background: color-mix(in srgb, var(--accent) 30%, var(--bg));
  border-color: var(--accent);
  box-shadow: 0 1.6rem 3rem -1.6rem color-mix(in srgb, var(--accent) 70%, transparent);
}
.wave__step.is-live .wave__ring { animation: wave-ping 1.9s var(--ease-out) infinite; }
@keyframes wave-ping {
  0%        { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(1.18); }
}

@media (max-width: 860px) {
  /* Stacked: the wave becomes a column, so the lift is taken out rather than
     pushing circles off centre. */
  .wave {
    grid-template-columns: 1fr; gap: clamp(1.6rem, 6vw, 2.4rem);
    --swing: 0px; --orb: min(84vw, 21rem);
  }
  .wave__line { display: none; }
}


/* --- 11. Origin map ----------------------------------------------------- */

.map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 1000px) { .map-grid { grid-template-columns: 1fr; } }

.map-stage { position: relative; }
/* The layer JS pans and scales to frame the region on show. */
.map__zoom {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 1.5s cubic-bezier(.66, 0, .28, 1);
}
@media (prefers-reduced-motion: reduce) {
  .map__zoom { transition: none; }
}
.map-stage { position: relative; }
.map-stage svg { width: 100%; height: auto; overflow: visible; }
.map__land { fill: color-mix(in srgb, var(--fg) 7%, transparent); }
/* Borders in solid black: the country outline heavier, the states lighter
   so the edge of India still reads first. */
.map__states { fill: none; stroke: #111; stroke-width: 1.1; stroke-linejoin: round; }
.map__outline {
  fill: none;
  stroke: #000;
  stroke-width: 2.4; stroke-linejoin: round;
}

/* State names: small, quiet, behind the pins. Sizes are in map units. */
.map__label {
  font-family: var(--sans); font-weight: 600; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase;
  fill: #000; text-anchor: middle; dominant-baseline: middle;
  pointer-events: none;
}
@media (max-width: 700px) { .map__label { font-size: 13px; letter-spacing: .02em; } }

.pin { cursor: pointer; opacity: .5; transition: transform 1.5s cubic-bezier(.66, 0, .28, 1), opacity .8s var(--ease); }
.pin.is-active, .pin:hover, .pin:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } }
.pin__halo { fill: var(--pin); opacity: .16; transform-box: fill-box; transform-origin: center; }
.pin__dot { fill: var(--pin); stroke: var(--bg); stroke-width: 3; transition: r .45s var(--ease-out); }
.pin__label {
  font-family: var(--display); font-weight: 600;
  font-size: 30px; letter-spacing: .01em;
  fill: var(--fg);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
/* Only the region being shown is named, so labels never collide. */
.pin.is-active .pin__label, .pin:hover .pin__label { opacity: 1; }
/* The picture floating at the pin, under its label. Hidden on every pin but
   the one on show, so the map never fills with boxes. */
.pin__shot { opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; }
.pin.is-active .pin__shot, .pin:hover .pin__shot { opacity: 1; }
.pin__shot-bg { fill: var(--bg); fill-opacity: .85; }
.pin__shot-frame { fill: none; stroke: var(--pin); stroke-opacity: .5; stroke-width: 2; }

.pin__tick { opacity: 0; transition: opacity .4s var(--ease); }
.pin.is-active .pin__tick, .pin:hover .pin__tick { opacity: .5; }
.pin.is-active .pin__dot { r: 13; }
.pin.is-active .pin__halo { opacity: .34; animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .3; }
  50%      { transform: scale(1.5); opacity: .06; }
}

/* --- 12. Origin showcase (auto-rotating) -------------------------------- */

.origin-show { position: relative; }
.origin-card { display: grid; }
.origin-card__panel {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translateY(1.6rem);
  transition: opacity .6s var(--ease), transform .7s var(--ease-out), visibility .6s;
}
.origin-card__panel.is-on { opacity: 1; visibility: visible; transform: none; }

.origin-card__head { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

.origin-card__spice { font-family: var(--display); font-weight: 600; font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.06; }
.origin-card__place {
  font-family: var(--display); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-top: .7rem;
}
.origin-card__note { color: var(--fg-dim); max-width: 46ch; }
.origin-card__meta { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.origin-card__meta dt { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg); }
.origin-card__meta dd { margin: .4rem 0 0; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }

.origin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.8rem; }
.origin-tabs button {
  font-family: var(--display); font-weight: 600;
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .58em 1em;
  border: 2px solid var(--line); border-radius: 999px;
  color: var(--fg-dim);
  transition: all .35s var(--ease);
}
.origin-tabs button:hover { color: var(--fg); border-color: var(--fg); }
.origin-tabs button.is-active { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* Progress bar showing time to the next region */
.origin-progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 1.8rem; }
.origin-progress i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; }
.origin-progress.is-running i { animation: fill var(--dwell, 5s) linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

.origin-play {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); margin-top: 1rem;
  transition: color .3s var(--ease);
}
.origin-play:hover { color: var(--fg); }

/* --- 13. Spice grid ----------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 2.2rem; }
.filters button {
  font-family: var(--display); font-weight: 600;
  font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .68em 1.2em;
  border: 2px solid var(--line); border-radius: 999px;
  color: var(--fg-dim);
  transition: all .35s var(--ease);
}
.filters button:hover { border-color: var(--fg); color: var(--fg); }
.filters button.is-active { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.spices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.4rem;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}
.spice {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  min-height: 20rem;
  display: flex; flex-direction: column;
  transition: border-color .45s var(--ease), transform .45s var(--ease-out);
}
.spice.is-hidden { display: none; }
.spice:hover,
.spice:focus-within { border-color: var(--accent); transform: translateY(-4px); }
.spice::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(110% 80% at 50% 118%, var(--accent) 0%, transparent 60%);
  opacity: .08; transition: opacity .5s var(--ease);
}
.spice:hover::before,
.spice:focus-within::before { opacity: .2; }

/* The whole card is the link, so the hit area matches what it looks like. */
.spice__link {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(1.5rem, 2.2vw, 2.1rem);
  color: inherit;
}
.spice__link:focus-visible { outline-offset: -4px; }

.spice__art {
  width: 5.6rem; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #FFFDF8 0%, color-mix(in srgb, var(--accent) 16%, #FFF8EC) 100%);
  box-shadow: 0 .9rem 1.6rem -.7rem rgba(0, 0, 0, .3),
              inset 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent);
}
.spice__art svg { width: 74%; height: auto; }

/* Photographic cards: a square frame the whole photograph fits inside, with a
   second shot crossfading over the first on hover or keyboard focus.
   object-fit is contain, not cover, so a pack shot is never cropped — the
   frame letterboxes around it instead. */
.spice__media {
  position: relative; display: block; overflow: hidden;
  margin: calc(clamp(1.5rem, 2.2vw, 2.1rem) * -1);
  margin-bottom: 0;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.spice__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .55s var(--ease);
}
.spice__img--alt { opacity: 0; }
.spice:hover .spice__img--alt,
.spice:focus-within .spice__img--alt { opacity: 1; }

.spice__cat {
  font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.spice:not(.spice--photo) .spice__cat {
  position: absolute; top: clamp(1.5rem, 2.2vw, 2.1rem); right: clamp(1.5rem, 2.2vw, 2.1rem);
}
.spice--photo .spice__cat { display: block; margin-top: clamp(1.2rem, 2vw, 1.6rem); }
.spice--photo .spice__name { padding-top: .35rem; }

.spice__name { font-family: var(--display); font-weight: 600; font-size: 1.32rem; line-height: 1.14; padding-top: 1.5rem; }
/* Every card reserves the same number of lines for each field, so the rules,
   origins and descriptions line up across a row whatever the wording. */
.spice__note {
  color: var(--accent); margin-top: .45rem; font-size: .92rem; font-weight: 500; line-height: 1.45;
  min-height: 2.9em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spice__origin {
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); line-height: 1.5;
  min-height: calc(3em + .9rem);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spice__detail {
  font-size: .86rem; color: var(--fg-dim); margin-top: .8rem; line-height: 1.55;
  min-height: 4.65em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- 14. Journey rail --------------------------------------------------- */

.journey { position: relative; }
.journey::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(2rem, 5vw, 5rem);
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none;
}
.journey__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14.5rem, 1fr);
  overflow-x: auto; scroll-snap-type: x proximity;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  border-top: 2px solid var(--line);
  scrollbar-width: thin;
}
.journey__rail::-webkit-scrollbar { height: 3px; }
.journey__rail::-webkit-scrollbar-thumb { background: var(--line); }
.step {
  scroll-snap-align: start;
  padding: 2rem clamp(1rem, 1.8vw, 1.8rem) 2.4rem;
  border-right: 1px solid var(--line);
  position: relative;
}
.step::before {
  content: ""; position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
}
.step__no { font-family: var(--display); font-weight: 700; font-size: 1.8rem; color: var(--accent); line-height: 1; }
.step__title { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin-top: .7rem; }
.step__text { font-size: .87rem; color: var(--fg-dim); margin-top: .5rem; }

/* --- 15. Channels & cards ---------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: clamp(2rem, 4vw, 3.2rem); }
.cards { perspective: 1400px; }

/* A raised tile. The surface is tinted from the section's own accent and lit
   from the top-left, and the shadow stack gives it thickness, so the same card
   reads as 3D on a cream block and on a dark one. On hover it lifts and tilts
   towards the pointer (--rx/--ry, set by infotom.js), and a soft glare follows
   the pointer across it (--mx/--my). */
.card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.4rem, 2.2vw, 2.1rem);
  border: 1.5px solid var(--line); border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 55%),
    var(--card-surface, color-mix(in srgb, var(--accent) 6%, var(--bg)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -2px 0 rgba(0, 0, 0, .06),
    0 1px 2px rgba(0, 0, 0, .04),
    0 10px 22px -14px rgba(0, 0, 0, .16),
    0 24px 44px -32px rgba(0, 0, 0, .18);
  transform-style: preserve-3d;
  will-change: transform;
}
/* On the pale blocks a tinted surface would sit darker than the page and read
   as sunken, so there the tile is lighter than its ground instead. */
.sec--cream, .sec--sand { --card-surface: color-mix(in srgb, #fff 60%, var(--bg)); }
/* Glare that tracks the pointer. */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
/* A band of light that sweeps across once as the card is picked up. */
.card::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 0 rgba(0, 0, 0, .06),
    0 2px 4px rgba(0, 0, 0, .04),
    0 20px 34px -20px rgba(0, 0, 0, .12),
    0 34px 60px -40px color-mix(in srgb, var(--accent) 20%, transparent);
}
.card:hover::before { opacity: 1; }
.card:hover::after { animation: card-sweep .9s var(--ease-out) forwards; }
@keyframes card-sweep {
  0%   { opacity: 0; transform: skewX(-18deg) translateX(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(380%); }
}

.card__no { font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--accent); }
/* The icon sits on its own small raised plate and floats up off the card on hover. */
.card__icon {
  box-sizing: content-box;
  width: 2.3rem; height: 2.3rem; padding: .6rem;
  color: var(--accent); margin: 1.2rem 0 .4rem;
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%),
    color-mix(in srgb, var(--accent) 14%, var(--bg));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 5px 12px -8px rgba(0, 0, 0, .2);
  transform: translateZ(0);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease), background .4s var(--ease);
}
.card:hover .card__icon {
  transform: translateZ(40px) translateY(-4px) rotate(-6deg) scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 12px 18px -10px rgba(0, 0, 0, .22);
  animation: card-float 2.6s ease-in-out .6s infinite;
}
@keyframes card-float {
  0%, 100% { transform: translateZ(40px) translateY(-4px) rotate(-6deg) scale(1.08); }
  50%      { transform: translateZ(40px) translateY(-8px) rotate(-2deg) scale(1.08); }
}
.card__title {
  font-family: var(--display); font-weight: 600; font-size: 1.22rem; margin-top: 1.6rem; line-height: 1.16;
  transform: translateZ(0); transition: transform .6s var(--ease-out), color .4s var(--ease);
}
.card:hover .card__title { transform: translateZ(26px); color: var(--accent); }
.card__text {
  font-size: .87rem; color: var(--fg-dim); margin-top: .5rem;
  transform: translateZ(0); transition: transform .6s var(--ease-out);
}
.card:hover .card__text { transform: translateZ(14px); }

/* Entrance: cards tip up into place from below rather than just fading in.
   Once the entrance has played, infotom.js adds .is-live so the stagger delay
   stops applying to hover. */
.card[data-reveal] {
  transform: rotateX(16deg) translateY(2.2rem) scale(.96);
  transform-origin: 50% 100%;
  transition:
    opacity .8s var(--ease) var(--delay, 0s),
    transform 1s var(--ease-out) var(--delay, 0s),
    border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.card[data-reveal].is-in { transform: none; }
.card[data-reveal].is-live { transition: opacity .8s var(--ease), transform .7s var(--ease-out), border-color .4s var(--ease), box-shadow .5s var(--ease); }
.card[data-reveal].is-live:hover {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-10px);
  transition: opacity .8s var(--ease), transform .18s linear, border-color .4s var(--ease), box-shadow .5s var(--ease);
}
/* Without the pointer script (touch, or JS off) a hover still lifts the card. */
.card:not([data-reveal]):hover { transform: translateY(-10px); }

@media (hover: none) {
  .card:hover .card__icon { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card[data-reveal], .card[data-reveal].is-live:hover { transform: none; }
  .card:hover .card__icon, .card:hover .card__title, .card:hover .card__text { transform: none; animation: none; }
  .card:hover::after { animation: none; }
}
/* Cards carry no number now, so whatever comes first sits at the top edge. */
.card > .card__title:first-child,
.card > .card__icon:first-child { margin-top: 0; }
@media (max-width: 1150px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cards { grid-template-columns: 1fr; } }
.cards--3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.card__title--tight { margin-top: .6rem; }
@media (max-width: 960px) { .cards--3 { grid-template-columns: 1fr; } }

/* --- 16. Capability band ------------------------------------------------ */

.caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.caps > div { padding: clamp(1.3rem, 2.4vw, 2rem); border: 2px solid var(--line); border-radius: 8px; }
.caps__value { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1; }
.caps__label { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); margin-top: .8rem; }
@media (max-width: 800px) { .caps { grid-template-columns: repeat(2, 1fr); } }

/* --- 16b. Export lanes: the world, and what sails across it ------------- */

.lanes {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-block: clamp(6rem, 11vw, 9rem) clamp(2.2rem, 5vw, 4rem);
  overflow: hidden;
}
.lanes__map { position: absolute; inset: 0; z-index: 0; }
.lanes__svg { width: 100%; height: 100%; display: block; }

/* Keeps the headline readable wherever the coastlines happen to fall. */
.lanes__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(28, 26, 23, .92) 0%, rgba(28, 26, 23, .74) 34%, rgba(28, 26, 23, .1) 62%),
    linear-gradient(to top, rgba(28, 26, 23, .88) 0%, rgba(28, 26, 23, 0) 34%);
}
/* Both are .wrap elements, and .wrap's auto inline margins would otherwise
   shrink them to their content and centre them inside the flex column. */
.lanes__head, .lanes__foot { position: relative; z-index: 2; width: 100%; }
/* Opening a page, the lanes block clears the fixed site header itself. */
.lanes--first { padding-top: clamp(7.5rem, 12vw, 10rem); }
/* The measure is set on the copy, not on the .wrap itself — capping the wrap
   would hand it back to .wrap's auto margins and re-centre the column. */
.lanes__head > * { max-width: 38ch; }
.lanes__foot { margin-top: clamp(2rem, 6vw, 4rem); }

.lanes__legend {
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
  list-style: none;
  /* It sits in the slice of the viewport the reveal observer ignores, so it
     arrives with the section rather than waiting for a scroll past it. */
  opacity: 0; transform: translateY(1rem);
  transition: opacity .8s var(--ease) .25s, transform .9s var(--ease-out) .25s;
}
.lanes.is-in .lanes__legend { opacity: 1; transform: none; }
.lanes__legend li {
  display: inline-flex; align-items: baseline; gap: .5em;
  padding: .5rem .85rem;
  border: 1px solid rgba(247, 243, 236, .22); border-radius: 999px;
  font-size: .72rem; color: rgba(247, 243, 236, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lanes__legend-port {
  font-family: var(--display); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; color: #F7F3EC;
}

/* --- the map itself --- */

.lanes__land  { fill: rgba(247, 243, 236, .11); stroke: rgba(247, 243, 236, .22); stroke-width: .5; }
.lanes__india { fill: rgba(126, 92, 34, .82); stroke: var(--turmeric); stroke-width: .6; }
.lanes__halo  { opacity: .9; }

/* Each lane is drawn twice: the route it follows, and the stretch of it a
   ship is on right now. */
.lanes__route {
  fill: none; stroke: rgba(247, 243, 236, .3);
  stroke-width: .8; stroke-dasharray: 2.5 4.5; stroke-linecap: round;
  opacity: 0;
  transition: opacity 1.2s var(--ease) .2s;
}
.lanes.is-in .lanes__route { opacity: 1; }
.lanes__wake {
  fill: none; stroke: var(--turmeric);
  stroke-width: 1.5; stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 26 calc(var(--len) * 1px);
  stroke-dashoffset: 26px;
}
.lanes.is-in .lanes__wake {
  opacity: .75;
  animation: lane-wake var(--dur) linear var(--delay) infinite;
}
@keyframes lane-wake {
  from { stroke-dashoffset: 26px; }
  to   { stroke-dashoffset: calc(var(--len) * -1px); }
}

/* Ports. The ring arrives when the first ship on that lane does. */
.lanes__dot  { fill: #F7F3EC; }
.lanes__ping { fill: none; stroke: var(--turmeric); stroke-width: 1.2; transform-origin: center; transform-box: fill-box; opacity: 0; }
.lanes.is-in .lanes__ping { animation: lane-ping 2.8s var(--ease-out) var(--delay) infinite; }
@keyframes lane-ping {
  0%       { transform: scale(1);   opacity: .9; }
  60%, 100% { transform: scale(3.4); opacity: 0; }
}
.lanes__label {
  fill: rgba(247, 243, 236, .88);
  font-family: var(--display); font-weight: 600;
  font-size: 9px; letter-spacing: .04em;
  paint-order: stroke; stroke: rgba(28, 26, 23, .75); stroke-width: 2.4px; stroke-linejoin: round;
}
.lanes__label--home { fill: var(--turmeric); font-size: 9px; }
.lanes__home-dot  { fill: var(--turmeric); }
.lanes__home-ring { fill: none; stroke: var(--turmeric); stroke-width: 1.1; opacity: .55; }

/* The ships. animateMotion carries the group; the hull is drawn bow-right so
   rotate="auto" points it down the lane. */
.lanes__ship { opacity: 0; transition: opacity .8s var(--ease) 1s; }
.lanes.is-in .lanes__ship { opacity: 1; }
.lanes__hull  { transform: scale(1.35); }   /* the map is wide; the ship is small */
.lanes__deck  { fill: #F7F3EC; }
.lanes__wash  { stroke: rgba(247, 243, 236, .5); stroke-width: 1.1; stroke-linecap: round; fill: none; }
.lanes__crate--turmeric { fill: var(--turmeric); }
.lanes__crate--chilli   { fill: var(--chilli); }
.lanes__crate--cardamom { fill: var(--brand); }

/* --- stacked: copy above, map full bleed, port list below (home) -------- */

/* The map is never covered: the copy sits above it and the port list below
   it, both in the flow. The map comes first in the markup — it is the thing
   the section is about — so the order is set here. */
.lanes--stacked {
  min-height: 0;
  display: flex; flex-direction: column;
  padding-block: clamp(3rem, 5.5vw, 5rem) clamp(2rem, 4vw, 3.2rem);
}
.lanes--stacked .lanes__map { order: 2; position: relative; z-index: 0; margin-block: clamp(1.4rem, 3vw, 2.4rem); }
.lanes--stacked .lanes__svg { width: 100%; height: auto; transform: none; }

.lanes__pane { position: static; }
.lanes__pane--top  { order: 1; }
.lanes__pane--foot { order: 3; }

/* Headline and lede side by side across the full width, so the band above
   the map stays shallow and the map gets the height. */
.lanes--stacked .lanes__head {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3.5vw, 4rem);
  align-items: end;
}
.lanes--stacked .lanes__head > * { max-width: none; }
.lanes--stacked .lanes__head .lede { max-width: none; }
.lanes--stacked .lanes__foot {
  margin-top: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .9rem 2rem;
}
.lanes--stacked .lanes__foot .mt-l { margin-top: 0; }

@media (max-width: 900px) {
  .lanes--stacked {
    padding-block: clamp(2.6rem, 9vw, 4rem) clamp(2rem, 6vw, 3rem);
  }
  .lanes--stacked .lanes__head { grid-template-columns: 1fr; gap: clamp(1rem, 4vw, 1.6rem); align-items: start; }
}

/* --- the solid ship ----------------------------------------------------- */

/* Bigger than the flat one, and lit, so the deck cargo reads at map scale. */
.lanes__hull--solid { transform: scale(.92); }
.lanes__hull--solid.lanes__hull--west { transform: scale(-.92, .92); }
.lanes__hull--solid .lanes__wash { stroke: #FFFFFF; stroke-width: 1.4; opacity: .85; }
.lanes__hull--solid .lanes__wash--low { stroke-width: 1; opacity: .5; }
.lanes__shadow { fill: rgba(4, 18, 26, .32); }

/* A white wake is invisible on paper; the shadow softens too. */
.lanes--light .lanes__hull--solid .lanes__wash { stroke: rgba(28, 26, 23, .5); }
.lanes--light .lanes__shadow { fill: rgba(28, 26, 23, .16); }
.lanes__mast   { stroke: #39424C; stroke-width: 1.2; fill: none; }

/* --- the same map on paper, for the inbound lanes on /imports ----------- */

.lanes--light .lanes__scrim {
  background:
    linear-gradient(100deg, rgba(247, 243, 236, .95) 0%, rgba(247, 243, 236, .8) 34%, rgba(247, 243, 236, .12) 62%),
    linear-gradient(to top, rgba(247, 243, 236, .9) 0%, rgba(247, 243, 236, 0) 32%);
}
.lanes--light .lanes__land  { fill: rgba(28, 26, 23, .12); stroke: rgba(28, 26, 23, .28); }
.lanes--light .lanes__india { fill: var(--turmeric-dk); stroke: var(--turmeric-dk); }
.lanes--light .lanes__route { stroke: rgba(28, 26, 23, .38); }
.lanes--light .lanes__wake  { stroke: var(--chilli); opacity: .9; }
.lanes--light .lanes__dot   { fill: var(--ink); }
.lanes--light .lanes__ping  { stroke: var(--chilli); }
.lanes--light .lanes__label { fill: rgba(28, 26, 23, .9); stroke: rgba(247, 243, 236, .85); }
.lanes--light .lanes__label--home { fill: var(--chilli); }
.lanes--light .lanes__home-dot  { fill: var(--chilli); }
.lanes--light .lanes__home-ring { stroke: var(--chilli); }
.lanes--light .lanes__deck  { fill: var(--ink); }
.lanes--light .lanes__wash  { stroke: rgba(28, 26, 23, .45); }
.lanes--light .lanes__legend li { border-color: rgba(28, 26, 23, .18); color: var(--fg-dim); }
.lanes--light .lanes__legend-port { color: var(--ink); }

/* The glow that marks home is warm on ink and would only muddy the paper. */
.lanes--light .lanes__halo { display: none; }

/* Narrow: the map stops being a backdrop and becomes a panel between the
   headline and the port list. */
@media (max-width: 900px) {
  .lanes { min-height: auto; padding-block: clamp(5rem, 16vw, 7rem) clamp(2rem, 6vw, 3rem); }
  /* The map takes its own aspect ratio here rather than a slice of the
     viewport, so the whole world stays in frame at phone width. */
  .lanes__map {
    position: relative; inset: auto; order: 2; height: auto;
    margin: clamp(1.6rem, 6vw, 2.4rem) 0 0;
  }
  .lanes__svg { height: auto; }
  .lanes__scrim { display: none; }
  /* No copy over the map here, so the western padding is shifted back off. */
  .lanes__svg { transform: translateX(calc(var(--pad-shift, 0%) * -1)); }
  .lanes__head { order: 1; }
  .lanes__head > * { max-width: none; }
  .lanes__foot { order: 3; margin-top: clamp(1.4rem, 5vw, 2rem); }
  /* At this size the labels are a few pixels tall; the port list below the
     map is doing that job. */
  .lanes__label { display: none; }
}

/* --- 17. Pull quote ----------------------------------------------------- */

.quote { text-align: left; }
.quote blockquote {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.9rem);
  line-height: 1.2; letter-spacing: -.02em;
  max-width: 20ch; text-wrap: balance;
}
.quote blockquote em { font-style: normal; color: var(--accent); }
.quote figcaption {
  margin-top: 2rem; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-dim);
}

/* --- 18. Split ---------------------------------------------------------- */

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4.5vw, 5rem); align-items: center;
}
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }
.split--stretch { align-items: stretch; }
/* The media column centres the drawn plate when no photograph is uploaded,
   and lets a photograph fill the row. The photograph is taken out of flow so
   that it cannot set the row's height — the copy beside it does that, and the
   picture is cropped to whatever height that comes to. */
.media-col { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 22rem; }
.media-col .media-fill { position: absolute; inset: 0; min-height: 0; }
.split--reverse > *:first-child { order: 2; }
@media (max-width: 960px) { .split--reverse > *:first-child { order: 0; } }

/* Home: the company film beside the introduction, framed like a photograph. */
.company-video {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--line); background: var(--fg);
  aspect-ratio: 16 / 9;
}
.company-video video { display: block; width: 100%; height: 100%; object-fit: cover; }

.plate {
  position: relative; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #FFFDF8 0%, color-mix(in srgb, var(--accent) 20%, #FFF6E8) 100%);
  box-shadow: 0 3rem 5rem -2rem rgba(0, 0, 0, .4),
              inset 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
  display: grid; place-items: center;
}
.plate svg { width: 56%; height: auto; }
.plate__ring { position: absolute; inset: -5%; border: 2px solid var(--line); border-radius: 50%; }

/* --- 19. Stack ---------------------------------------------------------- */

.stack { border-top: 2px solid var(--line); margin-top: clamp(1.8rem, 3.5vw, 3rem); }
.stack__row {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1.05fr) minmax(0, 1.5fr);
  gap: clamp(.9rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.3rem, 2.2vw, 2rem);
  border-bottom: 1px solid var(--line);
  align-items: start;
  transition: padding-left .5s var(--ease-out);
}
.stack__row:hover { padding-left: 1rem; }
.stack__no { font-family: var(--display); font-weight: 700; color: var(--accent); font-size: .95rem; padding-top: .35em; }
.stack__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.16; }
.stack__text { color: var(--fg-dim); font-size: .93rem; }
@media (max-width: 820px) {
  .stack__row { grid-template-columns: 3rem 1fr; }
  .stack__text { grid-column: 2; }
}

/* An uploaded photograph standing in for a section's drawn plate. Square and
   contained, so nothing is cropped whatever shape the source is. */
.section-photo {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  aspect-ratio: 1;
}
.section-photo img { width: 100%; height: 100%; object-fit: contain; }

/* Fills the column it is in rather than sitting at a fixed size: the copy
   beside it sets the height, and the photograph is cropped to it. Goes on any
   figure — .section-photo beside a section's copy, .origin-photo in a region
   panel — alongside a .media-col parent. */
.media-fill { aspect-ratio: auto; width: 100%; height: 100%; min-height: 22rem; }
.media-fill img { object-fit: cover; }
@media (max-width: 960px) {
  /* One column here, so there is no neighbour to take a height from. */
  .media-fill { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
  .media-col { min-height: 0; }
  .media-col .media-fill { position: static; }
}

/* A region photograph, where one has been uploaded, in place of the plate. */
.origin-photo {
  margin: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--line);
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.origin-photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- 19b. Product detail ------------------------------------------------ */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 960px) { .pdp { grid-template-columns: 1fr; } }

.pdp__origin {
  margin-top: 1.4rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-dim);
}
.pdp__origin span {
  color: var(--accent); font-weight: 600; margin-right: .6rem;
  padding-right: .6rem; border-right: 1px solid var(--line);
}

.pdp__stage {
  margin: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--line);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  aspect-ratio: 1;
}
.pdp__stage img { width: 100%; height: 100%; object-fit: contain; }

.pdp__thumbs { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; }
.pdp__thumb {
  width: 4.6rem; aspect-ratio: 1; padding: 0; border-radius: 7px; overflow: hidden;
  border: 2px solid var(--line); background: none; cursor: pointer;
  transition: border-color .3s var(--ease), transform .3s var(--ease-out);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; }
.pdp__thumb:hover { transform: translateY(-2px); }
.pdp__thumb.is-on { border-color: var(--accent); }

.pdp__spec {
  margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
  border-top: 2px solid var(--line);
}
.pdp__spec > div {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--line);
}
.pdp__spec dt {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); font-weight: 600; padding-top: .15em;
}
.pdp__spec dd { margin: 0; font-weight: 500; }
@media (max-width: 560px) {
  .pdp__spec > div { grid-template-columns: 1fr; gap: .2rem; }
}

/* --- 20. Page masthead -------------------------------------------------- */

.masthead {
  position: relative;
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}
.masthead h1 { max-width: 18ch; margin-top: clamp(1rem, 2.4vw, 1.8rem); }

/* An admin-uploaded background turns the masthead into a photographic block.
   The scrim strength is set per page so a light photo can be pushed further
   down without darkening every other page. */
.masthead--image { position: relative; isolation: isolate; background: var(--ink); }
.masthead__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.masthead__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20, 17, 14, calc(var(--scrim, .55) * 1.25)) 0%,
      rgba(20, 17, 14, calc(var(--scrim, .55) * .68)) 42%,
      rgba(20, 17, 14, calc(var(--scrim, .55) * 1.1)) 100%),
    linear-gradient(90deg, rgba(20, 17, 14, .42) 0%, rgba(20, 17, 14, 0) 72%);
}
.masthead__inner { position: relative; z-index: 2; }
.masthead--image .crumb,
.masthead--image h1,
.masthead--image .lede { text-shadow: 0 1px 2px rgba(12, 10, 8, .4), 0 2px 22px rgba(12, 10, 8, .5); }
.masthead .lede { margin-top: 1.5rem; max-width: 56ch; }
.crumb { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); }
.crumb a:hover { color: var(--fg); }

/* --- 21. Forms ---------------------------------------------------------- */

.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.3rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .95rem; color: inherit;
  background: transparent; border: 0; border-bottom: 2px solid var(--line);
  padding: .65em 0; border-radius: 0; appearance: none;
  transition: border-color .35s var(--ease);
}
.field select option { color: #1C1A17; background: #fff; }
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field .err { font-size: .74rem; color: var(--chilli); }
.sec--chilli .field .err, .sec--ink .field .err, .sec--soil .field .err { color: #FFFFFF; }
@media (max-width: 720px) { .form { grid-template-columns: 1fr; } }

.notice {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1.1rem 1.3rem;
  border: 2px solid var(--cardamom); border-radius: 6px;
  background: color-mix(in srgb, var(--cardamom) 12%, transparent);
  margin-bottom: 2rem; font-size: .93rem;
}
.notice b { display: block; margin-bottom: .15rem; }

/* --- 22. Footer --------------------------------------------------------- */

.ftr { background: var(--sand); color: var(--ink); --bg: var(--sand); --fg: #1C1A17; --fg-dim: #000; --line: rgba(28, 26, 23, .16); padding-top: clamp(3.5rem, 7vw, 6rem); }
.ftr__top {
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, .72fr));
  gap: clamp(1.8rem, 3.5vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 1000px) { .ftr__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ftr__top { grid-template-columns: 1fr; } }
.ftr__mark { width: min(220px, 68%); margin-bottom: 1.5rem; }
.ftr__promise { font-family: var(--display); font-weight: 500; font-size: 1.05rem; max-width: 32ch; line-height: 1.5; }
.ftr__h { font-size: .66rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--chilli); margin-bottom: 1.1rem; }
.ftr__list { display: flex; flex-direction: column; gap: .6rem; }
.ftr__list a, .ftr__list li { font-size: .89rem; color: var(--fg-dim); transition: color .35s var(--ease); }
.ftr__list a:hover { color: var(--ink); }
.ftr__social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.ftr__social a {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  border: 1.5px solid var(--line); color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out);
}
.ftr__social a:hover { background: var(--chilli); border-color: var(--chilli); color: #FFF6EE; transform: translateY(-3px); }
.ftr__social svg { width: .95rem; height: .95rem; }
.ftr__bar {
  border-top: 1px solid var(--line); padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between;
  font-size: .74rem; color: #000;
}

/* --- 23. Reveal --------------------------------------------------------- */

[data-reveal] {
  opacity: 0; transform: translateY(1.6rem);
  transition: opacity .8s var(--ease), transform .9s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__title .word > span { transform: none; }
}

/* --- 24. Utility -------------------------------------------------------- */

.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; top: -100px; left: var(--gutter); z-index: 1000; background: #F7F3EC; color: #1C1A17; padding: .8rem 1.2rem; font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.skip:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.mt-l { margin-top: clamp(1.8rem, 3.5vw, 3rem); }
.mt-m { margin-top: clamp(1.1rem, 2vw, 1.8rem); }
.center { text-align: center; }
.is-locked { overflow: hidden; }

/* --- 25. Empty state ---------------------------------------------------- */

.empty {
  border: 2px dashed var(--line);
  border-radius: 10px;
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}
.empty__icon { width: 3rem; height: 3rem; color: var(--accent); margin: 0 auto 1.2rem; }
.empty__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.empty__text { color: var(--fg-dim); margin-top: .7rem; max-width: 46ch; margin-inline: auto; font-size: .95rem; }

.cert { padding: clamp(1.4rem, 2.2vw, 2rem); border: 2px solid var(--line); border-radius: 8px; }
.cert__name { font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.cert__issuer { color: var(--accent); font-size: .85rem; font-weight: 500; margin-top: .3rem; }
.cert__meta { color: var(--fg-dim); font-size: .85rem; margin-top: .8rem; }

/* --- 26. Blog ----------------------------------------------------------- */

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 1.4rem;
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}
.post {
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  transition: border-color .45s var(--ease), transform .45s var(--ease-out);
}
.post:hover,
.post:focus-within { border-color: var(--accent); transform: translateY(-4px); }
.post__link { display: flex; flex-direction: column; flex: 1; color: inherit; }
.post__link:focus-visible { outline-offset: -4px; }
.post__media {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
}
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.post:hover .post__media img { transform: scale(1.04); }
.post__mark { width: 3.4rem; height: 3.4rem; color: var(--accent); }
.post__meta {
  margin: clamp(1.2rem, 2vw, 1.6rem) clamp(1.3rem, 2vw, 1.8rem) 0;
  font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.post__title {
  margin: .5rem clamp(1.3rem, 2vw, 1.8rem) 0;
  font-family: var(--display); font-weight: 600; font-size: 1.28rem; line-height: 1.18;
  text-wrap: balance;
}
.post__excerpt {
  margin: .7rem clamp(1.3rem, 2vw, 1.8rem) 0;
  font-size: .9rem; color: var(--fg-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post__more {
  margin: auto clamp(1.3rem, 2vw, 1.8rem) clamp(1.3rem, 2vw, 1.8rem);
  padding-top: 1.2rem;
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--display); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}

.pager {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.pager a,
.pager span {
  min-width: 2.6rem; padding: .6em .95em;
  border: 2px solid var(--line); border-radius: 999px;
  text-align: center; font-size: .78rem; font-weight: 600;
}
.pager a:hover { border-color: var(--fg); }
.pager .is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.pager .is-off { color: var(--fg-dim); opacity: .55; }

.article { max-width: 46rem; margin-inline: auto; }
.article__byline {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.article__cover {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 8px;
  margin-bottom: clamp(1.8rem, 3.5vw, 3rem);
}
.article__body { font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.75; }
.article__body p + p { margin-top: 1.2em; }


/* --- 27. White theme ---------------------------------------------------- */
/*
| A light, compact skin: every colour block becomes white or a barely-warm
| off-white, the torn edges go, and the vertical rhythm is tightened so more
| of the page fits on a screen. Switched on per page with the body class
| .theme-white, so it can be rolled out a page at a time.
*/
.theme-white {
  --section: clamp(2rem, 4vw, 3.6rem);
  --paper: #FFFFFF;
  background: #FFFFFF;
}

/* Every section theme resolves to ink on white. */
.theme-white .sec {
  --bg: #FFFFFF; --fg: #1C1A17;
  --fg-dim: #000; --line: rgba(28, 26, 23, .1);
  --accent: var(--chilli);
}
/* Alternate sections take a whisper of warmth, so the page still reads in
   blocks without any heavy colour. */
.theme-white main > .sec:nth-of-type(odd) { --bg: #FAF8F4; }
.theme-white .sec + .sec { border-top: 1px solid rgba(28, 26, 23, .06); }

/* Accents tuned to stay readable on white. */
.theme-white .a-chilli    { --accent: var(--chilli); }
.theme-white .a-byadgi    { --accent: var(--byadgi); }
.theme-white .a-turmeric  { --accent: var(--brand); }
.theme-white .a-saffron   { --accent: var(--brand); }
.theme-white .a-cardamom  { --accent: var(--cardamom); }
.theme-white .a-coriander { --accent: var(--brand); }
.theme-white .a-cumin     { --accent: var(--cumin); }
.theme-white .a-clove     { --accent: var(--clove); }
.theme-white .a-pepper    { --accent: var(--pepper); }
.theme-white .a-soil      { --accent: var(--soil); }
.theme-white .a-gold      { --accent: var(--brand); }
.theme-white .a-cream     { --accent: var(--chilli); }

/* No torn paper between white blocks. */
.theme-white .sec--torn { margin-top: 0; clip-path: none; }

/* Tighter type and rhythm. */
.theme-white .d-xl { font-size: clamp(2.2rem, 4.8vw, 4.4rem); }
.theme-white .d-lg { font-size: clamp(1.6rem, 2.7vw, 2.5rem); }
.theme-white .d-md { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.theme-white .lede { font-size: clamp(.98rem, 1.05vw, 1.08rem); line-height: 1.55; }
.theme-white .mt-l { margin-top: clamp(1.1rem, 2.2vw, 1.8rem); }
.theme-white .mt-m { margin-top: clamp(.7rem, 1.3vw, 1.1rem); }
.theme-white .s-head__aside { margin-bottom: .6rem; }
.theme-white .s-head__main .lede { margin-top: .7rem; }
.theme-white .cards,
.theme-white .spices { margin-top: clamp(1.2rem, 2.4vw, 1.8rem); gap: 1rem; }
.theme-white .card { padding: clamp(1.1rem, 1.6vw, 1.5rem); }
.theme-white .card__title { font-size: 1.08rem; }

/* Hero: one full screen, the header sitting over its top edge. */
.theme-white .hero { min-height: 100vh; min-height: 100svh; }
.theme-white .hero__inner { padding-bottom: clamp(2.4rem, 6vh, 4.6rem); }

/* The lanes map and the philosophy wave take the height their content
   needs, not a whole screen. */
.theme-white .lanes--stacked { padding-block: clamp(2.2rem, 4vw, 3.4rem) clamp(1.6rem, 3vw, 2.4rem); }
.theme-white .lanes--stacked .lanes__map { margin-block: clamp(.8rem, 2vw, 1.4rem); }
.theme-white .section--screen { min-height: 0; display: block; padding-block: var(--section); }
.theme-white .wave { margin-top: clamp(.6rem, 1.6vw, 1.4rem); --orb: clamp(12rem, 20vw, 17rem); --pad: clamp(.6rem, 1.6vw, 1.2rem); --swing: clamp(.6rem, 2vw, 1.6rem); }
.theme-white .wave__orb { background: #FFFFFF; box-shadow: 0 10px 28px -18px rgba(28, 26, 23, .35); }

/* The light lanes styling everywhere, since nothing is dark any more. */
.theme-white .lanes__land { fill: rgba(28, 26, 23, .07); stroke: rgba(28, 26, 23, .12); }

/* Footer and the call to action. */
.theme-white .ftr { background: #FFFFFF; --bg: #FFFFFF; border-top: 1px solid rgba(28, 26, 23, .08); padding-top: clamp(2.2rem, 4vw, 3.4rem); }
.theme-white .ftr__top { padding-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* --- 28. White theme: one screen per section ---------------------------- */
/*
| No section is taller than the screen on a laptop or larger. Headings sit
| beside their introduction instead of above it, and the two maps are sized
| to the height left over rather than to the page width — they scale down
| whole, so nothing is cropped.
*/
@media (min-width: 961px) {
  /* Headline on the left, its introduction on the right. */
  .theme-white .s-head__main:has(> .lede) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .8rem clamp(1.5rem, 4vw, 4rem); align-items: end;
  }
  .theme-white .s-head__main:has(> .lede) > .lede { margin-top: 0; max-width: 54ch; }

  /* World map: whatever height the heading and port list leave free. */
  .theme-white .lanes--stacked .lanes__svg {
    height: clamp(200px, calc(100svh - 26rem), 620px);
    width: 100%;
  }

  /* Origin tour: the heading moves beside the map, and the map is capped to
     the screen so the whole of India stays in view. */
  .theme-white .map-grid { margin-top: 0; align-items: center; }
  .theme-white .map-stage svg { height: min(calc(100svh - 2 * var(--section) - 1.5rem), 42rem); width: 100%; }
  .theme-white .origin-show .map-stage svg { height: calc(100svh - 2 * var(--section) + 2rem); max-height: 58rem; }
  .theme-white .origin-intro { margin-bottom: clamp(.9rem, 2vh, 1.4rem); }
  .theme-white .origin-intro .eyebrow .numeral { margin-left: .8rem; letter-spacing: 0; text-transform: none; }
  .theme-white .origin-intro .lede { margin-top: .6rem; }
  .theme-white .origin-tabs { margin-bottom: clamp(.8rem, 2vh, 1.4rem); }
  .theme-white .origin-card__spice { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
  .theme-white .origin-card__meta { margin-top: .9rem; padding-top: .8rem; }
  .theme-white .origin-progress { margin-top: clamp(.9rem, 2vh, 1.4rem); }
}

/* Compact cards: icon beside the words, so nine channels fit one screen. */
.theme-white .cards--compact { gap: .8rem; }
.theme-white .cards--compact .card {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem; align-items: start;
  padding: clamp(.9rem, 1.3vw, 1.2rem);
}
.theme-white .cards--compact .card__icon { grid-row: 1 / span 2; margin: 0; width: 1.9rem; height: 1.9rem; padding: .5rem; }
.theme-white .cards--compact .card__title { margin-top: .1rem; font-size: 1rem; }
.theme-white .cards--compact .card__text { margin-top: .25rem; font-size: .84rem; }

@media (min-width: 961px) {
  .theme-white .cards--compact + .mt-l,
  .theme-white .lanes--stacked .lanes__foot .mt-l { margin-top: clamp(.8rem, 1.8vh, 1.2rem); }
}
@media (min-width: 961px) {
  /* The tour's column holds heading, tabs and file in one screen. */
  .theme-white .origin-intro .display { font-size: clamp(1.45rem, 2.2vw, 2.1rem); margin-top: .5rem; }
  .theme-white .origin-intro .lede { font-size: .92rem; line-height: 1.5; }
  .theme-white .origin-tabs { gap: .3rem; }
  .theme-white .origin-tabs button { font-size: .62rem; padding: .45em .8em; border-width: 1.5px; }
  .theme-white .origin-card__head { margin-bottom: .2rem; }
  .theme-white .origin-card__spice { font-size: clamp(1.35rem, 2vw, 1.9rem); }
  .theme-white .origin-card__place { margin-top: .35rem; }
  .theme-white .origin-card__note { font-size: .9rem; line-height: 1.5; margin-top: .5rem; }
  .theme-white .origin-card__meta { gap: 1.4rem; }
  .theme-white .origin-card__meta dd { font-size: .95rem; margin-top: .25rem; }
  .theme-white .origin-play { margin-top: .4rem; }
}

@media (min-width: 961px) {
  .theme-white .cards--compact { gap: .6rem; margin-top: clamp(.9rem, 2vh, 1.4rem); }
  .theme-white .cards--compact .card { padding: clamp(.75rem, 1.6vh, 1.05rem) 1rem; }
  .theme-white .cards--compact .card__text { font-size: .82rem; line-height: 1.45; }
}
@media (min-width: 961px) {
  /* Journey: all seven stages in one row, nothing scrolled out of view. */
  .theme-white .journey::after { display: none; }
  .theme-white .journey__rail {
    grid-auto-flow: row; grid-template-columns: repeat(7, minmax(0, 1fr));
    overflow: visible; margin-top: clamp(1.1rem, 2.4vh, 1.8rem);
  }
  .theme-white .step { padding: 1.3rem clamp(.6rem, 1vw, 1rem) 1.4rem; }
  .theme-white .step:last-child { border-right: 0; }
  .theme-white .step__no { font-size: 1.45rem; }
  .theme-white .step__title { font-size: 1.02rem; margin-top: .5rem; }
  .theme-white .step__text { font-size: .8rem; line-height: 1.5; }

  /* The philosophy wave has room for every line again. */
  .theme-white .section--screen .wave__rule,
  .theme-white .section--screen .wave__note { display: block; }
}

/* --- 29. Certification logos: two opposite marquees ------------------ */
.certs { padding-block: clamp(3.5rem, 9svh, 6.5rem); overflow: hidden; }
.certs__head { text-align: center; }
.certs__head .eyebrow { justify-content: center; }
.certs__lede { margin: .8rem auto 0; max-width: 46ch; color: var(--fg-dim); font-size: clamp(.92rem, 1.05vw, 1.02rem); }
.certs__rows { display: grid; gap: clamp(.9rem, 2.2svh, 1.4rem); margin-top: clamp(1.8rem, 5svh, 3.2rem); }
.certs__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.certs__track {
  display: flex; gap: clamp(.8rem, 1.5vw, 1.3rem); width: max-content;
  margin: 0; padding: .6rem 0; list-style: none;
  /* The row is printed twice: sliding by half its width lands on the copy. */
  animation: certs-scroll calc(var(--count, 6) * 4.2s) linear infinite;
}
.certs__marquee--reverse .certs__track { animation-direction: reverse; }
@keyframes certs-scroll { to { transform: translateX(calc(-50% - clamp(.4rem, .75vw, .65rem))); } }
@media (hover: hover) { .certs__marquee:hover .certs__track { animation-play-state: paused; } }
.certs__item {
  flex: none; display: grid; place-items: center;
  width: clamp(170px, 15vw, 240px); height: clamp(96px, 8.4vw, 132px);
  background: #FFFFFF; border: 1px solid rgba(28, 26, 23, .1); border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(28, 26, 23, .32);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.certs__item:hover { transform: translateY(-3px); border-color: rgba(28, 26, 23, .18); box-shadow: 0 16px 28px -18px rgba(28, 26, 23, .38); }
/* The row is pinned to the card, so a logo of any shape (a square MSME mark,
   a wide FIEO one) is fitted inside it rather than stretching the card. */
.certs__item { grid-template: 100% / 100%; overflow: hidden; }
.certs__item img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: .4rem .6rem; }
/* Reduced motion: keep drifting, just slower (content, not decoration). */
@media (prefers-reduced-motion: reduce) {
  .certs__track { animation: certs-scroll calc(var(--count, 6) * 8s) linear infinite !important; }
  .certs__marquee--reverse .certs__track { animation-direction: reverse !important; }
}

/* --- 30. White theme: the closing call to action in black --------------- */
/* One dark band at the foot of the page, so the enquiry stands apart from
   the white sections above it. Specific enough to beat the alternating
   section tint. */
.theme-white main > .sec.cta {
  --bg: #141210; --fg: #F7F3EC;
  --fg-dim: rgba(247, 243, 236, .72); --line: rgba(247, 243, 236, .18);
  --accent: var(--turmeric);
  border-top: 0;
}
.theme-white main > .sec.cta .btn { color: #F7F3EC; }
.theme-white main > .sec.cta .btn:hover { color: #141210; }
.theme-white main > .sec.cta .btn::before { background: #F7F3EC; }
.theme-white main > .sec.cta .btn:first-child { background: var(--turmeric); border-color: var(--turmeric); color: #141210; }
.theme-white main > .sec.cta .btn:first-child::before { background: #F7F3EC; }


/* --- 31. Farmers → Factory → Family, illustrated ------------------------ */
.fff {
  list-style: none; margin: clamp(1.2rem, 3vh, 2.2rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  counter-reset: fff;
}
.fff__step {
  position: relative; display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid rgba(28, 26, 23, .08); border-radius: 22px;
  box-shadow: 0 10px 30px -22px rgba(28, 26, 23, .35);
  overflow: visible; outline: none;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.fff__step:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* The stage on show lifts and takes its own colour. */
.fff__step.is-live {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--accent) 70%, #000);
}
.fff__art {
  margin: 0; height: clamp(150px, calc(100svh - 29rem), 300px); overflow: hidden; border-radius: 21px 21px 0 0;
  display: grid; place-items: center;
  background:
    radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--accent) 14%, #fff) 0%, transparent 72%),
    color-mix(in srgb, var(--accent) 5%, #FFFCF6);
}
.fff__art img {
  width: 86%; height: 92%; object-fit: contain;
  transform: scale(.96); transition: transform .9s var(--ease-out);
}
.fff__step.is-live .fff__art img { transform: scale(1.03); }
.fff__copy { padding: clamp(.9rem, 1.6vw, 1.3rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1rem, 1.8vw, 1.4rem); }
.fff__no {
  display: inline-grid; place-items: center; min-width: 2.1rem; height: 1.5rem; padding: 0 .55rem;
  border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: .7rem; letter-spacing: .08em;
  color: #fff; background: var(--accent); margin: 0;
}
.fff__title { font-family: var(--display); font-weight: 600; font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin: 0; }
.fff__lede { color: var(--accent); font-weight: 500; margin: .2rem 0 0; font-size: .95rem; }
.fff__points { list-style: none; margin: .7rem 0 0; padding: .7rem 0 0; border-top: 1px solid rgba(28, 26, 23, .08); display: grid; gap: .3rem; }
.fff__points li { position: relative; padding-left: 1.2rem; font-size: .85rem; color: var(--fg-dim); line-height: 1.45; }
.fff__points li::before {
  content: ""; display: block; box-sizing: border-box; min-width: .5rem; position: absolute; left: 0; top: .5em; width: .5rem; height: .5rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 70%, #fff);
}
/* Arrow in the gutter to the next stage. */
.fff__arrow {
  position: absolute; top: calc(37.5% * 1); right: calc(-1 * clamp(1.4rem, 3vw, 3rem));
  width: clamp(1.4rem, 3vw, 3rem); display: grid; place-items: center; z-index: 2;
  color: color-mix(in srgb, var(--fg) 40%, transparent);
}
.fff__arrow svg { width: 70%; max-width: 2.4rem; }
.fff__step.is-live .fff__arrow { color: var(--accent); animation: fff-nudge 1.6s var(--ease) infinite; }
@keyframes fff-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* Short laptop screens: the art gives up some height so all three fit. */
@media (min-width: 961px) and (max-height: 820px) {
  .fff__copy { padding-block: .75rem .9rem; }
  .fff__points { margin-top: .5rem; padding-top: .5rem; gap: .15rem; }
  .fff__points li { font-size: .8rem; }
}
@media (max-width: 960px) {
  .fff { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
  .fff__art { height: auto; aspect-ratio: 4 / 3; }
  .fff__arrow { top: auto; bottom: calc(-1 * clamp(1.4rem, 3vw, 3rem)); right: 50%; transform: translateX(50%) rotate(90deg); }
  .fff__step.is-live .fff__arrow { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fff__step, .fff__art img { transition: none; }
  .fff__step.is-live .fff__arrow { animation: none; }
}

/* --- 32. Home map: full width, whole world, note beneath ---------------- */
.lanes--wide {
  min-height: 0; display: block;
  padding-block: 0 clamp(1.2rem, 3vh, 2.2rem);
}
/* One warm land tone — the map's grey with a hint of India's turmeric —
   shared by every country and by the band behind the title, so the band and
   the map read as one block and India's gold sits naturally among them. */
.lanes--wide {
  --land: color-mix(in srgb, var(--turmeric) 14%, color-mix(in srgb, #1C1A17 7%, #FFFFFF));
}
.lanes--wide .lanes__land { fill: var(--land); stroke: color-mix(in srgb, var(--turmeric-dk) 22%, var(--land)); }
/* Full-width band behind the title, in the same land tone. */
.lanes__band {
  background: var(--land);
  padding-block: clamp(1.4rem, 3.4vh, 2.4rem);
}
/* Title left, description right, above the map. */
.lanes__top {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .6rem clamp(1.5rem, 4vw, 4rem); align-items: end;
}
.lanes__top .lanes__note-title { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.lanes__top .lanes__note-text { margin: 0; max-width: 52ch; }
@media (max-width: 960px) { .lanes__top { grid-template-columns: 1fr; } }
.lanes--wide .lanes__map { position: relative; inset: auto; z-index: 0; }
/* Full width, never taller than the screen allows; 'meet' keeps the whole
   map in view rather than cropping it. */
.lanes--wide .lanes__svg {
  display: block; height: auto; transform: none; margin-inline: auto;
  /* As wide as the screen allows while the whole frame still fits in height. */
  width: min(100%, calc((100svh - 16.4rem) * var(--ar, 2)));
}
.lanes--wide .lanes__bar {
  position: relative; z-index: 2; padding-top: clamp(.4rem, 1.2vh, .9rem);
  display: grid; grid-template-columns: 1fr;
  gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: end;
  margin-top: clamp(.4rem, 1.2vh, 1rem);
}
.lanes__note { max-width: 34rem; }
.lanes__note .eyebrow { font-size: .62rem; }
.lanes__note-title {
  font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem); margin: .35rem 0 0;
}
.lanes__note-title em { font-style: normal; color: var(--accent); }
.lanes__note-text { margin: .45rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--fg-dim); }
.lanes__note-text .tlink { margin-left: .4rem; vertical-align: baseline; }
.lanes--wide .lanes__legend { justify-content: center; }
@media (max-width: 960px) {
  .lanes--wide .lanes__bar { grid-template-columns: 1fr; }
  .lanes--wide .lanes__legend { justify-content: flex-start; }
  .lanes--wide .lanes__svg { max-height: none; }
}
/* The cropped home map is zoomed in, so the ships are drawn smaller to keep
   their size on screen the same as elsewhere. */
.lanes--wide .lanes__hull { transform: scale(.62); transform-box: fill-box; transform-origin: center; }
.lanes--wide .lanes__hull--west { transform: scale(-.62, .62); }

/* --- 33. Footer: contact details and registered company ----------------- */
.ftr__contact li { display: flex; align-items: flex-start; gap: .55rem; }
.ftr__contact svg { flex: none; width: 1rem; height: 1rem; margin-top: .18rem; color: var(--chilli); }
.ftr__legal {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.2rem clamp(1.5rem, 3.5vw, 3rem);
  padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.8rem);
  margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
  background: #FAF8F4; border: 1px solid rgba(28, 26, 23, .08); border-radius: 16px;
}
.ftr__legal-h { font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--chilli); margin: 0 0 .55rem; }
.ftr__legal-name { font-family: var(--display); font-weight: 700; font-size: 1rem; margin: 0; color: #000; }
.ftr__legal-addr { font-style: normal; font-size: .86rem; font-weight: 600; line-height: 1.55; color: #000; }
.ftr__ids { display: grid; gap: .5rem; margin: 0; }
.ftr__ids div { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: baseline; }
.ftr__ids dt { font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: #000; }
.ftr__ids dd {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem;
  font-weight: 700; letter-spacing: .04em; color: #000; overflow-wrap: anywhere;
}
@media (max-width: 900px) { .ftr__legal { grid-template-columns: 1fr; } }

/* --- 34. Home map on phones ---------------------------------------------- */
@media (max-width: 900px) {
  /* The map sits straight under its title band. */
  .lanes--wide .lanes__map { margin: 0; }
  .lanes--wide .lanes__band { margin-bottom: 0; }
}
/* Port list as one row that scrolls sideways on phones, on every map. */
@media (max-width: 700px) {
  .lanes__legend {
    flex-wrap: nowrap; justify-content: flex-start !important;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)) !important; padding-inline: var(--gutter) !important; scroll-padding-inline: var(--gutter);
    padding-block: .2rem .5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .lanes__legend::-webkit-scrollbar { display: none; }
  .lanes__legend li { flex: none; white-space: nowrap; scroll-snap-align: start; }
}

/* Reduced motion keeps the content moving (see infotom.js) but calmly: the
   blanket rule above makes every transition instant, so the pieces that carry
   meaning get a plain fade back — no zooms, drift or bounce. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: opacity .8s linear !important; transform: none !important; }
  .hero__title { transition: opacity .5s linear !important; }
  .hero__title .word > span { transform: none !important; }
  .hero__dot.is-on span::after { animation: hero-progress var(--hero-interval, 3s) linear forwards !important; transform: scaleX(0); }
  .fff__step { transition: border-color .4s linear, box-shadow .4s linear !important; }
  .fff__step.is-live { transform: none; }
  .origin-card__panel { transition: opacity .5s linear !important; transform: none !important; }
  .lanes.is-in .lanes__wake { animation-duration: var(--dur) !important; animation-iteration-count: infinite !important; }
}
/* Home, Exports and Imports maps: the port list is one row that scrolls sideways at
   every size, so a long list never pushes the section past one screen. */
.lanes--wide .lanes__legend, .lanes__legend--row {
  flex-wrap: nowrap; justify-content: flex-start !important;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  padding-block: .2rem .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 94%, transparent);
}
.lanes--wide .lanes__legend::-webkit-scrollbar, .lanes__legend--row::-webkit-scrollbar { display: none; }
.lanes--wide .lanes__legend li, .lanes__legend--row li { flex: none; white-space: nowrap; scroll-snap-align: start; }
/* With a mouse, the row can also be dragged sideways (infotom.js). */
.lanes__legend[data-drag-scroll] { cursor: grab; }
.lanes__legend[data-drag-scroll].is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }

/* --- 35. GI origin tour ------------------------------------------------- */
.origin-card__gi {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-dim);
}
.origin-card__gi-mark {
  display: inline-grid; place-items: center; height: 1.35rem; padding: 0 .45rem;
  border-radius: 4px; background: var(--pin, var(--accent)); color: #fff;
  font-family: var(--display); font-size: .62rem; letter-spacing: .06em;
}
/* 26 regions: the tabs are one row that scrolls sideways and follows the tour. */
.origin-tabs {
  flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-bottom: .3rem;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
          mask-image: linear-gradient(90deg, #000 90%, transparent);
}
.origin-tabs::-webkit-scrollbar { display: none; }
.origin-tabs button { flex: none; white-space: nowrap; }

/* Phones and tablets: heading, then the map, then the file — stacked. */
@media (max-width: 1000px) {
  .theme-white .map-grid { gap: 1.2rem; }
  .theme-white .map-stage svg { height: auto; max-height: 62svh; width: 100%; }
  .theme-white .origin-show .map-stage svg { max-height: 62svh; }
  /* The side column dissolves so its parts can sit either side of the map. */
  .origin-show .map-grid { display: flex; flex-direction: column; align-items: stretch; }
  .origin-show .map-stage { width: 100%; }
  .origin-show .map-grid > div:last-child { display: contents; }
  .origin-intro { order: 0; }
  .origin-show .map-stage { order: 1; }
  .origin-tabs, .origin-card, .origin-progress, .origin-play { order: 2; }
  .origin-card__spice { font-size: clamp(1.3rem, 6vw, 1.8rem); }
  .origin-card__meta { gap: 1rem 1.6rem; flex-wrap: wrap; }
  .origin-tabs { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}

/* Origin tour: a full screen, the tour centred in it. */
.theme-white .origin-sec {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}

/* --- 36. Who we serve: exactly one screen ------------------------------- */
.theme-white .serve-sec {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2rem, 5svh, 4rem);
}
@media (min-width: 961px) {
  /* The cards take the room: roomier padding, larger type. */
  .theme-white .serve-sec .cards--compact { gap: clamp(.7rem, 1.6svh, 1.2rem); margin-top: clamp(1.2rem, 4svh, 2.6rem); }
  .theme-white .serve-sec .cards--compact .card { padding: clamp(1rem, 2.6svh, 1.7rem) clamp(1rem, 1.6vw, 1.5rem); column-gap: 1.15rem; }
  .theme-white .serve-sec .cards--compact .card__icon { width: clamp(1.9rem, 3.4svh, 2.5rem); height: clamp(1.9rem, 3.4svh, 2.5rem); padding: .6rem; }
  .theme-white .serve-sec .cards--compact .card__title { font-size: clamp(1rem, 2svh, 1.18rem); }
  .theme-white .serve-sec .cards--compact .card__text { font-size: clamp(.82rem, 1.6svh, .92rem); }
}

/* --- 37. Inner pages: the white redesign -------------------------------- */
/*
| Every page but the home page carries body.theme-page on top of the shared
| .theme-white skin. The home page does not, so nothing below reaches it.
| Surfaces are white cards on white or warm off-white ground; colour is kept
| for accents, and every accent used for text clears 4.5:1 on white.
*/
.theme-page { --page-tint: #FAF8F4; --hairline: rgba(28, 26, 23, .09); }
.theme-page :focus-visible { outline-color: var(--chilli); }

/* Text-safe accents: turmeric, saffron, cumin and gold are darkened. */
.theme-page .a-turmeric { --accent: var(--brand); }
.theme-page .a-saffron  { --accent: var(--brand); }
.theme-page .a-cumin    { --accent: var(--brand); }
.theme-page .a-gold     { --accent: var(--brand); }

/* Masthead: copy left, the page's photograph framed right. */
.theme-page main > .masthead--white {
  padding-top: clamp(7rem, 11vw, 9.5rem);
  padding-bottom: clamp(2.8rem, 5.5vw, 5rem);
  background:
    radial-gradient(55% 90% at 100% 0%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--page-tint) 100%);
  border-bottom: 1px solid var(--hairline);
  overflow: visible;
}
.masthead--white .masthead__inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.masthead--photo .masthead__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.masthead--white h1 { max-width: 16ch; margin-top: clamp(.9rem, 1.8vw, 1.4rem); }
.masthead--white .lede { margin-top: 1.1rem; max-width: 50ch; }
.masthead--white .crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem;
  color: var(--fg-dim);
}
.masthead--white .crumb a { transition: color .25s var(--ease); }
.masthead--white .crumb a:hover { color: var(--accent); }
.masthead--white .crumb > span[aria-hidden] { opacity: .45; }
.masthead--white .crumb [aria-current] { color: var(--accent); }

.masthead__photo { position: relative; margin: 0; isolation: isolate; }
/* A tinted plate offset behind the photograph, in the page's accent. */
.masthead__photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: 24px; transform: translate(.9rem, .9rem);
  background: color-mix(in srgb, var(--accent) 14%, #FFFFFF);
}
.masthead__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(28, 26, 23, .06), 0 28px 48px -30px rgba(28, 26, 23, .45);
}
.masthead--white .pdp__origin { margin-top: 1.3rem; }
.masthead--white .article__byline { margin-top: 1.3rem; }
@media (max-width: 960px) {
  .masthead--photo .masthead__inner { grid-template-columns: 1fr; }
  .masthead__photo { margin-right: .9rem; }
  .masthead__photo img { aspect-ratio: 16 / 10; }
}

/* Section headings: the side note becomes a small tinted tag. */
.theme-page .s-head__aside .numeral {
  padding: .35em .85em; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, #FFFFFF);
  letter-spacing: .06em;
}

/* Numbered lists: badge numbers, a soft row highlight on hover. */
.theme-page .stack { border-top: 1px solid var(--line); }
.theme-page .stack__row {
  padding-inline: .8rem; border-radius: 14px;
  transition: padding-left .45s var(--ease-out), background .3s var(--ease);
}
.theme-page .stack__row:hover { padding-left: 1.3rem; background: color-mix(in srgb, var(--accent) 5%, #FFFFFF); }
.theme-page .stack__no {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0;
  border-radius: 50%; font-size: .8rem;
  background: color-mix(in srgb, var(--accent) 10%, #FFFFFF);
}

/* Cards, product tiles and posts: white, hairline, soft shadow. */
.theme-page .card,
.theme-page .spice,
.theme-page .post,
.theme-page .cert {
  --card-surface: #FFFFFF;
  background-color: #FFFFFF;
  border: 1px solid var(--hairline); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(28, 26, 23, .04), 0 14px 30px -24px rgba(28, 26, 23, .35);
}
.theme-page .spice,
.theme-page .post { transition: border-color .4s var(--ease), transform .45s var(--ease-out), box-shadow .45s var(--ease); }
.theme-page .spice:hover, .theme-page .spice:focus-within,
.theme-page .post:hover, .theme-page .post:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 2px 4px rgba(28, 26, 23, .04), 0 26px 44px -28px color-mix(in srgb, var(--accent) 55%, rgba(28, 26, 23, .5));
}
.theme-page .spice::before { opacity: .04; }
.theme-page .spice:hover::before { opacity: .1; }
.theme-page .spice__media { background: var(--page-tint); }
.theme-page .post__media { background: color-mix(in srgb, var(--accent) 7%, #FFFFFF); }
.theme-page .filters button { background: #FFFFFF; border-width: 1.5px; min-height: 2.75rem; }
/* …except the chosen filter, which stays solid ink with white text. */
.theme-page .filters button.is-active { background: var(--fg); border-color: var(--fg); color: #FFFFFF; }

/* Photographs and drawn plates beside copy. */
.theme-page .section-photo,
.theme-page .origin-photo { border: 1px solid var(--hairline); border-radius: 22px; }
.theme-page .plate { box-shadow: 0 2rem 3.6rem -2rem rgba(28, 26, 23, .3), inset 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Product detail. */
.theme-page .pdp__stage { background: var(--page-tint); border: 1px solid var(--hairline); border-radius: 22px; }
.theme-page .pdp__thumb { border-width: 1.5px; border-radius: 12px; background: var(--page-tint); }
.theme-page .pdp__spec {
  border-top: 0; border-radius: 16px; padding: .3rem 1.2rem;
  background: var(--page-tint); border: 1px solid var(--hairline);
}
.theme-page .pdp__spec > div:last-child { border-bottom: 0; }

/* Buttons: the filled one turns to the accent with white text. */
.theme-page .btn--solid:hover { color: #FFFFFF; }

/* Contact: the form on a card, the direct lines on a tinted panel. */
.theme-page .contact { gap: clamp(1.4rem, 3vw, 2.6rem); }
.theme-page .contact__form {
  background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 24px;
  padding: clamp(1.4rem, 3.4vw, 2.8rem);
  box-shadow: 0 1px 2px rgba(28, 26, 23, .04), 0 24px 48px -34px rgba(28, 26, 23, .4);
}
.theme-page .contact__aside {
  background: var(--page-tint); border: 1px solid var(--hairline); border-radius: 24px;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.theme-page .contact__aside .stack { margin-top: 1rem; border-top: 0; }
.theme-page .contact__aside .stack__row { grid-template-columns: 3.4rem 1fr !important; padding-inline: .4rem; }
.theme-page .contact__aside .stack__row:last-child { border-bottom: 0; }
.theme-page .contact__aside .stack__row:hover { background: #FFFFFF; }
.theme-page .contact__aside a { color: var(--fg); border-bottom: 1px solid var(--line); transition: color .25s var(--ease), border-color .25s var(--ease); }
.theme-page .contact__aside a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Form fields: boxed, with a visible focus ring. */
.theme-page .form { gap: 1.2rem 1.1rem; }
.theme-page .field label { color: var(--fg); letter-spacing: .1em; }
.theme-page .field input,
.theme-page .field select,
.theme-page .field textarea {
  min-height: 3rem; padding: .75em 1em;
  background: #FFFFFF; border: 1.5px solid rgba(28, 26, 23, .16); border-radius: 12px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.theme-page .field textarea { min-height: 8.5rem; }
.theme-page .field select {
  padding-right: 2.6em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%231C1A17' stroke-width='1.4'%3E%3Cpath d='m2 4 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; background-size: .7rem;
}
.theme-page .field input:hover,
.theme-page .field select:hover,
.theme-page .field textarea:hover { border-color: rgba(28, 26, 23, .3); }
.theme-page .field input:focus,
.theme-page .field select:focus,
.theme-page .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.theme-page .field [aria-invalid="true"] { border-color: var(--chilli); }
.theme-page .notice { border-width: 1.5px; border-radius: 14px; }

/* The closing call to action: a warm panel instead of the black band. */
.theme-page.theme-white main > .sec.cta {
  --bg: #FFFFFF; --fg: #1C1A17;
  --fg-dim: #000; --line: rgba(28, 26, 23, .12);
  --accent: var(--chilli);
  border-top: 0;
}
.theme-page main > .sec.cta > .wrap {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--maxw) - 2 * var(--gutter));
  padding: clamp(1.8rem, 5vw, 4.2rem);
  border-radius: 28px;
  border: 1px solid rgba(126, 92, 34, .12);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(126, 92, 34, .16) 0%, transparent 62%),
    radial-gradient(55% 110% at 0% 100%, rgba(126, 92, 34, .09) 0%, transparent 62%),
    #FBF6F0;
}
.theme-page.theme-white main > .sec.cta .btn { color: var(--ink); }
.theme-page.theme-white main > .sec.cta .btn::before { background: var(--ink); }
.theme-page.theme-white main > .sec.cta .btn:hover { color: #FFFFFF; }
.theme-page.theme-white main > .sec.cta .btn:first-child { background: var(--chilli); border-color: var(--chilli); color: #FFFFFF; }
.theme-page.theme-white main > .sec.cta .btn:first-child::before { background: var(--chilli-dk); }

/* Contact's closing line. */
.theme-page .quote { text-align: center; }
.theme-page .quote blockquote { margin-inline: auto; }

/* The empty states read as a card rather than a hole. */
.theme-page .empty { background: var(--page-tint); border-width: 1.5px; border-radius: 22px; }

/* --- 38. The range: six categories, full screen, down the page -------- */
/*
| Six full-screen panels one after another, each a window onto a photograph
| that stays still on the screen. Scrolling slides the next window up over
| the last, so the new photograph takes the old one's place: half way, the
| top of the screen still shows the first and the bottom already shows the
| second. The photographs are fixed to the screen and clipped to their own
| panel, so the browser moves them in the same step as the scroll itself —
| nothing is repositioned by script, and nothing zooms. The copy scrolls
| with its panel; the titles play in as a panel arrives.
*/
/*
| Six full-screen panels one after another. infotom.js writes each panel's
| distance from the top of the screen, --d (0 filling it, 1 one screen below,
| -1 one screen above) and its size, --ad, and the layers inside travel
| against it at different speeds:
|   photograph   slower than the page, so it seems to sit behind a window;
|   copy         a little faster than the page, fading as it leaves;
|   numeral      faster still, like something nearer the eye.
| The photographs only slide, never zoom, and the titles play in as a panel
| arrives. Without the script the panels simply sit in
| the page.
*/
.range { position: relative; background: #FFFFFF; }
.range__intro { padding-block: var(--section) clamp(1.6rem, 3.5vw, 2.8rem); }

.range__stack { background: #141210; }
.range__panel {
  position: relative;
  height: 100vh; height: 100svh;
}
.range__panel:nth-child(1) { --tone: var(--photo-accent); }
.range__panel:nth-child(2) { --tone: var(--photo-accent); }
.range__panel:nth-child(3) { --tone: var(--photo-accent); }
.range__panel:nth-child(4) { --tone: var(--photo-accent); }
.range__panel:nth-child(5) { --tone: var(--photo-accent); }
.range__panel:nth-child(6) { --tone: var(--photo-accent); }

/* clip-path, unlike overflow, also clips the fixed photograph inside. */
.range__frame { position: absolute; inset: 0; clip-path: inset(0); background: #141210; color: #FFFFFF; }
/* The photograph: fixed to the screen, so it holds still while its window
   slides. Its own layer, so the scroll never repaints it. */
.range__media { position: fixed; inset: 0; transform: translateZ(0); }
@media (prefers-reduced-motion: reduce) { .range__media { position: absolute; transform: none; } }
/* Phones and tablets: a fixed layer inside a clipped box is not dependable
   in mobile browsers (Safari can leave it unclipped, and the address bar
   makes it jump). There each panel sticks to the top of the screen instead,
   and the next one slides up over it: the photograph on show holds still
   while the next rises into its place — the same picture, done with sticky
   positioning, which every mobile browser scrolls natively. */
@media (max-width: 900px), (hover: none) {
  .range__panel { position: sticky; top: 0; }
  .range__frame { clip-path: none; overflow: hidden; }
  .range__media { position: absolute; inset: 0; transform: none; }
}
.range__img { width: 100%; height: 100%; object-fit: cover; }

.range__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 12, 10, .8) 0%, rgba(14, 12, 10, .42) 42%, rgba(14, 12, 10, 0) 72%),
    linear-gradient(0deg, rgba(14, 12, 10, .75) 0%, rgba(14, 12, 10, 0) 45%);
}

.range__num {
  position: absolute; right: clamp(11rem, 16vw, 18rem); top: 6vh;
  font-family: var(--display); font-weight: 700; line-height: .8; letter-spacing: -.05em;
  font-size: clamp(8rem, 26vw, 24rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .32);
  pointer-events: none; user-select: none;
}

.range__copy {
  position: absolute; left: 0; right: 0; bottom: clamp(5.5rem, 15vh, 9rem);
}
.range__kicker {
  display: flex; align-items: center; gap: .9rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
}
.range__count { font-family: var(--display); font-weight: 600; letter-spacing: .08em; color: #FFFFFF; }
.range__count i { font-style: normal; color: rgba(255, 255, 255, .55); }
.range__line { display: block; width: 3.4rem; height: 1.5px; background: var(--tone); transform-origin: left; }
.range__kick { color: var(--tone); }

.range__title {
  margin: clamp(.8rem, 2vh, 1.3rem) 0 0;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.7rem, 8vw, 8.2rem); line-height: .98; letter-spacing: -.035em;
  display: flex; flex-wrap: wrap; column-gap: .24em;
  text-shadow: 0 2px 30px rgba(10, 8, 6, .35);
}
.range__word { display: inline-flex; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.range__word:last-child { color: var(--tone); }
.range__char { display: inline-block; }

.range__sub {
  margin-top: clamp(.9rem, 2.2vh, 1.4rem); max-width: 40ch;
  font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.5; color: rgba(255, 255, 255, .9);
}
.range__sub span { display: inline-block; }

.range__items { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1.1rem, 2.6vh, 1.7rem); max-width: 46rem; }
.range__items a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem 1rem;
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .84rem; font-weight: 500; color: #FFFFFF;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.range__items a:hover, .range__items a:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); }

.range__cta {
  display: inline-flex; align-items: center; gap: .7em; min-height: 3rem;
  margin-top: clamp(1.2rem, 3vh, 2rem); padding: .9em 1.6em;
  border-radius: 999px; background: #FFFFFF; color: var(--ink);
  font-family: var(--display); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: background .35s var(--ease), transform .45s var(--ease-out);
}
.range__cta:hover, .range__cta:focus-visible { background: var(--tone); color: var(--ink); transform: translateY(-2px); }
.range__cta svg { transition: transform .4s var(--ease-out); }
.range__cta:hover svg { transform: translateX(.3em); }
.range :focus-visible { outline-color: #FFFFFF; }

/* --- the entrance, played as a panel arrives (JS only) ---
   The hidden state has no transition: it is only ever set once a panel is
   off the screen, so there is no exit to see. */
.range.is-ready .range__line  { transform: scaleX(0); transition: none; }
.range.is-ready .range__count,
.range.is-ready .range__kick  { display: inline-block; opacity: 0; transform: translateY(.8em); transition: none; }
.range.is-ready .range__char  { transform: translateY(115%) rotate(10deg); transform-origin: 0 100%; transition: none; }
.range.is-ready .range__sub span { opacity: 0; filter: blur(8px); transform: translateY(.5em); transition: none; }
.range.is-ready .range__items li { opacity: 0; transform: translateY(1rem) scale(.96); transition: none; }
.range.is-ready .range__cta   { opacity: 0; transform: translateY(1rem); transition: none; }

.range.is-ready .is-on .range__line  { transform: scaleX(1); transition: transform .9s var(--ease-out) .05s; }
.range.is-ready .is-on .range__count { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .8s var(--ease-out); }
.range.is-ready .is-on .range__kick  { opacity: 1; transform: none; transition: opacity .6s var(--ease) .25s, transform .8s var(--ease-out) .25s; }
.range.is-ready .is-on .range__char  { transform: none; transition: transform 1.1s var(--ease-out) calc(.1s + var(--c) * .035s); }
.range.is-ready .is-on .range__sub span {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity .7s var(--ease) calc(.45s + var(--w) * .035s), filter .8s var(--ease) calc(.45s + var(--w) * .035s), transform .8s var(--ease-out) calc(.45s + var(--w) * .035s);
}
.range.is-ready .is-on .range__items li { opacity: 1; transform: none; transition: opacity .6s var(--ease) calc(.8s + var(--n) * .07s), transform .8s var(--ease-out) calc(.8s + var(--n) * .07s); }
.range.is-ready .is-on .range__cta { opacity: 1; transform: none; transition: opacity .6s var(--ease) 1.15s, transform .8s var(--ease-out) 1.15s, background .35s var(--ease); }
.range.is-ready .is-on .range__cta:hover { transform: translateY(-2px); transition: background .35s var(--ease), transform .45s var(--ease-out); }

/* --- the rail: where you are in the six, down the right-hand side --- */
.range__rail {
  position: fixed; z-index: 30; right: clamp(1rem, 2.4vw, 2.2rem); top: 50%;
  display: flex; gap: .9rem;
  opacity: 0; visibility: hidden; transform: translate(1rem, -50%);
  transition: opacity .5s var(--ease), transform .6s var(--ease-out), visibility .5s;
}
.range.is-live .range__rail { opacity: 1; visibility: visible; transform: translate(0, -50%); }
/* While the photographs cover the top of the screen the site header stays
   away, scrolling up included. */
.is-range .hdr { transform: translateY(-100%); }
.range__bar { position: relative; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.range__bar i { position: absolute; inset: 0; background: #FFFFFF; transform: scaleY(0); transform-origin: top; }
.range__rail ol { display: flex; flex-direction: column; }
.range__rail button {
  display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 .2rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); white-space: nowrap;
  transition: color .3s var(--ease);
}
.range__rail button span { font-family: var(--display); letter-spacing: .06em; }
/* Numbers only on screen; each name stays for screen readers. */
.range__rail button b {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.range__rail button.is-on, .range__rail button:hover, .range__rail button:focus-visible { color: #FFFFFF; }
/* The rail sits over the photographs' right edge; a faint shade keeps it legible. */
.range__scrim::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(14, 12, 10, .38) 0%, rgba(14, 12, 10, 0) 22%); }

@media (max-width: 900px) {
  .range__scrim { background: linear-gradient(0deg, rgba(14, 12, 10, .88) 0%, rgba(14, 12, 10, .5) 48%, rgba(14, 12, 10, .1) 78%); }
  .range__rail { display: none; }
  .range__num { font-size: clamp(7rem, 40vw, 14rem); right: calc(var(--gutter) - .06em); top: 11vh; }
  .range__copy { bottom: clamp(2.6rem, 8vh, 4.5rem); }
  .range__items a { min-height: 2.75rem; }
  .range__items li:nth-child(n+5) { display: none; }
}
@media (max-height: 640px) and (min-width: 901px) { .range__items { display: none; } }

/* --- 39. Incoterms chart ------------------------------------------------- */
/* A ruled sheet like the hand-drawn original: E cells are marked as with a
   highlighter; hovering lights up the row and the column of the term. */
.ict { margin-top: clamp(1.6rem, 3.5vw, 2.6rem); }
.ict__scroll {
  overflow-x: auto; border: 1.5px solid rgba(28, 26, 23, .16); border-radius: 16px; background: #fff;
  box-shadow: 0 24px 50px -36px rgba(28, 26, 23, .5);
}
.ict__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ict__table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.ict__table th, .ict__table td { border-bottom: 1px solid rgba(28, 26, 23, .1); border-right: 1px solid rgba(28, 26, 23, .1); }
.ict__table tr > :last-child { border-right: 0; }
.ict__table tbody tr:last-child > * { border-bottom: 0; }

.ict__groups th { border-bottom: 0 !important; border-right: 0 !important; padding: 1rem 0 .95rem; vertical-align: bottom; line-height: 1; }
.ict__sea {
  position: relative; font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--chilli);
}
.ict__sea::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 8px;
  border: 2px solid var(--chilli); border-bottom: 0; border-radius: 6px 6px 0 0;
}

.ict__corner, .ict__cost {
  position: sticky; left: 0; z-index: 2; background: #fff; text-align: left;
  min-width: 15.5rem; padding: .7rem 1rem;
}
.ict__corner { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); vertical-align: bottom; }
.ict__cost { font-weight: 600; color: var(--ink); transition: background .2s, color .2s; }
.ict__no { display: inline-block; width: 1.9rem; font-family: var(--display); font-size: .72rem; color: var(--chilli); }

.ict__term {
  padding: .75rem .3rem .65rem; text-align: center; cursor: default; vertical-align: bottom;
  transition: background .2s, color .2s;
}
.ict__term b { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; color: var(--ink); }
.ict__term small { display: block; margin-top: .2rem; font-size: .6rem; line-height: 1.25; color: var(--fg-dim); max-width: 7.5em; margin-inline: auto; }
.ict__term.is-sea { background: color-mix(in srgb, var(--chilli) 4%, #fff); }
.ict__term:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.ict__cell { text-align: center; padding: .45rem .25rem; transition: background .2s; }
.ict__cell span {
  display: inline-grid; place-items: center; width: 2.05rem; height: 1.7rem; border-radius: 6px;
  font-family: var(--display); font-weight: 700; font-size: .85rem;
  transition: transform .25s var(--ease-out), box-shadow .25s, background .25s;
}
/* The highlighter stroke: slightly skewed, like the marker on the sheet. */
.ict__cell.is-e span {
  color: #FFFFFF;
  background: linear-gradient(100deg, transparent 2%, var(--brand) 6%, var(--brand) 94%, transparent 98%);
}
.ict__cell.is-i span { color: #000; box-shadow: inset 0 0 0 1.5px rgba(28, 26, 23, .18); }
.ict__cell.is-sea { background: color-mix(in srgb, var(--chilli) 2.5%, #fff); }

/* Hover: the row and the column follow the pointer. */
.ict.is-tracking .ict__cell.is-row, .ict.is-tracking .ict__cell.is-col { background: color-mix(in srgb, var(--turmeric) 9%, #fff); }
.ict.is-tracking .ict__term.is-col { background: var(--ink); }
.ict.is-tracking .ict__term.is-col b, .ict.is-tracking .ict__term.is-col small { color: #fff; }
.ict.is-tracking .ict__cost.is-row { background: color-mix(in srgb, var(--turmeric) 16%, #fff); }
.ict__cell.is-here span { transform: scale(1.22); box-shadow: 0 6px 16px -6px rgba(28, 26, 23, .45); }
.ict__cell.is-here.is-i span { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink), 0 6px 16px -6px rgba(28, 26, 23, .35); }

.ict__foot { display: grid; gap: .7rem; margin-top: 1.1rem; }
.ict__legend { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; font-size: .84rem; color: var(--fg-dim); }
.ict__legend span { display: inline-flex; align-items: center; gap: .55rem; }
.ict__key {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.5rem; border-radius: 5px; font-style: normal;
  font-family: var(--display); font-weight: 700; font-size: .78rem;
}
.ict__key.is-e { background: var(--brand); color: #FFFFFF; }
.ict__key.is-i { border: 1.5px solid rgba(28, 26, 23, .3); color: #000; }
.ict__info {
  min-height: 3.1em; padding: .8rem 1rem; border-radius: 12px; font-size: .92rem;
  background: color-mix(in srgb, var(--turmeric) 10%, #fff); border-left: 3px solid var(--turmeric-dk); color: var(--ink);
}
.ict__info b { font-family: var(--display); }
.ict__note { font-size: .78rem; color: var(--fg-dim); }
@media (max-width: 700px) {
  .ict__corner, .ict__cost { min-width: 11rem; padding: .6rem .7rem; font-size: .8rem; }
  .ict__no { width: 1.5rem; }
}

/* --- 40. Port lists under the maps: an endless marquee ------------------ */
/* Home, Exports and Imports. The track is printed twice; sliding it by half
   its width (plus half a gap) lands the copy exactly where the first began. */
.lanes .lanes__legend.lanes__marquee {
  display: block; overflow: hidden; scroll-snap-type: none; cursor: default;
  padding-block: .2rem .5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.lanes__track {
  display: flex; gap: .55rem; width: max-content; margin: 0; padding: 0; list-style: none;
  animation: lanes-marquee var(--dur, 60s) linear infinite;
}
.lanes__track li { flex: none; white-space: nowrap; }
@keyframes lanes-marquee { to { transform: translateX(calc(-50% - .275rem)); } }
@media (hover: hover) { .lanes__marquee:hover .lanes__track { animation-play-state: paused; } }
/* Reduced motion: still moving (it is content), just slower. */
@media (prefers-reduced-motion: reduce) {
  .lanes__track { animation: lanes-marquee calc(var(--dur, 60s) * 2) linear infinite !important; }
}

/* --- 41. Imports: what we import, one section per shelf ---------------- */
/* Photograph on one side, the products on the other; .imx--flip swaps the
   sides so the three sections zig-zag down the page. */
.imx__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 6vw, 5.5rem); align-items: start;
}
.imx--flip .imx__media { order: 2; }
.imx__media {
  position: sticky; top: calc(var(--hdr-h, 76px) + 1.5rem);
  margin: 0; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 18%, #EFE8DC);
  box-shadow: 0 30px 60px -40px rgba(28, 26, 23, .55);
}
.imx__media img { width: 100%; height: 100%; object-fit: cover; }
.imx__badge {
  position: absolute; left: 1.2rem; bottom: 1rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1;
  color: #FFFFFF; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); letter-spacing: -.02em;
}
.imx--flip .imx__badge { left: auto; right: 1.2rem; }
.imx__body { padding-top: clamp(0rem, 2vw, 1.5rem); }
.imx__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.imx__head .numeral { margin: 0; }
.imx__lede { max-width: 46ch; }
.imx__list { list-style: none; margin: clamp(1.8rem, 4vw, 2.8rem) 0 0; padding: 0; counter-reset: none; }
.imx__item {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem;
  padding: 1.15rem 0; border-top: 1px solid rgba(28, 26, 23, .12);
}
.imx__item:last-child { border-bottom: 1px solid rgba(28, 26, 23, .12); }
.imx__idx { font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .06em; color: var(--accent); padding-top: .3rem; }
.imx__name { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.08rem, 1.5vw, 1.3rem); color: var(--ink); line-height: 1.25; }
.imx__origin {
  display: inline-flex; align-items: center; gap: .35rem; margin: .35rem 0 0;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.imx__origin svg { width: .9rem; height: .9rem; flex: none; }
.imx__note { margin: .4rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--fg-dim); max-width: 58ch; }
@media (max-width: 900px) {
  .imx__grid { grid-template-columns: 1fr; }
  .imx--flip .imx__media { order: 0; }
  .imx__media { position: relative; top: auto; aspect-ratio: 16 / 10; }
  .imx--flip .imx__badge { left: 1.2rem; right: auto; }
}

/* --- 42. Photo areas: yellow and white ---------------------------------- */
/* The home slider sits on photographs, so its highlights are yellow and the
   rest white; the brown is kept for everything on the page's white. */
.hero, .theme-white .hero { --accent: var(--photo-accent); }
.hero .display em, .hero__title em { color: var(--photo-accent); }

/* --- 43. Home origin heading: room between its lines --------------------- */
/* This headline runs to two or three lines (tag line, then "Geographical
   Indication (GI Tag)"), so it gets more air than the tight display default. */
.origin-intro .display { line-height: 1.32; }
.theme-white .origin-intro .lede { margin-top: 1rem; }

/* --- 44. Product menu: fixed-height, scrolling side panel ---------------- */
/* Each shelf's panel opens level with the top of the menu (not beside its
   own row), so a long shelf never runs off the bottom of the screen. The
   panel keeps the hover bridge; the list inside it scrolls. */
.hdr__menu .hdr__sub-wrap { position: static; }
.hdr__menu .hdr__sub {
  top: 0; left: 100%; width: 17rem; min-height: 100%;
  max-height: min(30rem, calc(100vh - 8rem)); max-height: min(30rem, calc(100svh - 8rem));
  display: flex; flex-direction: column; padding: .5rem;
}
.hdr__sub-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin: 0; padding: .55rem .9rem .6rem;
  font-family: var(--display); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  border-bottom: 1px solid rgba(28, 26, 23, .08);
}
.hdr__sub-head span { color: var(--ink); letter-spacing: .04em; }
.hdr__sub-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: .3rem 0 1.4rem; scrollbar-width: thin; scrollbar-color: rgba(28, 26, 23, .25) transparent;
  /* A soft fade at the foot tells you there is more to scroll. */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.6rem), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 1.6rem), transparent);
}
.hdr__sub-list::-webkit-scrollbar { width: 6px; }
.hdr__sub-list::-webkit-scrollbar-thumb { background: rgba(28, 26, 23, .22); border-radius: 6px; }
.hdr__menu .hdr__sub-all {
  flex: none; margin-top: .2rem; padding: .7rem .9rem; border-top: 1px solid rgba(28, 26, 23, .08);
  font-size: .76rem; font-weight: 600; color: var(--brand); border-radius: 0 0 3px 3px;
}

/* --- 45. Mobile menu: Product opens to shelves and products ------------- */
.drawer__group, .drawer__cat { border-bottom: 1px solid rgba(247, 243, 236, .16); }
.drawer__group > summary, .drawer__cat > summary { list-style: none; cursor: pointer; }
.drawer__group > summary::-webkit-details-marker, .drawer__cat > summary::-webkit-details-marker { display: none; }
.drawer__group > summary {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.35rem, 5.5vw, 1.9rem); color: #F7F3EC;
  padding-block: .5em; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  opacity: 0; transform: translateY(1rem); transition: opacity .5s var(--ease), transform .5s var(--ease-out);
}
.is-menu .drawer__group > summary { opacity: 1; transform: none; }
.drawer__group > summary span, .drawer__cat > summary span {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .16em; color: var(--photo-accent);
}
/* A plus that turns into a minus when the section is open. */
.drawer__plus { position: relative; width: .8rem; height: .8rem; flex: none; }
.drawer__plus::before, .drawer__plus::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: #F7F3EC;
  transition: transform .3s var(--ease-out);
}
.drawer__plus::after { transform: rotate(90deg); }
details[open] > summary .drawer__plus::after { transform: rotate(0); }
.drawer__cats { padding: .2rem 0 1rem .9rem; border-left: 1px solid rgba(247, 243, 236, .16); margin-bottom: 1rem; }
.drawer__list .drawer__all, .drawer__cat > summary {
  font-family: var(--display); font-weight: 500; font-size: 1.02rem; color: #F7F3EC;
  padding: .75rem 0; border-bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  opacity: 1; transform: none;
}
.drawer__list .drawer__all { border-bottom: 1px solid rgba(247, 243, 236, .16); color: var(--photo-accent); }
/* A long shelf scrolls inside its own box rather than pushing the menu on forever. */
.drawer__items {
  max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 .8rem .9rem;
  scrollbar-width: thin; scrollbar-color: rgba(247, 243, 236, .3) transparent;
}
.drawer__list .drawer__items a {
  font-family: var(--sans); font-weight: 400; font-size: .92rem; color: rgba(247, 243, 236, .86);
  padding: .5rem 0; border-bottom: 0; opacity: 1; transform: none; display: block;
}
.drawer__list .drawer__items a:active, .drawer__list .drawer__items a:hover { color: var(--photo-accent); }

/* --- 46. Social icons in their own brand colours ------------------------- */
/* Each network keeps its official colour (Instagram its gradient), as a
   filled circle with a white mark — the way the apps themselves look. This
   is the one place outside the black-and-brown palette, on purpose. */
.ftr__social { gap: .6rem; }
.ftr .ftr__social a, .ftr .ftr__social span.is-off {
  width: 2.75rem; height: 2.75rem; border: 0; color: #FFFFFF; background: var(--net, var(--ink));
  box-shadow: 0 6px 14px -8px var(--net-shadow, rgba(0, 0, 0, .45));
  transition: transform .35s var(--ease-out), filter .3s var(--ease), box-shadow .35s var(--ease);
}
.ftr .ftr__social svg { width: 1.3rem; height: 1.3rem; }
.ftr__social .is-instagram { --net: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); --net-shadow: rgba(214, 36, 159, .55); }
.ftr__social .is-facebook  { --net: #1877F2; --net-shadow: rgba(24, 119, 242, .55); }
.ftr__social .is-linkedin  { --net: #0A66C2; --net-shadow: rgba(10, 102, 194, .55); }
.ftr__social .is-youtube   { --net: #FF0000; --net-shadow: rgba(255, 0, 0, .5); }
.ftr__social .is-x         { --net: #000000; --net-shadow: rgba(0, 0, 0, .5); }
.ftr__social .is-whatsapp  { --net: #25D366; --net-shadow: rgba(37, 211, 102, .55); }
/* Hover lifts the icon and brightens it a touch, keeping its colour. */
.ftr .ftr__social a:hover, .ftr .ftr__social a:focus-visible {
  background: var(--net, var(--ink)); color: #FFFFFF; transform: translateY(-3px) scale(1.06); filter: brightness(1.08);
}
.ftr__social a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- 47. Exports & Imports: the map as a lit, tilted table-top ----------- */
/* The home layout (title band, map, ports beneath), with depth: the map is
   tilted away from the reader, the land is a slab with a side wall and a
   cast shadow, India stands raised in gold, and the ports are beacons. */
.lanes--3d.lanes--first { padding-top: 0; }
.lanes--3d .lanes__band {
  padding-top: calc(clamp(1.4rem, 3.4vh, 2.4rem) + var(--hdr-h, 76px));
  background:
    radial-gradient(60% 140% at 85% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 70%),
    var(--land);
}
.lanes--3d .lanes__top .lanes__note-title { font-size: clamp(1.8rem, 3.2vw, 3rem); }
.lanes--3d .lanes__note-title em { color: var(--brand); }

/* The stage: a soft sea, lit from the top, that the map floats above. */
.lanes__stage {
  position: relative; overflow: hidden;
  perspective: 1700px; perspective-origin: 50% 0%;
  padding-block: clamp(1rem, 3vw, 2.4rem) clamp(.4rem, 1.6vw, 1.2rem);
  background:
    radial-gradient(70% 90% at 50% 30%, #FFFFFF 0%, color-mix(in srgb, var(--land) 55%, #FFFFFF) 55%, var(--land) 100%);
}
/* A slow band of light sweeping across, like sun on water. */
.lanes__stage::after {
  content: ""; position: absolute; inset: -20% -40%; pointer-events: none; z-index: 3;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%);
  mix-blend-mode: soft-light; transform: translateX(-60%);
  animation: lanes-sheen 9s var(--ease) 1.5s infinite;
}
@keyframes lanes-sheen { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }

.lanes__tilt {
  position: relative;
  transform-origin: 50% 70%;
  transform: rotateX(var(--tilt-x, 14deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 1.6s var(--ease-out), opacity 1s var(--ease);
  will-change: transform;
}
/* Entrance: the map lies flat and low, then rises into its tilt. */
.lanes--3d:not(.is-in) .lanes__tilt { opacity: 0; transform: rotateX(52deg) translateY(3rem) scale(.94); }
/* While the pointer moves over it, follow quickly rather than drifting. */
.lanes__stage.is-tracking .lanes__tilt { transition: transform .5s var(--ease-out); }
/* A pool of shadow under the floating map. */
.lanes__tilt::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -1.2rem; height: 2.4rem; z-index: -1;
  background: radial-gradient(closest-side, rgba(28, 26, 23, .18), transparent);
}

/* The world as a slab. */
.lanes--3d .lanes__grid line { stroke: rgba(28, 26, 23, .07); stroke-width: .6; stroke-dasharray: 1 3; }
.lanes--3d .lanes__land-shadow { fill: rgba(28, 26, 23, .16); }
.lanes--3d .lanes__land-side { fill: color-mix(in srgb, var(--brand) 22%, #CFC6B6); }
.lanes--3d .lanes__land {
  fill: color-mix(in srgb, var(--brand) 8%, #FBF8F2);
  stroke: color-mix(in srgb, var(--brand) 30%, #FFFFFF); stroke-width: .5;
}
.lanes--3d .lanes__india-side { fill: color-mix(in srgb, var(--brand) 75%, #000000); }
.lanes--3d .lanes__india--raised {
  stroke: #F7E3B8; stroke-width: .6;
  animation: lanes-india 4.5s var(--ease) infinite alternate;
}
/* India breathes: it lifts a touch off its wall and settles back. */
@keyframes lanes-india { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
.lanes--3d .lanes__halo { display: block; opacity: .7; }

/* Routes appear one after another, then carry a glowing wake. */
.lanes--3d .lanes__route { stroke: rgba(126, 92, 34, .45); transition-delay: calc(.4s + var(--i, 0) * .08s); }
.lanes--3d.is-in .lanes__wake { opacity: .95; filter: drop-shadow(0 0 2px rgba(233, 168, 28, .9)); stroke: var(--photo-accent); stroke-width: 1.8; }
.lanes__spark { fill: #FFF6DC; }

/* Port beacons: a ring pulsing on the ground, a beam, a lit head. */
.lanes__port--3d { opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .8s var(--ease-out); transition-delay: calc(.8s + var(--i, 0) * .06s); }
.lanes--3d.is-in .lanes__port--3d { opacity: 1; transform: none; }
.lanes__port--3d .lanes__base { fill: rgba(28, 26, 23, .55); }
.lanes__port--3d .lanes__beam { stroke-width: 1.8; stroke-linecap: round; }
.lanes__port--3d .lanes__dot { fill: var(--brand); stroke: #FFFFFF; stroke-width: 1.1; }
.lanes__port--3d .lanes__ping { stroke: var(--brand); stroke-width: 1; }
.lanes--3d.is-in .lanes__port--3d .lanes__ping { animation: lanes-beacon 2.6s var(--ease-out) var(--delay) infinite; }
@keyframes lanes-beacon { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.lanes--3d .lanes__label { font-size: 8.5px; }
.lanes--3d .lanes__home-dot { fill: var(--brand); }
.lanes--3d .lanes__home-ring { stroke: var(--brand); }
.lanes--3d .lanes__label--home { fill: var(--brand); }
/* Ships drawn a touch smaller on this wider frame. */
.lanes--3d .lanes__hull { transform: scale(.72); transform-box: fill-box; transform-origin: center; }
.lanes--3d .lanes__hull--west { transform: scale(-.72, .72); }

.lanes--3d .lanes__svg { width: min(100%, calc((100svh - 12rem) * var(--ar, 2))); }
.lanes--3d .lanes__bar { margin-top: clamp(.6rem, 1.6vh, 1.2rem); }

/* Phones: a gentler tilt, and the labels are left to the port strip. */
@media (max-width: 760px) {
  .lanes__tilt { --tilt-x: 8deg; }
  .lanes__stage { padding-block: .8rem .4rem; }
  .lanes--3d .lanes__label { display: none; }
}
/* Reduced motion: the tilt stays, nothing moves on its own. */
@media (prefers-reduced-motion: reduce) {
  .lanes__stage::after, .lanes--3d .lanes__india--raised { animation: none !important; }
  .lanes--3d:not(.is-in) .lanes__tilt { opacity: 1; transform: rotateX(var(--tilt-x, 14deg)); }
}

/* --- 48. Exports & Imports: the world at night ---------------------------- */
/* A night satellite view: dark land on a darker sea, cities lit up in warm
   points of light, India glowing gold. The whole section is night — the
   title band, the map and the port strip run into one another, and the
   map's edges fade out instead of ending in a frame. Over the dark, the
   palette is yellow and white, as on the home photographs. */
.lanes--night {
  --night: #06070A;
  --fg: #F7F3EC; --fg-dim: rgba(247, 243, 236, .8); --accent: var(--photo-accent); --beam: var(--photo-accent);
  --land: #11141A;
  background: var(--night); color: var(--fg);
}
.theme-white .lanes--night { --bg: var(--night); --fg: #F7F3EC; --fg-dim: rgba(247, 243, 236, .8); --accent: var(--photo-accent); }
.lanes--night .lanes__band {
  background:
    radial-gradient(55% 120% at 82% 0%, rgba(233, 168, 28, .10) 0%, transparent 70%),
    var(--night);
}
.lanes--night .eyebrow { color: var(--photo-accent); }
.lanes--night .lanes__note-title { color: #FFFFFF; }
.lanes--night .lanes__note-title em, .lanes--3d.lanes--night .lanes__note-title em { color: var(--photo-accent); }
.lanes--night .lanes__note-text { color: rgba(247, 243, 236, .82); }

/* The stage is the same night as the band; a faint warm horizon behind the map. */
.lanes--night .lanes__stage {
  background:
    radial-gradient(60% 55% at 50% 52%, rgba(233, 168, 28, .07) 0%, transparent 70%),
    var(--night);
  padding-block: clamp(.4rem, 2vw, 1.6rem) clamp(.2rem, 1vw, .8rem);
}
.lanes--night .lanes__stage::after {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 190, .07) 50%, transparent 58%);
  mix-blend-mode: screen;
}
.lanes--night .lanes__tilt::after { display: none; }
/* No frame: the map dissolves into the night on every side. */
.lanes--night .lanes__svg {
  width: min(100%, calc((100svh - 9rem) * var(--ar, 2.2)));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%),
                      linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
          mask-composite: intersect;
}

/* Land at night. */
.lanes--night .lanes__grid line { stroke: rgba(255, 255, 255, .05); }
.lanes--night .lanes__land-shadow { fill: rgba(0, 0, 0, .7); }
.lanes--night .lanes__land-side { fill: #030405; }
.lanes--night .lanes__land { fill: #151920; stroke: rgba(255, 244, 220, .10); stroke-width: .45; }
.lanes--night .lanes__india-side { fill: #2B1D07; }
.lanes--night .lanes__india--raised { opacity: .62; stroke: rgba(255, 214, 140, .9); stroke-width: .7; filter: drop-shadow(0 0 4px rgba(233, 168, 28, .55)); }
.lanes--night .lanes__halo { opacity: .5; }

/* City lights: warm glows that breathe, fine points over them. */
.lanes__glows circle { fill: #FFB54A; opacity: .42; }
.lanes__glows .s5 { opacity: .7; }
.lanes__glows .s4 { opacity: .58; }
.lanes__glows .s1 { opacity: .28; }
.lanes--night.is-in .lanes__glows [style] { animation: lanes-twinkle 4.2s var(--ease) var(--tw, 0s) infinite alternate; }
@keyframes lanes-twinkle { from { opacity: .45; } to { opacity: .9; } }
.lanes__lights circle { fill: #FFE2A6; }
.lanes__lights { opacity: 0; transition: opacity 1.6s var(--ease) .5s; }
.lanes__glows  { opacity: 0; transition: opacity 2s var(--ease) .7s; }
.lanes--night.is-in .lanes__lights, .lanes--night.is-in .lanes__glows { opacity: 1; }

/* Routes, beacons and labels in yellow and white. */
.lanes--night .lanes__route { stroke: rgba(233, 168, 28, .38); }
.lanes--night .lanes__spark { fill: #FFF3D0; }
.lanes--night .lanes__port--3d .lanes__dot { fill: var(--photo-accent); stroke: #FFFFFF; }
.lanes--night .lanes__port--3d .lanes__base { fill: rgba(255, 255, 255, .45); }
.lanes--night .lanes__port--3d .lanes__ping { stroke: var(--photo-accent); }
.lanes--night .lanes__label { fill: rgba(255, 255, 255, .92); stroke: rgba(6, 7, 10, .85); }
.lanes--night .lanes__label--home, .lanes--3d.lanes--night .lanes__label--home { fill: var(--photo-accent); }
.lanes--night .lanes__home-dot, .lanes--3d.lanes--night .lanes__home-dot { fill: var(--photo-accent); }
.lanes--night .lanes__home-ring, .lanes--3d.lanes--night .lanes__home-ring { stroke: var(--photo-accent); }
/* The full world is drawn smaller than the old crop, so the ships are too. */
.lanes--night .lanes__hull { transform: scale(.85); transform-box: fill-box; transform-origin: center; }
.lanes--night .lanes__hull--west { transform: scale(-.85, .85); }

/* The port strip beneath, on the night. */
.lanes--night .lanes__bar { padding-bottom: clamp(1.2rem, 3vh, 2rem); }
.lanes--night .lanes__legend li { border-color: rgba(255, 255, 255, .18); color: rgba(247, 243, 236, .7); background: rgba(255, 255, 255, .03); }
.lanes--night .lanes__legend-port { color: #FFFFFF; }
.lanes--night + .sec { border-top: 0; }

/* --- 49. Incoterms: the split corner cell -------------------------------- */
/* One cell names both axes: a diagonal from top-left to bottom-right, with
   "Terms" (the columns) above it on the right and "Responsibilities" (the
   rows) below it on the left. */
.ict__table .ict__corner {
  position: relative; min-height: 4.6rem; height: 4.6rem; padding: 0;
  background-color: var(--bg, #FFFFFF);
  background-image: linear-gradient(to top right, transparent calc(50% - .7px), rgba(28, 26, 23, .4) 50%, transparent calc(50% + .7px));
}
.ict__corner-terms, .ict__corner-rows {
  position: absolute; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.1;
}
.ict__corner-terms { top: .7rem; right: .8rem; text-align: right; color: var(--brand); }
.ict__corner-rows  { bottom: .7rem; left: .8rem; text-align: left; color: var(--ink); }
.ict__cell.is-none span { color: rgba(28, 26, 23, .35); box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .12); }
@media (max-width: 760px) {
  .ict__table .ict__corner { height: 4rem; min-height: 4rem; }
  .ict__corner-terms, .ict__corner-rows { font-size: .56rem; letter-spacing: .1em; }
}

/* --- 50. Masthead film: the Products page's top-right film ---------------- */
/* Framed exactly like the photograph it replaces: same plate, radius and shadow. */
.masthead__photo video {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #14100D;
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(28, 26, 23, .06), 0 28px 48px -30px rgba(28, 26, 23, .45);
}
@media (max-width: 960px) { .masthead__photo video { aspect-ratio: 16 / 10; } }
/* With a film, the picture side takes the larger share of the row. */
.masthead--film .masthead__inner { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.masthead--film .masthead__photo video { aspect-ratio: 16 / 10; }
@media (max-width: 960px) { .masthead--film .masthead__inner { grid-template-columns: 1fr; } }

/* --- 51. Footer: bold text, smaller social icons ------------------------- */
.ftr .ftr__list a, .ftr .ftr__list li, .ftr .ftr__contact a, .ftr .ftr__contact li { font-weight: 600; color: var(--ink); }
.ftr .ftr__list a:hover, .ftr .ftr__contact a:hover { color: var(--brand); }
.ftr .ftr__promise { font-weight: 600; }
.ftr .ftr__bar, .ftr .sp-ftr__legal { font-weight: 600; color: var(--ink); }
.ftr .ftr__social { gap: .4rem; }
.ftr .ftr__social a, .ftr .ftr__social span.is-off { width: 2.1rem; height: 2.1rem; }
.ftr .ftr__social svg { width: 1rem; height: 1rem; }

/* --- 52. Every top section: the picture takes the larger share ----------- */
.masthead--photo .masthead__inner { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.masthead--photo .masthead__photo img { aspect-ratio: 16 / 10; }
@media (max-width: 960px) { .masthead--photo .masthead__inner { grid-template-columns: 1fr; } }

/* --- 53. Incoterms: the freight, transport and risk bands --------------- */
/* In the site's own two colours: brown for freight collect / prepaid, a pale
   brown for the modes of transport, black for where the risk passes. */
.ict__table .ict__band > * {
  padding: .55rem .4rem; text-align: center; font-size: .72rem; font-weight: 700; line-height: 1.25;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; color: #000;
}
.ict__table .ict__band > .ict__band-label {
  position: sticky; left: 0; z-index: 2; text-align: left; padding-inline: 1rem;
  font-size: .78rem; letter-spacing: .02em;
}
.ict__band--freight > * { background: var(--brand); color: #fff !important; font-size: .76rem !important; letter-spacing: .02em; }
.ict__band--freight > .ict__band-label { background: #fff; }
.ict__band--group > * { background: color-mix(in srgb, var(--brand) 16%, #fff); }
.ict__band--group > .ict__band-label { background: color-mix(in srgb, var(--brand) 26%, #fff); }
.ict__table .ict__band--group > .ict__sea { color: #000; font-size: .72rem; letter-spacing: 0; text-transform: none; }
.ict__band--group > .ict__sea::after { content: none; }
.ict__band--risk > * { background: var(--ink); color: #fff !important; font-size: .7rem !important; }
.ict__band--risk > .ict__band-label { background: #000; }
.ict.is-tracking .ict__band--risk > .is-col { background: var(--brand); }

/* A corner with one label: no diagonal, the word large and bold. */
.ict__table .ict__corner.is-single { background-image: none; }
.ict__corner.is-single .ict__corner-terms {
  inset: 0; display: flex; align-items: center; justify-content: flex-start; padding-inline: 1rem;
  font-family: var(--display); font-size: 1.35rem; font-weight: 800; letter-spacing: .08em; color: var(--ink);
}
@media (max-width: 760px) {
  .ict__table .ict__band > * { font-size: .64rem !important; padding: .45rem .3rem; }
  .ict__table .ict__band > .ict__band-label { padding-inline: .7rem; }
  .ict__corner.is-single .ict__corner-terms { font-size: 1.05rem; padding-inline: .7rem; }
}

/* --- 54. Distinguished Licenses ------------------------------------------ */
/* A framed section in the site's brown and black: a fine double rule round the whole block with
   corner brackets, and each certificate set in its own mat and frame. Every
   card is the same size whatever the scan's proportions — the page sits on
   the mat, top-aligned. Four to a row; more than fit slide on their own. */
.lic {
  --lic-gold: var(--brand);
  --lic-gap: clamp(1rem, 2vw, 1.75rem);
  --per: 4;
  background:
    radial-gradient(60rem 30rem at 50% -10%, rgba(126, 92, 34, .10), transparent 70%),
    var(--paper);
  color: var(--ink);
}
.lic__frame {
  position: relative; padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1.1rem, 4vw, 4rem);
  border: 1px solid rgba(126, 92, 34, .55);
  outline: 1px solid rgba(126, 92, 34, .22); outline-offset: 7px;
}
.lic__corner { position: absolute; width: 38px; height: 38px; border: 0 solid var(--lic-gold); pointer-events: none; }
.lic__corner--tl { top: -9px; left: -9px; border-top-width: 3px; border-left-width: 3px; }
.lic__corner--tr { top: -9px; right: -9px; border-top-width: 3px; border-right-width: 3px; }
.lic__corner--bl { bottom: -9px; left: -9px; border-bottom-width: 3px; border-left-width: 3px; }
.lic__corner--br { bottom: -9px; right: -9px; border-bottom-width: 3px; border-right-width: 3px; }

.lic__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.lic__eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--lic-gold); }
.lic__title { margin-top: .8rem; color: var(--ink); }
.lic__title em { color: var(--lic-gold); }
.lic__rule { display: flex; align-items: center; justify-content: center; gap: .7rem; margin: 1.2rem auto 0; width: 11rem; }
.lic__rule::before, .lic__rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--lic-gold)); }
.lic__rule::after { transform: scaleX(-1); }
.lic__rule i { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--lic-gold); }
.lic__lede { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.6; color: #000; font-weight: 500; }

.lic__viewport { overflow: hidden; padding: .9rem .6rem 1.2rem; margin: -.9rem -.6rem -1.2rem; }
.lic__track { display: flex; gap: var(--lic-gap); margin: 0; padding: 0; list-style: none; will-change: transform; }
.lic__track.is-anim { transition: transform .8s var(--ease-out); }
.lic__item { flex: 0 0 calc((100% - (var(--per) - 1) * var(--lic-gap)) / var(--per)); min-width: 0; }
/* Fewer than a full row: centre them. */
.lic__slider:not(.is-sliding) .lic__track { justify-content: center; }

.lic__card {
  display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  color: inherit; text-align: center; cursor: zoom-in; font: inherit;
}
.lic__mat {
  /* One bold frame — a brown moulding with a fine light bevel — round a cream mat. */
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, #FFFFFF, #F7F3EC);
  border: 12px solid var(--brand);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    inset 0 2px 10px rgba(28, 26, 23, .18),
    0 0 0 1px var(--ink),
    0 26px 44px -24px rgba(28, 26, 23, .55);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s;
}
.lic__mat img {
  /* Out of the flow, so a tall or wide scan can never stretch its frame. */
  position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; object-position: top center; display: block;
  filter: drop-shadow(0 4px 10px rgba(28, 26, 23, .25));
}
.lic__zoom {
  position: absolute; right: 9%; bottom: 9%; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--brand); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s var(--ease-out);
}
.lic__card:hover .lic__mat, .lic__card:focus-visible .lic__mat {
  transform: translateY(-6px); border-color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .9),
    inset 0 2px 10px rgba(28, 26, 23, .18),
    0 0 0 1px var(--ink),
    0 34px 54px -24px rgba(28, 26, 23, .65);
}
.lic__card:hover .lic__zoom, .lic__card:focus-visible .lic__zoom { opacity: 1; transform: none; }
.lic__card:focus-visible { outline: none; }

.lic__cap { display: grid; justify-items: center; gap: .3rem; margin-top: 1.5rem; }
.lic__no { font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .2em; color: var(--lic-gold); }
.lic__name { font-family: var(--display); font-size: 1.06rem; line-height: 1.25; color: var(--ink); }
.lic__issuer { font-size: .8rem; line-height: 1.35; color: #000; font-weight: 500; }
.lic__num {
  margin-top: .35rem; padding: .28rem .7rem; border: 1px solid rgba(126, 92, 34, .5); border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--lic-gold); word-break: break-all;
}

.lic__nav { display: flex; justify-content: center; gap: .8rem; margin-top: 2.2rem; }
.lic__nav[hidden] { display: none; }
.lic__arrow {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1.5px solid rgba(126, 92, 34, .6); background: transparent; color: var(--lic-gold); cursor: pointer;
  transition: background .25s, color .25s;
}
.lic__arrow:hover, .lic__arrow:focus-visible { background: var(--brand); color: #fff; outline: none; }

.lic__dialog {
  width: min(92vw, 820px); max-height: 92vh; padding: 0; border: 1px solid var(--lic-gold); border-radius: 6px;
  background: #fff; color: var(--ink); overflow: auto;
}
.lic__dialog::backdrop { background: rgba(10, 9, 8, .82); backdrop-filter: blur(3px); }
.lic__dialog-bar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem .8rem 1.3rem; background: #fff; border-bottom: 1px solid rgba(126, 92, 34, .35);
}
.lic__dialog-title { margin: 0; font-family: var(--display); font-weight: 700; color: var(--ink); }
.lic__close { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(126, 92, 34, .5); background: none; color: var(--lic-gold); cursor: pointer; }
.lic__close:hover { background: var(--brand); color: #fff; }
.lic__dialog img { display: block; width: 100%; height: auto; background: #fff; }

@media (max-width: 1100px) { .lic { --per: 3; } }
@media (max-width: 760px)  { .lic { --per: 2; } .lic__mat { border-width: 9px; } .lic__name { font-size: .92rem; } .lic__issuer { font-size: .72rem; } .lic__corner { width: 26px; height: 26px; } }
@media (max-width: 440px)  { .lic { --per: 1; } .lic__item { padding-inline: 8%; } }

/* --- 55. Blog post ------------------------------------------------------- */
/* The headline runs the full width; the cover sits under it, wide; the post
   reads in a comfortable column with a sticky sidebar on the right
   (contents, an enquiry card, sharing, recent posts). */
.bp-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.bp-progress span { display: block; height: 100%; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: 0 50%; }

.bp-hero {
  padding-top: clamp(7rem, 11vw, 9.5rem); padding-bottom: clamp(1.4rem, 2.6vw, 2rem);
  background:
    radial-gradient(55% 90% at 100% 0%, color-mix(in srgb, var(--brand) 8%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%);
}
.bp-hero__title {
  margin-top: clamp(1rem, 2.2vw, 1.6rem); max-width: none;
  font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: 1.08; letter-spacing: -.02em; text-wrap: balance;
}
.bp-hero__lede { margin-top: 1.2rem; max-width: 62rem; font-size: clamp(1.02rem, 1.35vw, 1.22rem); line-height: 1.6; color: #000; }
.bp-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: 1.3rem; border-top: 1px solid rgba(28, 26, 23, .14);
}
.bp-author { display: flex; align-items: center; gap: .85rem; }
.bp-author__mark {
  display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.1rem;
}
.bp-author b { display: block; font-family: var(--display); font-size: .98rem; color: var(--ink); }
.bp-author__facts { display: flex; gap: .5rem; font-size: .84rem; font-weight: 600; color: #000; }
.bp-author__facts i { font-style: normal; color: var(--brand); }
.bp-cover { margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(28, 26, 23, .55); }
.bp-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.bp-share { display: flex; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.bp-share__btn {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1.5px solid rgba(126, 92, 34, .45); color: var(--brand); transition: background .2s, color .2s, border-color .2s;
}
.bp-share__btn svg { width: 1.05rem; height: 1.05rem; }
.bp-share__btn:hover, .bp-share__btn:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; }

.bp-main { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(4rem, 8vw, 7rem); background: var(--paper); }
.bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.bp-article { max-width: 50rem; min-width: 0; }

.bp-body { font-size: clamp(1.02rem, 1.12vw, 1.1rem); line-height: 1.8; color: #000; }
.bp-body > * + * { margin-top: 1.15em; }
.bp-body h2 {
  margin-top: 2.2em; padding-top: .2em; scroll-margin-top: calc(var(--hdr-h, 76px) + 1.5rem);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; color: var(--ink);
}
.bp-body h2::before { content: ""; display: block; width: 2.4rem; height: 3px; margin-bottom: .7rem; background: var(--brand); border-radius: 2px; }
.bp-body h2:first-child { margin-top: 0; }
.bp-body h3 {
  margin-top: 1.8em; display: flex; align-items: baseline; gap: .6rem; scroll-margin-top: calc(var(--hdr-h, 76px) + 1.5rem);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.12rem, 1.5vw, 1.3rem); line-height: 1.3; color: var(--ink);
}
.bp-body h2 + *, .bp-body h3 + * { margin-top: .7em; }
.bp-num {
  flex: none; display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .3rem; border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-family: var(--display); font-size: .82rem; font-weight: 700; line-height: 1;
}
.bp-point { position: relative; padding-left: 2.6rem; }
.bp-point .bp-num { position: absolute; left: 0; top: .2em; }
.bp-body strong { color: var(--ink); font-weight: 700; }

.bp-body h2.is-summary + p, .bp-body h2.is-summary + .bp-list {
  padding: 1.2rem 1.4rem; border-radius: 12px; background: #fff;
  border: 1px solid rgba(126, 92, 34, .3); box-shadow: inset 4px 0 0 var(--brand);
}
.bp-list { margin-left: 0; padding: 0; list-style: none; display: grid; gap: .55em; }
.bp-list li { position: relative; padding-left: 1.6rem; }
.bp-list li::before { content: ""; position: absolute; left: .25rem; top: .72em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--brand); }

.bp-formula {
  padding: 1rem 1.3rem; border-radius: 10px; text-align: center;
  background: #fff; border: 1.5px solid rgba(126, 92, 34, .35); box-shadow: inset 4px 0 0 var(--brand);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--ink); letter-spacing: .01em;
}
.bp-keys { display: grid; gap: .35rem; padding: 1rem 1.2rem; border-radius: 10px; background: #fff; border: 1px solid rgba(28, 26, 23, .1); }
.bp-keys div { display: grid; grid-template-columns: 2.4rem 1fr; gap: .8rem; align-items: baseline; }
.bp-keys dt { font-family: var(--display); font-weight: 700; color: var(--brand); text-align: center; }
.bp-keys dd { margin: 0; }

.bp-qa { padding: 1.1rem 1.3rem; border-radius: 10px; background: #fff; border: 1px solid rgba(28, 26, 23, .1); }
.bp-qa h3 { margin: 0; font-size: 1.04rem; }
.bp-qa h3::before { content: "Q"; flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .78rem; }
.bp-qa p { margin-top: .5rem; padding-left: 2.2rem; font-size: .98em; }
.bp-qa + .bp-qa { margin-top: .8rem; }
.bp-note { padding-top: 1rem; border-top: 1px solid rgba(28, 26, 23, .14); font-size: .84rem; line-height: 1.6; }
.bp-note + .bp-note { border-top: 0; padding-top: 0; margin-top: .6rem; }

.bp-end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(28, 26, 23, .14);
}
.bp-end__share { display: flex; align-items: center; gap: .9rem; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* Sidebar */
.bp-side { align-self: stretch; display: flex; flex-direction: column; gap: 1.2rem; }
/* The contents list stays in view while the post scrolls; a long one scrolls inside itself. */
.bp-toc--side {
  position: sticky; top: calc(var(--hdr-h, 76px) + 1.2rem);
  max-height: calc(100vh - var(--hdr-h, 76px) - 2.4rem); overflow-y: auto; scrollbar-width: thin;
}
.bp-card { padding: 1.3rem 1.35rem; border-radius: 14px; background: #fff; border: 1px solid rgba(28, 26, 23, .1); box-shadow: 0 18px 40px -34px rgba(28, 26, 23, .6); }
.bp-card__label { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }

.bp-toc ol { margin: .8rem 0 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: .1rem; }
.bp-toc li { counter-increment: toc; }
.bp-toc a {
  display: grid; grid-template-columns: 1.7rem 1fr; gap: .3rem; padding: .42rem .5rem .42rem .4rem; border-radius: 8px;
  font-size: .86rem; line-height: 1.35; font-weight: 500; color: #000; border-left: 2px solid transparent; transition: background .2s, color .2s, border-color .2s;
}
.bp-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--display); font-size: .72rem; font-weight: 700; color: var(--brand); padding-top: .1em; }
.bp-toc a:hover { background: color-mix(in srgb, var(--brand) 8%, #fff); }
.bp-toc a.is-on { background: color-mix(in srgb, var(--brand) 12%, #fff); border-left-color: var(--brand); color: var(--ink); font-weight: 700; }

.bp-card--brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.bp-card--brand .bp-card__label { color: #fff; opacity: .85; }
.bp-card__title { margin-top: .6rem; font-family: var(--display); font-weight: 700; font-size: 1.08rem; line-height: 1.35; }
.bp-card__btn {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .7rem 1.1rem; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: .82rem; font-weight: 700; transition: background .2s, color .2s;
}
.bp-card__btn:hover { background: var(--ink); color: #fff; }

.bp-copy { display: flex; margin-top: .8rem; border: 1px solid rgba(28, 26, 23, .16); border-radius: 999px; overflow: hidden; }
.bp-copy input { flex: 1; min-width: 0; padding: .6rem .9rem; border: 0; background: transparent; font: inherit; font-size: .78rem; color: #000; }
.bp-copy button { padding: 0 1rem; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.bp-copy button.is-done { background: var(--brand); }

.bp-recent { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.bp-recent a { display: grid; grid-template-columns: 3.6rem 1fr; gap: .8rem; align-items: center; padding: .45rem; margin: 0 -.45rem; border-radius: 10px; transition: background .2s; }
.bp-recent a:hover { background: color-mix(in srgb, var(--brand) 8%, #fff); }
.bp-recent img, .bp-recent__mark { width: 3.6rem; height: 3.6rem; border-radius: 8px; object-fit: cover; }
.bp-recent__mark { display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.bp-recent b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .86rem; line-height: 1.3; color: var(--ink); }
.bp-recent time { display: block; margin-top: .2rem; font-size: .74rem; font-weight: 600; color: #000; }

.bp-toc--top { display: none; }

@media (max-width: 1080px) {
  .bp-grid { grid-template-columns: 1fr; }
  .bp-article { max-width: none; }
  .bp-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-self: auto; }
  .bp-toc--side { display: none; }
  .bp-toc--top {
    display: block; margin-bottom: 2rem; border-radius: 12px; background: #fff; border: 1px solid rgba(28, 26, 23, .12);
  }
  .bp-toc--top summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none;
    font-family: var(--display); font-weight: 700; color: var(--ink);
  }
  .bp-toc--top summary::-webkit-details-marker { display: none; }
  .bp-toc--top summary span { font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--brand); }
  .bp-toc--top ol { margin: 0; padding: 0 .8rem 1rem; }
}
@media (max-width: 640px) {
  .bp-share--inline { width: 100%; }
  .bp-point { padding-left: 2.3rem; }
  .bp-qa p { padding-left: 0; }
}
.bp-end .tlink svg { transform: rotate(180deg); }
.bp-figure { margin: 1.8em 0; }
.bp-figure img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 50px -34px rgba(28, 26, 23, .55); }
.bp-figure figcaption { margin-top: .7rem; padding-left: .8rem; border-left: 3px solid var(--brand); font-size: .84rem; line-height: 1.5; color: #000; }

/* Rich-text (editor) posts: the same look as the plain-text layout. */
.bp-body--html ul, .bp-body--html ol { margin-left: 0; padding: 0; list-style: none; display: grid; gap: .55em; }
.bp-body--html ul > li { position: relative; padding-left: 1.6rem; }
.bp-body--html ul > li::before { content: ""; position: absolute; left: .25rem; top: .72em; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--brand); }
.bp-body--html ol { counter-reset: bp-ol; }
.bp-body--html ol > li { position: relative; padding-left: 2.4rem; counter-increment: bp-ol; }
.bp-body--html ol > li::before {
  content: counter(bp-ol); position: absolute; left: 0; top: .15em; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 12%, #fff); color: var(--brand); font-family: var(--display); font-size: .8rem; font-weight: 700;
}
.bp-body--html ul.bp-keys { padding: 1rem 1.2rem; border-radius: 10px; background: #fff; border: 1px solid rgba(28, 26, 23, .1); gap: .3rem; }
.bp-body--html ul.bp-keys > li { padding-left: 0; }
.bp-body--html ul.bp-keys > li::before { content: none; }
.bp-body--html ul.bp-keys strong { display: inline-block; min-width: 2rem; color: var(--brand); }
.bp-body--html a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bp-body--html a:hover { color: var(--ink); }
.bp-body--html blockquote {
  margin: 1.6em 0; padding: 1rem 1.4rem; border-left: 4px solid var(--brand); border-radius: 0 10px 10px 0;
  background: #fff; font-family: var(--display); font-size: 1.08em; line-height: 1.55; color: var(--ink);
}
.bp-body--html figure { margin: 1.8em 0; }
.bp-body--html figure img, .bp-body--html > p > img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 50px -34px rgba(28, 26, 23, .55); }
.bp-body--html figcaption { margin-top: .7rem; padding-left: .8rem; border-left: 3px solid var(--brand); font-size: .84rem; line-height: 1.5; color: #000; }
.bp-body--html table { width: 100%; border-collapse: collapse; font-size: .92em; background: #fff; border-radius: 10px; overflow: hidden; display: block; overflow-x: auto; }
.bp-body--html th, .bp-body--html td { padding: .65rem .8rem; border-bottom: 1px solid rgba(28, 26, 23, .1); text-align: left; vertical-align: top; }
.bp-body--html th { background: color-mix(in srgb, var(--brand) 10%, #fff); font-family: var(--display); color: var(--ink); }
.bp-body--html hr { border: 0; height: 1px; background: rgba(28, 26, 23, .14); margin: 2em 0; }
.bp-body--html .bp-summary { padding: 1.2rem 1.4rem; border-radius: 12px; background: #fff; border: 1px solid rgba(126, 92, 34, .3); box-shadow: inset 4px 0 0 var(--brand); }
.bp-body--html .bp-qa > * + * { margin-top: .5rem; }
.bp-body--html .bp-qa h3 { margin-top: 0; }
.bp-body--html .bp-qa p { padding-left: 2.2rem; }
.bp-body--html .bp-qa + .bp-qa { margin-top: .8rem; }
.bp-body--html h2.is-summary + p, .bp-body--html h2.is-summary + ul { padding: 1.2rem 1.4rem; border-radius: 12px; background: #fff; border: 1px solid rgba(126, 92, 34, .3); box-shadow: inset 4px 0 0 var(--brand); }