/* ══════════════════════════════════════════════════════════════
   GNI ORTHO — one-page scroll site
   style_ver2.css  ·  skeleton / global settings
   ══════════════════════════════════════════════════════════════ */

/* ---------- tokens ---------- */
:root{
  --ivory:#f5f4f2;
  --ink:#111;
  --accent:#e1322a;
  --muted:#6b6f76;
  --line:rgba(17,17,17,.10);
  --white:#fff;

  --hd-h:76px;
  --wrap:1560px;
  --pad:clamp(24px,3vw,48px);

  --sans:'Mona Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Malgun Gothic',sans-serif;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'Malgun Gothic',sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--accent);color:#fff}

/* display type — English titles */
.disp,h1,h2,h3{
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:.94;
  text-transform:uppercase;
}

/* shared line-mask used by intro + section titles */
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln>span{display:block;will-change:transform}

/* section eyebrow */
.eyebrow{display:inline-block;font-family:var(--body);
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before{content:"";display:inline-block;width:20px;height:2px;background:var(--accent);
  vertical-align:middle;margin-right:11px;margin-bottom:3px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{position:relative;width:100%}

/* ══════════════════════════════════════════════════════════════
   INTRO OVERLAY
   ══════════════════════════════════════════════════════════════ */
.intro{
  position:fixed; inset:0; z-index:9999;
  background:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px;
}
.intro.is-done{display:none}
.intro-inner{text-align:center}
.intro-logo{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(38px,6vw,96px);line-height:1;text-transform:uppercase}
.intro-sub{margin-top:12px;font-size:clamp(11px,1.1vw,14px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--muted)}
.intro-bar{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  width:min(260px,42vw);height:1px;background:var(--line);overflow:hidden}
.intro-bar i{display:block;height:100%;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%}

/* body lock while the intro runs */
body.is-intro{overflow:hidden}

/* ══════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════ */
.hd{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--hd-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hd.is-stuck{background:rgba(245,244,242,.86);backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.hd-logo{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:-.02em;
  flex:0 0 auto;white-space:nowrap}
.hd-logo span{color:var(--accent);margin-left:3px}
/* menu tree — sized and arranged after the reference GNB:
   depth1 18/600 with padding-based spacing (no gap), nav right-aligned next to
   the lang toggle, CTA a full-height block flush to the right edge.
   Tracking is pulled in as the size goes up (.04em suited 13px, not 18px). */
.hd-nav{display:flex;gap:0;margin-left:auto}
.hd-nav a{display:flex;align-items:center;white-space:nowrap;
  font-size:18px;font-weight:600;letter-spacing:-.01em;
  padding:0 clamp(16px,1.5vw,28px);color:var(--muted);transition:color .25s}
.hd-nav a:hover,.hd-nav a.is-active{color:var(--ink)}
.hd-right{display:flex;align-items:center;align-self:stretch;flex:0 0 auto;
  gap:clamp(14px,1.6vw,28px);margin-left:clamp(6px,1vw,16px)}
/* full-height dark block, bottom corners rounded — as per the reference */
.hd-cta{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  min-width:190px;padding:0 24px;white-space:nowrap;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  background:var(--ink);color:#fff;border:0;border-radius:0 0 10px 10px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.hd-cta:hover{background:var(--accent);color:#fff}

/* Hero-overlay header — while at the top over the hero video the nav is white;
   once scrolled it gains .is-stuck and reverts to the default dark colors. */
.hd-logo{transition:color .3s var(--ease)}
.hd:not(.is-stuck) .hd-logo,
.hd:not(.is-stuck) .hd-nav a,
.hd:not(.is-stuck) .hd-lang>button{text-shadow:0 1px 3px rgba(0,0,0,.28)}
.hd:not(.is-stuck) .hd-logo{color:#fff}
.hd:not(.is-stuck) .hd-nav a{color:rgba(255,255,255,.88)}
.hd:not(.is-stuck) .hd-nav a:hover,
.hd:not(.is-stuck) .hd-nav a.is-active{color:#fff}
.hd:not(.is-stuck) .hd-lang>button{color:rgba(255,255,255,.88)}
.hd:not(.is-stuck) .hd-lang>button:hover,
.hd:not(.is-stuck) .hd-lang>button[aria-expanded="true"]{color:#fff}

/* image logo — colour lockup by default; white (inverted mask) while over the hero */
.hd-logo{display:inline-flex;align-items:center;height:100%}
.hd-logo img{height:38px;width:auto}
.hd-logo__white{display:none;filter:brightness(0) invert(1)}
.hd:not(.is-stuck) .hd-logo__color{display:none}
.hd:not(.is-stuck) .hd-logo__white{display:block}
@media (max-width:640px){ .hd-logo img{height:30px} }

/* language switch */
.hd-lang{position:relative}
.hd-lang>button{display:flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  padding:8px 2px;transition:color .3s}
.hd-lang>button:hover,.hd-lang>button[aria-expanded="true"]{color:var(--ink)}
.hd-lang>button i{width:6px;height:6px;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-1px);
  transition:transform .3s var(--ease)}
.hd-lang>button[aria-expanded="true"] i{transform:rotate(-135deg) translateY(-2px)}
.hd-lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:118px;
  background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 16px 40px rgba(17,17,17,.10)}
.hd-lang-menu a{display:block;padding:12px 18px;font-size:15px;font-weight:500;color:var(--muted);
  transition:background .2s,color .2s}
.hd-lang-menu a:hover{background:var(--ivory);color:var(--ink)}
.hd-lang-menu a[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* 5 labels at 18px + a 190px CTA overflow below ~1300px — step the nav down
   rather than let it collide with the logo. */
@media (max-width:1280px){ .hd-nav a{font-size:17px;padding:0 14px} }
@media (max-width:1100px){
  .hd-nav a{font-size:16px;padding:0 11px}
  .hd-right{gap:14px}
  .hd-cta{min-width:0;padding:0 18px;font-size:13px}
}
@media (max-width:1000px){ .hd-nav a{font-size:15px;padding:0 9px} }
@media (max-width:900px){
  .hd-nav{display:none} .hd-lang{display:none}
  .hd-cta{min-width:0;padding:0 20px;font-size:13px}
}

/* ══════════════════════════════════════════════════════════════
   SCROLLSMOOTHER  (required wrapper rules)
   ══════════════════════════════════════════════════════════════ */
#smooth-wrapper{overflow:hidden}
/* ScrollSmoother sets its own transform on #smooth-content — leave it alone */

/* ══════════════════════════════════════════════════════════════
   ① VISUAL / HERO
   Section is 180vh tall; .pinBx (100vh) is pinned for its full
   length, so the copy + slider scroll up over a fixed background.
   ══════════════════════════════════════════════════════════════ */
/* one screen tall — height comes from the copy, not a pinned scroll runway */
.sec-visual{height:auto;color:#fff}

/* background layer — absolute, so it spans exactly as tall as the copy and
   travels up with it. (It used to be pinned, which left it on screen for 80vh
   after the text had already scrolled off.) */
.pinBx{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  overflow:hidden; background:#0d0f12;
}
.vbg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.vbg-media.is-on{opacity:1}
.vbg-scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,12,15,.55) 0%,rgba(10,12,15,.15) 34%,rgba(10,12,15,.72) 100%),
    linear-gradient(90deg,rgba(10,12,15,.60) 0%,rgba(10,12,15,0) 62%);
}

/* --- foreground copy ---
   Two bands inside a full-height grid:
     .vc-top  headline + subline   (row 1)
     .vc-bot  CTA + scroll cue     (bottom of the free row) */
.visual-copy{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin:0 auto;
  min-height:max(640px, 100vh);      /* in flow → the copy drives section height */
  padding:calc(var(--hd-h) + clamp(28px,7vh,96px)) var(--pad) clamp(34px,6vh,64px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* ① left-aligned sentence headline.
   7vw tracks the reference; capped at 126px because "manufactured in Korea"
   measures 1354px there and the wrap only gives 1464px of content width.
   Floor is 26px — 30px overflows a 360px screen. Each line is masked by .ln. */
.vc-inner{display:flex;flex-direction:column;align-items:stretch;text-align:left;max-width:100%}
.v-title{
  display:block;width:100%;margin:0;
  font-size:clamp(26px,7vw,126px);
  font-weight:700;line-height:1.08;letter-spacing:-.03em;
  text-transform:none;color:#fff;
  text-wrap:balance;
}
.v-title .ln{display:block;overflow:hidden;padding-bottom:.08em}
.v-title .ln>span{display:block;white-space:nowrap;will-change:transform}

.v-sub{
  font-family:var(--body);
  margin:clamp(18px,2.8vh,36px) 0 0;max-width:56ch;
  font-size:clamp(14px,1.15vw,18px);font-weight:400;line-height:1.65;
  letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.78);
}

/* ② bottom band */
.vc-bot{
  margin-top:clamp(26px,4vh,48px);
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(20px,3vh,36px);
}

.vc-actions{display:flex;align-items:center;justify-content:flex-start;gap:24px}
.v-cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  padding:14px 26px;font-size:13px;font-weight:700;letter-spacing:.04em;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-solid{background:var(--accent);color:#fff}
.btn-solid:hover{background:#fff;color:var(--ink)}
.btn-line{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}

/* 1025–1100 : columns get tight, so let the copy wrap naturally */
@media (max-width:1100px){
  .vm-col{max-width:none}
  .vm-col br{display:none}
}

/* ≤1024 : below this the three columns fall under ~180px and the copy shreds,
   so the bands stack. */
@media (max-width:1024px){
  .visual-copy{
    padding-top:calc(var(--hd-h) + 10vh);
    grid-template-rows:auto auto auto;
    row-gap:clamp(24px,4vh,44px);
  }
  .v-title{justify-content:flex-start;letter-spacing:-.02em;flex-wrap:wrap}
  .v-title2{flex-wrap:wrap}
  .vc-mid{align-self:start;padding-bottom:0;flex-direction:column;gap:18px}
  .vm-col{flex:0 0 auto;width:100%;max-width:520px}
}
@media (max-width:560px){
  .v-cta{flex-direction:column;align-items:stretch}
  .v-cta .btn{justify-content:center}
}

/* --- scroll cue — sits on the CTA row, opposite the buttons --- */
.visual-scroll{
  position:absolute;left:50%;bottom:clamp(20px,4vh,40px);transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.visual-scroll i{width:56px;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.visual-scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@media (max-width:1100px){ .visual-scroll{display:none} }

/* ══════════════════════════════════════════════════════════════
   ② CARD INTRO   ·   dl text (left) + 5 image cards (right)
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   ①·5 STATEMENT   ·   scroll-driven text fill
   ══════════════════════════════════════════════════════════════ */
.sec-statement{position:relative;z-index:1;background:var(--ivory);
  padding:clamp(110px,16vh,220px) 0}
/* The gradient hard-stops at --p, so the text fills left→right as you scroll.
   --p is driven by ScrollTrigger scrub in main_ver2.js. */
.st-head{
  font-family:var(--sans);font-weight:800;text-transform:none;
  font-size:clamp(26px,3.4vw,62px);line-height:1.16;letter-spacing:-.03em;
  background-image:linear-gradient(90deg,
    var(--ink) 0%, var(--ink) var(--p,0%),
    #d6d4d1   var(--p,0%), #d6d4d1 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.st-head mark{background:none;-webkit-text-fill-color:inherit;color:inherit}
.st-slogan{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,34px);
  margin-top:clamp(34px,5vh,64px)}
.st-slogan span{font-size:11px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted)}
.st-slogan span:first-child::before{content:"";display:inline-block;width:20px;height:2px;
  background:var(--accent);vertical-align:middle;margin-right:11px;margin-bottom:3px}

/* white panel — separates §② from the ivory §③ below it */
.sec-cards{position:relative;z-index:1;background:var(--white);
  padding:clamp(96px,13vh,180px) 0 clamp(104px,14vh,190px)}
.cards-inner{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  column-gap:clamp(32px,5vw,96px);
  align-items:start;
}

/* --- left : dl --- */
.cards-copy{margin:0}
.cc-dt{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,3.6vw,64px);line-height:.96;letter-spacing:-.03em;
  margin:0 0 clamp(22px,3vh,36px);
}
.cc-dd{
  margin:0 0 14px;max-width:420px;
  font-size:15px;line-height:1.68;color:var(--muted);
}
.cc-link{margin-top:12px}
.cc-link a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  padding-bottom:6px;border-bottom:1px solid var(--ink);
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.cc-link a:hover{color:var(--accent);border-color:var(--accent);gap:14px}

/* --- right : 3 cards (Orthodontics / Dental / Clear Aligner) --- */
.cards-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.2vw,22px);
}
.ic{will-change:transform}
.ic a{display:block}
.ic figure{position:relative;margin:0;overflow:hidden;border-radius:14px;
  aspect-ratio:3/4;background:#e9e7e4}
.ic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ic:hover img{transform:scale(1.06)}
.ic figure::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.76) 100%)}
.ic figcaption{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;color:#fff}
.ic figcaption i{display:block;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.18em;color:var(--accent);margin-bottom:8px}
.ic figcaption b{display:block;font-family:var(--sans);font-size:clamp(17px,1.35vw,22px);
  font-weight:800;line-height:1.15;letter-spacing:-.015em}
.ic figcaption em{display:block;font-style:normal;margin-top:8px;
  font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.74);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .4s var(--ease),margin-top .5s var(--ease)}
.ic:hover figcaption em{max-height:70px;opacity:1}

/* -- right : scroll-expand hero (About-style pinned slide-up) -- */
.cards-hero{position:relative;display:flex;flex-direction:column;gap:14px}
.chero{position:relative;display:block;overflow:hidden;border-radius:14px;background:#e9e7e4;aspect-ratio:16/10}
.chero>a{display:block;width:100%;height:100%}
.chero img{width:100%;height:100%;object-fit:cover}
.chero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.78) 100%)}
.chero-cap{position:absolute;left:clamp(20px,2.4vw,40px);right:clamp(20px,2.4vw,40px);bottom:clamp(20px,3vh,40px);z-index:2;color:#fff}
.chero-cap i{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--accent);margin-bottom:10px}
.chero-cap b{display:block;font-family:var(--sans);font-weight:800;line-height:1.08;letter-spacing:-.02em;font-size:clamp(24px,2vw,34px)}
.chero-cap em{display:block;font-style:normal;margin-top:12px;max-width:520px;font-size:clamp(13px,1vw,15.5px);line-height:1.55;color:rgba(255,255,255,.8)}
.chero-dots{display:none}
@media (min-width:1241px){
  .cards-inner{align-items:center}
  .cards-hero{display:block;height:clamp(460px,74vh,700px);border-radius:20px;overflow:hidden}
  .chero{position:absolute;inset:0;aspect-ratio:auto;border-radius:20px;z-index:1}
  .chero[data-n="1"]{z-index:2}
  .chero[data-n="2"]{z-index:3}
  .chero-cap b{font-size:clamp(30px,2.6vw,48px)}
  .chero-dots{display:flex;gap:9px;position:absolute;z-index:9;right:clamp(20px,2.4vw,40px);top:clamp(20px,3vh,36px)}
  .chero-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .35s,transform .35s}
  .chero-dots span.on{background:#fff;transform:scale(1.25)}
}

@media (max-width:1240px){
  .cards-inner{grid-template-columns:1fr;row-gap:clamp(40px,6vh,72px)}
  .cc-dd{max-width:none}
}
@media (max-width:760px){
  .cards-grid{grid-template-columns:1fr;gap:14px}
  .ic figure{aspect-ratio:16/10}
  .ic figcaption em{max-height:70px;opacity:1}   /* no hover on touch → always shown */
}

/* ══════════════════════════════════════════════════════════════
   ③ PRODUCT SHOWCASE  (pinned, pinSpacing:false)
   Every reveal below is pure CSS transition-delay, driven only by
   the .on class that main_ver2.js toggles on realIndexChange.
   ══════════════════════════════════════════════════════════════ */
.sec-showcase{
  position:relative;z-index:0;                /* pinned layer sits under §④ */
  height:100vh;min-height:660px;
  display:flex;align-items:center;overflow:hidden;
  background:var(--ivory);
  border-top:1px solid var(--line);
}
/* section header — pinned section is vertically centred, so the head is absolute */
.show-head{
  position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:3;
  padding-top:clamp(46px,7vh,86px);
  pointer-events:none;
}
.show-head h3{
  margin-top:12px;font-size:clamp(20px,1.7vw,28px);font-weight:800;
  line-height:1.15;letter-spacing:-.025em;text-transform:none;
}
.show-grid{display:grid;
  grid-template-columns:minmax(300px,1.08fr) minmax(320px,1.14fr) 150px;
  column-gap:var(--pad);align-items:center;
  padding-top:clamp(48px,8vh,96px);
  padding-bottom:clamp(40px,6vh,72px)}
.show-text,.show-image{position:relative;height:min(52vh,470px)}

/* The thumbnail rail spans the FULL section height. Cards are sized so that all
   seven fit without clipping: 7 × 116px + 6 × 12px gap = 884px.
   The grid still reserves its 150px column, keeping the other two in place. */
.show-thumbs{
  position:absolute;top:0;height:100%;
  right:max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  width:150px;z-index:4;
  display:flex;align-items:center;
}
/* no mask — the reference keeps the card edges crisp top and bottom */
.show-thumbs .swiper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}

/* ---------- stacked boxes ---------- */
.show-text .box,.show-image .box{
  position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .28s var(--ease);
}
.show-text .box{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.show-text .box.on,.show-image .box.on{opacity:1;pointer-events:auto;z-index:2}

/* ---------- left : text ---------- */
.p-logo,.p-sub,.p-tags,.p-view{
  transform:translateY(40px);opacity:0;
  transition:transform .4s var(--ease),opacity .4s ease;
}
.p-logo{height:22px;margin-bottom:26px}
.p-logo img{height:100%;width:auto;opacity:.9}
.p-sub{font-size:clamp(15px,1.15vw,19px);color:#5a5f66;margin:0 0 10px;letter-spacing:-.01em}

.p-name{margin:0 0 30px}
.p-name .ln{display:block;overflow:hidden;padding-bottom:.06em}
.p-name .ln>span{
  display:block;font-family:var(--sans);font-weight:500;   /* light-ish, like the reference */
  font-size:clamp(50px,7.2vw,138px);line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;
  transform:translateY(110%);
  transition:transform .55s var(--ease);
}

/* solid orange pills */
.p-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:52px;max-width:520px}
.p-tags span{
  background:var(--accent);color:#fff;border-radius:999px;
  padding:9px 18px;font-size:12.5px;font-weight:600;letter-spacing:-.005em;
  white-space:nowrap;
}

/* View link : text + arrow, sitting on a long rule */
.p-view a{
  position:relative;z-index:0;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:space-between;gap:60px;
  min-width:220px;padding:6px 12px 16px;
  color:var(--ink);font-size:15px;font-weight:700;letter-spacing:-.01em;
  transition:color .3s var(--ease);
}
.p-view a em{font-style:normal;font-size:17px;line-height:1;transition:transform .35s var(--ease)}
.p-view a:hover em{transform:translateX(6px)}
/* the 1px rule grows to full height → orange fill, text inverts */
.p-view a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--accent);z-index:-1;
  transition:height .38s var(--ease);
}
.p-view a:hover{color:#fff}
.p-view a:hover::after{height:100%}

/* ---------- centre : image + floating labels ---------- */
.show-image .pimg{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 20px rgba(0,0,0,.05));
  transform:translateY(120px);opacity:0;
  transition:transform .6s var(--ease),opacity .6s ease;
}
.fl{
  position:absolute;opacity:0;transition:opacity .5s ease;
  background:var(--accent);color:#fff;white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border-radius:999px;box-shadow:0 10px 26px rgba(245,81,30,.24);
}
.fl.n1{top:8%;left:2%}
.fl.n2{top:44%;right:0}
.fl.n3{bottom:10%;left:8%}
@keyframes flFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- staggered reveal on .on ---------- */
.show-text .box.on  .p-logo           {transform:none;opacity:1;transition-delay:0s}
.show-text .box.on  .p-sub            {transform:none;opacity:1;transition-delay:.15s}
.show-text .box.on  .p-name .ln>span  {transform:none;            transition-delay:.3s}
.show-text .box.on  .p-tags           {transform:none;opacity:1;transition-delay:.45s}
.show-text .box.on  .p-view           {transform:none;opacity:1;transition-delay:.4s}
.show-image .box.on .pimg             {transform:none;opacity:1;transition-delay:0s}
.show-image .box.on .fl.n1{opacity:1;transition-delay:.5s;animation:flFloat 3s ease-in-out 1s infinite}
.show-image .box.on .fl.n2{opacity:1;transition-delay:.7s;animation:flFloat 3s ease-in-out 1.2s infinite}
.show-image .box.on .fl.n3{opacity:1;transition-delay:.9s;animation:flFloat 3s ease-in-out 1.4s infinite}

/* section not yet revealed → force everything back to its hidden state */
.sec-showcase.none .p-logo,.sec-showcase.none .p-sub,
.sec-showcase.none .p-tags,.sec-showcase.none .p-view{
  transform:translateY(40px);opacity:0;transition-delay:0s}
.sec-showcase.none .p-name .ln>span{transform:translateY(110%);transition-delay:0s}
.sec-showcase.none .pimg{transform:translateY(120px);opacity:0;transition-delay:0s}
.sec-showcase.none .fl{opacity:0;animation:none;transition-delay:0s}

/* ---------- right : vertical thumbnails ----------
   Landscape cards (~5:4) that fill the column width, product shot almost
   edge-to-edge. Active card turns grey with the name over a faded shot. */
.show-thumbs .swiper-wrapper{display:flex;flex-direction:column;gap:12px;height:auto;will-change:transform}
.show-thumbs .swiper-slide{height:116px;width:100%;cursor:pointer;flex:0 0 auto}
.pthumb{
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;
  border-radius:10px;background:#fff;overflow:hidden;
  transition:background .4s var(--ease);
}
.pthumb img{width:100%;height:100%;object-fit:contain;padding:16px;
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.pthumb .pt-name{
  position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:11.5px;letter-spacing:-.01em;line-height:1.2;
  color:#fff;text-align:center;
  opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
/* active slide → grey card, product name over a faded shot */
.swiper-slide.is-on .pthumb{background:#6f6f6f}
.swiper-slide.is-on .pthumb img{opacity:.3}
.swiper-slide.is-on .pthumb .pt-name{opacity:1}
.swiper-slide:not(.is-on) .pthumb:hover img{transform:scale(1.05)}

/* ---------- counter ---------- */
.show-counter{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(22px,3.4vh,34px);
  width:100%;max-width:var(--wrap);padding:0 var(--pad);
  display:flex;align-items:center;gap:10px;
  font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.show-counter b{color:var(--accent)}
.show-counter i{width:46px;height:1px;background:var(--line);display:block}

/* ---------- responsive ---------- */
@media (max-width:1439px){
  .show-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;row-gap:24px;
    padding-top:clamp(130px,18vh,190px);padding-bottom:clamp(28px,4vh,48px)}
  .show-text,.show-image{height:min(46vh,420px)}
  /* back into the flow as a horizontal rail under the product */
  .show-thumbs{position:static;width:auto;grid-column:1/-1;height:150px}
  .show-thumbs .swiper{flex-direction:row;justify-content:flex-start;overflow-x:auto}
  .show-thumbs .swiper-wrapper{flex-direction:row}
  .show-thumbs .swiper-slide{width:186px;height:150px}
  .pthumb .pt-name{font-size:14px}
}
@media (max-width:900px){
  .show-head{padding-top:calc(var(--hd-h) + 18px)}
  .show-head h3{font-size:19px;margin-top:10px}
  .show-grid{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:14px;
    padding-top:clamp(104px,17vh,150px);padding-bottom:24px}
  .show-image{height:min(28vh,240px);order:-1}
  .show-text{height:auto;min-height:300px}
  .p-name .ln>span{font-size:clamp(40px,12.5vw,72px)}
  .fl{font-size:10px;padding:6px 10px}
  .fl.n1{top:2%;left:0}.fl.n2{top:40%;right:0}.fl.n3{bottom:2%;left:4%}
  .show-thumbs{height:124px}
  .show-thumbs .swiper-slide{width:155px;height:124px}
  .pthumb{border-radius:12px}
  .pthumb img{padding:8px}
  .pthumb .pt-name{font-size:12px}
  .show-counter{display:none}
}

/* ══════════════════════════════════════════════════════════════
   ④ GROWTH
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   ③·5 PRODUCT MARQUEE  (infinite horizontal loop)
   pinSpacing:false on §③ → this section slides up OVER it,
   so it must be opaque and stacked above.
   ══════════════════════════════════════════════════════════════ */
.sec-marquee{position:relative;z-index:2;background:var(--white);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(28px,4vh,52px) 0;overflow:hidden}
.mq{display:flex;width:max-content;will-change:transform}
.mq-row{display:flex;align-items:center;flex:0 0 auto}
.mq-item{display:flex;align-items:center;gap:18px;padding:0 clamp(26px,3vw,56px)}
.mq-item img{height:clamp(56px,5vw,84px);width:auto;object-fit:contain}
.mq-item span{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(15px,1.25vw,20px);letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.mq-item::after{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-left:clamp(26px,3vw,56px);flex:0 0 auto}
@media (prefers-reduced-motion:reduce){ .mq{transform:none!important} }

/* ══════════════════════════════════════════════════════════════
   ④ GROWTH
   ══════════════════════════════════════════════════════════════ */
.sec-growth{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.5vh,36px);padding:clamp(48px,6vh,90px) 0;background:var(--white);border-top:1px solid var(--line);--blue:#2e5aac;--navy:#0e2a47}
.sec-growth .growth-inner{width:100%}
/* ── moving world map (ported from ver1 Global Network) ── */
.growth-map{width:100%;max-width:none;margin:0;padding:0 clamp(10px,1.2vw,28px)}
.gnmap-stage{position:relative;width:100%;aspect-ratio:2120/742}
.gnmap-dots{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.28}
.gnmap-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arcpath{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:0.1 7}
.arc-draw{animation:march 1.15s linear infinite}
.arc-faint{stroke-width:0.55;opacity:.28;stroke-dasharray:1.4 5.6}
@keyframes march{to{stroke-dashoffset:-7.1}}
.mlbl{position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none;white-space:nowrap;text-align:center}
.mlbl .pt{position:relative;display:block;width:6px;height:6px;border-radius:50%;background:var(--blue);margin:0 auto;box-shadow:0 0 0 3px rgba(46,90,172,.16);animation:twk 2.4s ease-in-out infinite}
.mlbl.hq .pt{width:11px;height:11px;background:var(--navy);box-shadow:0 0 0 4px rgba(46,90,172,.18),0 0 16px rgba(46,90,172,.45);animation:twk 2s ease-in-out infinite}
.mlbl .pt::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:mping 2.8s ease-out infinite}
@keyframes mping{0%{transform:scale(1);opacity:.5}100%{transform:scale(4.2);opacity:0}}
@keyframes twk{0%,100%{box-shadow:0 0 0 3px rgba(46,90,172,.14),0 0 5px rgba(46,90,172,.4)}50%{box-shadow:0 0 0 5px rgba(46,90,172,.22),0 0 18px rgba(74,134,214,.95)}}
.mlbl.dot .pt{width:3.5px;height:3.5px;background:#8aade2;box-shadow:0 0 0 2px rgba(46,90,172,.09);animation:twkS 3.2s ease-in-out infinite}
@keyframes twkS{0%,100%{box-shadow:0 0 0 2px rgba(46,90,172,.07)}50%{box-shadow:0 0 0 3px rgba(46,90,172,.13),0 0 8px rgba(74,134,214,.5)}}
.mlbl.dot .pt::after{animation:mping 3.6s ease-out infinite}
.gn-spark{position:absolute;width:var(--sz,2px);height:var(--sz,2px);border-radius:50%;background:#6f9bea;box-shadow:0 0 7px rgba(74,134,214,.9);opacity:0;z-index:2;pointer-events:none;animation:gnspark 3s ease-in-out infinite}
@keyframes gnspark{0%,100%{opacity:0;transform:scale(.35)}50%{opacity:.95;transform:scale(1)}}
.mlbl .tx{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:11.5px;font-weight:700;letter-spacing:.01em;color:#2b3b56;text-shadow:0 1px 8px rgba(255,255,255,.9);white-space:nowrap}
.mlbl.hq .tx{color:var(--navy);font-size:13px}
.mlbl.dot .tx{top:calc(100% + 4px);font-size:9.5px;font-weight:600;color:#6a7c97}
@media(max-width:900px){.growth-map .mlbl .tx{display:none}.growth-map .mlbl.hq .tx{display:block}}
.growth-inner{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
  column-gap:clamp(32px,5vw,96px);align-items:start}

/* --- left : dl --- */
.growth-copy{margin:0}
.gr-dt{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,3.1vw,54px);line-height:1;letter-spacing:-.03em;margin:0 0 22px}
.gr-dt .eyebrow{display:block;margin-bottom:20px}
.gr-dd{margin:0;max-width:400px;font-size:15px;line-height:1.68;color:var(--muted)}

/* --- right : 3 stats --- */
.growth-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,36px)}
.gs{padding-top:0}
.gs-label{display:block;margin-top:14px;font-size:13px;line-height:1.45;color:var(--muted)}

/* --- odometer digits --- */
.num{
  display:flex;align-items:flex-end;
  font-family:var(--sans);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(48px,5.4vw,96px);line-height:1;
}
.num .dg{
  display:block;height:1em;overflow:hidden;   /* the digit window */
}
.num .dg-strip{display:block;will-change:transform}
.num .dg-strip span{display:block;height:1em;line-height:1}
.num .sfx{color:var(--accent);margin-left:.04em}

@media (max-width:1240px){
  .growth-inner{grid-template-columns:1fr;row-gap:clamp(40px,6vh,72px)}
  .gr-dd{max-width:none}
}
@media (max-width:700px){
  .growth-stats{grid-template-columns:1fr;gap:0}
  .gs{padding:22px 0}
  .gs:last-child{border-bottom:0}
  .num{font-size:clamp(44px,13vw,68px)}
}

/* ══════════════════════════════════════════════════════════════
   ⑤ HORIZON  (horizontal scroll, pinned — desktop only ≥501px)
   ══════════════════════════════════════════════════════════════ */
.sec-horizon{position:relative;z-index:3;background:var(--ivory);color:var(--ink);border-top:1px solid var(--line)}
.hz-viewport{position:relative;height:100vh;min-height:660px;overflow:hidden;
  display:flex;align-items:center}

/* headline — right-aligned statement above the track */
.hz-head{position:absolute;top:clamp(48px,8vh,96px);left:50%;transform:translateX(-50%);
  z-index:3;width:100%;max-width:var(--wrap);padding:0 var(--pad);pointer-events:none;
  text-align:right}
.hz-head h2{font-size:clamp(19px,1.7vw,30px);line-height:1.4;font-weight:700;
  text-transform:none;letter-spacing:-.02em}
.hz-head .hzline{display:block;will-change:transform,opacity}

/* --- track ---
   The right padding guarantees the track is meaningfully wider than the
   viewport on large monitors; without it the x travel collapses to ~0px on a
   wide screen and the pinned section just looks frozen. */
.horizon{display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(48px,7vw,150px);
  padding:clamp(110px,17vh,200px) max(var(--pad),18vw) 0 var(--pad);
  will-change:transform}

/* --- panel : text column + image card --- */
.cont{flex:0 0 auto;display:grid;
  grid-template-columns:minmax(260px,1fr) clamp(280px,25vw,420px);
  gap:clamp(30px,4vw,90px);align-items:stretch;
  width:clamp(600px,58vw,940px);
  height:min(62vh,560px)}

/* text column : wordmark on top, topics pinned to the bottom */
.cont-text{display:flex;flex-direction:column;justify-content:space-between;padding:6px 0}

.esg-mark{display:flex;flex-direction:column;
  transform:translateY(40px);opacity:0;
  transition:transform .6s var(--ease),opacity .6s ease}
.esg-mark .em{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,3.1vw,58px);line-height:1.06;letter-spacing:-.03em;
  color:#dcdad7;                        /* inactive */
  transition:color .6s var(--ease);
}
.esg-mark .em.is-on{color:var(--ink)}   /* the panel's own item */

.esg-topics{
  transform:translateY(40px);opacity:0;
  transition:transform .6s var(--ease),opacity .6s ease}
.esg-topics li{font-size:14.5px;line-height:1.85;color:var(--muted)}

/* image card */
.cont-card{position:relative;margin:0;overflow:hidden;border-radius:18px;
  height:100%;background:#e9e7e4}
.cont-card img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.16);opacity:0;
  transition:transform 1.2s var(--ease),opacity .8s ease}
.cont-card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%)}
.cont-card figcaption{position:absolute;left:26px;right:26px;bottom:26px;z-index:2;color:#fff;
  transform:translateY(24px);opacity:0;
  transition:transform .6s var(--ease),opacity .6s ease}
.cont-card figcaption i{display:block;font-style:normal;font-size:12.5px;
  color:rgba(255,255,255,.85);margin-bottom:8px}
.cont-card figcaption b{display:block;font-family:var(--sans);font-weight:800;
  text-transform:uppercase;font-size:clamp(18px,1.5vw,26px);letter-spacing:-.02em}

/* --- .on : panel is 70% inside the viewport --- */
.cont.on .esg-mark{transform:none;opacity:1}
.cont.on .cont-card img{transform:scale(1);opacity:1;transition-delay:.1s}
.cont.on .esg-topics{transform:none;opacity:1;transition-delay:.25s}
.cont.on .cont-card figcaption{transform:none;opacity:1;transition-delay:.4s}

/* --- mobile (≤500px) : stack vertically, no pin, no horizontal scroll --- */
@media (max-width:500px){
  .hz-viewport{height:auto;min-height:0;display:block;
    padding:clamp(72px,12vh,110px) 0 clamp(56px,9vh,90px)}
  .hz-head{position:static;transform:none;padding:0 var(--pad);margin-bottom:44px;
    text-align:left}
  .horizon{display:block;padding:0 var(--pad)}
  .cont{display:block;width:auto;height:auto;margin-bottom:64px;transform:none!important}
  .cont:last-child{margin-bottom:0}
  .esg-mark .em{font-size:clamp(26px,8.5vw,40px)}
  .esg-topics{margin-top:20px}
  .cont-card{height:auto;aspect-ratio:4/5;margin-top:26px}
}

/* ══════════════════════════════════════════════════════════════
   ⑥ NEWS  (+ custom cursor)
   ══════════════════════════════════════════════════════════════ */
.sec-news{position:relative;z-index:4;background:var(--white);border-top:1px solid var(--line);
  padding:clamp(96px,12vh,168px) 0;overflow:hidden}
.news-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(30px,4vh,52px)}
.news-head{margin-top:16px;font-size:clamp(32px,4vw,72px);line-height:.98}

