/* ==========================================================================
   LUXIA MATERIALS — design system

   Colour / spacing / radius / motion values are transcribed from analysis.json
   (measured on the reference site at 1440x900).

   Two client-side rules override the measured typography, per project brief:
     · type family — Lato (Latin) + 고운돋움 Gowun Dodum (Hangul)
     · type size   — never below 18px, never above 30px: every heading,
                     the hero headline included, tops out at 30px
   ========================================================================== */

/* animatable, reliably-invalidating scroll variables */
@property --fb { syntax: '<number>'; inherits: true;  initial-value: 0; }
@property --p  { syntax: '<number>'; inherits: true;  initial-value: 0; }
@property --py { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root{
  --font-primary:'Lato','Gowun Dodum','Malgun Gothic','Apple SD Gothic Neo',
                 -apple-system,BlinkMacSystemFont,sans-serif;
  --font-label:var(--font-primary);

  /* colours — analysis.designSystem.colors */
  --c-text:#16262D;
  --c-muted:#52504B;
  --c-subtle:#7D7979;
  --c-gray:#6C767A;
  --c-bg:#F1F0EB;
  --c-panel:rgba(0,0,0,.03);
  --c-overlay:rgba(255,255,255,.85);
  --c-accent:#4FBD67;
  --c-accent-soft:#00C05C;
  --c-line:rgba(22,38,45,.14);

  /* radius / spacing — analysis cssVars */
  --radius-sm:calc(.4 * var(--u));      /*  5.93px @1440 */
  --radius-md:calc(.8 * var(--u));      /* 11.87px @1440 */
  --radius-lg:calc(1.6 * var(--u));     /* 23.73px @1440 */
  --space-3:calc(.8 * var(--u));
  --space-6:calc(1.6 * var(--u));
  --z-skiplink:10000;

  /* layout */
  --gutter:max(23px,calc(1.6 * var(--u)));          /* 23.73px @1440 */
  --row-indent:calc(1.5 * var(--u));   /* left indent shared by every list row */
  --row-inset:calc(.7 * var(--u));     /* matching right inset */
  --header-inset:max(14px,calc(1.2 * var(--u)));    /* 17.80px @1440 */
  --header-top:max(16px,calc(1.75 * var(--u)));     /* 26.00px @1440 */

  /* type scale — floor 18px, ceiling 30px (headings and hero alike) */
  --fs-body:18px;
  --fs-p:18px;
  --fs-p-lg:20px;
  --fs-a:18px;
  --fs-btn:18px;
  --fs-label:18px;
  --fs-footer:16px;          /* footer type, set explicitly at 16px */
  --fs-cookie:14px;          /* consent bar — two steps below the 18px body */
  --fs-chip:14px;            /* card category pill — two steps below the body */
  --fs-nav:clamp(18px,1.25vw,20px);        /* 18px @1440 */
  --fs-h4:clamp(18px,1.39vw,22px);         /* 20px @1440 */
  --fs-h2:22px;                            /* unified to 22px on request */
  --fs-list:22px;                          /* investors / careers row titles */
  --fs-display:clamp(26px,4.6698vw,30px);  /* 30px ceiling — applies to every heading, hero included */

  /* motion — analysis.designSystem.motion */
  --dur-link:.3s;
  --dur-btn:.2s;
  --dur-header:.3s;
  --dur-media:.25s;
  --dur-bleed:.05s;
  --ease:ease;
  --ease-out:ease-out;
  --ease-media:cubic-bezier(.61,1,.88,1);

  --outline-focus:2px solid #4FBD67;
  --outline-offset:2px;
}

html{
  /* Every font-size on this site is at least 18px (project rule), so the
     spacing scale cannot ride on the root font-size. --u carries it instead
     and resolves to 14.8333px at 1440px, matching the reference measurements. */
  --u:clamp(11px,1.0301vw,20px);
  font-size:18px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

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

body{
  margin:0;
  background-color:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-primary);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Hangul wraps at any character by default — keep words intact */
  word-break:keep-all;
  overflow-wrap:break-word;
}

img,video,canvas,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}

:where(a,button,input,summary):focus-visible{
  outline:var(--outline-focus);
  outline-offset:var(--outline-offset);
}

/* ---------- headings & text ---------- */
h1{
  margin:0;
  font-size:var(--fs-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.015em;
  color:var(--c-subtle);
}
h2{
  margin:0 0 calc(.53333 * var(--u));              /* 7.911px @1440 */
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.35;
  color:var(--c-text);
}
h3{margin:0;font-size:var(--fs-h2);font-weight:700;line-height:1.35;color:var(--c-text)}
h4{margin:0;font-size:var(--fs-h4);font-weight:400;line-height:1.5;color:var(--c-muted)}

.t-lead{
  margin:0 0 12px;
  font-size:var(--fs-p-lg);
  font-weight:700;
  line-height:1.6;
  color:var(--c-muted);
}
.t-body{
  margin:0;
  font-size:var(--fs-p);
  font-weight:400;
  line-height:1.65;
  color:var(--c-muted);
}
.t-body + .t-body{margin-top:12px}
.t-dim{color:var(--c-subtle)}
.t-ink{color:var(--c-text)}

/* technical label — the reference used a mono face here; the brief fixes the
   project to Lato + Gowun Dodum, so the same role is carried by tracked caps */
.label{
  font-family:var(--font-label);
  font-size:var(--fs-label);
  line-height:1.5;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:700;
}
.label--ko{text-transform:none;letter-spacing:.02em}

/* ---------- layout ---------- */
.container{
  width:100%;
  padding-inline:var(--gutter);
  margin-inline:auto;
}
.page{padding-top:85px}   /* 81px measured on the reference; +4px for the larger nav type */

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; top:calc(.53333 * var(--u)); left:calc(.53333 * var(--u));
  z-index:var(--z-skiplink);
  padding:10px 18px;
  background:#fff; color:var(--c-text);
  font-size:var(--fs-p); text-decoration:none;
  border-radius:var(--radius-sm);
  transform:translateY(-200%);
  transition:transform .15s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:fixed;
  top:var(--header-top);
  left:var(--header-inset);
  right:var(--header-inset);
  z-index:900;
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  min-height:54px;
  padding:6px 6px 6px calc(1.5 * var(--u));
  background-color:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-radius:var(--radius-md);
  box-shadow:0 1px 2px rgba(22,38,45,.04);
  max-height:80vh;
  transition:background-color var(--dur-header) var(--ease-out),
             box-shadow var(--dur-header) var(--ease-out),
             border-radius var(--dur-header) var(--ease-out),
             max-height .45s var(--ease-out);
}
.site-header.is-stuck .site-header__bar{
  background-color:rgba(255,255,255,.94);
  box-shadow:0 8px 30px rgba(22,38,45,.10);
  border-radius:var(--radius-lg);
}

