/* ============================================================
   Vishan Group scroll-scrubbed network site
   ============================================================ */

:root{
  /* surfaces: a real scale, not one flat near-black */
  --bg:#05070d;
  --surface-1:rgba(255,255,255,.030);
  --surface-2:rgba(255,255,255,.055);
  --surface-3:rgba(255,255,255,.085);

  --ink:#eef2fb;
  --ink-2:#c3cbe0;
  --muted:#8e9ab5;
  --faint:#6f7b96;

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.17);

  --accent:#5b7cfa;          /* live-updated by JS per section */

  /* Sora for display, Archivo for body, IBM Plex Mono for data and indices.
     Inter, Geist and Instrument Sans were all rejected: they are the faces
     every AI-generated UI converges on. Archivo is a grotesque with industrial
     signage roots, which suits the client. */
  --f-display:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* fluid type scale */
  --t-display:clamp(40px,min(9vw,15vh),128px);
  --t-h2:clamp(32px,5.6vw,68px);
  --t-h3:clamp(17px,1.6vw,20px);
  --t-lead:clamp(15px,1.35vw,19px);
  --t-body:15px;
  --t-small:13.5px;
  --t-label:10px;

  --pad:clamp(20px,5vw,80px);
  --maxw:1240px;

  /* Emil's curves: the built-in CSS easings are too weak to read as intentional */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-press:140ms;
  --dur-ui:220ms;
  --dur-reveal:620ms;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
/* `clip`, not `hidden`: `overflow-x:hidden` on body makes it a scroll
   container, which stops the fixed .stage compositing once you scroll. */
html{overflow-x:clip}
body{overflow-x:clip}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

/* ---- browser surfaces: parts we did not draw still carry the design ---- */
::selection{background:color-mix(in srgb,var(--accent) 42%,transparent);color:#fff}
html{scrollbar-color:rgba(255,255,255,.18) transparent;scrollbar-width:thin;caret-color:var(--accent)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);border-radius:99px;
  border:3px solid var(--bg);background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26);background-clip:padding-box}
:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
  transition:outline-color 1.1s ease;
}
:focus:not(:focus-visible){outline:none}
a{text-underline-offset:.22em;text-decoration-thickness:from-font}
/* numbers line up in the globe panel and anywhere else we print data */
.gp__rows,.contact__v,.sector__num,.company__index,.pillar__num,.sustain__step{font-variant-numeric:tabular-nums}

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

/* ============================================================
   Background stage
   ============================================================ */
.stage{
  position:fixed;inset:0;z-index:0;pointer-events:none;background:#03050a;
  /* own compositing layer so the fixed backdrop keeps painting while scrolling */
  transform:translateZ(0);backface-visibility:hidden;
  contain:strict;
}
/* The clip is natively blue and each section swings it toward its own accent.
   That hue rotation is applied inside the canvas raster (ctx.filter in
   js/main.js), NOT as a CSS filter here: a layer filter over a 2880x2000
   canvas re-ran on the compositor every single scroll frame. */
#bgCanvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}

/* The accent bloom is drawn into the canvas itself (js/main.js). As a separate
   mix-blend-mode:screen layer it forced a full-viewport blend composite every
   time the canvas underneath changed, which is every scroll frame. */
.stage__tint{display:none}
.stage__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 45%,transparent 0%,rgba(3,5,10,.30) 55%,rgba(3,5,10,.88) 100%),
    linear-gradient(to bottom,rgba(3,5,10,.72) 0%,transparent 22%,transparent 72%,rgba(3,5,10,.85) 100%);
}
/* inset:0, not -50%: at -50% this layer was 4x the viewport area and
   recomposited on every scroll frame for no visual gain (it tiles). */
.stage__grain{
  position:absolute;inset:0;
  opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ============================================================
   Loader
   ============================================================ */
.loader{
  position:fixed;inset:0;z-index:200;
  background:#03050a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .7s ease,visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__mark{
  font-family:var(--f-display);font-weight:800;letter-spacing:.16em;font-size:clamp(18px,2.4vw,26px);
}
.loader__mark span{
  display:block;font-size:.5em;letter-spacing:.5em;font-weight:400;
  color:var(--muted);text-align:center;margin-top:8px;
}
.loader__bar{width:min(260px,52vw);height:2px;background:rgba(255,255,255,.12);overflow:hidden}
/* scaleX, not width: width forces layout on every progress tick */
.loader__bar i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#5b7cfa,#a78bfa);
  transition:transform .25s var(--ease-out);
}
.loader__pct{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--muted);font-variant-numeric:tabular-nums}

/* ============================================================
   Nav (floating pill)
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px var(--pad);
  display:flex;justify-content:center;
  pointer-events:none;                 /* only the pill itself is interactive */
}
.nav > *{pointer-events:auto}
/* translate, not padding: padding animates layout on every scroll tick */
.nav.is-stuck .nav__pill{transform:translateY(-5px)}

.nav__pill{
  position:relative;
  width:100%;max-width:1180px;
  display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);
  padding:12px 14px 12px 22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  box-shadow:0 18px 44px -22px rgba(0,0,0,.9);
  transition:transform .4s var(--ease-out),border-color .4s ease,box-shadow .4s ease;
}
/* The blur lives on a pseudo-element, not the pill itself: backdrop-filter makes
   an element the containing block for position:fixed descendants, which would
   trap the mobile menu inside the pill instead of covering the viewport. */
.nav__pill::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;
  background:rgba(8,10,17,.62);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:background-color .4s ease;
}
.nav.is-stuck .nav__pill{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 22px 50px -24px rgba(0,0,0,1);
}
.nav.is-stuck .nav__pill::before{background:rgba(8,10,17,.88)}

/* keep brand + burger above the open mobile panel (same stacking context) */
.nav__brand,.nav__burger{position:relative;z-index:2}
.nav__brand{
  display:flex;align-items:center;gap:11px;flex:none;
  font-family:var(--f-display);font-weight:700;letter-spacing:.02em;font-size:15px;
}
.nav__brandtext em{font-style:normal;font-weight:300;color:var(--muted)}
/* The mark is a circular badge with its own gold rim, so it needs no border or
   radius of ours. The glow picks up the section accent like the rest of the
   chrome does. */
.nav__logo{
  width:30px;height:30px;flex:none;border-radius:50%;
  object-fit:contain;display:block;
  filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 55%,transparent));
  transition:filter 1.1s ease;
}

