/* ==========================================================================
   RF International Supply — Stylesheet
   Design language: "light ground, floating panels"
     · Page ground is a cool off-white; content sits on rounded white panels
     · Photography carries each section; navy is ink + scrim, not background
     · Company proof stays crisp monospace (the company is knowable)
   Palette unchanged: navy #0B2A4A primary · emerald #10B981 accent
   Mobile-first. Breakpoints at 640 / 900 / 1200.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --navy-900:#061A2E;
  --navy-800:#0B2A4A;   /* 主色 */
  --navy-700:#123A63;
  --navy-600:#1B4E80;
  --emerald:#10B981;    /* 强调色 */
  --emerald-dk:#059669;
  --emerald-lt:#6EE7B7;
  --white:#F8FAFC;
  --ink:#0F172A;
  --slate:#475569;
  --slate-lt:#94A3B8;
  --line:#E2E8F0;
  --line-dk:rgba(255,255,255,.14);

  /* light ground + floating panel */
  --ground:#EDEFEA;      /* 页面底色：带一点暖调的灰白 */
  --panel:#FFFFFF;
  --panel-2:#F6F7F4;

  --ff-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --pad:1.1rem;
  --maxw:1240px;
  --r:16px;      /* image + card radius */
  --r-sm:11px;

  /* vertical rhythm of a full-width band — one place to tune */
  --band-y:2.75rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hdr-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--ff-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--ff-display);font-weight:700;line-height:1.06;letter-spacing:-.028em;margin:0}
p{margin:0}
:focus-visible{outline:2.5px solid var(--emerald-dk);outline-offset:3px;border-radius:4px}
.sec--dark :focus-visible,.drawer :focus-visible{outline-color:var(--emerald-lt)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
@media (min-width:640px){:root{--pad:1.5rem;--band-y:3.5rem}}
@media (min-width:900px){:root{--band-y:4.5rem}}
@media (min-width:1200px){:root{--pad:2rem;--band-y:5.25rem}}

/* ---------- Slash eyebrow (reference language: /LABEL) ---------- */
.eyebrow{
  font-family:var(--ff-mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate);
  display:flex;align-items:center;gap:.1rem;margin-bottom:1.1rem;
}
.eyebrow::before{content:"/";color:var(--emerald-dk);margin-right:.15rem;font-weight:500}
.sec--dark .eyebrow{color:rgba(248,250,252,.72)}
.sec--dark .eyebrow::before{color:var(--emerald-lt)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ff-body);font-size:.92rem;font-weight:600;
  padding:.82rem 1.4rem;border-radius:99px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1.2;
  transition:transform .18s var(--ease),background .18s,border-color .18s,box-shadow .18s,color .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--dark{background:var(--navy-800);color:var(--white)}
.btn--dark:hover{background:var(--navy-700)}
.btn--wa{background:var(--emerald);color:#04231A;box-shadow:0 6px 20px -8px rgba(16,185,129,.65)}
.btn--wa:hover{background:var(--emerald-dk);color:#fff;box-shadow:0 10px 26px -8px rgba(16,185,129,.6)}
.btn--ghost{border-color:rgba(15,23,42,.18);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--navy-800);background:rgba(11,42,74,.05)}
.sec--dark .btn--ghost{border-color:var(--line-dk);color:var(--white)}
.sec--dark .btn--ghost:hover{border-color:var(--emerald-lt);background:rgba(255,255,255,.08)}
.btn--outline{border-color:rgba(15,23,42,.2);color:var(--navy-800);background:transparent}
.btn--outline:hover{background:var(--navy-800);color:var(--white);border-color:var(--navy-800)}
.btn--disabled{background:transparent;border:1.5px dashed rgba(255,255,255,.24);
  color:rgba(248,250,252,.55);cursor:not-allowed}
.btn--disabled:hover{transform:none}
.btn svg{width:17px;height:17px;flex:none}

/* small round arrow used on "Learn more" style links */
.lnk{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;
  text-decoration:none;color:var(--ink);transition:gap .2s var(--ease),color .2s;
  min-height:44px;
}
.lnk::after{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:background-color .2s;
}
.lnk:hover{gap:.7rem;color:var(--navy-700)}
.lnk:hover::after{background-color:var(--emerald-dk)}

/* ==========================================================================
   HEADER — floating pill, nav centred on desktop
   ========================================================================== */
.hdr{position:fixed;inset:.6rem 0 auto 0;z-index:80;pointer-events:none}
@media (min-width:900px){.hdr{inset:.85rem 0 auto 0;--hdr-h:68px}}
.hdr__in{
  pointer-events:auto;position:relative;
  display:flex;align-items:center;gap:.75rem;
  height:var(--hdr-h);padding:0 .7rem 0 .85rem;
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px);
  border:1px solid rgba(15,23,42,.07);border-radius:99px;
  box-shadow:0 6px 28px -14px rgba(6,26,46,.35);
}
@media (min-width:900px){.hdr__in{padding:0 .7rem 0 1.35rem}}

.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);min-width:0;flex:none}
.brand__logo{width:30px;height:30px;flex:none;border-radius:7px}
.brand__txt{font-family:var(--ff-display);font-weight:700;font-size:.9rem;letter-spacing:-.02em;
  white-space:nowrap}
