/* ============================================================
   School Magic Assemblies — schoolmagicassemblies.com
   Built 2026-08-09. Plain HTML and CSS. No frameworks, no
   webfonts, nothing loaded from another company's server
   except the Mago booking form.

   DELIBERATELY BRIGHTER THAN carrollbaker.com. That site sells
   a corporate evening and can afford to look like a theater.
   A principal is deciding whether to give up 45 minutes of
   instruction time, in daylight, for children. Dark and moody
   reads as "night club" to that buyer. This is light, open and
   plainly organised, with Carroll's red and gold as accents
   rather than as the whole mood.
   ============================================================ */

:root{
  --red:#E0121F;
  --red-dark:#B60D18;
  --gold:#E3BC3B;
  --gold-deep:#C79A16;
  --navy:#22314A;          /* friendlier than the corporate charcoal */
  --navy-deep:#18243A;
  --ink:#26262B;
  --muted:#5A5A66;
  --line:#E4E1DA;
  --cream:#FBF9F4;
  --sky:#EEF4FA;           /* soft band colour, reads as "school" */
  --white:#FFFFFF;

  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --wrap:1140px;
  --shadow-sm:0 1px 3px rgba(25,25,35,.07),0 6px 16px -8px rgba(25,25,35,.16);
  --shadow-md:0 2px 6px rgba(25,25,35,.09),0 18px 40px -20px rgba(25,25,35,.30);
  --shadow-lg:0 4px 12px rgba(25,25,35,.10),0 30px 60px -25px rgba(25,25,35,.40);

  /* One accent per programme, so a returning visitor knows which
     page they are on before reading the heading. */
  --choices:#7A4FB6;
  --standstrong:#1E88A8;
  --reading:#D2691E;
  --math:#2E8B57;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:17.5px;line-height:1.68;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:800px;margin-left:auto;margin-right:auto}

h1,h2,h3{font-family:var(--display);line-height:1.14;margin:0 0 .5em;letter-spacing:-.022em}
h1{font-size:clamp(2.15rem,5.4vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.65rem,3.5vw,2.5rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.15em}
.lede{font-size:clamp(1.08rem,1.9vw,1.32rem);color:var(--muted);line-height:1.62}

.skip{position:absolute;left:-9999px;background:var(--gold);color:#1A1A1A;padding:12px 20px;
  font-weight:700;z-index:200}
.skip:focus{left:12px;top:12px}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:13px 0;transition:padding .25s ease;position:relative}
.site-header.scrolled .header-inner{padding:7px 0}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:50px;width:auto;transition:height .25s ease}
.site-header.scrolled .brand img{height:40px}
.brand-text{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.15;
  color:var(--navy);letter-spacing:-.02em}
.brand-text span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--red);margin-top:2px}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:7px;
  padding:9px 13px;cursor:pointer;font:inherit;font-weight:600;color:var(--ink)}
.nav{display:flex;align-items:center;gap:24px}
.nav a{color:var(--ink);font-weight:600;font-size:.94rem;position:relative;padding:4px 0;
  white-space:nowrap;text-decoration:none}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);
  transition:width .22s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{width:100%}
.nav a[aria-current="page"]{color:var(--red)}
.nav-phone{font-weight:800;color:var(--navy) !important;font-size:.98rem}
.nav-phone::after{display:none}
.nav-cta{background:var(--red);color:#fff !important;padding:11px 20px;border-radius:6px;
  font-weight:700;transition:background .2s,transform .15s,box-shadow .2s}
.nav-cta:hover{background:var(--red-dark);text-decoration:none;transform:translateY(-1px);
  box-shadow:0 8px 20px -7px rgba(224,18,31,.6)}
.nav-cta::after{display:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-block;font-weight:700;font-size:1.02rem;padding:16px 32px;border-radius:6px;
  border:2px solid transparent;cursor:pointer;font-family:var(--body);
  transition:transform .16s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 12px 28px -9px rgba(224,18,31,.62)}
