/* ==========================================================================
   Harb Silm Resources Sdn Bhd — corporate website
   Palette sampled from the 2025 Company Profile brand book.
   ========================================================================== */

:root{
  /* Brand */
  --blue:        #031FE0;
  --blue-deep:   #0014A8;
  --blue-soft:   #E8EBFF;
  --navy:        #00052F;
  --navy-2:      #0A1246;
  --red:         #D70005;
  --silver:      #D2DEDE;
  --slate:       #5D6E73;

  /* Neutrals */
  --ink:         #0C1017;
  --body:        #4A5560;
  --line:        #E3E7EF;
  --mist:        #F5F7FC;
  --paper:       #FFFFFF;

  /* Type */
  --font-display:"Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:   "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --shell:       1200px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --radius:      18px;
  --radius-lg:   28px;

  --header-h:    84px;

  --shadow-sm:   0 2px 10px rgba(0, 5, 47, .06);
  --shadow-md:   0 14px 38px rgba(0, 5, 47, .10);
  --shadow-lg:   0 30px 70px rgba(0, 5, 47, .16);

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

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:clamp(.975rem, .93rem + .18vw, 1.0625rem);
  line-height:1.72;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); line-height:1.18; margin:0 0 .6em; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:1200;
  background:var(--blue); color:#fff; padding:.75rem 1.25rem; border-radius:0 0 10px 10px;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:0; }

/* ---------- Typography helpers ---------- */
.h-display{
  font-size:clamp(2rem, 1.35rem + 2.9vw, 3.5rem);
  letter-spacing:-.015em;
  margin-bottom:.65em;
}
.h-display .t-thin,
.hero__title .t-thin{
  display:block; font-weight:200; color:var(--ink);
  letter-spacing:.12em; text-transform:uppercase;
  font-size:.62em;
}
.h-display .t-bold,
.hero__title .t-bold{
  display:block; font-weight:700; color:var(--blue);
  letter-spacing:.02em; text-transform:uppercase;
}