.news-tools{display:flex;align-items:center;gap:22px;flex:0 0 auto}
.news-all{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--ink);transition:color .3s,border-color .3s}
.news-all:hover{color:var(--accent);border-color:var(--accent)}

/* --- list rows --- */
.news-list{border-top:1px solid var(--line)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{
  position:relative;display:grid;align-items:center;
  grid-template-columns:150px 1fr 130px 40px;
  gap:clamp(14px,2vw,40px);
  padding:clamp(20px,2.6vh,30px) 0;
  transition:padding .4s var(--ease);
}
.news-list a::before{
  content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background:var(--accent);transition:width .5s var(--ease);
}
.news-list a:hover::before{width:100%}
.news-list a:hover{padding-left:14px;padding-right:14px}

.nl-cat{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);transition:color .3s var(--ease)}
.nl-title{font-family:var(--body);font-size:clamp(16px,1.35vw,21px);font-weight:600;
  line-height:1.35;letter-spacing:-.015em;text-transform:none;
  transition:color .3s var(--ease)}
.nl-date{font-size:13px;color:var(--muted);letter-spacing:.02em}
.nl-arrow{justify-self:end;font-size:17px;color:var(--muted);
  opacity:0;transform:translateX(-10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),color .3s var(--ease)}

.news-list a:hover .nl-cat{color:var(--accent)}
.news-list a:hover .nl-title{color:var(--accent)}
.news-list a:hover .nl-arrow{opacity:1;transform:none;color:var(--accent)}