.btn-gold{background:var(--gold);color:#1A1A1A}
.btn-gold:hover{box-shadow:0 12px 28px -9px rgba(227,188,59,.65)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline{background:transparent;color:var(--red);border-color:var(--red)}
.btn-outline:hover{background:var(--red);color:#fff}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:.9;
  transform:scale(1.07);animation:heroDrift 20s ease-out forwards}
@keyframes heroDrift{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(24,36,58,.90) 0%,rgba(24,36,58,.72) 36%,rgba(24,36,58,.28) 70%,rgba(24,36,58,.10) 100%),
  linear-gradient(180deg,rgba(24,36,58,.26) 0%,rgba(24,36,58,.04) 44%,rgba(24,36,58,.46) 100%)}
.hero-inner{position:relative;z-index:2;padding:clamp(70px,11vw,140px) 0 clamp(62px,9vw,116px);
  max-width:830px}
.hero h1{color:#fff;margin-bottom:.32em;text-shadow:0 2px 18px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.55)}
.hero h1 .accent{color:var(--gold);display:block}
.hero .lede{color:rgba(255,255,255,.95);font-size:clamp(1.1rem,2vw,1.38rem);max-width:660px;
  text-shadow:0 1px 12px rgba(0,0,0,.78)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-eyebrow{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  padding:8px 16px;border-radius:999px;margin-bottom:18px;backdrop-filter:blur(4px)}
@media(max-width:760px){
  .hero::after{background:linear-gradient(180deg,rgba(24,36,58,.66) 0%,rgba(24,36,58,.58) 45%,rgba(24,36,58,.80) 100%)}
}

/* Slim hero for inner pages */
.hero-slim .hero-inner{padding:clamp(54px,8vw,96px) 0 clamp(48px,7vw,84px)}

/* Hero variant: text to the RIGHT, for photos whose subject sits on the left.
   Used on Stand Up, Stand Strong, where the child's expression is the whole point
   of the picture and the default left-aligned text sat straight over her face.
   The gradient has to mirror too. Moving the text without moving the dark side
   would leave white type on a bright cafeteria floor. */
/* NOTE: .hero-inner is the SAME element as .wrap (class="wrap hero-inner"), and
   .wrap carries margin:0 auto. So margin-left:auto alone just re-centers it.
   Widen the block back to the normal page column and push the TEXT across with
   padding instead, which keeps its right edge lined up with every section below. */
.hero-right .hero-inner{max-width:var(--wrap);padding-left:clamp(0px,26vw,430px)}
.hero-right.hero::after{background:
  linear-gradient(270deg,rgba(24,36,58,.90) 0%,rgba(24,36,58,.72) 36%,rgba(24,36,58,.28) 70%,rgba(24,36,58,.10) 100%),
  linear-gradient(180deg,rgba(24,36,58,.26) 0%,rgba(24,36,58,.04) 44%,rgba(24,36,58,.46) 100%)}
/* Hold the crop on her, not on the middle of the room. */
.hero-right .hero-media img{object-position:28% 42%}
@media(max-width:760px){
  /* On a phone the hero stacks and the text spans the full width, so the side
     gradient is no use. Restore the plain top-to-bottom one. */
  /* Phones keep the same 26vw indent as everywhere else (about 100px at 390px
     wide). Tried reducing it to 15vw and pulling the buttons back with a negative
     margin: the headline landed on her face again and the buttons broke the page
     gutter. The indent is doing real work here, so leave it alone. */
  .hero-right.hero::after{background:linear-gradient(180deg,rgba(24,36,58,.66) 0%,rgba(24,36,58,.58) 45%,rgba(24,36,58,.80) 100%)}
}

/* ============================================================
   MARQUEE BULBS — Carroll's brand, drawn in CSS
   ============================================================ */
.bulbs{height:12px;background-image:radial-gradient(circle,var(--gold) 0 2.5px,transparent 3px);
  background-size:28px 12px;background-position:center;opacity:.92}
@media (prefers-reduced-motion:no-preference){.bulbs{animation:bulbGlow 2.6s steps(2) infinite}}
@keyframes bulbGlow{0%,100%{opacity:.92}50%{opacity:.4}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:clamp(56px,8vw,100px) 0}
.section-tight{padding:clamp(38px,5.5vw,62px) 0}
.section-cream{background:var(--cream)}
.section-sky{background:var(--sky)}
.section-dark{background:var(--navy-deep);color:#fff}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p,.section-dark li{color:rgba(255,255,255,.85)}
.section-dark .lede{color:rgba(255,255,255,.86)}
.center{text-align:center}
.section-head{max-width:780px;margin-bottom:46px}
.center .section-head,.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--red);margin-bottom:12px}
.section-dark .eyebrow{color:var(--gold)}

/* ============================================================
   PROGRAMME CARDS
   ============================================================ */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.prog{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;
  transition:transform .26s cubic-bezier(.22,.8,.3,1),box-shadow .26s}
.prog:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);text-decoration:none}
.prog .bar{height:6px;background:var(--red);transform-origin:left;transition:transform .3s}
.prog:hover .bar{transform:scaleX(1)}
.prog .pad{padding:26px 26px 28px;flex:1;display:flex;flex-direction:column}
.prog h3{margin-bottom:.35em;font-size:1.24rem}
.prog .tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;padding:5px 11px;border-radius:999px;margin-bottom:14px;align-self:flex-start;
  background:rgba(0,0,0,.05);color:var(--muted)}
.prog p{color:var(--muted);font-size:1rem;margin-bottom:1em}
.prog .more{margin-top:auto;font-weight:700;color:var(--red);font-size:.98rem;
  display:inline-flex;align-items:center;gap:7px}
