:root{
    --yellow: #FFCF3D;
    --yellow-deep: #F7B500;
    --purple: #3B2570;
    --purple-deep: #251550;
    --teal: #3FC7E0;
    --teal-deep: #1FA9C4;
    --pink: #FF4E9B;
    --pink-deep: #E22F7E;
    --green: #83B376;
    --cream: #FFF7E4;
    --sky: #DCF4FB;
    --ink: #1D1533;
    --white: #FFFFFF;
    --color-footer-hover: #08adff;
    --color-join-button: #fe3f82;
    --pixel: 6px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }

  html{ scroll-behavior: smooth; width: 100%; margin: 0; padding: 0; }

  body{
    font-family: 'Quicksand', sans-serif;
    background: var(--cream);
    color: var(--ink);
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  h1,h2,h3,.pixel-font{
    font-family: 'Pixelify Sans', monospace;
    line-height: 1.5;
  }

  img, svg{ display:block; max-width:100%; }

  a{ color: inherit; text-decoration: none; }

  /* Tried to keep a pixel style since the sample site feels game-like */
  .pixel-frame{
    clip-path: polygon(
      0 var(--pixel), var(--pixel) var(--pixel), var(--pixel) 0,
      calc(100% - var(--pixel)) 0, calc(100% - var(--pixel)) var(--pixel), 100% var(--pixel),
      100% calc(100% - var(--pixel)), calc(100% - var(--pixel)) calc(100% - var(--pixel)), calc(100% - var(--pixel)) 100%,
      var(--pixel) 100%, var(--pixel) calc(100% - var(--pixel)), 0 calc(100% - var(--pixel))
    );
  }

  .container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* Header / navigation area */
  #site-header{
    position: sticky;
    top: 0;
    z-index: 500;
  }
  header{
    background: url("../assets/images/Partials/partials/headerbgyellow.webp") center / cover no-repeat;
    border-bottom: 0;
    position: relative;
    z-index: 500;
  }
  .nav-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    padding: 0;
    max-width: none;
    margin: 0 auto;
    position: relative;
  }
  .logo{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 10px 0 0;
    height: 82px;
    margin-bottom: 8px;
    overflow: visible;
    text-decoration:none;
  }
  .logo-img{
    width: auto;
    height: 72px;
    max-width: 360px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.14));
    transform: scale(1.55);
    transform-origin: center;
    transition: transform .15s ease;
  }
  .logo-img:hover{
    transform: scale(1.6);
  }
  .site-nav{
    position: relative;
    width: 100%;
    background: #3B9CFF;
    border-top: 0;
    border-bottom: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .nav-menu{
    display:flex;
    gap: 32px;
    list-style:none;
    background: transparent;
    padding: 10px 16px;
    align-items:center;
    justify-content:center;
  }
  .nav-item{
    position:relative;
  }
  nav a,
  .nav-trigger{
    font-family:'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--white);
    padding: 5px 0;
    border-bottom: 3px solid transparent;
    transition: color .15s ease;
    min-height: 34px;
    display:flex;
    align-items:center;
    gap: 4px;
  }
  .nav-trigger{
    background: none;
    border: 0;
    cursor:pointer;
  }
  nav a.is-active,
  nav a:hover,
  nav a:focus-visible,
  .nav-trigger:hover,
  .nav-trigger:focus-visible,
  .nav-trigger.is-active,
  .nav-trigger[aria-expanded="true"]{
    color: var(--yellow);
    border-color: transparent;
  }
  .nav-chevron{
    font-family:'Pixelify Sans', monospace;
    font-size: 11px;
    line-height: 1;
    transition: transform .12s ease;
  }
  .nav-trigger[aria-expanded="true"] .nav-chevron{
    transform: rotate(180deg);
  }
  .dropdown-menu{
    position:absolute;
    top: 100%;
    left: 0;
    display:none;
    min-width: 230px;
    list-style:none;
    background: var(--yellow);
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--purple-deep);
    padding: 8px;
    z-index: 200;
  }
  .has-dropdown.is-open .dropdown-menu{
    display:block;
  }
  .dropdown-menu a{
    color: var(--purple-deep);
    padding: 10px 12px;
    border-bottom: 0;
    min-height: 44px;
  }
  .dropdown-menu a.is-active{
    background: var(--purple-deep);
    color: var(--yellow);
  }
  .dropdown-menu a:hover,
  .dropdown-menu a:focus-visible{
    background: var(--pink);
    color: var(--white);
  }
  .burger{ display:none; background:none; border:none; cursor:pointer; }
  .burger{
    min-width: 44px;
    min-height: 44px;
    place-items:center;
    padding: 6px;
  }
  .burger span{ display:block; width:26px; height:4px; background:var(--ink); margin:4px 0; }

  /* Main intro section */
  .hero{
    background: #15a9c5;
    padding: 0;
  }
  .hero .container{
    max-width: none;
    padding: 0;
  }
  .hero-screen{
    background: url("../assets/images/home/HERO-BANNER.jpg") center / contain no-repeat;
    aspect-ratio: 1920 / 997;
    padding: 4px 24px 24px;
    position: relative;
    text-align:center;
    min-height: 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .hero h1{
    color: var(--yellow);
    font-size: clamp(40px, 5.8vw, 76px);
    line-height: 1.15;
    margin-bottom: 18px;
    text-shadow: 4px 4px 0 #1D1533;
    letter-spacing: 0.5px;
  }
  .hero p{
    color: #FFFFFF;
    max-width: 720px;
    margin: 0 auto 24px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height: 44px;
    font-family:'Pixelify Sans', monospace;
    font-size: 14px;
    padding: 10px 28px;
    background: var(--yellow);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor:pointer;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn.btn-pill{
    border-radius: 24px;
    box-shadow: 0 4px 0 var(--ink);
  }
  .btn:hover, .btn:focus-visible{
    transform: translate(2px,2px);
    box-shadow: 2px 2px 0 var(--ink);
  }
  .btn.btn-yellow{ background: var(--yellow); color: var(--ink); }
  .btn.btn-small{ font-size: 10px; padding: 8px 16px; }

  .floaty{ position:absolute; opacity:.9; animation: bob 3.4s ease-in-out infinite; }
  @keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

  /* Small decoration shapes for the hero */
  .pix{ width:6px; height:6px; position:relative; }
  .pix, .pix::before, .pix::after{ image-rendering: pixelated; }

  .star-icon{
    width: 34px; height:34px;
    background: var(--yellow-deep);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border: 2px solid var(--ink);
  }
  .mail-icon{
    width: 40px; height: 28px;
    background: var(--yellow);
    border: 3px solid var(--ink);
    position: relative;
  }
  .mail-icon::before{
    content:"";
    position:absolute; left:0; top:0; width:100%; height:100%;
    background:
      linear-gradient(135deg, transparent 49%, var(--ink) 49%, var(--ink) 52%, transparent 52%),
      linear-gradient(45deg, transparent 49%, var(--ink) 49%, var(--ink) 52%, transparent 52%);
  }
  .hand-icon{
    width: 30px; height:30px;
    background: var(--pink);
    border: 3px solid var(--ink);
    border-radius: 40% 40% 45% 45%;
  }
  .smiley-icon{
    width: 58px;
    height: 58px;
    background: var(--yellow);
    border: 3px solid var(--ink);
    border-radius: 50%;
    position: relative;
    transform: rotate(12deg);
  }
  .smiley-icon::before{
    content:"";
    position:absolute;
    width: 8px;
    height: 8px;
    background: var(--ink);
    border-radius: 50%;
    top: 18px;
    left: 15px;
    box-shadow: 20px 0 0 var(--ink);
  }
  .smiley-icon::after{
    content:"";
    position:absolute;
    width: 26px;
    height: 13px;
    border-bottom: 4px solid var(--ink);
    border-radius: 0 0 26px 26px;
    left: 15px;
    top: 30px;
  }
  .sticky-note{
    width: 62px;
    min-height: 44px;
    background: var(--yellow);
    border: 3px solid var(--ink);
    transform: rotate(-11deg);
    display:grid;
    place-items:center;
  }
  .sticky-note::before{
    content:"";
    width: 34px;
    height: 4px;
    background: var(--ink);
    box-shadow:
      0 9px 0 var(--ink),
      0 18px 0 var(--ink);
  }
  .sticky-note::after{
    content:"";
    position:absolute;
    right: 0;
    bottom: 0;
    border-left: 12px solid transparent;
    border-top: 12px solid var(--cream);
  }

  .tags-bar{
    background: #4B25CD;
    border: 0;
    padding: 10px 0;
  }
  .tags-bar ul{
    list-style:none;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-around;
    gap: 10px 32px;
    padding: 6px 24px;
    max-width:1200px;
    margin:0 auto;
  }
  .tags-bar li{
    font-family:'Pixelify Sans', monospace;
    font-weight: 700;
    font-size: 16px;
    color: var(--yellow);
    display:flex;
    align-items:center;
    gap:8px;
    letter-spacing: 0.5px;
  }
  .tags-bar li::before{
    content:"";
    width:8px; height:8px;
    background: var(--pink-deep);
  }

  /* Projects section */
  section{ padding: 64px 0; }
  .section-projects{
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
    padding: 34px 0 46px;
  }

  .section-heading{
    text-align:center;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--purple-deep);
    margin-bottom: 4px;
  }
  .section-heading::after{
    content:"";
    display:none;
    width:70px; height:6px;
    background: var(--pink);
    margin: 12px auto 0;
  }
  .section-projects-intro{
    max-width: 560px;
    margin: 0 auto 32px;
    text-align:center;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
  }

  .eyebrow{
    font-family:'Pixelify Sans', monospace;
    font-size: 10px;
    color: var(--pink-deep);
    margin-bottom: 12px;
    letter-spacing: 1px;
  }
  .eyebrow-featured{
    color: var(--pink);
  }
  .eyebrow-essentials{
    color: var(--green);
  }

  .feature-row{
    display:grid;
    grid-template-columns: minmax(230px, .95fr) minmax(240px, .85fr);
    gap: 24px;
    align-items:center;
    max-width: 760px;
    margin: 0 auto 36px;
  }
  /* Second project flips sides so the layout does not look too repetitive */
  .feature-row.reverse .feature-media{ order: 2; }
  .feature-row.reverse .feature-copy{ order: 1; }

  .thumb-stack{ position:relative; width: 100%; max-width: 300px; margin:auto; }
  .thumb{
    background: var(--white);
    border: 4px solid var(--ink);
    padding: 4px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .thumb-art{
    position:relative;
    aspect-ratio: 4/3;
    background:
      linear-gradient(135deg, var(--sky) 25%, transparent 25%) 0 0/16px 16px,
      linear-gradient(-135deg, var(--sky) 25%, transparent 25%) 0 0/16px 16px,
      var(--white);
    display:grid; place-items:center;
  }
  .thumb-art::before,
  .thumb-art::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:105%;
    height:5px;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--white);
    transform-origin:center;
    opacity:.85;
  }
  .thumb-art::before{
    transform:translate(-50%, -50%) rotate(34deg);
  }
  .thumb-art::after{
    transform:translate(-50%, -50%) rotate(-34deg);
  }
  .thumb-art .glyph{ width: 46%; opacity:0; }
  .thumb-art[data-photo-slot="home-featured-story"]::before,
  .thumb-art[data-photo-slot="home-featured-story"]::after,
  .thumb-art[data-photo-slot="home-safe-online"]::before,
  .thumb-art[data-photo-slot="home-safe-online"]::after{
    display:none;
  }
  .thumb-behind{
    position:absolute;
    top: 14px; left: 14px;
    width:100%;
    height:100%;
    background: var(--yellow);
    border: 4px solid var(--ink);
    z-index:-1;
  }

  .feature-copy h3{
    font-size: clamp(22px, 3.3vw, 34px);
    color: var(--purple-deep);
    margin-bottom: 10px;
    line-height: .95;
  }
  .feature-copy p{
    font-size: 14px;
    line-height: 1.35;
    color: #3A3352;
    font-weight: 800;
    margin-bottom: 14px;
    max-width: 34ch;
  }
  .section-projects .btn-small{
    font-size: 13px;
    min-height: 44px;
    padding: 10px 22px;
  }

  /* Support section */
  .section-support{
    background: var(--pink);
    color: var(--white);
    padding: 44px 0;
  }
  .support-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    align-items:center;
    gap: 40px;
  }
  .support-copy-block{
    text-align:center;
    display:grid;
    justify-items:center;
  }
  .section-support h2{
    margin-bottom: 12px;
    font-size: clamp(32px, 4.6vw, 52px);
    line-height: .95;
  }
  .support-copy-block p{
    max-width: 360px;
    margin-bottom: 16px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
  }
  .video-frame{
    display: block;
    max-width: 100%;
    margin: 0;
    background-color: var(--ink);
    background-image: url("../assets/videos/ai-letse-poster.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 5px solid var(--white);
    aspect-ratio: 16/9;
    position:relative;
    box-shadow: 6px 6px 0 var(--purple-deep);
    overflow: hidden;
  }
  .video-frame::before{
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 56.25%;
  }
  .video-frame video,
  .video-frame iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    background: #000;
  }
  .social-row{
    display:flex;
    gap:10px;
    justify-content:center;
  }
  .social-row a{
    width: 30px; height:30px;
    display:grid; place-items:center;
    transition: transform .12s ease;
  }
  .social-row a:hover{ transform: translateY(-4px); }
  .support-social-icon{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
  }

  /* Newsletter / sign up part */
  .section-join{
    background-image:
      radial-gradient(circle, rgba(255,207,61,.08) 1.5px, transparent 1.5px),
      linear-gradient(rgba(29,21,51,.55), rgba(29,21,51,.55)),
      url("../assets/images/home/NEWSLETTER-SIGN-UP.png");
    background-size: 18px 18px, auto, cover;
    background-position: center;
  }
  .join-card{
    background: var(--yellow);
    border: 5px solid var(--ink);
    box-shadow: 0 8px 0 rgba(29,21,51,.45);
    max-width: 620px;
    margin: 0 auto;
    padding: 34px 30px;
    text-align:center;
  }
  .join-card h2{
    color: var(--purple-deep);
    font-size: clamp(16px,2.6vw,22px);
    margin-bottom: 16px;
  }
  .join-card p{
    font-weight:600;
    color:#4A4360;
    margin-bottom: 30px;
  }
  form.join-form{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  form.join-form .full{ grid-column: 1 / -1; }
  form.join-form input{
    width:100%;
    padding: 13px 14px;
    border: 3px solid var(--ink);
    font-family:'Quicksand', sans-serif;
    font-weight:700;
    font-size:14px;
    background: var(--white);
  }
  form.join-form input:focus-visible{
    outline: 3px solid var(--teal-deep);
    outline-offset: 2px;
  }
  form.join-form button{
    grid-column: 1 / -1;
    justify-self:center;
    margin-top: 6px;
    background: var(--color-join-button);
  }
  .form-note{
    grid-column: 1/-1;
    font-size: 12px;
    font-weight: 700;
    min-height: 18px;
    color: var(--pink-deep);
  }

  .content-page{
    background: var(--cream);
  }
  .contact-hero{
    background: var(--cream);
    padding: 34px 0 18px;
    text-align:center;
    position: relative;
  }
  .contact-kicker{
    font-family:'Pixelify Sans', monospace;
    color: var(--pink-deep);
    font-size: 14px;
    margin-bottom: 8px;
  }
  .contact-hero h1{
    color: var(--ink);
    font-size: clamp(34px, 7vw, 58px);
    line-height: 1;
    margin: 0 auto 12px;
    display:inline-block;
    padding: 0;
  }
  .contact-hero p{
    max-width: 560px;
    margin: 0 auto;
    font-weight: 700;
    line-height: 1.5;
    color: var(--purple-deep);
  }
  .contact-panel-section{
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
    padding: 40px 0 52px;
  }
  .contact-panel{
    max-width: 760px;
    margin: 0 auto 32px;
    border: 4px solid var(--ink);
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
    padding: 16px;
    box-shadow: 8px 8px 0 var(--purple-deep);
  }
  .contact-form-card{
    background: var(--white);
    background-image: radial-gradient(circle, rgba(29,21,51,.045) 1px, transparent 1px);
    background-size: 12px 12px;
    border: 3px solid var(--ink);
    padding: 18px;
  }
  .contact-form{
    display:grid;
    gap: 16px;
  }
  .contact-form-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-form label{
    display:grid;
    gap: 8px;
    font-weight: 800;
    color: var(--purple-deep);
  }
  .contact-form input,
  .contact-form textarea{
    width:100%;
    border: 3px solid var(--ink);
    background: var(--cream);
    padding: 12px 14px;
    font-family:'Quicksand', sans-serif;
    font-weight: 700;
    font-size: 15px;
  }
  .contact-form textarea{
    resize: vertical;
    min-height: 150px;
  }
  .contact-form button{
    justify-self:end;
  }
  .contact-info-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  .contact-info-card{
    background: var(--pink);
    border: 4px solid var(--ink);
    padding: 20px;
    min-height: 150px;
    box-shadow: 6px 6px 0 var(--purple-deep);
    position: relative;
  }
  .contact-info-card h2{
    font-size: 18px;
    color: var(--purple-deep);
    margin-bottom: 8px;
  }
  .contact-info-card p{
    font-weight: 800;
    line-height: 1.45;
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .contact-info-card a{
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
  .contact-address-card p{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink);
  }
  .feedback-panel{
    max-width: 820px;
    background: var(--yellow);
    background-image: none;
  }
  .feedback-page .contact-hero{
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
  }
  .contact-page .contact-hero{
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
  }
  .contact-page .contact-panel{
    background: var(--yellow);
    background-image: none;
  }
  .feedback-page .contact-form-card{
    border-color: var(--purple-deep);
  }
  .feedback-form-row{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .feedback-form textarea{
    min-height: 220px;
  }
  .feedback-rating-field{
    border: 0;
    padding: 0;
    margin: 0;
    display:grid;
    gap: 8px;
    font-weight: 800;
    color: var(--purple-deep);
  }
  .feedback-rating-control{
    position: relative;
    display:flex;
    flex-direction: row-reverse;
    justify-content:flex-end;
    gap: 4px;
    min-height: 44px;
    align-items:center;
  }
  .feedback-rating-control input{
    position:absolute;
    opacity:0;
    pointer-events:none;
  }
  .feedback-rating-control label{
    width: 44px;
    height: 44px;
    display:grid;
    place-items:center;
    cursor:pointer;
    color: var(--cream);
    -webkit-text-stroke: 2px var(--ink);
    font-size: 30px;
    line-height: 1;
  }
  .feedback-rating-control label:hover,
  .feedback-rating-control label:hover ~ label,
  .feedback-rating-control input:checked ~ label{
    color: var(--pink);
  }
  .feedback-rating-control input:focus-visible + label{
    outline: 3px solid var(--teal-deep);
    outline-offset: 2px;
  }

  .card-icon{
    width: 36px; height: 36px;
    margin-bottom: 12px;
  }

  /* About Us Page Styles */
  .about-hero {
    background: var(--cream);
    padding: 38px 0 28px;
    position: relative;
  }
  .about-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 36px;
    align-items: center;
  }
  .about-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .about-hero-text h1 {
    color: var(--ink);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.05;
    margin: 0 0 10px;
    padding: 6px 22px;
    background: var(--yellow);
    box-shadow: 4px 4px 0 var(--purple-deep);
  }
  .about-hero .contact-kicker{
    font-size: clamp(18px, 2.6vw, 24px);
  }
  .about-tagline {
    font-family: 'Pixelify Sans', monospace;
    color: var(--purple);
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 700;
    margin-bottom: 16px;
  }
  .about-hero-text p {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .about-hero-media {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .about-character-card {
    background: var(--teal);
    border: 4px solid var(--ink);
    box-shadow: 8px 8px 0 var(--purple-deep);
    padding: 20px;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .about-pixel-scene{
    width: 100%;
    min-height: 210px;
    background:
      linear-gradient(135deg, var(--sky) 25%, transparent 25%) 0 0/18px 18px,
      linear-gradient(-135deg, var(--sky) 25%, transparent 25%) 0 0/18px 18px,
      var(--cream);
    border: 3px solid var(--ink);
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
  }
  .about-screen-face{
    width: 118px;
    height: 94px;
    background: var(--white);
    border: 5px solid var(--ink);
    box-shadow: 8px 8px 0 var(--purple-deep);
    position:relative;
  }
  .about-screen-face::before{
    content:"";
    position:absolute;
    width: 12px;
    height: 12px;
    background: var(--ink);
    left: 28px;
    top: 30px;
    box-shadow: 44px 0 0 var(--ink);
  }
  .about-screen-face::after{
    content:"";
    position:absolute;
    width: 48px;
    height: 20px;
    border-bottom: 5px solid var(--ink);
    border-radius: 0 0 48px 48px;
    left: 30px;
    top: 48px;
  }
  .about-scene-note{
    position:absolute;
    right: 18px;
    top: 18px;
    width: 56px;
    height: 42px;
    background: var(--yellow);
    border: 3px solid var(--ink);
    transform: rotate(8deg);
  }
  .about-scene-note::before{
    content:"";
    position:absolute;
    left: 10px;
    top: 10px;
    width: 28px;
    height: 3px;
    background: var(--ink);
    box-shadow: 0 8px 0 var(--ink), 0 16px 0 var(--ink);
  }

  /* Our Message Section */
  .about-message-section {
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
    padding: 44px 0 52px;
  }
  .message-panel {
    border: 4px solid var(--ink);
    background: var(--yellow);
    background-image: none;
    padding: 16px;
    box-shadow: 8px 8px 0 var(--purple-deep);
    max-width: 960px;
    margin: 0 auto;
  }
  .message-panel-inner {
    background: var(--white);
    background-image: radial-gradient(circle, rgba(29,21,51,.045) 1px, transparent 1px);
    background-size: 12px 12px;
    border: 3px solid var(--ink);
    padding: 28px 24px;
  }
  .message-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 32px;
    align-items: center;
  }
  .message-media{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: 14px;
  }
  .message-copy h2 {
    font-size: clamp(26px, 4vw, 36px);
    color: var(--purple-deep);
    margin-bottom: 14px;
  }
  .message-copy p {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--ink);
    margin-bottom: 20px;
  }
  .about-book-photo{
    width: min(320px, 100%);
    height: 320px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    object-fit: cover;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .founder-card {
    background: var(--purple);
    border: 3px solid var(--ink);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    align-items:center;
    text-align:center;
    gap: 4px;
    box-shadow: 4px 4px 0 var(--ink);
    width: min(320px, 100%);
  }
  .founder-name {
    font-family: 'Pixelify Sans', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
  }
  .founder-role {
    font-size: 12px;
    font-weight: 700;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .founder-email {
    font-size: 13px;
    font-weight: 700;
    color: var(--teal-deep);
    text-decoration: underline;
    overflow-wrap: anywhere;
  }

  /* Meet The Team Section */
  .about-team-section {
    background: var(--cream);
    padding: 48px 0 60px;
  }
  .team-heading {
    font-size: clamp(28px, 4.5vw, 42px);
    text-align: center;
    color: var(--ink);
    margin-bottom: 32px;
    display: block;
  }
  .team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .team-card {
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 6px 6px 0 var(--purple-deep);
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .team-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--purple-deep);
  }
  .team-avatar-box {
    width: 132px;
    height: 132px;
    border: 3px solid var(--ink);
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
  }
  .team-avatar-box span{
    font-size: 40px;
    color: var(--ink);
  }
  .team-photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .team-card:nth-child(1) .team-avatar-box { background: var(--pink); }
  .team-card:nth-child(2) .team-avatar-box { background: var(--teal); }
  .team-card:nth-child(3) .team-avatar-box { background: var(--yellow); }

  .team-card h3 {
    font-size: 20px;
    color: var(--purple-deep);
    margin-bottom: 6px;
  }
  .team-role-tag {
    display: inline-block;
    font-family: 'Pixelify Sans', monospace;
    font-size: 11px;
    background: var(--purple);
    color: var(--yellow);
    padding: 4px 12px;
    border: 2px solid var(--ink);
    margin-bottom: 12px;
  }
  .team-email {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    overflow-wrap: anywhere;
    text-decoration: underline;
  }

  /* Media Partnerships and Licensing pages */
  .support-page{
    background: var(--cream);
  }
  .support-hero{
    min-height: 300px;
    display:flex;
    align-items:center;
    border-bottom: 6px solid var(--teal-deep);
    position:relative;
    overflow:hidden;
  }
  .support-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg, var(--pink), transparent),
      linear-gradient(135deg, var(--purple), var(--teal));
    opacity:.9;
  }
  .support-hero-licensing::before{
    background:
      linear-gradient(90deg, var(--teal), transparent),
      linear-gradient(135deg, var(--yellow), var(--purple));
  }
  .licensing-page .support-hero{
    background: url("../assets/images/contacts/Contentreuseandlicensing_Header.png") center / cover no-repeat;
  }
  .licensing-page .support-hero::before{
    background: rgba(0,0,0,.35);
    opacity: 1;
  }
  .licensing-page .support-hero::after{
    display: none;
  }
  .licensing-page .support-hero-inner{
    display: flex;
    align-items: center;
  }
  .licensing-page .support-hero-copy{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    padding: 28px 0;
  }
  .support-hero::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:46%;
    height:100%;
    background:
      linear-gradient(135deg, var(--sky) 25%, transparent 25%) 0 0/24px 24px,
      linear-gradient(-135deg, var(--sky) 25%, transparent 25%) 0 0/24px 24px,
      var(--cream);
    opacity:.45;
  }
  .support-hero-inner{
    position:relative;
    z-index:1;
  }
  .support-hero-inner > div{
    max-width: 560px;
  }
  .support-hero h1{
    color: var(--white);
    font-size: clamp(34px, 6vw, 58px);
    line-height: 1;
    margin-bottom: 12px;
    text-shadow: 4px 4px 0 var(--purple-deep);
  }
  .support-hero p{
    color: var(--white);
    font-weight: 800;
    line-height: 1.45;
  }
  .media-page .support-hero{
    min-height: 310px;
    background: url("../assets/images/contacts/Partnership_header.png") center / cover no-repeat;
  }
  .media-page .support-hero::before{
    background: rgba(0,0,0,.35);
  }
  .media-page .support-hero::after{
    display:none;
  }
  .media-page .support-hero-inner{
    display:grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 26px;
    align-items:stretch;
  }
  .media-page .support-hero-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    max-width: none;
    padding: 28px 0;
  }
  .support-hero-visual{
    min-height: 230px;
    border: 4px solid var(--ink);
    background:
      var(--cream);
    box-shadow: 8px 8px 0 var(--purple-deep);
  }
  .image-placeholder{
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  .image-placeholder::before,
  .image-placeholder::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:105%;
    height:5px;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--white);
    transform-origin:center;
    opacity:.85;
  }
  .image-placeholder::before{
    transform:translate(-50%, -50%) rotate(34deg);
  }
  .image-placeholder::after{
    transform:translate(-50%, -50%) rotate(-34deg);
  }
  .support-section{
    padding: 44px 0 58px;
  }
  .support-heading{
    max-width: 720px;
    margin: 0 auto 28px;
    text-align:center;
  }
  .support-heading h2{
    font-size: clamp(30px, 5vw, 46px);
    color: var(--ink);
    line-height: 1;
    margin-bottom: 10px;
  }
  .support-heading p{
    font-weight: 700;
    line-height: 1.55;
    color: var(--purple-deep);
  }
  .support-heading p a{
    color: var(--teal-deep);
    font-weight: 800;
    text-decoration: underline;
  }
  .support-contact-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
  }
  .support-card{
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 6px 6px 0 var(--purple-deep);
    padding: 22px;
    display:flex;
    align-items:center;
    gap: 18px;
  }
  .support-avatar{
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
    border: 3px solid var(--ink);
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  .support-avatar-pink{ background: var(--pink); }
  .support-avatar-teal{ background: var(--teal); }
  .support-card-body{
    display:flex;
    flex-direction:column;
    gap: 6px;
    min-width: 0;
  }
  .support-card h3{
    color: var(--purple-deep);
    font-size: 22px;
    margin-bottom: 2px;
  }
  .support-card p,
  .support-card a{
    display:block;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.4;
    overflow-wrap:anywhere;
  }
  .support-card a{
    text-decoration: underline;
  }
  .donation-section{
    display:grid;
    grid-template-columns: 1fr 1fr;
    background: #04FA73;
    align-items:stretch;
    padding: 0;
    border-top: 6px solid #011016;
  }
  .donation-image{
    min-height: 300px;
    background: url("../assets/images/contacts/Mediapartnerships_DOnatetoday-1.png") left center / cover no-repeat;
  }
  .donation-image img{
    display: none;
  }
  .donation-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 20px 24px;
    color: var(--ink);
    background: #04FA73;
  }
  .donation-copy h2{
    font-size: clamp(30px, 5vw, 46px);
    color: var(--ink);
    line-height: 1;
    margin-bottom: 10px;
  }
  .donation-copy > p{
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 20px;
  }
  .bank-card{
    background: var(--white);
    border: 4px solid var(--ink);
    padding: 18px;
    box-shadow: 6px 6px 0 var(--purple-deep);
  }
  .bank-card h3{
    color: var(--purple-deep);
    font-size: 22px;
    margin-bottom: 10px;
  }
  .bank-card p{
    font-weight: 800;
    line-height: 1.45;
    margin-bottom: 4px;
  }
  .faq-list{
    max-width: 900px;
    margin: 0 auto;
    display:grid;
    gap: 12px;
  }
  .faq-item{
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 5px 5px 0 var(--purple-deep);
  }
  .faq-item summary{
    cursor:pointer;
    padding: 18px 20px;
    font-family:'Pixelify Sans', monospace;
    font-size: 22px;
    color: var(--purple-deep);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .faq-body{
    border-top: 3px solid var(--ink);
    padding: 18px 22px 22px;
    font-weight: 700;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .faq-body p,
  .faq-body ul{
    margin-bottom: 12px;
  }
  .faq-body ul{
    padding-left: 22px;
  }

  /* Footer */
  footer{
    background: #05283d;
    color: #C9BEEA;
    padding: 30px 0 18px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
  }
  .footer-logo{
    font-family:'Pixelify Sans', monospace;
    color: var(--white);
    font-size: 14px;
    margin-bottom: 10px;
  }
  footer h4{
    font-family:'Pixelify Sans', monospace;
    font-size: 11px;
    color: var(--yellow);
    margin-bottom: 14px;
  }
  footer ul{ list-style:none; }
  footer li{ margin-bottom: 8px; font-weight:600; font-size:14px; }
  footer li a:hover{ color: var(--teal); }
  .footer-bottom{
    border-top: 2px solid #4A3690;
    padding-top: 18px;
    text-align:center;
    font-size: 12px;
    font-weight:600;
  }

  .home-footer{
    padding: 0;
    background: transparent;
    color: var(--white);
  }
  .home-footer-main{
    background: url("../assets/images/Partials/partials/footerbgdarkblue.webp") center / cover no-repeat;
    padding: 28px 0 22px;
  }
  .home-footer-grid{
    display:grid;
    grid-template-columns: 1.7fr .7fr .9fr;
    gap: 40px;
    align-items:start;
  }
  .home-footer-logo{
    display:flex;
    align-items:center;
    margin-bottom: 18px;
  }
  .home-footer-logo-img{
    height: auto;
    width: 190px;
    max-width: 100%;
    object-fit: contain;
    display:block;
  }
  .home-footer-brand p{
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    color: var(--white);
  }
  .home-footer-toggle{
    font-family:'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 10px;
    background: none;
    border: 0;
    padding: 0;
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    cursor: default;
  }
  .home-footer-toggle span:last-child{
    display:none;
  }
  .home-footer-links ul{
    list-style:none;
  }
  .home-footer-links li{
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
  }
  .home-footer-links a:hover,
  .home-footer-links a:focus-visible{
    color: var(--color-footer-hover);
  }
  .home-footer-bottom{
    background: var(--yellow);
    color: var(--ink);
    padding: 9px 0 8px;
  }
  .home-footer-bottom-grid{
    display:flex;
    justify-content:space-between;
    gap: 24px;
    align-items:center;
  }
  .home-footer-bottom p{
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }
  .home-footer-bottom small{
    display:block;
    font-size: 9px;
    font-weight: 700;
    opacity: .75;
    margin-top: 2px;
  }
  .home-footer-social{
    display:flex;
    gap: 8px;
    align-items:center;
    flex: 0 0 auto;
  }
  .home-footer-social a{
    display:flex;
    align-items:center;
  }
  .footer-social-icon{
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
  }

  /* Lesson pages */
  .lesson-page{
    background: var(--cream);
  }
  .lesson-hero{
    background: var(--cream);
    padding: 42px 0 32px;
    border-bottom: 6px solid var(--teal-deep);
  }
  .cybersafety-page .lesson-hero{
    background: url("../assets/images/lessons/lessons/cybersafety.webp") center / cover no-repeat;
    position:relative;
    min-height: 420px;
  }
  .cybersafety-page .lesson-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
    z-index:0;
  }
  .cybersafety-page .lesson-hero > *{
    position:relative;
    z-index:1;
  }
  .reader-page .lesson-hero{
    background: url("../assets/images/lessons/lessons/raisereaders.webp") center / cover no-repeat;
    position:relative;
    min-height: 420px;
  }
  .reader-page .lesson-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
    z-index:0;
  }
  .reader-page .lesson-hero > *{
    position:relative;
    z-index:1;
  }
  .lesson-hero-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items:center;
    text-align:center;
    justify-items:center;
  }
  .lesson-hero-copy h1{
    color: var(--ink);
    font-size: clamp(36px, 7vw, 62px);
    line-height: .95;
    margin-bottom: 14px;
    max-width: 720px;
  }
  .lesson-hero-copy p{
    color: var(--purple-deep);
    font-weight: 800;
    line-height: 1.5;
    max-width: 620px;
  }
  .cybersafety-page .lesson-hero-copy h1{
    color: #08ADFF;
  }
  .cybersafety-page .lesson-hero-copy .contact-kicker,
  .cybersafety-page .lesson-hero-copy p{
    color: #FFFFFF;
  }
  .reader-page .lesson-hero-copy h1{
    color: var(--yellow);
    text-shadow: 3px 3px 0 #1D1533;
  }
  .reader-page .lesson-hero-copy .contact-kicker,
  .reader-page .lesson-hero-copy p{
    color: #FFFFFF;
  }
  .lesson-section{
    padding: 44px 0 56px;
  }
  .lesson-section-sky{
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
  }
  .lesson-section-yellow{
    background: url("../assets/images/Partials/partials/headerbgyellow.webp") center / cover no-repeat;
  }
  .lesson-heading{
    max-width: 820px;
    margin: 0 auto 26px;
    text-align:center;
  }
  .lesson-heading h2,
  .lesson-remember h2{
    color: var(--ink);
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1;
    margin-bottom: 12px;
  }
  .lesson-heading p,
  .lesson-remember p{
    color: var(--purple-deep);
    font-weight: 800;
    line-height: 1.55;
  }
  .lesson-card-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .lesson-card,
  .lesson-tip-card{
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 6px 6px 0 var(--purple-deep);
  }
  .lesson-card{
    padding: 22px;
  }
  .lesson-card h3{
    color: var(--purple-deep);
    font-size: 22px;
    margin-bottom: 12px;
  }
  .lesson-card ul,
  .lesson-list{
    display:grid;
    gap: 12px;
    padding-left: 22px;
  }
  .lesson-card li,
  .lesson-list li{
    color: var(--ink);
    font-weight: 800;
    line-height: 1.45;
  }
  .lesson-tip-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .lesson-tip-grid-three{
    grid-template-columns: repeat(3, 1fr);
  }
  .lesson-tip-card{
    min-height: 160px;
    padding: 20px;
    display:flex;
    flex-direction:column;
    gap: 18px;
  }
  .lesson-tip-card span{
    width: 44px;
    height: 44px;
    display:grid;
    place-items:center;
    background: var(--yellow);
    border: 3px solid var(--ink);
    border-radius: 50%;
    color: var(--purple-deep);
    font-family:'Pixelify Sans', monospace;
    font-size: 24px;
    font-weight: 800;
  }
  .lesson-tip-card p{
    color: var(--ink);
    font-weight: 800;
    line-height: 1.35;
  }
  .lesson-list{
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 6px 6px 0 var(--purple-deep);
    padding: 24px 24px 24px 46px;
  }
  /* Tip carousel */
  .tip-carousel-section{
    position:relative;
    overflow:hidden;
    padding: 72px 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.45) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
  }
  .tip-carousel-wrap{
    display:flex;
    align-items:center;
    gap: 14px;
    position:relative;
    z-index:1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 18px;
  }
  .tip-featured-stage{
    overflow:hidden;
    flex:1;
    min-width:0;
    padding: 22px 0 26px;
  }
  .tip-carousel-track{
    display:flex;
    align-items:center;
    gap: 24px;
    transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .tip-carousel-track:focus-visible{
    outline: 3px solid var(--teal-deep);
    outline-offset: 6px;
  }
  .tip-carousel-track .lesson-tip-card{
    flex: 0 0 360px;
    min-height: 210px;
    padding: 28px;
    gap: 24px;
    transform: scale(0.82);
    opacity: 0.55;
    cursor: pointer;
    background-image: radial-gradient(circle, rgba(29,21,51,.035) 1px, transparent 1px);
    background-size: 14px 14px;
    transition: transform .4s ease, opacity .4s ease, box-shadow .35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .2s ease;
  }
  .tip-carousel-track .lesson-tip-card.is-active{
    transform: scale(1);
    opacity: 1;
    box-shadow: 8px 8px 0 var(--purple-deep);
  }
  .tip-carousel-track .lesson-tip-card span{
    width: 56px;
    height: 56px;
    font-size: 30px;
  }
  .tip-carousel-track .lesson-tip-card p{
    font-size: 17px;
    line-height: 1.4;
  }
  /* Rainbow card theming */
  .tip-carousel-track .lesson-tip-card:nth-child(1) span{ background:var(--yellow); border-color:var(--yellow-deep); }
  .tip-carousel-track .lesson-tip-card:nth-child(2) span{ background:var(--pink); }
  .tip-carousel-track .lesson-tip-card:nth-child(3) span{ background:var(--teal); }
  .tip-carousel-track .lesson-tip-card:nth-child(4) span{ background:var(--purple); color:var(--white); }
  .tip-carousel-track .lesson-tip-card:nth-child(5) span{ background:var(--yellow-deep); }
  .tip-carousel-track .lesson-tip-card:nth-child(6) span{ background:var(--pink-deep); color:var(--white); }

  .tip-carousel-track .lesson-tip-card:nth-child(1){ border-color:var(--yellow-deep); }
  .tip-carousel-track .lesson-tip-card:nth-child(2){ border-color:var(--pink); }
  .tip-carousel-track .lesson-tip-card:nth-child(3){ border-color:var(--teal); }
  .tip-carousel-track .lesson-tip-card:nth-child(4){ border-color:var(--purple); }
  .tip-carousel-track .lesson-tip-card:nth-child(5){ border-color:var(--yellow-deep); }
  .tip-carousel-track .lesson-tip-card:nth-child(6){ border-color:var(--pink); }
  /* Pixel-art arrow buttons */
  .tip-arrow{
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display:grid;
    place-items:center;
    background: var(--yellow);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--purple-deep);
    cursor:pointer;
    color: var(--ink);
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease, background .2s ease, color .2s ease;
    position:relative;
    z-index:2;
    user-select:none;
  }
  .tip-arrow:focus-visible{
    outline: 3px solid var(--teal-deep);
    outline-offset: 3px;
  }
  .tip-arrow:hover{
    background: var(--pink);
    color: var(--white);
    transform: scale(1.12) translateY(-2px);
    box-shadow: 5px 5px 0 var(--purple-deep);
    animation-play-state: paused;
  }
  .tip-arrow:active{
    transform: scale(0.92) translateY(1px);
    box-shadow: 2px 2px 0 var(--purple-deep);
  }
  .tip-arrow.is-disabled{
    opacity: .35;
    pointer-events:none;
    box-shadow: 2px 2px 0 var(--purple-deep);
    animation:none;
  }
  /* Idle bob animation for arrows */
  @keyframes arrowBob{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }
  .tip-arrow:not(.is-disabled){
    animation: arrowBob 2.4s ease-in-out infinite;
  }
  /* Pixel arrow shapes via pseudo-elements using currentColor */
  .tip-arrow::before{
    content:"";
    display:block;
    width:5px;
    height:5px;
    background:currentColor;
  }
  .tip-arrow-left::before{
    box-shadow:
      0 -5px 0 currentColor,
      0 -10px 0 currentColor,
      0 5px 0 currentColor,
      0 10px 0 currentColor,
      -5px 0 0 currentColor,
      -10px 0 0 currentColor;
  }
  .tip-arrow-right::before{
    box-shadow:
      0 -5px 0 currentColor,
      0 -10px 0 currentColor,
      0 5px 0 currentColor,
      0 10px 0 currentColor,
      5px 0 0 currentColor,
      10px 0 0 currentColor;
  }
  /* Scroll position dot indicators */
  .tip-dots{
    display:flex;
    justify-content:center;
    gap: 8px;
    margin-top: 14px;
    position:relative;
    z-index:1;
  }
  .tip-dots span,
  .tip-dots button{
    appearance:none;
    width: 10px;
    height: 10px;
    background: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 2px;
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s ease;
    cursor:pointer;
    padding: 0;
  }
  .tip-dots span.is-active,
  .tip-dots button.is-active{
    background: var(--pink);
    border-color: var(--pink);
    transform: scale(1.35);
  }
  .tip-dots span:hover,
  .tip-dots button:hover,
  .tip-dots button:focus-visible{
    background: var(--teal);
    border-color: var(--teal);
    transform: scale(1.2);
  }

  /* Gallery featured carousel */
  .gallery-section{
    padding: 60px 0 72px;
    background-image: radial-gradient(circle, rgba(29,21,51,.04) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    position:relative;
  }
  .gallery-heading{
    font-size: clamp(36px, 6vw, 56px);
    color: var(--purple-deep);
    text-align:center;
    letter-spacing: 1px;
  }
  .gallery-intro{
    text-align:center;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 18px);
    color: var(--ink);
    max-width: 520px;
    margin: 8px auto 36px;
    line-height: 1.45;
  }
  .gallery-carousel-wrap{
    display:flex;
    align-items:center;
    gap: 14px;
    position:relative;
    z-index:1;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 18px;
  }
  .gallery-featured-stage{
    overflow:hidden;
    flex:1;
    min-width:0;
    padding: 22px 0 26px;
  }
  .gallery-featured-track{
    display:flex;
    align-items:center;
    transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .gallery-featured-track:focus-visible{
    outline: 3px solid var(--teal-deep);
    outline-offset: 6px;
  }
  .gallery-card{
    flex: 0 0 clamp(320px, 54vw, 560px);
    transition: transform .4s ease, opacity .4s ease;
    transform: scale(0.82);
    opacity: 0.55;
    cursor:pointer;
  }
  .gallery-card.is-active{
    transform: scale(1);
    opacity: 1;
  }
  .gallery-frame{
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 6px 6px 0 var(--purple-deep);
    overflow:hidden;
    aspect-ratio: 4 / 3;
  }
  .gallery-card.is-active .gallery-frame{
    box-shadow: 8px 8px 0 var(--purple-deep);
  }
  .gallery-card img{
    width:100%;
    height:100%;
    object-fit:contain;
    background: var(--white);
    display:block;
  }
  /* Gallery pixel-art arrows — reuse tip arrow pattern */
  .gallery-arrow{
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display:grid;
    place-items:center;
    background: var(--yellow);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--purple-deep);
    cursor:pointer;
    color: var(--ink);
    transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease, background .2s ease, color .2s ease;
    position:relative;
    z-index:2;
    user-select:none;
  }
  .gallery-arrow:focus-visible{
    outline: 3px solid var(--teal-deep);
    outline-offset: 3px;
  }
  .gallery-arrow:hover{
    background: var(--pink);
    color: var(--white);
    transform: scale(1.12) translateY(-2px);
    box-shadow: 5px 5px 0 var(--purple-deep);
    animation-play-state: paused;
  }
  .gallery-arrow:active{
    transform: scale(0.92) translateY(1px);
    box-shadow: 2px 2px 0 var(--purple-deep);
  }
  .gallery-arrow.is-disabled{
    opacity: .35;
    pointer-events:none;
    box-shadow: 2px 2px 0 var(--purple-deep);
    animation:none;
  }
  .gallery-arrow:not(.is-disabled){
    animation: arrowBob 2.4s ease-in-out infinite;
  }
  .gallery-arrow::before{
    content:"";
    display:block;
    width:5px;
    height:5px;
    background:currentColor;
  }
  .gallery-arrow-left::before{
    box-shadow:
      0 -5px 0 currentColor,
      0 -10px 0 currentColor,
      0 5px 0 currentColor,
      0 10px 0 currentColor,
      -5px 0 0 currentColor,
      -10px 0 0 currentColor;
  }
  .gallery-arrow-right::before{
    box-shadow:
      0 -5px 0 currentColor,
      0 -10px 0 currentColor,
      0 5px 0 currentColor,
      0 10px 0 currentColor,
      5px 0 0 currentColor,
      10px 0 0 currentColor;
  }
  /* Gallery dot indicators */
  .gallery-dots{
    display:flex;
    justify-content:center;
    gap: 8px;
    margin-top: 14px;
    position:relative;
    z-index:1;
  }
  .gallery-dots span,
  .gallery-dots button{
    appearance:none;
    width: 10px;
    height: 10px;
    background: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 2px;
    transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), background .2s ease;
    cursor:pointer;
    padding: 0;
  }
  .gallery-dots span.is-active,
  .gallery-dots button.is-active{
    background: var(--pink);
    border-color: var(--pink);
    transform: scale(1.35);
  }
  .gallery-dots span:hover,
  .gallery-dots button:hover,
  .gallery-dots button:focus-visible{
    background: var(--teal);
    border-color: var(--teal);
    transform: scale(1.2);
  }

  @media (max-width: 860px){
    .gallery-carousel-wrap{
      gap: 10px;
      padding: 0 12px;
    }
    .gallery-card{
      flex: 0 0 min(420px, 72vw);
    }
    .gallery-arrow{
      width: 42px;
      height: 42px;
    }
    .gallery-section{
      padding: 48px 0 56px;
    }
    .gallery-intro{
      margin-bottom: 24px;
    }
    .gallery-featured-stage{
      padding: 14px 0;
    }
  }

  @media (max-width: 767px){
    .gallery-carousel-wrap{
      gap: 8px;
      padding: 0 8px;
    }
    .gallery-card{
      flex: 0 0 min(340px, 74vw);
    }
    .gallery-arrow{
      width: 38px;
      height: 38px;
    }
    .gallery-section{
      padding: 40px 0 48px;
    }
    .gallery-intro{
      margin-bottom: 20px;
    }
    .gallery-featured-stage{
      padding: 10px 0;
    }
  }

  @media (max-width: 520px){
    .gallery-card{
      flex: 0 0 72vw;
      min-width: 0;
    }
    .gallery-card:not(.is-active){
      transform: scale(0.75);
    }
    .gallery-featured-stage{
      padding: 6px 0;
    }
  }

  /* Storybook page */
  .storybook-page{
    background: var(--cream);
  }
  .storybook-hero{
    background: var(--yellow);
    padding: 44px 0 48px;
    border-bottom: 6px solid var(--teal-deep);
  }
  .storybook-hero-inner{
    display:grid;
    grid-template-columns: 1fr .95fr;
    gap: 32px;
    align-items:center;
  }
  .storybook-title h1{
    color: var(--purple-deep);
    font-size: clamp(38px, 7vw, 72px);
    line-height: .95;
    margin-bottom: 16px;
  }
  .storybook-title p{
    max-width: 620px;
    color: var(--ink);
    font-weight: 800;
    line-height: 1.5;
  }
  .storybook-title .contact-kicker{
    font-size: clamp(16px, 2.4vw, 20px);
  }
  .book-cover-card{
    display:block;
    background: var(--white);
    border: 4px solid var(--ink);
    box-shadow: 10px 10px 0 var(--purple-deep);
    padding: 18px;
    transform: rotate(1deg);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .book-cover-card:hover,
  .book-cover-card:focus-visible{
    transform: translateY(-5px) rotate(-.5deg);
    box-shadow: 12px 12px 0 var(--purple-deep);
  }
  .book-cover-placeholder{
    min-height: 280px;
    background: var(--sky);
    border: 4px solid var(--ink);
    display:grid;
    place-items:center;
    padding: 20px;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .book-cover-placeholder::before,
  .book-cover-placeholder::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:105%;
    height:5px;
    background: var(--ink);
    box-shadow: 0 0 0 2px var(--white);
    transform-origin:center;
    opacity:.85;
  }
  .book-cover-placeholder::before{
    transform:translate(-50%, -50%) rotate(34deg);
  }
  .book-cover-placeholder::after{
    transform:translate(-50%, -50%) rotate(-34deg);
  }
  .book-cover-placeholder span{
    position:relative;
    z-index:1;
    font-family:'Pixelify Sans', monospace;
    font-size: 22px;
    color: var(--purple-deep);
  }
  .book-cover-art-preview{
    padding: 0;
    background: var(--white);
  }
  .book-cover-art-preview::before,
  .book-cover-art-preview::after{
    display:none;
  }
  .book-cover-art-preview img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display:block;
  }
  .book-cover-hint{
    display:flex;
    justify-content:center;
    gap: 10px;
    margin-top: 14px;
    font-family:'Pixelify Sans', monospace;
    color: var(--pink-deep);
    font-size: 20px;
  }
  .book-cover-hint span:last-child{
    animation: storyHint 1.2s ease-in-out infinite;
  }
  @keyframes storyHint{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(5px); }
  }
  .storybook-reader-section{
    background:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../assets/images/Partials/partials/seeourprojectsbg_blue.webp") center / cover no-repeat;
    padding: 48px 0 56px;
  }
  .storybook-section-heading{
    text-align:center;
    margin-bottom: 24px;
  }
  .storybook-badge{
    display:inline-flex;
    align-items:center;
    min-height: 36px;
    padding: 6px 14px;
    background: var(--pink);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--purple-deep);
    color: var(--white);
    font-family:'Pixelify Sans', monospace;
    font-size: 16px;
    text-transform: uppercase;
  }
  .storybook-section-heading h2,
  .meet-makmak-copy h2{
    color: var(--ink);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1;
    margin-top: 12px;
  }
  .storybook-stage{
    display:grid;
    grid-template-columns: auto minmax(0, 900px) auto;
    gap: 18px;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .storybook-reader-shell{
    width: min(900px, 100%);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    position:relative;
  }
  .storybook-reader-shell::before{
    display:none;
  }
  .storybook-reader-top{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    gap: 16px;
    align-items:center;
    padding: 0 4px 14px;
    color: var(--ink);
    font-family:'Pixelify Sans', monospace;
    font-size: 15px;
  }
  .storybook-book-wrap{
    position:relative;
    z-index:1;
    display:grid;
    place-items:center;
    background: transparent;
    border: 0;
    padding: 0;
    overflow:hidden;
  }
  .storybook-book-wrap::before{
    display:none;
  }
  .storybook-book{
    width: min(820px, 100%);
    height: 410px;
    position:relative;
    z-index:1;
  }
  .storybook-book-page{
    background: var(--cream);
    border: 2px solid var(--ink);
    padding: 22px;
    display:grid;
    gap: 12px;
    align-content:start;
    overflow:hidden;
    box-shadow: inset 0 0 0 4px var(--white);
    position:relative;
  }
  .storybook-book-page::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width: 18px;
    background: linear-gradient(90deg, rgba(29,21,51,.08), transparent);
    left:0;
    pointer-events:none;
  }
  .storybook-book-page h3{
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    max-width: none;
  }
  .storybook-book-page p{
    color: var(--ink);
    font-weight: 800;
    line-height: 1.45;
  }
  .storybook-art-page{
    padding: 2px;
    background: var(--white);
    place-items:stretch;
    box-shadow: none;
  }
  .storybook-art-page::after{
    display:none;
  }
  .storybook-art-page img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }
  .storybook-cover-page{
    background: var(--yellow);
    place-content:center;
    text-align:center;
    justify-items:center;
    color: var(--ink);
    box-shadow: inset 0 0 0 8px var(--white);
  }
  .storybook-cover-page h3{
    color: var(--purple-deep);
    max-width: 10ch;
    margin: 0 auto;
    font-size: clamp(28px, 4vw, 44px);
    text-shadow: 2px 2px 0 var(--white);
  }
  .storybook-cover-page p{
    color: var(--ink);
    max-width: 26ch;
    margin: 0 auto;
  }
  .storybook-back-cover{
    background: var(--yellow);
    place-content:center;
    text-align:center;
    justify-items:center;
    box-shadow: inset 0 0 0 8px var(--white);
  }
  .storybook-end-mark{
    font-family:'Pixelify Sans', monospace;
    font-size: clamp(48px, 8vw, 96px);
    color: var(--purple-deep);
    text-shadow: 4px 4px 0 var(--white);
    line-height: 1;
  }
  .storybook-progress{
    position:relative;
    z-index:1;
    height: 12px;
    max-width: 520px;
    margin: 16px auto 0;
    background: var(--white);
    border: 2px solid var(--ink);
  }
  .storybook-progress span{
    display:block;
    width: 0;
    height: 100%;
    background: var(--teal);
    transition: width .2s ease;
  }
  .storybook-arrow{
    width: 48px;
    height: 48px;
    display:grid;
    place-items:center;
    background: var(--yellow);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--purple-deep);
    cursor:pointer;
    color: var(--ink);
    transition: transform .15s ease, background .15s ease, color .15s ease;
    z-index:2;
  }
  .storybook-arrow:hover,
  .storybook-arrow:focus-visible{
    background: var(--pink);
    color: var(--white);
    transform: translateY(-3px);
  }
  .storybook-arrow.is-disabled{
    opacity:.4;
    pointer-events:none;
    transform:none;
  }
  .storybook-arrow::before{
    content:"";
    width:5px;
    height:5px;
    background: currentColor;
  }
  .storybook-prev::before{
    box-shadow:
      0 -5px 0 currentColor,
      0 -10px 0 currentColor,
      0 5px 0 currentColor,
      0 10px 0 currentColor,
      -5px 0 0 currentColor,
      -10px 0 0 currentColor;
  }
  .storybook-next::before{
    box-shadow:
      0 -5px 0 currentColor,
      0 -10px 0 currentColor,
      0 5px 0 currentColor,
      0 10px 0 currentColor,
      5px 0 0 currentColor,
      10px 0 0 currentColor;
  }
  .storybook-helper{
    margin-top: 18px;
    text-align:center;
    font-weight: 800;
    color: var(--ink);
  }
  .storybook-fullscreen-toggle,
  .storybook-fullscreen-close,
  .storybook-rotate-hint{
    display:none;
  }
  .mobile-helper{
    display:none;
  }
  .meet-makmak-section{
    padding: 52px 0 64px;
    background: var(--white);
  }
  .meet-makmak-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items:center;
  }
  .makmak-image-wrap{
    height: 520px;
    max-width: 100%;
    justify-self:center;
    display:grid;
    place-items:center;
  }
  .makmak-image{
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
  }
  .meet-makmak-copy p{
    max-width: 640px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.55;
  }
  .story-reveal{
    opacity:0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .45s ease;
  }
  .story-reveal.is-visible{
    opacity:1;
    transform:none;
  }

  .lesson-remember{
    max-width: 780px;
    text-align:center;
  }
  .lesson-remember h2{
    display:inline-block;
    padding: 0;
  }
  .lesson-source{
    margin-top: 22px;
    font-size: 13px;
    font-weight: 800;
    color: var(--purple-deep);
    overflow-wrap:anywhere;
    text-align:center;
  }
  .lesson-source a{
    text-decoration: underline;
    min-height: 44px;
    display:inline-flex;
    align-items:center;
  }

  .thumb,
  .join-card,
  .contact-panel,
  .contact-form-card,
  .contact-info-card,
  .about-character-card,
  .message-panel,
  .founder-card,
  .support-hero-visual,
  .support-card,
  .bank-card,
  .faq-item,
  .lesson-card,
  .lesson-tip-card{
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }

  @media (hover: hover){
    .thumb:hover,
    .join-card:hover,
    .contact-panel:hover,
    .contact-form-card:focus-within,
    .contact-info-card:hover,
    .about-character-card:hover,
    .message-panel:hover,
    .founder-card:hover,
    .support-hero-visual:hover,
    .support-card:hover,
    .bank-card:hover,
    .faq-item:hover,
    .lesson-card:hover,
    .lesson-tip-card:hover{
      transform: translateY(-4px) rotate(-.35deg);
    }

    .contact-info-card:hover .card-icon,
    .lesson-card:hover .card-icon,
    .lesson-tip-card:hover span{
      transform: scale(1.08) rotate(3deg);
    }

    .tip-carousel-track .lesson-tip-card:hover{
      transform: translateY(-6px) rotate(-.6deg) scale(1.03);
    }
    .tip-carousel-track .lesson-tip-card:hover span{
      transform: scale(1.15) rotate(5deg);
    }
  }

  .card-icon,
  .lesson-tip-card span{
    transition: transform .15s ease;
  }

  @media (hover: hover){
    .btn:hover,
    .btn:focus-visible{
      transform: translateY(-3px) rotate(.5deg);
    }
    .thumb-stack:hover .thumb{
      transform: translate(-4px, -4px);
    }
    .thumb-stack:hover .thumb-behind{
      transform: translate(6px, 6px);
    }
    .tags-bar li:hover::before{
      transform: rotate(45deg) scale(1.25);
    }
    .faq-item:hover summary{
      color: var(--pink-deep);
    }
    .feedback-rating-control label:hover{
      transform: translateY(-3px) scale(1.08);
    }
    .social-row a:hover,
    .home-footer-social a:hover{
      transform: translateY(-4px) rotate(6deg);
    }
  }

  .thumb,
  .thumb-behind,
  .tags-bar li::before,
  .feedback-rating-control label,
  .home-footer-social a{
    transition: transform .15s ease, color .15s ease;
  }

  html.is-nav-open,
  body.is-nav-open{
    overflow: hidden;
  }

  /* Responsive changes for tablet and phone */
  @media (max-width: 860px){
    .nav-wrap{ gap:0; }
    .logo{ font-size: 34px; padding: 0; height: 64px; }
    .logo-img{ height: 64px; max-width: 310px; transform: scale(1.45); }
    .logo-badge{ width: 46px; height: 46px; }
    .logo-badge span{ width: 18px; height:18px; }
    .nav-menu{ gap: 12px; }
    nav a,
    .nav-trigger{ font-size: 10px; }
    .feature-row{ grid-template-columns: 1fr; text-align:left; }
    .feature-row.reverse .feature-media{ order:1;}
    .feature-row.reverse .feature-copy{ order:2;}
    .footer-grid{ grid-template-columns: 1fr; }
    .home-footer-grid{
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .home-footer-brand{
      grid-column: 1 / -1;
    }
    .home-footer-brand p{
      font-size: 12px;
      line-height: 1.25;
    }
    .home-footer-main{
      padding: 18px 0 14px;
    }
    .home-footer-logo{
      margin-bottom: 10px;
    }
    .home-footer-logo-img{
      width: 150px;
      height: auto;
    }
    .home-footer-links{
      border-top: 2px solid rgba(255,255,255,.22);
      padding-top: 8px;
    }
    .home-footer-toggle{
      min-height: 44px;
      margin-bottom: 0;
      cursor:pointer;
    }
    .home-footer-toggle span:last-child{
      display:inline-block;
      font-family:'Pixelify Sans', monospace;
      font-size: 20px;
      color: var(--yellow);
    }
    .home-footer-links ul{
      max-height: 0;
      overflow:hidden;
      transition: max-height .22s ease;
    }
    .home-footer-links.is-open ul{
      max-height: 340px;
      padding-bottom: 6px;
    }
    .home-footer-links li{
      margin-bottom: 2px;
    }
    .home-footer-links a{
      min-width: 0;
      min-height: 0;
      display:inline;
      padding: 2px 0;
    }
    .home-footer-social a{
      min-width: 44px;
      min-height: 44px;
    }
    .home-footer-bottom-grid{
      flex-direction:column;
      align-items:flex-start;
      gap: 4px;
    }
    .home-footer-bottom{
      padding: 6px 0;
    }
    .home-footer-bottom p{
      font-size: 10px;
    }
    .home-footer-bottom small{
      font-size: 8px;
    }
    .contact-info-grid{
      grid-template-columns: repeat(2, 1fr);
    }
    .feedback-form-row{
      grid-template-columns: 1fr;
    }
    .support-contact-grid,
    .media-page .support-hero-inner,
    .lesson-hero-grid,
    .lesson-card-grid,
    .donation-section{
      grid-template-columns: 1fr;
    }
    .donation-section{
      background: #04FA73;
    }
    .lesson-tip-grid,
    .lesson-tip-grid-three{
      grid-template-columns: repeat(2, 1fr);
    }
    .tip-carousel-track .lesson-tip-card{
      flex: 0 0 min(310px, calc(100vw - 96px));
    }
    .tip-featured-stage{
      padding: 14px 0;
    }
    .tip-arrow{
      width: 42px;
      height: 42px;
    }
    .gallery-arrow{
      width: 42px;
      height: 42px;
    }
    form.join-form{ grid-template-columns: 1fr; }
    .support-grid{ grid-template-columns: 1fr; text-align:center; }
    .social-row{ justify-content:center; }
    .about-hero-grid,
    .storybook-hero-inner,
    .meet-makmak-grid,
    .message-grid{
      grid-template-columns: 1fr;
      gap: 28px;
    }
    .about-book-photo{
      width: min(280px, 100%);
      height: 280px;
    }
    .storybook-title,
    .meet-makmak-copy{
      text-align:center;
    }
    .message-copy{
      text-align:center;
    }
    .message-copy p{
      text-align:left;
    }
    .storybook-title p,
    .meet-makmak-copy p{
      margin-left:auto;
      margin-right:auto;
    }
    .meet-makmak-copy p{
      text-align:left;
    }
    .storybook-stage{
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 8px;
    }
    .storybook-reader-shell{
      width: 100%;
    }
    .storybook-book{
      width: min(820px, 100%);
      height: 410px;
    }
    .about-hero-text{
      align-items: center;
      text-align: center;
    }
    .team-grid{
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 767px){
    body{
      padding-top: 68px;
    }
    #site-header{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1000;
    }
    html{
      scroll-padding-top: 68px;
    }
    .nav-wrap{
      align-items:center;
      flex-wrap:wrap;
      padding: 8px 12px;
    }
    .logo{
      min-height: 0;
      height: 52px;
      flex: 0 1 auto;
      padding-bottom: 0;
      padding-top: 0;
      margin-bottom: 0;
    }
    .logo-img{
      height: 52px;
      max-width: 230px;
      transform: scale(1.35);
    }
    .burger{
      display:grid;
      position:absolute;
      right: 12px;
      top: 9px;
      z-index: 1002;
    }
    .site-nav{
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      z-index: 1001;
      display: block;
      max-height: calc(100dvh - 68px);
      overflow-y: auto;
      visibility: hidden;
      opacity: 0;
      transition: opacity 300ms ease, visibility 0s linear 300ms;
      pointer-events: none;
    }
    .site-nav.is-open{
      visibility: visible;
      opacity: 1;
      transition-delay: 0s;
      pointer-events: auto;
    }
    .nav-menu{
      position: relative;
      flex-direction:column;
      align-items:stretch;
      gap: 0;
      padding: 8px 12px;
      width:100%;
      background: var(--yellow);
      transform: translateY(-8px);
      transition: transform 300ms ease;
    }
    .site-nav.is-open .nav-menu{
      transform: translateY(0);
    }
    .nav-menu > li{
      width:100%;
    }
    nav a,
    .nav-trigger{
      width:100%;
      justify-content:space-between;
      font-size: 14px;
      padding: 10px 12px;
      min-height: 44px;
      color: var(--purple-deep);
    }
    .dropdown-menu{
      position:static;
      min-width: 100%;
      box-shadow: none;
      border-width: 3px;
      margin-bottom: 8px;
      padding: 4px;
    }
    .dropdown-menu a{
      padding: 10px 12px;
    }
    nav a.is-active,
    .nav-trigger.is-active,
    .nav-trigger[aria-expanded="true"]{
      color: var(--pink);
      border-bottom-color: var(--pink);
    }
    .home-footer-main{
      padding: 14px 0 10px;
    }
    .home-footer-grid{
      grid-template-columns: 1fr;
      gap: 8px;
      text-align:left;
    }
    .home-footer-brand{
      grid-column: 1 / -1;
    }
    .home-footer-logo{
      margin-bottom: 6px;
    }
    .home-footer-logo-img{
      width: 150px;
      height: auto;
    }
    .home-footer-links{
      border-top: 2px solid rgba(255,255,255,.22);
      padding-top: 6px;
    }
    .home-footer-toggle{
      font-size: 16px;
      min-height: 44px;
      margin-bottom: 0;
    }
    .home-footer-links li{
      margin-bottom: 3px;
      line-height: 1.15;
    }
    .home-footer-links a{
      min-width: 0;
      min-height: 0;
      display:inline;
      padding: 1px 0;
      justify-content:flex-start;
    }
    .home-footer-social a{
      min-width: 44px;
      min-height: 44px;
    }
    .gallery-section{
      padding: 40px 0 48px;
    }
    .gallery-intro{
      margin-bottom: 24px;
    }
    .cybersafety-page .lesson-hero,
    .reader-page .lesson-hero{
      min-height: 320px;
      padding: 24px 0 20px;
    }
    .home-footer-bottom-grid{
      flex-direction:column;
      align-items:flex-start;
      gap: 10px;
    }
  }

  @media (max-width: 520px){
    .container{ padding: 0 12px; }
    section{ padding: 42px 0; }
    .hero{ padding-top: 0; }
    .hero-screen{ padding: 4px 18px 10px; min-height: 0; }
    .hero h1{ font-size: 28px; margin-bottom: 8px; }
    .hero p{ font-size: 13px; line-height: 1.28; margin-bottom: 10px; max-width: 300px; }
    .hero .btn{
      min-height: 36px;
      padding: 7px 14px;
      font-size: 11px;
      border-width: 2px;
      box-shadow: 0 3px 0 var(--ink);
    }
    .tip-carousel-section{ padding: 42px 0; }
    .tags-bar{ padding: 4px 0; }
    .tags-bar ul{ gap: 7px 12px; padding: 6px 10px; justify-content:center; }
    .tags-bar li{ font-size: 12px; }
    .section-projects{
      padding: 28px 0 36px;
    }
    .section-projects-intro{
      font-size: 12px;
      line-height: 1.3;
      margin-bottom: 24px;
      max-width: 300px;
    }
    .feature-row{ grid-template-columns: 1fr; gap: 14px; align-items:center; max-width: 320px; margin-bottom: 30px; }
    .feature-row.reverse .feature-media{ order:1;}
    .feature-row.reverse .feature-copy{ order:2;}
    .feature-copy{
      text-align:left;
      width: 100%;
    }
    .feature-copy p{ font-size: 12px; line-height: 1.35; max-width: 100%; margin-bottom: 12px; }
    .feature-copy h3{ font-size: 24px; }
    .thumb-stack{
      max-width: 230px;
    }
    .section-heading{ font-size: 32px; margin-bottom: 6px; }
    .section-projects .btn-small{
      font-size: 12px;
      min-height: 40px;
      padding: 9px 18px;
    }
    .support-grid{ grid-template-columns: 1fr; text-align:center; }
    .section-support h2{
      font-size: 34px;
    }
    .support-copy-block p{
      font-size: 15px;
      max-width: 300px;
    }
    .social-row a{
      width: 44px;
      height: 44px;
    }
    .join-card{ border-radius: 14px; padding: 16px 14px; }
    .join-card p{ margin-bottom: 14px; font-size: 13px; }
    .join-card h2{ font-size: 18px; margin-bottom: 10px; }
    form.join-form{ gap: 10px; }
    form.join-form input{ padding: 9px 11px; font-size: 13px; }
    form.join-form button{ margin-top: 0; }
    .contact-hero{
      padding: 28px 0 14px;
    }
    .contact-hero h1{
      font-size: 38px;
      padding: 0;
    }
    .contact-panel-section{
      padding: 28px 0 40px;
    }
    .contact-panel{
      padding: 12px;
      margin-bottom: 24px;
      box-shadow: 5px 5px 0 var(--purple-deep);
    }
    .contact-form-card{
      padding: 14px;
    }
    .contact-form-row,
    .feedback-form-row,
    .contact-info-grid{
      grid-template-columns: 1fr;
    }
    .card-icon{
      width: 30px; height: 30px;
      margin-bottom: 10px;
    }
    .contact-form button{
      justify-self:stretch;
      text-align:center;
    }
    .support-hero{
      min-height: 250px;
    }
    .support-hero::after{
      width: 38%;
    }
    .media-page .support-hero-copy{
      padding: 22px 0 0;
    }
    .support-hero-visual{
      min-height: 170px;
      box-shadow: 4px 4px 0 var(--purple-deep);
    }
    .support-section{
      padding: 34px 0 44px;
    }
    .support-contact-grid{
      grid-template-columns: 1fr;
    }
    .support-card,
    .bank-card,
    .lesson-card,
    .lesson-tip-card,
    .lesson-list{
      box-shadow: 4px 4px 0 var(--purple-deep);
    }
    .support-card{
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .support-card a{
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height: 44px;
    }
    .team-email,
    .founder-email,
    .contact-info-card a{
      display:inline-flex;
      align-items:center;
      min-height: 44px;
    }
    .support-card .support-avatar{
      margin: 0 0 16px;
    }
    .lesson-hero{
      padding: 30px 0 24px;
    }
    .lesson-hero-grid{
      gap: 20px;
    }
    .lesson-hero-copy{
      text-align:center;
    }
    .lesson-hero-copy h1{
      font-size: 38px;
    }
    .lesson-section{
      padding: 34px 0 44px;
    }
    .lesson-heading{
      margin-bottom: 20px;
    }
    .lesson-heading h2,
    .lesson-remember h2{
      font-size: 30px;
    }
    .lesson-tip-grid,
    .lesson-tip-grid-three{
      grid-template-columns: 1fr;
      gap: 14px;
    }
    .lesson-tip-card{
      min-height: auto;
      padding: 16px;
      gap: 12px;
    }
    .tip-carousel-track .lesson-tip-card{
      flex: 0 0 min(260px, calc(100vw - 86px));
      min-height: 180px;
      padding: 20px;
      gap: 18px;
    }
    .tip-carousel-track .lesson-tip-card:not(.is-active){
      transform: scale(0.75);
    }
    .tip-featured-stage{
      padding: 6px 0;
    }
    .tip-carousel-track .lesson-tip-card span{
      width: 48px;
      height: 48px;
      font-size: 26px;
    }
    .tip-carousel-track .lesson-tip-card p{
      font-size: 15px;
    }
    .tip-carousel-wrap{
      gap: 4px;
    }
    .tip-carousel-track{
      gap: 16px;
    }
    .tip-arrow{
      width: 38px;
      height: 38px;
    }
    .lesson-list{
      padding: 20px 18px 20px 38px;
    }
    .lesson-source a{
      display:inline;
      min-height: 0;
    }
    .donation-image{
      min-height: 180px;
    }
    .donation-copy{
      padding: 16px 16px;
    }
    .faq-item summary{
      font-size: 19px;
      padding: 16px;
      min-height: 44px;
    }
    .faq-body{
      padding: 16px;
    }
    .home-footer-bottom-grid{
      flex-direction:column;
      align-items:flex-start;
      gap: 10px;
    }
    .team-grid{
      grid-template-columns: 1fr;
    }
    .about-hero-text h1{
      font-size: 36px;
      padding: 6px 14px;
    }
    .message-panel-inner{
      padding: 18px 14px;
    }
    .storybook-hero{
      padding: 34px 0 38px;
    }
    .storybook-title h1{
      font-size: 40px;
    }
    .book-cover-placeholder{
      min-height: 220px;
    }
    .storybook-reader-section{
      padding: 36px 0 44px;
    }
    .storybook-fullscreen-toggle{
      display:flex;
      margin: 14px auto 0;
      width: fit-content;
      min-height: 44px;
      align-items:center;
      justify-content:center;
    }
    .storybook-stage{
      grid-template-columns: 1fr;
    }
    .storybook-reader-shell{
      padding: 0;
      box-shadow: none;
    }
    .storybook-reader-top{
      font-size: 12px;
      gap: 8px;
    }
    .storybook-book-wrap{
      padding: 0;
    }
    .storybook-book-wrap::before{
      display:none;
    }
    .storybook-arrow{
      display:none;
    }
    .storybook-book{
      order:1;
      width: min(94vw, 820px);
      height: min(47vw, 410px);
    }
    .desktop-helper{
      display:none;
    }
    .mobile-helper{
      display:inline;
    }
    .storybook-book-page{
      padding: 12px;
      gap: 8px;
      box-shadow: inset 0 0 0 3px var(--white);
    }
    .storybook-art-page{
      padding: 1px;
      gap: 0;
      box-shadow: none;
    }
    .storybook-art-page img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display:block;
    }
    .storybook-book-page h3{
      font-size: 17px;
    }
    .storybook-book-page p{
      font-size: 11px;
      line-height: 1.35;
    }
    .storybook-cover-page h3{
      font-size: 20px;
      max-width: 9ch;
    }
    .storybook-cover-page p{
      font-size: 10px;
      max-width: 20ch;
    }
    body.is-storybook-fullscreen{
      overflow:hidden;
    }
    .storybook-reader-section.is-fullscreen{
      position:fixed;
      inset:0;
      z-index:2200;
      display:flex;
      align-items:center;
      padding: 14px 10px;
      background: rgba(29,21,51,.86);
      overflow:auto;
      animation: storyOverlayFade .18s ease both;
    }
    .storybook-reader-section.is-fullscreen > .container{
      width:100%;
      padding: 0;
    }
    .storybook-reader-section.is-fullscreen .storybook-section-heading,
    .storybook-reader-section.is-fullscreen .storybook-helper,
    .storybook-reader-section.is-fullscreen .storybook-fullscreen-toggle{
      display:none;
    }
    .storybook-reader-section.is-fullscreen .storybook-stage{
      min-height: calc(100dvh - 28px);
      display:grid;
      place-items:center;
    }
    .storybook-reader-section.is-fullscreen .storybook-reader-shell{
      width: min(96vw, 860px);
      padding: 46px 8px 12px;
      background: var(--sky);
      border: 4px solid var(--ink);
      box-shadow: 8px 8px 0 var(--yellow);
      animation: storyReaderPop .22s ease both;
    }
    .storybook-reader-section.is-fullscreen .storybook-fullscreen-close{
      display:grid;
      place-items:center;
      position:absolute;
      top: 8px;
      right: 8px;
      width: 44px;
      height: 44px;
      background: var(--yellow);
      border: 3px solid var(--ink);
      box-shadow: 3px 3px 0 var(--purple-deep);
      color: var(--ink);
      font-family:'Pixelify Sans', monospace;
      font-size: 28px;
      line-height: 1;
      cursor:pointer;
      z-index:5;
    }
    .storybook-reader-section.is-fullscreen .storybook-reader-top{
      padding: 0 50px 10px 4px;
      font-size: 12px;
    }
    .storybook-reader-section.is-fullscreen .storybook-book{
      width: min(96vw, 820px);
      height: min(48vw, 410px);
    }
    .storybook-reader-section.is-fullscreen .storybook-progress{
      margin-top: 10px;
    }
    .storybook-reader-section.is-fullscreen .storybook-rotate-hint{
      display:block;
      margin: 10px auto 0;
      max-width: 28ch;
      text-align:center;
      color: var(--purple-deep);
      font-weight: 800;
      font-size: 12px;
      line-height: 1.3;
    }
    @keyframes storyOverlayFade{
      from{ opacity:0; }
      to{ opacity:1; }
    }
    @keyframes storyReaderPop{
      from{ transform: translateY(10px) scale(.98); opacity:0; }
      to{ transform: translateY(0) scale(1); opacity:1; }
    }
    .storybook-end-mark{
      font-size: 42px;
    }
    .meet-makmak-section{
      padding: 38px 0 48px;
    }
    .makmak-image-wrap{
      height: 320px;
    }
    .home-footer-main{
      padding: 12px 0 8px;
    }
    .home-footer-grid{
      grid-template-columns: 1fr;
      gap: 6px;
    }
    .home-footer-brand{
      grid-column: 1 / -1;
    }
    .home-footer-brand p{
      font-size: 12px;
      line-height: 1.22;
    }
    .home-footer-logo{
      margin-bottom: 5px;
    }
    .home-footer-logo-img{
      width: 150px;
      height: auto;
    }
    .home-footer-links{
      border-top: 2px solid rgba(255,255,255,.22);
      padding-top: 5px;
    }
    .home-footer-toggle{
      font-size: 16px;
      min-height: 42px;
    }
    .home-footer-links li{
      margin-bottom: 2px;
      line-height: 1.12;
    }
    .home-footer-links a{
      min-width: 0;
      min-height: 0;
      display:inline;
      padding: 0;
    }
    .home-footer-bottom{
      padding: 6px 0;
    }
    .home-footer-bottom-grid{
      gap: 4px;
    }
  }

  .dropdown-menu a.is-active,
  .dropdown-menu a.is-active:hover,
  .dropdown-menu a.is-active:focus-visible{
    background: var(--purple-deep);
    color: var(--yellow);
  }

  /* Final footer spacing; mobile keeps accordions, desktop keeps visible columns */
  .home-footer-main{
    padding: 34px 0 26px;
  }
  .home-footer-grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 900px;
  }
  .home-footer-brand{
    display:grid;
    justify-items:center;
    text-align:center;
    padding-bottom: 24px;
  }
  .home-footer-logo{
    justify-content:center;
    margin-bottom: 12px;
  }
  .home-footer-logo-img{
    width: 210px;
  }
  .home-footer-brand p{
    font-size: 14px;
    line-height: 1.4;
  }
  .home-footer-links{
    border-top: 2px solid rgba(255,255,255,.24);
  }
  .home-footer-links:last-of-type{
    border-bottom: 2px solid rgba(255,255,255,.24);
  }
  .home-footer-toggle{
    min-height: 68px;
    margin: 0;
    padding: 0;
    cursor:pointer;
    font-family:'Pixelify Sans', monospace;
    font-size: clamp(24px, 3.2vw, 34px);
    color: var(--white);
    letter-spacing: 0;
  }
  .home-footer-toggle span:last-child{
    display:inline-block;
    font-family:'Pixelify Sans', monospace;
    font-size: 30px;
    color: var(--yellow);
    line-height: 1;
  }
  .home-footer-links ul{
    max-height: 0;
    overflow:hidden;
    list-style:none;
    transition: max-height .22s ease, padding .22s ease;
    padding: 0;
  }
  .home-footer-links.is-open ul{
    max-height: 360px;
    padding: 0 0 22px;
  }
  .home-footer-links li{
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.35;
    margin-bottom: 16px;
  }
  .home-footer-links li:last-child{
    margin-bottom: 0;
  }
  .home-footer-links a{
    display:inline-flex;
    min-height: 44px;
    align-items:center;
  }
  .home-footer-bottom{
    padding: 12px 0;
  }
  .home-footer-bottom-grid{
    max-width: 900px;
  }
  .home-footer-social{
    gap: 14px;
  }
  @media (min-width: 861px){
    .home-footer-main{
      padding: 28px 0 20px;
    }
    .home-footer-grid{
      grid-template-columns: 1.35fr 1fr 1fr;
      gap: 56px;
      max-width: 1020px;
      align-items:start;
    }
    .home-footer-brand{
      justify-items:start;
      text-align:left;
      padding-bottom: 0;
    }
    .home-footer-logo{
      justify-content:flex-start;
      margin-bottom: 10px;
    }
    .home-footer-logo-img{
      width: 180px;
    }
    .home-footer-brand p{
      font-size: 13px;
      line-height: 1.32;
    }
    .home-footer-links{
      border-top: 0;
      padding-top: 2px;
    }
    .home-footer-links:last-of-type{
      border-bottom: 0;
    }
    .home-footer-toggle{
      min-height: 0;
      margin-bottom: 12px;
      cursor: default;
      font-family:'Pixelify Sans', monospace;
      font-size: 22px;
    }
    .home-footer-toggle span:last-child{
      display:none;
    }
    .home-footer-links ul{
      max-height: none;
      overflow: visible;
      padding: 0;
    }
    .home-footer-links li{
      font-size: 15px;
      margin-bottom: 8px;
      line-height: 1.38;
    }
    .home-footer-links a{
      min-height: 0;
    }
    .home-footer-bottom{
      padding: 8px 0;
    }
  }

  @media (max-width: 520px){
    .home-footer-main{
      padding: 24px 0 18px;
    }
    .home-footer-brand{
      padding-bottom: 18px;
    }
    .home-footer-logo-img{
      width: 170px;
    }
    .home-footer-brand p{
      font-size: 12px;
      line-height: 1.28;
    }
    .home-footer-toggle{
      min-height: 56px;
      font-size: 24px;
    }
    .home-footer-toggle span:last-child{
      font-size: 24px;
    }
    .home-footer-links.is-open ul{
      padding-bottom: 16px;
    }
    .home-footer-links li{
      font-size: 18px;
      margin-bottom: 10px;
    }
    .home-footer-bottom-grid{
      gap: 8px;
    }
  }

  .storybook-book-wrap::after{
    content:"";
    position:absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 5px;
    background: var(--ink);
    transform: translateX(-50%);
    z-index: 4;
    pointer-events:none;
    opacity:.9;
  }

  @media (max-width: 767px){
    .storybook-book-wrap::after{
      display:none;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .floaty{ animation:none; }
    .thumb,
    .join-card,
    .contact-panel,
    .contact-form-card,
    .contact-info-card,
    .about-character-card,
    .message-panel,
    .founder-card,
    .support-hero-visual,
    .support-card,
    .bank-card,
    .faq-item,
    .lesson-card,
    .lesson-tip-card,
    .card-icon,
    .lesson-tip-card span,
    .tip-arrow,
    .tip-carousel-track .lesson-tip-card,
    .tip-dots span,
    .gallery-frame,
    .gallery-caption,
    .gallery-arrow,
    .gallery-dots span,
    .story-reveal,
    .book-cover-hint span:last-child,
    .book-cover-card,
    .storybook-arrow{
      transition:none;
      animation:none;
    }
    .tip-carousel-section.is-visible .tip-carousel-track .lesson-tip-card,
    .gallery-section.is-visible .gallery-card{
      animation:none;
      opacity:1;
      transform:none;
    }
    html{ scroll-behavior:auto; }
  }