.nav__links{
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(10px,1.8vw,30px);
  margin-left:auto;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(13px,1.05vw,15px);letter-spacing:-.005em;
}
.nav__links a{
  position:relative;white-space:nowrap;
  color:#c9cee0;padding:8px 2px;
  transition:color .25s ease;
}
.nav__links a:hover{color:var(--ink)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  border-radius:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.4,0,.2,1),background-color 1.1s ease;
}
.nav__links a:hover::after{transform:scaleX(1)}
/* scroll-spy: main.js flags the section you are currently in */
.nav__links a.is-active{color:var(--ink)}
.nav__links a.is-active::after{transform:scaleX(1)}

/* flex column, not grid: auto grid rows stretch to fill the button, which pushed
   the two bars 17px apart and stopped them meeting to form the X. */
.nav__burger{
  display:none;width:44px;height:44px;flex:none;margin-left:auto;
  border:1px solid var(--line);border-radius:13px;
  background:transparent;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav__burger i{display:block;width:17px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media (max-width:1080px){
  .nav__burger{display:flex}
  .nav__pill{padding:10px 10px 10px 20px;border-radius:20px}
  .nav__links{
    position:fixed;inset:0 0 auto 0;top:0;
    padding:104px var(--pad) 36px;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;
    margin-left:0;
    background:rgba(5,7,13,.97);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%);transition:transform .5s cubic-bezier(.5,0,.2,1);
    font-size:clamp(21px,5.2vw,28px);
  }
  .nav__links.is-open{transform:translateY(0)}
  .nav__links a{padding:13px 0;width:100%}
  .nav__links a::after{left:0;right:auto;width:34px;bottom:6px}
}

/* ============================================================
   Shared type
   ============================================================ */
main{position:relative;z-index:10}

.eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin:0 0 clamp(14px,2.4vh,22px);font-weight:600;
  transition:color 1.1s ease;
}
.sec{padding:clamp(110px,17vh,190px) 0;position:relative}
.sec__title{
  font-family:var(--f-display);font-weight:700;
  font-size:var(--t-h2);line-height:1.02;letter-spacing:-.03em;
  margin:0 0 28px;text-wrap:balance;
}

/* Composition variants. Pages used to share one stacked left rail, which is
   what made every screen read from the same template. */
.sec--indent .wrap > .sec__title,
.sec--indent .wrap > .sec__lead{margin-left:clamp(0px,7vw,120px)}
.sec--center{text-align:center}
.sec--center .sec__lead{margin-inline:auto}
.sec--center .sec__title{max-width:18ch;margin-inline:auto}
/* Emphasis comes from colour and weight, never from a gradient fill. The
   per-section accent already carries the colour story. */
.hero__title em,.sec__title em,.company__name em,.page-head__title em{
  font-style:normal;color:var(--accent);
  transition:color 1.1s ease;
}
.sec__lead{max-width:64ch;color:var(--muted);font-size:var(--t-lead);margin:0 0 56px;text-wrap:pretty}

/* reveal */
/* Content is VISIBLE BY DEFAULT. The entrance animation is an enhancement that
   arms itself only once JS is running, and js/main.js disarms it if nothing has
   revealed within 3s. A script error, a throttled observer or a stalled loader
   can therefore never leave the page blank, which is exactly what happened when
   the reveal was the baseline state. */
.reveal{opacity:1;transform:none}

html.reveals-armed .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
}
html.reveals-armed .reveal.is-in{opacity:1;transform:none}

/* Hard disarm. Some revealed elements carry their own opacity transition, so
   simply dropping the armed class would leave them mid-fade if the browser is
   not painting. This forces them visible with no transition at all. */
html.reveals-off .reveal{
  opacity:1!important;transform:none!important;transition:none!important;
}

@media (prefers-reduced-motion:reduce){
  html.reveals-armed .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:104px 0 84px;position:relative;
}
.hero__title{
  font-family:var(--f-display);font-weight:800;
  /* two lines, clamped against viewport HEIGHT as well as width so the
     sub-headline and CTAs never fall below the fold on short laptops */
  font-size:clamp(40px,min(9vw,15vh),128px);
  line-height:.98;letter-spacing:-.045em;
  margin:0 0 clamp(20px,3.2vh,34px);max-width:14ch;
}
.hero__title .line{display:block}
.hero__title .line:nth-child(2){transition-delay:.09s}
.hero__title .line:nth-child(3){transition-delay:.18s}
.hero__title .line:nth-child(4){transition-delay:.27s}
.hero__sub{max-width:52ch;color:var(--muted);font-size:clamp(15px,1.5vw,19px);margin:0 0 clamp(24px,3.8vh,40px);transition-delay:.36s}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;transition-delay:.45s}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 32px;border-radius:100px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;
  /* <button> would otherwise take the UA's light buttonface and its own font */
  background:transparent;color:var(--ink);
  font-family:var(--f-display);letter-spacing:-.005em;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  transition:transform var(--dur-press) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),
             background-color var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out);
}
.btn--primary{background:var(--ink);color:#05070d}
.btn--ghost{border-color:var(--line-strong);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -14px rgba(238,242,251,.45)}
  .btn--ghost:hover{border-color:var(--accent);background:var(--surface-2);transform:translateY(-2px)}
}
/* press feedback: the interface confirming it heard you */
.btn:active{transform:scale(.97)}

.scrollcue{
  position:absolute;bottom:34px;left:var(--pad);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:12px;
}
.scrollcue span{
  width:1px;height:44px;background:linear-gradient(to bottom,var(--accent),transparent);
  animation:cue 2.1s ease-in-out infinite;transform-origin:top;
}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.5}50%{transform:scaleY(1);opacity:1}}

/* ============================================================
   Inner-page header, compact, so subpages don't each open with a
   full-screen hero the visitor has to scroll past
   ============================================================ */
.page-head{
  padding:clamp(150px,20vh,220px) 0 clamp(20px,5vh,54px);
}
.page-head__title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(34px,6.4vw,80px);line-height:1.02;letter-spacing:-.035em;
  margin:0;max-width:16ch;text-wrap:balance;
}
/* The legal suffix sits under the name as a small caption, not as part of the
   display heading. Without this it inherits the 80px title size. */
.page-head__title .suffix{
  display:block;font-family:var(--f-mono);
  font-size:clamp(11px,1vw,13px);font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:18px;
}
.page-head--center{text-align:center}
.page-head--center .page-head__title{max-width:20ch;margin-inline:auto}
.page-head--center .page-head__lead{margin-inline:auto}
.page-head__lead{
  max-width:64ch;color:var(--muted);font-size:var(--t-lead);
  margin:26px 0 0;transition-delay:.08s;text-wrap:pretty;
}

/* first content block after a page header doesn't need the full section gap */
.sec--tight{padding-top:clamp(46px,7vh,80px)}