.brand__full{display:none}
.brand__abbr{display:inline}
@media (min-width:560px){.brand__full{display:inline}.brand__abbr{display:none}}
@media (min-width:900px){.brand__txt{font-size:.95rem}}

/* desktop nav — centred in the pill */
.nav{display:none}
@media (min-width:900px){
  .nav{
    display:flex;gap:1.15rem;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  }
}
/* the nav is centred absolutely, so it cannot push the brand aside — it would
   simply overlap it. Widen the gap only once there is room for it. */
@media (min-width:1100px){.nav{gap:2rem}}
.nav a{
  font-size:.88rem;font-weight:500;color:var(--slate);text-decoration:none;
  padding:.35rem 0;position:relative;transition:color .2s;white-space:nowrap;
}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--emerald-dk);transition:right .28s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}

.hdr__right{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex:none}
.hdr__cta{display:none}
@media (min-width:900px){
  .hdr__cta{display:inline-flex;padding:.6rem 1.15rem;font-size:.86rem}
}

/* ---------- Language: globe + dropdown ---------- */
.lang{position:relative;flex:none}
.lang__btn{
  display:inline-flex;align-items:center;gap:.28rem;
  height:44px;min-width:44px;padding:0 .55rem;
  background:transparent;border:1px solid rgba(15,23,42,.13);border-radius:99px;
  color:var(--slate);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.lang__btn:hover{color:var(--ink);border-color:rgba(15,23,42,.28);background:rgba(15,23,42,.04)}
.lang__btn svg{width:17px;height:17px;flex:none}
.lang__code{font-family:var(--ff-mono);font-size:.68rem;font-weight:500;letter-spacing:.04em;
  display:none}
@media (min-width:400px){.lang__code{display:inline}}
.lang__btn::after{
  content:"";width:0;height:0;flex:none;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.7;transition:transform .22s var(--ease);
}
.lang__btn[aria-expanded="true"]::after{transform:rotate(180deg)}

.lang__menu{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:5;
  /* wide enough for the longest label (Bahasa Melayu) plus the tick — the
     label must never wrap, so the menu sizes to its content instead. */
  min-width:max-content;padding:.3rem;
  background:var(--panel);border:1px solid rgba(15,23,42,.09);border-radius:13px;
  box-shadow:0 14px 38px -12px rgba(6,26,46,.3);
  display:grid;gap:1px;
  /* the menu drops from under the button it belongs to — origin at the top-right
     corner so it reads as unfolding out of the globe, not floating in. */
  transform-origin:top right;
  opacity:0;transform:translateY(-6px) scale(.96);visibility:hidden;
  transition:opacity .18s var(--ease),transform .22s var(--ease),visibility .22s;
}
.lang__menu.on{opacity:1;transform:none;visibility:visible}
/* [hidden] stays in the markup for the no-JS case; the class drives the motion. */
.lang__menu[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .lang__menu{transition:opacity .01s}
  .lang__menu,.lang__menu.on{transform:none}
}
.lang__menu button{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  width:100%;min-height:44px;padding:.4rem .7rem;
  font-family:var(--ff-body);font-size:.88rem;font-weight:500;text-align:left;
  background:transparent;border:0;border-radius:9px;color:var(--ink);cursor:pointer;
  transition:background .16s;
  white-space:nowrap;
}
.lang__menu button:hover{background:rgba(15,23,42,.05)}
.lang__menu button[aria-checked="true"]{color:var(--emerald-dk);font-weight:600}
.lang__menu button[aria-checked="true"]::after{
  content:"";width:15px;height:15px;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   BURGER + SIDE DRAWER
   ========================================================================== */
.burger{
  width:44px;height:44px;display:grid;place-content:center;gap:5px;flex:none;
  background:transparent;border:1px solid rgba(15,23,42,.13);border-radius:99px;
  cursor:pointer;padding:0;transition:background .2s,border-color .2s;
}
.burger:hover{background:rgba(15,23,42,.04)}
.burger span{display:block;width:17px;height:1.7px;background:var(--ink);
  border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}
@media (min-width:900px){.burger{display:none}}

/* scrim behind the drawer */
.scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(6,26,46,.45);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;
}
.scrim.on{opacity:1;visibility:visible}
@media (min-width:900px){.scrim{display:none}}

/* drawer slides in from the right */
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(320px,86vw);
  background:var(--panel);
  border-left:1px solid rgba(15,23,42,.08);
  box-shadow:-18px 0 48px -20px rgba(6,26,46,.42);
  transform:translateX(100%);
  /* visibility must be in the transition list, otherwise it flips to hidden the
     instant .on is removed and the slide-out never gets drawn. Delaying it by
     the length of the slide keeps the panel painted all the way off-screen. */
  transition:transform .38s var(--ease),visibility 0s linear .38s;
  display:flex;flex-direction:column;
  padding:1.1rem 1.15rem calc(1.25rem + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;
}
.drawer.on{
  transform:translateX(0);visibility:visible;
  /* opening: show it immediately, then slide */
  transition:transform .42s var(--ease),visibility 0s linear 0s;
}
@media (min-width:900px){.drawer{display:none}}

/* The panel slides, then its contents arrive a beat later, top to bottom.
   The stagger is what makes the drawer feel like it opens rather than appears.
   Closing runs the same motion in reverse: contents leave first (no delay, so
   they clear quickly), then the panel slides out from under them. */
.drawer__top,.drawer nav a,.drawer__cta,.drawer__foot{
  opacity:0;transform:translateX(18px);
  transition:opacity .2s var(--ease),transform .24s var(--ease);
  transition-delay:0s;
}
.drawer.on .drawer__top,
.drawer.on nav a,
.drawer.on .drawer__cta,
.drawer.on .drawer__foot{
  opacity:1;transform:none;
  transition:opacity .34s var(--ease),transform .44s var(--ease);
}
.drawer.on .drawer__top{transition-delay:.10s}
.drawer.on nav a:nth-child(1){transition-delay:.15s}
.drawer.on nav a:nth-child(2){transition-delay:.20s}
.drawer.on nav a:nth-child(3){transition-delay:.25s}
.drawer.on nav a:nth-child(4){transition-delay:.30s}
.drawer.on nav a:nth-child(5){transition-delay:.35s}
.drawer.on nav a:nth-child(6){transition-delay:.40s}
.drawer.on .drawer__cta{transition-delay:.45s}
.drawer.on .drawer__foot{transition-delay:.50s}

@media (prefers-reduced-motion:reduce){
  .drawer,.drawer.on{transition:none}
  .drawer__top,.drawer nav a,.drawer__cta,.drawer__foot,
  .drawer.on .drawer__top,.drawer.on nav a,
  .drawer.on .drawer__cta,.drawer.on .drawer__foot{
    opacity:1;transform:none;transition:none;transition-delay:0s !important}
}

.drawer__top{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1.4rem}
.drawer__close{
  width:44px;height:44px;flex:none;display:grid;place-content:center;
  background:transparent;border:1px solid rgba(15,23,42,.13);border-radius:99px;
  cursor:pointer;color:var(--ink);transition:background .2s}
.drawer__close:hover{background:rgba(15,23,42,.05)}
.drawer__close svg{width:17px;height:17px}
.drawer__ttl{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate-lt)}

