/* ==========================================================================
   STAR-K — stark.css — "The Seal" (shared by star-k.in / .my / .ph / .id)
   Layout and typography ONLY. No colour value lives in this file - every colour
   and every font family comes from palette.css via var(). palette.css must be
   linked BEFORE this file.

   The idea: a kosher symbol is a seal of trust, so the site borrows the visual
   language of a certificate - navy ink, champagne foil, ivory stock, engraved
   concentric rings (guilloche), a serif for the voice and a clean sans for the
   facts. Motion is quiet: things settle into place, nothing performs.

   CONTENTS
     01 base            09 symbol cards        17 forms, embeds, map
     02 layout          10 the journey         18 contact
     03 type            11 stats               19 page-specific (organic, apply, steps...)
     04 buttons, links  12 prose, split, table 20 glossary
     05 topbar          13 FAQ                 21 consent banner
     06 header, nav     14 closing             22 responsive
     07 hero            15 footer              23 motion, print
     08 sections, cards 16 crumb, pagenav
   ========================================================================== */

/* --- 01 base ---------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
html,body{overflow-x:clip}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:var(--t-body-lh);
  font-weight:var(--w-regular);
  font-optical-sizing:auto;
  color:var(--body);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  }
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin:0 0 .45em}
hr{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}
::selection{background:var(--gold);color:var(--ink-deep)}
.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}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.section.dark :focus-visible,.site-footer :focus-visible,.topbar :focus-visible{outline-color:var(--gold-bright)}
.skip{
  position:absolute;left:var(--s4);top:-60px;z-index:200;
  background:var(--bg);color:var(--ink);padding:var(--s3) var(--s5);
  border-radius:var(--radius);box-shadow:0 8px 24px var(--shadow-lift);
  text-decoration:none;transition:top .18s ease;
}
.skip:focus{top:var(--s4)}

.ic{
  width:24px;height:24px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.ic.brand{fill:currentColor;stroke:none}

/* --- 02 layout --------------------------------------------------------------- */

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap.wide{max-width:var(--maxw-wide)}
.wrap-text{max-width:var(--maxw-text);margin-inline:auto}

.section{padding-block:var(--band-y);background:var(--canvas);position:relative}
.section.alt,.section.cool{background:var(--bg-tint)}
.section.tight,.section.alt.tight{padding-block:calc(var(--band-y) * .5);background:var(--canvas)}
.section.flush{padding-block:0}
.section.alt + .section:not(.alt):not(.dark):not(.cool){border-top:0}

/* Navy band - engraved rings in the corner, champagne type accents. */
.section.dark{background:var(--grad-band);color:var(--muted-soft);overflow:hidden;isolation:isolate}
.section.dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 100% 0%, transparent 0 22px, var(--white-a06) 22px 23px);
  -webkit-mask-image:radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
}
.section.dark h1,.section.dark h2,.section.dark h3,.section.dark h4{color:var(--bg)}
.section.dark p,.section.dark li{color:var(--muted-soft)}
.section.dark strong,.section.dark b{color:var(--bg)}

/* --- 03 type ----------------------------------------------------------------- */

h1,h2{
  font-family:var(--font-display);
  font-weight:var(--w-display);
  font-optical-sizing:auto;
  color:var(--ink);
  letter-spacing:-.018em;
  margin:0 0 .42em;
  text-wrap:balance;
}
h1{font-size:var(--t-h1);line-height:var(--t-h1-lh);letter-spacing:-.022em}
h2{font-size:var(--t-h2);line-height:var(--t-h2-lh)}
h3{
  font-family:var(--font-display);font-weight:var(--w-medium);font-optical-sizing:auto;
  font-size:var(--t-h3);line-height:1.2;letter-spacing:-.012em;color:var(--ink);margin:0 0 .5em;
  text-wrap:balance;
}
h4,h5,h6{font-family:var(--font-head);font-weight:var(--w-semi);color:var(--ink);margin:0 0 .5em;letter-spacing:-.01em}
h4{font-size:var(--t-h4);line-height:var(--t-h4-lh)}
h5{font-size:var(--t-lead);line-height:var(--t-lead-lh);font-weight:var(--w-regular);color:var(--body)}
h6{font-size:var(--t-small);line-height:1.5;color:var(--muted)}

p{margin:0 0 1.15em;max-width:72ch}
p:last-child{margin-bottom:0}
strong,b{font-weight:var(--w-semi);color:var(--ink)}

/* Accent word in a heading: in foil. */
.accent{color:var(--gold-ink)}
h1 .accent,h2 .accent,h3 .accent{color:var(--gold-ink)}
.hero h1 .accent,.section.dark h2 .accent{color:var(--gold-bright)}

.eyebrow{
  font-family:var(--font-head);
  font-size:var(--t-eyebrow);
  font-weight:var(--w-semi);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-ink);
  margin:0 0 var(--s5);
  display:flex;align-items:center;gap:var(--s3);
}
.eyebrow::before{
  content:"";width:7px;height:7px;flex:0 0 7px;transform:rotate(45deg);
  background:var(--gold);
}
.eyebrow.center,.sec-head.center .eyebrow{justify-content:center}
.hero .eyebrow,.section.dark .eyebrow,.contact-card .eyebrow{color:var(--gold)}

.lead{font-size:var(--t-lead);line-height:var(--t-lead-lh);color:var(--body);max-width:60ch}
.small{font-size:var(--t-small)}
.center{text-align:center}
.muted{color:var(--muted)}
.nowrap{white-space:nowrap}
.rule{width:64px;height:1px;background:var(--gold);border:0;margin:0 0 var(--s5)}

/* --- 04 buttons, links --------------------------------------------------------- */

.btn{
  --b-bg:var(--btn-bg);--b-ink:var(--btn-ink);--b-line:var(--btn-bg);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  font-family:var(--font-head);font-size:15px;font-weight:var(--w-semi);
  letter-spacing:.005em;line-height:1.2;
  padding:17px 28px;min-height:54px;
  border-radius:var(--radius-pill);
  background:var(--b-bg);color:var(--b-ink);
  border:1px solid var(--b-line);
  text-decoration:none;cursor:pointer;
  transition:transform var(--ease-standard),box-shadow var(--ease-standard),
             background-color var(--ease-standard),border-color var(--ease-standard),color var(--ease-standard);
}
.btn .ic{width:17px;height:17px;stroke-width:1.8;transition:transform var(--ease-standard)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px var(--shadow-deep);background:var(--btn-bg-hover);border-color:var(--btn-bg-hover)}
.btn:hover .ic{transform:translateX(4px)}
.btn:active{transform:none;box-shadow:none}
/* A sheen that crosses the button on hover - the foil catching light. */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,var(--white-a12) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease-out);
}
.btn:hover::after{transform:translateX(120%)}

.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)}

/* On navy: champagne solid, hairline ghost. */
.hero .btn:not(.ghost),.section.dark .btn:not(.ghost),.btn.on-dark:not(.ghost){
  background:var(--btn-dark-bg);border-color:var(--btn-dark-bg);color:var(--btn-dark-ink)}
.hero .btn:not(.ghost):hover,.section.dark .btn:not(.ghost):hover,.btn.on-dark:not(.ghost):hover{
  background:var(--btn-dark-hover);border-color:var(--btn-dark-hover);color:var(--btn-dark-ink);box-shadow:0 16px 36px -14px var(--shadow-night)}
.hero .btn.ghost,.section.dark .btn.ghost,.btn.on-dark.ghost{background:transparent;color:var(--bg);border-color:var(--gold-a55)}
.hero .btn.ghost:hover,.section.dark .btn.ghost:hover,.btn.on-dark.ghost:hover{background:var(--white-a06);color:var(--bg);border-color:var(--gold)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s6);align-items:center}
.btn-row.center{justify-content:center}

a.plain{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1.5px}
a.plain:hover{text-decoration-color:var(--ink)}
.section.dark a.plain{color:var(--bg)}

.arrowlink{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-head);font-size:14.5px;font-weight:var(--w-semi);letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;
  padding-bottom:2px;transition:background-size var(--ease-standard);
}
.arrowlink .ic{width:16px;height:16px;stroke-width:1.8;color:var(--gold-ink);transition:transform var(--ease-standard)}
.arrowlink:hover{background-size:100% 1px}
.arrowlink:hover .ic{transform:translateX(4px)}
.section.dark .arrowlink{color:var(--bg)}
.section.dark .arrowlink .ic{color:var(--gold)}

/* --- 05 topbar ----------------------------------------------------------------- */

