/* ==========================================================================
   Waveney Valley Partnership Federation of Schools
   Recreation of waveneyvalleypartnership.org (Wayback 2022-03-28)
   Brand palette: navy #002366 (primary) - blue #1560BD (secondary)
   ========================================================================== */

:root{
  --pri:#002366;
  --sec:#1560BD;
  --grad:linear-gradient(90deg, #002366, #1560BD);
  --ink:#333;
  --muted:#5a6473;
  --white:#fff;
  --max:1200px;
  --radius:10px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  line-height:1.6;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1em}
img{max-width:100%;height:auto;display:block}
a{color:var(--sec)}

.center{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.reset-list{list-style:none;margin:0;padding:0}
.inline-list li{display:inline-block}
.bg-grad{background:var(--grad)}

/* Accessibility skip link */
.skip-link{
  position:absolute;left:-999px;top:0;z-index:999;
  background:var(--pri);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */
.topbar{color:#fff;font-size:14px}
.topbar__flex{
  display:flex;align-items:center;justify-content:space-between;
  min-height:38px;
}
.topbar__link{
  display:inline-flex;align-items:center;gap:6px;
  color:#fff;text-decoration:none;opacity:.95;
}
.topbar__link:hover{opacity:1}
.topbar__ceop{width:16px;height:16px}
.topbar__ceop-label{
  font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.social-list li+li{margin-left:4px}
.social-link{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;color:#fff;text-decoration:none;opacity:.9;
  transition:opacity .2s, transform .2s;
}
.social-link svg{width:18px;height:18px}
.social-link:hover{opacity:1;transform:translateY(-2px)}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header{color:#fff}
.header__flex{
  display:flex;align-items:center;gap:16px;
  padding-top:14px;padding-bottom:14px;
}
.header__logo{display:inline-flex;flex:0 0 auto}
.header__logo img{width:54px;height:54px}
.header__title{
  font-family:"Courgette",cursive;
  font-size:clamp(1.1rem,3.4vw,1.9rem);
  color:#fff;font-weight:400;
}

/* --------------------------------------------------------------------------
   Hero slideshow
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  height:62vh;min-height:360px;max-height:760px;
  overflow:hidden;
  background:var(--pri);
}
.hero__slides{position:absolute;inset:0}
.hero__slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);
  transition:opacity 1.2s ease, transform 6s ease;
}
.hero__slide.is-active{opacity:1;transform:scale(1)}
/* dark bottom-up overlay, mirrors original (linear-gradient 0deg) */
.hero__overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,10,40,.25) 45%, rgba(0,0,0,0) 70%);
}
/* decorative brand circles bleeding from the bottom corners */
.hero__circle{
  position:absolute;bottom:0;z-index:3;border-radius:50%;
  aspect-ratio:1/1;opacity:.55;pointer-events:none;
}
.hero__circle--sec{
  left:0;width:55vw;max-width:520px;background:var(--sec);
  transform:translate(-46%,46%);
}
.hero__circle--pri{
  right:0;width:42vw;max-width:400px;background:var(--pri);
  transform:translate(46%,46%);
}
.hero__caption{
  position:absolute;left:0;right:0;bottom:14%;z-index:5;
  text-align:center;padding:0 6%;
}
.hero__caption h2{
  font-family:"Courgette",cursive;font-weight:400;color:#fff;margin:0;
  font-size:clamp(1.7rem,6vw,3.4rem);
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.hero__pager{
  position:absolute;left:0;right:0;bottom:24px;z-index:6;
  display:flex;justify-content:center;gap:10px;
}
.hero__pager button{
  width:14px;height:14px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.6);background:transparent;
  transition:box-shadow .3s, background .3s;
}
.hero__pager button[aria-selected="true"]{
  background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.35);
}
.hero__scroll{
  position:absolute;left:0;right:0;bottom:-26px;margin:auto;z-index:10;
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sec);color:#fff;box-shadow:0 8px 20px rgba(0,35,102,.35);
  animation:bob 2s ease-in-out infinite;
}
.hero__scroll svg{width:24px;height:24px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* --------------------------------------------------------------------------
   Welcome
   -------------------------------------------------------------------------- */
.welcome{position:relative;padding:5.5rem 0 4rem;text-align:center;overflow:hidden}
.welcome__watermark{
  position:absolute;top:-4%;right:-8%;width:42%;max-width:520px;
  opacity:.05;transform:rotate(-20deg);pointer-events:none;
  filter:none;
}
.welcome__flex{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:2.5rem;
}
.welcome__media{flex:0 0 auto}
.welcome__circle{
  width:min(78vw,340px);aspect-ratio:1/1;border-radius:50%;
  background-size:cover;background-position:center;
  box-shadow:0 18px 45px rgba(0,35,102,.25);
  border:6px solid #fff;outline:1px solid rgba(0,35,102,.08);
}
.welcome__text{max-width:680px;text-align:left}
.welcome__eyebrow{
  font-family:"Courgette",cursive;color:var(--ink);
  font-size:1.3rem;margin:0;text-align:center;
}
.welcome__heading{
  color:var(--sec);font-size:clamp(1.5rem,4vw,2.1rem);
  margin:.1em 0 1em;text-align:center;
}
.welcome__body{font-size:1.05rem;color:#414b59}
.welcome__sign{margin-top:1.4em;line-height:1.5}
.welcome__sign em{color:var(--sec);font-size:1.1rem;font-style:italic}

/* --------------------------------------------------------------------------
   Schools (quick links)
   -------------------------------------------------------------------------- */
.schools{padding:0 0 4rem}
.schools__grid{
  display:grid;grid-template-columns:1fr;gap:0;
}
.school-card{position:relative;overflow:hidden}
.school-card__link{
  position:relative;display:block;height:42vw;min-height:240px;max-height:360px;
  text-decoration:none;overflow:hidden;
}
.school-card__img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1s ease;
}
.school-card__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,35,102,.15), rgba(0,35,102,.78));
  transition:background .4s ease;
}
.school-card__circle{
  position:absolute;border-radius:50%;aspect-ratio:1/1;opacity:.65;
  transition:transform .6s cubic-bezier(.68,-.15,.265,1.45);
}
.school-card__circle--pri{
  width:42%;right:0;bottom:0;background:var(--pri);transform:translate(35%,35%);
}
.school-card__circle--sec{
  width:55%;left:0;bottom:0;background:var(--sec);transform:translate(-40%,40%) scale(.9);
}
.school-card__title{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.6rem 1.4rem;color:#fff;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.1rem,3vw,1.6rem);letter-spacing:.02em;line-height:1.2;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.school-card__link:hover .school-card__img{transform:scale(1.07)}
.school-card__link:hover .school-card__veil{
  background:linear-gradient(180deg, rgba(0,35,102,.25), rgba(0,35,102,.88));
}
.school-card__link:hover .school-card__circle--pri{transform:translate(18%,18%)}
.school-card__link:hover .school-card__circle--sec{transform:translate(-25%,25%) scale(1)}
.school-card__link:focus-visible{outline:4px solid var(--sec);outline-offset:-4px}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact{background:#f3f6fb;padding:3.5rem 0}
.contact__flex{text-align:center}
.contact__title{color:var(--sec);font-size:clamp(1.5rem,4vw,2rem)}
.contact__info p{max-width:640px;margin:0 auto 1.5em;color:#414b59}
.contact__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.contact__btn{
  display:inline-block;background:var(--sec);color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:40px;font-weight:500;
  transition:transform .2s, box-shadow .2s, background .2s;
  box-shadow:0 6px 16px rgba(21,96,189,.25);
}
.contact__btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(21,96,189,.35)}
.contact__btn--alt{background:var(--pri);box-shadow:0 6px 16px rgba(0,35,102,.25)}
.contact__btn--alt:hover{box-shadow:0 10px 22px rgba(0,35,102,.35)}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer{color:#fff;padding:2.5rem 0;text-align:center;font-size:14px}
.footer__flex{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
}
.footer__legal{margin:0;line-height:1.8;color:rgba(255,255,255,.92)}
.footer__legal a{color:#fff;text-decoration:underline}
.footer__sep{margin:0 8px;opacity:.6}
.footer__trust-label{
  text-transform:uppercase;font-size:13px;letter-spacing:.06em;
  display:inline-block;margin-bottom:6px;
}
.footer__trust img{display:inline-block;max-height:80px;width:auto}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   Responsive: tablet / desktop
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .topbar{font-size:14px}
  .school-card__link{height:300px}
}

@media (min-width:768px){
  .hero{height:74vh;max-height:820px}
  .welcome__flex{flex-direction:row;text-align:left;align-items:center;gap:3.5rem}
  .welcome__media{order:2}
  .welcome__text{order:1}
  .welcome__eyebrow,.welcome__heading{text-align:left}
  .welcome__circle{width:min(38vw,360px)}
  .schools__grid{grid-template-columns:1fr 1fr}
  .school-card__link{height:360px;max-height:none}
  .footer__flex{flex-direction:row;justify-content:space-between;text-align:left}
  .footer__legal{text-align:left}
}

@media (min-width:1024px){
  .header__logo img{width:64px;height:64px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__slide{transition:opacity .4s ease}
}