.drawer nav{display:grid}
.drawer nav a{
  font-family:var(--ff-display);font-size:1.28rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
  min-height:56px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(15,23,42,.08);transition:color .2s;
}
.drawer nav a::after{
  content:"";width:15px;height:15px;flex:none;opacity:.35;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease),opacity .2s;
}
.drawer nav a:hover{color:var(--emerald-dk)}
.drawer nav a:hover::after{transform:translateX(3px);opacity:.6}
.drawer__cta{margin-top:1.5rem;width:100%;padding:1rem 1.4rem;font-size:.95rem}
.drawer__foot{margin-top:auto;padding-top:1.5rem}
.drawer__foot p{font-family:var(--ff-mono);font-size:.72rem;line-height:1.7;
  color:var(--slate-lt);white-space:pre-line}

/* ==========================================================================
   HERO — photo-led, bleeds to the bottom of the panel
   ========================================================================== */
/* the hero sits directly under the fixed header — no card, no gap */
.hero{background:var(--panel);padding-top:calc(var(--hdr-h) + 2.25rem);
  padding-bottom:2.5rem}
@media (min-width:900px){.hero{padding-top:calc(68px + 3rem);padding-bottom:4rem}}

.hero__panel{overflow:hidden}
.hero__head{padding-bottom:1.75rem}
@media (min-width:640px){.hero__head{padding-bottom:2rem}}
@media (min-width:900px){
  .hero__head{display:grid;grid-template-columns:1.35fr .8fr;gap:3.5rem;
    align-items:end;padding-bottom:2.25rem}
}
.hero h1{font-size:clamp(2.3rem,9.2vw,3.2rem);letter-spacing:-.035em}
@media (min-width:900px){.hero h1{font-size:clamp(3.1rem,4.9vw,4.35rem)}}
.hero h1 em{font-style:normal;color:var(--emerald-dk)}
.hero__aside{margin-top:1.5rem}
@media (min-width:900px){.hero__aside{margin-top:0;padding-bottom:.5rem}}
.hero__sub{font-size:1rem;color:var(--slate);max-width:42ch;margin-bottom:1.35rem}
.hero__btns{display:flex;flex-wrap:wrap;gap:.65rem}

