/* Debbyfield Schools — public website shared styles */
:root{
  --burg:#8B1A2F; --gold:#C9A84C; --navy:#1E3566; --cream:#F5EBD0; --brown:#8B6340;
  --ink:#1f2430; --ink2:#5b6172; --ink3:#9aa0b0;
  --bg:#fffdf8; --bg2:#faf3e6; --line:#e7dcc8;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --font-serif:'Source Serif 4','Georgia',serif;
  --r:10px; --rsm:6px;
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:64px 0}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;line-height:1.2;color:var(--navy)}
h1{font-size:42px} h2{font-size:30px} h3{font-size:21px} h4{font-size:17px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--burg)}
.lead{font-size:17px;color:var(--ink2);max-width:640px}
.muted{color:var(--ink2)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--rsm);font-size:14px;font-weight:600;border:1.5px solid transparent;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--burg);color:#fff;border-color:var(--burg)}
.btn-primary:hover{background:#6f1525}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-gold{background:var(--gold);color:#3a2e0c;border-color:var(--gold)}
.btn-gold:hover{background:#b8973f}
.btn-light{background:#fff;color:var(--burg);border-color:#fff}
.btn-light:hover{background:var(--cream)}

/* ── top announcement bar ── */
.topbar-strip{background:var(--navy);color:#fff;font-size:12.5px;text-align:center;padding:7px 16px}
.topbar-strip a{text-decoration:underline;font-weight:600}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-weight:700;font-size:19px;color:var(--navy)}
.brand .crest{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,var(--burg),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-family:var(--font)}
.brand small{display:block;font-family:var(--font);font-weight:500;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink3)}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:9px 14px;border-radius:var(--rsm);font-size:14px;font-weight:500;color:var(--ink2);transition:all .15s}
.nav-links a:hover,.nav-links a.active{background:var(--bg2);color:var(--burg)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-burger{display:none;font-size:24px;background:none;border:none;color:var(--navy);cursor:pointer;padding:4px}
@media(max-width:920px){
  .nav-links{position:fixed;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:10px;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.08);transform:translateY(-130%);opacity:0;transition:all .2s;gap:2px}
  .nav-links.open{transform:translateY(0);opacity:1}
  .nav-links a{padding:12px 14px}
  .nav-burger{display:block}
  .nav-cta .btn-outline{display:none}
}

/* ── hero ── */
.hero{position:relative;background:linear-gradient(160deg,var(--navy) 0%,#13284e 55%,var(--burg) 140%);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 20%,rgba(201,168,76,.25),transparent 55%)}
.hero .wrap{position:relative;padding:88px 24px 96px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:46px}
.hero .lead{color:rgba(255,255,255,.82)}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:30px;font-size:12.5px;font-weight:600;letter-spacing:.4px;margin-bottom:18px}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:24px;backdrop-filter:blur(6px)}
.hero-card h3{color:#fff;margin-bottom:6px}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.hero-stat b{display:block;font-size:26px;font-family:var(--font-serif);color:var(--gold)}
.hero-stat span{font-size:12px;color:rgba(255,255,255,.7)}
@media(max-width:860px){ .hero .wrap{grid-template-columns:1fr} .hero h1{font-size:34px} }

/* ── page header (inner pages) ── */
.page-head{background:linear-gradient(160deg,var(--navy),var(--burg));color:#fff;padding:64px 0 56px}
.page-head h1{color:#fff}
.page-head .lead{color:rgba(255,255,255,.82)}
.crumbs{font-size:12.5px;color:rgba(255,255,255,.65);margin-bottom:10px}
.crumbs a{text-decoration:underline}

/* ── grid / cards ── */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr} }
@media(max-width:620px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,36,48,.08)}
.card .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:14px}
.card h3{margin-bottom:6px}
.card p{color:var(--ink2);font-size:14px}

.section-head{max-width:640px;margin:0 auto 40px;text-align:center}
.section-head.left{margin:0 0 36px;text-align:left}

/* ── stat band ── */
.stat-band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat-band .grid{padding:36px 0;text-align:center}
.stat-band b{display:block;font-family:var(--font-serif);font-size:32px;color:var(--burg)}
.stat-band span{font-size:12.5px;color:var(--ink2);letter-spacing:.3px}

/* ── cta band ── */
.cta-band{background:linear-gradient(135deg,var(--burg),#5d1322);color:#fff;border-radius:18px;padding:48px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:6px}
.cta-band p{color:rgba(255,255,255,.8)}

/* ── footer ── */
footer{background:var(--navy);color:rgba(255,255,255,.78);padding:56px 0 22px;font-size:13.5px}
footer h4{color:#fff;font-size:14px;margin-bottom:14px}
footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-grid div p,.foot-grid div a{margin-bottom:9px;display:block;color:rgba(255,255,255,.7)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:36px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12px;color:rgba(255,255,255,.55)}
@media(max-width:780px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .foot-grid{grid-template-columns:1fr} }

/* ── tags / badges ── */
.tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;background:var(--bg2);color:var(--brown);padding:4px 10px;border-radius:30px;border:1px solid var(--line)}
.tag.gold{background:#fbf0d6;color:#8a6d1f;border-color:#eddca0}
.tag.navy{background:#e8edf6;color:var(--navy);border-color:#d3deef}

/* ── timeline / list ── */
.check-list{list-style:none;display:grid;gap:10px}
.check-list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink2);font-size:14.5px}
.check-list li i{color:var(--burg);margin-top:3px}

/* ── empty state for CMS sections ── */
.empty-note{color:var(--ink3);font-size:13.5px;text-align:center;padding:28px;border:1px dashed var(--line);border-radius:var(--r)}

/* ── gallery ── */
.gal-item{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.gal-item img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gal-cap{padding:12px 14px;font-size:13px;color:var(--ink2)}

/* ── news cards ── */
.news-card img{aspect-ratio:16/9;object-fit:cover;border-radius:var(--rsm) var(--rsm) 0 0}
.news-card{padding:0;overflow:hidden}
.news-card .body{padding:18px}
.news-date{font-size:12px;color:var(--ink3);margin-bottom:6px}

/* ── contact ── */
.info-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px}
.info-row .ic{width:38px;height:38px;border-radius:10px;background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--burg);font-size:17px;flex-shrink:0}
.form-row{display:grid;gap:14px}
.form-row label{font-size:12.5px;font-weight:600;color:var(--ink2);margin-bottom:5px;display:block}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--rsm);font:inherit;background:#fff;color:var(--ink)}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:none;border-color:var(--navy)}

@media(max-width:620px){ h1{font-size:30px} h2{font-size:24px} .hero h1{font-size:28px} section{padding:48px 0} .cta-band{padding:32px} }