.topbar{background:var(--ink-deep);color:var(--muted-soft);font-size:13px;letter-spacing:.01em}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:40px}
.topbar a{color:var(--muted-soft);text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2);transition:color .2s ease}
.topbar a:hover{color:var(--gold-bright)}
.topbar-left{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.topbar-right{display:flex;align-items:center;gap:var(--s4)}
.topbar .ic{width:14px;height:14px;color:var(--gold)}
.topbar-right .ic{color:inherit}

/* --- 06 header, nav -------------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--bg-glass);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line-glass);
  transition:box-shadow .3s ease,background-color .3s ease;
}
.site-header.scrolled{box-shadow:0 10px 30px -18px var(--shadow-deep);background:color-mix(in srgb, var(--canvas) 92%, transparent)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:84px;transition:min-height .3s ease}
.site-header.scrolled .wrap{min-height:68px}

.brand{display:flex;align-items:center;gap:var(--s4);text-decoration:none;flex:0 0 auto}
.brand .brand-mark{width:44px;height:42px;flex:0 0 44px;color:var(--ink);fill:currentColor}
.brand-lock{display:flex;flex-direction:column;justify-content:center;padding-left:var(--s4);border-left:1px solid var(--line-strong)}
.brand .brand-txt{font-family:var(--font-display);font-size:22px;font-weight:var(--w-medium);color:var(--ink);line-height:1;letter-spacing:.01em}
.brand .brand-sub{display:block;font-family:var(--font-head);font-size:10px;font-weight:var(--w-semi);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);margin-top:6px}

.nav{display:flex;align-items:center;gap:var(--s5)}
.nav ul{list-style:none;display:flex;align-items:center;gap:clamp(18px,2.2vw,34px);margin:0;padding:0}
.nav li{margin:0;position:relative}
.nav a{
  font-family:var(--font-nav);font-size:15px;font-weight:var(--w-medium);
  color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:var(--s5) 0;white-space:nowrap;position:relative;
  transition:color .2s ease;
}
.nav > ul > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:20px;height:1px;
  background:var(--gold-ink);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav > ul > li:hover > a::after,.nav > ul > li.is-active > a::after{transform:scaleX(1);transform-origin:left}
.nav .is-active > a{color:var(--ink)}
.nav a:hover{color:var(--gold-ink)}
.nav .has-sub > a .ic{width:13px;height:13px;stroke-width:2;opacity:.55;transition:transform .3s ease}
.nav .has-sub:hover > a .ic{transform:rotate(180deg)}

/* "Apply Now" in the menu becomes the one button in the header. */
.nav > ul > li > a[href*="apply-for-star-k-kosher"]{
  padding:11px 20px;border-radius:var(--radius-pill);
  background:var(--ink);color:var(--btn-ink);
  transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.nav > ul > li > a[href*="apply-for-star-k-kosher"]:hover{background:var(--ink-deep);color:var(--btn-ink);transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--shadow-deep)}
.nav > ul > li > a[href*="apply-for-star-k-kosher"]::after{display:none}
.nav > ul > li.has-sub > a[href*="apply-for-star-k-kosher"] .ic{opacity:.8}

.nav .sub{
  position:absolute;top:calc(100% - 10px);left:calc(-1 * var(--s5));min-width:272px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 60px -24px var(--shadow-deep),0 2px 6px var(--shadow-ambient);
  padding:var(--s2);display:block;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top left;
  transition:opacity .22s ease,transform .3s var(--ease-out),visibility .22s;
}
.nav li:hover > .sub,.nav li:focus-within > .sub{opacity:1;visibility:visible;transform:none}
.nav .sub li{width:100%}
.nav .sub a{display:flex;justify-content:space-between;padding:10px 14px;width:100%;font-weight:var(--w-regular);font-size:14.5px;border-radius:10px;color:var(--body)}
.nav .sub a:hover{background:var(--bg-tint);color:var(--ink)}
.nav .sub a::after{display:none}
.nav .sub .is-active > a{color:var(--ink);font-weight:var(--w-semi)}

.lang{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-head);font-size:var(--t-small);font-weight:var(--w-medium);
  color:var(--ink);text-decoration:none;padding:var(--s2) var(--s3);
  border:1px solid var(--line);border-radius:var(--radius-pill);
}
.lang .ic{width:22px;height:15px;border-radius:2px;overflow:hidden;fill:none;stroke:none}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);
}
.nav-toggle .ic{width:22px;height:22px}

/* --- 07 hero --------------------------------------------------------------------- */

.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--grad-hero);color:var(--muted-soft);
  padding-block:clamp(72px,9vw,150px);
}
/* Engraved rings - the guilloche of a certificate - spreading from the right. */
.hero::before{
  content:"";position:absolute;inset:-10% -10% -10% 30%;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 78% 42%, transparent 0 17px, var(--white-a06) 17px 18px);
  -webkit-mask-image:radial-gradient(closest-side at 78% 42%, #000 20%, transparent 100%);
          mask-image:radial-gradient(closest-side at 78% 42%, #000 20%, transparent 100%);
}
/* A soft champagne glow and a hairline where the hero meets the page. */
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold-a55) 30%,var(--gold-a55) 70%,transparent);
}
.hero .wrap{position:relative;z-index:2}
.hero h1{color:var(--bg);margin:0 0 var(--s5)}
.hero .lead{color:var(--muted-soft)}
.hero-grid{position:relative}

.hero.with-art .hero-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(32px,5vw,96px);align-items:center;
}
.hero.with-art h1{max-width:14ch}
.hero-art{width:100%;height:auto;position:relative}
.hero-art > svg{width:100%;height:auto;overflow:visible}

.hero.compact{padding-block:clamp(56px,6.5vw,104px)}
.hero.compact h1{font-size:clamp(38px,1.9rem + 2.4vw,66px);max-width:18ch}
.hero.compact .lead{max-width:56ch}
.hero.compact.has-side .hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,72px);align-items:center}
.hero.compact.has-side .hero-art{max-width:420px;justify-self:end}

/* Home page: the full statement. */
body[data-page="index"] .hero{padding-block:clamp(72px,8vw,136px) clamp(80px,9vw,150px)}
body[data-page="index"] .hero h1{font-size:clamp(42px,2rem + 3vw,78px);line-height:1.04;max-width:13ch;letter-spacing:-.025em}
body[data-page="index"] .hero .lead{font-size:clamp(18px,1rem + .5vw,22px);max-width:52ch}
body[data-page="index"] .hero .eyebrow{margin-bottom:var(--s6)}

/* The seal: home hero artwork (content/art/hero-home.svg) - still, no moving parts (Jaison). */
.hero-art > svg.seal{position:relative;width:min(118%,640px);height:auto;margin-left:auto;margin-right:-6%;aspect-ratio:1;overflow:visible}
.seal-mark{color:var(--bg)}
@media (max-width:1024px){.hero-art > svg.seal{width:min(100%,480px);margin:0 auto}}
.seal-glow{opacity:.9}

/* Marks and logos in a medallion (symbol, organic, FDA pages). */
.hero-mark{
  position:relative;justify-self:center;
  width:clamp(200px,24vw,300px);aspect-ratio:1;border-radius:50%;
  background:var(--bg);display:grid;place-items:center;color:var(--mark-ink);
  box-shadow:0 0 0 1px var(--gold),0 0 0 14px var(--dark-tint),0 0 0 15px var(--gold-a55),0 40px 80px -30px var(--shadow-night);
}
.hero-mark::before,.hero-mark::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
}
.hero-mark::before{inset:-44px;border:1px dashed var(--gold-a30)}
.hero-mark::after{inset:10px;border:1px solid var(--line)}
.hero-mark > svg{width:54%;height:auto;aspect-ratio:1;overflow:visible}
.hero-logo img{width:70%;height:70%;object-fit:contain}
.hero-logo.wide img{width:84%;height:50%;object-fit:cover}
.hero-icon{
  justify-self:center;width:clamp(150px,15vw,200px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;color:var(--gold);
  border:1px solid var(--gold);background:var(--dark-tint);
  box-shadow:0 0 0 14px var(--white-a06),0 0 0 15px var(--gold-a30);
}
.hero-icon .ic{width:42%;height:42%;stroke-width:1.1}
.hero-photo{margin:0;justify-self:end;width:100%;max-width:360px;aspect-ratio:4/5;position:relative}
.hero-photo::before{content:"";position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--gold-a55);border-radius:var(--radius-lg)}
.hero-photo img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-lg);box-shadow:0 40px 80px -30px var(--shadow-night)}

/* --- 08 sections, heads, cards ----------------------------------------------------- */

.sec-head{max-width:66ch;margin:0 0 clamp(40px,5vw,72px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin:0 0 var(--s4)}
.sec-head .lead,.sec-head p{margin:0}
.sec-head.center .lead,.sec-head.center p{margin-inline:auto}

.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);margin-bottom:clamp(40px,5vw,72px);flex-wrap:wrap}
.head-row .sec-head{margin-bottom:0}

.tiles{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tiles.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiles.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.cols-5{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4)}
.tiles.flexrow{display:flex;flex-wrap:wrap;justify-content:center}
.tiles.flexrow > *{flex:0 1 calc((100% - 2 * var(--s5)) / 3);height:auto}
.narrow-tiles{max-width:920px;margin:var(--s6) auto 0}
.after-tiles{margin-top:var(--s7)}
.prose + .tiles.after-prose{margin-top:var(--s7)}
.tiles-note{margin:var(--s6) auto 0;text-align:center;max-width:70ch}

/* The card: white stock on paper, a hairline edge, lifts when it is a target. */
.feature,.symbolcard,.tile{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:transform var(--ease-standard),box-shadow var(--ease-standard),border-color var(--ease-standard);
}
.feature:hover,.symbolcard:hover,.tile:hover{
  transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 30px 60px -32px var(--shadow-deep),0 2px 6px var(--shadow-ambient);
}