/* the photo */
/* the hero photo is bounded by the same column the copy uses — never full-bleed,
   so image width and text width read as one measure. */
.hero__media{position:relative;aspect-ratio:16/10;background:var(--panel-2);
  border-radius:var(--r);overflow:hidden}
@media (min-width:900px){.hero__media{aspect-ratio:21/7}}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{ /* subtle navy grade so the palette reads through the photo */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,42,74,.16) 0%,transparent 34%,rgba(6,26,46,.22) 100%);
}
.hero__stamp{
  position:absolute;left:1rem;bottom:1.1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--ff-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--white);background:rgba(6,26,46,.62);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:.42rem .8rem;
}
.hero__stamp::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--emerald);flex:none}
@media (min-width:900px){.hero__stamp{left:1.5rem;bottom:1.5rem}}

/* ==========================================================================
   BUSINESS INDEX — 主要业务
   --------------------------------------------------------------------------
   The three lines of business used to be a hairline row tucked under the hero,
   where it read as a footnote. It is now its own band with its own heading.
   The 01/02/03 numbering is the company's own list order, not decoration.
   ========================================================================== */
.lines__head{display:grid;gap:.9rem;margin-bottom:1.9rem}
@media (min-width:900px){
  .lines__head{grid-template-columns:1.1fr .9fr;gap:3rem;align-items:end;margin-bottom:2.5rem}
}
.lines__lead{font-size:1.02rem;color:var(--slate);max-width:46ch}