/* logo ------------------------------------------------------------------- */
.logo{
  display:inline-flex;
  align-items:center;
  gap:calc(.6 * var(--u));
  text-decoration:none;
  color:var(--c-text);
}
.logo__mark{width:calc(1.9 * var(--u));height:calc(1.9 * var(--u));flex:none}
.logo__mark .lm-body{fill:var(--c-text);transition:fill var(--dur-link) var(--ease-out)}
.logo__mark .lm-ray{fill:var(--c-accent)}
.logo__word{
  font-size:clamp(22px,2vw,30px);
  font-weight:900;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
}
.logo:hover .lm-body{fill:var(--c-accent)}

/* nav -------------------------------------------------------------------- */
.header__right{display:flex;align-items:center;gap:calc(.7 * var(--u))}
.nav{position:relative;background:var(--c-panel);border-radius:999px;padding:4px}
.nav__list{display:flex;align-items:center;position:relative;z-index:1}
.nav__marker{
  position:absolute;
  top:4px; left:0; height:calc(100% - 8px);
  border-radius:999px;
  background:rgba(22,38,45,.06);
  opacity:0;
  transition:opacity var(--dur-header) var(--ease),
             transform .35s cubic-bezier(.2,.8,.2,1),
             width .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.nav.is-marked .nav__marker{opacity:1}
.nav__link{
  display:block;
  padding:7px 14px;
  font-size:var(--fs-nav);
  line-height:1.4;
  font-weight:400;
  color:var(--c-gray);
  text-decoration:none;
  border-radius:999px;
  white-space:nowrap;
  transition:color var(--dur-link) var(--ease-out),
             background-color var(--dur-link) var(--ease-out);
}
.nav__link:hover{color:var(--c-text)}
.nav__link[aria-current="page"]{background:var(--c-accent);color:#fff}
.nav__link[aria-current="page"]:hover{color:#fff}

/* header CTA ------------------------------------------------------------- */
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px calc(1.1 * var(--u));
  font-size:var(--fs-nav);
  font-weight:700;
  line-height:1.4;
  color:#fff;
  background:var(--c-accent);
  border:0;border-radius:999px;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:all var(--dur-btn) var(--ease);
}
.btn-cta:hover{background:#3ea955;transform:translateY(-1px)}
.btn-cta:active{transform:translateY(0)}

/* mobile menu ------------------------------------------------------------ */
.nav-toggle{
  display:none;
  padding:9px calc(1.1 * var(--u));
  font-size:var(--fs-nav);font-weight:700;line-height:1.4;
  color:var(--c-gray);
  background:var(--c-panel);
  border:0;border-radius:999px;cursor:pointer;
  transition:all var(--dur-btn) var(--ease);
}
.nav-toggle:hover{color:var(--c-text)}
.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:calc(1 * var(--u)) calc(.4 * var(--u)) calc(1.2 * var(--u));
  border-top:1px solid var(--c-line);
  margin-top:calc(.9 * var(--u));
}
.mobile-nav a{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.7;
  color:var(--c-muted);
  text-decoration:none;
  transition:color var(--dur-link) var(--ease-out);
}
.mobile-nav a[aria-current="page"],.mobile-nav a:hover{color:var(--c-accent)}
.mobile-nav .btn-cta{margin-top:calc(.8 * var(--u));align-self:flex-start}

@media (max-width:1199px){
  .site-header__bar{flex-wrap:wrap;padding:8px 8px 8px calc(1.2 * var(--u))}
  .nav,.header__right>.btn-cta{display:none}
  .nav-toggle{display:inline-flex}
  .site-header.is-open .mobile-nav{display:flex;width:100%}
}

/* ==========================================================================
   BUTTONS  (radius calc(.8 * var(--u)) and all .2s ease, per analysis)
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:calc(.7 * var(--u));
  padding:7px 7px 7px 16px;
  background:var(--c-overlay);
  color:var(--c-gray);
  font-size:var(--fs-btn);
  font-weight:700;
  line-height:1.55;
  text-decoration:none;
  border:0;
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:all var(--dur-btn) var(--ease);
}
.btn__icon{
  display:grid;place-items:center;
  width:30px;height:30px;flex:none;
  background:var(--c-accent);
  border-radius:var(--radius-sm);
  transition:all var(--dur-btn) var(--ease);
}
.btn__icon svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.7}
.btn:hover{background:#fff;color:var(--c-text);box-shadow:0 6px 18px rgba(22,38,45,.08)}
.btn:hover .btn__icon{background:#3ea955;transform:translateX(2px)}
.btn--ghost{background:var(--c-panel)}
.btn--ghost:hover{background:rgba(255,255,255,.9)}

/* chip / technical label pill -------------------------------------------- */
.chip{
  display:inline-block;
  padding:5px 12px;
  background:var(--c-panel);
  border-radius:var(--radius-sm);
  font-family:var(--font-label);
  font-size:var(--fs-label);
  line-height:1.5;
  letter-spacing:.04em;
  color:var(--c-gray);
}
.chip--accent{color:var(--c-accent-soft);background:rgba(0,192,92,.08)}
.chip--en{text-transform:uppercase;letter-spacing:.08em;font-weight:700}

/* ==========================================================================
   MOTION PRIMITIVES
   analysis: image opacity 0→1 over 250ms cubic-bezier(.61,1,.88,1); a
   full-bleed wrapper animates width + border-radius while scrolling; several
   elements receive inline transform/opacity from JS on scroll.
   ========================================================================== */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease-media),transform .7s var(--ease-media);
  transition-delay:var(--reveal-delay,0ms);
}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal].is-in{opacity:1;transform:none}

/* image reveal — mask wipes upward while the photo un-zooms */
.media{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--radius-md);
  background:rgba(22,38,45,.06);
}
.media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  translate:0 var(--py);
  transform:scale(1.12);
  transition:opacity var(--dur-media) var(--ease-media),transform 1.4s var(--ease-media);
}
.media.is-in img{opacity:1;transform:scale(1)}
/* extra bleed so the parallax offset never exposes an edge */
.media[data-parallax] img{height:120%;top:-10%}
.media::after{
  content:'';
  position:absolute;inset:0;
  background:var(--c-bg);
  transform-origin:bottom;
  transform:scaleY(1);
  transition:transform 1.1s var(--ease-media);
}
.media.is-in::after{transform:scaleY(0)}
.media--plain::after{display:none}

