/*
Theme Name: Future Wings Academy
Theme URI: https://www.futurewings.co.za/
Description: Custom theme for Future Wings Academy / Akademie. English and Afrikaans text, fees and contact details are edited under Appearance → Customize → Future Wings website. Ready for a WooCommerce shop. No page builder required.
Version: 2.2.3
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary (fonts: SIL Open Font License 1.1)
Text Domain: futurewings
*/

/* Fonts are served from the theme, not Google, so visitor IPs are not sent to a third party (POPIA). */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

/* ===== Design tokens (identical to the approved demo) ===== */
:root{
  color-scheme:light;
  --bg:#fbfafe; --surface:#ffffff; --band:#f0eef9; --ink:#221b4d; --muted:#5b5680; --line:#dedaf0;
  --lime:#a8cf45; --lime-ink:#3d3187; --navy:#3d3187; --on-navy:#ffffff; --leaf:#5f8a12;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;
  --r:14px; --max:1080px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--display);line-height:1.12;text-wrap:balance;margin:0}
h1{font-weight:800;letter-spacing:-.015em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.12rem;font-weight:700}
p{margin:0}
a{color:var(--lime-ink)}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px;border-radius:6px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;clip:auto;z-index:100;background:#fff;padding:8px 14px;border-radius:8px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap.narrow{max-width:800px}
section{padding-block:72px}
.band{background:var(--band)}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf)}
.lede{color:var(--muted);max-width:62ch;font-size:1.06rem}
.stack{display:grid;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:12px 22px;font:700 1rem var(--body);cursor:pointer;text-decoration:none}
.btn-primary{background:var(--lime);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-small{padding:7px 14px;font-size:.9rem}
.btn:hover{filter:brightness(1.05)}
.note{font-size:.87rem;color:var(--muted)}
.section-link{margin-top:26px}

/* Afrikaans: hide the page body briefly while the text is swapped, never longer than 1s. */
html.fw-af-pending main{opacity:0;animation:fw-show 0s 1s forwards}
@keyframes fw-show{to{opacity:1}}

/* ===== Header ===== */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--navy);box-shadow:0 2px 12px rgba(34,27,77,.18)}
body.admin-bar header.top{top:32px}
@media (max-width:782px){body.admin-bar header.top{top:46px}}
@media (max-width:600px){body.admin-bar header.top{top:0}}
header.top .wrap{display:flex;align-items:center;gap:18px;padding-block:8px}
.brand{display:flex;align-items:center;margin-right:auto}
.brand-logo{height:52px;width:auto;display:block}
nav.main ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav.main a{color:var(--on-navy);text-decoration:none;font-weight:700;font-size:.95rem}
nav.main a:hover,nav.main .current-menu-item>a{color:var(--lime)}
.lang{display:flex;border:2px solid rgba(255,255,255,.35);border-radius:999px;overflow:hidden;flex:none}
.lang button{border:0;background:transparent;color:rgba(255,255,255,.8);font:700 .8rem var(--body);padding:5px 10px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.menu-toggle{display:none;background:none;border:2px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 14px;font:700 .9rem var(--body);color:var(--on-navy);cursor:pointer}
.fw-cart{display:inline-flex;align-items:center;gap:4px;color:var(--on-navy);text-decoration:none;font-weight:700;font-size:.9rem}
.fw-cart .count{background:var(--lime);color:var(--ink);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:.75rem;padding:0 5px}
@media (max-width:860px){
  header.top .wrap{position:relative;gap:10px}
  .menu-toggle{display:inline-flex}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);box-shadow:0 12px 24px rgba(34,27,77,.25)}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;gap:0;max-width:var(--max);margin:0 auto;padding:6px max(16px,env(safe-area-inset-left,0px)) 12px}
  nav.main a{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.15);font-size:1rem}
  nav.main li:last-child a{border-bottom:0}
}
@media (max-width:420px){.brand-logo{height:44px}}

