<div class="tw:min-h-screen tw:bg-white tw:font-serif">
  <!-- Utility strip -->
  <div class="tw:flex tw:justify-end tw:gap-4 tw:px-10 tw:py-2 tw:bg-green-950 tw:text-white/85 tw:text-xs tw:font-sans">
    <span>Parents & carers</span>
    <span>Term dates</span>
    <span>Staff</span>
    <span>Contact: 01634 555 210</span>
  </div>
  <!-- Site header (sticky, like a real school site) -->
  <header class="tw:sticky tw:top-0 tw:z-40 tw:flex tw:items-center tw:gap-7 tw:px-10 tw:py-4 tw:border-b tw:border-neutral-200 tw:bg-white/95 tw:backdrop-blur-sm">
    <div class="tw:flex tw:items-center tw:gap-3">
      <span class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-green-800 tw:text-white tw:font-black tw:text-lg tw:font-sans tw:inline-flex tw:items-center tw:justify-center" aria-hidden="true">H</span>
      <div>
        <div class="tw:font-bold tw:text-lg tw:leading-tight tw:text-green-950">Hillcrest Sixth Form College</div>
        <div class="tw:text-xs tw:uppercase tw:tracking-wider tw:text-muted tw:font-sans">Ambition · Community · Achievement</div>
      </div>
    </div>
    <nav class="tw:ml-auto tw:hidden tw:lg:flex tw:gap-6 tw:text-sm tw:font-bold tw:text-neutral-700 tw:font-sans" aria-label="Site navigation">
      <span>Courses</span>
      <span class="tw:text-green-800 tw:border-b-2 tw:border-green-800 tw:pb-1">Admissions</span>
      <span>Open events</span>
      <span>Life at Hillcrest</span>
      <span>News</span>
    </nav>
    <button type="button" class="tw:bg-green-800 tw:hover:bg-green-900 tw:text-white tw:border-0 tw:rounded-md tw:px-4 tw:py-2.5 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-green-500/30 tw:focus-visible:outline-none">Apply for 2026</button>
  </header>
  <!-- Hero — campus photo under a green wash -->
  <div class="tw:relative tw:overflow-hidden tw:bg-green-950 tw:text-white">
    <img src="https://images.unsplash.com/photo-1562774053-701939374585?q=80&w=1800&auto=format&fit=crop"
         alt="" class="tw:absolute tw:inset-0 tw:w-full tw:h-full tw:object-cover">
    <div class="tw:absolute tw:inset-0 tw:bg-linear-to-r tw:from-green-950/95 tw:via-green-950/80 tw:to-green-900/45" aria-hidden="true"></div>
    <div class="tw:relative tw:max-w-6xl tw:mx-auto tw:px-10 tw:pt-20 tw:pb-24 tw:grid tw:gap-12 tw:items-center tw:lg:grid-cols-[1.2fr_1fr]">
      <div>
        <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-widest tw:text-white/70 tw:mb-3.5 tw:font-sans">Admissions 2026 entry</div>
        <h1 class="tw:text-white tw:pb-2"><span class="tw:block tw:font-serif tw:text-5xl tw:leading-tight">Your next step starts at Hillcrest</span></h1>
        <p class="tw:text-base tw:leading-relaxed tw:text-white/90 tw:max-w-lg tw:mb-6">Over 40 A Level and vocational courses, a dedicated progression team, and a community of 1,800 students in the heart of Kent.</p>
        <div class="tw:flex tw:flex-wrap tw:gap-3">
          <button type="button" class="tw:bg-white tw:hover:bg-green-100 tw:text-green-950 tw:border-0 tw:rounded-md tw:px-5 tw:py-3 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none">Start your application</button>
          <button type="button" class="tw:bg-transparent tw:hover:bg-white/10 tw:text-white tw:border tw:border-white/50 tw:rounded-md tw:px-5 tw:py-3 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none">Book an open evening</button>
        </div>
      </div>
      <div class="tw:grid tw:grid-cols-2 tw:gap-3.5">
        <div class="tw:bg-white/10 tw:backdrop-blur-sm tw:border tw:border-white/20 tw:rounded-xl tw:p-4">
          <div class="tw:text-3xl tw:font-bold tw:leading-none">98%</div>
          <div class="tw:text-xs tw:leading-relaxed tw:text-white/80 tw:mt-1.5 tw:font-sans">A Level pass rate, summer 2025</div>
        </div>
        <div class="tw:bg-white/10 tw:backdrop-blur-sm tw:border tw:border-white/20 tw:rounded-xl tw:p-4">
          <div class="tw:text-3xl tw:font-bold tw:leading-none">40+</div>
          <div class="tw:text-xs tw:leading-relaxed tw:text-white/80 tw:mt-1.5 tw:font-sans">courses across A Level and BTEC</div>
        </div>
        <div class="tw:bg-white/10 tw:backdrop-blur-sm tw:border tw:border-white/20 tw:rounded-xl tw:p-4">
          <div class="tw:text-3xl tw:font-bold tw:leading-none">£1.2m</div>
          <div class="tw:text-xs tw:leading-relaxed tw:text-white/80 tw:mt-1.5 tw:font-sans">new science and arts facilities</div>
        </div>
        <div class="tw:bg-white/10 tw:backdrop-blur-sm tw:border tw:border-white/20 tw:rounded-xl tw:p-4">
          <div class="tw:text-3xl tw:font-bold tw:leading-none">24 Sep</div>
          <div class="tw:text-xs tw:leading-relaxed tw:text-white/80 tw:mt-1.5 tw:font-sans">next open evening, 5:30–8pm</div>
        </div>
      </div>
    </div>
  </div>
  <!-- Info cards -->
  <div class="tw:max-w-6xl tw:mx-auto tw:-mt-10 tw:px-10 tw:pb-14 tw:grid tw:gap-4 tw:md:grid-cols-3">
    <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:shadow-lg">
      <div class="tw:mb-3"><span class="tw:w-11 tw:h-11 tw:rounded-full tw:bg-green-100 tw:inline-flex tw:items-center tw:justify-center"><i class="fa-solid fa-file-pen tw:text-lg tw:text-green-800" aria-hidden="true"></i></span></div>
      <h3><span class="tw:font-serif">How to apply</span></h3>
      <p class="tw:text-sm tw:leading-relaxed tw:text-muted">Apply online in around 20 minutes. You'll need your predicted GCSE grades and a reference contact.</p>
    </div>
    <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:shadow-lg">
      <div class="tw:mb-3"><span class="tw:w-11 tw:h-11 tw:rounded-full tw:bg-green-100 tw:inline-flex tw:items-center tw:justify-center"><i class="fa-solid fa-list-check tw:text-lg tw:text-green-800" aria-hidden="true"></i></span></div>
      <h3><span class="tw:font-serif">Entry requirements</span></h3>
      <p class="tw:text-sm tw:leading-relaxed tw:text-muted">Most A Level programmes ask for five GCSEs at grade 4 or above, including English and maths.</p>
    </div>
    <div class="tw:bg-white tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:shadow-lg">
      <div class="tw:mb-3"><span class="tw:w-11 tw:h-11 tw:rounded-full tw:bg-green-100 tw:inline-flex tw:items-center tw:justify-center"><i class="fa-solid fa-hand-holding-heart tw:text-lg tw:text-green-800" aria-hidden="true"></i></span></div>
      <h3><span class="tw:font-serif">Financial support</span></h3>
      <p class="tw:text-sm tw:leading-relaxed tw:text-muted">The 16–19 bursary can help with travel, meals and equipment. Ask us if you're unsure whether you qualify.</p>
    </div>
  </div>
  <!-- Campus split — photo collage + reasons to choose Hillcrest -->
  <section class="tw:max-w-6xl tw:mx-auto tw:px-10 tw:pb-16">
    <div class="tw:grid tw:gap-10 tw:items-center tw:lg:grid-cols-2">
      <div class="tw:relative tw:pb-10 tw:pr-10">
        <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?q=80&w=900&auto=format&fit=crop"
             alt="Students during a lesson at Hillcrest" loading="lazy"
             class="tw:w-full tw:aspect-[4/3] tw:object-cover tw:rounded-xl tw:shadow-lg">
        <img src="https://images.unsplash.com/photo-1580582932707-520aed937b7b?q=80&w=500&auto=format&fit=crop"
             alt="A refurbished Hillcrest classroom" loading="lazy"
             class="tw:absolute tw:bottom-0 tw:right-0 tw:w-2/5 tw:aspect-[4/3] tw:object-cover tw:rounded-xl tw:border-4 tw:border-white tw:shadow-lg">
      </div>
      <div>
        <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-widest tw:text-green-700 tw:mb-2 tw:font-sans">Why Hillcrest</div>
        <h2 class="tw:mb-3"><span class="tw:font-serif tw:text-3xl tw:leading-tight tw:text-green-950">A campus built around sixth formers</span></h2>
        <p class="tw:text-base tw:leading-relaxed tw:text-muted tw:mb-5">No bells, no uniform — a college environment with the support of a school. Teaching in small groups, supervised study every day, and staff who know every student by name.</p>
        <ul class="tw:list-none tw:p-0 tw:m-0 tw:flex tw:flex-col tw:gap-3">
          <li class="tw:flex tw:gap-3 tw:items-start"><i class="fa-solid fa-circle-check tw:text-green-700 tw:mt-1" aria-hidden="true"></i><span class="tw:text-sm tw:leading-relaxed tw:text-neutral-700">Average class size of 14, with weekly one-to-one progress reviews</span></li>
          <li class="tw:flex tw:gap-3 tw:items-start"><i class="fa-solid fa-circle-check tw:text-green-700 tw:mt-1" aria-hidden="true"></i><span class="tw:text-sm tw:leading-relaxed tw:text-neutral-700">Dedicated Year 12 study centre, open 8am–6pm on college days</span></li>
          <li class="tw:flex tw:gap-3 tw:items-start"><i class="fa-solid fa-circle-check tw:text-green-700 tw:mt-1" aria-hidden="true"></i><span class="tw:text-sm tw:leading-relaxed tw:text-neutral-700">Free college coach network across mid-Kent, plus bursary travel support</span></li>
        </ul>
      </div>
    </div>
  </section>
  <!-- Popular courses -->
  <section class="tw:max-w-6xl tw:mx-auto tw:px-10 tw:pb-16">
    <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-widest tw:text-green-700 tw:mb-2 tw:font-sans">Study with us</div>
    <h2 class="tw:mb-2"><span class="tw:font-serif tw:text-3xl tw:leading-tight tw:text-green-950">Popular courses for 2026 entry</span></h2>
    <p class="tw:text-base tw:leading-relaxed tw:text-muted tw:max-w-2xl tw:mb-7">Every programme is taught by subject specialists and built around progression — to university, degree apprenticeships or employment.</p>
    <div class="tw:grid tw:gap-4 tw:md:grid-cols-2 tw:lg:grid-cols-3">
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:hover:border-green-700 tw:transition-colors">
        <span class="tw:inline-block tw:text-xs tw:font-bold tw:font-sans tw:bg-green-100 tw:text-green-900 tw:rounded-full tw:px-2.5 tw:py-1 tw:mb-3">A Level</span>
        <h3><span class="tw:font-serif">Psychology</span></h3>
        <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-3">Our most popular A Level — research methods, memory and attachment, taught with live studies.</p>
        <div class="tw:text-xs tw:text-muted tw:font-sans"><i class="fa-regular fa-circle-check tw:text-green-700" aria-hidden="true"></i> Five GCSEs at 4+, incl. a 5 in English</div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:hover:border-green-700 tw:transition-colors">
        <span class="tw:inline-block tw:text-xs tw:font-bold tw:font-sans tw:bg-green-100 tw:text-green-900 tw:rounded-full tw:px-2.5 tw:py-1 tw:mb-3">A Level</span>
        <h3><span class="tw:font-serif">Maths & Further Maths</span></h3>
        <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-3">Pure, mechanics and statistics, with a weekly problem-solving clinic and STEP preparation.</p>
        <div class="tw:text-xs tw:text-muted tw:font-sans"><i class="fa-regular fa-circle-check tw:text-green-700" aria-hidden="true"></i> Grade 7 in GCSE Maths</div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:hover:border-green-700 tw:transition-colors">
        <span class="tw:inline-block tw:text-xs tw:font-bold tw:font-sans tw:bg-green-100 tw:text-green-900 tw:rounded-full tw:px-2.5 tw:py-1 tw:mb-3">A Level</span>
        <h3><span class="tw:font-serif">Biology, Chemistry & Physics</span></h3>
        <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-3">The sciences move into the new labs this September — small classes, weekly practicals.</p>
        <div class="tw:text-xs tw:text-muted tw:font-sans"><i class="fa-regular fa-circle-check tw:text-green-700" aria-hidden="true"></i> 6-6 in Combined Science or grade 6 in the separate science</div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:hover:border-green-700 tw:transition-colors">
        <span class="tw:inline-block tw:text-xs tw:font-bold tw:font-sans tw:bg-green-100 tw:text-green-900 tw:rounded-full tw:px-2.5 tw:py-1 tw:mb-3">BTEC</span>
        <h3><span class="tw:font-serif">Sport (Extended Diploma)</span></h3>
        <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-3">Coaching, physiology and sports business, delivered alongside our academy programmes.</p>
        <div class="tw:text-xs tw:text-muted tw:font-sans"><i class="fa-regular fa-circle-check tw:text-green-700" aria-hidden="true"></i> Merit profile at GCSE</div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:hover:border-green-700 tw:transition-colors">
        <span class="tw:inline-block tw:text-xs tw:font-bold tw:font-sans tw:bg-green-100 tw:text-green-900 tw:rounded-full tw:px-2.5 tw:py-1 tw:mb-3">T Level</span>
        <h3><span class="tw:font-serif">Health</span></h3>
        <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-3">45-day industry placement with Maidstone & Tunbridge Wells NHS Trust built into year two.</p>
        <div class="tw:text-xs tw:text-muted tw:font-sans"><i class="fa-regular fa-circle-check tw:text-green-700" aria-hidden="true"></i> Five GCSEs at 4+, incl. English, maths and science</div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:hover:border-green-700 tw:transition-colors">
        <span class="tw:inline-block tw:text-xs tw:font-bold tw:font-sans tw:bg-green-100 tw:text-green-900 tw:rounded-full tw:px-2.5 tw:py-1 tw:mb-3">A Level</span>
        <h3><span class="tw:font-serif">Creative & Performing Arts</span></h3>
        <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-3">Fine art, drama and music technology in the new arts wing, with a public end-of-year show.</p>
        <div class="tw:text-xs tw:text-muted tw:font-sans"><i class="fa-regular fa-circle-check tw:text-green-700" aria-hidden="true"></i> Portfolio or audition alongside standard entry</div>
      </div>
    </div>
    <div class="tw:mt-6">
      <button type="button" class="tw:bg-transparent tw:hover:bg-green-100 tw:text-green-800 tw:border tw:border-green-800 tw:rounded-md tw:px-5 tw:py-2.5 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-green-500/30 tw:focus-visible:outline-none">Browse all 40+ courses</button>
    </div>
  </section>
  <!-- Open events -->
  <section class="tw:bg-green-950 tw:text-white tw:px-10 tw:py-14">
    <div class="tw:max-w-6xl tw:mx-auto">
      <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-widest tw:text-white/60 tw:mb-2 tw:font-sans">Come and see us</div>
      <h2 class="tw:text-white tw:mb-7"><span class="tw:font-serif tw:text-3xl tw:leading-tight">Open events this term</span></h2>
      <div class="tw:grid tw:gap-4 tw:md:grid-cols-3">
        <div class="tw:bg-white/10 tw:border tw:border-white/20 tw:rounded-lg tw:p-5 tw:flex tw:flex-col tw:gap-3">
          <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-wider tw:text-white/60 tw:font-sans">Thursday 24 September</div>
          <div class="tw:text-xl tw:font-bold tw:leading-snug">Open evening, 5:30–8pm</div>
          <p class="tw:text-sm tw:leading-relaxed tw:text-white/80 tw:mb-0">Subject teams and current students across every department. No booking needed — just come along.</p>
          <span class="tw:mt-auto tw:inline-flex tw:items-center tw:gap-2 tw:text-sm tw:font-bold tw:font-sans tw:text-white"><i class="fa-regular fa-face-smile" aria-hidden="true"></i> Drop in on the night</span>
        </div>
        <div class="tw:bg-white/10 tw:border tw:border-white/20 tw:rounded-lg tw:p-5 tw:flex tw:flex-col tw:gap-3">
          <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-wider tw:text-white/60 tw:font-sans">Saturday 11 October</div>
          <div class="tw:text-xl tw:font-bold tw:leading-snug">Campus tours, 10am–1pm</div>
          <p class="tw:text-sm tw:leading-relaxed tw:text-white/80 tw:mb-0">Small-group tours of the labs, arts wing, sports centre and study spaces, led by students.</p>
          <button type="button" class="tw:mt-auto tw:self-start tw:bg-white tw:hover:bg-green-100 tw:text-green-950 tw:border-0 tw:rounded-md tw:px-4 tw:py-2 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none">Book a place</button>
        </div>
        <div class="tw:bg-white/10 tw:border tw:border-white/20 tw:rounded-lg tw:p-5 tw:flex tw:flex-col tw:gap-3">
          <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-wider tw:text-white/60 tw:font-sans">Wednesday 12 November</div>
          <div class="tw:text-xl tw:font-bold tw:leading-snug">Subject taster afternoon</div>
          <p class="tw:text-sm tw:leading-relaxed tw:text-white/80 tw:mb-0">Year 11s spend 1:30–4pm in two subjects of their choice, taught as real sixth-form lessons.</p>
          <button type="button" class="tw:mt-auto tw:self-start tw:bg-white tw:hover:bg-green-100 tw:text-green-950 tw:border-0 tw:rounded-md tw:px-4 tw:py-2 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none">Book a place</button>
        </div>
      </div>
    </div>
  </section>
  <!-- Life at Hillcrest -->
  <section class="tw:max-w-6xl tw:mx-auto tw:px-10 tw:py-16">
    <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-widest tw:text-green-700 tw:mb-2 tw:font-sans">Beyond the classroom</div>
    <h2 class="tw:mb-7"><span class="tw:font-serif tw:text-3xl tw:leading-tight tw:text-green-950">Life at Hillcrest</span></h2>
    <div class="tw:grid tw:gap-4 tw:md:grid-cols-2 tw:lg:grid-cols-4">
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden">
        <div class="tw:h-36 tw:overflow-hidden"><img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?q=80&w=800&auto=format&fit=crop" alt="Students working together in a society meeting" loading="lazy" class="tw:w-full tw:h-full tw:object-cover tw:transition-transform tw:duration-300 tw:hover:scale-105"></div>
        <div class="tw:p-4">
          <h3><span class="tw:font-serif">30+ clubs & societies</span></h3>
          <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-0">From debate and Model UN to Formula Student and the college radio station.</p>
        </div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden">
        <div class="tw:h-36 tw:overflow-hidden"><img src="https://images.unsplash.com/photo-1461896836934-ffe607ba8211?q=80&w=800&auto=format&fit=crop" alt="An athlete on the starting blocks of a running track" loading="lazy" class="tw:w-full tw:h-full tw:object-cover tw:transition-transform tw:duration-300 tw:hover:scale-105"></div>
        <div class="tw:p-4">
          <h3><span class="tw:font-serif">Sports academies</span></h3>
          <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-0">Football, netball and basketball academies with Wednesday-afternoon fixtures.</p>
        </div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden">
        <div class="tw:h-36 tw:overflow-hidden"><img src="https://images.unsplash.com/photo-1524178232363-1fb2b075b655?q=80&w=800&auto=format&fit=crop" alt="A progression seminar in one of the lecture rooms" loading="lazy" class="tw:w-full tw:h-full tw:object-cover tw:transition-transform tw:duration-300 tw:hover:scale-105"></div>
        <div class="tw:p-4">
          <h3><span class="tw:font-serif">Progression team</span></h3>
          <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-0">UCAS and apprenticeship guidance, mock interviews and employer visits from year one.</p>
        </div>
      </div>
      <div class="tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden">
        <div class="tw:h-36 tw:overflow-hidden"><img src="https://images.unsplash.com/photo-1481627834876-b7833e8f5570?q=80&w=800&auto=format&fit=crop" alt="The quiet study library with reading lamps" loading="lazy" class="tw:w-full tw:h-full tw:object-cover tw:transition-transform tw:duration-300 tw:hover:scale-105"></div>
        <div class="tw:p-4">
          <h3><span class="tw:font-serif">Wellbeing hub</span></h3>
          <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-0">On-site counsellors, quiet study rooms and weekly money-advice drop-ins.</p>
        </div>
      </div>
    </div>
  </section>
  <!-- Results & destinations -->
  <section class="tw:bg-green-100/60 tw:border-y tw:border-green-200 tw:px-10 tw:py-12">
    <div class="tw:max-w-6xl tw:mx-auto">
      <h2 class="tw:mb-7 tw:text-center"><span class="tw:font-serif tw:text-3xl tw:leading-tight tw:text-green-950">Results & destinations, Class of 2025</span></h2>
      <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-6 tw:text-center">
        <div>
          <div class="tw:text-4xl tw:font-bold tw:text-green-800">62%</div>
          <div class="tw:text-sm tw:text-muted tw:mt-1 tw:font-sans">A*–B at A Level</div>
        </div>
        <div>
          <div class="tw:text-4xl tw:font-bold tw:text-green-800">312</div>
          <div class="tw:text-sm tw:text-muted tw:mt-1 tw:font-sans">university offers held</div>
        </div>
        <div>
          <div class="tw:text-4xl tw:font-bold tw:text-green-800">41</div>
          <div class="tw:text-sm tw:text-muted tw:mt-1 tw:font-sans">degree apprenticeships secured</div>
        </div>
        <div>
          <div class="tw:text-4xl tw:font-bold tw:text-green-800">£310k</div>
          <div class="tw:text-sm tw:text-muted tw:mt-1 tw:font-sans">bursary support paid to students</div>
        </div>
      </div>
    </div>
  </section>
  <!-- Student stories -->
  <section class="tw:max-w-6xl tw:mx-auto tw:px-10 tw:py-16">
    <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-widest tw:text-green-700 tw:mb-2 tw:font-sans">Student stories</div>
    <h2 class="tw:mb-7"><span class="tw:font-serif tw:text-3xl tw:leading-tight tw:text-green-950">What our students say</span></h2>
    <div class="tw:grid tw:gap-4 tw:md:grid-cols-3">
      <figure class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:m-0">
        <blockquote class="tw:m-0 tw:mb-4">
          <p class="tw:text-base tw:leading-relaxed tw:italic tw:text-neutral-700 tw:mb-0">"The progression team booked my medicine mock interview before I'd even asked. I'm holding a Cardiff offer now."</p>
        </blockquote>
        <figcaption class="tw:flex tw:items-center tw:gap-3">
          <span class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-green-800 tw:text-white tw:text-xs tw:font-bold tw:font-sans tw:inline-flex tw:items-center tw:justify-center" aria-hidden="true">AB</span>
          <span class="tw:text-sm tw:font-sans"><strong>Amara Boateng</strong><span class="tw:block tw:text-muted">Biology, Chemistry & Psychology</span></span>
        </figcaption>
      </figure>
      <figure class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:m-0">
        <blockquote class="tw:m-0 tw:mb-4">
          <p class="tw:text-base tw:leading-relaxed tw:italic tw:text-neutral-700 tw:mb-0">"BTEC Sport here means real coaching hours every week. I've just signed a degree apprenticeship with a League One academy."</p>
        </blockquote>
        <figcaption class="tw:flex tw:items-center tw:gap-3">
          <span class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-green-700 tw:text-white tw:text-xs tw:font-bold tw:font-sans tw:inline-flex tw:items-center tw:justify-center" aria-hidden="true">LT</span>
          <span class="tw:text-sm tw:font-sans"><strong>Lewis Trent</strong><span class="tw:block tw:text-muted">BTEC Sport, Extended Diploma</span></span>
        </figcaption>
      </figure>
      <figure class="tw:border tw:border-neutral-200 tw:rounded-lg tw:p-5 tw:m-0">
        <blockquote class="tw:m-0 tw:mb-4">
          <p class="tw:text-base tw:leading-relaxed tw:italic tw:text-neutral-700 tw:mb-0">"Further Maths in a class of nine, with a teacher who sets STEP problems for fun. Southampton engineering, here I come."</p>
        </blockquote>
        <figcaption class="tw:flex tw:items-center tw:gap-3">
          <span class="tw:w-9 tw:h-9 tw:rounded-full tw:bg-green-900 tw:text-white tw:text-xs tw:font-bold tw:font-sans tw:inline-flex tw:items-center tw:justify-center" aria-hidden="true">SI</span>
          <span class="tw:text-sm tw:font-sans"><strong>Sofia Ionescu</strong><span class="tw:block tw:text-muted">Maths, Further Maths & Physics</span></span>
        </figcaption>
      </figure>
    </div>
  </section>
  <!-- Latest news -->
  <section class="tw:max-w-6xl tw:mx-auto tw:px-10 tw:pb-16">
    <div class="tw:flex tw:items-end tw:justify-between tw:gap-4 tw:mb-7">
      <div>
        <div class="tw:text-xs tw:font-bold tw:uppercase tw:tracking-widest tw:text-green-700 tw:mb-2 tw:font-sans">News</div>
        <h2 class="tw:mb-0"><span class="tw:font-serif tw:text-3xl tw:leading-tight tw:text-green-950">Latest from Hillcrest</span></h2>
      </div>
      <span class="tw:text-sm tw:font-bold tw:font-sans tw:text-green-800">All news <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
    </div>
    <div class="tw:grid tw:gap-4 tw:md:grid-cols-3">
      <article class="tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden tw:hover:shadow-lg tw:transition-shadow">
        <div class="tw:h-36 tw:overflow-hidden"><img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?q=80&w=600&auto=format&fit=crop" alt="Glassware in one of the new science labs" loading="lazy" class="tw:w-full tw:h-full tw:object-cover"></div>
        <div class="tw:p-5">
          <div class="tw:text-xs tw:text-muted tw:mb-2 tw:font-sans">1 July 2026</div>
          <h3><span class="tw:font-serif">New £1.2m science and arts facilities open this September</span></h3>
          <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-0">Six refitted labs, a recording studio and a gallery space ready for the new intake.</p>
        </div>
      </article>
      <article class="tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden tw:hover:shadow-lg tw:transition-shadow">
        <div class="tw:h-36 tw:overflow-hidden"><img src="https://images.unsplash.com/photo-1509062522246-3755977927d7?q=80&w=600&auto=format&fit=crop" alt="A teacher leading a classroom discussion" loading="lazy" class="tw:w-full tw:h-full tw:object-cover"></div>
        <div class="tw:p-5">
          <div class="tw:text-xs tw:text-muted tw:mb-2 tw:font-sans">19 June 2026</div>
          <h3><span class="tw:font-serif">Hillcrest shortlisted for South East college of the year</span></h3>
          <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-0">Judges highlighted progression outcomes and student wellbeing support.</p>
        </div>
      </article>
      <article class="tw:border tw:border-neutral-200 tw:rounded-lg tw:overflow-hidden tw:hover:shadow-lg tw:transition-shadow">
        <div class="tw:h-36 tw:overflow-hidden"><img src="https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?q=80&w=600&auto=format&fit=crop" alt="A group of students sitting together outside" loading="lazy" class="tw:w-full tw:h-full tw:object-cover"></div>
        <div class="tw:p-5">
          <div class="tw:text-xs tw:text-muted tw:mb-2 tw:font-sans">9 May 2026</div>
          <h3><span class="tw:font-serif">Late applications open for 2026 entry</span></h3>
          <p class="tw:text-sm tw:leading-relaxed tw:text-muted tw:mb-0">Applying after results day? Bring your GCSE results straight to enrolment on 28–29 August.</p>
        </div>
      </article>
    </div>
  </section>
  <!-- CTA band -->
  <section class="tw:bg-green-800 tw:text-white tw:px-10 tw:py-14">
    <div class="tw:max-w-6xl tw:mx-auto tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-6">
      <div class="tw:max-w-xl">
        <h2 class="tw:text-white tw:mb-2"><span class="tw:font-serif tw:text-3xl tw:leading-tight">Questions about applying?</span></h2>
        <p class="tw:text-base tw:leading-relaxed tw:text-white/85 tw:mb-0">Emma, our admissions assistant, answers from what Hillcrest has published — try the chat bubble in the corner, any time of day.</p>
      </div>
      <div class="tw:flex tw:flex-wrap tw:gap-3">
        <button type="button" class="tw:bg-white tw:hover:bg-green-100 tw:text-green-950 tw:border-0 tw:rounded-md tw:px-5 tw:py-3 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none">Start your application</button>
        <button type="button" class="tw:bg-transparent tw:hover:bg-white/10 tw:text-white tw:border tw:border-white/50 tw:rounded-md tw:px-5 tw:py-3 tw:text-sm tw:font-bold tw:font-sans tw:cursor-pointer tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none">Contact admissions</button>
      </div>
    </div>
  </section>
  <!-- Site footer -->
  <footer class="tw:bg-green-950 tw:text-white/70 tw:px-10 tw:pt-12 tw:pb-6">
    <div class="tw:max-w-6xl tw:mx-auto tw:grid tw:gap-8 tw:md:grid-cols-4 tw:text-sm tw:leading-relaxed tw:pb-10 tw:border-b tw:border-white/15">
      <div>
        <div class="tw:text-white tw:font-bold tw:mb-3">Visit us</div>
        <p class="tw:mb-0">Maidstone Road, Kent ME15 6AA<br>
          01634 555 210<br>
          admissions@hillcrest.ac.uk</p>
      </div>
      <div>
        <div class="tw:text-white tw:font-bold tw:mb-3">Admissions</div>
        <div class="tw:flex tw:flex-col tw:gap-1.5 tw:font-sans"><span>How to apply</span><span>Entry requirements</span><span>Financial support</span><span>Late applications</span></div>
      </div>
      <div>
        <div class="tw:text-white tw:font-bold tw:mb-3">College</div>
        <div class="tw:flex tw:flex-col tw:gap-1.5 tw:font-sans"><span>Term dates</span><span>News</span><span>Vacancies</span><span>Governors</span></div>
      </div>
      <div>
        <div class="tw:text-white tw:font-bold tw:mb-3">Information</div>
        <div class="tw:flex tw:flex-col tw:gap-1.5 tw:font-sans"><span>Safeguarding</span><span>Policies</span><span>Accessibility</span></div>
      </div>
    </div>
    <div class="tw:max-w-6xl tw:mx-auto tw:flex tw:justify-between tw:flex-wrap tw:gap-3 tw:pt-5 tw:text-xs tw:font-sans">
      <span>© 2026 Hillcrest Sixth Form College · Maidstone Road, Kent ME15 6AA</span>
      <span>Safeguarding · Policies · Accessibility</span>
    </div>
  </footer>
  <div class="tw:font-sans">
    <div data-controller="applicant-emma"
     data-applicant-emma-surface-value="website"
     data-applicant-emma-welcome-value="Hi, I'm Emma — Hillcrest Sixth Form's admissions assistant. Ask me anything about applying, courses, open events or support. I answer from what the college has published and I'll always show you my source."
     data-applicant-emma-hidden-class="tw-support-hidden"
     data-applicant-emma-fab-open-class="tw-support-fab--open"
     data-applicant-emma-invalid-class="tw-is-invalid">
      <button class="tw-support-fab" type="button" aria-label="Chat with Emma" aria-expanded="false"
          data-applicant-emma-target="fab" data-action="applicant-emma#toggle">
        <span class="tw-support-fab-ring"></span>
        <span class="tw-support-fab-av"><i class="fa-solid fa-message" aria-hidden="true"></i></span>
      </button>
      <div class="tw-support-panel tw-support-hidden" role="dialog" aria-label="Emma chat"
       data-applicant-emma-target="panel"
       data-action="keydown.esc->applicant-emma#close">
        <div class="tw-support-panel-hdr">
          <span class="tw:w-8 tw:h-8 tw:rounded-full tw:bg-white/20 tw:flex tw:items-center tw:justify-center tw:shrink-0" aria-hidden="true">
            <span class="tw:w-3.5 tw:h-3.5 tw:rounded-full tw:bg-white/90"></span>
          </span>
          <div class="tw-support-panel-hdr-info">
            <div class="tw-support-panel-hdr-name">Emma · Hillcrest Sixth Form</div>
            <div class="tw-support-panel-hdr-status">
              <i class="fa-solid fa-circle tw:text-[8px] tw:text-white/60" data-applicant-emma-target="dotIdle" aria-hidden="true"></i>
              <i class="fa-solid fa-circle tw:text-[8px] tw:text-green-400 tw-support-hidden" data-applicant-emma-target="dotLive" aria-hidden="true"></i>
              <span data-applicant-emma-target="status">Answers from what Hillcrest has published</span>
            </div>
          </div>
          <button type="button"
              class="tw-support-hidden tw:bg-white/10 tw:hover:bg-white/20 tw:text-white/90 tw:border-0 tw:rounded-lg tw:h-9 tw:px-2.5 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:cursor-pointer tw:shrink-0 tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none"
              data-applicant-emma-target="endChat" data-action="applicant-emma#endLive">End chat</button>
          <div class="tw-support-panel-hdr-btns">
            <button class="tw-support-panel-btn" type="button" aria-label="Close chat" data-action="applicant-emma#close">
              <i class="fa-solid fa-xmark" aria-hidden="true"></i>
            </button>
          </div>
        </div>
        <div class="tw-support-panel-thread" role="log" aria-live="polite" data-applicant-emma-target="thread"></div>
        <div class="tw-support-hidden tw:flex tw:items-center tw:gap-2 tw:px-3.5 tw:py-2.5 tw:bg-orange-100 tw:text-orange-800 tw:text-body-xs tw:leading-body-xs tw:border-t tw:border-orange-200"
         data-applicant-emma-target="rateStrip" role="status">
          <i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
          You've sent a lot of messages — please try again in a few minutes.
        </div>
        <div class="tw-support-panel-composer">
          <div class="tw-chat-input-area">
            <div class="tw-chat-input-row">
              <input type="text" class="tw-chat-input" placeholder="Ask Emma about Hillcrest…" aria-label="Message Emma"
                 data-applicant-emma-target="input"
                 data-action="keydown.enter->applicant-emma#send">
              <button class="tw-chat-send" type="button" aria-label="Send"
                  data-applicant-emma-target="send" data-action="applicant-emma#send">
                <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </div>
        <a href="https://www.applicaa.com" target="_blank" rel="noopener"
       class="tw:flex tw:items-center tw:justify-center tw:gap-1 tw:px-3 tw:py-1.5 tw:bg-neutral-100 tw:border-t tw:border-neutral-200 tw:text-body-xs tw:leading-body-xs tw:text-muted tw:no-underline tw:hover:text-neutral-700 tw:shrink-0">
          Powered by <strong class="tw:font-bold tw:text-primary-500">Applicaa</strong>
        </a>
      </div>
      <template data-applicant-emma-target="tplEmma">
        <div class="tw-chat-msg">
          <div class="tw-chat-avatar" aria-hidden="true">E</div>
          <div class="tw:flex tw:flex-col tw:gap-2 tw:min-w-0">
            <div class="tw-chat-bubble tw:whitespace-pre-line" data-slot="text"></div>
            <div class="tw:flex tw:flex-col tw:gap-1.5 tw:items-start" data-slot="cites"></div>
            <div class="tw:flex tw:flex-wrap tw:gap-1.5" data-slot="chips"></div>
          </div>
        </div>
      </template>
      <template data-applicant-emma-target="tplUser">
        <div class="tw-chat-msg tw-chat-msg-user">
          <div class="tw-chat-bubble-user tw:whitespace-pre-line" data-slot="text"></div>
        </div>
      </template>
      <template data-applicant-emma-target="tplAgent">
        <div class="tw-chat-msg">
          <span class="tw-avatar tw-avatar-sm tw-support-av-agent" aria-hidden="true">SW</span>
          <div class="tw-chat-bubble tw:whitespace-pre-line">
            <div class="tw:text-body-xs tw:leading-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-primary-600 tw:mb-1">Sarah · Admissions team</div>
            <div data-slot="text"></div>
          </div>
        </div>
      </template>
      <template data-applicant-emma-target="tplSys">
        <div class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-muted tw:px-5 tw:py-0.5">
          <i class="fa-solid fa-ticket tw:mr-1.5" data-slot="icon" aria-hidden="true"></i><span data-slot="text"></span>
        </div>
      </template>
      <template data-applicant-emma-target="tplTyping">
        <div class="tw-chat-msg">
          <div class="tw-chat-avatar" aria-hidden="true">E</div>
          <div class="tw-chat-bubble tw:flex tw:items-center tw:gap-1" aria-label="Emma is typing">
            <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce"></span>
            <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce tw:[animation-delay:120ms]"></span>
            <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce tw:[animation-delay:240ms]"></span>
          </div>
        </div>
      </template>
      <template data-applicant-emma-target="tplCite">
        <a class="tw:inline-flex tw:items-center tw:gap-1.5 tw:self-start tw:rounded-md tw:bg-blue-100 tw:hover:bg-blue-200 tw:px-2 tw:py-1 tw:text-body-xs tw:leading-body-xs tw:text-blue-700 tw:no-underline tw:cursor-pointer">
          <i class="fa-solid fa-link" aria-hidden="true"></i><span data-slot="label"></span>
        </a>
      </template>
      <template data-applicant-emma-target="tplChip">
        <button type="button" class="tw-chat-chip" data-action="applicant-emma#chip"></button>
      </template>
      <template data-applicant-emma-target="tplQueue">
        <div class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:items-center tw:gap-2 tw:text-center">
          <i class="fa-solid fa-user-clock tw:text-lg tw:text-primary" aria-hidden="true"></i>
          <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-900"><strong>You're <span data-slot="pos">2nd</span> in the queue</strong></div>
          <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Your position updates as chats finish.</div>
          <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="applicant-emma#leaveQueueAsTicket">Leave it with us as a ticket instead</button>
        </div>
      </template>
      <template data-applicant-emma-target="tplEoi">
        <form class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:gap-3" novalidate
          data-emma-form="eoi" data-action="submit->applicant-emma#submitEoi">
          <div class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Your details</div>
          <div class="tw-form-group">
            <label class="tw-form-label tw-form-label-required" for="website-eoi-parent">Parent / carer name</label>
            <input type="text" id="website-eoi-parent" class="tw-form-control" data-slot="eoi-parent" aria-required="true">
            <div class="tw-invalid-feedback">Please enter your name</div>
          </div>
          <div class="tw-form-group">
            <label class="tw-form-label tw-form-label-required" for="website-eoi-email">Email address</label>
            <input type="email" id="website-eoi-email" class="tw-form-control" data-slot="eoi-email" aria-required="true">
            <div class="tw-invalid-feedback">Enter a valid email address</div>
          </div>
          <div class="tw-form-group">
            <label class="tw-form-label tw-form-label-optional" for="website-eoi-phone">Phone</label>
            <input type="tel" id="website-eoi-phone" class="tw-form-control" data-slot="eoi-phone">
          </div>
          <div class="tw-form-group">
            <label class="tw-form-label tw-form-label-required" for="website-eoi-child">Child's name</label>
            <input type="text" id="website-eoi-child" class="tw-form-control" data-slot="eoi-child" aria-required="true">
            <div class="tw-invalid-feedback">Please enter your child's name</div>
          </div>
          <div class="tw-form-group">
            <label class="tw-form-label tw-form-label-required" for="website-eoi-year">Expected year of entry</label>
            <select id="website-eoi-year" class="tw-form-select" data-slot="eoi-year" aria-required="true">
              <option>Year 12 — September 2026</option>
              <option>Year 12 — September 2027</option>
              <option>Year 13 transfer</option>
            </select>
          </div>
          <div class="tw-form-check">
            <input type="checkbox" class="tw-form-check-input" id="website-eoi-consent" data-slot="eoi-consent" aria-required="true">
            <label class="tw-form-check-label" for="website-eoi-consent">
              Hillcrest may contact me about my enquiry. See the college's <a class="tw:underline">privacy notice</a>.
            </label>
            <div class="tw-invalid-feedback">Please confirm consent so the school can contact you</div>
          </div>
          <button type="submit" class="tw-btn tw-btn-primary tw-btn-block">Send to the school</button>
        </form>
      </template>
      <template data-applicant-emma-target="tplContact">
        <form class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:gap-3" novalidate
          data-emma-form="contact" data-action="submit->applicant-emma#submitContact">
          <div class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Where should the school reply?</div>
          <div class="tw-form-group">
            <label class="tw-form-label tw-form-label-required" for="website-ct-name">Your name</label>
            <input type="text" id="website-ct-name" class="tw-form-control" data-slot="ct-name" aria-required="true">
            <div class="tw-invalid-feedback">Please enter your name</div>
          </div>
          <div class="tw-form-group">
            <label class="tw-form-label tw-form-label-required" for="website-ct-email">Email address</label>
            <input type="email" id="website-ct-email" class="tw-form-control" data-slot="ct-email" aria-required="true">
            <div class="tw-invalid-feedback">Enter a valid email address</div>
          </div>
          <button type="submit" class="tw-btn tw-btn-primary tw-btn-block">Send to the team</button>
        </form>
      </template>
    </div>
  </div>
</div>