/* ---------- full bleed media ------------------------------------------- */
.fullbleed{
  --fb:0;                       /* 0 = inset & rounded, 1 = edge to edge */
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
}
.fullbleed__shrink{
  position:relative;
  width:calc(100% - (1 - var(--fb)) * 2 * var(--gutter));
  border-radius:calc((1 - var(--fb)) * var(--radius-md));
  overflow:hidden;
  transition:width var(--dur-bleed) linear,border-radius var(--dur-bleed) linear;
}
.fullbleed__wrp{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
.fullbleed__wrp video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fullbleed__wrp img{
  position:absolute;left:0;right:0;
  top:-16%;width:100%;height:132%;
  object-fit:cover;
  translate:0 var(--py);
  transform:scale(1.16);
  opacity:0;
  transition:opacity .55s var(--ease-media),transform 1.6s var(--ease-media);
}
.fullbleed.is-in .fullbleed__wrp img{opacity:1;transform:scale(1.06)}

/* ==========================================================================
   HERO (home) — the clip fills the first screen; the headline sits on it
   ========================================================================== */
.hero{
  position:relative;
  margin-top:-85px;                 /* run the video up behind the header */
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;background:#3C4A50}
.hero__video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.9) contrast(1.02);
}
.hero__bg::after{           /* scrim: keeps the white type legible on any frame */
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,38,45,.48) 0%,rgba(22,38,45,.14) 30%,
                                    rgba(22,38,45,.34) 55%,rgba(22,38,45,.68) 82%,
                                    rgba(22,38,45,.84) 100%);
}
.hero__content{
  position:relative;z-index:1;width:100%;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:end;
  padding-top:clamp(140px,15vw,220px);
  padding-bottom:clamp(38px,4.8vw,74px);
}
.hero__title{grid-column:1/9}
.hero__title{text-shadow:0 1px 24px rgba(22,38,45,.35)}
.hero__title .ink{color:#fff;display:block}
.hero__title .dim{color:rgba(255,255,255,.62);display:block}
.hero__aside{grid-column:10/13;display:flex;flex-direction:column;align-items:flex-start;gap:calc(1.35 * var(--u));padding-bottom:4px}
.hero__aside p{
  margin:0;
  font-size:var(--fs-p);
  line-height:1.6;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 14px rgba(22,38,45,.4);
}
.hero .btn{background:rgba(255,255,255,.92);color:var(--c-text)}
.hero .btn:hover{background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.22)}

/* ==========================================================================
   PAGE HERO  (about / solutions / investors / careers)
   ========================================================================== */
.page-hero{position:relative}
.page-hero__media{height:clamp(240px,32.4vw,470px);margin-bottom:clamp(28px,3.4vw,50px)}
.page-hero__media img{filter:saturate(.86)}
.page-hero__media .fullbleed__shrink{height:100%}
.page-hero__content{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:start;
  padding-bottom:clamp(60px,10vw,150px);
}
.page-hero--nomedia .page-hero__content{padding-top:max(20px,calc(6.4vw - 25px))}
.page-hero__title{grid-column:1/9}
.page-hero__title .ink{color:var(--c-text);display:block}
.page-hero__title .dim{color:var(--c-subtle);display:block}
/* the lead paragraph sits under the headline, aligned to the same left edge */
.page-hero__aside{grid-column:1/7;margin-top:calc(1.5 * var(--u))}
.page-hero__aside p{margin:0;font-size:var(--fs-p);line-height:1.7;color:var(--c-muted);text-align:left}

/* ==========================================================================
   STATEMENT BAND (home)
   ========================================================================== */
.statement{
  position:relative;
  padding:clamp(70px,17.4vw,250px) 0 clamp(70px,15vw,215px);
  background-image:linear-gradient(rgba(22,38,45,0) 18%,rgba(22,38,45,.10) 100%);
}
.statement__inner{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.statement__body{grid-column:4/11}
.statement__body p{
  margin:0 0 calc(1 * var(--u));
  font-size:var(--fs-p);         /* 18px on request (measured 27.689px @1440) */
  font-weight:400;
  line-height:1.6;
  color:var(--c-subtle);
}
.statement__body p:last-of-type{margin-bottom:0}
.statement__cta{margin-top:calc(1.9 * var(--u))}

/* ==========================================================================
   CLIENTS SECTION (home)
   ========================================================================== */
.clients{position:relative;padding-bottom:clamp(50px,7vw,100px)}
.clients__bg{
  position:absolute;top:0;left:0;right:0;
  height:clamp(340px,54vw,780px);
  overflow:hidden;--fb:1;
}
.clients__bg .fullbleed{height:100%;--fb:1}
.clients__bg .fullbleed__shrink{height:100%}
.clients__bg img{filter:saturate(.42) contrast(.97)}
.clients__bg::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(241,240,235,.26) 0%,rgba(241,240,235,.2) 52%,var(--c-bg) 100%);
}
.clients__inner{position:relative;z-index:2;padding-top:clamp(150px,36vw,520px)}
.clients__panel{
  max-width:1088px;
  margin-inline:auto;
  padding:var(--gutter);
  background:rgba(250,250,248,.94);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(22,38,45,.08);
}
.clients__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(1.2 * var(--u));
  margin:calc(1.35 * var(--u)) 0;
}
.clients__card{
  display:flex;flex-direction:column;gap:calc(1 * var(--u));
  padding:calc(1 * var(--u)) calc(1 * var(--u)) calc(1.2 * var(--u));
  background:#fff;
  border-radius:var(--radius-md);
  border:1px solid rgba(22,38,45,.05);
  transition:transform var(--dur-link) var(--ease-out),box-shadow var(--dur-link) var(--ease-out);
}
.clients__card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(22,38,45,.09)}
.clients__card p{margin:0;font-size:var(--fs-p);line-height:1.6;color:var(--c-muted)}
.clients__card .chip{align-self:flex-start;font-size:var(--fs-chip);padding:4px 11px}

/* ==========================================================================
   SYSTEMS SECTION (home) — scroll-scrubbed 3D plant build-up on <canvas>
   The reference renders a 3D model into a 1500x1500 canvas inside a sticky
   "cabin", with info cards swapping as the sequence advances. Same structure
   here, with a small hand-written 3D painter drawing the plant.
   ========================================================================== */
.systems{padding-top:clamp(80px,12vw,175px)}
.systems__title{font-size:var(--fs-display);font-weight:700;line-height:1.2;letter-spacing:-.012em;margin:0}
.systems__title .ink{color:var(--c-text);display:block}
.systems__title .dim{color:var(--c-subtle);display:block}