/* ===== Hero ===== */
.hero{padding-block:60px 56px}
.hero .wrap{display:grid;grid-template-columns:1.2fr .95fr;gap:48px;align-items:center}
.hero .wrap>*{min-width:0}
.hero h1{font-size:clamp(2.3rem,5.2vw,3.8rem)}
.hero h1 em{font-style:normal;color:var(--lime-ink)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.glance{background:var(--navy);color:var(--on-navy);border-radius:22px;padding:24px;display:grid;gap:18px}
.glance-logo{width:100%;max-width:340px;height:auto;justify-self:center;display:block}
.glance dl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.glance dl div{background:rgba(255,255,255,.1);border-radius:12px;padding:10px 14px}
.glance dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--lime);font-weight:700}
.glance dd{margin:2px 0 0;font:800 1.15rem var(--display)}
.glance-note{color:rgba(255,255,255,.8)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* ===== Programme ===== */
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.disc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start}
.disc .ic{width:40px;height:40px;border-radius:12px;background:var(--band);display:grid;place-items:center;color:var(--lime-ink)}
.disc p{color:var(--muted);font-size:.95rem}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.grid4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.split>*{min-width:0}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* ===== Admission ===== */
ol.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
ol.steps li::before{content:counter(s);width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--lime);display:grid;place-items:center;font:800 1.2rem var(--display)}
ol.steps p{color:var(--muted);font-size:.95rem}
details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
details+details{margin-top:10px}
summary{cursor:pointer;font-weight:700}
details p{margin-top:10px;color:var(--muted)}