.feature{padding:clamp(26px,2.6vw,38px);height:100%;display:flex;flex-direction:column}
.feature .ficon{
  position:relative;width:54px;height:54px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;margin-bottom:var(--s5);
  color:var(--ink);background:var(--gold-soft);
  box-shadow:inset 0 0 0 1px var(--icon-tint-gold-line);
  transition:background-color var(--ease-standard),color var(--ease-standard),transform var(--ease-standard);
}
.feature .ficon::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--line);transition:border-color var(--ease-standard),transform .6s var(--ease-out)}
.feature .ficon .ic{width:25px;height:25px;stroke-width:1.4}
.feature:hover .ficon{background:var(--ink);color:var(--gold-bright)}
.feature:hover .ficon::after{border-color:var(--gold);transform:scale(1.08)}
.feature h4{margin:0 0 var(--s3);font-size:18px}
.feature p{margin:0;font-size:var(--t-small);line-height:1.68;max-width:none}
.section.dark .feature{background:var(--dark-tint);border-color:var(--line-dark)}
.section.dark .feature:hover{border-color:var(--gold-a55);box-shadow:0 30px 60px -30px var(--shadow-night)}
.section.dark .feature .ficon{background:var(--white-a06);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-a30)}
.section.dark .feature .ficon::after{border-color:var(--line-dark)}

/* Icon beside the title - two-up grids and `.tiles.rows`. */
.tiles.cols-2 > .feature,.tiles.rows > .feature{display:grid;grid-template-columns:54px 1fr;column-gap:var(--s5);align-content:start}
.tiles.cols-2 > .feature > *,.tiles.rows > .feature > *{grid-column:2}
.tiles.cols-2 > .feature > .ficon,.tiles.rows > .feature > .ficon{grid-column:1;grid-row:1 / span 4;margin:0}
.tiles.cols-2 > .feature h4,.tiles.rows > .feature h4{margin-top:var(--s3)}

/* Numbered cards - sequences (Apply: what to have ready). */
.tiles.numbered{counter-reset:card}
.tiles.numbered > .feature{counter-increment:card;padding-top:clamp(30px,3vw,44px)}
.tiles.numbered > .feature::before{
  content:"0" counter(card);position:absolute;right:clamp(22px,2.4vw,34px);top:clamp(14px,1.6vw,22px);
  font-family:var(--font-display);font-weight:var(--w-light);
  font-size:clamp(54px,5vw,76px);line-height:1;color:var(--line);letter-spacing:-.03em;
  transition:color var(--ease-standard);
}
.tiles.numbered > .feature:hover::before{color:var(--gold)}

/* Certification marks come from the sprite - currentColor is live. */
.cmark{width:100%;height:100%;color:var(--mark-ink);fill:currentColor;stroke:none}
.cmark.on-dark{color:var(--bg)}
.cmark.gold{color:var(--gold)}
.cmark.ink{color:var(--ink)}

/* --- 09 symbol cards: each mark presented like a specimen on its plate ---------------- */

.symbolcard{
  padding:clamp(26px,2.4vw,34px) clamp(20px,2vw,28px) clamp(24px,2.2vw,30px);
  display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;overflow:hidden;
}
.symbolcard::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--grad-foil);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out);
}
.symbolcard:hover::before{transform:scaleX(1)}
.symbolcard .mark{
  position:relative;width:118px;height:118px;margin-bottom:var(--s5);border-radius:50%;
  display:grid;place-items:center;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow var(--ease-standard),background-color var(--ease-standard);
}
.symbolcard .mark::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px dashed var(--line-strong);transition:transform 1.2s var(--ease-out),border-color var(--ease-standard)}
.symbolcard:hover .mark{box-shadow:inset 0 0 0 1px var(--gold)}
.symbolcard:hover .mark::after{transform:rotate(60deg);border-color:var(--gold)}
.symbolcard .mark > svg,.symbolcard .mark > img{width:62%;height:62%;object-fit:contain}
.symbolcard .mark img.wide{width:84%;height:44%;object-fit:cover;border-radius:4px}
.symbolcard h3{margin:0 0 var(--s3);font-size:21px;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.symbolcard p{margin:0 0 var(--s5);font-size:14.5px;line-height:1.6;color:var(--body);max-width:none}
.symbolcard .arrowlink{margin-top:auto}
/* The whole card is the link target when it has one. */
.symbolcard .arrowlink::before{content:"";position:absolute;inset:0;z-index:1}

.tile{padding:clamp(22px,2.2vw,30px) var(--s5);text-align:center;display:flex;flex-direction:column;align-items:center;height:100%}
.tile img.tile-mark{width:84px;height:84px;object-fit:contain;margin:0 0 var(--s5)}
.tile > a:first-child{display:flex;align-items:center;justify-content:center;height:96px;margin:0 0 var(--s5)}
.tile > a:first-child img.tile-mark{margin:0}
.tile img.tile-mark.wide{width:150px;height:84px;object-fit:cover}
.tile h3,.tile h4{margin:0 0 var(--s3);font-size:20px;min-height:2lh;text-wrap:balance}
.tile p{margin:0;font-size:var(--t-small);line-height:1.6;max-width:none}
.tile .tile-link{margin-top:auto;padding-top:var(--s5)}

/* --- 10 the journey ---------------------------------------------------------------- */

/* Home (compact): six stations on one engraved line. */
.journey{position:relative;display:grid;gap:var(--s5);grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:jr}
.journey .jstep{position:relative;z-index:1}
.journey .jstep h4{margin:0 0 var(--s2)}
.journey .jstep p{margin:0;font-size:var(--t-small);line-height:1.62;max-width:none}
.jstep .num{
  position:relative;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center;margin:0 0 var(--s5);
  font-family:var(--font-display);font-size:26px;font-weight:var(--w-regular);
  color:var(--ink);background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--gold),0 0 0 8px var(--bg-tint);
  transition:background-color .4s ease,color .4s ease;
}
.jstep:hover .num{background:var(--ink);color:var(--gold-bright)}

.journey.compact{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4)}
.journey.compact::before{
  content:"";position:absolute;left:32px;right:calc((100% - 5 * var(--s4)) / 6 - 32px);top:32px;height:1px;z-index:0;
  background:linear-gradient(90deg,var(--gold),var(--line-strong) 60%,var(--gold));
}
.journey.compact .jstep{padding-right:var(--s3)}
.journey.compact .jstep p{font-size:14.5px}

/* Steps page: a vertical timeline - stations down a spine, stories to the right. */
.journey.steps-6:not(.compact){grid-template-columns:1fr;gap:0;max-width:880px;margin-inline:auto}
.journey.steps-6:not(.compact)::before{
  content:"";position:absolute;left:32px;top:32px;bottom:32px;width:1px;z-index:0;
  background:linear-gradient(var(--gold),var(--line-strong) 50%,var(--gold));
}
.journey.steps-6:not(.compact) .jstep{
  display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:clamp(24px,3vw,44px);
  padding:0 0 var(--s7);
}
.journey.steps-6:not(.compact) .jstep:last-child{padding-bottom:0}
.journey.steps-6:not(.compact) .jstep .num{grid-row:1 / span 2;margin:0}
.journey.steps-6:not(.compact) .jstep::after{
  content:"";grid-column:2;grid-row:1 / span 2;z-index:-1;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color var(--ease-standard),box-shadow var(--ease-standard);
}
.journey.steps-6:not(.compact) .jstep{isolation:isolate}
.journey.steps-6:not(.compact) .jstep h4{
  grid-column:2;grid-row:1;margin:0;padding:var(--s5) var(--s6) var(--s2);
  font-family:var(--font-display);font-weight:var(--w-medium);font-size:clamp(22px,1.2rem + .6vw,28px);letter-spacing:-.012em;
}
.journey.steps-6:not(.compact) .jstep p{grid-column:2;grid-row:2;padding:0 var(--s6) var(--s5);font-size:var(--t-body)}
.journey.steps-6:not(.compact) .jstep:hover::after{border-color:var(--gold);box-shadow:0 26px 50px -34px var(--shadow-deep)}

/* V1.0 markup still renders */
.steps{display:grid;gap:var(--s5);grid-template-columns:repeat(4,1fr)}
.steps.cols-3{grid-template-columns:repeat(3,1fr)}
.step .num{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 0 var(--s4);font-family:var(--font-display);font-size:20px;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.step p{margin:0;font-size:var(--t-small);line-height:1.65;max-width:none}

/* --- 11 stats ------------------------------------------------------------------- */

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.stats.cols-2{grid-template-columns:repeat(2,1fr)}
.stats.cols-3{grid-template-columns:repeat(3,1fr)}
.stat{padding-left:var(--s5);border-left:1px solid var(--gold)}
.stat .fig{font-family:var(--font-display);font-weight:var(--w-light);font-size:clamp(38px,3.4vw,58px);line-height:1;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.03em}
.stat .lbl{font-size:13px;letter-spacing:.06em;color:var(--muted);margin-top:var(--s3);line-height:1.5}
.section.dark .stat .fig{color:var(--bg)}
.section.dark .stat .lbl{color:var(--muted-soft)}
.market-stats{margin:var(--s6) 0 var(--s7);row-gap:var(--s6)}
.market-stats .fig{font-size:clamp(30px,2.6vw,44px)}
.market-stats .lbl{font-size:var(--t-small);letter-spacing:0}

.stat-callout{display:flex;align-items:center;gap:var(--s5);margin:var(--s6) 0;padding:var(--s5) var(--s6);background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--radius-lg)}
.stat-callout .fig{font-family:var(--font-display);font-weight:var(--w-light);font-size:clamp(44px,4vw,64px);line-height:1;color:var(--gold-ink);flex:0 0 auto}
.stat-callout p{margin:0}