/* ============================================================
   Next-page link
   ============================================================ */
.next-up{padding-block:clamp(30px,6vh,60px)}
.next-up a{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:26px clamp(20px,2.6vw,34px);
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .4s ease,transform .4s ease;
}
.next-up a:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-3px)}
.next-up__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.next-up__v{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,2.6vw,30px);
}
.next-up__v i{font-style:normal;color:var(--accent);transition:color 1.1s ease}
.next-up a:hover .next-up__v i{padding-left:5px}

/* ============================================================
   Landing-page quick links
   ============================================================ */
.home-links{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;
}
.home-links a{
  font-size:13.5px;font-weight:600;padding:10px 20px;border-radius:100px;
  border:1px solid var(--line);color:#c3cbe0;
  background:rgba(255,255,255,.03);
  transition:border-color .3s,color .3s,background-color .3s,transform .3s;
}
.home-links a:hover{
  border-color:var(--accent);color:var(--ink);
  background:rgba(255,255,255,.07);transform:translateY(-2px);
}

/* ============================================================
   Pillars
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px}
.pillar{
  display:block;
  position:relative;padding:34px 28px 30px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden;transition:transform .45s ease,border-color .45s ease;
}
.pillar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--c),transparent);
}
@media (hover:hover) and (pointer:fine){
.pillar:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--c) 55%,transparent)}
}
.pillar__num{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;color:var(--c)}
.pillar h3{font-family:var(--f-display);font-size:clamp(18px,1.7vw,22px);margin:16px 0 10px;font-weight:600;letter-spacing:-.01em}
.pillar p{margin:0;color:var(--muted);font-size:14.5px}
.pillar:nth-child(2){transition-delay:.1s}
.pillar:nth-child(3){transition-delay:.2s}
.pillar:active{transform:translateY(-3px) scale(.995)}
.pillar__go{
  display:inline-block;margin-top:20px;font-size:12.5px;font-weight:600;
  color:var(--c);opacity:.75;transition:opacity .35s,transform .35s;
}
.pillar:hover .pillar:active{transform:translateY(-3px) scale(.995)}
.pillar__go{opacity:1;transform:translateX(3px)}

/* ============================================================
   About Us
   ============================================================ */
.about{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,60px);align-items:start}
@media (min-width:900px){.about{grid-template-columns:1.15fr .85fr}}
.about__copy p{
  margin:0 0 20px;color:var(--muted);font-size:clamp(15px,1.3vw,18px);max-width:58ch;
}
.about__copy p:first-child{color:#c3cbe0}
.about__facts{
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
.about__facts li{
  display:flex;flex-direction:column;gap:7px;padding:20px 24px;
  background:rgba(5,7,13,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.about__k{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);transition:color 1.1s ease}
.about__v{font-size:14.5px;color:var(--ink)}
.about__facts li:nth-child(2){transition-delay:.07s}
.about__facts li:nth-child(3){transition-delay:.14s}
.about__facts li:nth-child(4){transition-delay:.21s}

/* ============================================================
   Q&A
   ============================================================ */
.faq{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:rgba(5,7,13,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  max-width:960px;
}
.faq__item + .faq__item{border-top:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;position:relative;
  padding:22px clamp(52px,6vw,68px) 22px clamp(20px,2.4vw,30px);
  font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(15px,1.4vw,18.5px);
  transition:color .3s,background-color .3s;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{background:rgba(255,255,255,.035)}
/* plus / minus toggle */
.faq__item summary::before,
.faq__item summary::after{
  content:"";position:absolute;right:clamp(20px,2.4vw,30px);top:50%;
  width:13px;height:1.5px;border-radius:2px;background:var(--accent);
  transition:transform .34s cubic-bezier(.4,0,.2,1),background-color 1.1s ease;
}
.faq__item summary::after{transform:translateY(-50%) rotate(90deg)}
.faq__item summary::before{transform:translateY(-50%)}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(0deg)}
.faq__item[open] summary{color:var(--ink)}
.faq__body{
  padding:0 clamp(52px,6vw,68px) 24px clamp(20px,2.4vw,30px);
}
.faq__body p{margin:0;color:var(--muted);font-size:15px;max-width:70ch}
@media (prefers-reduced-motion:no-preference){
  .faq__item[open] .faq__body{animation:faqIn .38s cubic-bezier(.2,.7,.2,1)}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   Sectors
   ============================================================ */
/* Bento with rhythm. Six identical icon+heading+text tiles was the page
   structure doing no work; the first sector is the one served by two companies,
   so it earns the wide cell. */
.sectors{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:680px){.sectors{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){
  .sectors{grid-template-columns:repeat(3,1fr)}
  .sector:first-child{grid-column:span 2}
  .sector:first-child h3{font-size:clamp(21px,2.4vw,30px);max-width:none;padding-right:74px}
  .sector:first-child p{font-size:16px;max-width:52ch}
  .sector:first-child .sector__ico{width:60px;height:60px;border-radius:17px}
  .sector:first-child .sector__ico svg{width:27px;height:27px}
  .sector:first-child .sector:active{transform:translateY(-4px) scale(.995)}
  .sector__num{font-size:44px}

  /* Three columns with a double-width first card leaves the sixth alone on its
     own row with two empty cells beside it. It takes the full width instead,
     laid out along the row so it reads as a closing bar rather than a card
     stretched out of shape. */
  .sector:last-child{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:30px;row-gap:7px;
    padding:28px 30px;
  }
  .sector:last-child .sector__ico{
    grid-column:1;grid-row:1 / span 2;
    width:60px;height:60px;border-radius:17px;margin-bottom:0;
  }
  .sector:last-child .sector__ico svg{width:27px;height:27px}
  .sector:last-child h3{
    grid-column:2;grid-row:1;margin:0;
    font-size:clamp(21px,2.4vw,30px);padding-right:0;
  }
  .sector:last-child p{
    grid-column:2;grid-row:2;margin:0;font-size:16px;max-width:70ch;
  }
  .sector:last-child .sector__by{
    grid-column:3;grid-row:2;
    margin-top:0;padding-top:0;border-top:0;
    padding-left:30px;border-left:1px solid var(--line);
    align-self:stretch;align-items:center;justify-content:flex-end;
  }
  /* the numeral joins the flow here rather than floating in a corner, where it
     would have collided with the served-by column */
  .sector:last-child .sector__num{
    position:static;grid-column:3;grid-row:1;
    justify-self:end;align-self:center;
    padding-left:30px;border-left:1px solid var(--line);
    width:100%;text-align:right;line-height:1.1;
  }
  /* the bloom sat in the top-right of a tall card; on a wide bar it belongs
     behind the icon */
  .sector:last-child::after{right:auto;left:-90px;top:-110px}

}

.sector{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;      /* lets the footer sit flush at the bottom */
  padding:34px 30px 30px;border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease,opacity .9s;
}
/* coloured hairline along the top edge, per sector */
.sector::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--c),transparent 70%);
  opacity:.9;
}
/* soft bloom in the card's own colour, brought up on hover */
.sector::after{
  content:"";position:absolute;z-index:-1;
  width:280px;height:280px;right:-90px;top:-110px;border-radius:50%;
  background:radial-gradient(circle,var(--c),transparent 68%);
  opacity:.10;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover) and (pointer:fine){
.sector:hover{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--c) 52%,transparent);
}
.sector:hover::after{opacity:.26;transform:scale(1.15)}
}

.sector:active{transform:translateY(-4px) scale(.995)}
.sector__num{
  position:absolute;top:26px;right:28px;
  font-family:var(--f-mono);font-weight:500;font-size:30px;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--c) 42%,transparent);
  line-height:1;pointer-events:none;
}