/* ===== Directors ===== */
.people{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:start}
.person>div{min-width:0}
.avatar{width:112px;height:112px;border-radius:50%;background:var(--band);display:grid;place-items:center;font:800 1.8rem var(--display);color:var(--lime-ink)}
/* Photos are cropped to the circle automatically, favouring the top-middle where faces usually are. */
.calc .big{white-space:nowrap}
.avatar-img{object-fit:cover;object-position:50% 25%;display:block;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--lime,#a8cf45)}
.person .role{color:var(--lime-ink);font-weight:700;font-size:.9rem}
.person .quals{color:var(--muted);font-size:.85rem;margin-block:4px 10px}
.person p.bio{font-size:.95rem}
.practice{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:.9rem}
.practice .btn{padding:8px 16px;font-size:.9rem}
.practice small{color:var(--muted)}
.principal{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;color:var(--muted)}
.principal b{color:var(--ink)}
@media (max-width:760px){.people{grid-template-columns:1fr}.person{grid-template-columns:1fr}}

/* ===== Fees ===== */
.fees{display:grid;grid-template-columns:1fr 1.05fr;gap:28px;margin-top:30px}
.fees>*{min-width:0}
@media (max-width:900px){.fees{grid-template-columns:1fr}}
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.calc{align-self:start;background:var(--navy);color:var(--on-navy);border-radius:var(--r);padding:24px;display:grid;gap:14px;align-content:start}
.calc h3{color:var(--on-navy)}
.calc .note{color:rgba(255,255,255,.75)}
.kids{display:grid;gap:10px}
.kid{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:8px;align-items:center}
.kid b{font-size:.85rem;min-width:56px}
.kid select{font:inherit;font-size:.95rem;padding:8px 10px;border-radius:10px;border:0;background:var(--bg);color:var(--ink);width:100%;min-width:0}
.rm{background:none;border:1px solid rgba(255,255,255,.4);color:var(--on-navy);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:1rem}
.rm:disabled{opacity:.3;cursor:default}
.calc label.pay{display:grid;gap:6px;font-size:.85rem;font-weight:700}
.calc label.pay select{font:inherit;font-size:1rem;padding:9px 10px;border-radius:10px;border:0;background:var(--bg);color:var(--ink)}
.calc .add{justify-self:start;background:none;border:1px dashed rgba(255,255,255,.55);color:var(--on-navy)}
.out{border-top:1px solid rgba(255,255,255,.25);padding-top:12px;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.out div{display:flex;justify-content:space-between;gap:12px}
.out .big{font:800 1.5rem var(--display);color:var(--lime)}
@media (max-width:520px){.kid{grid-template-columns:1fr 1fr auto}.kid b{grid-column:1/-1}}
.hours{margin-top:30px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.hours>*{min-width:0}
@media (max-width:820px){.hours{grid-template-columns:1fr}}
.hours td.n,.hours th.n{text-align:center}

/* ===== Contact and form ===== */
form.enquiry{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px}
form.enquiry .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.enquiry .row>*{min-width:0}
@media (max-width:520px){form.enquiry .row{grid-template-columns:1fr}}
form.enquiry label{display:grid;gap:6px;font-weight:700;font-size:.9rem}
fieldset{border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px;margin:0;display:grid;gap:10px;min-width:0}
legend{font-weight:700;font-size:.9rem;padding:0 6px}
fieldset .btn{justify-self:start}
.fkid{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.fkid>*{min-width:0}
.fkid .rm{color:var(--ink);border-color:var(--line)}
form.enquiry input,form.enquiry select,form.enquiry textarea{font:inherit;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
form.enquiry textarea{min-height:100px;resize:vertical}
form.enquiry .check{display:grid;grid-template-columns:20px 1fr;gap:10px;font-weight:400;font-size:.88rem;color:var(--muted)}
form.enquiry .check input{width:18px;height:18px;margin-top:3px;padding:0}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.done{background:#e9f2d6;border:1px solid var(--leaf);border-radius:12px;padding:14px 16px}
.error{background:#fdeceb;border:1px solid #c0392b;color:#7a1f16;border-radius:12px;padding:14px 16px}
.contact-list{display:grid;gap:18px;margin:8px 0 0}
.contact-list dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.contact-list dd{margin:2px 0 0;font-size:1.05rem}
.copy{margin-left:8px;font:700 .78rem var(--body);background:var(--band);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:2px 10px;cursor:pointer;vertical-align:middle}
.reach{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.reach .btn{padding:8px 16px;font-size:.92rem}

/* ===== Bands and pages ===== */
.page-first{padding-block:56px 72px}
.page-first h1{font-size:clamp(2rem,4.5vw,2.9rem)}
.page-content{padding-block:0 64px}
.page-content .entry{max-width:760px}
.strip .wrap{display:grid;grid-template-columns:1.2fr auto;gap:28px;align-items:center}
.strip .wrap>*{min-width:0}
@media (max-width:860px){.strip .wrap{grid-template-columns:1fr}}
.entry{display:grid;gap:16px;margin-top:20px;font-size:1.04rem}
.entry>*{margin:0;min-width:0}
.entry h2{font-size:1.5rem;margin-top:8px}
.entry ul,.entry ol{margin:0;padding-left:22px;display:grid;gap:6px}
.entry img{border-radius:12px}
.entry figure{margin:0}
.entry blockquote{margin:0;background:var(--band);border-radius:12px;padding:14px 18px}
.entry .wp-block-table{overflow-x:auto}
.entry td,.entry th{border-bottom:1px solid var(--line);padding:8px 10px}
.entry .wp-block-button__link{background:var(--lime);color:var(--ink);border-radius:999px;padding:12px 22px;text-decoration:none;font-weight:700}
.featured img{border-radius:14px;margin-top:18px}
.list-item{border-bottom:1px solid var(--line);padding-bottom:18px;display:grid;gap:6px}
.list-item h2{font-size:1.4rem}
.list-item a{text-decoration:none;color:var(--ink)}
.pagination{margin-top:28px;display:flex;gap:8px}

/* ===== Footer ===== */
footer.site-footer{border-top:1px solid var(--line);padding-block:28px;color:var(--muted);font-size:.88rem}
footer.site-footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer-links a{color:var(--muted)}

/* ===== Shop (WooCommerce) ===== */
.shop .woocommerce-products-header__title,.shop .product_title{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.5vw,2.9rem);margin:0 0 18px}
.woocommerce ul.products{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px;align-content:start}
.woocommerce ul.products li.product img{border-radius:10px;margin:0!important}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-size:1.1rem;padding:0!important}
.woocommerce ul.products li.product .price{color:var(--ink)!important;font-weight:700}
@media (max-width:820px){.woocommerce ul.products{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.woocommerce ul.products{grid-template-columns:1fr}}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt,.wc-block-components-button:not(.is-link){background:var(--lime)!important;color:var(--ink)!important;border-radius:999px!important;font-family:var(--body)!important;font-weight:700!important;padding:11px 20px!important;border:0!important}
.woocommerce div.product{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.woocommerce div.product div.images,.woocommerce div.product div.summary{width:auto!important;float:none!important;margin:0!important}
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1}
.woocommerce div.product .related{grid-column:1/-1}
@media (max-width:760px){.woocommerce div.product{grid-template-columns:1fr}}
.woocommerce .quantity .qty{padding:9px;border:1.5px solid var(--line);border-radius:10px;font:inherit;width:70px}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-top-color:var(--navy)!important;background:var(--band)!important;border-radius:10px}
.woocommerce-breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:12px}
.woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce div.product p.price,.woocommerce div.product span.price,.woocommerce ul.products li.product .price{color:var(--ink)!important;font-weight:700;font-variant-numeric:tabular-nums}
.woocommerce div.product form.cart .variations{margin-bottom:14px;border:0}
.woocommerce div.product form.cart .variations th,.woocommerce div.product form.cart .variations td{border:0;padding:4px 0;display:block;text-align:left}
.woocommerce div.product form.cart .variations label{font-weight:700;font-size:.9rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.woocommerce div.product form.cart .variations select,.woocommerce form .form-row input.input-text,.woocommerce form .form-row select,.woocommerce-MyAccount-content input.input-text{font:inherit;padding:10px 12px!important;border-radius:10px!important;border:1.5px solid var(--line)!important;background:var(--bg)!important;color:var(--ink);min-width:min(260px,100%);max-width:420px;width:100%}
.woocommerce div.product form.cart .reset_variations{font-size:.85rem;margin-left:10px}
.woocommerce div.product form.cart{display:grid;gap:10px}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,.woocommerce div.product form.cart:not(.variations_form){display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* My account */
.woocommerce-account .page-first .wrap.narrow{max-width:var(--max)}
.woocommerce-account .woocommerce{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start;margin-top:20px}
.woocommerce-account .woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.woocommerce-MyAccount-navigation a{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:700}
.woocommerce-MyAccount-navigation .is-active a{background:var(--navy);color:var(--on-navy)}
.woocommerce-MyAccount-navigation a:hover{background:var(--band)}
.woocommerce-account .woocommerce-MyAccount-navigation{grid-column:1;grid-row:1;width:auto!important;float:none!important;order:0}
.woocommerce-account .woocommerce-MyAccount-content{grid-column:2;grid-row:1;min-width:0;width:auto!important;float:none!important;order:0}
@media (max-width:760px){.woocommerce-account .woocommerce-MyAccount-navigation,.woocommerce-account .woocommerce-MyAccount-content{grid-column:1;grid-row:auto}}
@media (max-width:760px){.woocommerce-account .woocommerce{grid-template-columns:1fr}}
.woocommerce-account:not(.logged-in) .woocommerce{display:block}
.woocommerce form.login,.woocommerce form.register,.woocommerce form.lost_reset_password{border:1px solid var(--line)!important;border-radius:var(--r)!important;background:var(--surface);padding:22px!important;max-width:520px}
.woocommerce .u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.woocommerce .u-columns.col2-set .u-column1,.woocommerce .u-columns.col2-set .u-column2{width:auto;float:none}
@media (max-width:760px){.woocommerce .u-columns.col2-set{grid-template-columns:1fr}}
.woocommerce table.shop_table{border-radius:var(--r);border-color:var(--line)}
.woocommerce .woocommerce-error,.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{list-style:none;padding:14px 18px 14px 44px!important}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ===== Photo galleries ===== */
.photos{padding-block:64px}
.photos h2 em{font-style:normal;color:var(--lime-ink)}
.gallery{display:grid;gap:14px;margin-top:26px}
.gallery figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--band);min-width:0}
.gallery img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.gallery-home{grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr}
.gallery-home figure:first-child{grid-row:1/3}
.gallery-home figure:first-child img{aspect-ratio:auto}
.gallery-prog{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.gallery-home{grid-template-columns:1fr;grid-template-rows:none}.gallery-home figure:first-child{grid-row:auto}.gallery-home figure:first-child img{aspect-ratio:4/3}.gallery-prog{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.gallery-prog{grid-template-columns:1fr}}

/* Home page top: school photo with the key facts underneath */
.hero-photo{margin:0;border-radius:22px;overflow:hidden;background:var(--navy);box-shadow:0 18px 40px rgba(34,27,77,.22)}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:12px;color:var(--on-navy)}
.facts div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 12px;min-width:0}
.facts dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--lime);font-weight:700}
.facts dd{margin:2px 0 0;font:800 1.05rem var(--display)}
@media (max-width:1100px) and (min-width:861px),(max-width:480px){.facts{grid-template-columns:1fr 1fr}}

/* Opening animation (once per visit): the logo appears large on purple, then moves into its place in the header */
.intro-veil{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background-color:var(--navy);cursor:pointer;transition:background-color .7s ease .2s}
.intro-veil img{width:min(380px,72vw);height:auto;transform-origin:0 0;transition:transform 1s cubic-bezier(.65,0,.25,1);animation:fwPop .5s ease-out backwards}
@keyframes fwPop{from{opacity:0;scale:.92}to{opacity:1;scale:1}}
html.intro-on header.top .brand img{visibility:hidden}
html.intro-on .hero-photo{opacity:0;translate:0 16px}
.hero-photo{transition:opacity .7s ease,translate .7s ease}
/* Paper plane: after the opening animation it does a loop, dives down to the enquiry button and "clicks" it every 10 seconds while it is on screen */
.fw-flight{position:absolute;left:0;top:0;z-index:15;pointer-events:none;overflow:hidden}
.fw-trail{fill:none;stroke:var(--navy);stroke-opacity:.4;stroke-width:2.2;stroke-dasharray:1 8;stroke-linecap:round;transition:opacity .8s ease}
.fw-halo{fill:none;stroke:#fff;stroke-opacity:.75;stroke-width:5;stroke-dasharray:1 8;stroke-linecap:round;transition:opacity .8s ease}
.fw-flight.fw-landed .fw-trail,.fw-flight.fw-landed .fw-halo{opacity:0}
.pl-body{fill:#fff;stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round}
.pl-wing{fill:#e6e2f6}
.pl-fold{fill:none;stroke:var(--navy);stroke-width:1.2;stroke-linecap:round}
.btn.fw-tap{position:relative;animation:fwTap .5s ease-out}
.btn.fw-tap::after{content:"";position:absolute;inset:0;border-radius:inherit;border:3px solid var(--lime);animation:fwRing .6s ease-out forwards;pointer-events:none}
@keyframes fwTap{0%,100%{transform:scale(1)}30%{transform:scale(.92)}60%{transform:scale(1.03)}}
@keyframes fwRing{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.25,1.6)}}
@media print{.fw-flight{display:none}}


/* Large screens: use more of the width and scale the text up a little, so the page doesn't sit in a narrow column. */
@media (min-width:1280px){:root{--max:1200px}html{font-size:106.25%}body{font-size:18px}}
@media (min-width:1440px){:root{--max:1320px}html{font-size:112.5%}body{font-size:19.5px}.brand-logo,.brand img{height:62px}}
@media (min-width:1800px){:root{--max:1480px}html{font-size:125%}body{font-size:21px}.brand-logo,.brand img{height:70px}}