/* =========================
   VARIABLES / TOKENS
   ========================= */
   :root{
    /* Colours */
    --hero-bg: #43ADFA;
    --secondary-600: #005036;   /* nav background */
  
    /* Layout */
    --container: 1140px;
    --gutter: 24px;
    --nav-height: 72px;
  
    /* Parallax speed ratios (tuned) */
    --ratio-blueClouds: -0.68;   /* slowest */
    --ratio-plainCloud: -0.28;   /* mid */
    --ratio-hills:      -0.15;   /* fastest */
  
    /* Intrinsic asset heights (your latest values) */
    --h-blueClouds: 500px;
    --h-plainCloud: 820px;
    --h-hills:      1400px;
  }
  
  /* =========================
     BASE RESET
     ========================= */
  *,
  *::before,
  *::after { box-sizing: border-box; }
  
  html, body { margin: 0; padding: 0; }
  
  body {
    font-family: "Poppins", "Helvetica Neue", Helvetica, "Trebuchet MS", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.65;
    background: #FEE27E;
    color: #222;
  }
  
  h2{
    font-size: 36px;
    letter-spacing: -1px;
    line-height: 1.3;
  }


  button {
    font-family: "Poppins", "Helvetica Neue", Helvetica, "Trebuchet MS", sans-serif;
  }

  img, svg { display: block; max-width: 100%; height: auto; }
  
  /* Utility: Atma for hero headline only */
  .font-hero { font-family: "Atma", cursive; font-weight: 700; }
  
  /* Container helper */
  .container{
    max-width: var(--container);      /* not calc(...) */
    margin: 0 auto;
    padding-inline: var(--gutter);    /* box-sizing:border-box keeps it inside */
  }
  



  /* =========================
     HERO + PARALLAX
     ========================= */
  .hero{
    position: relative;
    overflow: hidden;
    background: var(--hero-bg);
    isolation: isolate;
  }
  
  /* Content layer (normal flow) */
  .hero .hero-content{
    position: relative;
    z-index: 10;
    max-width: var(--container);
    padding-inline: var(--gutter);
    margin: 0 auto;
    padding: 48px 0 8px 0;
  }
  
  /* Parallax layers */
  .plx.layer{
    position: absolute;
    inset: 0 auto auto 50%;
    transform: translateX(-50%);   /* centre horizontally */
    will-change: transform;
    pointer-events: none;
    z-index: 1;
    display: flex;
    justify-content: center;
  }
  
  /* Each layer holds an <img> that we size by height */
  .plx.layer img{
    height: auto;
    width: auto;
    max-width: none;                /* allow oversize width (e.g., 3810px hills) */
    user-select: none;
  }
  
  /* Stacking order + intrinsic heights */
  .layer-blueClouds{ z-index: 2; top: 0; }
  .layer-blueClouds img{ height: var(--h-blueClouds); }
  
  .layer-plainCloud{ z-index: 3; top: 0; }
  .layer-plainCloud img{ height: var(--h-plainCloud); }
  
  /* Hills sit “closer” to the viewer */
  .layer-hills{ z-index: 4; bottom: -10vh; } /* slight bleed at bottom to avoid gaps */
  .layer-hills img{ height: var(--h-hills); }
  
  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    .plx.layer{ transform: translateX(-50%) translateY(0) !important; }
  }


/* ===============================
   Global paragraph sizing system
   =============================== */


/* Scale down for smaller screens */
@media (max-width: 1139px) {
    body { font-size: 18px; }
  }
  
  @media (max-width: 900px) {
    body { font-size: 16px; }
  }
  
  @media (max-width: 679px) {
    body { font-size: 1rem; }
  }