.eyebrow{
  font-family:var(--font-display);
  font-size:.7rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue); margin:0 0 1rem;
  display:flex; align-items:center; gap:.75rem;
}
.eyebrow::before{ content:""; width:32px; height:2px; background:var(--red); flex:none; }
.eyebrow--light{ color:#fff; }
.eyebrow--light::before{ background:var(--red); }

.section{ padding:clamp(4.5rem, 9vw, 8rem) 0; position:relative; }
.section--tint{ background:var(--mist); }
.section__head{ max-width:720px; margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__head--center .eyebrow{ justify-content:center; }
.section__lead{ font-size:1.075em; color:var(--slate); margin:0; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--blue); --btn-fg:#fff; --btn-bd:var(--blue);
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-display); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  padding:.85rem 1.65rem; border-radius:999px; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  transform:translateX(-120%);
}
.btn:hover::after{ transform:translateX(120%); transition:transform .75s var(--ease-out); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(3,31,224,.28); }
.btn:active{ transform:translateY(-1px); }
.btn--lg{ padding:1rem 2.1rem; font-size:.98rem; }
.btn--block{ width:100%; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); }
.btn--ghost:hover{ --btn-bg:#fff; --btn-fg:var(--navy); --btn-bd:#fff; box-shadow:0 12px 26px rgba(0,0,0,.25); }
.btn--white{ --btn-bg:#fff; --btn-fg:var(--blue); --btn-bd:#fff; }
.btn--white:hover{ box-shadow:0 14px 30px rgba(0,0,0,.28); }

/* ==========================================================================
   PRELOADER — logo animation
   ========================================================================== */
.preloader{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #0A1246 0%, #00052F 55%, #00021A 100%);
  transition:opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; padding:2rem; }

.preloader__logo{
  position:relative;
  width:clamp(150px, 34vw, 200px);
  aspect-ratio:1;
  margin:0 auto 1.75rem;
  display:grid; place-items:center;
}
.preloader__mark{
  width:100%; height:auto; overflow:visible;
  animation:markFloat 3.6s 1.5s ease-in-out infinite;
}
/* Each path drops into place on its own beat, so the mark assembles itself */
.preloader__mark .lp{
  opacity:0;
  transform-box:fill-box; transform-origin:50% 50%;
  animation:lpIn .66s var(--ease-out) forwards;
  animation-delay:calc(.2s + var(--i) * .09s);
}
@keyframes lpIn{
  from{ opacity:0; scale:.68; translate:0 18px; }
  to  { opacity:1; scale:1;   translate:0 0;    }
}
@keyframes markFloat{
  0%,100%{ transform:translateY(0)     scale(1); }
  50%    { transform:translateY(-7px)  scale(1.02); }
}

/* Sweeping highlight that runs across the mark as it resolves */
.preloader__sweep{
  position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:50%;
}
.preloader__sweep::before{
  content:""; position:absolute; top:-30%; left:-60%; width:45%; height:160%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  animation:sweep 2.6s 1s var(--ease-out) infinite;
}
@keyframes sweep{
  0%   { left:-60%; opacity:0; }
  15%  { opacity:1; }
  60%  { left:120%; opacity:0; }
  100% { left:120%; opacity:0; }
}

/* Orbit rings — brand blue + red */
.preloader__orbit{
  position:absolute; inset:-16%;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--blue);
  border-right-color:rgba(3,31,224,.35);
  animation:spin 1.5s linear infinite;
}
.preloader__orbit--2{
  inset:-27%;
  border-top-color:transparent;
  border-right-color:transparent;
  border-bottom-color:var(--red);
  border-left-color:rgba(215,0,5,.28);
  animation:spin 2.4s linear infinite reverse;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.preloader__word{
  font-family:var(--font-display);
  font-weight:300; letter-spacing:.28em; text-transform:uppercase;
  font-size:clamp(.6rem, .5rem + .5vw, .78rem);
  color:rgba(255,255,255,.9);
  margin:0 0 1.5rem; padding-left:.28em;
  display:flex; flex-wrap:wrap; gap:.55em; justify-content:center;
}
.preloader__word span{
  opacity:0; transform:translateY(10px);
  animation:wordIn .6s var(--ease-out) forwards;
}
.preloader__word span:nth-child(1){ animation-delay:.85s; }
.preloader__word span:nth-child(2){ animation-delay:.95s; }
.preloader__word span:nth-child(3){ animation-delay:1.05s; }
.preloader__word span:nth-child(4){ animation-delay:1.15s; }
.preloader__word span:nth-child(5){ animation-delay:1.25s; }
@keyframes wordIn{ to{ opacity:1; transform:translateY(0); } }

.preloader__bar{
  width:min(220px, 60vw); height:2px; margin:0 auto;
  background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden;
}
.preloader__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--blue), #4B63FF, var(--red));
  transition:width .35s var(--ease);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto; z-index:1000;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease),
             backdrop-filter .35s var(--ease);
}
.header__bar{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  transition:height .35s var(--ease);
}
.header.is-stuck{
  background:#fff;
  box-shadow:0 1px 0 var(--line), var(--shadow-sm);
}
/* The frosted-glass treatment is desktop-only on purpose: backdrop-filter
   establishes a containing block, which would trap the fixed-position mobile
   drawer inside the header box instead of the viewport. */
@media (min-width:901px){
  .header.is-stuck{
    background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(14px);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
  }
}
.header.is-stuck .header__bar{ height:70px; }