.frames{position:relative;height:400vh;margin-top:clamp(40px,6vw,90px)}
.frames__cabin{
  position:sticky;top:0;
  /* svh = the viewport with the mobile URL bar showing. With plain vh the pin
     is taller than what is on screen, so the info card sits below the fold and
     the scroll maths (which uses innerHeight) disagrees with the layout. */
  height:100vh;
  height:100svh;
  overflow:hidden;
  display:flex;align-items:flex-end;
  background:linear-gradient(180deg,#EDECE6 0%,#E4E3DC 62%,#DCDBD3 100%);
}
.frames__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.frames__content{position:relative;width:100%;padding-bottom:clamp(28px,4.4vw,64px)}
.frames__stack{position:relative;min-height:clamp(300px,31vw,392px)}
.frames__item{
  position:absolute;left:0;bottom:0;
  width:min(100%,400px);
  opacity:0;transform:translateY(20px);
  pointer-events:none;
  transition:opacity .55s var(--ease-media),transform .55s var(--ease-media);
}
.frames__item.is-active{opacity:1;transform:none;pointer-events:auto}
.frames__readout{
  position:absolute;top:clamp(24px,3.4vw,48px);left:var(--gutter);
  z-index:2;margin:0;
  font-size:var(--fs-label);letter-spacing:.08em;font-weight:700;
  color:var(--c-gray);
}
.frames__steps{
  position:absolute;top:clamp(24px,3.4vw,48px);right:var(--gutter);
  z-index:2;display:flex;gap:calc(.5 * var(--u));
}
.frames__step{
  width:calc(2.6 * var(--u));height:3px;border-radius:3px;
  background:rgba(22,38,45,.14);
  transition:background-color .4s var(--ease-out);
}
.frames__step.is-on{background:var(--c-accent)}

.info-card{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(.9 * var(--u));
  padding:calc(1.3 * var(--u));
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px rgba(22,38,45,.12);
}
.info-card__features{
  display:flex;flex-wrap:wrap;gap:calc(1.6 * var(--u));
  width:100%;
  padding-bottom:calc(.7 * var(--u));
  border-bottom:1px solid var(--c-line);
}
.info-card__k{margin:0;font-size:var(--fs-p);line-height:1.5;color:var(--c-gray)}
.info-card__v{margin:0;font-size:var(--fs-h2);font-weight:700;line-height:1.25;color:var(--c-text)}
.info-card__desc{margin:0;font-size:var(--fs-p);line-height:1.6;color:var(--c-muted)}

@media (max-width:1023px){
  .frames{height:320vh}
  /* Below this width the card spans the full width. Give it a row of its own
     rather than letting it overlay the canvas: the canvas then ends where the
     card begins, so the model cannot be drawn behind the panel at all and the
     script never has to guess the panel's height. */
  .frames__cabin{display:grid;grid-template-rows:1fr auto;align-items:stretch}
  .frames__canvas{position:relative;inset:auto;width:100%;height:100%;min-height:0}
  /* the cards share one grid cell so the row is exactly as tall as the tallest
     of them — absolutely positioned cards overflowed the row instead */
  .frames__stack{min-height:0;display:grid}
  .frames__item{position:relative;grid-area:1/1;left:auto;bottom:auto;width:100%}
}
@media (max-width:767px){
  .frames{height:280vh}
  /* dvh follows the viewport the phone is actually showing. With svh the pin
     stops short of the screen once the URL bar scrolls away, wasting the strip
     under the card — which is the strip the 3D band needs most. */
  .frames__cabin{height:100dvh}
  .frames__steps{display:none}
  .frames__content{padding-bottom:16px}
  .info-card__features{gap:calc(1 * var(--u));padding-bottom:calc(.45 * var(--u))}
  .info-card__desc{line-height:1.45}
  .info-card{
    padding:calc(.9 * var(--u));
    gap:calc(.5 * var(--u));
    /* blurring a full-width panel over an animating canvas is costly on a phone */
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .info-card .btn{padding-block:calc(.55 * var(--u))}
}

/* ==========================================================================
   SLIDERS
   ========================================================================== */
.slider{padding:clamp(60px,9vw,130px) 0}
.slider__nav{
  display:flex;align-items:center;justify-content:space-between;gap:calc(1 * var(--u));
  padding:5px;
  background:rgba(250,250,248,.9);
  border-radius:999px;
  border:1px solid rgba(22,38,45,.05);
}
.slider__tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.slider__tabs::-webkit-scrollbar{display:none}
.slider__tab{
  padding:8px 16px;
  font-size:var(--fs-nav);line-height:1.4;font-weight:400;
  color:var(--c-gray);
  background:transparent;border:0;border-radius:999px;
  white-space:nowrap;cursor:pointer;
  transition:all var(--dur-link) var(--ease-out);
}
.slider__tab:hover{color:var(--c-text);background:var(--c-panel)}
.slider__tab[aria-selected="true"]{background:var(--c-accent);color:#fff;font-weight:700}
.slider__controls{display:flex;align-items:center;gap:8px;flex:none;padding-right:6px}
.slider__count{font-size:var(--fs-label);letter-spacing:.06em;color:var(--c-gray);white-space:nowrap}
.slider__btn{
  width:34px;height:34px;
  font-size:var(--fs-p);
  display:grid;place-items:center;
  background:var(--c-panel);border:0;border-radius:999px;
  color:var(--c-gray);cursor:pointer;
  transition:all var(--dur-btn) var(--ease);
}
.slider__btn:hover:not(:disabled){background:var(--c-accent);color:#fff}
.slider__btn:disabled{opacity:.35;cursor:default}
.slider__btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}

.slider__viewport{margin-top:calc(1.2 * var(--u));overflow:hidden}
.slider__track{display:flex;transition:transform .65s cubic-bezier(.4,0,.2,1)}
.slide{flex:0 0 100%;min-width:0;padding:1px}
.slide__card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,44px);
  align-items:center;
  padding:clamp(20px,2.4vw,34px);
  background:rgba(250,250,248,.94);
  border:1px solid rgba(22,38,45,.05);
  border-radius:var(--radius-lg);
  min-height:clamp(300px,32vw,460px);
}
.slide__body{display:flex;flex-direction:column;gap:calc(1 * var(--u));align-items:flex-start}
.slide__index{font-size:var(--fs-label);letter-spacing:.08em;font-weight:700;color:var(--c-gray)}
.slide__text{margin:0;font-size:var(--fs-p);line-height:1.65;color:var(--c-muted)}
.slide__meta{width:100%;border-top:1px solid var(--c-line);padding-top:calc(.9 * var(--u));display:grid;gap:calc(.55 * var(--u));margin:0}
.slide__meta div{display:grid;grid-template-columns:calc(8.5 * var(--u)) 1fr;gap:calc(1 * var(--u))}
.slide__meta dt,.slide__meta dd{margin:0;font-size:var(--fs-p);line-height:1.55}
.slide__meta dt{color:var(--c-gray);letter-spacing:.02em}
.slide__meta dd{color:var(--c-muted)}
.slide__media{height:100%;min-height:clamp(200px,20vw,320px);border-radius:var(--radius-md)}
.slider__progress{margin-top:calc(1 * var(--u));height:2px;background:var(--c-line);border-radius:2px;overflow:hidden}
.slider__progress span{display:block;height:100%;background:var(--c-accent);transition:width .5s var(--ease-media)}

/* ==========================================================================
   NETWORK / MAP SECTION (home)
   ========================================================================== */
.network{padding:clamp(60px,9vw,130px) 0}
.network__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
  align-items:start;
}
.network__text{grid-column:1/5;display:flex;flex-direction:column;gap:calc(1.1 * var(--u));align-items:flex-start}
.network__stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(1 * var(--u));width:100%;margin-top:calc(.4 * var(--u))}
.network__stat{padding:calc(1 * var(--u)) calc(1.1 * var(--u));background:var(--c-panel);border-radius:var(--radius-md)}
.network__stat b{display:block;font-size:var(--fs-h2);font-weight:700;line-height:1.2;color:var(--c-text)}
.network__stat span{font-size:var(--fs-p);letter-spacing:.04em;color:var(--c-gray)}
.network__panel{grid-column:6/13}
.network__tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:calc(1 * var(--u))}
.network__map{
  position:relative;
  border-radius:var(--radius-lg);
  background:rgba(250,250,248,.9);
  border:1px solid rgba(22,38,45,.05);
  padding:clamp(16px,2vw,28px);
  overflow:hidden;
}
.network__mapInner{position:relative;width:min(100%,520px);margin-inline:auto}
.network__map svg{width:100%;height:auto;display:block}
.map-region{fill:rgba(22,38,45,.05);stroke:rgba(22,38,45,.18);stroke-width:.5;stroke-linejoin:round}
.map-dot{fill:var(--c-accent);transition:opacity .3s var(--ease-out)}
.map-ring{fill:none;stroke:var(--c-accent);stroke-width:.5;opacity:.45;transition:opacity .3s var(--ease-out)}
.map-dot.is-dim,.map-ring.is-dim{opacity:.18}
.map-badge{
  position:absolute;
  transform:translate(-50%,-50%);
  min-width:30px;height:30px;
  display:grid;place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(22,38,45,.10);
  box-shadow:0 2px 6px rgba(22,38,45,.08);
  font-size:var(--fs-p);font-weight:700;line-height:1;color:var(--c-muted);
  transition:opacity .3s var(--ease-out),color .3s var(--ease-out);
  pointer-events:none;
}
.map-badge.is-dim{opacity:.22}
.network__list{margin-top:calc(1.1 * var(--u));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(.6 * var(--u))}
.network__item{
  display:flex;gap:calc(.7 * var(--u));align-items:baseline;
  padding:calc(.85 * var(--u)) calc(1 * var(--u));background:#fff;border:1px solid rgba(22,38,45,.05);
  border-radius:var(--radius-md);
  transition:all var(--dur-link) var(--ease-out);
}
.network__item:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(22,38,45,.08)}
.network__item i{font-style:normal;font-weight:700;font-size:var(--fs-p);color:var(--c-accent-soft);flex:none}
.network__item b{display:block;font-size:var(--fs-p);font-weight:700;color:var(--c-text);line-height:1.4}
.network__item span{display:block;font-size:var(--fs-p);color:var(--c-gray);line-height:1.5}

