/* Helang Rampai Pest Control — design proposal
   Direction A · Clinical Trust */

:root{
  --bg:#FFFFFF;
  --bg-tone:#F4F7FA;
  --bg-dark:#0B1F33;
  --ink:#0B1F33;        /* headlines — darker than body */
  --body:#3D5266;       /* body ink */
  --body-inv:#B9CBDC;
  --line:#DCE6F0;
  --line-dark:#1C3A57;
  --blue:#0E63B3;       /* accent, large use */
  --blue-ink:#0B4C8C;   /* accent darkened for body-size text */
  --blue-soft:#EDF3FA;
  --sky:#7FB2E0;
  --nav-h:66px;
  --disp:"Newsreader",ui-serif,Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:40;
  display:flex;align-items:center;gap:20px;padding:0 clamp(16px,4vw,44px);
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand-mark{width:32px;height:32px;color:var(--blue);display:block;flex:none}
.brand-mark svg{display:block;width:100%;height:100%}
.brand-txt{display:flex;flex-direction:column;line-height:1.12}
.brand-txt b{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em}
.brand-txt i{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--body);font-weight:500}
.nav-links{margin-left:auto;display:flex;gap:26px}
.nav-links a{
  text-decoration:none;font-size:13.5px;font-weight:500;color:var(--body);
  transition:color .22s ease;
}
.nav-links a:hover{color:var(--blue-ink)}
.nav-cta{
  text-decoration:none;font-size:13px;font-weight:600;color:#fff;background:var(--blue);
  padding:9px 17px;border-radius:999px;white-space:nowrap;
  transition:background-color .22s ease,transform .22s ease;
}
.nav-cta:hover{background:var(--blue-ink);transform:translateY(-1px)}
@media(max-width:860px){.nav-links{display:none}}
@media(max-width:460px){.brand-txt i{display:none}.nav-cta{font-size:12px;padding:8px 13px}}

/* ---------- panels ---------- */
.panel{height:155vh;position:relative}
.panel.short{height:132vh}
.panel.tall{height:178vh}
.pin{
  position:sticky;top:0;min-height:100svh;overflow:hidden;
  background:var(--bg);display:flex;align-items:center;
  padding:calc(var(--nav-h) + 34px) clamp(20px,5vw,64px) 46px;
}
.pin.tone{background:var(--bg-tone)}
.pin.dark{background:var(--bg-dark)}
.pin.center{text-align:center;justify-content:center}
.pin.center .wrap{margin-inline:auto}

.wrap{width:100%;max-width:860px;position:relative;z-index:2}
.wrap.wide{max-width:1120px}

/* animated brand-colour aura — every screen keeps moving */
.aura{
  position:absolute;inset:-18%;z-index:1;pointer-events:none;
  background:
    radial-gradient(46% 42% at 22% 28%, rgba(14,99,179,.13), transparent 68%),
    radial-gradient(40% 38% at 82% 72%, rgba(127,178,224,.20), transparent 70%);
  will-change:transform;
}
.aura.alt{
  background:
    radial-gradient(50% 44% at 78% 24%, rgba(14,99,179,.11), transparent 70%),
    radial-gradient(42% 40% at 16% 78%, rgba(127,178,224,.24), transparent 72%);
}
.aura.dk{
  background:
    radial-gradient(50% 46% at 26% 26%, rgba(14,99,179,.42), transparent 68%),
    radial-gradient(44% 42% at 80% 76%, rgba(127,178,224,.20), transparent 72%);
}

/* ---------- type ---------- */
.display{font-family:var(--disp);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.06;margin:0 0 20px}
.display em{font-style:normal;color:var(--blue)}
.xxl{font-size:clamp(40px,7.4vw,82px)}
.xl{font-size:clamp(34px,5.6vw,64px)}
.lg{font-size:clamp(30px,4.6vw,54px)}
.sm{font-size:clamp(24px,3.2vw,38px);margin-bottom:26px}
.inv{color:#fff}
.inv em{color:var(--sky)}

.eyebrow{
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--blue-ink);margin:0 0 18px;
}
.eyebrow.inv{color:var(--sky)}
.lede{font-size:clamp(16px,1.55vw,19px);line-height:1.62;font-weight:500;max-width:60ch;margin:0 0 26px}
.pin.center .lede{margin-inline:auto}
.c{text-align:center}
.inv+.contact,.dark .lede,.dark .addr{color:var(--body-inv)}

/* emphasis — tier 1 hard facts, tier 2 benefit phrases */
b.t1{font-weight:600;color:var(--blue-ink)}
b.t2{font-weight:600;color:var(--ink);box-shadow:inset 0 -.45em 0 var(--blue-soft)}
.dark b.t1{color:var(--sky)}

.numeral{
  font-family:var(--disp);font-weight:600;color:var(--blue);
  font-size:clamp(110px,20vw,230px);line-height:.82;margin:0 0 10px;letter-spacing:-.04em;
}