.lines__grid{display:grid;gap:.85rem}
@media (min-width:760px){.lines__grid{grid-template-columns:repeat(3,1fr)}}

.line{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;
  align-items:start;align-content:start;
  /* the arrow lives in the bottom-right corner — reserve its lane so a card
     with an extra flag (MintLoop) never runs into it */
  padding:1.5rem 3.4rem 1.4rem 1.4rem;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .24s var(--ease),border-color .24s,box-shadow .24s,background .24s;
}
.line:hover{transform:translateY(-4px);border-color:var(--navy-800);
  box-shadow:0 20px 40px -22px rgba(6,26,46,.5)}
.line__no{
  grid-row:1 / span 2;
  font-family:var(--ff-mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;
  color:var(--emerald-dk);padding-top:.4rem;
}
.line__body{display:grid;gap:.35rem;min-width:0}
.line__n{font-family:var(--ff-display);font-size:1.22rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
/* text-wrap:balance keeps a longer translation (Malay runs ~20% longer than
   English here) from dropping a single orphan word onto its own line. */
.line__d{font-size:.88rem;color:var(--slate);line-height:1.55;text-wrap:balance}
.line__flag{
  justify-self:start;margin-top:.35rem;
  font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy-700);background:rgba(11,42,74,.07);
  border-radius:99px;padding:.26rem .6rem;
}
/* the arrow sits in the corner and steps out on hover */
.line__go{
  position:absolute;right:1.25rem;bottom:1.3rem;
  width:26px;height:26px;border-radius:50%;
  background:var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/13px no-repeat;
  opacity:.22;transform:translateX(-4px);
  transition:opacity .24s var(--ease),transform .24s var(--ease),background-color .24s;
}
.line:hover .line__go{opacity:1;transform:translateX(0);background-color:var(--emerald-dk)}

/* ==========================================================================
   SECTION FRAME — full-bleed bands, stacked edge to edge
   --------------------------------------------------------------------------
   No floating cards: each section is a full-width band. Bands are told apart
   by ground colour (paper / ground / navy) and a single hairline rule.
   Radius is reserved for side-by-side cards, buttons and images.
   ========================================================================== */
.sec{padding:var(--band-y) 0}
.sec--paper{background:var(--panel)}
.sec--ground{background:var(--ground)}
.sec--dark{background:var(--navy-900);color:var(--white)}
.sec--dark h2,.sec--dark h3{color:var(--white)}
/* hairline only between two bands sharing the same ground */
.sec--paper + .sec--paper,
.sec--ground + .sec--ground{border-top:1px solid var(--line)}

.sec__head{max-width:62ch;margin-bottom:2rem}
.sec h2{font-size:clamp(1.9rem,6.6vw,2.55rem)}
@media (min-width:900px){.sec h2{font-size:clamp(2.4rem,3.4vw,3.1rem)}}
.sec__lead{font-size:1.02rem;color:var(--slate);margin-top:.85rem}
.sec--dark .sec__lead{color:rgba(248,250,252,.76)}
.sec__body{color:var(--slate);margin-top:1rem;max-width:62ch}
.sec--dark .sec__body{color:rgba(248,250,252,.66)}

/* split head: title left, supporting copy + action right (reference layout) */
.head--split{max-width:none;display:grid;gap:1.25rem;margin-bottom:2rem}
@media (min-width:900px){
  .head--split{grid-template-columns:1.15fr .85fr;gap:3rem;align-items:end}
  .head--split .sec__lead{margin-top:0}
}
.head__aside{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}

/* ==========================================================================
   BUSINESS BANDS — one shared structure for all three
   --------------------------------------------------------------------------
   Guni, Wholesale and MintLoop each get: eyebrow, title, lead, three points,
   one image, one action. Same shape, same weight — no business outranks another.
   ========================================================================== */

/* ---------- The band: image one side, everything else the other ----------
   Every business band is a two-column split. The image column and the copy
   column share the same grid, so the photo can never be wider — or taller —
   than the text it belongs to. Below 900px the two columns stack, image first. */
.band{display:grid;gap:1.6rem}
@media (min-width:900px){
  .band{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.25rem;align-items:center}
  /* --flip puts the photo on the right; alternating sides keeps the page moving */
  .band--flip .band__media{order:2}
}
@media (min-width:1200px){.band{gap:4rem}}

/* the photo: bounded by its column, with a fixed ratio so it never runs long */
.band__media{
  position:relative;margin:0;overflow:hidden;background:var(--panel-2);
  border-radius:var(--r);aspect-ratio:4/3;
}
@media (min-width:900px){.band__media{aspect-ratio:5/4}}
.band__media--tall{aspect-ratio:4/3}
@media (min-width:900px){.band__media--tall{aspect-ratio:1/1}}
.sec--dark .band__media{background:rgba(255,255,255,.04)}
.band__media img{width:100%;height:100%;object-fit:cover}

.band__copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.band__copy>*{width:100%}
.band__copy .sec__lead{margin-top:.9rem;max-width:none}
.band__copy .sec__body{max-width:none}

/* the three points, now a stacked list inside the copy column rather than a
   full-width card row — a list reads faster beside a photo than three boxes do */
.pts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:0;width:100%;
  border-top:1px solid var(--line)}
