/*
 * Educatta: shared base stylesheet
 * Loaded by every page; cached after first hit.
 * Page-specific styles remain inline and will override these via cascade order.
 */

:root{
  /* Brand colours */
  --violet:     #A556EF;  /* primary brand violet (CTAs, links, active states) */
  --pink:       #EC4899;  /* secondary brand pink (gradient pair, hover) */
  --pink-light: #F472B6;  /* lighter pink (avatars, soft accents) */
  --amber:      #F59E0B;  /* warm accent (stars, gradient stop) */
  --green:      #10B981;  /* success / positive (pulsing dots, confirmation) */
  --rose:       #F43F5E;  /* warning / urgency (rare; legacy) */
  --logo-green: #80EB22;  /* LOGO ONLY. Never use as a UI colour. */

  /* Page-level theme defaults (subject pages override these inline) */
  --theme:      #A556EF;  /* primary theme, defaults to brand violet */
  --theme-2:    #EC4899;  /* secondary theme, defaults to brand pink */

  /* Text + surface */
  --ink:        #0B1A34;  /* default body text */
  --ink-soft:   #1E3A5F;  /* secondary text (paragraph copy) */
  --muted:      #5A6A85;  /* tertiary text (labels, captions) */
  --paper:      #FBFBFF;  /* page background */
  --border:     #E6E8F2;  /* hairline borders, dividers */

  /* Motion */
  --ease:       cubic-bezier(.2, .8, .2, 1);  /* shared easing curve */
}

/* ---------- Reset + base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* ---------- NAV (shared across all pages) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 32px;display:flex;align-items:center;justify-content:space-between;color:var(--ink);transition:background .4s var(--ease),backdrop-filter .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(255,255,255,.78);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid rgba(11,26,52,.08)}
/* ---------- BRAND LOGO (mark + wordmark) ---------- */
.logo{display:flex;align-items:center;gap:10px;font-family:'Fredoka','Inter',sans-serif;font-weight:600;font-size:38px;letter-spacing:-.01em;color:var(--logo-green);text-shadow:0 1px 0 rgba(0,0,0,.04);line-height:1}
.logo-mark{width:38px;height:38px;flex-shrink:0;display:inline-block;background-image:url("mascot.svg");background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 4px 10px rgba(128,235,34,.35))}
/* Wordmark "Educatta": Fredoka rounded display */
.logo span.wm{font-family:'Fredoka','Inter',sans-serif;font-weight:600;letter-spacing:-.01em;color:var(--logo-green);line-height:1}
.nav-links{display:flex;gap:28px;align-items:center;font-size:14.5px;font-weight:500}
.nav-links > a, .nav-links .nav-trigger{opacity:.85;transition:opacity .2s;cursor:pointer}
.nav-links > a:hover, .nav-links .nav-trigger:hover{opacity:1}
.nav-links a.active{opacity:1;color:var(--violet);font-weight:600}
/* Dropdown triggers should never adopt the active page colour, even if their
   href happens to match the current URL (e.g. Subjects on the homepage). */