/* --- 12 prose, split, table, callout ------------------------------------------------ */

.prose{max-width:var(--maxw-text)}
.prose.wide{max-width:78ch}
.prose h2{margin-top:1.4em;font-size:clamp(28px,1.4rem + 1.1vw,40px)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h3{margin-top:1.7em;margin-bottom:.5em}
.prose > p:first-of-type{font-size:var(--t-lead);line-height:var(--t-lead-lh)}
.prose ul{padding-left:0;list-style:none}
.prose ul > li{position:relative;padding-left:28px;margin-bottom:.7em}
.prose ul > li::before{content:"";position:absolute;left:4px;top:.66em;width:7px;height:7px;transform:rotate(45deg);background:var(--gold)}
.prose ol li::marker{color:var(--gold-ink);font-family:var(--font-display);}
.prose img{border-radius:var(--radius-lg);margin-block:var(--s6)}
.prose a:not(.btn){color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1.5px}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,104px);align-items:center}
.split.top{align-items:start}
.split.narrow-left{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.split.narrow-right{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.split > div > :first-child{margin-top:0}
.stack-head{max-width:13ch}
.deep-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,72px);padding-top:var(--s7);border-top:1px solid var(--line)}
.deep-row + .deep-row{margin-top:var(--s7)}
.deep-row h2{margin:0;font-size:clamp(26px,1.3rem + 1vw,36px)}

.callout{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:clamp(22px,2.4vw,34px)}
.callout h3{margin-top:0}
.prose .callout{margin:var(--s6) 0}

.pull{position:relative;border:0;padding:var(--s2) 0 0 var(--s7);margin:var(--s7) 0;font-family:var(--font-display);font-weight:var(--w-light);font-size:clamp(22px,1.2rem + .8vw,30px);line-height:1.35;color:var(--ink)}
.pull::before{content:"\201C";position:absolute;left:0;top:-.15em;font-size:3.2em;line-height:1;color:var(--gold);}
.pull cite{display:block;margin-top:var(--s4);font-family:var(--font-head);font-size:var(--t-small);font-style:normal;color:var(--muted);font-weight:var(--w-medium)}
blockquote{margin:var(--s6) 0;padding:var(--s5) var(--s6);border-left:2px solid var(--gold);background:var(--surface);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
blockquote p{font-style:italic;margin-bottom:var(--s2)}
blockquote footer{font-size:var(--t-small);color:var(--muted)}
.prose blockquote.pull{font-size:clamp(19px,1rem + .45vw,23px);font-style:normal;padding:var(--s5) var(--s6) var(--s5) var(--s8);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.prose blockquote.pull::before{left:var(--s5);top:var(--s3)}
.sources{font-size:var(--t-small);color:var(--muted)}

.checklist{list-style:none;padding:0;margin:0}
.checklist li{position:relative;padding-left:34px;margin-bottom:var(--s4)}
.checklist li::before{content:"";position:absolute;left:0;top:.3em;width:20px;height:20px;border-radius:50%;background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--icon-tint-gold-line)}
.checklist li::after{content:"";position:absolute;left:7px;top:calc(.3em + 5px);width:6px;height:9px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg)}
.checklist.small{font-size:var(--t-small);margin-top:var(--s3)}
.checklist.small li{margin-bottom:var(--s3)}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);box-shadow:0 30px 60px -40px var(--shadow-deep)}
table.data{border-collapse:collapse;width:100%;font-size:var(--t-small);background:var(--surface)}
table.data th,table.data td{text-align:left;padding:var(--s5) var(--s5);border-bottom:1px solid var(--line-soft);vertical-align:middle}
table.data thead th{font-family:var(--font-head);font-weight:var(--w-semi);color:var(--gold-ink);background:var(--canvas);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;padding-block:var(--s4)}
table.data tbody tr{transition:background-color .25s ease}
table.data tbody tr:hover{background:var(--canvas)}
table.data tbody tr:last-child td{border-bottom:0}
table.data td strong{font-family:var(--font-display);font-weight:var(--w-medium);font-size:22px;color:var(--ink);letter-spacing:-.01em}
table.data .mark-cell{width:96px;padding-right:0}
table.data .name-cell{white-space:nowrap;width:1%}
table.data .mark-cell svg,table.data .mark-cell img{width:62px;height:62px}

.figure{margin:0}
.figure img,.figure svg{width:100%;height:auto;border-radius:var(--radius-lg)}
.figure figcaption{margin-top:var(--s3);font-size:13px;color:var(--muted);border-left:1px solid var(--gold);padding-left:var(--s3)}
.figure.photo{position:relative}
.figure.photo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--gold);border-radius:var(--radius-lg);z-index:0}
.figure.photo img{position:relative;z-index:1;box-shadow:0 40px 80px -36px var(--shadow-deep)}
.figure.eq{max-width:780px;margin-inline:auto}
.figure.eq svg{border-radius:0}
.figure.illus svg{border-radius:var(--radius-lg)}
.only-narrow{display:none}

/* --- 13 FAQ ---------------------------------------------------------------------- */

.faq{max-width:880px;margin-inline:auto;border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong);transition:background-color .3s ease}
.faq summary{
  cursor:pointer;list-style:none;position:relative;
  font-family:var(--font-display);font-weight:var(--w-medium);font-size:clamp(19px,1rem + .45vw,23px);line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);padding:var(--s6) 72px var(--s6) 0;transition:color .25s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
/* A plus inside a ring that turns into a minus. */
.faq summary::before{
  content:"";position:absolute;right:0;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line-strong);transition:box-shadow .3s ease,background-color .3s ease;
}
.faq summary::after{
  content:"";position:absolute;right:15px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--ink),var(--ink)) center/14px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 14px no-repeat;
  transition:transform .4s var(--ease-out);
}
.faq summary:hover::before{box-shadow:inset 0 0 0 1px var(--gold)}
.faq details[open] summary::before{background:var(--ink);box-shadow:none}
.faq details[open] summary::after{transform:rotate(135deg);background:linear-gradient(var(--gold-bright),var(--gold-bright)) center/14px 1.5px no-repeat,linear-gradient(var(--gold-bright),var(--gold-bright)) center/1.5px 14px no-repeat}
.faq .answer{padding:0 72px var(--s6) 0;color:var(--body);font-size:var(--t-body);line-height:1.72}
.faq .answer p{max-width:none}
html.js .faq details[open] .answer{animation:faq-in .45s var(--ease-out)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- 14 closing - the call to action before the footer: light, as Jaison chose (V1.5) --- */

.closing{position:relative;padding-block:var(--band-y);background:var(--canvas)}
.closing .wrap{position:relative}
.closing-grid{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,72px);align-items:center;
  padding:clamp(40px,6vw,96px) clamp(28px,6vw,96px);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:0 50px 100px -60px var(--shadow-deep);
}
/* Foil rings behind the copy, and a foil edge along the top. */
.closing-grid::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 100% 50%, transparent 0 15px, var(--gold-a18) 15px 16px);
  -webkit-mask-image:radial-gradient(60% 120% at 100% 50%, #000 10%, transparent 80%);
          mask-image:radial-gradient(60% 120% at 100% 50%, #000 10%, transparent 80%);
}
.closing-grid::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-foil);z-index:1}
.closing h2{color:var(--ink);margin:0 0 var(--s4);font-size:clamp(32px,1.5rem + 2vw,56px)}
.closing p{color:var(--body);max-width:52ch;margin:0;font-size:var(--t-lead);line-height:var(--t-lead-lh)}
.closing .btn-row{margin-top:0;justify-content:flex-end}
.closing .btn:not(.ghost),.closing .btn.on-dark:not(.ghost){background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-ink)}
.closing .btn:not(.ghost):hover,.closing .btn.on-dark:not(.ghost):hover{background:var(--btn-bg-hover);border-color:var(--btn-bg-hover);color:var(--btn-ink)}
.closing .eyebrow{color:var(--gold-ink);font-size:var(--t-eyebrow);line-height:1.5;margin-bottom:var(--s5)}
.closing a.plain{color:var(--ink)}

/* --- 15 footer ------------------------------------------------------------------- */