.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand__mark{
  width:auto; height:54px;
  transition:height .35s var(--ease), transform .5s var(--ease);
}
.header.is-stuck .brand__mark{ height:46px; }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; font-family:var(--font-display); }
.brand__text strong{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; color:#fff; }
.brand__text em{ font-style:normal; font-size:.66rem; font-weight:400; letter-spacing:.15em;
                 text-transform:uppercase; color:rgba(255,255,255,.72); }
.header.is-stuck .brand__text strong{ color:var(--navy); }
.header.is-stuck .brand__text em{ color:var(--slate); }

.nav{ display:flex; align-items:center; gap:2rem; margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:.35rem; }
.nav__list a{
  position:relative; display:block; padding:.55rem .85rem;
  font-family:var(--font-display); font-size:.885rem; font-weight:500;
  color:rgba(255,255,255,.88); border-radius:8px;
  transition:color .25s var(--ease);
}
.nav__list a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__list a:hover::after,
.nav__list a.is-active::after{ transform:scaleX(1); }
.header.is-stuck .nav__list a{ color:var(--ink); }
.nav__list a:hover,
.nav__list a.is-active{ color:#fff; }
.header.is-stuck .nav__list a:hover,
.header.is-stuck .nav__list a.is-active{ color:var(--blue); }
.nav__cta{ padding:.7rem 1.4rem; font-size:.865rem; }

.header__progress{
  height:2px; width:0%;
  background:linear-gradient(90deg, var(--blue), var(--red));
  transition:width .1s linear;
}

.burger{
  display:none; width:44px; height:44px; padding:0; border:0; background:transparent;
  cursor:pointer; position:relative; flex:none;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; border-radius:2px; background:#fff;
  transition:transform .35s var(--ease), opacity .2s var(--ease), background-color .3s var(--ease);
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.header.is-stuck .burger span{ background:var(--navy); }
.burger[aria-expanded="true"] span{ background:var(--navy); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-scrim{
  position:fixed; inset:0; z-index:900;
  background:rgba(0,5,47,.5); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .35s var(--ease);
}
.nav-scrim.is-open{ opacity:1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; isolation:isolate;
  min-height:min(100svh, 900px);
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 3rem) 0 clamp(4rem, 9vw, 7rem);
  background:var(--navy);
  overflow:hidden;
}
/* Oversized so scroll parallax never exposes an edge. */
.hero__media{
  position:absolute; inset:-14% 0; z-index:-2;
  translate:0 var(--py, 0px);
  will-change:translate;
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  opacity:.34;
  animation:kenburns 30s ease-in-out infinite alternate;
  will-change:scale, translate;
}
@keyframes kenburns{
  from{ scale:1.04; translate:0     0;    }
  to  { scale:1.18; translate:-3% -2.5%;  }
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg, rgba(0,5,47,.96) 0%, rgba(0,5,47,.86) 42%, rgba(3,31,224,.42) 100%),
    linear-gradient(0deg, rgba(0,5,47,.9) 0%, transparent 45%);
}

/* --------------------------------------------------------------------------
   Animated vector layer.
   Each .v is positioned here; JS writes --px/--py (scroll + pointer parallax)
   into the `translate` property, while keyframes drive `rotate`/`scale`.
   Using the individual transform properties keeps the two from fighting over
   a single `transform` declaration.
   -------------------------------------------------------------------------- */
.hero__vectors{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.v{
  position:absolute; display:block;
  translate:var(--px, 0px) var(--py, 0px);
  will-change:translate, rotate;
}

/* Large angular brand panel, top-right */
.v--panel{
  top:-16%; right:-8%; width:min(48vw, 560px); aspect-ratio:1/1.3;
  background:linear-gradient(160deg, var(--blue) 0%, var(--blue-deep) 100%);
  clip-path:polygon(22% 0, 100% 0, 100% 84%, 78% 100%, 0 100%, 0 16%);
  border-radius:0 0 0 90px;
  opacity:.85;
  animation:vFloat 13s ease-in-out infinite alternate;
}

/* Red outline frame, bottom-left */
.v--frame{
  bottom:6%; left:-6%; width:min(54vw, 640px); height:min(30vw, 300px);
  border:2px solid var(--red); border-radius:26px;
  clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  opacity:.5;
  animation:vFloat 17s 1s ease-in-out infinite alternate-reverse;
}

/* Thin rotating ring */
.v--ring{
  top:12%; left:8%; width:min(26vw, 230px); aspect-ratio:1;
  border:1.5px dashed rgba(255,255,255,.22); border-radius:50%;
  animation:vSpin 46s linear infinite;
}

/* Soft blue glow */
.v--orb{
  bottom:-10%; right:18%; width:min(38vw, 380px); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, rgba(59,86,255,.55), transparent 68%);
  border-radius:50%; filter:blur(6px);
  animation:vPulse 9s ease-in-out infinite;
}

/* Drifting dot field */
.v--dots{
  top:8%; right:26%; width:min(30vw, 300px); height:min(26vw, 240px);
  background-image:radial-gradient(circle, rgba(255,255,255,.3) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  opacity:.5;
  animation:vDots 24s linear infinite;
}

/* Diagonal light streak */
.v--streak{
  top:-20%; left:38%; width:2px; height:150%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent);
  rotate:18deg;
  animation:vStreak 11s ease-in-out infinite;
}

/* Orbit motif echoing the logo mark */
.v--orbit{
  bottom:14%; right:6%; width:min(24vw, 210px); height:auto;
  opacity:.5;
  animation:vFloat 15s ease-in-out infinite alternate;
}
.v--orbit circle, .v--orbit path{ fill:none; stroke-linecap:round; }
.orbit__track{ stroke:rgba(255,255,255,.14); stroke-width:1.5; }
.orbit__arc{
  stroke:var(--blue); stroke-width:3;
  stroke-dasharray:120 370; transform-origin:100px 100px;
  animation:vSpin 7s linear infinite;
}
.orbit__arc--red{
  stroke:var(--red); stroke-width:2.5;
  stroke-dasharray:70 300;
  animation:vSpin 11s linear infinite reverse;
}
.orbit__arrow{
  stroke:rgba(255,255,255,.5); stroke-width:3; stroke-linejoin:round;
  transform-origin:100px 100px;
  animation:vArrow 4.5s ease-in-out infinite;
}

@keyframes vFloat{
  from{ rotate:0deg;   scale:1; }
  to  { rotate:2.5deg; scale:1.045; }
}
@keyframes vSpin{ to{ rotate:360deg; } }
@keyframes vPulse{
  0%,100%{ opacity:.5; scale:1; }
  50%    { opacity:.9; scale:1.14; }
}
@keyframes vDots{
  to{ background-position:22px 44px; }
}
@keyframes vStreak{
  0%,100%{ opacity:0;  scale:1 .6; }
  50%    { opacity:.9; scale:1 1; }
}
@keyframes vArrow{
  0%,100%{ opacity:.35; translate:0 4px; }
  50%    { opacity:.9;  translate:0 -4px; }
}

.hero__inner{ position:relative; max-width:920px; }
.hero__title{
  font-size:clamp(2.15rem, 1.3rem + 3.9vw, 4.4rem);
  letter-spacing:-.02em; color:#fff; margin-bottom:.55em;
}
.hero__title .t-thin{ color:rgba(255,255,255,.82); }
.hero__title .t-bold{ color:#fff; }
.hero__title .t-bold::after{
  content:""; display:block; width:96px; height:4px; margin-top:.42em;
  background:linear-gradient(90deg, var(--red), var(--blue));
  border-radius:4px;
  transform-origin:left; animation:barIn 1s .6s var(--ease-out) both;
}
@keyframes barIn{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.hero__lead{
  max-width:62ch; font-size:clamp(1rem, .95rem + .3vw, 1.16rem);
  color:rgba(255,255,255,.86); margin-bottom:2.25rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:1.75rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:.62rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.65);
  transition:color .3s var(--ease);
}
.hero__scroll:hover{ color:#fff; }
.hero__scrollLine{
  width:1px; height:46px; background:rgba(255,255,255,.28); position:relative; overflow:hidden;
}
.hero__scrollLine::after{
  content:""; position:absolute; inset:0; background:var(--red);
  animation:scrollCue 2s var(--ease) infinite;
}
@keyframes scrollCue{
  0%  { transform:translateY(-100%); }
  60%,100%{ transform:translateY(100%); }
}

/* ==========================================================================
   CLIENT STRIP
   ========================================================================== */
.clients{ background:var(--paper); padding:clamp(2.5rem, 5vw, 3.75rem) 0; border-bottom:1px solid var(--line); }
.clients__label{
  text-align:center; font-family:var(--font-display); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--slate); margin:0 0 1.75rem;
}
.clients__list{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(1.5rem, 5vw, 4rem);
}
.clients__list li{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(.95rem, .85rem + .5vw, 1.3rem);
  letter-spacing:-.01em; color:var(--navy); opacity:.42;
  transition:opacity .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.clients__list li:hover{ opacity:1; color:var(--blue); transform:translateY(-2px); }

/* ==========================================================================
   SHARED LAYOUT
   ========================================================================== */
.grid-2{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5rem); align-items:center;
}
.grid-2--flip{ align-items:start; }

.about__media{ position:relative; }
.about__media img{
  width:100%; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); position:relative; z-index:1;
}
.about__media--sticky{ position:sticky; top:calc(var(--header-h) + 2rem); }
.frame-accent{
  position:absolute; inset:auto -18px -18px auto;
  width:72%; height:72%;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--blue), var(--blue-deep));
  z-index:0;
}
.frame-accent--red{
  inset:-18px auto auto -18px;
  background:none; border:2.5px solid var(--red);
}