.prog .more::after{content:"\2192";transition:transform .22s}
.prog:hover .more::after{transform:translateX(5px)}

.prog-choices .bar{background:var(--choices)} .prog-choices .tag{background:rgba(122,79,182,.12);color:var(--choices)} .prog-choices .more{color:var(--choices)}
.prog-standstrong .bar{background:var(--standstrong)} .prog-standstrong .tag{background:rgba(30,136,168,.12);color:var(--standstrong)} .prog-standstrong .more{color:var(--standstrong)}
.prog-reading .bar{background:var(--reading)} .prog-reading .tag{background:rgba(210,105,30,.12);color:var(--reading)} .prog-reading .more{color:var(--reading)}
.prog-math .bar{background:var(--math)} .prog-math .tag{background:rgba(46,139,87,.12);color:var(--math)} .prog-math .more{color:var(--math)}

/* ============================================================
   PLAIN CARD
   ============================================================ */
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:28px 26px;
  box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .28s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card:hover::before{transform:scaleY(1)}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.section-dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.section-dark .card p{color:rgba(255,255,255,.82)}

/* Numbered steps */
.step .num{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:var(--red);color:#fff;font-weight:800;font-size:1.05rem;
  margin-bottom:14px;font-family:var(--display)}
.section-dark .step .num{background:var(--gold);color:#1A1A1A}

/* ============================================================
   TAKEAWAYS — the "what students walk away with" list
   ============================================================ */
.takeaways{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.takeaways li{position:relative;padding:16px 18px 16px 54px;background:#fff;border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.takeaways li:hover{transform:translateX(4px);box-shadow:var(--shadow-md)}
.takeaways li::before{content:"\2713";position:absolute;left:18px;top:16px;width:24px;height:24px;
  border-radius:50%;background:var(--red);color:#fff;font-size:.82rem;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.section-dark .takeaways li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}

.ticks{list-style:none;padding:0;margin:0 0 1.3em}
.ticks li{position:relative;padding-left:30px;margin-bottom:13px}
.ticks li::before{content:"";position:absolute;left:6px;top:.6em;width:9px;height:9px;
  background:var(--red);transform:rotate(45deg)}
.section-dark .ticks li::before{background:var(--gold)}

/* ============================================================
   QUOTES
   ============================================================ */
.quote{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:9px;
  padding:26px 28px;box-shadow:var(--shadow-sm);transition:transform .22s,box-shadow .22s}
.quote:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.quote p{font-size:1.03rem;line-height:1.6;margin-bottom:.9em}
.quote cite{font-style:normal;font-weight:700;color:var(--navy);font-size:.95rem;display:block}
.quote cite span{display:block;font-weight:500;color:var(--muted);font-size:.87rem;margin-top:3px}
.section-dark .quote{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);
  border-left-color:var(--gold)}
.section-dark .quote p{color:rgba(255,255,255,.93)}
.section-dark .quote cite{color:var(--gold)}
.section-dark .quote cite span{color:rgba(255,255,255,.62)}

.quote-hero{border:none;background:none;box-shadow:none;text-align:center;max-width:840px;
  margin:0 auto;padding:0}
.quote-hero:hover{transform:none;box-shadow:none}
.quote-hero p{font-family:var(--display);font-size:clamp(1.3rem,2.9vw,2rem);line-height:1.36;
  font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.section-dark .quote-hero p{color:#fff}

/* ============================================================
   BONUS PANEL — teacher guide / booklet
   ============================================================ */
.bonus{border:2px dashed var(--gold);background:linear-gradient(180deg,rgba(227,188,59,.10),rgba(227,188,59,.02));
  border-radius:12px;padding:32px 30px;position:relative}
.bonus .flag{display:inline-block;background:var(--gold);color:#1A1A1A;font-family:var(--display);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;padding:7px 15px;
  border-radius:999px;margin-bottom:16px}
.bonus h3{font-size:1.35rem}
.bonus p:last-child{margin-bottom:0}
.section-dark .bonus{background:rgba(227,188,59,.08)}

/* ============================================================
   STATS
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px;text-align:center}
.stat-num{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.1rem);font-weight:800;
  color:var(--gold);line-height:1;letter-spacing:-.03em}
.stat-label{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.74);margin-top:10px}

/* ============================================================
   SPLIT
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,62px);align-items:center}
.split img{border-radius:12px;box-shadow:var(--shadow-md)}
@media(max-width:820px){.split{grid-template-columns:1fr}}

/* ============================================================
   VIDEO
   Responsive 16:9 wrapper. The iframe is Vimeo's, which makes it
   the second thing on the site loading from another company
   (the booking form is the first). Unavoidable for video.
   ============================================================ */
.video{position:relative;width:100%;padding-top:56.25%;border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow-lg);background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-caption{margin:16px 0 0;font-size:.94rem;color:var(--muted);text-align:center}
.section-dark .video-caption{color:rgba(255,255,255,.68)}

/* ============================================================
   LONG-SERVICE PANEL — the 28 year Upper Arlington relationship
   ============================================================ */
.tenure{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;
  border-radius:14px;padding:clamp(32px,5vw,52px);box-shadow:var(--shadow-lg);position:relative;
  overflow:hidden}
.tenure::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--red),var(--gold))}
.tenure h2{color:#fff}
.tenure p{color:rgba(255,255,255,.86)}
.tenure .big{font-family:var(--display);font-size:clamp(3rem,9vw,5.4rem);font-weight:800;
  line-height:.95;color:var(--gold);letter-spacing:-.04em;display:block}
.tenure .big-label{font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:rgba(255,255,255,.72);margin-top:8px;display:block}
.schools{list-style:none;padding:0;margin:24px 0 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.schools li{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);
  border-radius:8px;padding:14px 16px;font-weight:700;font-size:1rem;color:#fff;
  transition:background .22s,transform .22s}
.schools li:hover{background:rgba(227,188,59,.18);transform:translateY(-3px)}
.schools li span{display:block;font-weight:500;font-size:.84rem;color:rgba(255,255,255,.66);
  margin-top:3px}
@media (prefers-reduced-motion:reduce){.schools li:hover{transform:none}}

/* ============================================================
   BOOKING FORM
   ============================================================ */
.form-shell{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
  box-shadow:var(--shadow-lg);overflow:hidden;max-width:820px;margin:0 auto}
.form-shell iframe{width:100%;border:0;display:block}
.form-fallback{padding:42px 26px;text-align:center;background:var(--cream);border-radius:8px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin:0 auto;display:grid;gap:14px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .22s}
.faq details[open]{box-shadow:var(--shadow-md)}
.faq summary{padding:20px 24px;font-weight:700;font-size:1.06rem;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--red);flex:none;
  transition:transform .25s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:0 24px 22px;color:var(--muted)}
.faq .answer p:last-child{margin-bottom:0}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--navy);color:rgba(255,255,255,.74);padding:58px 0 30px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:36px;
  margin-bottom:36px}