.site-footer{position:relative;overflow:hidden;isolation:isolate;background:var(--ink-deep);color:var(--muted-soft);padding-top:clamp(64px,7vw,112px);font-size:var(--t-small)}
.site-footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 0% 100%, transparent 0 21px, var(--white-a06) 21px 22px);
  -webkit-mask-image:radial-gradient(55% 80% at 0% 100%, #000 0%, transparent 75%);
          mask-image:radial-gradient(55% 80% at 0% 100%, #000 0%, transparent 75%);
}
.site-footer a{color:var(--muted-soft);text-decoration:none;transition:color .2s ease}
.site-footer a:hover{color:var(--gold-bright)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,64px)}
.site-footer h4{color:var(--gold);font-family:var(--font-head);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 var(--s5);font-weight:var(--w-semi)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 var(--s3)}
.footer-brand .footer-lock{display:flex;align-items:center;gap:var(--s4);margin:0 0 var(--s5);text-decoration:none}
.footer-brand .footer-mark{width:54px;height:52px;color:var(--bg);fill:currentColor}
.footer-brand .footer-word{font-family:var(--font-display);font-size:26px;color:var(--bg);line-height:1;letter-spacing:.01em}
.footer-brand .footer-word small{display:block;font-family:var(--font-head);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:7px}
.footer-brand img{background:var(--bg);border-radius:10px;padding:6px;height:60px;width:auto;margin:0 0 var(--s5)}
.footer-brand p{color:var(--muted-soft);margin:0 0 var(--s5);max-width:38ch;line-height:1.7}
.footer-social{display:flex;gap:var(--s3)}
.footer-social a{
  display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;box-sizing:border-box;padding:0;line-height:0;
  border:1px solid var(--line-dark);border-radius:50%;color:var(--bg);text-decoration:none;
  transition:border-color .25s ease,background-color .25s ease,color .25s ease,transform .25s ease;
}
.footer-social a:hover{border-color:var(--gold);background:var(--gold);color:var(--ink-deep);transform:translateY(-2px)}
.footer-social .ic{display:block;width:17px;height:17px;margin:0;fill:currentColor;stroke:none}
.footer-nap strong{color:var(--bg);display:block;margin-bottom:var(--s1);font-weight:var(--w-semi)}
.footer-nap p{margin:0 0 var(--s4);line-height:1.65}
.footer-base{
  margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--line-dark);
  padding-block:var(--s5);font-size:13px;
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
}
.footer-base-links a{text-decoration:underline;text-decoration-color:var(--line-dark);text-underline-offset:4px}

/* --- 16 crumb, pagenav --------------------------------------------------------- */

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:13px;letter-spacing:.04em;color:var(--muted-soft);margin-bottom:var(--s6)}
.crumb a{color:var(--muted-soft);text-decoration:none;transition:color .2s ease}
.crumb a:hover{color:var(--gold-bright)}
.crumb .sep{opacity:.45}
.crumb [aria-current]{color:var(--gold-bright)}

.pagenav{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-top:0}
.pagenav a{
  position:relative;display:block;text-decoration:none;padding:var(--s6) var(--s6);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:transform var(--ease-standard),border-color var(--ease-standard),box-shadow var(--ease-standard);
}
.pagenav a:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 26px 50px -30px var(--shadow-deep)}
.pagenav .dir{display:block;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);font-weight:var(--w-semi);margin-bottom:var(--s2)}
.pagenav .ttl{font-family:var(--font-display);font-size:clamp(20px,1.1rem + .5vw,26px);color:var(--ink);letter-spacing:-.01em}
.pagenav .next{text-align:right}

/* --- 17 forms, embeds, map ------------------------------------------------------ */

.enquiry p{margin:0 0 var(--s5);max-width:none}
.enquiry label{display:block;font-family:var(--font-head);font-weight:var(--w-medium);color:var(--ink);font-size:14px;letter-spacing:.01em;margin-bottom:var(--s2)}
.enquiry label span{color:var(--gold-ink);margin-left:3px}
.enquiry input,.enquiry select,.enquiry textarea{
  width:100%;font:inherit;font-size:var(--t-body);color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:15px 16px;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.enquiry input:hover,.enquiry textarea:hover{border-color:var(--muted)}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--gold-a30)}
.enquiry textarea{resize:vertical;min-height:140px}
.enquiry fieldset.choice{border:0;padding:0;margin:0 0 var(--s6)}
.enquiry .choice legend{font-family:var(--font-head);font-weight:var(--w-semi);color:var(--ink);font-size:14px;margin-bottom:var(--s3)}
.enquiry .choice legend span{color:var(--gold-ink);margin-left:3px}
/* The three choices become selectable tiles. */
.enquiry .choice label{
  display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s2);padding:14px 16px;cursor:pointer;
  font-weight:var(--w-regular);font-size:var(--t-small);color:var(--body);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
  transition:border-color .25s ease,background-color .25s ease,color .25s ease;
}
.enquiry .choice label:hover{border-color:var(--gold)}
.enquiry .choice label:has(input:checked){border-color:var(--ink);background:var(--gold-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.enquiry .choice input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:0 0 auto;padding:0}
.enquiry button.btn{width:auto;min-width:180px}
.form-note{margin-top:var(--s4);font-size:var(--t-small);color:var(--muted)}
.form-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}

.fluentform .ff-el-group{margin-bottom:var(--s5)}
.fluentform .ff-el-input--label label{font-family:var(--font-head);font-weight:var(--w-medium);font-size:14px;color:var(--ink)}
.fluentform .ff-el-form-control{border:1px solid var(--line-strong);border-radius:var(--radius);padding:15px 16px;font:inherit;background:var(--surface);color:var(--ink)}
.fluentform .ff-el-form-control:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--gold-a30);outline:none}
.fluentform .ff-btn-submit{background:var(--btn-bg)!important;border:1px solid var(--btn-bg)!important;color:var(--btn-ink)!important;border-radius:var(--radius-pill)!important;padding:17px 32px!important;font-family:var(--font-head);font-weight:var(--w-semi)}
.fluentform .ff-btn-submit:hover{background:var(--btn-bg-hover)!important}

.embed{position:relative;width:100%;max-width:960px;margin-inline:auto;padding:clamp(10px,1.4vw,18px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:0 50px 100px -60px var(--shadow-deep)}
.embed::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--grad-foil)}
.embed iframe{width:100%;height:min(1200px,85vh);min-height:600px;border:0;display:block;background:var(--bg);border-radius:calc(var(--radius-xl) - 12px);overflow:auto}

.map{line-height:0;overflow:hidden;position:relative}
.map iframe{width:100%;height:460px;border:0;display:block;filter:grayscale(.85) contrast(1.05);transition:filter .6s ease}
.map:hover iframe{filter:none}

/* --- 18 contact ----------------------------------------------------------------- */

.hero-contacts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
.hero-contacts.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));justify-content:start}
.hero-contacts .hc{
  display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s6) var(--s4) var(--s4);min-width:0;
  border:1px solid var(--line-dark);border-radius:var(--radius-pill);
  background:var(--white-a06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  text-decoration:none;color:var(--bg);
  transition:border-color .3s ease,transform .3s var(--ease-out),background-color .3s ease;
}
a.hc:hover{border-color:var(--gold);transform:translateY(-2px);background:var(--white-a12)}
.hc-ic{flex:0 0 46px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold-a55);color:var(--gold);transition:background-color .3s ease,color .3s ease}
a.hc:hover .hc-ic{background:var(--gold);color:var(--ink-deep)}
.hc-ic .ic{width:19px;height:19px}
.hc-lbl{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:var(--w-semi);font-family:var(--font-head)}
.hc-val{display:block;font-size:var(--t-body);color:var(--bg);font-weight:var(--w-medium);margin-top:2px;overflow-wrap:anywhere}

.contact-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink-deep);color:var(--muted-soft);
  border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:clamp(28px,3vw,42px);
}
.contact-card + .contact-card{margin-top:var(--s4)}
.contact-card h3{color:var(--bg);margin:0 0 var(--s5)}
.contact-card strong{color:var(--bg)}
.contact-card a{color:var(--gold)}
.contact-card p{max-width:none}
.contact-card.cc-feature{
  background:radial-gradient(120% 90% at 100% 0%, var(--gold-a18) 0%, transparent 55%),linear-gradient(160deg, var(--dark-tint) 0%, var(--ink-deep) 70%);
  border-color:var(--gold-a30);box-shadow:0 30px 60px -30px var(--shadow-deep);
}
.contact-card.cc-feature::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 100% 0%, transparent 0 15px, var(--white-a06) 15px 16px);
  -webkit-mask-image:radial-gradient(60% 70% at 100% 0%, #000 0%, transparent 80%);
          mask-image:radial-gradient(60% 70% at 100% 0%, #000 0%, transparent 80%);
}
.contact-card.cc-feature::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-foil)}
.cc-rows{list-style:none;margin:0;padding:0}
.cc-rows li{margin:0;padding:0;border-top:1px solid var(--line-dark)}
.cc-rows li:last-child{border-bottom:1px solid var(--line-dark)}
.cc-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) 0;text-decoration:none;color:inherit}
.contact-card a.cc-row{color:inherit}
.cc-ic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--gold-a55);color:var(--gold);background:var(--gold-a10);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.cc-ic .ic{width:19px;height:19px}
.cc-txt{min-width:0}
.cc-lbl{display:block;font-family:var(--font-head);font-size:11px;font-weight:var(--w-semi);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-soft)}
.cc-val{display:block;margin-top:2px;color:var(--bg);font-weight:var(--w-medium);overflow-wrap:anywhere;line-height:1.45}
a.cc-row .cc-val{background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .3s ease}
a.cc-row:hover .cc-ic,a.cc-row:focus-visible .cc-ic{background:var(--gold);color:var(--ink-deep);border-color:var(--gold)}
a.cc-row:hover .cc-val,a.cc-row:focus-visible .cc-val{background-size:100% 1px}