/* ==========================================================================
   SAFETY SECTION
   ========================================================================== */
.safety{position:relative;min-height:clamp(520px,58vw,840px);display:flex;align-items:flex-end;overflow:hidden}
.safety__bg{position:absolute;inset:0;overflow:hidden;--fb:1}
.safety__bg .fullbleed{height:100%;--fb:1}
.safety__bg .fullbleed__shrink{height:100%}
.safety__bg img{filter:saturate(.78)}
.safety__bg::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(22,38,45,.05) 0%,rgba(22,38,45,.3) 100%);
}
.safety__inner{position:relative;z-index:2;width:100%;padding-block:clamp(48px,7vw,100px)}
.safety__card{
  max-width:clamp(300px,33vw,470px);
  padding:calc(1.5 * var(--u));
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:calc(1 * var(--u));align-items:flex-start;
  box-shadow:0 20px 50px rgba(22,38,45,.12);
}
.safety__card p{margin:0;font-size:var(--fs-p);line-height:1.6;color:var(--c-muted)}
.safety__actions{display:flex;flex-wrap:wrap;gap:calc(.5 * var(--u))}

/* ==========================================================================
   CTA SECTION
   ========================================================================== */
.cta{position:relative;overflow:hidden}
.cta__bg{position:absolute;inset:0;overflow:hidden;--fb:1}
.cta__bg .fullbleed{height:100%;--fb:1}
.cta__bg .fullbleed__shrink{height:100%}
.cta__bg img{filter:saturate(.4) brightness(.86) contrast(.95)}
/* scrim only where a photograph sits behind the type — the flat variant has no
   image, so the scrim would just darken the band under dark text */
.cta__bg:not(.cta__bg--flat)::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(22,38,45,.62) 0%,rgba(22,38,45,.7) 100%);
}
.cta__bg--flat{background:linear-gradient(180deg,rgba(22,38,45,0) 0%,rgba(22,38,45,.07) 100%)}
.cta__wrapper{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:calc(1.4 * var(--u));
  text-align:center;
  padding:clamp(90px,15vw,220px) var(--gutter);
}
.cta__title{max-width:26ch;margin:0;font-size:var(--fs-h2);font-weight:700;line-height:1.4;color:var(--c-text)}
.cta__desc{max-width:56ch;margin:0;font-size:var(--fs-p);line-height:1.65;color:var(--c-muted)}
.cta--onmedia .cta__title,.cta--onmedia .cta__desc{color:#fff}
.cta--big .cta__title{font-size:var(--fs-display);line-height:1.25;letter-spacing:-.012em;max-width:20ch}

/* ==========================================================================
   CONTENT ROWS (about / solutions)
   ========================================================================== */
.acc-section{padding:clamp(50px,7.5vw,110px) 0}
.acc-row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);
  align-items:start;
  padding:clamp(28px,3.4vw,50px) 0;
  border-top:1px solid var(--c-line);
}
.acc-row:last-child{border-bottom:1px solid var(--c-line)}
.acc-row__text{grid-column:1/6;display:flex;flex-direction:column;gap:calc(1 * var(--u));align-items:flex-start}
.acc-row__media{grid-column:7/13;aspect-ratio:16/10}
.acc-row--flip .acc-row__text{grid-column:8/13}
.acc-row--flip .acc-row__media{grid-column:1/7;grid-row:1}
/* The headline and lead sit on the same left edge as the list rows under
   them, while the rules stay full width — the pattern every other list on the
   site uses (.acc-item, .job, .list-acc). */
.acc-row__text > h2,
.acc-row__text > p{padding-left:var(--row-indent)}
.acc-row__text h2{max-width:calc(20ch + var(--row-indent))}
.acc-row__text p{margin:0;font-size:var(--fs-p);line-height:1.65;color:var(--c-muted)}
.acc-row__list{display:grid;gap:0;width:100%;margin-top:calc(.3 * var(--u))}
.acc-row__list li{
  display:flex;gap:calc(.9 * var(--u));align-items:baseline;
  padding:calc(.6 * var(--u)) var(--row-inset) calc(.6 * var(--u)) var(--row-indent);
  border-top:1px solid var(--c-line);
  font-size:var(--fs-p);line-height:1.55;color:var(--c-muted);
}
.acc-row__list li em{font-size:var(--fs-p);font-style:normal;font-weight:700;letter-spacing:.04em;color:var(--c-accent-soft);flex:none;min-width:calc(5.5 * var(--u))}

