/* ============================================================
   INSAR V3 — SECTIONS A
   Hero · Three Pillars · Sarawak Story
   ============================================================ */

/* ============================================================
   1 · HERO — cinematic, full viewport
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:var(--header-h);
  overflow:hidden;
  background:var(--black);
}

/* --- Slides --- */
.hero__slides{ position:absolute; inset:0; }
/* The outgoing slide is held at full opacity underneath (`is-prev`)
   while the incoming one dissolves in on top. Cross-fading both at
   once would dip the hero to black in the middle of the swap. */
.hero__slide{
  position:absolute; inset:0;
  opacity:0; z-index:0;
  transition:opacity 1.5s var(--slow);
}
.hero__slide.is-prev{ opacity:1; z-index:1; transition:none; }
.hero__slide.is-active{ opacity:1; z-index:2; }
.hero__slide .media{ width:100%; height:100%; }
.hero__slide .media img{
  transform:scale(1.08);
  transition:transform 9s linear;
}
.hero__slide.is-active .media img{ transform:scale(1.0); }

/* Directional scrim — keeps the left column readable */
.hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg,rgba(8,8,7,.94) 0%,rgba(8,8,7,.72) 32%,rgba(8,8,7,.18) 62%,rgba(8,8,7,.42) 100%),
    linear-gradient(180deg,rgba(8,8,7,.55) 0%,transparent 30%,rgba(8,8,7,.85) 100%);
}

.hero__inner{
  position:relative; z-index:3;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:2rem;
  padding-block:clamp(3rem,7vh,6rem);
}

/* --- Copy stack (one block per slide) --- */
.hero__copy{ position:relative; max-width:min(46rem,58vw); }
/* Crossfade: the outgoing headline clears quickly, the incoming
   one arrives just after, so the two never sit on top of each
   other at full strength. */
.hero__block{
  position:absolute; inset:0 auto auto 0; width:100%;
  opacity:0; transform:translateY(20px);
  transition:opacity .34s var(--ease),transform 0s .34s;
  pointer-events:none;
}
.hero__block.is-active{
  position:relative; opacity:1; transform:none; pointer-events:auto;
  transition:opacity .8s var(--slow) .26s,transform .9s var(--slow) .26s;
}
.hero__block h1{ margin-bottom:1.6rem; }
.hero__block h1 .l2{ display:block; }
.hero__lead{
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);
  color:var(--ivory-70); max-width:34ch; line-height:1.75;
}
.hero__hr{
  width:76px; height:1px; background:var(--gold-dim);
  margin-block:2.1rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* --- Trust block (right) — replaces the award badge --- */
.hero__trust{ align-self:center; }

/* --- Bottom bar: slide control + caption --- */
.hero__bar{
  position:relative; z-index:3;
  width:100%; max-width:var(--container); margin-inline:auto;
  padding:0 var(--gut) clamp(1.6rem,4vh,2.6rem);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.hero__count{
  display:flex; align-items:center; gap:1.1rem;
  font-family:var(--serif); font-size:1.6rem; font-weight:300;
  color:var(--ivory-2); letter-spacing:.04em;
}
.hero__count .tot{ font-family:var(--sans); font-size:.72rem; color:var(--ivory-32); letter-spacing:.2em; }
.hero__count .bar{ width:52px; height:1px; background:var(--ivory-12); position:relative; }
.hero__count .bar i{
  position:absolute; inset:0 auto 0 0; background:var(--gold);
  transform-origin:left; transform:scaleX(.33);
  transition:transform .8s var(--ease);
}
.hero__arrows{ display:flex; gap:.6rem; }
.hero__arrows button{
  width:42px; height:42px; border-radius:50%;
  background:transparent; border:1px solid var(--ivory-12);
  color:var(--ivory-70); cursor:pointer;
  display:grid; place-items:center;
  transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease);
}
.hero__arrows button svg{ width:15px; height:15px; }
.hero__arrows button:hover{ border-color:var(--gold); color:var(--gold-2); }
.hero__caption{ text-align:right; }

/* ============================================================
   2 · THREE PILLARS + "This is Sarawak" panel
   ============================================================ */
.pillars{
  background:var(--black-2);
  border-top:1px solid var(--ivory-07);
  display:grid;
  grid-template-columns:1fr 1fr 1fr minmax(0,1.05fr);
}
.pillar{
  padding:clamp(2.4rem,3.6vw,3.6rem) clamp(1.6rem,2.4vw,2.6rem);
  border-right:1px solid var(--ivory-07);
  display:flex; flex-direction:column;
  transition:background .6s var(--ease);
}
.pillar:hover{ background:var(--black-3); }
.pillar__icon{ width:30px; height:30px; color:var(--gold); margin-bottom:1.7rem; }
.pillar__label{
  font-size:.6rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:.9rem;
}
.pillar h3{ margin-bottom:1rem; }
.pillar p{
  font-size:.88rem; color:var(--ivory-50); line-height:1.75;
  margin-bottom:1.9rem; flex:1;
}
.pillar .tlink{ align-self:flex-start; }

/* Fourth panel — image with headline */
.pillar-panel{
  position:relative; min-height:340px;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.4rem,3.6vw,3.4rem);
  overflow:hidden;
}
.pillar-panel .media{ position:absolute; inset:0; }
.pillar-panel__body{ position:relative; z-index:2; }
.pillar-panel h3{ line-height:1.15; margin-bottom:.7rem; }
.pillar-panel .script{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:1.5rem; color:var(--gold-2); margin-bottom:2rem;
  letter-spacing:.01em;
}
.pillar-panel .play{
  display:inline-flex; align-items:center; gap:1rem;
  font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory-2);
  transition:color .4s var(--ease);
}
.pillar-panel .play i{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--gold-dim); display:grid; place-items:center;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.pillar-panel .play svg{ width:13px; height:13px; color:var(--gold-2); }
.pillar-panel .play:hover{ color:var(--gold-2); }
.pillar-panel .play:hover i{ border-color:var(--gold); background:var(--gold-ghost); }

