/* ==========================================================================
   WIDEKHAN — Global Trade (Chemicals / Food & Agri)
   Design system :: light corporate
   ========================================================================== */

/* --- Fonts (self-hosted, already in /fonts) ------------------------------ */
@font-face { font-family:'NeueHaas'; src:url('../../fonts/NeueHaasDisplayThin.woff2') format('woff2'); font-weight:200; font-display:swap; }
@font-face { font-family:'NeueHaas'; src:url('../../fonts/NeueHaasDisplayLight.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'NeueHaas'; src:url('../../fonts/NeueHaasDisplayRoman.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'NeueHaas'; src:url('../../fonts/NeueHaasDisplayMediu.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'NeueHaas'; src:url('../../fonts/NeueHaasDisplayBold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'NeueHaas'; src:url('../../fonts/NeueHaasDisplayBlack.woff2') format('woff2'); font-weight:900; font-display:swap; }

/* --- Tokens -------------------------------------------------------------- */
:root{
  --ink:#0A1A2F;
  --ink-2:#28394D;
  --muted:#5D6E80;
  --brand:#005B8F;
  --brand-deep:#003A5C;
  --brand-soft:#E7F0F7;
  --accent:#00A88E;
  --accent-soft:#E4F5F1;
  --paper:#FFFFFF;
  --surface:#F5F8FA;
  --surface-2:#EDF2F6;
  --line:#DDE6ED;
  --line-strong:#C4D2DE;

  --wrap:1200px;
  --radius:4px;
  --radius-lg:8px;
  --shadow:0 1px 2px rgba(10,26,47,.05), 0 8px 24px rgba(10,26,47,.06);
  --shadow-lg:0 2px 4px rgba(10,26,47,.06), 0 20px 48px rgba(10,26,47,.10);
  --ease:cubic-bezier(.22,.61,.36,1);

  --sans:'NeueHaas','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

/* --- Typography ---------------------------------------------------------- */
h1,h2,h3,h4{ color:var(--ink); font-weight:500; line-height:1.15; letter-spacing:-.02em; }
h1{ font-size:clamp(2.5rem,5.2vw,4.25rem); font-weight:400; letter-spacing:-.035em; }
h2{ font-size:clamp(1.85rem,3.4vw,2.75rem); letter-spacing:-.03em; }
h3{ font-size:clamp(1.15rem,1.8vw,1.4rem); font-weight:500; }
h4{ font-size:1.0625rem; font-weight:500; }
p{ max-width:68ch; }
strong{ font-weight:500; color:var(--ink); }

.eyebrow{
  display:inline-block; font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brand);
  margin-bottom:1.25rem;
}
.eyebrow--accent{ color:var(--accent); }
.lede{ font-size:clamp(1.0625rem,1.5vw,1.25rem); font-weight:300; color:var(--muted); }

/* --- Layout -------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.section{ padding-block:clamp(4.5rem,9vw,8rem); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.section--surface{ background:var(--surface); }
.section--ink{ background:var(--ink); color:#B9C6D4; }
.section--ink h2,.section--ink h3,.section--ink h4{ color:#fff; }
.section--ink .eyebrow{ color:var(--accent); }

.head{ max-width:760px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.head p{ margin-top:1.25rem; }
.head--center{ margin-inline:auto; text-align:center; }
.head--center p{ margin-inline:auto; }

.grid{ display:grid; gap:1.5rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.875rem 1.75rem; border:1px solid transparent; border-radius:var(--radius);
  font-size:.9375rem; font-weight:500; letter-spacing:.01em; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn svg{ width:16px; height:16px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-deep); }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:var(--accent); color:#fff; }
.btn--outline-light{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn--outline-light:hover{ border-color:#fff; background:#fff; color:var(--ink); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2.25rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9375rem; font-weight:500; color:var(--brand);
}
.link-arrow svg{ width:15px; height:15px; transition:transform .25s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* --- Header -------------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr__in{ display:flex; align-items:center; gap:2.5rem; height:74px; }

.logo{ display:flex; align-items:center; gap:.625rem; flex-shrink:0; }
.logo__mark{ width:26px; height:26px; }
.logo__type{
  font-size:1.1875rem; font-weight:700; letter-spacing:.055em;
  color:var(--ink); line-height:1;
}

.nav{ display:flex; align-items:center; gap:2rem; margin-left:auto; }
.nav a{
  position:relative; font-size:.9375rem; font-weight:400; color:var(--ink-2);
  padding-block:.25rem; transition:color .2s var(--ease);
}
.nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hdr__side{ display:flex; align-items:center; gap:1.25rem; }
.lang{ display:flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:500; }
.lang a{ color:var(--muted); transition:color .2s; }
.lang a:hover{ color:var(--ink); }
.lang [aria-current]{ color:var(--brand); }
.lang__sep{ color:var(--line-strong); }

.burger{
  display:none; width:40px; height:40px; border:1px solid var(--line);
  border-radius:var(--radius); background:transparent; cursor:pointer;
  align-items:center; justify-content:center;
}
.burger span{
  display:block; width:17px; height:1.5px; background:var(--ink); position:relative;
  transition:background .2s;
}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink);
  transition:transform .28s var(--ease);
}
.burger span::before{ top:-5.5px; }
.burger span::after{ top:5.5px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-5.5px) rotate(-45deg); }

/* --- Hero ---------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(168deg,#F7FAFC 0%,#EAF1F7 52%,#E2EFF1 100%);
  border-bottom:1px solid var(--line);
}
.hero__in{ position:relative; z-index:2; padding-block:clamp(5rem,11vw,9.5rem); }
.hero__title{ max-width:17ch; }
.hero__title em{ font-style:normal; color:var(--brand); }
.hero p{ margin-top:1.75rem; font-size:clamp(1.0625rem,1.6vw,1.3125rem); font-weight:300; color:var(--ink-2); max-width:56ch; }
.hero--sub .hero__in{ padding-block:clamp(3.5rem,7vw,5.5rem); }
.hero--sub .hero__title{ max-width:22ch; }

/* decorative molecular / flow lattice */
.hero__art{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.5;
}
.hero__art svg{ position:absolute; right:-4%; top:50%; transform:translateY(-50%); width:min(680px,58%); height:auto; }

/* --- Breadcrumb ---------------------------------------------------------- */
.crumb{ display:flex; gap:.5rem; font-size:.8125rem; color:var(--muted); margin-bottom:1.5rem; }
.crumb a:hover{ color:var(--brand); }

/* --- Cards --------------------------------------------------------------- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem; transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-3px); }
.card h3{ margin-bottom:.75rem; }
.card p{ font-size:.9375rem; color:var(--muted); }
.card__num{
  font-size:.75rem; font-weight:500; letter-spacing:.14em; color:var(--brand);
  display:block; margin-bottom:1rem;
}

/* Sector card (2 business units) */
.sector{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.sector:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.sector__band{ height:5px; background:var(--brand); }
.sector--agri .sector__band{ background:var(--accent); }
.sector__body{ padding:2.5rem; display:flex; flex-direction:column; flex:1; }
.sector__icon{ width:44px; height:44px; margin-bottom:1.5rem; color:var(--brand); }
.sector--agri .sector__icon{ color:var(--accent); }
.sector__body p{ font-size:.9375rem; color:var(--muted); margin-top:.75rem; }
.sector__tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.75rem 0 2rem; }
.tag{
  font-size:.75rem; font-weight:500; letter-spacing:.02em; padding:.375rem .75rem;
  border-radius:100px; background:var(--brand-soft); color:var(--brand-deep);
}
.sector--agri .tag{ background:var(--accent-soft); color:#00705E; }
.sector__foot{ margin-top:auto; }

/* --- Stats --------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-block:1px solid var(--line); }
.stat{ background:var(--paper); padding:2.5rem 1.75rem; }
.stat__n{ font-size:clamp(2rem,3.4vw,2.75rem); font-weight:300; color:var(--ink); letter-spacing:-.03em; line-height:1; }
.stat__l{ font-size:.8125rem; color:var(--muted); margin-top:.75rem; letter-spacing:.02em; }

/* --- Product category table --------------------------------------------- */
.cats{ border-top:1px solid var(--line); }
.cat{
  display:grid; grid-template-columns:56px 1fr 1.35fr; gap:2rem; align-items:start;
  padding:2rem 1rem; border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.cat:hover{ background:var(--surface); }
.cat__i{ font-size:.8125rem; font-weight:500; color:var(--brand); padding-top:.3rem; letter-spacing:.06em; }
.cat--agri .cat__i{ color:var(--accent); }
.cat__n h3{ font-size:1.0625rem; font-weight:500; }
.cat__n span{ display:block; font-size:.8125rem; color:var(--muted); margin-top:.375rem; }
.cat__d{ font-size:.9375rem; color:var(--muted); }
.cat__d ul{ display:flex; flex-wrap:wrap; gap:.5rem .75rem; }
.cat__d li{ position:relative; padding-left:.875rem; }
.cat__d li::before{
  content:''; position:absolute; left:0; top:.6em; width:4px; height:4px;
  border-radius:50%; background:var(--line-strong);
}

/* --- Process / steps ----------------------------------------------------- */
.steps{ counter-reset:s; display:grid; gap:0; }
.step{
  counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:2rem;
  padding:2rem 0; border-bottom:1px solid rgba(255,255,255,.10);
}
.step:last-child{ border-bottom:0; }
.step::before{
  content:'0' counter(s); font-size:.8125rem; font-weight:500; letter-spacing:.1em;
  color:var(--accent); padding-top:.4rem;
}
.step h3{ margin-bottom:.5rem; }
.step p{ font-size:.9375rem; color:#93A5B6; }

/* --- Feature list -------------------------------------------------------- */
.flist{ display:grid; gap:1.75rem; }
.fitem{ display:grid; grid-template-columns:auto 1fr; gap:1.125rem; }
.fitem__i{ width:22px; height:22px; color:var(--accent); flex-shrink:0; margin-top:.25rem; }
.fitem h3{ font-size:1.0625rem; font-weight:500; margin-bottom:.375rem; }
.fitem p{ font-size:.9375rem; color:var(--muted); }

/* --- Split media --------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; }
.split__art{
  aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(150deg,var(--brand-deep),var(--brand) 55%,var(--accent));
  display:grid; place-items:center; position:relative;
}
.split__art svg{ width:70%; height:auto; opacity:.9; }

/* --- CTA band ------------------------------------------------------------ */
.cta{ background:var(--ink); color:#B9C6D4; position:relative; overflow:hidden; }
.cta::after{
  content:''; position:absolute; right:-8%; top:-40%; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle,rgba(0,168,142,.20),transparent 68%);
}
.cta__in{ position:relative; z-index:2; text-align:center; padding-block:clamp(4rem,8vw,6rem); }
.cta h2{ color:#fff; margin-inline:auto; max-width:20ch; }
.cta p{ margin:1.25rem auto 0; max-width:52ch; font-weight:300; }
.cta .btn-row{ justify-content:center; }

/* --- Forms --------------------------------------------------------------- */
.form{ display:grid; gap:1.375rem; }
.field label{
  display:block; font-size:.8125rem; font-weight:500; color:var(--ink);
  margin-bottom:.5rem; letter-spacing:.02em;
}
.field .req{ color:#C0392B; }
.field input,.field select,.field textarea{
  width:100%; padding:.8125rem 1rem; background:var(--paper);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  font-size:.9375rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);
}
.field textarea{ resize:vertical; min-height:140px; }
.field__hint{ font-size:.8125rem; color:var(--muted); margin-top:.5rem; }
.form-note{ font-size:.8125rem; color:var(--muted); }

/* --- Contact info blocks ------------------------------------------------- */
.cinfo{ display:grid; gap:2rem; }
.cinfo__row{ padding-bottom:1.75rem; border-bottom:1px solid var(--line); }
.cinfo__row:last-child{ border-bottom:0; padding-bottom:0; }
.cinfo__k{ font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:.625rem; }
.cinfo__v{ font-size:1rem; color:var(--ink); }
.cinfo__v a:hover{ color:var(--brand); }

/* --- Footer -------------------------------------------------------------- */
.ftr{ background:var(--ink); color:#8FA1B3; padding-block:4.5rem 2rem; font-size:.875rem; }
.ftr__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,255,255,.10); }
.ftr .logo__type{ color:#fff; }
.ftr__brand p{ margin-top:1.25rem; font-size:.875rem; max-width:34ch; color:#7A8DA0; }
.ftr h4{ font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:1.25rem; }
.ftr li{ margin-bottom:.6875rem; }
.ftr a{ color:#8FA1B3; transition:color .2s; }
.ftr a:hover{ color:#fff; }
.ftr__btm{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:center; padding-top:2rem; font-size:.8125rem; color:#6B7E91;
}

/* --- Reveal animation ---------------------------------------------------- */
:where(.motion) .rv{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .ftr__top{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem 28px 1.5rem; margin:0;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
    max-height:calc(100vh - 74px); overflow-y:auto;
  }
  .nav.open{ opacity:1; transform:none; pointer-events:auto; }
  .nav a{ padding:.9375rem 0; border-bottom:1px solid var(--line); font-size:1rem; }
  .nav a::after{ display:none; }
  .hdr__in{ gap:1rem; }
  .hdr__side{ margin-left:auto; }

  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
  .split__art{ order:-1; aspect-ratio:16/10; }
  .cat{ grid-template-columns:1fr; gap:1rem; padding:1.75rem .25rem; }
  .cat__i{ padding-top:0; }
  .hero__art{ opacity:.28; }
  .sector__body{ padding:2rem; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .nav{ padding-inline:20px; }
  .stats{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr; gap:2.25rem; }
  .card{ padding:1.75rem; }
  .btn{ width:100%; justify-content:center; }
  .btn-row{ flex-direction:column; }
}

/* --- Print --------------------------------------------------------------- */
@media print{
  .hdr,.ftr,.cta,.burger{ display:none; }
  body{ color:#000; font-size:12pt; }
}

/* ==========================================================================
   v2 — Photography components (reference: Brenntag/Azelis/LDC pattern)
   ========================================================================== */

/* --- Photo hero ----------------------------------------------------------- */
.hero--photo{
  background-color:var(--ink);
  background-size:cover; background-position:center;
  border-bottom:0;
}
.hero--photo::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(6,16,30,.86) 0%, rgba(6,16,30,.62) 48%, rgba(6,16,30,.22) 100%);
}
.hero--photo .hero__in{ position:relative; z-index:2; }
.hero--photo h1{ color:#fff; }
.hero--photo p{ color:#D9E3ED; }
.hero--photo .eyebrow{ color:#6FD3BF; }
.hero--photo .crumb,.hero--photo .crumb a{ color:#9FB2C4; }
.hero--photo .crumb a:hover{ color:#fff; }
.hero--photo .btn--ghost{ border-color:rgba(255,255,255,.4); color:#fff; }
.hero--photo .btn--ghost:hover{ border-color:#fff; background:#fff; color:var(--ink); }
.hero--home .hero__in{ min-height:min(72vh,640px); display:flex; flex-direction:column; justify-content:center; }

/* --- Image cards (industries grid) ---------------------------------------- */
.imgcard{
  position:relative; display:flex; align-items:flex-end;
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3;
  background:var(--ink);
}
.imgcard>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), opacity .4s var(--ease);
}
.imgcard:hover>img{ transform:scale(1.06); }
.imgcard::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(6,16,30,.88) 0%, rgba(6,16,30,.34) 52%, rgba(6,16,30,.06) 100%);
}
.imgcard__body{ position:relative; z-index:2; padding:1.375rem 1.5rem; width:100%; }
.imgcard__body h3{ color:#fff; font-size:1.0938rem; letter-spacing:-.01em; }
.imgcard__body p{
  color:#C4D1DE; font-size:.8438rem; line-height:1.5; margin-top:.375rem;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .45s var(--ease), opacity .35s var(--ease);
}
.imgcard:hover .imgcard__body p{ max-height:5em; opacity:1; }
@media (hover:none){ .imgcard .imgcard__body p{ max-height:none; opacity:1; } }

/* --- Sector card with photo top ------------------------------------------- */
.sector__img{ aspect-ratio:16/7; overflow:hidden; }
.sector__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.sector:hover .sector__img img{ transform:scale(1.045); }

/* --- Split photo ----------------------------------------------------------- */
.split__photo{ aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.split__photo img{ width:100%; height:100%; object-fit:cover; }

/* --- Value chain strip ------------------------------------------------------ */
.chain{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.chain__step{ padding:1.75rem 1.5rem; background:var(--paper); border-left:1px solid var(--line); position:relative; }
.chain__step:first-child{ border-left:0; }
.chain__step .n{ font-size:.6875rem; font-weight:500; letter-spacing:.14em; color:var(--brand); display:block; margin-bottom:.75rem; }
.chain__step h3{ font-size:.9688rem; margin-bottom:.375rem; }
.chain__step p{ font-size:.8125rem; color:var(--muted); }
@media (max-width:1024px){ .chain{ grid-template-columns:1fr 1fr; } .chain__step{ border-top:1px solid var(--line); } .chain__step:nth-child(-n+2){ border-top:0; } .chain__step:nth-child(odd){ border-left:0; } }
@media (max-width:560px){ .chain{ grid-template-columns:1fr; } .chain__step{ border-left:0 !important; border-top:1px solid var(--line); } .chain__step:first-child{ border-top:0; } }

/* 7-item nav fit on narrow desktop */
@media (max-width:1160px) and (min-width:861px){
  .nav{ gap:1.25rem; }
  .nav a{ font-size:.875rem; }
  .hdr__in{ gap:1.5rem; }
}

/* --- Real logo (recovered brand assets) ----------------------------------- */
.logo__sym{ height:26px; width:auto; display:block; }
.logo__word{ height:14px; width:auto; display:block; }
.ftr .logo__sym{ height:24px; }
.ftr .logo__word{ height:13px; }
@media (max-width:560px){ .logo__word{ height:12px; } }

/* ==========================================================================
   v3 — "Trade-desk editorial" restyle
   Calibrated against live measurements: Vitol (76px display type,
   12px/1px-tracked microlabels) and LDC (radius-0 sharpness, light weights).
   ========================================================================== */

/* --- Sharper geometry, global ------------------------------------------- */
:root{
  --radius:0;
  --radius-lg:0;
}

/* --- Display typography --------------------------------------------------- */
h1{ font-size:clamp(3rem,7vw,5.5rem); font-weight:300; letter-spacing:-.045em; line-height:1.02; }
h2{ font-size:clamp(2.1rem,4.2vw,3.4rem); font-weight:300; letter-spacing:-.035em; line-height:1.06; }
h3{ font-weight:500; }
.lede{ font-size:clamp(1.0625rem,1.45vw,1.1875rem); font-weight:300; line-height:1.6; }

.hero--home .hero__title{ font-size:clamp(3.25rem,8vw,6.25rem); max-width:15ch; }
.hero--home .hero__in{ min-height:min(80vh,720px); }

/* --- Microlabels: tiny, tracked, with leading rule ------------------------ */
.eyebrow{
  font-size:.6875rem; letter-spacing:.24em; margin-bottom:1.5rem;
  display:inline-flex; align-items:center; gap:.875rem;
}
.eyebrow::before{
  content:''; width:2.25rem; height:1px; background:currentColor; opacity:.55; flex-shrink:0;
}
.head--center .eyebrow::before,.head--center .eyebrow::after{ content:''; width:2.25rem; height:1px; background:currentColor; opacity:.55; }
.card__num,.cat__i,.chain__step .n,.stat__l{ letter-spacing:.2em; font-size:.6875rem; }

/* --- Editorial two-column section heads ----------------------------------- */
@media (min-width:861px){
  .head:not(.head--center){
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
    grid-template-areas:"eb eb" "ttl lede";
    column-gap:clamp(3rem,6vw,6rem);
    align-items:end;
  }
  .head:not(.head--center) .eyebrow{ grid-area:eb; }
  .head:not(.head--center) h2{ grid-area:ttl; }
  .head:not(.head--center) p{ grid-area:lede; margin-top:0; padding-bottom:.375rem; }
}

/* --- Nav: tracked caps ----------------------------------------------------- */
.nav a{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; }
.hdr{ transition:box-shadow .3s var(--ease), background .3s var(--ease); }
.hdr--scrolled{ box-shadow:0 1px 0 var(--line), 0 14px 34px rgba(10,26,47,.08); background:rgba(255,255,255,.94); }
@media (max-width:860px){ .nav a{ font-size:.8125rem; letter-spacing:.1em; } }

/* --- Buttons: squared, tracked caps ---------------------------------------- */
.btn{
  border-radius:0; padding:1rem 1.875rem;
  font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
}
.link-arrow{ font-size:.8125rem; letter-spacing:.1em; text-transform:uppercase; }

/* --- Cards: hairline editorial columns ------------------------------------- */
.card{
  background:transparent; border:0; border-top:1px solid var(--line-strong);
  border-radius:0; padding:1.875rem 0 0;
}
.card:hover{ border-top-color:var(--brand); box-shadow:none; transform:none; }
.card:hover h3{ color:var(--brand); }
.card h3{ transition:color .3s var(--ease); }
.section--ink .card{ border-top:1px solid rgba(255,255,255,.18) !important; padding:1.875rem 0 0 !important; }
.section--ink .card:hover{ border-top-color:var(--accent) !important; }
.section--ink .card:hover h3{ color:var(--accent); }

/* contact aside keeps its boxes */
.card.card--box{ border:1px solid var(--line); padding:2.5rem; }
.card.card--box:hover{ border-color:var(--line-strong); transform:none; }
.card.card--box:hover h3{ color:var(--ink); }

/* --- Sector cards ----------------------------------------------------------- */
.sector{ border-radius:0; }
.sector__band{ height:3px; }
.sector:hover{ box-shadow:0 24px 56px rgba(10,26,47,.12); }

/* --- Image cards: duotone rest state ---------------------------------------- */
.imgcard{ border-radius:0; }
.imgcard>img{ filter:grayscale(.25) saturate(.85); }
.imgcard:hover>img{ filter:none; }

/* --- Splits, chain, cats ------------------------------------------------------ */
.split__photo{ border-radius:0; box-shadow:none; }
.chain{ border:0; border-radius:0; overflow:visible; gap:2.25rem 2rem; }
.chain__step{ border:0 !important; border-top:1px solid var(--line-strong) !important; padding:1.5rem 0 0; background:transparent; }
.chain__step .n{ color:var(--brand); }
.cat{ padding:2.25rem 0; }
.cat:hover{ background:transparent; }
.cat:hover h3{ color:var(--brand); }
.cat__n h3{ transition:color .25s var(--ease); }
.cat__i{ font-size:1.5rem; font-weight:200; color:var(--line-strong); letter-spacing:0; }
.cat:hover .cat__i{ color:var(--brand); }

/* --- Hero: cinematic overlay --------------------------------------------------- */
.hero--photo::before{
  background:
    linear-gradient(103deg, rgba(4,11,22,.93) 0%, rgba(4,11,22,.66) 44%, rgba(4,11,22,.18) 78%, rgba(0,168,142,.10) 100%);
}
.hero--photo .hero__in{ padding-block:clamp(6rem,12vw,10rem); }
.hero--sub.hero--photo .hero__in{ padding-block:clamp(4.5rem,8vw,7rem); }
.hero p{ font-weight:300; }

/* --- Commodity ticker ------------------------------------------------------------ */
.ticker{
  overflow:hidden; border-bottom:1px solid var(--line);
  background:var(--paper); padding-block:1.0625rem;
}
.ticker__track{
  display:flex; align-items:center; gap:3rem; width:max-content;
  animation:tickerScroll 46s linear infinite;
  font-size:.6875rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track i{ font-style:normal; color:var(--accent); font-size:.5rem; }
@keyframes tickerScroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

/* --- Footer: watermark wordmark ---------------------------------------------------- */
.ftr{ position:relative; overflow:hidden; }
.ftr::after{
  content:''; position:absolute; right:-3%; bottom:-4%;
  width:min(620px,64%); aspect-ratio:1024/203;
  background:url('../img/logo-white.png') no-repeat center/contain;
  opacity:.045; pointer-events:none;
}
.ftr .wrap{ position:relative; z-index:2; }

/* --- Reveal: softer, with blur ------------------------------------------------------ */
:where(.motion) .rv{ transform:translateY(26px); filter:blur(7px); transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.rv.in{ filter:blur(0); }
@media (prefers-reduced-motion:reduce){ .rv{ filter:none; } }

/* --- Steps (ink process) -------------------------------------------------------------- */
.step::before{ font-size:1.375rem; font-weight:200; letter-spacing:0; color:var(--accent); opacity:.9; }

/* --- Selection ---------------------------------------------------------------------------- */
::selection{ background:var(--brand); color:#fff; }

/* --- v3.1 hotfix: hero legibility ------------------------------------------ */
h1{ letter-spacing:-.03em; word-spacing:.04em; }
.hero--photo .hero__title em{ color:#35C7AD; }
@media (max-width:900px){
  .hero--photo::before{
    background:linear-gradient(180deg, rgba(4,11,22,.88) 0%, rgba(4,11,22,.74) 55%, rgba(4,11,22,.55) 100%);
  }
}

/* --- v3.2: logo proportions + Korean UI type scale -------------------------- */
.logo__sym{ height:28px; }
.logo__word{ height:16px; }
.ftr .logo__sym{ height:26px; }
.ftr .logo__word{ height:15px; }
@media (max-width:560px){ .logo__sym{ height:24px; } .logo__word{ height:13px; } }

/* 대문자 트래킹은 라틴 전용 — 한글은 크기·자간을 별도 스케일로 */
html[lang="ko"] .nav a{ font-size:.875rem; letter-spacing:.05em; }
@media (max-width:860px){ html[lang="ko"] .nav a{ font-size:.9375rem; letter-spacing:.03em; } }
html[lang="ko"] .btn{ font-size:.875rem; letter-spacing:.05em; }
html[lang="ko"] .eyebrow{ font-size:.8125rem; letter-spacing:.15em; }
html[lang="ko"] .link-arrow{ font-size:.875rem; letter-spacing:.04em; }
html[lang="ko"] .card__num{ font-size:.8125rem; letter-spacing:.12em; }
html[lang="ko"] .chain__step .n{ font-size:.8125rem; letter-spacing:.1em; }
html[lang="ko"] .cinfo__k{ font-size:.8125rem; letter-spacing:.1em; }
html[lang="ko"] .ftr h4{ font-size:.8125rem; letter-spacing:.12em; }

/* --- v3.3: wordmark-only logo, full-height split photos ---------------------- */
.logo__word{ height:20px; }
.ftr .logo__word{ height:18px; }
@media (max-width:560px){ .logo__word{ height:15px; } }

/* 스플릿: 사진이 텍스트 컬럼 높이를 그대로 따라가도록 */
.split{ align-items:stretch; }
.split > .rv:not(.split__photo){ display:flex; flex-direction:column; justify-content:center; }
.split__photo{ aspect-ratio:auto; height:auto; min-height:440px; align-self:stretch; }
.split__photo img{ height:100%; }
@media (max-width:860px){
  .split__photo{ min-height:0; aspect-ratio:16/10; align-self:auto; }
}

/* --- v3.4: larger wordmark ---------------------------------------------------- */
.logo__word{ height:26px; }
.ftr .logo__word{ height:22px; }
@media (max-width:560px){ .logo__word{ height:18px; } }

/* --- v3.5: portrait-source split photos keep a tall frame on mobile ---------- */
@media (max-width:860px){
  .split__photo--tall{ aspect-ratio:3/4; }
}

/* ==========================================================================
   v4 — Motion: hero background loop + inline value-chain band
   Reference: LDC ships an inline muted/looping value-chain video; the
   full-bleed hero loop is the premium-trader convention.
   ========================================================================== */
.hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--ease);
  pointer-events:none;
}
.hero__video.is-live{ opacity:1; }

.vband{
  position:relative; overflow:hidden; aspect-ratio:21/9;
  background:var(--surface-2);
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.vband__v{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:860px){ .vband{ aspect-ratio:16/9; } }
@media (prefers-reduced-motion:reduce){ .hero__video{ display:none; } }

/* --- v4.1: value-chain strip was the smallest type on the page ------------- */
.chain__step .n{ font-size:.75rem; }              /* 11 -> 12px */
.chain__step h3{ font-size:1.125rem; line-height:1.3; margin-bottom:.5rem; }  /* 15.5 -> 18px */
.chain__step p{ font-size:.9375rem; line-height:1.6; }                        /* 13 -> 15px */
html[lang="ko"] .chain__step .n{ font-size:.8125rem; }

/* ==========================================================================
   v5 — Institutional polish
   - XThin display numerals (the unused ultra-light brand weights)
   - Serif italic accent on EN hero em (McKinsey/FT institutional signature)
   - Pretendard upgrade path for Hangul display type
   - Utility topbar, fact band, 1280 container, hover refinements
   ========================================================================== */

@font-face { font-family:'NeueHaas'; src:url('../../fonts/NeueHaasDisplayXThin.woff2') format('woff2'); font-weight:100; font-display:swap; }

:root{ --wrap:1280px; }

/* --- Utility topbar --------------------------------------------------------- */
.topbar{
  background:var(--ink); color:#8FA1B3;
  font-size:.6875rem; letter-spacing:.08em;
}
.topbar__in{
  display:flex; justify-content:space-between; align-items:center;
  gap:1.5rem; min-height:34px; padding-block:.375rem;
}
.topbar a{ color:#B9C6D4; transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar__sep{ color:#3A4C60; padding-inline:.625rem; }
.topbar__r{ white-space:nowrap; }
@media (max-width:1023px){ .topbar{ display:none; } }

/* --- Fact band: verifiable numbers in ultra-light numerals ------------------- */
.factband{
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.factband__in{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.fact{
  padding-inline:clamp(1.25rem,2.5vw,2.5rem);
  border-left:1px solid var(--line);
}
.fact:first-child{ border-left:0; padding-left:0; }
.fact__n{
  font-size:clamp(3.25rem,6vw,5.25rem); font-weight:100; line-height:.95;
  color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.fact__n sup{ font-size:.35em; font-weight:300; color:var(--accent); vertical-align:super; margin-left:.06em; }
.fact__l{
  margin-top:.875rem; font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
html[lang="ko"] .fact__l{ font-size:.8125rem; letter-spacing:.12em; }
@media (max-width:860px){
  .factband__in{ grid-template-columns:1fr 1fr; gap:2rem 0; }
  .fact:nth-child(3){ border-left:0; padding-left:0; }
}

/* --- EN serif italic accent (hero em) ---------------------------------------- */
html[lang="en"] .hero--photo .hero__title em{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-style:italic; font-weight:300;
  letter-spacing:0; padding-right:.05em;
}

/* --- KO display weights via Pretendard variable ------------------------------- */
html[lang="ko"] h1{ font-weight:200; }
html[lang="ko"] .fact__n{ font-weight:100; }

/* --- Home hero scroll cue ------------------------------------------------------ */
.hero--home::after{
  content:'SCROLL'; position:absolute; z-index:2;
  bottom:2.25rem; left:2rem;
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:.5938rem; font-weight:500; letter-spacing:.4em;
  color:rgba(255,255,255,.5);
  animation:cueDrift 2.8s var(--ease) infinite;
}
@keyframes cueDrift{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(8px); opacity:.95; } }
@media (max-width:1100px){ .hero--home::after{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hero--home::after{ animation:none; } }

/* --- Hover refinements ----------------------------------------------------------- */
.btn--primary{
  background:linear-gradient(105deg, var(--brand) 0%, var(--brand) 55%, #00745F 130%);
  background-size:180% 100%; background-position:0% 0;
  transition:background-position .5s var(--ease), transform .25s var(--ease);
}
.btn--primary:hover{ background-position:95% 0; }
.imgcard__body h3::after{
  content:'→'; display:inline-block; margin-left:.4em;
  opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  font-weight:300;
}
.imgcard:hover .imgcard__body h3::after{ opacity:1; transform:none; }
.split__photo img{ filter:saturate(.94) contrast(1.02); }

/* --- Breathing room at 1280 -------------------------------------------------------- */
.section{ padding-block:clamp(4.5rem,9vw,8.5rem); }
.ftr{ padding-top:5rem; }

/* --- v5.1: the variable font registers as "Pretendard Variable" ------------- */
:root{
  --sans:'NeueHaas','Pretendard Variable','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

/* --- v5.2: dot-matrix world map (About · Reach) ------------------------------ */
.map{ position:relative; margin-bottom:clamp(2.5rem,5vw,4rem); }
.map__base{ display:block; width:100%; height:auto; }
.map__overlay{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.map__arc{ fill:none; stroke:rgba(255,255,255,.32); stroke-width:1.1; stroke-dasharray:2 6; stroke-linecap:round; }
.hub .core{ fill:var(--accent); }
.hub--hq .core{ fill:#fff; stroke:var(--accent); stroke-width:2.5; }
.hub .ring{ fill:none; stroke:var(--accent); stroke-width:1.5; opacity:0; animation:hubPulse 3.2s var(--ease) infinite; }
.hub:nth-of-type(2) .ring{ animation-delay:.8s; }
.hub:nth-of-type(3) .ring{ animation-delay:1.6s; }
.hub:nth-of-type(4) .ring{ animation-delay:2.4s; }
@keyframes hubPulse{ 0%{ r:5; opacity:.85; } 70%,100%{ r:24; opacity:0; } }
.map__label{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  letter-spacing:.16em; fill:#C5D2DF;
}
@media (max-width:640px){ .map__label{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hub .ring{ animation:none; } }

/* --- v5.3: eight hubs — staggered pulse, HQ label emphasis ------------------- */
.hub:nth-of-type(5) .ring{ animation-delay:.4s; }
.hub:nth-of-type(6) .ring{ animation-delay:1.2s; }
.hub:nth-of-type(7) .ring{ animation-delay:2.0s; }
.hub:nth-of-type(8) .ring{ animation-delay:2.8s; }
.map__label--hq{ fill:#fff; font-weight:700; }
@media (max-width:900px){ .map__label{ font-size:11px; letter-spacing:.1em; } }

/* ==========================================================================
   v6 — Motion system
   Principle: motion earns its place by clarifying hierarchy or meaning.
   Everything below is transform/opacity/clip-path only (no layout thrash),
   and the whole system collapses under prefers-reduced-motion.
   ========================================================================== */

/* --- 1. Hero entrance: staggered, no JS (fill-mode both = safe if JS dies) --- */
@keyframes heroRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes heroWipe{
  from{ opacity:0; clip-path:inset(0 0 108% 0); transform:translateY(16px); }
  to{ opacity:1; clip-path:inset(0 0 -12% 0); transform:none; }
}
:where(.motion) .hero--photo .hero__in > *{ animation:heroRise .95s var(--ease) both; }
.hero--photo .hero__in > .crumb{ animation-delay:.10s; }
.hero--photo .hero__in > .eyebrow{ animation-delay:.18s; }
.hero--photo .hero__in > .hero__title{ animation:heroWipe 1.15s var(--ease) both; animation-delay:.30s; }
.hero--photo .hero__in > p{ animation-delay:.52s; }
.hero--photo .hero__in > .btn-row{ animation-delay:.68s; }
.hero--home::after{ animation:cueDrift 2.8s var(--ease) infinite, heroRise 1s var(--ease) both; animation-delay:0s, 1.1s; }

/* --- 2. Section headline: mask wipe on reveal -------------------------------- */
:where(.motion) .head h2{
  clip-path:inset(0 0 108% 0); transform:translateY(14px);
  transition:clip-path .95s var(--ease) .12s, transform .95s var(--ease) .12s;
}
.head.in h2{ clip-path:inset(0 0 -12% 0); transform:none; }

/* --- 3. Eyebrow rule draws itself -------------------------------------------- */
:where(.motion) .eyebrow::before{ width:0; transition:width .8s var(--ease) .25s; }
.rv.in .eyebrow::before, .in .eyebrow::before{ width:2.25rem; }
.hero__in .eyebrow::before{ width:2.25rem; transition:none; }

/* --- 4. Child stagger inside a single revealed block -------------------------- */
:where(.motion) .fitem, :where(.motion) .chain__step{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.rv.in .fitem, .rv.in .chain__step,
.in .fitem, .in .chain__step{ opacity:1; transform:none; }
.flist .fitem:nth-child(1),.chain .chain__step:nth-child(1){ transition-delay:.10s; }
.flist .fitem:nth-child(2),.chain .chain__step:nth-child(2){ transition-delay:.20s; }
.flist .fitem:nth-child(3),.chain .chain__step:nth-child(3){ transition-delay:.30s; }
.flist .fitem:nth-child(4),.chain .chain__step:nth-child(4){ transition-delay:.40s; }
.flist .fitem:nth-child(5),.chain .chain__step:nth-child(5){ transition-delay:.50s; }

/* --- 5. Photography settles instead of appearing ------------------------------ */
.split__photo{ overflow:hidden; }
.split__photo img{
  transform:scale(1.07); transition:transform 1.5s var(--ease);
}
.rv.in.split__photo img, .split__photo.in img{ transform:scale(1); }

/* --- 6. Map: cargo flows along the lanes --------------------------------------- */
:where(.motion) .map__arc{ opacity:0; transition:opacity .9s var(--ease); }
.map.in .map__arc{ opacity:1; animation:arcFlow 2.6s linear infinite; }
.map.in .map__arc:nth-of-type(1){ transition-delay:.25s; }
.map.in .map__arc:nth-of-type(2){ transition-delay:.40s; animation-delay:.3s; }
.map.in .map__arc:nth-of-type(3){ transition-delay:.55s; animation-delay:.6s; }
.map.in .map__arc:nth-of-type(4){ transition-delay:.70s; animation-delay:.9s; }
.map.in .map__arc:nth-of-type(5){ transition-delay:.85s; animation-delay:1.2s; }
@keyframes arcFlow{ to{ stroke-dashoffset:-32; } }
:where(.motion) .hub .core{ transform-box:fill-box; transform-origin:center; transform:scale(0); transition:transform .6s var(--ease); }
.map.in .hub .core{ transform:scale(1); }
.map.in .hub:nth-of-type(1) .core{ transition-delay:.15s; }
.map.in .hub:nth-of-type(2) .core{ transition-delay:.30s; }
.map.in .hub:nth-of-type(3) .core{ transition-delay:.40s; }
.map.in .hub:nth-of-type(4) .core{ transition-delay:.50s; }
.map.in .hub:nth-of-type(5) .core{ transition-delay:.60s; }
.map.in .hub:nth-of-type(6) .core{ transition-delay:.70s; }
.map.in .hub:nth-of-type(7) .core{ transition-delay:.80s; }
.map.in .hub:nth-of-type(8) .core{ transition-delay:.90s; }
:where(.motion) .map__label{ opacity:0; transition:opacity .7s var(--ease) 1s; }
.map.in .map__label{ opacity:1; }

/* --- 7. Fact numerals lift as they count ----------------------------------------- */
.fact__n{ transition:transform .9s var(--ease); }
.fact.in .fact__n{ transform:none; }
.fact:not(.in) .fact__n{ transform:translateY(10px); }

/* --- 8. Nav underline sweeps rather than scales ------------------------------------ */
.nav a::after{ transform-origin:right; }
.nav a:hover::after{ transform-origin:left; }

/* --- Reduced motion: collapse the entire system ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero--photo .hero__in > *,
  .hero--home::after{ animation:none !important; opacity:1 !important; clip-path:none !important; transform:none !important; }
  .head h2{ clip-path:none; transform:none; transition:none; }
  .eyebrow::before{ width:2.25rem; transition:none; }
  .fitem,.chain__step{ opacity:1; transform:none; transition:none; }
  .split__photo img{ transform:none; transition:none; }
  .map__arc{ opacity:1; animation:none; transition:none; }
  .hub .core{ transform:none; transition:none; }
  .map__label{ opacity:1; transition:none; }
  .fact:not(.in) .fact__n{ transform:none; }
}
:where(.motion) .head--center .eyebrow::after{ width:0; transition:width .8s var(--ease) .25s; }
.head--center.in .eyebrow::after{ width:2.25rem; }
@media (prefers-reduced-motion:reduce){ .head--center .eyebrow::after{ width:2.25rem; transition:none; } }

/* --- Safety net: force entrance states final once the window has passed ------ */
:where(.motion-settled) .hero--photo .hero__in > *{
  opacity:1 !important; clip-path:none !important; transform:none !important;
}

/* ==========================================================================
   v7 — Elaboration layer
   Patterns measured on Trafigura (full-bleed media, light display type) and
   Maersk (diffuse low-alpha shadows, restrained radii). Everything here is
   built by JS at runtime, so no page markup changes and no no-JS risk.
   ========================================================================== */

/* --- Scroll progress ---------------------------------------------------------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  background:transparent; pointer-events:none;
}
.progress__bar{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--brand) 0%, var(--accent) 100%);
  transform-origin:left center;
}

/* --- In-page section nav (scrollspy) -------------------------------------------- */
.secnav{
  position:sticky; top:75px; z-index:90;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.secnav__in{
  display:flex; gap:2rem; align-items:center;
  overflow-x:auto; scrollbar-width:none; min-height:52px;
}
.secnav__in::-webkit-scrollbar{ display:none; }
.secnav a{
  position:relative; white-space:nowrap; padding-block:1rem;
  font-size:.6875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); transition:color .25s var(--ease);
}
.secnav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.secnav a:hover{ color:var(--ink); }
.secnav a.is-current{ color:var(--brand); }
.secnav a.is-current::after{ transform:scaleX(1); }
html[lang="ko"] .secnav a{ font-size:.8125rem; letter-spacing:.06em; }
@media (max-width:860px){ .secnav{ top:75px; } .secnav__in{ gap:1.375rem; min-height:46px; } }

/* --- Photography wipes in from its own edge --------------------------------------- */
:where(.motion) .split__photo{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease); }
.split__photo.in{ clip-path:inset(0 0 0 0); }
:where(.motion) .imgcard{ clip-path:inset(100% 0 0 0); transition:clip-path .9s var(--ease); }
.imgcard.in{ clip-path:inset(0 0 0 0); }
:where(.motion) .vband{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease); }
.vband.in{ clip-path:inset(0 0 0 0); }

/* --- Hero parallax ------------------------------------------------------------------ */
.hero--home .hero__video, .hero--home .hero__art{ will-change:transform; }

/* --- Page transition ------------------------------------------------------------------ */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
:where(.motion) body{ animation:pageIn .45s var(--ease) both; }
:where(.motion) body.is-leaving{ opacity:0; transition:opacity .26s var(--ease); animation:none; }

/* --- Brand scrollbar --------------------------------------------------------------------- */
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:var(--surface); }
  ::-webkit-scrollbar-thumb{ background:var(--line-strong); border:3px solid var(--surface); border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
}

/* --- Reduced motion -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .split__photo,.imgcard,.vband{ clip-path:none !important; transition:none !important; }
  body,body.is-leaving{ animation:none !important; opacity:1 !important; transition:none !important; }
  .progress{ display:none; }
}

/* ==========================================================================
   v8 — Mega menu + product finder
   The structural gap against Covestro (16 flyout nodes, deep hierarchy) and
   BASF (persistent search). Both panels are built at runtime from the
   generated index, so page markup is untouched.
   ========================================================================== */

/* --- Mega menu ---------------------------------------------------------------- */
.nav a[data-mega]{ position:relative; }
.nav a[data-mega]::before{
  content:''; position:absolute; left:50%; bottom:-30px; width:11px; height:11px;
  background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg) scale(0); transform-origin:center;
  transition:transform .3s var(--ease); z-index:121;
}
.nav a[data-mega].is-open::before{ transform:translateX(-50%) rotate(45deg) scale(1); }

.mega{
  position:fixed; left:0; right:0; z-index:120;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 24px 48px rgba(10,26,47,.10);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.mega.is-open{ opacity:1; visibility:visible; transform:none; }
.mega__in{
  display:grid; grid-template-columns:1.15fr 1.15fr .9fr;
  gap:clamp(2rem,4vw,4rem); padding-block:2.75rem 3rem;
}
.mega__col h4{
  font-size:.6875rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brand); margin-bottom:1.125rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--line);
}
html[lang="ko"] .mega__col h4{ font-size:.8125rem; letter-spacing:.1em; }
.mega__col ul{ display:grid; gap:.5rem; }
.mega__col a{
  display:block; font-size:.9375rem; color:var(--ink-2); padding:.1875rem 0;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.mega__col a:hover{ color:var(--brand); transform:translateX(4px); }
.mega__feat{ position:relative; overflow:hidden; min-height:200px; background:var(--ink); }
.mega__feat img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  filter:grayscale(.2) saturate(.9); transition:transform .7s var(--ease); }
.mega__feat:hover img{ transform:scale(1.05); }
.mega__feat::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,16,30,.9), rgba(6,16,30,.15)); }
.mega__feat span{
  position:absolute; z-index:2; left:1.5rem; right:1.5rem; bottom:1.375rem;
  color:#fff; font-size:.9375rem; font-weight:500; line-height:1.4;
}
.mega__feat span em{ display:block; font-style:normal; font-size:.6875rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; }
@media (max-width:1023px){ .mega{ display:none; } }

/* --- Search trigger + overlay ------------------------------------------------------ */
.searchbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--line); background:transparent;
  cursor:pointer; color:var(--ink-2); transition:border-color .2s, color .2s, background .2s;
}
.searchbtn:hover{ border-color:var(--ink); color:var(--ink); }
.searchbtn svg{ width:15px; height:15px; }

.finder{
  position:fixed; inset:0; z-index:300; display:flex; flex-direction:column;
  background:rgba(6,16,30,.62); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.finder.is-open{ opacity:1; visibility:visible; }
.finder__panel{
  background:#fff; border-bottom:1px solid var(--line);
  transform:translateY(-16px); transition:transform .35s var(--ease);
  max-height:86vh; display:flex; flex-direction:column;
}
.finder.is-open .finder__panel{ transform:none; }
.finder__bar{ display:flex; align-items:center; gap:1rem; padding-block:1.75rem; }
.finder__bar input{
  flex:1; border:0; border-bottom:2px solid var(--line-strong); background:transparent;
  font-size:clamp(1.25rem,2.6vw,1.875rem); font-weight:300; padding:.5rem 0;
  color:var(--ink); outline:none; transition:border-color .25s var(--ease);
}
.finder__bar input:focus{ border-bottom-color:var(--brand); }
.finder__bar input::placeholder{ color:var(--line-strong); }
.finder__close{ background:transparent; border:0; cursor:pointer; color:var(--muted);
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; padding:.5rem; }
.finder__close:hover{ color:var(--ink); }
.finder__results{ overflow-y:auto; padding-bottom:2.5rem; }
.finder__hint{ font-size:.8125rem; color:var(--muted); padding-bottom:1.5rem; }
.fres{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem; align-items:baseline;
  padding:.9375rem 0; border-top:1px solid var(--line);
  transition:background .2s var(--ease);
}
.fres:hover{ background:var(--surface); }
.fres__k{ font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.fres__n{ font-size:1.0625rem; color:var(--ink); }
.fres__n mark{ background:transparent; color:var(--brand); font-weight:500; }
.fres__p{ font-size:.75rem; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:640px){ .fres{ grid-template-columns:1fr; gap:.25rem; } .fres__p{ display:none; } }

/* ==========================================================================
   v9 — Accessibility corrections (measured, not guessed)
   --accent on white was 3.00:1 and --line-strong numerals 1.54:1, both
   below the 4.5:1 AA floor for text at these sizes.
   ========================================================================== */

/* Teal reads as the brand accent but only clears AA on dark grounds.
   On light grounds the label now uses a darkened variant (5.31:1). */
:root{ --accent-ink:#00705E; }
.eyebrow--accent{ color:var(--accent-ink); }
.section--ink .eyebrow--accent,
.hero--photo .eyebrow--accent,
.cta .eyebrow--accent{ color:var(--accent); }
.cat--agri .cat__i{ color:var(--line-strong); }
.fitem__i{ color:var(--accent-ink); }
.section--ink .fitem__i,.cta .fitem__i{ color:var(--accent); }

/* Category numerals were decorative-pale; lifted to a legible tone that
   still sits behind the category name in the hierarchy (4.63:1). */
.cat__i{ color:#6C7F91; }
.cat:hover .cat__i,.cat--agri:hover .cat__i{ color:var(--brand); }

/* --- v10: keyboard bypass + form status ------------------------------------- */
.skip{
  position:absolute; left:1rem; top:-100px; z-index:400;
  background:var(--ink); color:#fff; padding:.875rem 1.5rem;
  font-size:.75rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus{ top:1rem; }
html[lang="ko"] .skip{ font-size:.875rem; letter-spacing:.04em; }
.formstatus{
  margin-top:1rem; font-size:.875rem; color:var(--brand);
  padding:.75rem 1rem; background:var(--brand-soft); border-left:2px solid var(--brand);
}
.formstatus:empty{ display:none; }

/* ==========================================================================
   v11 — Touch target sizing (WCAG 2.5.8)
   Measured at 375px: language switcher 17x21, breadcrumb 33x21 and footer
   links 63x16 all fell under the 24x24 minimum. Padding is added rather
   than font size, so the visual rhythm is unchanged.
   ========================================================================== */
@media (max-width:860px){
  .lang{ gap:.125rem; }
  .lang a{ display:inline-block; padding:.5rem .4375rem; }
  .lang__sep{ padding:0; }
  .crumb a{ display:inline-block; padding-block:.25rem; }
  .ftr li{ margin-bottom:.125rem; }
  .ftr li a{ display:inline-block; padding-block:.4375rem; }
  .ftr__btm a{ display:inline-block; padding-block:.25rem; }
  .logo{ padding-block:.375rem; }
  .topbar__r a{ display:inline-block; padding-block:.25rem; }
}

/* --- v12: media can never be trapped by a reveal that did not arrive -------
   The entrance effects are worth keeping, but no image or video may depend
   on a class to be visible at all. Once motion-settled is stamped (2.6s),
   every media reveal resolves whatever the observer did. */
:where(.motion-settled) .split__photo,
:where(.motion-settled) .imgcard,
:where(.motion-settled) .vband{ clip-path:none !important; }
:where(.motion-settled) .rv{ opacity:1 !important; filter:none !important; transform:none !important; }