.sector__ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  margin-bottom:22px;color:var(--c);
  border:1px solid color-mix(in srgb,var(--c) 34%,transparent);
  background:
    radial-gradient(120% 120% at 30% 0%,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%),
    rgba(255,255,255,.03);
  box-shadow:0 8px 26px -12px var(--c);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;
}
.sector__ico svg{width:23px;height:23px}
.sector:hover .sector__ico{transform:translateY(-2px) scale(1.06);box-shadow:0 12px 32px -10px var(--c)}

.sector h3{
  font-family:var(--f-display);font-size:clamp(17px,1.5vw,19.5px);font-weight:600;
  margin:0 0 11px;letter-spacing:-.015em;padding-right:52px;
}
.sector p{margin:0 0 24px;color:var(--muted);font-size:14.5px}

/* which of the three companies covers this sector */
/* margin-top:auto keeps the "served by" row aligned across cards whose
   paragraphs run to different lengths */
.sector__by{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.sector__by-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.sector__by ul{display:flex;flex-wrap:wrap;gap:7px}
.sector__by li{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:500;color:#c3cbe0;
  padding:5px 11px;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  background:color-mix(in srgb,var(--c) 9%,transparent);
}
.sector__by li::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--c);box-shadow:0 0 9px var(--c);
}
.sector:nth-child(2){transition-delay:.06s}
.sector:nth-child(3){transition-delay:.12s}
.sector:nth-child(4){transition-delay:.18s}
.sector:nth-child(5){transition-delay:.24s}
.sector:nth-child(6){transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  .sector,.sector__ico,.sector::after{transition:none}
  .sector:hover{transform:none}
}

/* ============================================================
   Values (Approach)
   ============================================================ */
/* Four equal boxes in a strip read as filler. As numbered rows with a real
   type step they read as a position the company is taking. */
.values{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line);counter-reset:val}
.value{
  position:relative;
  display:grid;grid-template-columns:1fr;gap:8px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  transition:background-color .4s var(--ease-out),opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);
}
.value::before{
  counter-increment:val;content:counter(val,decimal-leading-zero);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent);transition:color 1.1s ease;
}
.value h3{
  font-family:var(--f-display);font-size:clamp(19px,2.3vw,27px);font-weight:600;
  margin:0;letter-spacing:-.02em;text-wrap:balance;
}
.value p{margin:0;color:var(--muted);font-size:15px;max-width:60ch}

@media (min-width:860px){
  .value{
    grid-template-columns:64px minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(20px,4vw,64px);align-items:baseline;
    padding:34px 0;
  }
}
@media (hover:hover) and (pointer:fine){
  .value:hover{background:linear-gradient(90deg,var(--surface-1),transparent 62%)}
}
.value:nth-child(2){transition-delay:.06s}
.value:nth-child(3){transition-delay:.12s}
.value:nth-child(4){transition-delay:.18s}

/* ============================================================
   Sustainability
   ============================================================ */
/* Four identical cards hid the fact that this is a loop. Rendered as a flow
   with a connecting rail, the sequence itself carries the information, which
   is the only thing that earns numbered steps. */
.sustain{
  display:grid;grid-template-columns:1fr;gap:0;
  position:relative;
}
.sustain__card{
  position:relative;padding:0 0 34px 46px;
}
/* the rail */
.sustain__card::before{
  content:"";position:absolute;left:13px;top:26px;bottom:-8px;width:1px;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 55%,transparent),transparent);
}
.sustain__card:last-child::before{display:none}
/* the node */
.sustain__card::after{
  content:"";position:absolute;left:8px;top:9px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent);
  transition:background-color 1.1s ease,box-shadow 1.1s ease;
}
.sustain__step{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent);transition:color 1.1s ease;
}
.sustain__card h3{
  font-family:var(--f-display);font-size:clamp(20px,2.2vw,26px);font-weight:600;
  margin:8px 0 9px;letter-spacing:-.02em;
}
.sustain__card p{margin:0;color:var(--muted);font-size:15px;max-width:56ch}

@media (min-width:900px){
  .sustain{grid-template-columns:repeat(4,1fr);gap:26px}
  .sustain__card{padding:38px 20px 0 0}
  /* rail turns horizontal across the top */
  .sustain__card::before{
    left:0;right:-26px;top:13px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(to right,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent) 12%,transparent));
  }
  .sustain__card::after{left:8px;top:8px}
}
.sustain__card:nth-child(2){transition-delay:.07s}
.sustain__card:nth-child(3){transition-delay:.14s}
.sustain__card:nth-child(4){transition-delay:.21s}

.sustain__note{
  margin:clamp(34px,5vh,52px) 0 0;max-width:68ch;font-size:13.5px;line-height:1.75;color:var(--faint);
  padding-left:16px;border-left:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  transition:border-color 1.1s ease;
}

/* ============================================================
   Contact
   ============================================================ */
/* fixed track counts: auto-fit stranded the 4th card alone on a second row */
.contact__grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:620px){.contact__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.contact__grid{grid-template-columns:repeat(4,1fr)}}

.contact__card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:28px 24px 26px;border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease,opacity .9s;
}
.contact__card::after{
  content:"";position:absolute;z-index:-1;
  width:240px;height:240px;right:-80px;top:-100px;border-radius:50%;
  background:radial-gradient(circle,var(--accent),transparent 68%);
  opacity:.10;transition:opacity .5s ease,background .9s ease;
}
@media (hover:hover) and (pointer:fine){
.contact__card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
}
.contact__card:hover::after{opacity:.24}
}