.sec--dark .pts{border-top-color:var(--line-dk)}
.pts li{padding:.95rem 0;border-bottom:1px solid var(--line)}
.sec--dark .pts li{border-bottom-color:var(--line-dk)}
.pts h3{font-family:var(--ff-body);font-size:.97rem;font-weight:600;letter-spacing:-.005em;
  margin-bottom:.2rem}
.pts p{font-size:.87rem;color:var(--slate);line-height:1.6}
.sec--dark .pts p{color:rgba(248,250,252,.64)}

.band__act{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.6rem}
.band__note{font-family:var(--ff-mono);font-size:.74rem;line-height:1.6;
  color:var(--slate-lt);flex:1 1 14rem}
.sec--dark .band__note{color:rgba(248,250,252,.48)}

/* the sealed-sack signature, now a compact inline motif */
.sealed{
  display:flex;align-items:center;gap:1rem;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  padding:.9rem 1.1rem;background:rgba(255,255,255,.035);
  max-width:none;margin-top:1.5rem;
}
.sealed__svg{width:46px;height:50px;flex:none}
.sealed__body{fill:rgba(18,58,99,.9);stroke:rgba(110,231,183,.42);stroke-width:2}
.sealed__tie{fill:none;stroke:var(--emerald);stroke-width:3;stroke-linecap:round}
.sealed__txt{display:grid;gap:.15rem;min-width:0}
.sealed__t{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--emerald-lt)}
.sealed__d{font-size:.8rem;color:rgba(248,250,252,.6);line-height:1.5}

/* ==========================================================================
   MINTLOOP — same band as the others; only the launch status differs
   ========================================================================== */
.ml__badge{
  position:absolute;top:.95rem;left:1rem;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--ff-mono);
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--emerald-lt);
  border:1px solid rgba(16,185,129,.45);border-radius:99px;padding:.34rem .72rem;
  background:rgba(6,26,46,.66);backdrop-filter:blur(8px);
}
@media (min-width:900px){.ml__badge{left:1.25rem;top:1.25rem}}
.ml__badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--emerald);
  flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