.contact-social{margin-top:var(--s5)}
.contact-social a{color:var(--ink);border-color:var(--line-strong)}
.contact-social a:hover{border-color:var(--ink);background:var(--ink);color:var(--gold-bright)}
.next-steps{margin-top:var(--s7);padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
.next-steps h3{margin-bottom:var(--s5)}
.steps-list{list-style:none;padding:0;margin:0;counter-reset:st}
.steps-list li{counter-increment:st;position:relative;padding-left:52px;margin-bottom:var(--s5);font-size:var(--t-small);line-height:1.62}
.steps-list li:last-child{margin-bottom:0}
.steps-list li::before{
  content:counter(st);position:absolute;left:0;top:-4px;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-size:18px;
  color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold);background:var(--canvas);
}

/* --- 19 page-specific ------------------------------------------------------------ */

/* Home: "Connecting You to Global Markets" - an editorial photograph with a card set into it. */
.global{padding-block:var(--band-y) calc(var(--band-y) * .5)}
.global-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
.global-photo{position:relative;margin:0;grid-column:1;grid-row:1;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:16/10;box-shadow:0 60px 120px -60px var(--shadow-deep)}
.global-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease-out)}
.global:hover .global-photo img{transform:scale(1)}
.global-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,var(--overlay-soft))}
.global-card{
  position:relative;overflow:hidden;z-index:2;grid-column:2;grid-row:1;margin-left:-28%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:clamp(32px,4vw,60px);box-shadow:0 50px 100px -50px var(--shadow-deep);
}
.global-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--grad-foil)}
.global-card h2{font-size:clamp(30px,1.4rem + 1.6vw,48px)}

/* Home: the six reasons, on navy, as numbered entries rather than boxes. */
.section.dark .tiles.cols-3{gap:0;counter-reset:why;border-top:1px solid var(--line-dark)}
.section.dark .tiles.cols-3 > .feature{
  counter-increment:why;background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--line-dark);padding:clamp(30px,3vw,48px) clamp(20px,2.4vw,40px) clamp(30px,3vw,48px) 0;
}
.section.dark .tiles.cols-3 > .feature:nth-child(3n+2),.section.dark .tiles.cols-3 > .feature:nth-child(3n+3){padding-left:clamp(20px,2.4vw,40px);border-left:1px solid var(--line-dark)}
.section.dark .tiles.cols-3 > .feature:hover{transform:none;box-shadow:none;background:var(--white-a06)}
.section.dark .tiles.cols-3 > .feature::before{
  content:"0" counter(why);display:block;margin-bottom:var(--s5);
  font-family:var(--font-display);font-weight:var(--w-light);font-size:clamp(44px,3.6vw,60px);line-height:1;color:var(--gold);letter-spacing:-.03em;
}
.section.dark .tiles.cols-3 > .feature .ficon{position:absolute;top:clamp(34px,3.2vw,52px);right:clamp(20px,2.4vw,40px);width:44px;height:44px;margin:0}
.section.dark .tiles.cols-3 > .feature .ficon .ic{width:21px;height:21px}
.section.dark .tiles.cols-3 > .feature h4{font-family:var(--font-display);font-weight:var(--w-medium);font-size:clamp(22px,1.15rem + .5vw,27px);letter-spacing:-.012em;margin-bottom:var(--s3)}
.section.dark .tiles.cols-3 > .feature p{font-size:var(--t-small);color:var(--muted-soft)}

/* Symbol pages: the story in a lede, the places in cards. */
.symbol-body{max-width:860px}
.symbol-body h2{font-size:clamp(32px,1.5rem + 1.8vw,52px)}
.symbol-body > p:first-of-type{font-family:var(--font-display);font-weight:var(--w-light);font-size:clamp(22px,1.1rem + .8vw,30px);line-height:1.42;color:var(--ink);letter-spacing:-.01em;max-width:none}
.symbol-body h3{margin-top:1.6em;padding-top:var(--s5);border-top:1px solid var(--line)}
.symbol-body ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.symbol-body ul > li{margin:0;padding:var(--s6) var(--s5) var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);font-size:var(--t-small);line-height:1.62}
.symbol-body ul > li::before{left:var(--s5);top:var(--s5)}
.symbol-body ul > li strong{display:block;margin:var(--s4) 0 var(--s2);font-family:var(--font-display);font-weight:var(--w-medium);font-size:21px;letter-spacing:-.01em}

/* STAR-D: two standards side by side, with a "vs" seal between them. */
.narrow-tiles{position:relative}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles{gap:var(--s7)}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles::after{
  content:"vs";position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  display:grid;place-items:center;z-index:2;
  font-family:var(--font-display);font-size:22px;color:var(--gold-bright);background:var(--ink);
  box-shadow:0 0 0 6px var(--bg-tint);
}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles > .feature:first-child{background:var(--ink);border-color:var(--ink)}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles > .feature:first-child h4{color:var(--bg)}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles > .feature:first-child li{color:var(--muted-soft)}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles > .feature:first-child .ficon{background:var(--white-a06);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-a30)}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles > .feature:first-child .ficon::after{border-color:var(--line-dark)}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles > .feature:first-child .checklist li::before{background:var(--white-a06);box-shadow:inset 0 0 0 1px var(--gold-a55)}
body[data-page="star-d"] .tiles.cols-2.narrow-tiles > .feature:first-child .checklist li::after{border-color:var(--gold-bright)}

/* STAR-S: the four areas as tall plates. */
.tiles.cols-4 > .feature{align-items:flex-start;min-height:220px}
.tiles.cols-4 > .feature h4{margin-top:auto;font-family:var(--font-display);font-weight:var(--w-medium);font-size:22px;letter-spacing:-.01em;line-height:1.2}

/* Organic: sticky heading, stacked cards. */
.asym-grid{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(40px,6vw,104px);align-items:start}
.asym-head{position:sticky;top:120px;padding-left:var(--s6)}
.asym-head h2{margin:0 0 var(--s4)}
.asym-head p{margin:0;max-width:42ch}
.asym-glow{position:absolute;left:-120px;top:-80px;width:360px;height:360px;background:radial-gradient(circle, var(--icon-tint-gold-deep) 0%, transparent 72%);opacity:.7;z-index:-1;pointer-events:none}
.asym-rail{position:absolute;left:0;top:4px;bottom:4px;width:1px;background:linear-gradient(var(--gold) 0%, transparent 85%);pointer-events:none}
.asym-list{display:flex;flex-direction:column;gap:var(--s4)}
.asym-list .asym-item{display:grid;grid-template-columns:54px 1fr;column-gap:var(--s5)}
.asym-list .asym-item > *{grid-column:2}
.asym-list .asym-item > .ficon{grid-column:1;grid-row:1 / span 2;margin:0}
.asym-list .asym-item h4{margin-top:var(--s3)}

/* Partner logos on white plates. */
.split.narrow-left > div:first-child > img,.partner-logo{
  width:min(300px,100%);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:var(--s5);box-shadow:0 30px 60px -40px var(--shadow-deep);
}
.partner-logo{aspect-ratio:2/1;overflow:hidden;position:relative;padding:0}
.partner-logo img{position:absolute;inset:0 8%;width:84%;height:100%;object-fit:cover;margin:0}

/* Apply: the "not ready yet" panel. */
.not-ready{
  position:relative;overflow:hidden;margin:var(--s7) auto 0;max-width:1000px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s5) var(--s6);align-items:center;
  padding:var(--s6) var(--s7);background:var(--ink);border-radius:var(--radius-xl);color:var(--muted-soft);
}
.not-ready::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 0% 50%, transparent 0 15px, var(--white-a06) 15px 16px);
  -webkit-mask-image:radial-gradient(40% 120% at 0% 50%, #000 0%, transparent 80%);
          mask-image:radial-gradient(40% 120% at 0% 50%, #000 0%, transparent 80%);
}
.nr-ic{position:relative;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-a55)}
.nr-ic .ic{width:26px;height:26px;stroke-width:1.3}
.nr-txt{position:relative}
.nr-txt h3{color:var(--bg);margin:0 0 var(--s2)}
.nr-txt p{margin:0;font-size:var(--t-small);color:var(--muted-soft)}
.nr-actions{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--s3)}
.nr-actions .btn{justify-content:space-between;white-space:nowrap;min-height:48px;padding:13px 22px}
.nr-actions .btn:not(.ghost){background:var(--btn-dark-bg);border-color:var(--btn-dark-bg);color:var(--btn-dark-ink)}
.nr-actions .btn:not(.ghost):hover{background:var(--btn-dark-hover);border-color:var(--btn-dark-hover)}
.nr-actions .btn.ghost{color:var(--bg);border-color:var(--gold-a55)}
.nr-actions .btn.ghost:hover{background:var(--white-a06);border-color:var(--gold)}

/* Steps page. */
.steps-intro{max-width:72ch}
.steps-cycle{margin:var(--s8) auto 0;max-width:1100px;overflow-x:auto;padding:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl)}
.steps-cycle svg{min-width:760px;border-radius:0}

/* Fraudulent symbols. */
.fake-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin:var(--s5) 0 var(--s6);max-width:none}
.fake-grid img{margin:0;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px}
.fake-grid.row7{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:1080px;margin:var(--s6) auto var(--s7)}
.fake-grid.row7 img{width:calc((100% - 6 * 16px) / 7);height:auto}