/* ---------- buttons ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btns.c{justify-content:center}
.btn{
  display:inline-block;text-decoration:none;font-size:15px;font-weight:600;
  padding:14px 26px;border-radius:999px;background:var(--blue);color:#fff;
  transition:background-color .24s ease,transform .24s ease,box-shadow .24s ease;
}
.btn:hover{background:var(--blue-ink);transform:translateY(-2px);box-shadow:0 10px 26px rgba(14,99,179,.28)}
.btn.ghost{background:transparent;color:var(--blue-ink);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--blue-soft);border-color:var(--sky);box-shadow:none}
.btn.light{background:#fff;color:var(--bg-dark)}
.btn.light:hover{background:var(--sky);color:var(--bg-dark)}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--body);display:flex;align-items:center;gap:9px;z-index:2;
}
.scroll-hint span{width:1px;height:26px;background:var(--line);display:block;position:relative;overflow:hidden}
.scroll-hint span::after{content:"";position:absolute;inset:0;background:var(--blue);animation:trickle 1.9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes trickle{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}

/* ---------- client wall ---------- */
.bigwall{list-style:none;margin:6px 0 22px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px}
.bigwall li{
  font-family:var(--disp);font-weight:500;color:var(--ink);
  font-size:clamp(19px,2.25vw,29px);line-height:1.4;padding:7px 0;
  border-bottom:1px solid var(--line);
}
@media(max-width:720px){.bigwall{grid-template-columns:1fr}}
.foot{font-size:15px;margin:0}

/* ---------- huge list (list IS the content) ---------- */
.huge{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 30px}
.huge li{
  font-family:var(--disp);font-weight:600;color:var(--ink);letter-spacing:-.02em;
  font-size:clamp(30px,5.2vw,58px);line-height:1.14;
}
.huge li:nth-child(3n-1){color:var(--blue)}

/* ---------- claims ---------- */
.claims{margin:0 0 26px}
.claims p{
  display:flex;gap:16px;align-items:baseline;margin:0;padding:15px 0;
  border-top:1px solid var(--line);font-size:clamp(17px,2vw,23px);
  font-weight:500;color:var(--ink);
}
.claims p span{font-family:var(--disp);font-size:13px;color:var(--blue);font-weight:600;flex:none;letter-spacing:.08em}
.quote{
  font-family:var(--disp);font-size:clamp(20px,2.4vw,28px);line-height:1.35;color:var(--ink);
  border-left:3px solid var(--blue);padding-left:20px;margin:0;font-weight:500;
}
.quote i{display:block;font-style:normal;font-family:var(--sans);font-size:13px;color:var(--body);margin-top:9px;font-weight:500}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:720px){.split{grid-template-columns:1fr}}
.col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:0 1px 2px rgba(11,31,51,.04),0 14px 34px rgba(11,31,51,.06)}
.col-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue-ink);margin:0 0 10px}
.col-t{font-family:var(--disp);font-size:clamp(24px,2.8vw,32px);font-weight:600;color:var(--ink);margin:0 0 10px;letter-spacing:-.02em}
.col-d{font-size:15.5px;line-height:1.58;margin:0;font-weight:500}

/* ---------- sectors ---------- */
.sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:860px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.sectors{grid-template-columns:1fr}}
.sectors>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 20px}
.s-k{font-family:var(--disp);font-size:20px;font-weight:600;color:var(--blue);margin:0 0 12px;letter-spacing:-.01em}
.s-v{margin:0;font-size:15.5px;line-height:1.75;font-weight:500;color:var(--ink)}

/* ---------- frequency ---------- */
.freq{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.freq li{
  font-size:clamp(15px,1.7vw,19px);font-weight:600;color:var(--blue-ink);
  background:var(--blue-soft);border:1px solid var(--line);border-radius:999px;padding:11px 22px;
}

/* ---------- full client list ---------- */
.clients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:820px){.clients{grid-template-columns:1fr}}
.clients>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px}
.c-k{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--ink);margin:0 0 10px}
.c-v{margin:0;font-size:14.5px;line-height:1.72;font-weight:500}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 22px}
@media(max-width:600px){.contact{grid-template-columns:1fr}}
.ct{
  text-decoration:none;display:block;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);border-radius:13px;padding:16px 18px;
  transition:background-color .24s ease,border-color .24s ease,transform .24s ease;
}
.ct:hover{background:rgba(255,255,255,.12);border-color:var(--sky);transform:translateY(-2px)}
.ct span{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:600;margin-bottom:5px}
.ct b{font-family:var(--disp);font-size:clamp(19px,2.2vw,25px);font-weight:600;color:#fff;letter-spacing:-.01em}
.addr{font-size:15px;line-height:1.7;margin:0 0 24px;color:var(--body-inv)}
.addr i{font-style:normal;font-size:13.5px;opacity:.8}

/* ---------- footer + proposal label ---------- */
.foot-bar{background:var(--bg-dark);border-top:1px solid var(--line-dark);padding:26px 20px 34px;text-align:center}
.foot-bar p{margin:0;font-size:12.5px;color:var(--body-inv);letter-spacing:.02em}
.proposal-label{
  position:fixed;left:14px;bottom:14px;z-index:50;
  background:rgba(11,31,51,.90);color:#fff;font-size:11px;font-weight:600;
  letter-spacing:.04em;padding:8px 13px;border-radius:999px;
  backdrop-filter:blur(8px);pointer-events:none;
}
@media(max-width:520px){.proposal-label{font-size:10px;padding:7px 11px;left:10px;bottom:10px}}

/* ---------- animation seeds (fail-visible) ---------- */
.js [data-anim]{opacity:0;will-change:transform,opacity}
.js [data-anim="drift"]{opacity:1}
.js .revealed [data-anim],.js [data-anim].revealed{opacity:1}
html:not(.js) [data-anim]{opacity:1}

/* ---------- MOBILE: unpin ---------- */
@media(max-width:900px){
  body{font-size:16px}
  .panel,.panel.short,.panel.tall{height:auto}
  .pin{
    position:relative;height:auto;min-height:0;
    padding:calc(var(--nav-h) + 54px) 20px 68px;
  }
  .scroll-hint{display:none}
  .bigwall li{font-size:20px}
  .huge{gap:4px 22px}
  /* keep the floating proposal label clear of the footer text */
  .foot-bar{padding-bottom:62px}
}