.contact__ico{
  display:grid;place-items:center;width:48px;height:48px;border-radius:14px;
  /* the glyph itself stays white on every card; the accent tints the tile
     around it, not the symbol */
  margin-bottom:20px;color:#fff;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  background:
    radial-gradient(120% 120% at 30% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
    rgba(255,255,255,.03);
  box-shadow:0 8px 26px -14px var(--accent);
  transition:color 1.1s ease,border-color 1.1s ease,box-shadow 1.1s ease,transform .45s cubic-bezier(.2,.7,.2,1);
}
.contact__ico svg{width:21px;height:21px}
.contact__card:hover .contact__ico{transform:translateY(-2px) scale(1.05)}

.contact__k{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px;
}
.contact__v{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(15px,1.2vw,17px);line-height:1.35;color:var(--ink);
  word-break:break-word;
}
a.contact__v{
  border-bottom:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  padding-bottom:2px;transition:border-color .3s ease,opacity .3s ease;
}
a.contact__v:hover{opacity:.8}
.contact__note{margin-top:10px;font-size:13px;color:var(--muted)}
/* pushes the card foot down so cards of unequal text length align, while the
   pill keeps its own 16px gap as a minimum */
.contact__note{margin-bottom:auto}

.contact__pill{
  margin-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;padding:8px 16px;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--ink);
  transition:background-color .3s ease,border-color .3s ease,gap .3s ease;
}
.contact__pill:hover{
  background:color-mix(in srgb,var(--accent) 20%,transparent);
  border-color:var(--accent);gap:11px;
}

.contact__cta{
  margin-top:clamp(30px,5vh,48px);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
}
.contact__cta-note{font-size:13.5px;color:var(--muted);max-width:44ch}

@media (prefers-reduced-motion:reduce){
  .contact__card,.contact__ico{transition:none}
  .contact__card:hover{transform:none}
}

/* ============================================================
   Company sections (companies.html)
   ============================================================ */
.company__grid{
  display:grid;grid-template-columns:minmax(90px,150px) 1fr;
  gap:clamp(24px,5vw,70px);align-items:start;
}
.company--alt .company__grid{direction:rtl}
.company--alt .company__grid>*{direction:ltr}

.company__id{position:sticky;top:130px;display:flex;flex-direction:column;gap:18px}
.company__index{
  font-family:var(--f-mono);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(54px,8vw,104px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:-webkit-text-stroke-color 1.1s ease;
}
.company__rule{
  height:1px;background:linear-gradient(90deg,var(--accent),transparent);
  transition:background 1.1s ease;
}

.company__name{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,4.9vw,62px);line-height:1.03;letter-spacing:-.03em;
  margin:0 0 26px;text-wrap:balance;
}
.company__name .suffix{
  display:block;font-family:var(--f-mono);
  font-size:clamp(11px,1vw,13px);font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:16px;
}
.company__lead{
  max-width:60ch;color:var(--muted);
  font-size:clamp(15px,1.35vw,18.5px);margin:0 0 34px;text-wrap:pretty;
}

.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 38px}
.chips li{
  font-size:13px;padding:8px 15px;border-radius:100px;
  border:1px solid var(--line);color:var(--ink-2);
  background:var(--surface-1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .3s var(--ease-out),color .3s var(--ease-out),background-color .3s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .chips li:hover{border-color:var(--accent);color:var(--ink);background:var(--surface-2)}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14.5px;
  color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:6px;
  transition:gap .3s var(--ease-out),border-color 1.1s ease;
}
.link-arrow span{transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover span{transform:translateX(5px)}
}

.company__aside{margin:26px 0 0;font-size:13.5px;color:var(--muted)}
.company__aside a{
  color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px;
  transition:border-color 1.1s ease,opacity .3s;
}
.company__aside a:hover{opacity:.75}

@media (max-width:760px){
  .company__grid{grid-template-columns:1fr;gap:20px}
  .company--alt .company__grid{direction:ltr}
  .company__id{position:static;flex-direction:row;align-items:center}
  .company__index{font-size:44px}
  .company__rule{flex:1}
}

/* ============================================================
   Interactive globe (landing page)
   ============================================================ */
.globe{
  display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,44px);
  align-items:center;margin-top:clamp(56px,8vh,96px);
}
@media (min-width:940px){
  .globe{grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr)}
}

.globe__stage{
  position:relative;width:100%;
  aspect-ratio:1/1;max-height:min(72vh,660px);
  margin-inline:auto;
  /* pan-y, not none: vertical swipes must still scroll the page on phones,
     while horizontal drags spin the globe. */
  touch-action:pan-y;
}
@supports not (aspect-ratio:1/1){.globe__stage{height:min(72vh,660px)}}

#globeCanvas{
  display:block;width:100%;height:100%;
  cursor:grab;
  opacity:0;transition:opacity 1s ease;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
}
.globe__stage.is-ready #globeCanvas{opacity:1}