/* ==========================================================================
   TIMELINE (about)
   ========================================================================== */
.timeline{padding:clamp(50px,7.5vw,110px) 0}
.timeline__title{font-size:var(--fs-display);line-height:1.2;letter-spacing:-.012em;font-weight:700;margin:0 0 clamp(30px,4.4vw,64px);max-width:22ch}
.timeline__title .ink{color:var(--c-text);display:block}
.timeline__title .dim{color:var(--c-subtle);display:block}
.timeline__item{
  display:grid;
  grid-template-columns:calc(9 * var(--u)) 1fr;
  gap:clamp(16px,2.4vw,36px);
  padding:calc(1.35 * var(--u)) var(--row-inset) calc(1.35 * var(--u)) var(--row-indent);
  border-top:1px solid var(--c-line);
  transition:background-color var(--dur-link) var(--ease-out);
}
.timeline__item:last-child{border-bottom:1px solid var(--c-line)}
.timeline__item:hover{background-color:rgba(22,38,45,.04)}
.timeline__year{font-size:var(--fs-p);font-weight:700;letter-spacing:.04em;color:var(--c-accent-soft);padding-top:calc(.2 * var(--u))}
.timeline__body h3{margin:0 0 calc(.35 * var(--u));font-size:var(--fs-h4);font-weight:700;color:var(--c-text)}
.timeline__body p{margin:0;font-size:var(--fs-p);line-height:1.6;color:var(--c-muted);max-width:70ch}

/* ==========================================================================
   KEY FIGURES (about)
   ========================================================================== */
.efficiency{padding:clamp(50px,7.5vw,110px) 0}
.efficiency__wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(1.2 * var(--u))}
.eff-card{
  display:flex;flex-direction:column;gap:calc(1 * var(--u));
  padding:calc(1.2 * var(--u));
  background:rgba(250,250,248,.94);
  border:1px solid rgba(22,38,45,.05);
  border-radius:var(--radius-lg);
  transition:transform var(--dur-link) var(--ease-out),box-shadow var(--dur-link) var(--ease-out);
}
.eff-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(22,38,45,.09)}
.eff-card .chip{align-self:flex-start}
.eff-card__value{font-size:var(--fs-display);font-weight:700;line-height:1.1;letter-spacing:-.012em;color:var(--c-text)}
.eff-card__value small{font-size:var(--fs-h2);font-weight:700}
.eff-card p{margin:0;font-size:var(--fs-p);line-height:1.55;color:var(--c-muted)}

/* ==========================================================================
   ORGANISATION (about)
   ========================================================================== */
.team{padding:clamp(50px,7.5vw,110px) 0}
.team__title{margin:0 0 clamp(24px,3vw,44px);font-size:var(--fs-display);line-height:1.2;letter-spacing:-.012em;font-weight:700;color:var(--c-text)}
.team h3{margin:0 0 calc(1.2 * var(--u));font-size:var(--fs-h2);font-weight:700;color:var(--c-subtle)}
.team__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(1.2 * var(--u));margin-bottom:clamp(36px,5vw,72px)}
.person{
  display:flex;flex-direction:column;gap:calc(1 * var(--u));
  padding:calc(1.2 * var(--u));
  background:#fff;border:1px solid rgba(22,38,45,.05);border-radius:var(--radius-md);
  transition:transform var(--dur-link) var(--ease-out),box-shadow var(--dur-link) var(--ease-out);
}
.person:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(22,38,45,.08)}
/* A line mark rather than initials: three letters at the 18px floor overflow
   this box as soon as --u drops towards its lower bound. */
.person__mono{
  width:clamp(44px,calc(3.8 * var(--u)),58px);
  height:clamp(44px,calc(3.8 * var(--u)),58px);
  flex:none;
  display:grid;place-items:center;
  border-radius:var(--radius-md);
  background:linear-gradient(145deg,rgba(22,38,45,.13),rgba(22,38,45,.04));
  color:var(--c-text);
}
.person__mono svg{
  width:58%;height:58%;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.person b{display:block;font-size:var(--fs-h4);font-weight:700;color:var(--c-text);line-height:1.4}
.person span{display:block;margin-top:calc(.25 * var(--u));font-size:var(--fs-p);color:var(--c-gray);line-height:1.5}
.board__group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(.7 * var(--u))}
.board__row{
  display:flex;justify-content:space-between;gap:calc(1 * var(--u));align-items:baseline;
  padding:calc(.9 * var(--u)) calc(1.1 * var(--u));background:var(--c-panel);border-radius:var(--radius-md);
  transition:background-color var(--dur-link) var(--ease-out);
}
.board__row:hover{background:rgba(22,38,45,.06)}
.board__row b{font-size:var(--fs-p);font-weight:700;color:var(--c-text)}
.board__row span{font-size:var(--fs-p);color:var(--c-gray)}

/* ==========================================================================
   SUPPLY CHAIN (solutions)
   ========================================================================== */
