:root{
    --creative-ink:#0e2436;
    --creative-muted:#6c7888;
    --creative-blue:#10A4DF;
    --creative-blue-deep:#0E86C5;
    --creative-hero-overlay:rgba(8,40,60,.45);
    --creative-white:#fff;
    --creative-shadow:0 18px 36px rgba(10,55,90,.16);
    --creative-max:1140px;
  }

  /* Base */
  *{box-sizing:border-box}
  body{margin:0;color:var(--creative-ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  .creative_container{width:min(var(--creative-max),92vw);margin-inline:auto}

  /* HERO */
  .creative_hero{
    position:relative; isolation:isolate;
    background:url('../images/learningbackground.jpg') center/cover no-repeat; /* swap with your image */
  }
  .creative_hero-overlay{position:absolute;inset:0;background:var(--creative-hero-overlay)}
  .creative_hero-inner{position:relative;z-index:2;padding:clamp(24px,5vw,56px) 0 clamp(14px,3vw,28px);     display: flex;
    flex-direction: column;
    align-items: center;;}
  .creative_hero-title{
    margin:0 0 .35em;
    font-weight:800;
    color:#fff;
    font-size:clamp(24px,4.5vw,44px);
    line-height:1.15;
    text-shadow:0 2px 4px rgba(0,0,0,.25);
    letter-spacing:.2px;
  }
  .creative_hero-sub{
    margin:0 0 1rem;
    color:#e8f7ff;
    font-size:clamp(14px,1.9vw,16px);
    max-width:60ch;
  }
  .creative_btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:38px;padding:0 clamp(14px,3vw,18px);
    border-radius:999px;border:none;cursor:pointer;text-decoration:none;
    font-weight:800;font-size:clamp(11px,1.5vw,12.5px);letter-spacing:.35px;text-transform:uppercase;
    box-shadow:var(--creative-shadow);
    transition:filter .15s ease, transform .06s ease;
  }
  .creative_btn:active{transform:translateY(1px)}
  .creative_btn-primary{background:#214d7b;color:#fff}
  .creative_btn-primary:hover{filter:brightness(1.05)}

  /* SERIES LIST */
  .creative_series{padding:clamp(18px,4vw,28px) 0 clamp(30px,6vw,42px)}
  /* A responsive two-column grid that collapses neatly */
  .creative_series-list{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:clamp(12px,2.5vw,18px) clamp(16px,3.2vw,28px);
    align-items:center;
  }
  .creative_series-item{display:flex;gap:.5rem;flex-direction:column}
  .creative_series-title{
    margin:0;
    font-weight:800;
    font-size:clamp(16px,2.4vw,20px);
    letter-spacing:.15px;
  }
  .creative_series-desc{
    margin:0;
    color:var(--creative-muted);
    line-height:1.55;
    font-size:clamp(13.5px,2vw,15.5px);
  }
  .creative_series-cta{justify-self:end}
  .creative_pill{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    padding:10px clamp(14px,3vw,18px);
    border-radius:999px;border:none;white-space:nowrap;
    background:linear-gradient(180deg,var(--creative-blue),var(--creative-blue-deep));
    color:#fff;font-weight:800;text-decoration:none;box-shadow:var(--creative-shadow)
  }
  .creative_pill i{font-size:clamp(12px,2vw,14px)}

  /* Tablet: stack action button under text; keep tidy gutters */
  @media (max-width: 880px){
    .creative_series-list{
      grid-template-columns:1fr;
    }
    .creative_series-cta{justify-self:start}
  }

  /* Narrow phones: increase tap targets & vertical rhythm */
  @media (max-width: 420px){
    .creative_pill{width:100%;justify-content:center}
    .creative_series-list{gap:12px 16px}
  }

  /* Large/4K screens: soften max line length and column spacing */
  @media (min-width: 1400px){
    .creative_container{width:min(1200px,84vw)}
    .creative_series-list{column-gap:48px}
  }