.globe__loading{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  transition:opacity .5s ease;
}
.globe__stage.is-ready .globe__loading{opacity:0;visibility:hidden}
.globe__stage.is-failed .globe__loading{color:#e46a7f;letter-spacing:.04em;text-transform:none}

.globe__hint{
  position:absolute;left:0;right:0;bottom:-26px;
  margin:0;display:flex;align-items:center;justify-content:center;gap:10px;
  flex-wrap:wrap;text-align:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
  opacity:0;transition:opacity .8s ease .4s;
}
.globe__stage.is-ready .globe__hint{opacity:1}
.globe__hint span{width:16px;height:1px;background:var(--accent);transition:background 1.2s ease}
.globe__hint b{font-weight:inherit}
.hint--touch{display:none}
@media (hover:none){
  .hint--pointer{display:none}
  .hint--touch{display:inline}
}
@media (max-width:560px){.globe__hint{font-size:9.5px;letter-spacing:.05em}}

.globe__panel{
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(158deg,var(--surface-2),rgba(255,255,255,.012));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:clamp(22px,2.4vw,30px);
  min-height:420px;                  /* stops the layout jumping between countries */
  display:flex;flex-direction:column;
}
@media (max-width:939px){.globe__panel{min-height:300px;margin-top:26px}}

.globe__empty{margin:auto 0;color:var(--muted);font-size:14.5px;max-width:34ch}
.globe__empty span{
  display:block;font-family:var(--f-display);font-size:clamp(19px,2vw,24px);
  font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:10px;
}

.gp__head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.gp__flag{font-size:34px;line-height:1;flex:none}
.gp__head h3{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(21px,2.2vw,27px);margin:0;line-height:1.12;
}
.gp__official{margin:5px 0 0;font-size:12.5px;color:var(--muted)}
.gp__pin{
  margin-left:auto;flex:none;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid currentColor;border-radius:100px;padding:4px 10px;
}

.gp__rows{margin:0;display:grid;gap:1px;background:var(--line);border-radius:12px;overflow:hidden}
.gp__row{
  display:grid;grid-template-columns:minmax(88px,34%) 1fr;gap:14px;
  padding:11px 14px;background:rgba(5,7,13,.5);align-items:baseline;
}
.gp__row dt{
  margin:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}
.gp__row dd{margin:0;font-size:14px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.gp__row dd em{font-style:normal;color:var(--muted);font-weight:400;font-size:12px}
.gp__note{margin:14px 0 0;font-size:12px;color:var(--muted)}

/* sits inside .wrap, so it aligns with the section content */
.globe__src{
  margin:clamp(26px,4vh,40px) 0 0;
  font-size:11.5px;line-height:1.7;color:var(--faint);max-width:88ch;
}
.globe__src em{font-style:normal;color:#7f8aa4}

/* ============================================================
   Film chapters (company pages)
   ============================================================ */
.chapter{
  position:relative;
  /* The extra height beyond 100vh is the scroll the pinned clip plays out over.
     Sized so the whole 10s clip gets ~22px of scroll per frame: enough travel to
     watch it through without having to crawl down the page. */
  height:340vh;
  --p:0;                                   /* 0 to 1, written by js/chapters.js */
}
.chapter--short{height:280vh}

.chapter__stage{
  position:sticky;top:0;
  height:100svh;overflow:hidden;
  display:grid;place-items:center;
  /* rounded inset at rest, edge to edge at the midpoint, so the frame feels
     like it opens up as you reach it */
  clip-path:inset(
    calc((1 - min(var(--p) * 2.4, 1)) * 5vh) calc((1 - min(var(--p) * 2.4, 1)) * 4vw)
    round calc((1 - min(var(--p) * 2.4, 1)) * 26px)
  );
  transition:clip-path .1s linear;
}

.chapter__media{
  position:absolute;inset:0;
  transform:scale(calc(1.12 - var(--p) * 0.12));
  transform-origin:center 42%;
  will-change:transform;
}
.chapter__media canvas,
.chapter__media img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* The poster sits on top until enough frames have streamed in to scrub. If they
   never arrive the poster simply stays, so the chapter falls back to a still
   rather than to a blank panel. */
.chapter__media img{position:absolute;inset:0;z-index:1;transition:opacity .5s ease}
.chapter.is-scrubbing .chapter__media img{opacity:0}
.chapter__media canvas{position:absolute;inset:0}
.chapter.is-still .chapter__media canvas{display:none}

/* Legibility. A flat darkening would kill footage this good, so the scrim is
   directional: heavy where the caption sits, clear across the rest. */
.chapter__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top,rgba(3,5,10,.94) 0%,rgba(3,5,10,.62) 30%,rgba(3,5,10,0) 62%),
    linear-gradient(to bottom,rgba(3,5,10,.72) 0%,rgba(3,5,10,0) 34%),
    radial-gradient(120% 80% at 50% 50%,transparent 40%,rgba(3,5,10,.5) 100%);
}

.chapter__caption{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);
  margin-inline:auto;padding-inline:var(--pad);
  align-self:end;padding-bottom:clamp(56px,10vh,120px);
  /* rises as the chapter plays, then eases back out */
  transform:translateY(calc((0.5 - var(--p)) * 46px));
  opacity:clamp(0,calc((var(--p) - 0.04) * 7),1);
}
/* over bright daylight footage a thin accent label disappears, so it gets a
   chip of its own rather than relying on colour alone */
.chapter__num{
  display:inline-block;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink);
  padding:5px 11px;border-radius:100px;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  background:color-mix(in srgb,var(--accent) 26%,rgba(3,5,10,.55));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:border-color 1.1s ease,background-color 1.1s ease;
}
.chapter__title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(30px,5.4vw,66px);line-height:1.02;letter-spacing:-.035em;
  margin:14px 0 0;max-width:18ch;text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.chapter__lead{
  margin:18px 0 0;max-width:58ch;color:#d6dcea;
  font-size:clamp(15px,1.35vw,18px);text-wrap:pretty;
  text-shadow:0 1px 18px rgba(0,0,0,.7);
}

@media (max-width:720px){
  .chapter{height:290vh}
  .chapter--short{height:240vh}
  .chapter__stage{clip-path:none}
}
@media (prefers-reduced-motion:reduce){
  .chapter{height:auto}
  .chapter__stage{position:relative;height:70svh;clip-path:none;transition:none}
  .chapter__media{transform:none}
  .chapter__caption{transform:none;opacity:1}
}

/* ============================================================
   Company page facts strip
   ============================================================ */