.supply{padding:clamp(60px,9vw,130px) 0;background-image:linear-gradient(rgba(22,38,45,0) 12%,rgba(22,38,45,.09) 100%)}
.supply__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.supply__intro{grid-column:1/5}
.supply__intro p{margin:calc(.6 * var(--u)) 0 0;font-size:var(--fs-p);line-height:1.6;color:var(--c-muted)}
.supply__flow{grid-column:6/13;display:flex;flex-direction:column;align-items:center;gap:calc(.55 * var(--u))}
.flow-node{
  padding:calc(.6 * var(--u)) calc(1.15 * var(--u));background:#fff;border:1px solid rgba(22,38,45,.06);
  border-radius:var(--radius-md);font-size:var(--fs-p);color:var(--c-muted);text-align:center;
  transition:all var(--dur-link) var(--ease-out);
}
.flow-node:hover{border-color:var(--c-accent);color:var(--c-text);transform:translateY(-2px)}
.flow-node--accent{background:var(--c-accent);color:#fff;border-color:transparent;font-weight:700}
.flow-note{font-size:var(--fs-p);color:var(--c-gray);text-align:center;max-width:46ch;line-height:1.6}
.flow-line{width:1px;height:26px;background:var(--c-line)}
.flow-row{display:flex;flex-wrap:wrap;gap:calc(.5 * var(--u));justify-content:center}
.flow-bracket{width:min(100%,700px);height:20px;border-top:1px solid var(--c-line);border-left:1px solid var(--c-line);border-right:1px solid var(--c-line);border-radius:7px 7px 0 0}

/* ==========================================================================
   LIST ACCORDION (investors / careers)
   ========================================================================== */
.list-acc{padding:clamp(30px,5vw,72px) 0 clamp(60px,9vw,130px)}
/* investors: the disclosure list sits in a centred 60% column */
.list-acc > [data-accordion-single]{width:60%;margin-inline:auto}
.acc-item{border-top:1px solid var(--c-line)}
.acc-item:last-child{border-bottom:1px solid var(--c-line)}
.acc-item__btn{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:calc(1.4 * var(--u));
  padding:calc(1.2 * var(--u)) var(--row-inset) calc(1.2 * var(--u)) var(--row-indent);
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:inherit;
  font-size:var(--fs-list);font-weight:700;line-height:1.4;color:var(--c-text);
  transition:color var(--dur-link) var(--ease-out);
}
.acc-item__btn:hover{color:var(--c-accent-soft)}
.acc-item__sign{
  flex:none;width:30px;height:30px;display:grid;place-items:center;
  background:var(--c-panel);border-radius:var(--radius-sm);color:var(--c-gray);
  transition:all var(--dur-btn) var(--ease);
}
.acc-item__btn:hover .acc-item__sign{background:var(--c-accent);color:#fff}
.acc-item__sign svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;transition:transform .3s var(--ease-out)}
.acc-item.is-open .acc-item__sign svg{transform:rotate(45deg)}
.acc-item__panel{overflow:hidden;height:0;transition:height .45s cubic-bezier(.4,0,.2,1)}
.acc-item__inner{padding:0 var(--row-inset) calc(1.5 * var(--u)) var(--row-indent);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(1.2 * var(--u))}
.acc-item__inner p{grid-column:1/7;margin:0;font-size:var(--fs-p);line-height:1.65;color:var(--c-muted)}
.acc-item__docs{grid-column:8/13;display:grid;gap:calc(.4 * var(--u));align-content:start}
.doc-link{
  display:flex;align-items:center;justify-content:space-between;gap:calc(1 * var(--u));
  padding:calc(.7 * var(--u)) calc(.9 * var(--u));background:var(--c-panel);border-radius:var(--radius-sm);
  font-size:var(--fs-p);color:var(--c-muted);text-decoration:none;
  transition:all var(--dur-link) var(--ease-out);
}
.doc-link:hover{background:#fff;color:var(--c-text);transform:translateX(3px)}
.doc-link em{font-size:var(--fs-p);font-style:normal;color:var(--c-gray);white-space:nowrap}

/* careers */
.jobs__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,44px);border-top:1px solid var(--c-line);padding-top:calc(1.2 * var(--u))}
.jobs__head{grid-column:1/5}
.jobs__list{grid-column:6/13}
.job{border-bottom:1px solid var(--c-line)}
.job__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:calc(1.2 * var(--u));
  padding:calc(1.1 * var(--u)) var(--row-inset) calc(1.1 * var(--u)) var(--row-indent);
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-size:var(--fs-list);font-weight:400;line-height:1.4;color:var(--c-text);
  transition:color var(--dur-link) var(--ease-out);
}
.job__btn:hover{color:var(--c-accent-soft)}
.job__more{
  display:inline-flex;align-items:center;gap:calc(.6 * var(--u));flex:none;
  padding:6px 6px 6px 14px;background:var(--c-overlay);border-radius:var(--radius-md);
  font-size:var(--fs-p);line-height:1.55;color:var(--c-gray);
  transition:all var(--dur-btn) var(--ease);
}
.job__btn:hover .job__more{background:#fff;box-shadow:0 6px 16px rgba(22,38,45,.08)}
.job__panel{overflow:hidden;height:0;transition:height .45s cubic-bezier(.4,0,.2,1)}
.job__inner{padding:0 var(--row-inset) calc(1.5 * var(--u)) var(--row-indent);display:grid;gap:calc(.9 * var(--u))}
.job__inner p{margin:0;font-size:var(--fs-p);line-height:1.65;color:var(--c-muted);max-width:72ch}
.job__tags{display:flex;flex-wrap:wrap;gap:calc(.4 * var(--u))}

/* ==========================================================================
   LEGAL PAGE
   ========================================================================== */
.legal{padding:clamp(40px,6vw,88px) 0 clamp(80px,12vw,180px)}
.legal__article{max-width:720px;margin-inline:auto}
.legal__article h1{
  font-size:var(--fs-h2);font-weight:700;line-height:1.35;color:var(--c-text);
  margin:0 0 clamp(26px,3.2vw,46px);
}
.legal__body h2{margin:calc(1.9 * var(--u)) 0 calc(.6 * var(--u));font-size:var(--fs-p);font-weight:700;line-height:1.6;color:var(--c-text)}
.legal__body p{margin:0 0 calc(1.15 * var(--u));font-size:var(--fs-p);font-weight:400;line-height:1.75;color:var(--c-muted)}
.legal__body ul{margin:0 0 calc(1.15 * var(--u));display:grid;gap:calc(.35 * var(--u))}
.legal__body li{position:relative;padding-left:calc(1.1 * var(--u));font-size:var(--fs-p);line-height:1.75;color:var(--c-muted)}
.legal__body li::before{content:"";position:absolute;left:calc(.25 * var(--u));top:13px;width:4px;height:4px;border-radius:50%;background:var(--c-accent)}
.legal__body strong{font-weight:700;color:var(--c-text)}
.legal__note{color:var(--c-subtle)}

/* ==========================================================================
   FOOTER — compact band. The reference stacks oversized links down a 558px
   block; with the 16px footer type that left a lot of dead space, so the
   menu and contact lists run horizontally and the band is half as tall.
   ========================================================================== */
.site-footer{
  position:relative;
  background-color:#F1F0EA;
  background-image:linear-gradient(rgba(22,38,45,0) 20%,rgba(22,38,45,.11) 100%);
  padding:clamp(30px,4.2vw,68px) 0 clamp(16px,1.6vw,24px);
}
.site-footer__wrap{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,1.9vw,30px);
  align-items:center;
}
.footer__brand{grid-column:1/4;align-self:center}
.footer__logo{display:inline-flex;align-items:center;gap:calc(.6 * var(--u));text-decoration:none;color:var(--c-text)}
.footer__logo .lm-body{fill:var(--c-text)}
.footer__logo .lm-ray{fill:var(--c-subtle)}
.footer__logo svg{width:calc(2.1 * var(--u));height:calc(2.1 * var(--u))}
.footer__word{font-size:clamp(26px,2.2vw,30px);font-weight:900;line-height:1;letter-spacing:.01em;color:var(--c-text)}

.footer__menu{grid-column:4/9}
.footer__menu ul{display:flex;flex-wrap:wrap;gap:calc(.4 * var(--u)) calc(1.5 * var(--u))}
.footer__menu a{
  display:inline-block;
  font-size:var(--fs-footer);
  font-weight:700;
  line-height:1.5;
  color:var(--c-muted);
  text-decoration:none;
  transition:color var(--dur-link) var(--ease-out),transform var(--dur-link) var(--ease-out);
}
.footer__menu a:hover{color:var(--c-text);transform:translateY(-1px)}

