/* ==========================================================================
   Preston Education Academy — design system
   Palette:  ink #12213D / ink-2 #1B2F52 / paper #F6F4EF / card #FFFFFF
             gold #B8862E / gold-soft #E7CE9C / line #DEDACD / muted #5B6478
   Type:     Newsreader Variable (display/serif) + Public Sans Variable (UI/body)
   ========================================================================== */

:root{
  --ink:#12213D;
  --ink-2:#1B2F52;
  --ink-soft:#2A3B5E;
  --paper:#F6F4EF;
  --card:#FFFFFF;
  --gold:#B8862E;
  --gold-deep:#8F6A22;
  --gold-soft:#E7CE9C;
  --gold-wash:#F4E9D3;
  --line:#DEDACD;
  --muted:#5B6478;
  --muted-2:#7B8194;
  --success:#2E6B4F;
  --danger:#A3382C;
  --radius-s:6px;
  --radius-m:10px;
  --radius-l:18px;
  --shadow-card: 0 1px 2px rgba(18,33,61,.04), 0 12px 32px -16px rgba(18,33,61,.18);
  --shadow-raised: 0 8px 24px -8px rgba(18,33,61,.28);
  --serif: 'Newsreader Variable', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Public Sans Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --container: 1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-serif{
  font-family:var(--serif);
  font-weight:560;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.15;
}
h1{font-size:clamp(2.4rem,4.4vw,3.6rem); font-weight:520;}
h2{font-size:clamp(1.9rem,3vw,2.5rem);}
h3{font-size:1.35rem; font-weight:600;}
p{color:var(--muted); max-width:62ch;}
a{color:var(--ink-2); text-decoration:none;}
.container{max-width:var(--container); margin-inline:auto; padding-inline:24px;}
@media (max-width:576px){ .container{padding-inline:18px;} }

:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:2px;}

section{padding-block:88px;}
@media (max-width:768px){ section{padding-block:56px;} }

.eyebrow{
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:600;
  color:var(--gold-deep);
  display:inline-flex;
  align-items:center;
  gap:.55em;
  margin-bottom:14px;
}
.eyebrow::before{content:''; width:22px; height:1.5px; background:var(--gold); display:inline-block;}

.lede{font-size:1.15rem; color:var(--muted); max-width:52ch;}