.cfacts{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;
}
@media (min-width:640px){.cfacts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cfacts{grid-template-columns:repeat(4,1fr)}}
.cfact{
  padding:26px 24px;background:rgba(5,7,13,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:9px;
}
.cfact dt{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin:0;transition:color 1.1s ease;
}
.cfact dd{margin:0;font-size:14.5px;color:var(--ink)}

/* ============================================================
   Footer
   ============================================================ */
.foot{
  border-top:1px solid var(--line);padding:56px 0 44px;
  background:rgba(3,5,10,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.foot__grid{display:grid;gap:30px}
.foot__brand{display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:700}
.foot__brand em{font-style:normal;font-weight:300;color:var(--muted)}
.foot__cos{display:grid;gap:11px;font-size:14px;color:var(--muted)}
.foot__cos li{display:flex;align-items:center;gap:11px}
.foot__cos i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 12px var(--c)}
.foot__copy{margin:0;font-size:12.5px;color:#5c6580;letter-spacing:.02em}
@media (min-width:820px){
  .foot__grid{grid-template-columns:1fr auto;align-items:center}
  .foot__copy{grid-column:1/-1;padding-top:26px;border-top:1px solid var(--line)}
}

/* ============================================================
   Scroll progress
   ============================================================ */
.progress{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:110;background:rgba(255,255,255,.07)}
/* scaleX, not width: width relayouts on every scroll tick */
.progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),#a78bfa);
  transition:background 1.1s ease;
}

/* ============================================================
   Landing page: restored to its pre-polish look on request.
   Everything here is scoped to body[data-page="index"] so the other
   six pages keep the polish pass. The performance work is NOT undone:
   it is invisible and it fixed the scroll problem.
   ============================================================ */
body[data-page="index"]{
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}
/* gradient headlines, as they were */
body[data-page="index"] .hero__title em,
body[data-page="index"] .sec__title em{
  font-style:normal;
  background:linear-gradient(105deg,#a78bfa 0%,var(--accent) 55%,#e6ecff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  transition:background 1.1s ease;
}
/* section labels above each heading */
body[data-page="index"] .eyebrow{
  display:block;
  font-family:var(--f-body);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin:0 0 clamp(14px,2.4vh,22px);font-weight:600;
  transition:color 1.1s ease;
}
/* card numerals in the display face, not mono */
body[data-page="index"] .pillar__num{
  font-family:var(--f-display);font-size:12px;letter-spacing:.24em;
}
body[data-page="index"] .contact__k{
  font-family:var(--f-body);font-size:9.5px;letter-spacing:.24em;
}

/* ============================================================
   Trade map (Vishan Eximco page)
   ============================================================ */
/* The map sits outside .wrap in the markup, so it is already the full width of
   the page. No 100vw breakout, which would have added the scrollbar's width. */
.tmap{margin:0 0 34px;width:100%}
.tmap__stage{
  position:relative;
  overflow:hidden;
  background:#01040c;
  width:100%;
  /* width drives the height, capped so the map never eats a whole tall screen */
  height:min(76vh,54vw);
  min-height:340px;
  border-block:1px solid rgba(120,190,255,.16);
}
.tmap__canvas{display:block;width:100%;height:100%;touch-action:pan-y}

.tmap__hint{
  position:absolute;left:max(20px,calc(50vw - var(--maxw)/2 + var(--pad)));bottom:18px;margin:0;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);
  pointer-events:none;
}

/* The panel is deliberately large: this is the detail view, not a tooltip.
   It sits over the map so the cursor never has to leave the country. */
.tmap__panel{
  position:absolute;top:18px;right:max(18px,calc(50vw - var(--maxw)/2 + var(--pad)));
  width:min(370px,calc(100% - 28px));
  max-height:calc(100% - 28px);overflow:auto;
  padding:20px 22px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:16px;
  background:rgba(6,10,20,.93);
  box-shadow:0 30px 70px -34px rgba(0,0,0,1);
  pointer-events:none;                 /* never steals the hover from the map */
}
.tmap__panel[hidden]{display:none}

.tmap__head{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.tmap__flag{font-size:26px;line-height:1.1}
.tmap__name{
  display:block;font-family:var(--f-display);font-weight:700;
  font-size:19px;letter-spacing:-.02em;line-height:1.2;
}
.tmap__sub{
  display:block;margin-top:3px;font-family:var(--f-mono);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
}

.tmap__rows{margin:0;display:grid;gap:11px}
.tmap__row{display:grid;gap:2px}
.tmap__row dt{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);
}
.tmap__row dd{
  margin:0;font-family:var(--f-display);font-weight:600;
  font-size:15px;letter-spacing:-.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tmap__row dd.is-surplus{color:#2fd07a}
.tmap__row dd.is-deficit{color:#ff8a7a}
.tmap__yr{
  font-family:var(--f-mono);font-size:10px;font-weight:400;
  color:var(--faint);letter-spacing:.06em;
}

.tmap__logi{
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
  display:grid;gap:7px;
}
.tmap__logi li{
  position:relative;padding-left:14px;font-size:12.5px;color:var(--ink-2);line-height:1.5;
}
.tmap__logi li::before{
  content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--accent);
}
.tmap__none{margin:0;font-size:13px;color:var(--muted);line-height:1.55}
.tmap__src{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:11px;color:var(--faint);line-height:1.45;
}

.tmap__foot{
  margin:16px auto 0;
  width:100%;max-width:var(--maxw);
  padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:16px 26px;justify-content:space-between;
}
.tmap__pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tmap__pick > span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);
}
.tmap__select{
  font-family:var(--f-body);font-size:13px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;max-width:230px;
}
.tmap__select:focus-visible{border-color:var(--accent)}
.tmap__legend{
  margin:0;display:flex;align-items:center;gap:9px;
  font-size:12px;color:var(--muted);
}
.tmap__legend i{
  width:11px;height:11px;border-radius:3px;flex:none;
  background:rgba(245,165,36,.45);border:1px solid #f5a524;
}
.tmap.is-failed .tmap__stage{display:none}

@media (max-width:760px){
  .tmap__stage{aspect-ratio:4/3;max-height:none}
  /* on a phone the panel covers the map bottom-up instead of floating */
  .tmap__panel{
    top:auto;bottom:0;left:0;right:0;width:100%;
    max-height:66%;border-radius:16px 16px 0 0;
  }
  .tmap__hint{display:none}
}

/* ============================================================
   Dialogs (enquiry, blog writing)
   ============================================================ */
.btn--sm{padding:8px 15px;font-size:12.5px}

.dlg{
  border:none;padding:0;background:transparent;color:var(--ink);
  width:min(620px,calc(100vw - 32px));max-width:none;
  max-height:calc(100dvh - 40px);overflow:visible;
}
.dlg--wide{width:min(760px,calc(100vw - 32px))}
.dlg::backdrop{background:rgba(2,4,10,.78);backdrop-filter:blur(7px)}

.dlg__body{
  position:relative;
  max-height:calc(100dvh - 40px);overflow:auto;
  padding:clamp(24px,3.4vw,38px);
  border:1px solid color-mix(in srgb,var(--c,var(--accent)) 34%,var(--line));
  border-radius:22px;
  background:
    radial-gradient(120% 90% at 12% 0%,color-mix(in srgb,var(--c,var(--accent)) 13%,transparent),transparent 62%),
    #080c17;
  box-shadow:0 50px 110px -50px rgba(0,0,0,1);
}
.dlg__x{position:absolute;top:12px;right:12px;z-index:2}
.dlg__x button{
  width:36px;height:36px;display:grid;place-items:center;
  font-size:21px;line-height:1;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.dlg__x button:hover{color:var(--ink);border-color:var(--line-strong);background:var(--surface-3)}

.dlg__eyebrow{
  margin:0 0 12px;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c,var(--accent));
}
.dlg__title{
  margin:0 0 10px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(23px,2.6vw,31px);letter-spacing:-.028em;line-height:1.12;
}
.dlg__lead{margin:0 0 24px;color:var(--muted);font-size:14.5px;line-height:1.6;max-width:52ch}

/* ---- forms ---- */
.frm{display:grid;gap:15px}
.frm__row{display:grid;gap:15px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.frm__row{grid-template-columns:1fr}}

.fld{display:grid;gap:7px}
.fld > span{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);
}
.fld > span i{font-style:normal;text-transform:none;letter-spacing:.04em;opacity:.7}
.fld input,.fld select,.fld textarea{
  width:100%;font-family:var(--f-body);font-size:14.5px;color:var(--ink);
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.fld textarea{resize:vertical;min-height:96px;line-height:1.6}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;
  border-color:var(--c,var(--accent));
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--accent)) 18%,transparent);
}