/* Stats */
.stats{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.5rem; margin:2.25rem 0 0; padding-top:2rem;
  border-top:1px solid var(--line);
}
.stats li{ display:flex; flex-direction:column; gap:.3rem; }
.stats__num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  color:var(--blue); line-height:1; letter-spacing:-.02em;
}
.stats li span{
  font-size:.8rem; line-height:1.45; color:var(--slate);
  letter-spacing:.02em;
}

/* ==========================================================================
   VISION & MISSION
   ========================================================================== */
.purpose{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem, 3vw, 2rem); }
.panel{
  position:relative; overflow:hidden;
  padding:clamp(2rem, 4vw, 3.25rem);
  border-radius:var(--radius-lg);
  color:rgba(255,255,255,.88);
}
.panel::after{
  content:""; position:absolute; right:-70px; bottom:-70px;
  width:220px; height:220px; border:2px solid rgba(255,255,255,.14);
  border-radius:36px; transform:skewX(-11deg);
  transition:transform .8s var(--ease-out);
}
.panel:hover::after{ transform:skewX(-11deg) translate(-16px,-16px) rotate(6deg); }
.panel--blue{ background:linear-gradient(155deg, var(--blue) 0%, var(--blue-deep) 100%); }
.panel--navy{ background:linear-gradient(155deg, var(--navy-2) 0%, var(--navy) 100%); }
.panel__title{
  font-size:clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight:600; color:#fff;
  letter-spacing:.01em; margin-bottom:1.1em; padding-bottom:.7em;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.panel p:last-child{ margin-bottom:0; }

/* ==========================================================================
   SERVICE CARDS
   ========================================================================== */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:clamp(1.25rem, 2.5vw, 1.75rem);
}
.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card__media{ position:relative; aspect-ratio:3/1; overflow:hidden; background:var(--navy); }
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease-out), filter .5s var(--ease);
  filter:saturate(.85);
}
.card:hover .card__media img{ transform:scale(1.07); filter:saturate(1.05); }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,5,47,.05) 0%, rgba(0,5,47,.42) 100%);
}
.card__body{ padding:clamp(1.5rem, 3vw, 2rem); display:flex; flex-direction:column; flex:1; }
.card__icon{
  width:48px; height:48px; margin:-3.6rem 0 1.1rem; position:relative; z-index:2;
  display:grid; place-items:center; flex:none;
  background:var(--blue); color:#fff;
  border-radius:14px; box-shadow:0 10px 24px rgba(3,31,224,.32);
  transition:transform .45s var(--ease), background-color .45s var(--ease);
}
.card__icon svg{ width:24px; height:24px; }
.card:hover .card__icon{ transform:translateY(-4px) rotate(-6deg); background:var(--red); box-shadow:0 10px 24px rgba(215,0,5,.32); }
.card h3{
  font-size:1.16rem; font-weight:300; letter-spacing:.01em; margin-bottom:.7em; color:var(--ink);
}
.card h3 b{ display:block; font-weight:700; color:var(--blue); }
.card p{ font-size:.925rem; margin-bottom:1.15em; }
.card__list{ margin-top:auto; display:flex; flex-direction:column; gap:.5rem; }
.card__list li{
  position:relative; padding-left:1.5rem; font-size:.855rem; line-height:1.5; color:var(--slate);
}
.card__list li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:7px; height:7px; border-radius:2px; background:var(--red); transform:rotate(45deg);
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team{ display:grid; gap:clamp(1.25rem, 3vw, 2rem); }
.team--lead{ grid-template-columns:repeat(3, 1fr); max-width:980px; margin-inline:auto; }
.team--staff{
  grid-template-columns:repeat(5, 1fr);
  margin-top:clamp(2rem, 4vw, 3rem); padding-top:clamp(2rem, 4vw, 3rem);
  border-top:1px solid var(--line);
}
.person{ text-align:center; }
.person__photo{
  position:relative; margin:0 auto 1.15rem; width:100%; max-width:210px;
  aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden;
  background:var(--silver);
  box-shadow:14px 14px 0 0 var(--blue);
  transition:box-shadow .45s var(--ease), transform .45s var(--ease);
}
.person:hover .person__photo{ transform:translate(4px,4px); box-shadow:8px 8px 0 0 var(--red); }
.person__photo img{ width:100%; height:100%; object-fit:cover; }
.person h3{ font-size:1rem; font-weight:600; margin-bottom:.15em; letter-spacing:-.005em; }
.person__role{
  font-family:var(--font-display); font-size:.78rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue); margin-bottom:.9em;
}
.person__bio{ font-size:.865rem; line-height:1.6; color:var(--slate); margin:0; }
.person--sm .person__photo{ max-width:168px; box-shadow:10px 10px 0 0 var(--blue); }
.person--sm .person__role{ color:var(--slate); margin-bottom:0; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline{ position:relative; margin:2.5rem 0; padding-left:2.25rem; }
.timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--blue), var(--red));
  transform:scaleY(0); transform-origin:top;
  transition:transform 1.2s .2s var(--ease-out);
}
.timeline.is-drawn::before{ transform:scaleY(1); }
.timeline__item{ position:relative; padding-bottom:2.25rem; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__dot{
  position:absolute; left:calc(-2.25rem + 1px); top:.4rem;
  width:16px; height:16px; border-radius:50%;
  background:var(--paper); border:3px solid var(--blue);
}
.timeline__dot--live{ border-color:var(--red); }
.timeline__dot--live::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--red); opacity:0;
  animation:ping 2.2s var(--ease-out) infinite;
}
@keyframes ping{
  0%  { transform:scale(.7); opacity:.9; }
  70% { transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}
.timeline__year{
  font-family:var(--font-display); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin:0 0 .3em;
}
.timeline__item h3{ font-size:1.12rem; font-weight:600; margin-bottom:.5em; }
.timeline__item p:last-child{ font-size:.92rem; margin:0; }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(115deg, var(--blue) 0%, var(--blue-deep) 55%, var(--navy) 100%);
  padding:clamp(3.5rem, 7vw, 5.5rem) 0;
  text-align:center; color:#fff;
}
.cta__shape{
  position:absolute; z-index:-1; top:-40%; right:-8%;
  width:min(60vw, 640px); aspect-ratio:1/1;
  border:2px solid rgba(255,255,255,.16); border-radius:80px;
  transform:skewX(-11deg);
  animation:drift 16s ease-in-out infinite alternate;
}
.cta__inner{ position:relative; max-width:760px; }
.cta h2{
  color:#fff; font-weight:300; letter-spacing:-.01em;
  font-size:clamp(1.55rem, 1.15rem + 1.8vw, 2.5rem); margin-bottom:.5em;
}
.cta p{ color:rgba(255,255,255,.85); margin-bottom:2rem; }