/* Guides: chips, A-Z, grain chips. */
.toc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s3);margin:0 auto var(--s7);max-width:var(--maxw-text)}
.toc-chips a{font-family:var(--font-head);font-size:14px;font-weight:var(--w-medium);text-decoration:none;color:var(--ink);padding:var(--s2) var(--s4);border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);transition:border-color .2s ease,background-color .2s ease}
.toc-chips a:hover{border-color:var(--ink);background:var(--gold-soft)}
h2[id],h3[id]{scroll-margin-top:120px}
.eq-head{margin:var(--s8) auto var(--s5)}
.eq-head h3{font-size:var(--t-h3)}
.grain-chips{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s3) 0 var(--s4)}
.grain-chips span{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s4);border-radius:999px;background:var(--surface);border:1px solid var(--line);font-family:var(--font-head);font-weight:var(--w-medium);color:var(--ink);font-size:14px}
.grain-chips .ic{width:18px;height:18px;color:var(--gold-ink)}
p.center{text-align:center;margin-top:var(--s6);max-width:none}
.holdnote{margin:0 0 var(--s5)}

/* Photo band (kept for pages that still use it). */
.photoband{position:relative;background-size:cover;background-position:center;padding-block:clamp(72px,8vw,136px)}
.photoband::before{content:"";position:absolute;inset:0;background:var(--overlay-soft)}
.photoband .wrap{position:relative;z-index:2}
.photoband .panel{position:relative;background:var(--surface);max-width:540px;padding:clamp(32px,3.6vw,56px);border-radius:var(--radius-xl);box-shadow:0 40px 80px -40px var(--shadow-night)}
.photoband .panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;background:var(--grad-foil)}

.photoslot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);text-align:center;background:var(--bg-tile);border:1px dashed var(--art-line);border-radius:var(--radius-lg);padding:var(--s7) var(--s5);min-height:260px;color:var(--muted)}

/* Trust row (unused, kept). */
.trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,3vw,32px)}

/* --- 20 glossary ------------------------------------------------------------------ */

.glossary{display:grid;grid-template-columns:240px 1fr;gap:clamp(32px,4vw,72px);align-items:start}
.gloss-toc{position:sticky;top:120px}
.gloss-toc h3{font-family:var(--font-head);font-size:11.5px;font-weight:var(--w-semi);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:var(--s4)}
.gloss-toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-strong)}
.gloss-toc li{margin:0}
.gloss-toc a{display:block;padding:var(--s2) var(--s4);text-decoration:none;font-size:var(--t-small);color:var(--body);border-left:1px solid transparent;margin-left:-1px;transition:color .2s ease,border-color .2s ease}
.gloss-toc a:hover{color:var(--ink);border-left-color:var(--ink)}
.gloss-body > .sec-head:not(:first-child){margin-top:var(--s9);padding-top:var(--s7);border-top:1px solid var(--line)}
.gloss-body .sec-head{margin-bottom:var(--s5);max-width:none;scroll-margin-top:120px}
.gloss-body > .prose{margin-bottom:var(--s6);max-width:none}
.gloss-body > .prose > p:first-of-type{font-size:var(--t-body);line-height:var(--t-body-lh)}
.az-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s6)}
.az-bar a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:17px;text-decoration:none;color:var(--ink);border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.az-bar a:hover{background:var(--ink);color:var(--gold-bright);border-color:var(--ink)}
.deflist{margin:0;display:grid;gap:0}
.deflist dt{font-family:var(--font-display);font-weight:var(--w-medium);color:var(--ink);font-size:22px;margin:0;padding-top:var(--s6)}
.deflist dt:first-child{padding-top:0}
.deflist dd{margin:var(--s3) 0 0;padding-bottom:var(--s6);border-bottom:1px solid var(--line)}
.deflist dd p{max-width:none;margin:0}
.deflist.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.deflist.cards .term{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s5) var(--s6);scroll-margin-top:120px;transition:border-color .25s ease}
.deflist.cards .term:hover{border-color:var(--gold)}
.deflist.cards dt{padding-top:0;font-size:21px}
.deflist.cards dd{border:0;padding:0;margin-top:var(--s2);font-size:var(--t-small);line-height:1.65}

/* --- 21 consent banner ------------------------------------------------------------ */

.consent{
  position:fixed;z-index:9999;left:var(--s5);bottom:var(--s5);max-width:440px;
  padding:var(--s5) var(--s5) var(--s4);background:var(--surface);color:var(--body);
  border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 40px 80px -30px var(--shadow-deep),0 2px 6px var(--shadow-ambient);
}
.consent::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-foil)}
.consent[hidden]{display:none}
.consent-title{margin:0 0 var(--s2);font-family:var(--font-display);font-weight:var(--w-medium);font-size:20px;color:var(--ink)}
.consent-text{margin:0 0 var(--s4);font-size:var(--t-small);line-height:1.55}
.consent-text a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.consent-actions{display:flex;gap:var(--s3)}
.consent-actions .btn{flex:1 1 0;justify-content:center;padding:12px 18px;min-height:46px;font-size:14.5px}

/* --- 22 responsive ---------------------------------------------------------------- */

@media (max-width:1180px){
  .tiles.cols-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .journey.compact{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--s7)}
  .journey.compact::before{display:none}
  .global-grid{grid-template-columns:1fr}
  .global-photo{grid-row:1;aspect-ratio:16/9}
  .global-card{grid-column:1;grid-row:2;margin:-96px var(--s6) 0;max-width:640px}
}
@media (max-width:1024px){
  .tiles.cols-3,.tiles.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section.dark .tiles.cols-3 > .feature:nth-child(n){padding-left:clamp(20px,2.4vw,40px);border-left:0}
  .section.dark .tiles.cols-3 > .feature:nth-child(2n){border-left:1px solid var(--line-dark)}
  .section.dark .tiles.cols-3 > .feature:nth-child(2n+1){padding-left:0}
  .steps,.steps.cols-3{grid-template-columns:repeat(2,1fr)}
  .stats,.stats.cols-3{grid-template-columns:repeat(2,1fr);gap:var(--s6)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hero.with-art .hero-grid{grid-template-columns:1fr;gap:var(--s7)}
  .hero.with-art .hero-art{max-width:460px}
  .asym-grid{grid-template-columns:1fr}
  .asym-head{position:static;padding-left:var(--s5)}
  .closing-grid{grid-template-columns:1fr;gap:var(--s6)}
  .closing .btn-row{justify-content:flex-start}
  .glossary{grid-template-columns:1fr}
  .gloss-toc{position:static}
  .gloss-toc ul{display:flex;flex-wrap:wrap;border-left:0;gap:var(--s2)}
  .gloss-toc a{border:1px solid var(--line-strong);border-radius:var(--radius-pill);padding:var(--s2) var(--s4);margin-left:0}
  .deflist.cards{grid-template-columns:1fr}
  .symbol-body ul{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* backdrop-filter would make the header the containing block of the fixed menu */
  .site-header,.site-header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--canvas)}
  .nav-toggle{display:inline-flex;position:relative;z-index:80}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(380px,90vw);
    background:var(--canvas);flex-direction:column;align-items:stretch;
    padding:104px var(--s6) var(--s7);gap:0;overflow-y:auto;z-index:70;
    transform:translateX(100%);visibility:hidden;
    transition:transform .4s var(--ease-out),visibility 0s linear .4s;
    box-shadow:-30px 0 60px var(--shadow-lift);
  }
  .nav[data-open="true"]{transform:none;visibility:visible;transition:transform .4s var(--ease-out)}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{padding:var(--s4) 0;width:100%;font-family:var(--font-display);font-size:22px;font-weight:var(--w-regular)}
  .nav > ul > li > a::after{display:none}
  .nav > ul > li > a[href*="apply-for-star-k-kosher"]{margin:var(--s3) 0;justify-content:space-between;padding:14px 22px;font-family:var(--font-head);font-size:16px}
  .nav .sub{position:static;opacity:1;visibility:inherit;transform:none;border:0;box-shadow:none;padding:0 0 var(--s3) var(--s3);min-width:0;border-radius:0;background:transparent}
  .nav .sub li{border-bottom:0}
  .nav .sub a{padding:var(--s2) 0;font-family:var(--font-body);font-size:var(--t-small);color:var(--body)}
  .nav .sub a:hover{background:transparent}
  .nav .has-sub > a .ic{margin-left:auto}
  .split,.split.narrow-left,.split.narrow-right,.deep-row{grid-template-columns:1fr}
  .stack-head{max-width:none}
  .pagenav{grid-template-columns:1fr}
  .pagenav .next{text-align:left}
  .hero.compact.has-side .hero-grid{grid-template-columns:1fr}
  .hero-icon,.hero-logo,.hero-photo,.hero.compact.has-side .hero-art{display:none}
  .not-ready{grid-template-columns:auto minmax(0,1fr)}
  .nr-actions{grid-column:1 / -1}
  .tiles.flexrow > *{flex-basis:calc((100% - var(--s5)) / 2)}
  .fake-grid.row7 img{width:calc((100% - 3 * 16px) / 4)}
  .figure.photo::before{inset:12px -12px -12px 12px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .tiles,.tiles.cols-2,.tiles.cols-3,.tiles.cols-4{grid-template-columns:1fr}
  .tiles.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tiles.cols-5 > :last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 6px)}
  .tiles.cols-5 .symbolcard{padding:var(--s5) var(--s3) var(--s4)}
  .tiles.cols-5 .symbolcard .mark{width:80px;height:80px;margin-bottom:var(--s4)}
  .tiles.cols-5 .symbolcard h3{font-size:18px;min-height:0}
  .tiles.cols-5 .symbolcard p{font-size:13.5px}
  .tiles.flexrow > *{flex-basis:100%}
  .section.dark .tiles.cols-3 > .feature:nth-child(n){padding-left:0;border-left:0}
  .journey.compact,.journey,.steps,.steps.cols-3{grid-template-columns:1fr}
  .journey.compact{row-gap:0}
  .journey.compact .jstep{display:grid;grid-template-columns:52px 1fr;column-gap:var(--s4);padding:0 0 var(--s5)}
  .journey.compact .jstep > :not(.num){grid-column:2}
  .journey.compact .jstep .num{grid-row:1 / span 2;width:52px;height:52px;font-size:21px;margin:0}
  .journey.compact::before{display:block;left:26px;right:auto;top:26px;bottom:26px;width:1px;height:auto;background:linear-gradient(var(--gold),var(--line-strong))}
  .journey.steps-6:not(.compact)::before{left:26px}
  .journey.steps-6:not(.compact) .jstep{grid-template-columns:52px minmax(0,1fr);column-gap:var(--s4)}
  .journey.steps-6:not(.compact) .jstep .num{width:52px;height:52px;font-size:21px}
  .journey.steps-6:not(.compact) .jstep h4{padding:var(--s4) var(--s5) var(--s2)}
  .journey.steps-6:not(.compact) .jstep p{padding:0 var(--s5) var(--s4);font-size:var(--t-small)}
  .stats,.stats.cols-3{grid-template-columns:1fr}
  .stats.cols-2{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .topbar .wrap{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s4);padding-block:var(--s2)}
  .topbar-left{gap:var(--s4)}
  .topbar-right{display:none}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .brand .brand-sub{display:none}
  .brand-lock{border-left:0;padding-left:0}
  .site-header .wrap{min-height:72px}
  .map iframe{height:320px}
  .hero-contacts.pairs{grid-template-columns:1fr}
  .hero-contacts .hc{border-radius:var(--radius-lg)}
  .global-card{margin:-56px var(--s3) 0}
  body[data-page="star-d"] .tiles.cols-2.narrow-tiles{gap:var(--s7)}
  .faq summary{padding-right:60px}
  .faq .answer{padding-right:0}
  .not-ready{grid-template-columns:1fr;padding:var(--s6) var(--s5)}
  .nr-ic{display:none}
  .nr-actions .btn{white-space:normal}
  .fake-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fake-grid.row7 img{width:calc((100% - 2 * 16px) / 3)}
  .stat-callout{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .only-wide{display:none}
  .only-narrow{display:block}
  .figure.eq-stack{max-width:300px;margin-inline:auto}
  .figure.eq-stack svg{border-radius:0}
  .steps-cycle{padding:var(--s4)}
  .closing-grid{padding:var(--s7) var(--s5);border-radius:var(--radius-lg)}
  .table-wrap{border-radius:var(--radius)}
  .consent{left:0;right:0;bottom:0;max-width:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom))}
  .hero-mark::before{inset:-26px}
}