@media (max-width:900px){
  .news-copy{flex-direction:column;align-items:flex-start}
  .news-list a{grid-template-columns:1fr auto;gap:6px 16px;padding:20px 0}
  .nl-cat{grid-column:1/2}
  .nl-date{grid-column:2/3;justify-self:end}
  .nl-title{grid-column:1/-1}
  .nl-arrow{display:none}
  .news-list a:hover{padding-left:0;padding-right:0}
}

/* --- custom cursor --- */
._cursor{
  position:fixed;top:0;left:0;z-index:800;
  width:92px;height:92px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  pointer-events:none;opacity:0;
  will-change:transform,opacity;   /* transform is owned by GSAP — never set it here */
}
/* hide the native cursor over the list while ours is showing */
.news-list.is-custom,.news-list.is-custom a{cursor:none}
@media (hover:none),(max-width:900px){ ._cursor{display:none} .news-list.is-custom,.news-list.is-custom a{cursor:auto} }

/* ══════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════ */
.ft{position:relative;z-index:2;background:var(--ink);color:#fff;
  padding:clamp(70px,9vh,130px) 0 40px}

.ft-top{position:absolute;top:clamp(28px,4vh,52px);
  right:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad)));
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.6);
  padding:10px 16px;border:1px solid rgba(255,255,255,.22);border-radius:999px;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.ft-top:hover{color:#fff;border-color:var(--accent);background:var(--accent)}
.ft-top span{transition:transform .3s var(--ease)}
.ft-top:hover span{transform:translateY(-3px)}

.ft-claim{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,62px);line-height:1;letter-spacing:-.03em;
  padding-bottom:clamp(44px,6vh,80px);border-bottom:1px solid rgba(255,255,255,.14)}