.frm__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.frm__note{margin:2px 0 0;font-size:12px;color:var(--faint);line-height:1.55}
.frm__err{
  margin:0;font-size:13px;color:#ff9c8f;
  padding:10px 13px;border-radius:10px;
  background:rgba(255,90,70,.10);border:1px solid rgba(255,90,70,.30);
}
.frm__ok{
  margin:12px 0 0;font-size:13px;color:#8ff0bb;line-height:1.55;
  padding:11px 14px;border-radius:10px;
  background:rgba(47,208,122,.10);border:1px solid rgba(47,208,122,.30);
}

/* the dialog's primary button takes the category colour */
.dlg .btn--primary{
  background:var(--c,var(--accent));
  border-color:var(--c,var(--accent));
  color:#08101f;
}

/* ---- word counter ---- */
.wc{display:flex;align-items:center;gap:13px}
.wc__bar{
  flex:1;height:4px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.09);
}
.wc__bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--c,var(--accent));
  transition:width .18s var(--ease-out),background-color .2s ease;
}
.wc__bar i.is-over{background:#ff6b5a}
.wc__n{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--faint);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.wc__n.is-over{color:#ff9c8f}

/* ============================================================
   Blog
   ============================================================ */
.bcats{
  display:grid;gap:clamp(14px,1.5vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-bottom:clamp(40px,6vh,68px);
}

/* Every card carries its own --c. The eight hues are spaced at least 42 degrees
   apart, so no two categories share a colour. */
.bcat{
  position:relative;display:flex;flex-direction:column;
  padding:24px 22px 20px;
  border:1px solid var(--line);border-radius:18px;
  background:
    radial-gradient(130% 100% at 0% 0%,color-mix(in srgb,var(--c) 15%,transparent),transparent 58%),
    var(--surface-1);
  overflow:hidden;cursor:pointer;
  transition:transform .34s var(--ease-out),border-color .3s ease,box-shadow .34s ease;
}
.bcat::before{
  content:"";position:absolute;inset:0 auto auto 0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--c),transparent 78%);
  opacity:.85;
}
.bcat:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--c) 52%,transparent);
  box-shadow:0 26px 54px -30px color-mix(in srgb,var(--c) 60%,transparent);
}
.bcat.is-saved{animation:bsave .9s var(--ease-out)}
@keyframes bsave{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 55%,transparent)}
  100%{box-shadow:0 0 0 22px transparent}
}
.bcat__n{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;
  color:var(--c);margin-bottom:14px;
}
.bcat__name{
  margin:0 0 9px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;line-height:1.2;
}
.bcat__blurb{margin:0 0 20px;font-size:13.5px;color:var(--muted);line-height:1.55;text-wrap:pretty}
.bcat__foot{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:15px;border-top:1px solid var(--line);
}
.bcat__count{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);
}
.bcat.has-entries .bcat__count{color:var(--c)}
.bcat__go{
  font-family:var(--f-display);font-weight:700;font-size:12.5px;
  color:var(--c);background:none;border:none;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;gap:7px;
  transition:gap .25s var(--ease-out);
}
.bcat:hover .bcat__go{gap:11px}

/* ---- saved entries ---- */
.bsaved{
  padding-top:clamp(28px,4vh,42px);
  border-top:1px solid var(--line);
}
.bsaved__head{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;margin-bottom:22px;
}
.bsaved__title{
  margin:0;font-family:var(--f-display);font-weight:700;
  font-size:clamp(20px,2.1vw,26px);letter-spacing:-.026em;
}
.bsaved__acts{display:flex;gap:10px;flex-wrap:wrap}

.bposts{display:grid;gap:14px}
.bpost{
  padding:20px 22px;border-radius:16px;
  border:1px solid var(--line);
  border-left:3px solid var(--c);
  background:var(--surface-1);
}
.bpost__top{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  justify-content:space-between;margin-bottom:9px;
}
.bpost__cat{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--c);
}
.bpost__meta{
  font-family:var(--f-mono);font-size:10px;color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.bpost__title{
  margin:0 0 9px;font-family:var(--f-display);font-weight:700;
  font-size:17px;letter-spacing:-.02em;line-height:1.25;
}
.bpost__body{
  margin:0 0 14px;font-size:14px;color:var(--ink-2);line-height:1.65;
  white-space:pre-wrap;text-wrap:pretty;
}
.bpost__acts{display:flex;gap:12px}
.bpost__btn{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);background:none;border:none;padding:0;cursor:pointer;
  transition:color .2s ease;
}
.bpost__btn:hover{color:#ff9c8f}

@media (prefers-reduced-motion:reduce){
  .bcat,.bcat__go,.wc__bar i{transition:none}
  .bcat:hover{transform:none}
  .bcat.is-saved{animation:none}
}

/* honeypot: off-screen rather than display:none, which some bots skip */
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* an inline button that reads as a link, used in the send-failure fallback */
.lnk{
  background:none;border:none;padding:0;cursor:pointer;font:inherit;
  color:var(--ink);text-decoration:underline;text-underline-offset:.2em;
}
.frm__err--after{margin-top:12px}

/* published feed and submission states */
.bfeed{padding-top:clamp(28px,4vh,42px);border-top:1px solid var(--line);margin-bottom:clamp(30px,5vh,50px)}
.bfeed .bsaved__title{margin:0 0 18px}
.bfeed__note{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.bpost--pub{background:var(--surface-2)}
.bpost__by{
  margin:0 0 14px;font-family:var(--f-mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);
}
.bpost__by span::before{content:" \00b7 "}
.bpost__state{
  margin:0 0 12px;display:inline-block;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c);padding:4px 10px;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}

/* confirmation toast after a submission */
.btoast{
  position:fixed;left:50%;bottom:26px;z-index:300;
  transform:translate(-50%,18px);opacity:0;
  max-width:min(460px,calc(100vw - 32px));
  padding:14px 20px;border-radius:14px;
  border:1px solid color-mix(in srgb,#2fd07a 40%,var(--line));
  background:rgba(8,14,22,.96);
  box-shadow:0 24px 60px -28px rgba(0,0,0,1);
  font-size:14px;line-height:1.5;
  transition:transform .34s var(--ease-out),opacity .34s var(--ease-out);
}
.btoast.is-in{transform:translate(-50%,0);opacity:1}
@media (prefers-reduced-motion:reduce){.btoast{transition:none}}