.footer__contacts{grid-column:9/13;display:flex;flex-wrap:wrap;align-items:center;gap:calc(.5 * var(--u)) calc(1 * var(--u));justify-content:flex-end}
.footer__contacts .chip{font-size:var(--fs-footer);padding:3px 10px}
.footer__contacts ul{display:flex;flex-wrap:wrap;gap:calc(.4 * var(--u)) calc(1.1 * var(--u))}
.footer__contacts a{
  display:inline-block;
  font-size:var(--fs-footer);line-height:1.5;color:var(--c-muted);text-decoration:none;
  overflow-wrap:anywhere;
  transition:color var(--dur-link) var(--ease-out);
}
.footer__contacts a:hover{color:var(--c-text)}

.footer__copy{
  grid-column:1/13;
  display:flex;flex-wrap:wrap;gap:calc(.5 * var(--u)) calc(1.4 * var(--u));
  align-items:center;justify-content:space-between;
  padding-top:calc(.8 * var(--u));
  border-top:1px solid rgba(22,38,45,.09);
}
.footer__copy p{margin:0;font-size:var(--fs-footer);line-height:1.5;color:var(--c-gray)}
.footer__copy ul{display:flex;gap:calc(1.2 * var(--u))}
.footer__copy a{
  font-size:var(--fs-footer);color:var(--c-muted);text-decoration:none;
  transition:color var(--dur-link) var(--ease-out);
}
.footer__copy a:hover{color:var(--c-text)}

/* ==========================================================================
   COOKIE NOTICE
   ========================================================================== */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:#fff;
  box-shadow:0 -10px 40px rgba(22,38,45,.10);
  transform:translateY(110%);
  transition:transform .5s var(--ease-media);
}
.cookie.is-on{transform:translateY(0)}
.cookie__inner{
  display:flex;flex-wrap:wrap;gap:calc(.9 * var(--u));align-items:center;justify-content:space-between;
  padding:calc(1.45 * var(--u)) var(--gutter);   /* tuned: bar is ~30% shorter than before */
}
.cookie__text{flex:1 1 340px;max-width:76ch}
.cookie__text b{display:block;font-size:var(--fs-cookie);font-weight:700;line-height:1.5;color:var(--c-text)}
.cookie__text p{margin:2px 0 0;font-size:var(--fs-cookie);line-height:1.45;color:var(--c-muted)}
.cookie__actions{display:flex;flex-wrap:wrap;gap:calc(.45 * var(--u))}
.cookie__actions button{
  padding:6px 18px;
  font-size:var(--fs-cookie);font-weight:700;line-height:1.4;
  color:var(--c-gray);background:var(--c-panel);
  border:0;border-radius:999px;cursor:pointer;
  transition:all var(--dur-btn) var(--ease);
}
.cookie__actions button:hover{background:rgba(22,38,45,.08);color:var(--c-text)}
.cookie__actions .is-primary{background:var(--c-accent);color:#fff}
.cookie__actions .is-primary:hover{background:#3ea955;color:#fff}

/* ==========================================================================
   RESPONSIVE — analysis.json marks breakpoints as "Missing", so the standard
   ladder below is used (documented in README).
   ========================================================================== */
@media (max-width:1279px){
  .footer__menu{grid-column:4/9}
  .footer__contacts{grid-column:9/13}
  .clients__grid,.team__grid,.efficiency__wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board__group{grid-template-columns:repeat(2,minmax(0,1fr))}
  .network__text{grid-column:1/6}
  .network__panel{grid-column:6/13}
  .supply__intro{grid-column:1/5}
  .supply__flow{grid-column:5/13}
}
@media (max-width:1279px){
  .list-acc > [data-accordion-single]{width:78%}
}
@media (max-width:1023px){
  .list-acc > [data-accordion-single]{width:100%}
  /* no sideways entrance offset on narrow screens — it would push the layout wide */
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(28px)}
  .hero__title,.page-hero__title{grid-column:1/13}
  .hero__aside{grid-column:1/13;margin-top:calc(1.6 * var(--u))}
  .page-hero__aside{grid-column:1/13}
  .hero__content{align-items:start;padding-top:clamp(120px,26vw,190px)}
  .statement__body{grid-column:1/13}
  .network__text,.network__panel{grid-column:1/13}
  .acc-row__text,.acc-row__media,
  .acc-row--flip .acc-row__text,.acc-row--flip .acc-row__media{grid-column:1/13}
  .acc-row--flip .acc-row__media{grid-row:auto}
  .supply__intro,.supply__flow{grid-column:1/13}
  .jobs__head,.jobs__list{grid-column:1/13}
  .acc-item__inner p,.acc-item__docs{grid-column:1/13}
  .footer__brand{grid-column:1/13}
  .footer__menu{grid-column:1/8}
  .footer__contacts{grid-column:8/13;justify-content:flex-start}
  .slide__card{grid-template-columns:1fr}
  .slide__media{min-height:230px}
}
@media (max-width:767px){
  /* mobile: every size drops one step (2px) */
  html{font-size:16px}
  :root{
    --fs-body:16px;
    --fs-p:16px;
    --fs-p-lg:18px;
    --fs-a:16px;
    --fs-btn:16px;
    --fs-label:16px;
    --fs-footer:14px;
    --fs-cookie:12px;
    --fs-chip:12px;
    --fs-nav:16px;
    --fs-h4:16px;
    --fs-h2:20px;
    --fs-list:20px;
    --fs-display:clamp(24px,4.6698vw,28px);
  }
  .logo__word{font-size:20px}
  .footer__word{font-size:24px}
  .clients__grid,.team__grid,.efficiency__wrap,.board__group,
  .network__list,.network__stats{grid-template-columns:1fr}
  .timeline__item{grid-template-columns:1fr;gap:calc(.4 * var(--u))}
  .safety__card{max-width:none}
  .cookie__inner{align-items:flex-start}
  .cookie__actions button{flex:1 1 auto}
  .footer__menu,.footer__contacts{grid-column:1/13}
  .slide__meta div{grid-template-columns:1fr;gap:calc(.1 * var(--u))}
  .job__more span{display:none}
  .acc-row__list li{flex-direction:column;gap:calc(.2 * var(--u))}
}
@media (max-width:479px){
  .site-header__bar{padding:7px 7px 7px calc(1 * var(--u))}
  .clients__panel{padding:calc(1 * var(--u))}
}

/* reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal],.media img,.media::after,.fullbleed__wrp img{transition-duration:.01ms !important}
  [data-reveal]{opacity:1;transform:none}
  .media img{opacity:1;transform:none}
  .media::after{transform:scaleY(0)}
  .media img,.fullbleed__wrp img{translate:none !important}
  .hero__video{display:none}
  .hero__bg{background:url('/assets/images/hero-home.webp') center/cover no-repeat}
}