/* =====================================================================
   base.css — site-v4 integrator
   The whole page is one fixed 1280px-wide design canvas (#stage).
   A tiny script scales that canvas UNIFORMLY to the window width, so the
   design fills the width with NO side bars and NO stretching — exactly
   as drawn in Figma. Nothing is "filled" or bled; every section is the
   Figma code positioned in the 1280 canvas.
   ===================================================================== */

*{margin:0;padding:0;box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
html,body{ background:#0a1420; }
body{ overflow-x:hidden; font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; }

/* The fixed design canvas — page background gradient from the Figma frame */
#stage{
  position:relative;
  width:1280px;
  height:6722px;                 /* true Figma frame height — page ends exactly at the footer copyright */
  transform-origin:top left;
  overflow:hidden;
  /* Figma frame gradient spans exactly the 6722px frame; area below (footer bleed) is footer navy */
  background-image:linear-gradient(180deg,#f1fbff 0%, #98a8ba 67.31%, #213a5d 100%);
  background-size:100% 6722px;
  background-repeat:no-repeat;
  background-color:#203148;
}

/* Section wrappers are invisible positioning shells (children are absolutely
   positioned) — but several carry big explicit heights, which makes them swallow
   clicks for everything ABOVE their content. Disable hit-testing on the shells
   and restore it on real interactive elements. */
#stage > [class^="sec-"] { pointer-events: none; }
#stage > [class^="sec-"] a,
#stage > [class^="sec-"] button,
#stage > [class^="sec-"] [data-filter],
#stage > [class^="sec-"] [role="button"],
#stage > [class^="sec-"] .svc-arrow-btn,
#stage > [class^="sec-"] .cert-carousel-arrow { pointer-events: auto; }

/* Every section is placed at the canvas origin; its own children carry the
   exact frame-relative y coordinates. Enforced here so all sections anchor
   identically regardless of what each section stylesheet set. */
#stage > [class^="sec-"]{
  position:absolute;
  left:0;
  top:0;
  width:1280px;
}

/* When the hero band is shortened to end at the fold, everything after it slides up by
   exactly the amount the band lost, so the first scroll lands on the next section. */
#stage > [class^="sec-"]:not(.sec-hero){
  transform:translateY(calc(-1 * var(--hero-lift, 0px)));
}