.site-footer h4{font-family:var(--display);color:#fff;font-size:1rem;margin:0 0 14px}
.site-footer a{color:rgba(255,255,255,.8)}
.site-footer a:hover{color:var(--gold);text-decoration:none}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:9px}
.footer-phone{font-family:var(--display);font-size:1.5rem;font-weight:800;color:#fff;display:block;
  margin-bottom:6px}
.footer-phone:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:22px;display:flex;
  flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem;color:rgba(255,255,255,.56)}

/* ============================================================
   ANIMATIONS
   Everything is opt-in via data-anim and applied once on first
   view. The .no-js rule below means content is NEVER hidden if
   JavaScript fails. An animation must not be able to blank a page.
   ============================================================ */
[data-anim]{opacity:0;transform:translateY(24px);
  transition:opacity .62s cubic-bezier(.22,.8,.3,1),transform .62s cubic-bezier(.22,.8,.3,1)}
[data-anim].is-in{opacity:1;transform:none}
[data-anim="left"]{transform:translateX(-28px)}
[data-anim="right"]{transform:translateX(28px)}
[data-anim="zoom"]{transform:scale(.94)}
[data-anim="left"].is-in,[data-anim="right"].is-in,[data-anim="zoom"].is-in{transform:none}
[data-delay="1"]{transition-delay:.08s}
[data-delay="2"]{transition-delay:.16s}
[data-delay="3"]{transition-delay:.24s}
[data-delay="4"]{transition-delay:.32s}
[data-delay="5"]{transition-delay:.40s}
.no-js [data-anim]{opacity:1;transform:none}

/* Gentle float on decorative art */
@media (prefers-reduced-motion:no-preference){
  .float{animation:float 6s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-anim]{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-media img{animation:none;transform:none}
  .bulbs{animation:none}
  .card:hover,.quote:hover,.prog:hover,.takeaways li:hover,.btn:hover,.nav-cta:hover{transform:none}
}

/* ============================================================
   PHONE AND TABLET
   ============================================================ */
@media(max-width:920px){
  .nav-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav a::after{display:none}
  .nav-cta{text-align:center;margin-top:14px;border-bottom:none}
  .nav-phone{border-bottom:none}
}
@media(max-width:560px){
  body{font-size:16.5px}
  .wrap{padding:0 18px}
  .hero-actions .btn{width:100%;text-align:center}
  .card,.quote,.prog .pad{padding:22px 20px}
  .bonus{padding:26px 20px}
}