/* The whole-school landing page: "The HACH Curriculum", scoped under .pg-landing.
   The film leads, then the journey picture is the key-stage picker: KS3 walks through the Forest (Y7),
   the Foothills (Y8) and into the Mountains (Y9); KS4 is the summit; KS5 is the view beyond.
   KS4/KS5 sit under taped tracing paper until they're ready. */

@keyframes landing-wave {
  0%, 100% { transform: perspective(500px) rotateY(0deg) skewY(0deg); }
  30% { transform: perspective(500px) rotateY(-16deg) skewY(-2.5deg); }
  60% { transform: perspective(500px) rotateY(-5deg) skewY(2deg); }
  80% { transform: perspective(500px) rotateY(-12deg) skewY(-1deg); }
}

.pg-landing {
  --hach-sky: #84b4d8; --hach-yellow: #f0c000; --hach-green: #006054; --hach-blue: #3c78a8; --hach-amber: #d89c30;
  --stripe: linear-gradient(90deg, var(--hach-yellow) 0 38%, var(--hach-green) 38% 44%, var(--hach-sky) 44%);

  .wrap { max-width: 1160px; }

  /* ---------- header: crest and the school's name, set like the Harris logo ---------- */
  .head { position: relative; background: #f6efe2 url(/img/tile_cream.webp) 0 0/1200px auto; box-shadow: 0 3px 10px rgba(40,25,5,.18); }
  .head .wrap { display: flex; align-items: center; gap: 14px; padding-block: 18px 12px; }
  .school { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
  .school img { height: 58px; width: auto; }
  .lockup { display: block; color: var(--ink); font: 400 clamp(1.1rem, 2.4vw, 1.45rem)/1.1 "Source Sans 3", "Myriad Pro", "Segoe UI", system-ui, sans-serif; letter-spacing: -.005em; }
  .lockup b { font-weight: 700; }

  /* ---------- hero: title and purpose beside the film ---------- */
  .hero { padding-block: 34px 10px; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
  .hero h1 { font: 400 clamp(2.2rem, 5vw, 3.6rem)/1.02 var(--f-slab); color: var(--ink); margin: 0 0 14px; }
  .hero p { font: 400 clamp(1.05rem, 2vw, 1.25rem)/1.5 var(--f-body); margin: 0 0 18px; max-width: 42ch; }
  .hero p b { font-weight: 600; }
  .hero .btn { background: var(--hach-yellow); }
  .sec-title { font: 400 clamp(1.6rem, 3.4vw, 2.4rem)/1.08 var(--f-slab); color: var(--ink); margin: 0 0 14px; text-wrap: balance; }
  .sec-title em { font-style: normal; color: var(--hach-blue); }

  /* ---------- the film placeholder ---------- */
  .film-frame { position: relative; max-width: 880px; aspect-ratio: 16 / 9; background: #1f2a55 url(/img/tile_navy.webp) 0 0/1200px auto;
    outline: 10px solid #fffdf6; box-shadow: 0 14px 28px rgba(40,25,5,.35); display: grid; place-items: center; overflow: hidden; }
  .film-frame::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--stripe); }
  .film-frame .tape.a { top: -14px; left: 10%; transform: rotate(-6deg); }
  .film-frame .tape.b { top: -14px; right: 10%; transform: rotate(5deg); }
  button.film-frame { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; outline: 10px solid #fffdf6; outline-offset: 0; }
  .film-frame .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .film-frame::before, .film-frame .tape { z-index: 2; }
  .film-frame .film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(29,36,72,.55); border-color: rgba(246,239,226,.9); transition: transform .2s, background .2s; }
  .film-frame:hover .film-play, .film-frame:focus-visible .film-play { transform: translate(-50%, -50%) scale(1.08); background: var(--coral); }
  .film-frame .len { position: absolute; right: 12px; bottom: 12px; font: 400 .85rem/1 var(--f-label); background: rgba(29,36,72,.85); color: #fff; padding: 6px 9px 5px; }
  .film-frame:focus-visible { outline: 3px dashed var(--coral); outline-offset: 6px; }
  .film-play { width: clamp(64px, 11vw, 104px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(246,239,226,.18); border: 4px solid rgba(246,239,226,.6); }
  .film-play::after { content: ""; margin-left: 12%; border-style: solid; border-width: 18px 0 18px 30px; border-color: transparent transparent transparent rgba(246,239,226,.75); }

  /* ---------- the journey ---------- */
  .intro { padding-block: 40px 26px; }
  .intro .purpose { font: 400 clamp(1.05rem, 2.1vw, 1.28rem)/1.5 var(--f-body); max-width: 46ch; margin: 0; }
  .intro .pick { font: 700 1.45rem/1.2 var(--f-hand); color: #3b2710; margin: 14px 0 0; }

  /* the panorama band is the key-stage picker */
  .band { position: relative; background: #efe8da; box-shadow: 0 10px 24px rgba(40,25,5,.3); }
  .band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: var(--stripe); z-index: 3; }
  .band::before { top: 0; }
  .band::after { bottom: 0; }
  .pano { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; overscroll-behavior-x: contain; }
  .pano:focus-visible { outline-offset: -6px; }
  .land { position: relative; width: 100%; min-width: 980px; max-width: 2000px; margin-inline: auto; aspect-ratio: 2400 / 1018;
    background: url(/img/landing/journey.webp) center / 100% 100% no-repeat; container-type: inline-size; }

  /* KS3 station: live */
  .st3 { position: absolute; left: 2.6%; top: 6%; width: 27%; padding: 2.2cqw 2cqw 1.8cqw; }
  .st3 .kicker { font-size: clamp(.7rem, 1cqw, .95rem); --torn-bg: var(--hach-yellow); }
  .st3 h2 { font: 400 clamp(1.3rem, 2.4cqw, 2.3rem)/1.02 var(--f-slab); margin: .5em 0 .2em; }
  .st3 .yrs { font: 600 clamp(.78rem, 1.05cqw, 1rem)/1.3 var(--f-body); margin: 0 0 .7em; }
  .st3 .btn { font-size: clamp(.8rem, 1.1cqw, 1.05rem); background: var(--hach-yellow); }
  .pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; z-index: 4;
    background: radial-gradient(circle at 35% 35%, #ff9c86, var(--coral) 55%, #9c3a26); box-shadow: 0 3px 3px rgba(0,0,0,.35); }

  /* "Start here": a paper flag that waves gently */
  /* the "Start here" flag is a link into Key Stage 3 */
  .flag { position: absolute; z-index: 2; left: 14.5%; bottom: 9%; height: 36%; aspect-ratio: 431 / 900; display: block; cursor: pointer; transform-origin: 50% 100%; transition: transform .2s; }
  .flag:hover, .flag:focus-visible { transform: translateY(-4px) rotate(-2deg); outline: none; }
  .flag:focus-visible .cloth { outline: 3px dashed var(--coral); outline-offset: 4px; }
  .flag .pole { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(2px 4px 3px rgba(40,25,5,.3)); }
  .flag .cloth { position: absolute; left: 53%; top: 11%; width: 118%; aspect-ratio: 900 / 590; transform-origin: 0 50%;
    animation: landing-wave 3.2s ease-in-out infinite; filter: drop-shadow(2px 4px 3px rgba(40,25,5,.3)); }
  .flag .cloth img { width: 100%; height: 100%; }
  /* a box over the navy body (not the swallowtail), with the words centred in it */
  .flag .cloth b { position: absolute; left: 4%; top: 12%; width: 72%; height: 78%; display: flex; align-items: center; justify-content: center; font: 400 clamp(.7rem, 1.25cqw, 1.25rem)/1 var(--f-label); color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.3); text-align: center; transform: rotate(-3deg); }

  .guides img { position: absolute; bottom: 4%; width: auto; }
  .guides .ada { left: 29.5%; height: 36%; }
  .guides .rory { left: 35.2%; height: 36%; }
  .guides .dog { left: 42.2%; bottom: 5%; height: 13%; }

  /* the three KS3 years, pinned along the trail */
  .yr { position: absolute; z-index: 2; display: flex; align-items: center; gap: .5em; font-size: clamp(.62rem, .95cqw, .92rem); --torn-bg: #fffdf6; }
  .yr i { width: .9em; height: .9em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fffdf6; }
  .yr small { font: 700 1.25em/1 var(--f-hand); color: #5b3a1a; letter-spacing: 0; }
  .yr.y7 { left: 1.8%; top: 76%; --c: #4f7f45; transform: rotate(-2deg); }
  .yr.y8 { left: 31%; top: 45%; --c: var(--hach-amber); transform: rotate(1.5deg); }
  .yr.y9 { left: 43.5%; top: 61%; --c: #5d6b80; transform: rotate(-1.5deg); }

  /* KS4 + KS5: under tracing paper */
  .veil { position: absolute; display: grid; place-content: center; justify-items: center; text-align: center; gap: .5cqw; padding: 1.6cqw;
    background: rgba(248, 245, 236, .68); -webkit-backdrop-filter: blur(1.5px) saturate(.75); backdrop-filter: blur(1.5px) saturate(.75);
    box-shadow: inset 0 0 40px rgba(255,255,255,.5), 0 2px 8px rgba(40,25,5,.12); }
  .veil.v4 { left: 47.5%; width: 21.5%; top: 2.5%; height: 47%; }
  .veil.v5 { left: 70.4%; right: 1.2%; top: 2.5%; bottom: 3%; }
  .veil .tape { width: 6cqw; height: 1.7cqw; min-width: 54px; min-height: 15px; }
  .veil .tape.a { top: -.6cqw; left: 6%; transform: rotate(-8deg); }
  .veil .tape.b { top: -.6cqw; right: 6%; transform: rotate(7deg); }
  .veil .tape.c { bottom: -.6cqw; left: 8%; transform: rotate(4deg); }
  .veil .tape.d { bottom: -.6cqw; right: 8%; transform: rotate(-5deg); }
  .veil .kicker { font-size: clamp(.66rem, .95cqw, .92rem); }
  .veil h2 { font: 400 clamp(1rem, 1.8cqw, 1.8rem)/1.05 var(--f-slab); margin: .15em 0 0; color: var(--ink); }
  .veil .yrs { font: 600 clamp(.72rem, .95cqw, .95rem)/1.3 var(--f-body); margin: 0; }
  .veil .note { font: 700 clamp(.95rem, 1.6cqw, 1.6rem)/1.1 var(--f-hand); color: #a13c24; transform: rotate(-3deg); margin: .3em 0 0; max-width: 14em; }
  .veil img { width: clamp(40px, 4.6cqw, 76px); opacity: .85; filter: grayscale(.35) drop-shadow(0 2px 2px rgba(0,0,0,.2)); }

  .swipe { display: none; margin: 0; padding: 12px 16px 16px; font: 700 1.2rem/1 var(--f-hand); color: #5b3a1a; background: #efe8da; }

  /* ---------- footer ---------- */
  .end { position: relative; background: #1f2a55 url(/img/tile_navy.webp) 0 0/1200px auto; color: var(--label); padding-block: 44px 46px; text-align: center; }
  .end::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--stripe); }
  .end .marks { display: flex; justify-content: center; align-items: center; gap: 22px; }
  .end .marks img:first-child { height: 84px; width: auto; }
  .end .marks img:last-child { width: 100px; }
  .end small { display: block; margin-top: 6px; font-size: .85rem; opacity: .8; }

  @media (max-width: 979px) { .swipe { display: block; } }
  @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; gap: 24px; } }
  @media (max-width: 560px) {
  }
  @media (prefers-reduced-motion: reduce) { .flag .cloth { animation: none; transform: perspective(500px) rotateY(-8deg); } }
}