/* ---- Buttons ---- */
.btn{
  font-family:var(--sans); font-weight:600; font-size:.96rem;
  padding:14px 28px; border-radius:var(--radius-s);
  border:1px solid transparent; display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:var(--gold); color:#fff; box-shadow:0 6px 18px -8px rgba(184,134,46,.55); }
.btn-gold:hover{ background:var(--gold-deep); color:#fff; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-2); color:#fff; }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline-light:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
.btn-outline-ink{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-outline-ink:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-sm{ padding:9px 18px; font-size:.86rem; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

/* ---- Header ---- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(246,244,239,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.site-header.is-scrolled{
  box-shadow:0 1px 0 rgba(18,33,61,.06), 0 12px 24px -18px rgba(18,33,61,.35);
  border-color:var(--line);
}
.site-header .navbar{ padding-block:18px; transition:padding .25s ease; }
.site-header.is-scrolled .navbar{ padding-block:12px; }
.brand{ font-family:var(--serif); font-weight:600; font-size:1.32rem; color:var(--ink); line-height:1.05; display:flex; flex-direction:column; }
.brand small{ font-family:var(--sans); font-weight:600; font-size:.6rem; letter-spacing:.14em; color:var(--gold-deep); margin-top:2px; }
.nav-link{ font-weight:560; color:var(--ink) !important; padding:8px 16px !important; position:relative; }
.nav-link::after{ content:''; position:absolute; left:16px; right:16px; bottom:4px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--ink) !important; }

/* ---- Hero ---- */
.hero{ position:relative; overflow:hidden; padding-block:64px 0; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:22px; }
.hero-media{ position:relative; border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-raised); aspect-ratio:4/5; }
.hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-stats{
  display:flex; gap:0; margin-top:56px; border-top:1px solid var(--line); padding-top:28px;
}
.hero-stats .stat + .stat{ border-left:1px solid var(--line); padding-left:32px; margin-left:32px; }
.stat-num{ font-family:var(--serif); font-size:2rem; color:var(--ink); font-weight:600; }
.stat-label{ font-size:.86rem; color:var(--muted-2); }

.anim-in{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.anim-in.is-visible{ opacity:1; transform:none; }
.anim-in.delay-1{ transition-delay:.1s; }
.anim-in.delay-2{ transition-delay:.2s; }

/* ---- Cards ---- */
.card-surface{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow-card); }

.course-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; height:100%; display:flex; flex-direction:column; transition:box-shadow .25s ease, border-color .25s ease; }
.course-card:hover{ box-shadow:var(--shadow-raised); border-color:#cfc9b8; }
.course-card .thumb{ aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--gold-wash); }
.course-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.course-card:hover .thumb img{ transform:scale(1.045); }
.course-card .body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.course-card .cat{ font-size:.76rem; font-weight:600; color:var(--gold-deep); }
.course-card h3{ font-size:1.18rem; margin:0; }
.course-card .desc{ font-size:.92rem; margin:0; flex:1; }
.course-card .meta{ display:flex; flex-wrap:wrap; gap:8px 14px; font-size:.82rem; color:var(--muted-2); padding-top:4px; border-top:1px solid var(--line); margin-top:4px; }
.course-card .meta span{ display:inline-flex; align-items:center; gap:5px; }
.badge-offer{ position:absolute; top:12px; left:12px; background:var(--gold); color:#fff; font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:20px; }

/* ---- Stats section ---- */
.stats-band{ background:var(--ink); color:#fff; padding-block:56px; }
.stats-band .stat-num{ color:#fff; }
.stats-band .stat-label{ color:rgba(255,255,255,.62); }

/* ---- Why choose / benefits ---- */
.benefit{ padding:28px 0 0; border-top:1px solid var(--line); }
.benefit .icon{ width:46px; height:46px; border-radius:50%; background:var(--gold-wash); color:var(--gold-deep); display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin-bottom:16px; }

/* ---- Numbered process (legitimate sequence) ---- */
.process-step{ display:flex; gap:22px; }
.process-num{ font-family:var(--serif); font-size:1.6rem; color:var(--gold); font-weight:600; flex:none; width:44px; }
.process-step:not(:last-child){ margin-bottom:34px; }

/* ---- Testimonials ---- */
.testimonial-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:30px; height:100%; }
.testimonial-card .stars{ color:var(--gold); font-size:.85rem; letter-spacing:2px; margin-bottom:14px; }
.testimonial-card blockquote{ font-family:var(--serif); font-size:1.12rem; color:var(--ink); margin:0 0 18px; line-height:1.5; }
.testimonial-who{ display:flex; align-items:center; gap:12px; }
.testimonial-who img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.testimonial-who .name{ font-weight:600; font-size:.92rem; }
.testimonial-who .course{ font-size:.8rem; color:var(--muted-2); }

/* ---- Gallery ---- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:170px; gap:12px; }
.gallery-grid a{ overflow:hidden; border-radius:var(--radius-s); position:relative; display:block; }
.gallery-grid a::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,33,61,.45), transparent 45%); opacity:0; transition:opacity .25s ease; }
.gallery-grid a:hover::after{ opacity:1; }
.gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.gallery-grid a:hover img{ transform:scale(1.06); }
.gallery-grid .tall{ grid-row:span 2; }
.gallery-grid .wide{ grid-column:span 2; }
@media (max-width:768px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } .gallery-grid .wide{ grid-column:span 2; } }

/* ---- CTA band ---- */
.cta-band{ position:relative; background:var(--ink); color:#fff; border-radius:var(--radius-l); padding:64px 48px; overflow:hidden; }
.cta-band::before{ content:''; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% 20%, rgba(184,134,46,.35), transparent 60%); }
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.75); }
@media (max-width:640px){ .cta-band{ padding:44px 26px; } }

/* ---- Footer ---- */
.site-footer{ background:var(--ink-2); color:rgba(255,255,255,.78); padding-block:64px 28px; }
.site-footer h5{ color:#fff; font-family:var(--sans); font-size:.92rem; font-weight:700; margin-bottom:18px; }
.site-footer a{ color:rgba(255,255,255,.72); }
.site-footer a:hover{ color:#fff; }
.site-footer .brand{ color:#fff; }
.site-footer .brand small{ color:var(--gold-soft); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); margin-top:44px; padding-top:24px; font-size:.85rem; color:rgba(255,255,255,.55); }
.social-row a{ width:36px; height:36px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-right:8px; transition:background .2s ease, border-color .2s ease; }
.social-row a:hover{ background:var(--gold); border-color:var(--gold); }

/* ---- Forms ---- */
.form-control, .form-select{
  border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px; font-family:var(--sans);
  background:#fff; color:var(--ink);
}
.form-control:focus, .form-select:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,134,46,.16); }
.form-label{ font-weight:600; font-size:.88rem; margin-bottom:6px; color:var(--ink); }
.invalid-feedback{ display:block; color:var(--danger); font-size:.82rem; margin-top:4px; }
.is-invalid{ border-color:var(--danger) !important; }
.form-hint{ font-size:.8rem; color:var(--muted-2); }
.honeypot-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---- Accordion ---- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:20px 0; font-family:var(--serif); font-size:1.05rem; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px; cursor:pointer; }
.faq-q .plus{ transition:transform .25s ease; color:var(--gold); flex:none; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding-bottom:20px; color:var(--muted); }

.module-item{ border:1px solid var(--line); border-radius:var(--radius-s); margin-bottom:10px; overflow:hidden; }
.module-head{ width:100%; text-align:left; background:#fff; border:0; padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:14px; cursor:pointer; font-weight:600; }
.module-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--paper); }
.module-body-inner{ padding:6px 18px 18px; color:var(--muted); }
.module-item.open .module-head{ background:var(--gold-wash); }