/* --- 24 sage accents (Jaison, 3 Oct 2026): sage leads, brass is the metal, saffron is a hint --- */
.eyebrow::before{background:var(--saffron)}
.feature .ficon{color:var(--sage-deep)}
.feature:hover .ficon{background:var(--ink);color:var(--saffron)}
.section.dark .tiles.cols-3 > .feature::before{color:var(--sage)}
.jstep .num{box-shadow:inset 0 0 0 1px var(--sage),0 0 0 8px var(--bg-tint)}
.jstep:hover .num{color:var(--saffron)}
.journey.compact::before{background:linear-gradient(90deg,var(--sage),var(--line-strong) 60%,var(--gold))}
.tiles.numbered > .feature:hover::before{color:var(--sage)}
.checklist li::after{border-color:var(--sage-deep)}
.closing-grid::before{background:repeating-radial-gradient(circle at 100% 50%, transparent 0 15px, var(--sage-a22) 15px 16px)}
.symbolcard:hover .mark{box-shadow:inset 0 0 0 1px var(--sage)}
.symbolcard:hover .mark::after{border-color:var(--sage)}
.feature:hover,.symbolcard:hover,.tile:hover,.pagenav a:hover{border-color:var(--sage)}
.faq summary:hover::before{box-shadow:inset 0 0 0 1px var(--sage)}
.faq details[open] summary::after{background:linear-gradient(var(--saffron),var(--saffron)) center/14px 1.5px no-repeat,linear-gradient(var(--saffron),var(--saffron)) center/1.5px 14px no-repeat}
.nav > ul > li > a::after{background:var(--sage)}
.hero-contacts .hc-lbl,.cc-lbl{color:var(--sage)}

/* Chinese pages: Poppins has no CJK glyphs, so name a Chinese face explicitly. */
:lang(zh),:lang(zh) *{font-family:'Poppins','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif}

/* Mid-width screens: longer menus (Malay, Indonesian) plus the language switch must fit on one line;
   the "Kosher Certification · <country>" line stays beside the logo (Jaison), set smaller. */
@media (min-width:1001px) and (max-width:1280px){
  .site-header .wrap{gap:var(--s4)}
  .nav{gap:var(--s4)}
  .nav ul{gap:clamp(12px,1.3vw,22px)}
  .nav a{font-size:14px}
  .nav > ul > li > a[href*="apply-for-star-k-kosher"]{padding:9px 15px}
  .brand{gap:var(--s3)}
  .brand-lock{padding-left:var(--s3)}
  .brand .brand-txt{font-size:19px}
  .brand .brand-sub{font-size:9px;letter-spacing:.12em;margin-top:5px}
  .lang{padding:6px 10px;font-size:14px}
}

/* Light closing panel: a ghost button reads navy on white (it was white-on-white). */
.closing .btn.ghost,.closing .btn.on-dark.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.closing .btn.ghost:hover,.closing .btn.on-dark.ghost:hover{background:var(--ink);color:var(--btn-ink);border-color:var(--ink)}

/* The last two menu items open their drop-down to the left, so it never runs off the screen. */
.nav > ul > li:nth-last-child(-n+2) > .sub{left:auto;right:calc(-1 * var(--s5));transform-origin:top right}

/* The menu becomes the drawer below 1000px, so the longer Malay and Indonesian menus never crowd the logo line. */
@media (max-width:1000px){
  /* backdrop-filter would make the header the containing block of the fixed menu */
  .site-header,.site-header.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--canvas)}
  .nav-toggle{display:inline-flex;position:relative;z-index:80}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(380px,90vw);
    background:var(--canvas);flex-direction:column;align-items:stretch;
    padding:104px var(--s6) var(--s7);gap:0;overflow-y:auto;z-index:70;
    transform:translateX(100%);visibility:hidden;
    transition:transform .4s var(--ease-out),visibility 0s linear .4s;
    box-shadow:-30px 0 60px var(--shadow-lift);
  }
  .nav[data-open="true"]{transform:none;visibility:visible;transition:transform .4s var(--ease-out)}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{padding:var(--s4) 0;width:100%;font-family:var(--font-display);font-size:22px;font-weight:var(--w-regular)}
  .nav > ul > li > a::after{display:none}
  .nav > ul > li > a[href*="apply-for-star-k-kosher"]{margin:var(--s3) 0;justify-content:space-between;padding:14px 22px;font-family:var(--font-head);font-size:16px}
  .nav .sub{position:static;opacity:1;visibility:inherit;transform:none;border:0;box-shadow:none;padding:0 0 var(--s3) var(--s3);min-width:0;border-radius:0;background:transparent}
  .nav .sub li{border-bottom:0}
  .nav .sub a{padding:var(--s2) 0;font-family:var(--font-body);font-size:var(--t-small);color:var(--body)}
  .nav .sub a:hover{background:transparent}
  .nav .has-sub > a .ic{margin-left:auto}
}

/* The hero label ("Welcome to STAR-K <country>") takes the site's hint colour, matching the country name in the heading (Jaison). */
.hero .eyebrow{color:var(--gold-bright)}

/* --- 23 motion, print ---------------------------------------------------------------- */

.reveal{opacity:0;transform:translateY(28px)}
html.js .reveal{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html:not(.js) .reveal,.reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}
/* The hero settles in on load. */
html.js .hero .wrap > *,html.js .hero .hero-grid > *{animation:rise 1s var(--ease-out) both}
html.js .hero .hero-grid > :nth-child(2){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media print{
  .topbar,.site-header,.nav-toggle,.footer-social,.pagenav,.gloss-toc,.skip,.consent{display:none}
  .reveal{opacity:1!important;transform:none!important}
  .section,.closing,.hero{padding-block:18px;background:none!important;color:#000}
  .hero h1,.closing h2,.section.dark h2,.section.dark h4{color:#000}
  .hero::before,.hero::after,.section.dark::before,.closing-grid::before,.site-footer::before{display:none}
  body{font-size:11pt}
}