/* ==========================================================================
   CORPORATE INFO
   ========================================================================== */
.info{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:clamp(1rem, 2.5vw, 1.5rem);
}
.info__item{
  position:relative; overflow:hidden;
  padding:clamp(1.5rem, 3vw, 2rem);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.info__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--blue), var(--red));
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.info__item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.info__item:hover::before{ transform:scaleY(1); }
.info__item h3{
  font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.9em;
}
.info__item p{ margin:0; font-size:.92rem; line-height:1.7; }
.info__item strong{ color:var(--ink); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem, 5vw, 4rem); align-items:start; }

.contact__row{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.15rem 0; border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease);
}
.contact__row:hover{ transform:translateX(5px); }
.contact__ico{
  flex:none; width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.contact__row:hover .contact__ico{ background:var(--blue); color:#fff; }
.contact__ico svg{ width:21px; height:21px; }
.contact__ico--wa{ background:#E7F7EE; color:#128C4A; }
.contact__row:hover .contact__ico--wa{ background:#128C4A; color:#fff; }
.contact__row span:last-child{ font-size:.94rem; line-height:1.6; color:var(--body); }
.contact__row b{
  display:block; font-family:var(--font-display); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:.25em;
}
.contact__hours{ padding-top:1.5rem; }
.contact__hours b{
  display:block; font-family:var(--font-display); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin-bottom:.5em;
}
.contact__hours p{ margin:0; font-size:.94rem; }

.contact__form{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem, 3.5vw, 2.5rem); box-shadow:var(--shadow-sm);
}
.field{ margin-bottom:1.15rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label{
  display:block; font-family:var(--font-display); font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:.45rem;
}
.field input,.field select,.field textarea{
  width:100%; padding:.8rem 1rem; font-size:.94rem; font-family:var(--font-body);
  background:var(--mist); border:1.5px solid transparent; border-radius:12px;
  color:var(--ink); transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder,.field textarea::placeholder{ color:#9AA5B4; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:var(--paper); border-color:var(--blue);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--red); }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6E73' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:18px;
  padding-right:2.75rem;
}
.form-note{ margin:1rem 0 0; font-size:.86rem; text-align:center; min-height:1.4em; }
.form-note.is-ok{ color:#128C4A; }
.form-note.is-err{ color:var(--red); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--navy); color:rgba(255,255,255,.66); padding-top:clamp(3.5rem, 7vw, 5rem); }
.footer__top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(2rem, 4vw, 3rem);
  padding-bottom:clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand img{ height:74px; width:auto; margin-bottom:1.25rem; }
.footer__brand p{ font-size:.9rem; line-height:1.7; margin:0; max-width:38ch; }
.footer__col h4{
  font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; margin-bottom:1.25em;
}
.footer__col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer__col a{
  font-size:.89rem; transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.footer__col a:hover{ color:#fff; padding-left:5px; }
.footer__contact li{ font-size:.89rem; line-height:1.65; }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  padding:1.5rem 0 2rem; border-top:1px solid rgba(255,255,255,.12);
}
.footer__bottom p{ margin:0; font-size:.82rem; }

/* ==========================================================================
   DEMO PREVIEW NOTICE  +  WHATSAPP FAB
   Demo-build only — delete this block and its markup to ship the live site.
   ========================================================================== */
.demo-pop{
  position:fixed; z-index:1100;
  right:clamp(1rem, 3vw, 2rem); bottom:calc(clamp(1rem, 3vw, 2rem) + 76px);
  width:min(330px, calc(100vw - 2rem));
  padding:1.5rem 1.5rem 1.35rem;
  background:linear-gradient(158deg, var(--navy-2) 0%, var(--navy) 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);
  box-shadow:0 26px 60px rgba(0,5,47,.42);
  color:rgba(255,255,255,.82);
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.demo-pop[hidden]{ display:none; }
.demo-pop.is-in{ opacity:1; transform:none; }
.demo-pop::before{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, var(--blue), var(--red));
}
.demo-pop__close{
  position:absolute; top:.6rem; right:.6rem;
  width:32px; height:32px; padding:0; display:grid; place-items:center;
  background:transparent; border:0; border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.5);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.demo-pop__close:hover{ background:rgba(255,255,255,.1); color:#fff; }
.demo-pop__close svg{ width:15px; height:15px; }
.demo-pop__logo{ width:46px; height:auto; margin-bottom:.85rem; }
.demo-pop__eyebrow{
  font-family:var(--font-display); font-size:.66rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
  margin:0 0 .5em;
}
.demo-pop__body{
  font-size:.95rem; line-height:1.55; color:#fff; margin:0 0 1.15em;
  font-family:var(--font-display); font-weight:400;
}
.demo-pop__cta{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.72rem 1rem; border-radius:999px;
  background:#25D366; color:#04301A;
  font-family:var(--font-display); font-weight:600; font-size:.88rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.demo-pop__cta svg{ width:18px; height:18px; }
.demo-pop__cta:hover{ transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 12px 26px rgba(37,211,102,.35); }

.wa-fab{
  position:fixed; z-index:800;
  left:clamp(1rem, 3vw, 2rem); bottom:clamp(1rem, 3vw, 2rem);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  box-shadow:0 12px 30px rgba(37,211,102,.42);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa-fab:hover{ transform:translateY(-4px) scale(1.06); box-shadow:0 16px 38px rgba(37,211,102,.5); }
.wa-fab svg{ width:30px; height:30px; position:relative; z-index:1; }
.wa-fab__pulse{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; opacity:0;
  animation:waPulse 2.6s var(--ease-out) infinite;
}
@keyframes waPulse{
  0%  { transform:scale(.9);  opacity:.85; }
  70% { transform:scale(1.55); opacity:0; }
  100%{ transform:scale(1.55); opacity:0; }
}

@media (max-width:640px){
  .demo-pop{
    left:1rem; right:1rem; width:auto;
    bottom:calc(1rem + 70px);
  }
  .wa-fab{ width:52px; height:52px; }
  .wa-fab svg{ width:27px; height:27px; }
}

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:clamp(1rem, 3vw, 2rem); bottom:clamp(1rem, 3vw, 2rem); z-index:800;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--blue); color:#fff; box-shadow:0 10px 26px rgba(3,31,224,.35);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             visibility .35s var(--ease), background-color .3s var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--red); transform:translateY(-4px); }
.to-top svg{ width:22px; height:22px; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }
.reveal[data-delay="5"]{ transition-delay:.45s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .nav__list{ gap:0; }
  .nav__list a{ padding:.55rem .6rem; font-size:.84rem; }
  .nav{ gap:1.25rem; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
  :root{ --header-h:72px; }

  .burger{ display:block; }

  .nav{
    position:fixed; inset:0 0 0 auto; z-index:950;
    width:min(340px, 84vw);
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    padding:calc(var(--header-h) + 1.5rem) 1.75rem 2.5rem;
    background:var(--paper);
    box-shadow:-20px 0 60px rgba(0,5,47,.22);
    transform:translateX(100%);
    /* visibility keeps the closed drawer out of the tab order and stops it
       peeking over the scrollbar gutter */
    visibility:hidden;
    transition:transform .45s var(--ease), visibility .45s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); visibility:visible; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--line); }
  .nav__list a{
    color:var(--ink) !important; padding:1rem .25rem; font-size:1rem; font-weight:500;
  }
  .nav__list a::after{ left:.25rem; right:auto; width:26px; bottom:.6rem; }
  .nav__cta{ margin-top:1.75rem; width:100%; }

  .grid-2{ grid-template-columns:1fr; gap:2.5rem; }
  .grid-2--flip > div:first-child{ order:2; }
  .about__media--sticky{ position:static; }
  .purpose{ grid-template-columns:1fr; }
  .team--lead{ grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
  .team--staff{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
  .contact{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .hero{ min-height:auto; padding-top:calc(var(--header-h) + 2.5rem); }
  .hero__scroll{ display:none; }
  .hero__actions .btn{ width:100%; }
  /* Keep the hero legible on small screens — only the panel and glow survive */
  .v--panel{ width:82vw; top:-6%; right:-26%; }
  .v--frame,.v--ring,.v--dots,.v--streak{ display:none; }
  .v--orbit{ width:34vw; bottom:6%; right:-4%; opacity:.35; }

  .stats{ grid-template-columns:1fr; gap:1.25rem; text-align:left; }
  .stats li{ flex-direction:row; align-items:baseline; gap:.85rem; }
  .stats__num{ min-width:4.5ch; }

  .cards{ grid-template-columns:1fr; }
  .team--lead,.team--staff{ grid-template-columns:1fr 1fr; }
  .person__bio{ display:none; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .footer__top{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; text-align:center; }
  .clients__list{ gap:1rem 1.75rem; }
}

@media (max-width:400px){
  .brand__text em{ display:none; }
  .team--lead,.team--staff{ grid-template-columns:1fr; }
  .person__photo{ max-width:180px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .preloader__mark .lp{ opacity:1; }
  .timeline::before{ transform:scaleY(1); }
  .hero__media img{ transform:none; }
}

/* ---------- Print ---------- */
@media print{
  .preloader,.header,.to-top,.hero__scroll,.contact__form,.nav-scrim{ display:none !important; }
  body{ color:#000; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .section{ padding:1.5rem 0; break-inside:avoid; }
}