.ft-grid{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(0,1.4fr);
  gap:clamp(36px,4vw,90px);padding:clamp(44px,6vh,76px) 0}

/* left : location + contact */
.ft-info{display:flex;flex-direction:column;gap:34px}
.ft-key{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.ft-item{margin-bottom:16px}
.ft-item em{display:block;font-style:normal;font-size:13px;font-weight:700;
  color:rgba(255,255,255,.55);margin-bottom:6px}
.ft-item address,.ft-item p{font-style:normal;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,.88)}
.ft-item a{transition:color .3s var(--ease)}
.ft-item a:hover{color:var(--accent)}

/* right : sitemap */
.ft-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,36px)}
.fcol h5{font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:20px;color:#fff}
.fcol a{display:block;font-size:15px;line-height:1.5;padding:6px 0;
  color:rgba(255,255,255,.6);transition:color .3s var(--ease)}
.fcol a:hover{color:#fff}
.fcol h5 a{color:#fff;padding:0}

/* family site */
.ft-family{display:flex;align-items:center;gap:clamp(20px,3vw,54px);flex-wrap:wrap;
  padding:26px 0;border-top:1px solid rgba(255,255,255,.14)}
.ft-family .ft-key{margin-bottom:0}
.ft-family-links{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,36px)}
.ft-family-links a{font-size:13px;color:rgba(255,255,255,.6);transition:color .3s}
.ft-family-links a:hover{color:#fff}

/* legal */
.ft-legal{padding:24px 0;border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;line-height:1.9;color:rgba(255,255,255,.45)}
.ft-legal em{font-style:normal;color:rgba(255,255,255,.7);margin-right:6px}
.ft-policy{display:inline-block;margin-right:20px;margin-bottom:10px;
  font-size:12px;font-weight:700;color:rgba(255,255,255,.75);transition:color .3s}
.ft-policy:hover{color:var(--accent)}

/* bottom bar */
.ft-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.ft-logo{font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:-.02em;color:#fff}
.ft-logo span{color:var(--accent);margin-left:3px}
.ft-copy{font-size:12px;color:rgba(255,255,255,.5)}
.ft-langs{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.5)}
.ft-langs b{color:var(--accent)}
.ft-langs span{cursor:pointer;transition:color .3s}
.ft-langs span:hover{color:#fff}
.ft-langs i{font-style:normal;opacity:.35}

@media (max-width:1100px){
  .ft-grid{grid-template-columns:1fr;row-gap:48px}
}