/* Songket-inspired corner motif — a quiet nod, not a pattern fill */
.motif{
  position:absolute; right:-1px; bottom:-1px; z-index:2;
  width:110px; height:110px; color:var(--gold);
  opacity:.5; pointer-events:none;
}

/* ============================================================
   3 · SARAWAK STORY — "More Than a Destination"
   ============================================================ */
.story{
  position:relative; overflow:hidden;
  min-height:min(88svh,780px);
  display:flex; align-items:center;
  padding-block:clamp(5rem,9vw,8rem);
}
.story__bg{ position:absolute; inset:0; }
.story__bg .media{ width:100%; height:100%; }
.story__bg .media img{ will-change:transform; }
.story__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(95deg,rgba(8,8,7,.93) 0%,rgba(8,8,7,.66) 38%,rgba(8,8,7,.20) 70%,rgba(8,8,7,.5) 100%),
    linear-gradient(180deg,rgba(8,8,7,.6) 0%,transparent 32%,rgba(8,8,7,.78) 100%);
}
.story__inner{ position:relative; z-index:2; }
.story__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:end;
}
.story h2{ margin-bottom:1.5rem; }
.story__body p + p{ margin-top:1.15rem; }
.story__body .sig{ color:var(--ivory-2); }
.story__cta{ margin-top:2.4rem; }

/* Gold statistics row — verified facts only */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  border-top:1px solid var(--gold-hair);
  padding-top:2.2rem;
}
.stat{ text-align:center; }
.stat__num{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);
  color:var(--gold-2); line-height:1; letter-spacing:.01em;
  margin-bottom:.6rem;
}
.stat__num .sm{ font-size:.55em; display:block; margin-bottom:.25rem; color:var(--gold); }
.stat__lbl{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory-50); line-height:1.6;
}
.stat + .stat{ border-left:1px solid var(--ivory-07); }