/* ---- Badges / pills ---- */
.pill{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; padding:5px 12px; border-radius:20px; background:var(--gold-wash); color:var(--gold-deep); }
.pill-outline{ background:transparent; border:1px solid var(--line); color:var(--muted); }

/* ---- Offer card ---- */
.offer-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px; display:flex; flex-direction:column; gap:12px; height:100%; }
.offer-price{ display:flex; align-items:baseline; gap:10px; }
.offer-price .now{ font-family:var(--serif); font-size:1.7rem; color:var(--ink); font-weight:600; }
.offer-price .was{ text-decoration:line-through; color:var(--muted-2); font-size:.95rem; }
.offer-discount{ background:var(--ink); color:#fff; font-size:.76rem; font-weight:700; padding:4px 10px; border-radius:20px; }

/* ---- WhatsApp float ---- */
.whatsapp-float{ position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; box-shadow:0 10px 24px -6px rgba(0,0,0,.35); z-index:1200; transition:transform .2s ease; }
.whatsapp-float:hover{ transform:scale(1.07); color:#fff; }

/* ---- Utility ---- */
.text-muted-2{ color:var(--muted-2); }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.bg-paper-raised{ background:#fff; }
.hairline-top{ border-top:1px solid var(--line); }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 20px; z-index:2000; }
.skip-link:focus{ left:12px; top:12px; }

/* ---- Rich text (sanitized course descriptions) ---- */
.course-rich-content{ max-width:70ch; color:var(--muted); }
.course-rich-content p{ margin-bottom:1.1em; max-width:none; }
.course-rich-content a{ color:var(--gold-deep); text-decoration:underline; }
.course-rich-content ul, .course-rich-content ol{ margin-bottom:1.1em; padding-left:1.3em; }

/* ---- Breadcrumb ---- */
.crumbs{ font-size:.85rem; color:var(--muted-2); }
.crumbs a{ color:var(--muted-2); }
.crumbs a:hover{ color:var(--ink); }

/* ---- Page hero (inner pages) ---- */
.page-hero{ background:var(--ink); color:#fff; padding-block:64px 56px; }
.page-hero h1{ color:#fff; }
.page-hero p{ color:rgba(255,255,255,.72); }
.page-hero .crumbs, .page-hero .crumbs a{ color:rgba(255,255,255,.55); }
.page-hero .crumbs a:hover{ color:#fff; }