/* the action row carries a live button and a status word, side by side */
.ml__cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.ab__grid{display:grid;gap:1.3rem;margin-top:1.75rem;width:100%}
.pill{display:grid;gap:.3rem;padding-left:1.1rem;border-left:2px solid var(--emerald)}
.pill h3{font-family:var(--ff-body);font-size:1rem;font-weight:600;letter-spacing:-.005em}
.pill p{font-size:.89rem;color:var(--slate)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.ct{text-align:center;max-width:54ch;margin-inline:auto}
.ct .eyebrow{justify-content:center}
.ct h2{margin-bottom:.85rem}
.ct .sec__lead{margin-top:0}
.ct .btn{margin-top:1.6rem;padding:1rem 1.9rem;font-size:.98rem}
.ct__hours{font-family:var(--ff-mono);font-size:.74rem;color:rgba(248,250,252,.5);margin-top:1rem}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ft{background:var(--navy-900);color:rgba(248,250,252,.66);
  padding:2.5rem 0 1.6rem}
@media (min-width:640px){.ft{padding:2.75rem 0 1.75rem}}
@media (min-width:900px){.ft{padding:3.25rem 0 1.9rem}}
.ft .brand{color:var(--white)}
.ft__top{display:grid;gap:2.25rem}
.ft__tag{font-size:.9rem;max-width:34ch;margin-top:.9rem}
.ft__cols{display:grid;gap:2rem}
.ft h4{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--emerald-lt);margin:0 0 .85rem;font-weight:500}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:900px){.ft ul{gap:.5rem}}
.ft a{font-size:.9rem;text-decoration:none;transition:color .2s;
  display:inline-flex;align-items:center;min-height:44px}
@media (min-width:900px){.ft a{min-height:0}}
.ft a:hover{color:var(--emerald-lt)}
/* Company details read as label/value pairs, not one long block of text.
   Two columns from 480px so the address stops towering over its neighbours. */
.ft__co{display:grid;gap:.9rem;margin:0}
@media (min-width:480px) and (max-width:639px){.ft__co{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.ft__co{grid-template-columns:1fr 1fr;gap:.9rem 1.5rem}}
.ft__co div{min-width:0}
.ft__co dt{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(248,250,252,.38);margin-bottom:.25rem}
.ft__co dd{margin:0;font-size:.8rem;line-height:1.6;color:rgba(248,250,252,.66)}
.ft__co dd a{font-size:.8rem;min-height:0}
/* the address keeps its own line breaks; everything else stays on one line */
.ft__addr{white-space:pre-line}
.ft__co .ft__co-name{font-family:var(--ff-body);color:rgba(248,250,252,.82)}
.ft__reg-no{font-family:var(--ff-mono);letter-spacing:.01em}
/* ---------- Mobile footer: cut the repetition ----------
   Below 640px the two link columns only repeat the drawer nav the reader just
   used, and the tagline repeats the hero. Both go. What cannot go is the
   registered entity, its number and the warehouse address — that is the part a
   Sdn. Bhd. footer exists to carry. */
@media (max-width:639px){
  .ft{padding:1.9rem 0 1.4rem}
  .ft__nav-col{display:none}
  .ft__tag{display:none}
  .ft__top{gap:1.4rem}
  .ft__cols{gap:0}
  .ft .brand{margin-bottom:.2rem}
  .ft__co h4{margin-bottom:.7rem}
  .ft__btm{margin-top:1.6rem;padding-top:1.1rem}
}

.ft__btm{border-top:1px solid var(--line-dk);margin-top:2.5rem;padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;
  font-family:var(--ff-mono);font-size:.7rem;color:rgba(248,250,252,.42)}
@media (min-width:640px){
  .ft__cols{grid-template-columns:1fr 1fr 1.6fr}
}
@media (min-width:900px){.ft__top{grid-template-columns:1.15fr 2fr;gap:4rem}}

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */
.fab{
  position:fixed;right:1rem;bottom:1rem;z-index:70;
  width:54px;height:54px;border-radius:50%;background:var(--emerald);color:#04231A;
  display:grid;place-items:center;text-decoration:none;
  box-shadow:0 8px 26px -6px rgba(16,185,129,.6);
  transition:transform .22s var(--ease),box-shadow .22s;
}
.fab:hover{transform:scale(1.07);box-shadow:0 12px 32px -6px rgba(16,185,129,.75)}
.fab svg{width:27px;height:27px}
@media (min-width:900px){.fab{right:1.6rem;bottom:1.6rem;width:58px;height:58px}}

/* ==========================================================================
   Scroll reveal — content visible by default; JS opts into the animation
   ========================================================================== */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
}

/* lock scroll while the drawer is open */
body.nav-open{overflow:hidden}