.nav-links .nav-trigger.active{color:inherit;font-weight:500}
.nav-cta{padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;background:linear-gradient(135deg,var(--theme,var(--violet)),var(--theme-2,var(--pink-light)));color:#fff;box-shadow:0 10px 24px color-mix(in srgb, var(--theme, #ec4899) 30%, transparent);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 14px 32px color-mix(in srgb, var(--theme, #ec4899) 50%, transparent)}
.nav-right{display:flex;gap:18px;align-items:center}

/* Mega-menu (Subjects dropdown) */
.nav-item{position:relative}
.nav-trigger{display:inline-flex;align-items:center;gap:5px}
.nav-trigger .caret{font-size:10px;transition:transform .2s var(--ease);display:inline-block}
.nav-item:hover .nav-trigger .caret,.nav-item.open .nav-trigger .caret{transform:rotate(180deg)}
/* Invisible hover bridge so the dropdown doesn't close in the gap */
.nav-item::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:18px;display:none}
.nav-item:hover::after{display:block}
.dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);background:#fff;border:1px solid rgba(11,26,52,.06);border-radius:18px;box-shadow:0 24px 60px rgba(11,26,52,.14), 0 1px 3px rgba(11,26,52,.04);padding:8px;display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:6px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:200}
.dropdown-col a{white-space:nowrap}
.nav-item:hover .dropdown,.nav-item.open .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown-col{padding:22px 22px 18px;border-radius:14px;transition:background .2s var(--ease)}
.dropdown-col:hover{background:#fafafb}
/* Subjects dropdown: green / blue / violet section dots scoped to #subjectsMenu only.
   Free resources dropdown intentionally left neutral. */
#subjectsMenu .dropdown-col:nth-child(1){background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%);position:relative}
#subjectsMenu .dropdown-col:nth-child(1)::before{content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.10)}
#subjectsMenu .dropdown-col:nth-child(2){background:linear-gradient(180deg,#eff6ff 0%,#fff 100%);position:relative}
#subjectsMenu .dropdown-col:nth-child(2)::before{content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;background:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.10)}
#subjectsMenu .dropdown-col:last-child{background:linear-gradient(180deg,#faf7ff 0%,#fff 100%);position:relative}
#subjectsMenu .dropdown-col:last-child::before{content:"";position:absolute;top:14px;right:14px;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink-light));box-shadow:0 0 0 4px rgba(236,72,153,.10)}
.dropdown-col h6{font-family:'Fredoka','Inter',sans-serif;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0 0 4px;text-transform:none;line-height:1.2}
.dropdown-col .h-sub{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.dropdown-col h6 + .h-rule{display:block;width:32px;height:3px;border-radius:2px;background:linear-gradient(90deg,#0b1a34,#3a4a72);margin:0 0 16px;opacity:.85}
#subjectsMenu .dropdown-col:last-child h6 + .h-rule{background:linear-gradient(90deg,var(--violet),var(--pink-light));opacity:1}
.dropdown-col a{display:flex;align-items:center;gap:12px;padding:9px 12px;margin:0 -12px;font-size:14.5px;color:var(--ink);font-weight:500;opacity:1;border-radius:8px;transition:background .15s, color .15s, transform .15s}
.dropdown-col a:hover{background:rgba(11,26,52,.04);color:var(--ink);transform:translateX(2px)}
#subjectsMenu .dropdown-col:last-child a:hover{background:rgba(165,86,239,.08);color:var(--violet)}
/* Per-link emoji icon (only renders for hrefs that have a content rule below). */
.dropdown-col a::before{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;font-size:13px;line-height:1}
.dropdown-col a[href$="year-9-maths"]::before{content:"📈"}
.dropdown-col a[href$="year-9-english"]::before{content:"📚"}
.dropdown-col a[href$="year-9-science"]::before{content:"🔬"}
.dropdown-col a[href$="year-10-maths"]::before{content:"📊"}
.dropdown-col a[href$="year-10-english"]::before{content:"✍️"}
.dropdown-col a[href$="year-10-science"]::before{content:"🌡️"}
.dropdown-col a[href$="maths-methods"]::before{content:"📐"}
.dropdown-col a[href$="maths-applications"]::before{content:"🧮"}
.dropdown-col a[href$="english"]::before{content:"📖"}
.dropdown-col a[href$="chemistry"]::before{content:"🧪"}
.dropdown-col a[href$="physics"]::before{content:"⚛️"}
.dropdown-col a[href$="human-biology"]::before{content:"🧬"}
.dropdown-col a[href$="atar-calculator"]::before{content:"🧮"}
.dropdown-col a[href$="atar-scaling-explained"]::before{content:"⚖️"}
.dropdown-col a[href$="past-papers"]::before{content:"📄"}
.dropdown-col a[href$="blog"]::before{content:"✏️"}
.dropdown-col a[href$="what-is-wace"]::before{content:"📘"}
.dropdown-col a[href$="glossary"]::before{content:"🔤"}
.dropdown-col a[href$="pomodoro-timer"]::before{content:"⏲️"}
.dropdown-col a[href$="wace-formula-sheets"]::before{content:"📋"}
.dropdown-col a[href$="how-to-study-for-wace"]::before{content:"🚀"}
.dropdown-col a[href$="resources#study-templates"]::before{content:"🗓️"}
.dropdown-col a[href$="how-to-take-notes-for-wace"]::before{content:"📓"}
.dropdown-col a[href$="active-recall-for-wace"]::before{content:"🧠"}
.dropdown-col a[href$="how-many-hours-to-study-wace"]::before{content:"⏳"}
.dropdown-col a::after{content:"→";font-size:13px;color:var(--muted);opacity:0;margin-left:auto;transition:opacity .15s, transform .15s;font-weight:600}
.dropdown-col a:hover::after{opacity:.6;transform:translateX(2px)}
.dropdown-col a:has(.soon)::after{display:none}
.dropdown-col a .soon{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;background:#fef3c7;color:#92400e;padding:3px 8px;border-radius:6px;font-weight:700;margin-left:auto;white-space:nowrap;border:1px solid #fde68a}

/* Mobile hamburger */
.nav-burger{display:none;width:40px;height:40px;border:0;background:transparent;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav-burger svg{width:24px;height:24px}

@media(max-width:820px){
  .nav-links{display:none;position:fixed;top:64px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:18px 24px 24px;border-bottom:1px solid var(--border);box-shadow:0 12px 30px rgba(11,26,52,.12);gap:0;max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .nav-links.open{display:flex}
  .nav-links > a, .nav-links .nav-trigger{padding:14px 0;border-bottom:1px solid var(--border);opacity:1}
  .nav-links .nav-item{width:100%}
  .nav{padding:14px 18px}
  .nav-burger{display:inline-flex}
  .nav-right .nav-cta{padding:8px 14px;font-size:13px}

  /* ---------- MOBILE SUBJECTS DROPDOWN: fresh redesign ---------- */
  .nav-item .dropdown{
    position:static !important;
    display:block !important;
    grid-template-columns:none !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
    background:linear-gradient(180deg,#faf9fc 0%,#f5f4fa 100%) !important;
    border:1px solid rgba(11,26,52,.06) !important;
    border-radius:16px !important;
    box-shadow:0 4px 14px -8px rgba(11,26,52,.08) inset, 0 1px 0 rgba(255,255,255,.6) inset !important;
    padding:0 16px !important;
    margin:8px 0 8px !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    max-height:0;
    overflow:hidden;
    transition:max-height .4s var(--ease), padding .4s var(--ease);
  }
  .nav-item.open .dropdown{
    max-height:1800px;
    padding:6px 16px 12px !important;
  }
  .nav-item .dropdown .dropdown-col{
    display:block !important;
    width:100% !important;
    padding:16px 0 4px !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:1px solid rgba(11,26,52,.07) !important;
    border-radius:0 !important;
    position:relative;
  }
  .nav-item .dropdown .dropdown-col:last-child{border-bottom:0 !important;padding-bottom:6px !important}
  .nav-item .dropdown .dropdown-col::before{display:none !important}
  /* Section heading row */
  .nav-item .dropdown .dropdown-col h6{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    font-size:14px !important;
    font-weight:700 !important;
    color:#0b1a34 !important;
    margin:0 !important;
    line-height:1.2 !important;
    text-transform:none !important;
    font-family:'Fredoka','Inter',sans-serif !important;
  }
  /* Coloured section dot */
  .nav-item .dropdown .dropdown-col h6::before{
    content:"" !important;
    display:inline-block !important;
    width:8px !important;
    height:8px !important;
    border-radius:50%;
    background:#34d399;
    box-shadow:0 0 0 3px rgba(52,211,153,.16);
  }
  .nav-item .dropdown .dropdown-col:nth-of-type(2) h6::before{background:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.16)}
  .nav-item .dropdown .dropdown-col:nth-of-type(3) h6::before{background:linear-gradient(135deg,#A556EF,#ec4899);box-shadow:0 0 0 3px rgba(165,86,239,.16)}
  .nav-item .dropdown .dropdown-col .h-sub{
    display:block !important;
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
    color:#5a6a85 !important;
    margin:4px 0 8px 16px !important;
  }
  .nav-item .dropdown .dropdown-col .h-rule{display:none !important}
  .nav-item .dropdown .dropdown-col h6 + .h-rule{display:none !important}
  /* Subject links */
  .nav-item .dropdown .dropdown-col a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    width:100% !important;
    padding:11px 10px !important;
    margin:1px 0 !important;
    font-size:14.5px !important;
    font-weight:500 !important;
    color:#0b1a34 !important;
    text-decoration:none !important;
    background:transparent !important;
    border:0 !important;
    border-radius:10px !important;
    transform:none !important;
    line-height:1.3 !important;
    transition:background .15s ease, transform .15s ease !important;
  }
  .nav-item .dropdown .dropdown-col a:hover,
  .nav-item .dropdown .dropdown-col a:active{
    background:rgba(165,86,239,.08) !important;
    color:#A556EF !important;
  }
  .nav-item .dropdown .dropdown-col a::after{display:none !important}
  /* Auto-emoji per subject (no HTML edits needed) */
  .nav-item .dropdown .dropdown-col a::before{
    content:"";
    flex-shrink:0;
    width:22px;
    text-align:center;
    font-size:16px;
    line-height:1;
  }
  .nav-item .dropdown a[href="/year-9-maths"]::before{content:"📈"}
  .nav-item .dropdown a[href="/year-9-english"]::before{content:"📚"}
  .nav-item .dropdown a[href="/year-9-science"]::before{content:"🔬"}
  .nav-item .dropdown a[href="/year-10-maths"]::before{content:"📊"}
  .nav-item .dropdown a[href="/year-10-english"]::before{content:"✍️"}
  .nav-item .dropdown a[href="/year-10-science"]::before{content:"🌡️"}
  .nav-item .dropdown a[href="/maths-methods"]::before{content:"📐"}
  .nav-item .dropdown a[href="/maths-applications"]::before{content:"🧮"}
  .nav-item .dropdown a[href="/english"]::before{content:"📖"}
  .nav-item .dropdown a[href="/chemistry"]::before{content:"🧪"}
  .nav-item .dropdown a[href="/physics"]::before{content:"⚛️"}
  .nav-item .dropdown a[href="/human-biology"]::before{content:"🧬"}
  /* Free resources dropdown items */
  .nav-item .dropdown a[href="/atar-calculator"]::before{content:"🧮"}
  .nav-item .dropdown a[href="/atar-scaling-explained"]::before{content:"⚖️"}
  .nav-item .dropdown a[href="/past-papers"]::before{content:"📄"}
  .nav-item .dropdown a[href="/blog"]::before{content:"✏️"}
  .nav-item .dropdown a[href="/what-is-wace"]::before{content:"📘"}
  .nav-item .dropdown a[href="/glossary"]::before{content:"🔤"}
  .nav-item .dropdown a[href="/atar-target-calculator"]::before{content:"🎯"}
  .nav-item .dropdown a[href="/subject-choice-quiz"]::before{content:"🧭"}
  .nav-item .dropdown a[href="/exam-countdown"]::before{content:"⏰"}
  .nav-item .dropdown a[href="/olna-practice"]::before{content:"📝"}
  .nav-item .dropdown a[href="/blog-best-atar-subjects-for-medicine-wa"]::before{content:"🩺"}
  .nav-item .dropdown a[href="/blog-best-atar-subjects-engineering-wa"]::before{content:"⚙️"}
  .nav-item .dropdown a[href="/wa-university-course-finder"]::before{content:"🔍"}
  .nav-item .dropdown a[href="/wace-for-parents"]::before{content:"👪"}
  .nav-item .dropdown a[href="/pomodoro-timer"]::before{content:"⏲️"}
  .nav-item .dropdown a[href="/wace-formula-sheets"]::before{content:"📋"}
  .nav-item .dropdown a[href="/how-to-study-for-wace"]::before{content:"🚀"}
  .nav-item .dropdown a[href="/resources#study-templates"]::before{content:"🗓️"}
  .nav-item .dropdown a[href="/how-to-take-notes-for-wace"]::before{content:"📓"}
  .nav-item .dropdown a[href="/active-recall-for-wace"]::before{content:"🧠"}
  .nav-item .dropdown a[href="/how-many-hours-to-study-wace"]::before{content:"⏳"}
  .nav-item .dropdown .dropdown-col a .soon{
    margin-left:auto !important;
    flex-shrink:0 !important;
    font-size:9px !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    background:linear-gradient(135deg,#fde68a,#fbbf24) !important;
    color:#78350f !important;
    padding:3px 8px !important;
    border-radius:999px !important;
    font-weight:800 !important;
    border:0 !important;
    white-space:nowrap !important;
    box-shadow:0 1px 2px rgba(180,83,9,.18) !important;
  }
}

/* ---------- Container ---------- */
.container{max-width:1100px;margin:0 auto;padding:0 24px}

/* ---------- Reveal-on-scroll (progressive enhancement) ---------- */
/* Without JS, content stays visible. With JS, .reveal items hide until GSAP shows them. */
.js .reveal{opacity:0;transform:translateY(24px)}

/* ---------- Sticky mobile trial CTA bar ---------- */
.mobile-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;padding:10px 14px;background:rgba(255,255,255,.96);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-top:1px solid rgba(11,26,52,.08);box-shadow:0 -8px 24px -8px rgba(11,26,52,.08)}
.mobile-cta-bar a{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 18px;border-radius:999px;background:linear-gradient(135deg,var(--violet,#A556EF),var(--pink,#EC4899));color:#fff;font-weight:700;font-size:14.5px;letter-spacing:-.005em;text-decoration:none;box-shadow:0 8px 20px -8px rgba(165,86,239,.5)}
.mobile-cta-bar a:hover{color:#fff}
@media(max-width:820px){.mobile-cta-bar{display:block}body{padding-bottom:74px}}
/* Hide on the trial-booking page itself and on the form CTA destination */
body[data-no-mobile-bar="true"] .mobile-cta-bar{display:none}
body[data-no-mobile-bar="true"]{padding-bottom:0}

/* ---------- Curriculum continuity card (subject pages) ---------- */
/* Each page sets --next-c1 / --next-c2 to colour the destination accent + button. */
.curriculum-next{padding:60px 24px}
.curriculum-next .next-block{position:relative;max-width:780px;margin:0 auto;padding:44px 40px;border-radius:28px;background:linear-gradient(180deg,#fbfbff 0%,#fff 100%) padding-box,linear-gradient(135deg,var(--next-c1,#A556EF),var(--next-c2,#EC4899)) border-box;border:2px solid transparent;text-align:center;box-shadow:0 18px 48px -28px rgba(11,26,52,.18)}
.curriculum-next .section-kicker{margin-bottom:14px;display:inline-block}
.curriculum-next .next-title{font-size:clamp(24px,3.2vw,34px);line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--ink);margin:0 0 12px}
.curriculum-next .next-accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:linear-gradient(120deg,var(--next-c1,#A556EF),var(--next-c2,#EC4899));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .12em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.curriculum-next .next-sub{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0 auto 24px;max-width:560px}
.curriculum-next .next-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;background:linear-gradient(135deg,var(--next-c1,#A556EF),var(--next-c2,#EC4899));color:#fff;font-weight:700;font-size:14.5px;letter-spacing:-.005em;transition:transform .2s var(--ease),box-shadow .2s var(--ease);box-shadow:0 12px 28px -10px rgba(11,26,52,.25);text-decoration:none;border:0}
.curriculum-next .next-btn:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(11,26,52,.32);color:#fff}
/* Force visible regardless of .reveal opacity rule */
.js .curriculum-next .section-kicker,
.js .curriculum-next .next-title,
.js .curriculum-next .next-sub,
.js .curriculum-next .next-btn{opacity:1;transform:none}
@media(max-width:640px){.curriculum-next{padding:40px 18px}.curriculum-next .next-block{padding:36px 24px;border-radius:22px}}

/* ---------- FOOTER (shared across all pages) ---------- */
footer{background:linear-gradient(180deg,#0b1a34 0%,#050812 100%);color:#c8c6e3;padding:60px 0 30px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(165,86,239,.18),transparent 60%);pointer-events:none}
footer .logo{color:var(--logo-green)}
footer .logo-mark{filter:drop-shadow(0 4px 14px rgba(128,235,34,.55))}
/* Row 1 = Brand · Y9-10 · ATAR · Centres · Company; Row 2 = Legal (right side) */
/* 7 columns of content (brand + 6 nav cols) flow as a 4-up grid:
   row 1 = brand, Subjects, ATAR Yr 11–12, Centres
   row 2 = (empty under brand), Free Resources, Company, Legal
   The brand column is wider so the description doesn't wrap awkwardly.
   Free Resources is pushed to col 2 so Legal lines up under Centres. */
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.1fr;gap:48px 40px;margin-bottom:40px;position:relative;z-index:1;align-items:start}
.foot-grid > :nth-child(5){grid-column:2}
.foot-contact-block{grid-column:1;grid-row:2;align-self:start}
.foot-contact-block h5{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:1080px){.foot-contact-block{grid-column:1/-1;grid-row:auto}}
@media(max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}.foot-brand{grid-column:1/-1;max-width:520px}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;gap:28px}.foot-brand{grid-column:auto;max-width:none}}
.foot-brand p{font-size:14px;color:#a8a5c9;max-width:320px;margin-top:16px;line-height:1.55}
.foot-contact-link{display:flex;align-items:center;gap:8px;color:#c8c6e3;font-size:14.5px;font-weight:500;text-decoration:none;line-height:1;margin-bottom:10px;transition:color .18s ease}
.foot-contact-link svg{flex-shrink:0;color:var(--logo-green)}
.foot-contact-link:hover{color:#fff}
.foot-social{display:flex;gap:8px;margin-top:14px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.06);color:#c8c6e3;text-decoration:none;border:1px solid rgba(255,255,255,.08);transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}
.foot-social a:hover{background:rgba(128,235,34,.14);color:var(--logo-green);border-color:rgba(128,235,34,.4);transform:translateY(-1px)}
.foot-col h5{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot-col ul + .foot-subhead{margin-top:18px}
.foot-subhead{font-size:11px;font-weight:700;color:rgba(200,198,227,.6);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#8a87a8;flex-wrap:wrap;gap:12px;position:relative;z-index:1}

/* ---------- Reduced motion (accessibility + performance) ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html,body{scroll-behavior:auto}
  /* GSAP isn't loaded for reduced-motion users (see gsap-loader.js).
     Without GSAP, .reveal elements would stay invisible — show them immediately. */
  .js .reveal{opacity:1 !important;transform:none !important}
}


/* ---------- Subject + year landing pages ---------- */
::selection{background:rgba(165,86,239,0.18);color:var(--ink,#0b1a34)}

/* HERO */
.subj-hero{position:relative;overflow:hidden;padding:160px 24px 110px;background:linear-gradient(135deg,var(--theme) 0%,var(--theme-2) 100%);color:#fff}
.subj-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%, rgba(255,255,255,.25), transparent 45%),radial-gradient(circle at 85% 80%, rgba(255,255,255,.18), transparent 45%);pointer-events:none}
.subj-hero::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-1px;height:80px;background:var(--paper);border-radius:50% 50% 0 0 / 100% 100% 0 0}
.subj-hero-inner{position:relative;z-index:2;max-width:1020px;margin:0 auto;text-align:center}
.back-link{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-size:14px;font-weight:600;margin-bottom:22px;opacity:.9;transition:opacity .2s}
.back-link:hover{opacity:1}
.subj-emoji{font-size:80px;display:inline-block;filter:drop-shadow(0 12px 30px rgba(0,0,0,.2));animation:floaty 4s ease-in-out infinite;margin-bottom:14px}
@keyframes floaty{50%{transform:translateY(-10px) rotate(4deg)}}
.subj-hero h1{font-size:clamp(44px,7vw,88px);line-height:1;letter-spacing:-.035em;font-weight:800;margin-bottom:18px}
.subj-hero h1 .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:#fff}
.subj-hero .tagline{font-size:clamp(17px,1.7vw,20px);color:rgba(255,255,255,.9);max-width:640px;margin:0 auto 28px;line-height:1.5;font-weight:500}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-weight:600;font-size:15.5px;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:#fff;color:var(--theme);box-shadow:0 14px 40px rgba(0,0,0,.18)}
.btn-primary:hover{color:var(--theme-2)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}

/* QUICK FACTS */
.facts{padding:56px 0 40px}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.facts-grid{grid-template-columns:repeat(2,1fr)}}
.fact{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fact:hover{transform:translateY(-3px);box-shadow:0 16px 40px -20px rgba(165,86,239,.2)}
.fact-lbl{font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.fact-val{font-size:17px;font-weight:700;color:var(--ink);line-height:1.35}

/* SECTION HEAD */
.section-head{text-align:center;max-width:720px;margin:0 auto 48px}
.section-kicker{display:inline-block;padding:6px 12px;border-radius:999px;background:color-mix(in srgb, var(--theme) 10%, transparent);color:var(--theme);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.section-title{font-size:clamp(30px,4.2vw,48px);line-height:1.05;letter-spacing:-.03em;font-weight:800;margin-bottom:14px;color:var(--ink)}
.section-title .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--theme)}
.section-sub{font-size:16.5px;color:var(--muted);line-height:1.6}

/* CURRICULUM */
.curriculum{padding:60px 0 40px}
.units{display:flex;flex-direction:column;gap:18px}
.unit{background:#fff;border:1px solid var(--border);border-radius:20px;padding:32px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .2s}
.unit:hover{transform:translateY(-3px);box-shadow:0 20px 50px -25px rgba(165,86,239,.25);border-color:color-mix(in srgb, var(--theme) 30%, var(--border))}
.unit-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.unit-badge{padding:5px 12px;border-radius:999px;background:linear-gradient(135deg,var(--theme),var(--theme-2));color:#fff;font-weight:700;font-size:13px;letter-spacing:.02em}
.unit-title{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.unit-desc{font-size:15px;color:var(--muted);margin-bottom:20px;line-height:1.55}
.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:760px){.topics{grid-template-columns:1fr}}
.topic{background:color-mix(in srgb, var(--theme) 4%, #fff);border:1px solid color-mix(in srgb, var(--theme) 15%, var(--border));border-radius:12px;padding:16px 18px}
.topic-name{font-weight:700;color:var(--ink);font-size:15px;margin-bottom:4px;display:flex;gap:8px;align-items:baseline}
.topic-name::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--theme),var(--theme-2));flex-shrink:0;transform:translateY(-2px)}
.topic-detail{font-size:14px;color:var(--muted);line-height:1.55}
.unit-assess{margin-top:20px;padding-top:18px;border-top:1px dashed color-mix(in srgb, var(--theme) 25%, var(--border));font-size:13.5px;color:var(--ink-soft);font-weight:500}
.unit-assess b{color:var(--theme)}

/* TIMETABLE */
.timetable{padding:80px 0 40px;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.tt-wrap{background:color-mix(in srgb, var(--theme) 4%, #fff);border:1px solid color-mix(in srgb, var(--theme) 15%, var(--border));border-radius:20px;padding:8px;overflow:hidden}
.tt-table{width:100%;border-collapse:collapse}
.tt-table th,.tt-table td{padding:14px 18px;text-align:left;font-size:14.5px}
.tt-table th{background:linear-gradient(135deg,var(--theme),var(--theme-2));color:#fff;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:none}
.tt-table th:first-child{border-top-left-radius:14px}
.tt-table th:last-child{border-top-right-radius:14px}
.tt-table tr+tr td{border-top:1px solid color-mix(in srgb, var(--theme) 15%, var(--border))}
.tt-table td:first-child{font-weight:700;color:var(--theme);width:120px}
.tt-note{margin-top:14px;font-size:13px;color:var(--muted);text-align:center}

/* FAQ */
.faq-section{padding:80px 0 40px}
.faqs{display:flex;flex-direction:column;gap:12px;max-width:820px;margin:0 auto}
.faq{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px 28px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.faq:hover{border-color:color-mix(in srgb, var(--theme) 30%, var(--border))}
.faq summary{font-weight:700;font-size:16.5px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";width:28px;height:28px;border-radius:50%;background:color-mix(in srgb, var(--theme) 10%, #fff);color:var(--theme);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:400;transition:transform .3s var(--ease),background .2s}
.faq[open] summary::after{transform:rotate(45deg);background:linear-gradient(135deg,var(--theme),var(--theme-2));color:#fff}
.faq-body{margin-top:14px;font-size:15.5px;color:var(--muted);line-height:1.6}

/* TESTIMONIAL */
.testimonial-section{padding:80px 0 40px;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.feat-quote{max-width:820px;margin:0 auto;background:color-mix(in srgb, var(--theme) 6%, #fff);border:1px solid color-mix(in srgb, var(--theme) 20%, var(--border));border-radius:24px;padding:48px 44px;position:relative;overflow:hidden}
.feat-quote::before{content:"\201C";position:absolute;top:-30px;left:20px;font-size:200px;font-family:'Instrument Serif',serif;color:color-mix(in srgb, var(--theme) 18%, transparent);line-height:1}
.feat-quote-stars{color:var(--amber);letter-spacing:3px;margin-bottom:14px}
.feat-quote p{font-size:19px;line-height:1.5;color:var(--ink);margin-bottom:20px;font-weight:500;position:relative}
.feat-quote-author{display:flex;align-items:center;gap:14px;position:relative}
.feat-quote-av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--theme),var(--theme-2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
.feat-quote-name{font-weight:700;font-size:15.5px}
.feat-quote-role{font-size:13.5px;color:var(--muted)}
.uplift{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,var(--theme),var(--theme-2));color:#fff;font-size:12px;font-weight:700;margin-left:auto}

/* CTA */
.cta-section{padding:80px 0 120px}
.cta-card{position:relative;overflow:hidden;border-radius:28px;padding:72px 40px;text-align:center;background:linear-gradient(135deg,var(--theme) 0%,var(--theme-2) 70%,var(--amber) 130%);box-shadow:0 40px 80px -30px rgba(0,0,0,.3);color:#fff}
.cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.25), transparent 40%),radial-gradient(circle at 80% 70%, rgba(255,255,255,.2), transparent 40%);animation:rot 22s linear infinite}
@keyframes rot{to{transform:rotate(1turn)}}
.cta-card > *{position:relative;z-index:1}
.cta-card h2{font-size:clamp(30px,4.5vw,52px);line-height:1.05;font-weight:800;letter-spacing:-.03em;max-width:780px;margin:0 auto 16px}
.cta-card h2 .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:#fff;text-shadow:0 2px 20px rgba(251,191,36,.7)}
.cta-card p{font-size:17px;color:rgba(255,255,255,.94);max-width:540px;margin:0 auto 26px}
.cta-small{font-size:13px;color:rgba(255,255,255,.82);margin-top:14px}

::-moz-selection{background:rgba(165,86,239,0.18);color:var(--ink,#0b1a34)}

/* Lock CTA button text colour across all states so it never disappears
   into a white-on-white state. */
a.cta-btn,a.cta-btn:hover,a.cta-btn:focus,a.cta-btn:visited{color:var(--violet,#A556EF)!important}
a.cta-btn svg{color:inherit}
.pp-btn-primary,.pp-btn-primary:hover,.pp-btn-primary:focus,.pp-btn-primary:visited{color:#7C3AED!important}
/* Subject pages render .btn-primary as white-bg + theme-coloured text (rule above).
   Pages with a gradient .btn-primary background should set their own color:#fff
   in their inline <style> block, see book-trial.html / blog.html for examples. */

/* New free-resources icon pills (added in dropdown redesign) */
.dropdown-col a[href$="atar-calculator"]::before{background:#EEEDFE;color:#534AB7}
.dropdown-col a[href$="atar-target-calculator"]::before{content:"🎯";background:#FBEAF0;color:#993556}
.dropdown-col a[href$="subject-choice-quiz"]::before{content:"🧭";background:#E1F5EE;color:#0F6E56}
.dropdown-col a[href$="exam-countdown"]::before{content:"⏰";background:#FAEEDA;color:#854F0B}
.dropdown-col a[href$="olna-practice"]::before{content:"📝";background:#E6F1FB;color:#185FA5}
.dropdown-col a[href$="blog-best-atar-subjects-for-medicine-wa"]::before{content:"🩺";background:#FBEAF0;color:#993556}
.dropdown-col a[href$="blog-best-atar-subjects-engineering-wa"]::before{content:"⚙️";background:#E6F1FB;color:#185FA5}
.dropdown-col a[href$="wa-university-course-finder"]::before{content:"🔍";background:#FAEEDA;color:#854F0B}
.dropdown-col a[href$="wace-for-parents"]::before{content:"👪";background:#E1F5EE;color:#0F6E56}
.dropdown-col a[href$="atar-scaling-explained"]::before{background:#FBEAF0;color:#993556}
.dropdown-col a[href$="past-papers"]::before{background:#FAEEDA;color:#854F0B}
.dropdown-col a[href$="blog"]::before{background:#FBEAF0;color:#993556}
.dropdown-col a[href$="what-is-wace"]::before{background:#EEEDFE;color:#534AB7}
.dropdown-col a[href$="glossary"]::before{background:#E6F1FB;color:#185FA5}
.dropdown-col a[href$="pomodoro-timer"]::before{content:"⏲️";background:#FBEAF0;color:#993556}
.dropdown-col a[href$="wace-formula-sheets"]::before{content:"📋";background:#E6F1FB;color:#185FA5}
.dropdown-col a.view-all{margin-top:6px;padding-top:10px;border-top:1px solid rgba(11,26,52,.06);font-size:13px;color:#534AB7;font-weight:600}
.dropdown-col a.view-all::before{display:none}

/* "Get ahead" column items, Term 1 head-start resources */
.dropdown-col a[href$="how-to-study-for-wace"]::before{content:"🚀";background:#EEEDFE;color:#534AB7}
.dropdown-col a[href$="resources#study-templates"]::before{content:"🗓️";background:#FAEEDA;color:#854F0B}
.dropdown-col a[href$="how-to-take-notes-for-wace"]::before{content:"📓";background:#E6F1FB;color:#185FA5}
.dropdown-col a[href$="active-recall-for-wace"]::before{content:"🧠";background:#FBEAF0;color:#993556}
.dropdown-col a[href$="how-many-hours-to-study-wace"]::before{content:"⏳";background:#E1F5EE;color:#0F6E56}


/* ---------- Article / blog / guide pages (shared) ---------- */
 @media(min-width:821px){
 .nav-links{display:flex;gap:28px;align-items:center;font-size:14.5px;font-weight:500}
 .nav-links a{opacity:.85;transition:opacity .2s}
 .nav-links a:hover{opacity:1}
 }
 .hero{position:relative;padding:140px 24px 60px;overflow:hidden;text-align:center;background:linear-gradient(180deg,#f3eaff 0%,#fbf5ff 60%,#fbfbff 100%)}
 .hero-inner{position:relative;z-index:5;max-width:780px;margin:0 auto}
 .eyebrow{display:inline-flex;padding:7px 14px;border-radius:999px;background:rgba(165,86,239,.1);color:var(--violet);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;border:1px solid rgba(165,86,239,.16)}
 .hero h1{font-size:clamp(34px,5.5vw,58px);line-height:1.05;letter-spacing:-.03em;font-weight:900;margin-bottom:18px;color:var(--ink)}
 .hero h1 .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:linear-gradient(120deg,var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .12em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
 .hero p.kicker{font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);max-width:620px;margin:0 auto 24px;line-height:1.55;font-weight:500}
 .byline{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
 .byline .dot{width:4px;height:4px;border-radius:50%;background:var(--violet)}
 .narrow{max-width:980px;margin:0 auto;padding:0 24px}
 .article{padding:60px 0 40px}
 .article p{font-size:17.5px;color:var(--ink-soft);line-height:1.8;margin-bottom:20px}
 .article h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;margin:36px 0 14px;color:var(--ink);line-height:1.2}
 .article h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:28px 0 10px;color:var(--ink)}
 .article ul, .article ol{margin:0 0 22px 22px;font-size:17.5px;color:var(--ink-soft);line-height:1.8}
 .article li{margin-bottom:8px}
 .article strong{color:var(--ink);font-weight:700}
 .article a{color:var(--violet);font-weight:600;border-bottom:1px solid rgba(165,86,239,.3);transition:border-color .2s}
 .article a:hover{border-bottom-color:var(--violet)}
 .pull-quote{margin:30px -10px;padding:26px 30px;border-left:4px solid var(--violet);background:linear-gradient(135deg,rgba(165,86,239,.05),rgba(236,72,153,.04));border-radius:14px;font-family:'Instrument Serif',serif;font-style:italic;font-size:21px;color:var(--ink);line-height:1.45;font-weight:400}
 @media(max-width:600px){.pull-quote{margin:30px 0}}
 .ex-table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:15px;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
 .ex-table th, .ex-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border)}
 .ex-table th{background:rgba(165,86,239,.06);color:var(--ink);font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase}
 .ex-table tr:last-child td{border-bottom:none}
 .related{padding:60px 0;background:linear-gradient(180deg,#fff,#f8fafc);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
 .related h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;margin-bottom:20px;color:var(--ink);text-align:center}
 .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}
 @media(max-width:820px){.related-grid{grid-template-columns:1fr}}
 .rel-card{display:block;background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
 .rel-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -22px rgba(165,86,239,.25)}
 .rel-card .tag{display:inline-block;padding:3px 9px;border-radius:999px;background:rgba(165,86,239,.1);color:var(--violet);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
 .rel-card h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink);line-height:1.3}
 .rel-card p{font-size:14px;color:var(--muted);line-height:1.55}
 @keyframes rot{to{transform:rotate(1turn)}}
 .cta-btn{padding:15px 30px;border-radius:999px;background:#fff;color:var(--violet);font-weight:800;font-size:15.5px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 14px 40px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s}
 .cta-btn:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.28)}

/* Centres dropdown, 2-column compact (no dead third col) */
.centres-dropdown{display:grid !important;grid-template-columns:1fr 1fr !important;width:auto !important;min-width:380px !important;max-width:480px !important}
.centres-dropdown .dropdown-col{padding:14px 18px}
@media(max-width:820px){.centres-dropdown{grid-template-columns:1fr !important;min-width:0 !important;max-width:none !important}}


/* ========================================================================
   BLOG / ARTICLE PAGE STYLES
   Previously inlined on ~52 blog pages, moved here to dedupe.
   Used by every blog post (blog-*.html) and a few cheatsheets / guides.
   ======================================================================== */
:root{
 --ink:#0b1a34;--ink-soft:#1e3a5f;--muted:#5a6a85;
 --paper:#fbfbff;--border:#e6e8f2;
 --amber:#f59e0b;
 --ease:cubic-bezier(.2,.8,.2,1);
  --pink:#ec4899;
}

 .hero{position:relative;padding:140px 24px 60px;overflow:hidden;text-align:center;background:linear-gradient(180deg,#f3eaff 0%,#fbf5ff 60%,#fbfbff 100%)}
 .hero-inner{position:relative;z-index:5;max-width:780px;margin:0 auto}
 .eyebrow{display:inline-flex;padding:7px 14px;border-radius:999px;background:rgba(165,86,239,.1);color:var(--violet);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px;border:1px solid rgba(165,86,239,.16)}
 .hero h1{font-size:clamp(34px,5.5vw,58px);line-height:1.05;letter-spacing:-.03em;font-weight:900;margin-bottom:18px;color:var(--ink)}
 .hero h1 .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;background:linear-gradient(120deg,var(--violet),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .08em .12em 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
 .hero p.kicker{font-size:clamp(16px,1.6vw,19px);color:var(--ink-soft);max-width:620px;margin:0 auto 24px;line-height:1.55;font-weight:500}
 .byline{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:10px;align-items:center;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
 .byline .dot{width:4px;height:4px;border-radius:50%;background:var(--violet)}

 .container{max-width:1100px;margin:0 auto;padding:0 24px}
 .narrow{max-width:980px;margin:0 auto;padding:0 24px}

 .article{padding:60px 0 40px}
 .article p{font-size:17.5px;color:var(--ink-soft);line-height:1.8;margin-bottom:20px}
 .article h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;margin:36px 0 14px;color:var(--ink);line-height:1.2}
 .article h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:28px 0 10px;color:var(--ink)}
 .article ul, .article ol{margin:0 0 22px 22px;font-size:17.5px;color:var(--ink-soft);line-height:1.8}
 .article li{margin-bottom:8px}
 .article strong{color:var(--ink);font-weight:700}
 .article a{color:var(--violet);font-weight:600;border-bottom:1px solid rgba(165,86,239,.3);transition:border-color .2s}
 .article a:hover{border-bottom-color:var(--violet)}
 .pull-quote{margin:30px -10px;padding:26px 30px;border-left:4px solid var(--violet);background:linear-gradient(135deg,rgba(165,86,239,.05),rgba(236,72,153,.04));border-radius:14px;font-family:'Instrument Serif',serif;font-style:italic;font-size:21px;color:var(--ink);line-height:1.45;font-weight:400}
 @media(max-width:600px){.pull-quote{margin:30px 0}}
 .checklist{background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px 28px;margin:18px 0 26px}
 .checklist h3{margin-top:0!important;font-size:17px;color:var(--violet);text-transform:uppercase;letter-spacing:.05em;font-weight:800}
 .checklist ul{list-style:none;margin:14px 0 0!important;padding:0!important}
 .checklist li{position:relative;padding-left:28px;margin-bottom:10px;font-size:16px;color:var(--ink-soft);line-height:1.55}
 .checklist li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border:2px solid var(--violet);border-radius:4px;background:#fff}

 .related{padding:60px 0;background:linear-gradient(180deg,#fff,#f8fafc);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
 .related h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;margin-bottom:20px;color:var(--ink);text-align:center}
 .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}
 @media(max-width:820px){.related-grid{grid-template-columns:1fr}}
 .rel-card{display:block;background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
 .rel-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -22px rgba(165,86,239,.25)}
 .rel-card .tag{display:inline-block;padding:3px 9px;border-radius:999px;background:rgba(165,86,239,.1);color:var(--violet);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
 .rel-card h3{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;color:var(--ink);line-height:1.3}
 .rel-card p{font-size:14px;color:var(--muted);line-height:1.55}

 .cta-section{padding:60px 0 100px}
 .cta-card{position:relative;overflow:hidden;border-radius:28px;padding:60px 36px;text-align:center;background:linear-gradient(135deg,var(--violet) 0%,var(--pink) 70%,var(--amber) 130%);box-shadow:0 40px 80px -30px rgba(165,86,239,.4);color:#fff}
 .cta-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.25),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.2),transparent 40%);animation:rot 22s linear infinite}
 @keyframes rot{to{transform:rotate(1turn)}}
 .cta-card > *{position:relative;z-index:1}
 .cta-card h2{font-size:clamp(26px,3.6vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.03em;max-width:720px;margin:0 auto 14px}
 .cta-card h2 .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
 .cta-card p{font-size:16.5px;color:rgba(255,255,255,.94);max-width:540px;margin:0 auto 24px}
 .cta-btn{padding:15px 30px;border-radius:999px;background:#fff;color:var(--violet);font-weight:800;font-size:15.5px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 14px 40px rgba(0,0,0,.18);transition:transform .2s,box-shadow .2s}
 .cta-btn:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.28)}

 footer{background:linear-gradient(180deg,#0b1a34 0%,#050812 100%);color:#c8c6e3;padding:60px 0 30px;position:relative;overflow:hidden}
 footer::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(165,86,239,.18),transparent 60%);pointer-events:none}
 @media(max-width:820px){}
 .foot-brand p{font-size:14px;color:#a8a5c9;max-width:320px;margin-top:16px;line-height:1.55}
 .foot-col h5{font-size:13px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.08em;text-transform:uppercase}
 .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
 .foot-col a:hover{color:#fff}
 .foot-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#8a87a8;flex-wrap:wrap;gap:12px;position:relative;z-index:1}
 .js .reveal{opacity:0;transform:translateY(24px)}

/* ============================================================
   NEW LEAD FORM (lf-*), single source of truth for the form
   Used by: events.html + each /events/97-atar-*.html
   Pages opt in to per-workshop accent by setting --w-accent on
   :root (defaults: violet/pink). See _snippets/new-lead-form.html
   ============================================================ */
.lf-section{padding:80px 0 60px;background:linear-gradient(180deg,#FBFAFF 0%,#fff 60%,#fff 100%)}
.lf-container{max-width:760px;margin:0 auto;padding:0 24px}
.lf-head{text-align:center;max-width:620px;margin:0 auto 32px}
.lf-eyebrow{display:inline-block;padding:6px 12px;border-radius:99px;background:rgba(165,86,239,.1);color:var(--w-accent,#A556EF);font-weight:800;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.lf-title{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1;margin-bottom:10px}
.lf-title .accent{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--w-accent,#A556EF)}
.lf-sub{font-size:15.5px;color:var(--muted);line-height:1.6;margin:0}
.lf-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:36px;box-shadow:0 30px 80px -40px rgba(11,26,52,.18);position:relative;overflow:hidden}
.lf-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--w-accent,#A556EF)}
.lf-progress{display:flex;align-items:center;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.lf-prog-step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);transition:color .3s}
.lf-prog-step .pn{width:26px;height:26px;border-radius:50%;background:#eef0f7;display:flex;align-items:center;justify-content:center;font-size:12px;transition:background .3s,color .3s,box-shadow .3s}
.lf-prog-step.active{color:var(--w-accent,#A556EF)}
.lf-prog-step.active .pn{background:var(--w-accent,#A556EF);color:#fff;box-shadow:0 8px 20px color-mix(in srgb, var(--w-accent, #A556EF) 30%, transparent)}
.lf-prog-step.done .pn{background:#22c55e;color:#fff}
.lf-prog-bar{flex:1;height:2px;background:#eef0f7;border-radius:2px;min-width:14px}
.lf-prog-step.done + .lf-prog-bar{background:#22c55e}
@media(max-width:600px){.lf-progress{display:none}}
.lf-step{display:none;animation:lfStepFade .4s cubic-bezier(.2,.8,.2,1)}
.lf-step.active{display:block}
@keyframes lfStepFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lf-step-title{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)}
.lf-step-sub{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.lf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lf-field label{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.lf-field label .req{color:#ec4899;margin-left:2px}
.lf-field input,.lf-field select,.lf-field textarea{font-family:inherit;font-size:15px;color:var(--ink);padding:13px 14px;background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;transition:border-color .2s,background .2s,box-shadow .2s;width:100%}
.lf-field input:focus,.lf-field select:focus,.lf-field textarea:focus{outline:none;border-color:var(--w-accent,#A556EF);background:#fff;box-shadow:0 0 0 4px rgba(165,86,239,.1)}
.lf-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.lf-field-row{grid-template-columns:1fr}}
.lf-field-error{display:none;color:#dc2626;font-size:13px;margin-top:6px;font-weight:500;line-height:1.4}
.lf-field-error.show{display:block}
.lf-field input.is-invalid,.lf-field select.is-invalid{border-color:#dc2626 !important;background:#fef2f2;box-shadow:0 0 0 4px rgba(220,38,38,.12) !important}
.lf-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
@media(max-width:560px){.lf-chips{grid-template-columns:1fr}}
.lf-chip{position:relative;cursor:pointer}
.lf-chip input{position:absolute;opacity:0;pointer-events:none}
.lf-chip span{display:block;padding:14px 12px;background:#f8fafc;border:1.5px solid var(--border);border-radius:12px;text-align:center;font-size:14.5px;font-weight:700;color:var(--ink-soft);transition:all .2s}
.lf-chip span:hover{border-color:rgba(165,86,239,.4);background:#fff}
.lf-chip input:checked + span{background:linear-gradient(135deg,rgba(165,86,239,.08),rgba(236,72,153,.08));border-color:var(--w-accent,#A556EF);color:var(--w-accent,#A556EF);box-shadow:0 8px 20px -10px rgba(165,86,239,.4)}
.lf-chip-emoji{display:block;font-size:20px;margin-bottom:2px}
.lf-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:820px){.lf-checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.lf-checks{grid-template-columns:1fr}}
.lf-check{position:relative;cursor:pointer;min-width:0}
.lf-check input{position:absolute;opacity:0;pointer-events:none}
.lf-check > span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;min-height:84px;padding:12px 8px;background:#f8fafc;border:1.5px solid var(--border);border-radius:10px;text-align:center;font-size:13px;font-weight:600;color:#1e3a5f;line-height:1.3;transition:all .2s}
.lf-check > span:hover{border-color:rgba(165,86,239,.4);background:#fff}
.lf-check input:checked + span{background:linear-gradient(135deg,rgba(165,86,239,.08),rgba(236,72,153,.08));border-color:var(--w-accent,#A556EF);color:var(--w-accent,#A556EF);box-shadow:0 6px 16px -8px rgba(165,86,239,.4)}
.lf-check-emoji{display:block;font-size:18px;line-height:1;margin-bottom:2px}
.lf-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}
.lf-btn-back{padding:11px 20px;border-radius:999px;background:transparent;color:var(--muted);font-weight:600;font-size:14.5px;border:none;cursor:pointer;transition:color .2s}
.lf-btn-back:hover{color:var(--ink)}
.lf-btn-back[disabled]{opacity:0;pointer-events:none}
.lf-btn-next{padding:13px 26px;border-radius:999px;background:var(--w-accent,#A556EF);color:#fff;font-weight:700;font-size:15px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:0 12px 28px color-mix(in srgb, var(--w-accent, #A556EF) 30%, transparent);transition:transform .2s,box-shadow .2s,filter .2s}
.lf-btn-next:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 16px 36px color-mix(in srgb, var(--w-accent, #A556EF) 45%, transparent)}
.lf-foot{text-align:center;font-size:12.5px;color:var(--muted);margin-top:14px}
.lf-success{display:none;text-align:center;padding:50px 20px}
.lf-success.show{display:block;animation:lfFadeIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes lfFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.lf-success-ic{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#10b981);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:36px;margin-bottom:20px;box-shadow:0 16px 40px rgba(34,197,94,.35);animation:lfSuccessPop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes lfSuccessPop{0%{transform:scale(0) rotate(-90deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.lf-success h3{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px;color:var(--ink)}
.lf-success p{font-size:15px;color:var(--muted);max-width:460px;margin:0 auto;line-height:1.55}
.lf-toast{position:fixed;top:84px;left:50%;transform:translateX(-50%) translateY(-12px);background:linear-gradient(135deg,#ec4899,var(--w-accent,#A556EF));color:#fff;padding:14px 20px;border-radius:14px;box-shadow:0 18px 48px -12px rgba(236,72,153,.45),0 4px 12px rgba(11,26,52,.12);font-weight:600;font-size:14.5px;line-height:1.4;display:flex;align-items:flex-start;gap:10px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1);max-width:min(420px,calc(100vw - 24px));border:1px solid rgba(255,255,255,.18)}
.lf-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.lf-toast-ic{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.lf-toast-msg{flex:1}
.lf-toast-close{background:transparent;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;opacity:.8;padding:0;margin-left:6px}
.lf-toast-close:hover{opacity:1}