/* ==========================================================================
   HOME PAGE - elementaryschoolassemblies.com
   Upload to wp-content/uploads/2026/09/ and link it ONCE from WIDGET-1.
   Do NOT paste this into an Elementor HTML widget: a <style> tag in the
   payload makes the save fail with a 403.

   Everything is scoped to .hm-page and every class is prefixed hm-, so this
   file cannot touch any other page on the site. The mockup styled `body`,
   `img`, `a` and `h1` directly, which on a live page would have repainted the
   header, the nav and the footer.
   ========================================================================== */
.hm-page{width:100%;max-width:100%;margin:0;min-width:0;}


/* ============================================================
   CRIS JOHNSON - AMAZING SCHOOL ASSEMBLIES - home page mockup
   Palette sampled from the logo artwork. The rainbow in the
   wordmark is the site's taxonomy: each program category owns
   one of its colors, so the grid reads by color as well as name.
   Single theme on purpose - a marketing page looks the same for
   everyone, so every color is painted explicitly.
   ============================================================ */
.hm-page{
  --navy:#0B1234; --navy2:#16204C; --ink:#241F3A; --muted:#62608A;
  --paper:#FFFDF7; --paper2:#F5F1FF; --rule:#E4DDF3;
  --orange:#F07800; --gold:#D8A800; --pink:#F01890;
  --green:#4FAE12; --green-b:#60D830; --purple:#7800D8; --blue:#0078F0;
  --cta:#F07800; --cta-hov:#C96200;
  /* Button LABEL is dark, not white: white on this orange measures 2.84:1 and
     fails. #1B1206 clears 6.51:1 and is what the middle school, spooky and
     Haunted Christmas stylesheets have always used. */
  --cta-ink:#1B1206;
  --f-disp:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --f-lab:"Bungee","Arial Black",sans-serif;
  --f-body:"Nunito","Segoe UI",system-ui,sans-serif;
  --read:68ch;
}.hm-page,.hm-page *{box-sizing:border-box;}.hm-page{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;}.hm-page img{max-width:100%;height:auto;display:block;}.hm-page a{color:var(--purple);}.hm-page :focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:5px;}.hm-page h1,.hm-page h2,.hm-page h3,.hm-page h4{font-family:var(--f-disp);color:var(--navy);margin:0;line-height:1.09;text-wrap:balance;}.hm-page h1{font-size:clamp(31px,4.9vw,57px);font-weight:800;letter-spacing:-.012em;}.hm-page h2{font-size:clamp(25px,3.3vw,40px);font-weight:800;margin:0 0 .45em;}.hm-page h3{font-size:clamp(18px,2vw,24px);font-weight:700;margin:0 0 .35em;}.hm-page p{margin:0 0 1.05em;}.hm-page p:last-child{margin-bottom:0;}
/* Two-tone headings. Every H1 and H2 opens in the dark ink and finishes in
   the section's accent, so the eye is pulled along the whole line instead of
   stopping after three words. Same trick the hero H1 already used. */
.hm-page .hm-hl{color:var(--orange);}.hm-page .hm-alt .hm-hl{color:var(--purple);}.hm-page .hm-sec-purple .hm-hl{color:var(--pink);}.hm-page .hm-dark h2,.hm-page .hm-dark h3{color:#fff;}.hm-page .hm-dark .hm-lab{color:var(--gold);}.hm-page .hm-dark .hm-hl{color:var(--gold);}.hm-page .hm-report .hm-hl{color:var(--gold);}.hm-page .hm-guarwrap .hm-hl{color:var(--purple);}.hm-page .hm-feature h2{color:#fff;}.hm-page .hm-feature .hm-lab{color:var(--gold);}.hm-page .hm-feature .hm-hl{color:var(--gold);}
/* Optional 3-D lift on the display type - the same hard bottom edge the
   buttons carry, so it reads as one design language rather than a text
   effect bolted on. Toggle it in the control at the bottom right. */
.hm-page h1,.hm-page h2{text-shadow:0 2px 0 rgba(11,18,52,.15),0 5px 14px rgba(11,18,52,.13);}.hm-page .hm-dark h2,.hm-page .hm-report h2,.hm-page .hm-feature h2{text-shadow:0 2px 0 rgba(0,0,0,.36),0 6px 16px rgba(0,0,0,.32);}.hm-page .hm-guarwrap h2{text-shadow:0 2px 0 rgba(122,92,0,.3);}.hm-page .hm-lab{font-family:var(--f-lab);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin:0 0 14px;display:block;}.hm-page .hm-alt .hm-lab{color:var(--pink);}.hm-page .hm-sec{padding:clamp(46px,6vw,84px) clamp(20px,5vw,40px);}.hm-page .hm-in{max-width:1140px;margin-inline:auto;}.hm-page .hm-wide{max-width:1320px;margin-inline:auto;}.hm-page .hm-read{max-width:var(--read);}.hm-page .hm-alt{background:var(--paper2);}.hm-page .hm-dark{background:var(--navy);color:#EDEAFB;}.hm-page .hm-btn{display:inline-flex;align-items:center;gap:9px;background:var(--cta);color:var(--cta-ink);font-family:var(--f-disp);font-weight:800;font-size:1.02rem;padding:14px 28px;border-radius:999px;border:0;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--cta-hov);transition:transform .12s ease,box-shadow .12s ease;}.hm-page .hm-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--cta-hov);}.hm-page .hm-btn:active{transform:translateY(1px);box-shadow:0 2px 0 var(--cta-hov);}.hm-page .hm-btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2.5px var(--navy);}.hm-page .hm-btn-ghost:hover{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 2.5px var(--navy);}.hm-page .hm-btn-lite{background:#fff;color:var(--navy);box-shadow:0 3px 0 rgba(0,0,0,.25);}.hm-page .hm-btn-purple{background:var(--purple);box-shadow:0 3px 0 #5A00A4;}.hm-page .hm-btn-purple:hover{box-shadow:0 5px 0 #5A00A4;}
/* bounce: transform only, resting state applied by JS, so nothing is ever hidden */
.hm-page .hm-js-anim .hm-pop{transform:scale(.965);transition:transform .55s cubic-bezier(.2,.85,.3,1.25);}.hm-page .hm-js-anim .hm-pop.hm-in{transform:none;}@media (prefers-reduced-motion: reduce){.hm-page .hm-js-anim .hm-pop{transform:none;transition:none;}.hm-page .hm-marquee-track,.hm-page .hm-trail{animation:none !important;}.hm-page .hm-tmq{overflow-x:auto;}
}
/* ---------- hero ----------
   Two columns from 900px: the whole text block left, the studio shot right.
   Cris asked for the site logo here even though the header already carries one
   - his call, and a good one: somebody landing from a search result gets the
   brand without scrolling.

   The photograph is set CONTAIN on a white card, never cover. It is shot on
   white, so the card reads as a cut-out, and cropping it would take the top off
   his hat. Same treatment as the four show pages.

   Below 900px the photo comes FIRST, so a phone opens on him rather than on a
   wall of type. And the headline stays inside the left column rather than
   spanning both - spanning it was tried on the dinosaur page and put back,
   because across a 1180px measure the line breaks awkwardly and sits in a wide
   empty box. */
.hm-page .hm-hero{background:radial-gradient(115% 80% at 84% 4%,rgba(240,24,144,.14) 0%,rgba(240,24,144,0) 55%),radial-gradient(95% 75% at 8% 96%,rgba(0,120,240,.14) 0%,rgba(0,120,240,0) 60%),var(--paper);padding:clamp(36px,4.8vw,62px) clamp(20px,5vw,40px) clamp(40px,5vw,64px);text-align:center;}.hm-page .hm-hero-grid{max-width:1180px;margin-inline:auto;display:grid;gap:clamp(22px,3.2vw,44px);align-items:center;}.hm-page .hm-hero-logo{width:min(300px,72%);margin:0 auto 20px;display:block;}.hm-page .hm-hero-shot{margin:0;order:-1;}.hm-page .hm-hero-shot.hm-studio{background:radial-gradient(80% 62% at 50% 46%,rgba(240,24,144,.16) 0%,transparent 72%),#fff;border-radius:26px;border:5px solid var(--orange);padding:10px;box-shadow:0 18px 44px rgba(11,18,52,.2);}.hm-page .hm-hero-shot.hm-studio img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:18px;display:block;}@media(min-width:900px){.hm-page .hm-hero{text-align:left;}.hm-page .hm-hero-grid{grid-template-columns:1.08fr .92fr;}.hm-page .hm-hero-shot{order:0;}.hm-page .hm-hero-logo{margin-left:0;margin-right:0;}.hm-page .hm-hero .hm-hero-sub{margin-left:0;margin-right:0;}.hm-page .hm-hero .hm-chips,.hm-page .hm-hero .hm-hero-cta{justify-content:flex-start;}
}.hm-page .hm-hero-sub{font-family:var(--f-disp);font-weight:700;font-size:clamp(17px,2.2vw,24px);color:var(--purple);margin:18px auto 0;max-width:40ch;}.hm-page .hm-chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:0;margin:22px 0 0;}.hm-page .hm-chips li{font-family:var(--f-lab);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--navy);color:#fff;padding:7px 15px;border-radius:999px;}.hm-page .hm-chips li:nth-child(2){background:var(--pink);}.hm-page .hm-chips li:nth-child(3){background:var(--blue);}.hm-page .hm-chips li:nth-child(4){background:var(--green);}.hm-page .hm-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px;}.hm-page .hm-hero-fine{margin-top:15px;font-size:.92rem;color:var(--muted);}.hm-page .hm-sig{background:var(--navy);color:#fff;font-family:var(--f-lab);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:15px 20px;line-height:2;}.hm-page .hm-sig b{color:var(--gold);}.hm-page .hm-sig span{opacity:.4;margin:0 9px;}
/* ---------- marquee ---------- */
.hm-page .hm-marquee{overflow:hidden;padding:clamp(26px,3.4vw,40px) 0;background:var(--navy);position:relative;}.hm-page .hm-marquee::before,.hm-page .hm-marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;}.hm-page .hm-marquee::before{left:0;background:linear-gradient(90deg,var(--navy),rgba(11,18,52,0));}.hm-page .hm-marquee::after{right:0;background:linear-gradient(270deg,var(--navy),rgba(11,18,52,0));}
/* Margin rather than gap: a 2N-item track has 2N-1 gaps, so a -50%
   translate lands half a gap short and the loop visibly jumps. Margin
   belongs to the item, so half the track is exactly N items. */
.hm-page .hm-marquee-track{display:flex;width:max-content;animation:hm-slide 58s linear infinite;}.hm-page .hm-marquee:hover .hm-marquee-track{animation-play-state:paused;}.hm-page .hm-marquee-track img{height:clamp(150px,19vw,236px);width:auto;margin-right:16px;border-radius:14px;border:3px solid rgba(255,255,255,.14);}@keyframes hm-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}.hm-page .hm-marquee-cap{text-align:center;font-family:var(--f-lab);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);padding-top:18px;}
/* ---------- two-column text + picture ---------- */
.hm-page .hm-split{display:grid;gap:clamp(26px,3.6vw,48px);align-items:center;}@media(min-width:860px){.hm-page .hm-split{grid-template-columns:1.06fr .94fr;}.hm-page .hm-split.hm-flip>figure{order:-1;}}.hm-page .hm-split figure{margin:0;}
/* A single picture beside a long column of copy leaves a lot of dead space -
   Cris's note. Two stacked pictures fill the measure instead. */
.hm-page .hm-split figure.hm-two{display:grid;gap:16px;align-content:center;}.hm-page .hm-split img{width:100%;border-radius:22px;border:4px solid #fff;box-shadow:0 12px 30px rgba(36,31,58,.16);}
/* ---------- program grid ---------- */
.hm-page .hm-progs{display:grid;gap:16px;margin-top:32px;}@media(min-width:620px){.hm-page .hm-progs{grid-template-columns:1fr 1fr;}}@media(min-width:980px){.hm-page .hm-progs{grid-template-columns:repeat(3,1fr);}}.hm-page .hm-prog{background:#fff;border:2px solid var(--rule);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .14s ease,box-shadow .14s ease;}.hm-page .hm-prog:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(36,31,58,.15);}.hm-page .hm-prog .hm-art{aspect-ratio:16/11;display:grid;place-items:center;padding:16px;}
/* the inline width on each logo is computed in prep_logos.hm-py so that every
   card carries the same amount of ink - a wide wordmark and a tall badge
   look the same size, which is what was making the grid feel mishmashed */
.hm-page .hm-prog .hm-art img{max-height:100%;max-width:100%;width:auto;object-fit:contain;}.hm-page .hm-prog .hm-body{padding:17px 19px 19px;flex:1;}.hm-page .hm-prog .hm-cat{font-family:var(--f-lab);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;margin-bottom:7px;display:block;}.hm-page .hm-prog h3{font-size:1.1rem;margin-bottom:5px;}.hm-page .hm-prog p{font-size:.93rem;color:var(--muted);margin:0;}.hm-page .hm-c-purple .hm-art{background:#F2E6FF;}.hm-page .hm-c-purple .hm-cat{color:var(--purple);}.hm-page .hm-c-pink   .hm-art{background:#FFE6F4;}.hm-page .hm-c-pink .hm-cat{color:var(--pink);}.hm-page .hm-c-blue   .hm-art{background:#E1F0FF;}.hm-page .hm-c-blue .hm-cat{color:var(--blue);}.hm-page .hm-c-orange .hm-art{background:#FFEEDC;}.hm-page .hm-c-orange .hm-cat{color:#C25E00;}.hm-page .hm-c-green  .hm-art{background:#E9FADB;}.hm-page .hm-c-green .hm-cat{color:var(--green);}.hm-page .hm-c-gold   .hm-art{background:#FFF4D2;}.hm-page .hm-c-gold .hm-cat{color:#9C7A00;}
/* ---------- nine reasons ---------- */
.hm-page .hm-reasons{display:grid;gap:14px;margin-top:34px;counter-reset:r;}@media(min-width:700px){.hm-page .hm-reasons{grid-template-columns:1fr 1fr;}}@media(min-width:1040px){.hm-page .hm-reasons{grid-template-columns:repeat(3,1fr);}}.hm-page .hm-reason{background:#fff;border:2px solid var(--rule);border-radius:16px;padding:22px 21px 20px;position:relative;}.hm-page .hm-reason::before{counter-increment:r;content:counter(r);position:absolute;top:-15px;left:19px;width:38px;height:38px;border-radius:50%;background:var(--pink);color:#fff;font-family:var(--f-disp);font-weight:800;font-size:1.08rem;display:grid;place-items:center;box-shadow:0 3px 0 #B31069;}.hm-page .hm-reason h3{font-size:1.03rem;margin:10px 0 5px;}.hm-page .hm-reason p{font-size:.93rem;color:var(--muted);margin:0;}
/* ---------- video ---------- *//* The video slot was a placeholder card reading "drop your embed in here". It
   now holds his two real home-page videos, embedded so they play ON the page -
   the same decision as the show pages, and for the same reason: the job of this
   page is to keep somebody here until they fill the form in. */
.hm-page .hm-vids{display:grid;gap:20px;max-width:900px;margin-inline:auto;}@media(min-width:820px){.hm-page .hm-vids{grid-template-columns:1fr 1fr;}}.hm-page .hm-vid{position:relative;border-radius:20px;overflow:hidden;border:4px solid var(--gold);background:var(--navy2);display:block;text-decoration:none;}.hm-page .hm-vid iframe{display:block;width:100%;aspect-ratio:16/9;border:0;}.hm-page .hm-vid .hm-frame{aspect-ratio:16/9;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy2),var(--navy));text-align:center;padding:26px;}.hm-page .hm-vid .hm-play{width:82px;height:82px;border-radius:50%;background:var(--cta);box-shadow:0 4px 0 var(--cta-hov);display:grid;place-items:center;margin:0 auto 16px;transition:transform .14s ease;}.hm-page .hm-vid:hover .hm-play{transform:scale(1.08);}.hm-page .hm-vid .hm-play::after{content:"";border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent #fff;margin-left:6px;}.hm-page .hm-vid .hm-frame b{display:block;font-family:var(--f-disp);font-size:1.2rem;color:#fff;}.hm-page .hm-vid .hm-frame span{display:block;font-size:.92rem;color:rgba(237,234,251,.66);margin-top:5px;}
/* ---------- feature quote, two columns ---------- */
.hm-page .hm-feature{background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;padding:clamp(44px,6vw,80px) clamp(20px,5vw,40px);}.hm-page .hm-fgrid2{display:grid;gap:clamp(26px,3.6vw,48px);align-items:center;}@media(min-width:880px){.hm-page .hm-fgrid2{grid-template-columns:.85fr 1.15fr;}}.hm-page .hm-feature img{width:100%;border-radius:22px;border:5px solid rgba(255,255,255,.35);}.hm-page .hm-feature blockquote{margin:0;font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.62;}.hm-page .hm-feature blockquote p:first-child::before{content:"\201C";font-family:var(--f-disp);font-size:2.6em;line-height:0;vertical-align:-.35em;margin-right:.08em;opacity:.5;}.hm-page .hm-feature cite{display:block;margin-top:20px;font-style:normal;font-family:var(--f-disp);font-weight:700;font-size:1.02rem;}.hm-page .hm-feature cite span{display:block;font-family:var(--f-body);font-weight:400;font-size:.9rem;opacity:.82;}
/* ---------- testimonial rail with pull-quote badges ---------- *//* It scrolls itself. A visitor who does not spot the drag handle reads three
   quotes and concludes there are three, and Cris has hundreds. Same device as
   the photo strip at the top, so the page has one idiom, not two. */
.hm-page .hm-tmq{position:relative;overflow:hidden;padding:8px 0 22px;}.hm-page .hm-tmq::before,.hm-page .hm-tmq::after{content:"";position:absolute;top:0;bottom:0;width:74px;z-index:2;pointer-events:none;}.hm-page .hm-tmq::before{left:0;background:linear-gradient(90deg,var(--paper2),rgba(245,241,255,0));}.hm-page .hm-tmq::after{right:0;background:linear-gradient(270deg,var(--paper2),rgba(245,241,255,0));}.hm-page .hm-trail{display:flex;width:max-content;animation:hm-trailslide 110s linear infinite;}.hm-page .hm-tmq:hover .hm-trail,.hm-page .hm-tmq:focus-within .hm-trail{animation-play-state:paused;}@keyframes hm-trailslide{from{transform:translateX(0);}to{transform:translateX(-50%);}}.hm-page .hm-trail figure{flex:0 0 min(360px,86vw);margin:0 18px 0 0;background:#fff;border:2px solid var(--rule);border-radius:20px;padding:0 0 20px;display:flex;flex-direction:column;overflow:hidden;}.hm-page .hm-trail .hm-badge{background:var(--paper2);padding:19px 20px 17px;border-bottom:2px solid var(--rule);}.hm-page .hm-trail .hm-badge img{max-height:86px;width:auto;margin:0 auto;}.hm-page .hm-trail blockquote{margin:0;padding:18px 20px 0;font-size:.94rem;flex:1;}.hm-page .hm-trail figcaption{padding:14px 20px 0;font-size:.83rem;color:var(--muted);line-height:1.5;}.hm-page .hm-trail figcaption b{display:block;font-family:var(--f-disp);font-size:1rem;color:var(--navy);}.hm-page .hm-railhint{font-family:var(--f-lab);font-size:10px;letter-spacing:.11em;color:var(--muted);}
/* ---------- guarantee, with a real badge ---------- */
.hm-page .hm-guarwrap{display:grid;gap:clamp(24px,3.4vw,44px);align-items:center;background:var(--gold);border-radius:26px;padding:clamp(26px,3.6vw,46px);}@media(min-width:820px){.hm-page .hm-guarwrap{grid-template-columns:auto 1fr;}}.hm-page .hm-seal{width:190px;height:190px;margin:0 auto;position:relative;display:grid;place-items:center;flex:0 0 auto;}.hm-page .hm-seal .hm-disc{position:absolute;inset:0;background:var(--navy);clip-path:polygon(50% 0%,59.8% 13.3%,75% 6.7%,76.9% 23.1%,93.3% 25%,86.7% 40.2%,100% 50%,86.7% 59.8%,93.3% 75%,76.9% 76.9%,75% 93.3%,59.8% 86.7%,50% 100%,40.2% 86.7%,25% 93.3%,23.1% 76.9%,6.7% 75%,13.3% 59.8%,0% 50%,13.3% 40.2%,6.7% 25%,23.1% 23.1%,25% 6.7%,40.2% 13.3%);}.hm-page .hm-seal .hm-ring{position:absolute;inset:13px;border:2.5px solid rgba(216,168,0,.65);clip-path:polygon(50% 0%,59.8% 13.3%,75% 6.7%,76.9% 23.1%,93.3% 25%,86.7% 40.2%,100% 50%,86.7% 59.8%,93.3% 75%,76.9% 76.9%,75% 93.3%,59.8% 86.7%,50% 100%,40.2% 86.7%,25% 93.3%,23.1% 76.9%,6.7% 75%,13.3% 59.8%,0% 50%,13.3% 40.2%,6.7% 25%,23.1% 23.1%,25% 6.7%,40.2% 13.3%);}.hm-page .hm-seal .hm-txt{position:relative;text-align:center;color:#fff;line-height:1.1;padding:0 26px;}.hm-page .hm-seal .hm-amt{display:block;font-family:var(--f-disp);font-weight:800;font-size:2.5rem;color:var(--gold);}.hm-page .hm-seal .hm-cap{display:block;font-family:var(--f-lab);font-size:8.5px;letter-spacing:.11em;margin-top:3px;}.hm-page .hm-guarwrap h2{color:#2A1F00;}.hm-page .hm-guarwrap .hm-lab{color:#7A5C00;}.hm-page .hm-guarwrap .hm-big{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.3;margin:0 0 14px;color:#2A1F00;}.hm-page .hm-guarwrap p{color:#4A3A00;}
/* ---------- dear ---------- */
.hm-page .hm-dear{display:grid;gap:14px;margin-top:28px;}@media(min-width:600px){.hm-page .hm-dear{grid-template-columns:1fr 1fr;}}@media(min-width:1000px){.hm-page .hm-dear{grid-template-columns:repeat(4,1fr);}}.hm-page .hm-dearcard{display:block;background:#fff;border:2px solid var(--rule);border-radius:16px;padding:20px;text-decoration:none;color:var(--ink);border-top-width:6px;transition:transform .14s ease;}.hm-page .hm-dearcard:hover{transform:translateY(-3px);}.hm-page .hm-dearcard b{display:block;font-family:var(--f-disp);font-size:1.08rem;color:var(--navy);margin-bottom:3px;}.hm-page .hm-dearcard span{font-size:.9rem;color:var(--muted);}.hm-page .hm-dearcard:nth-child(1){border-top-color:var(--purple);}.hm-page .hm-dearcard:nth-child(2){border-top-color:var(--blue);}.hm-page .hm-dearcard:nth-child(3){border-top-color:var(--pink);}.hm-page .hm-dearcard:nth-child(4){border-top-color:var(--green);}
/* ---------- about ---------- */
.hm-page .hm-about{display:grid;gap:clamp(24px,3.4vw,42px);align-items:center;}@media(min-width:860px){.hm-page .hm-about{grid-template-columns:.72fr 1.28fr;}}.hm-page .hm-about img{border-radius:22px;border:4px solid var(--gold);width:100%;}.hm-page .hm-creds{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;}@media(min-width:560px){.hm-page .hm-creds{grid-template-columns:1fr 1fr;}}.hm-page .hm-creds li{display:flex;gap:11px;align-items:baseline;font-size:.93rem;background:#fff;border:2px solid var(--rule);border-radius:12px;padding:11px 14px;}.hm-page .hm-creds b{font-family:var(--f-disp);color:var(--purple);font-size:1.22rem;line-height:1;}
/* ---------- contact ---------- */
.hm-page .hm-contact{display:grid;gap:clamp(24px,3.4vw,40px);align-items:start;}@media(min-width:900px){.hm-page .hm-contact{grid-template-columns:1fr 1fr;}}.hm-page .hm-formwrap{background:#fff;border:4px solid var(--gold);border-radius:22px;padding:clamp(22px,3vw,32px);}.hm-page .hm-formwrap h3{margin-bottom:3px;}.hm-page .hm-formwrap .hm-fine{font-size:.88rem;color:var(--muted);margin:0 0 18px;}.hm-page .hm-fgrid{display:grid;gap:13px;}@media(min-width:560px){.hm-page .hm-fgrid{grid-template-columns:1fr 1fr;}.hm-page .hm-fgrid .hm-full{grid-column:1/-1;}}.hm-page .hm-fgrid label{display:block;font-family:var(--f-disp);font-weight:700;font-size:.85rem;color:var(--navy);margin-bottom:5px;}.hm-page .hm-fgrid input,.hm-page .hm-fgrid textarea,.hm-page .hm-fgrid select{width:100%;border:2px solid var(--rule);border-radius:11px;padding:11px 13px;font-family:var(--f-body);font-size:.95rem;background:var(--paper);color:var(--ink);}.hm-page .hm-fgrid textarea{min-height:92px;resize:vertical;}.hm-page .hm-fgrid input:focus-visible,.hm-page .hm-fgrid textarea:focus-visible,.hm-page .hm-fgrid select:focus-visible{outline:3px solid var(--cta);outline-offset:1px;border-color:var(--cta);}.hm-page .hm-report{background:var(--navy2);border-radius:22px;padding:clamp(24px,3vw,34px);color:#EDEAFB;}.hm-page .hm-report h2{color:#fff;font-size:clamp(22px,2.7vw,31px);}.hm-page .hm-report .hm-num{font-family:var(--f-disp);font-weight:800;font-size:clamp(52px,8vw,92px);color:var(--gold);line-height:.85;display:block;margin-bottom:8px;}.hm-page .hm-report ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px;}.hm-page .hm-report li{display:flex;gap:10px;font-size:.93rem;}.hm-page .hm-report li::before{content:"\2713";color:var(--green-b);font-weight:900;}
/* ---------- service area, full width, columned ---------- */
.hm-page .hm-area{columns:1;column-gap:44px;}@media(min-width:760px){.hm-page .hm-area{columns:2;}}.hm-page .hm-area p{break-inside:avoid;}.hm-page .hm-states{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;padding:0;list-style:none;}.hm-page .hm-states li{font-family:var(--f-lab);font-size:10px;letter-spacing:.09em;background:#fff;border:2px solid var(--rule);color:var(--navy);padding:8px 15px;border-radius:999px;}.hm-page .hm-flag{margin-top:20px;padding:15px 18px;border-left:5px solid var(--pink);background:#fff;border-radius:0 12px 12px 0;font-size:.9rem;}.hm-page .hm-flag b{font-family:var(--f-disp);color:var(--pink);}

/* ---------- mockup-only controls, delete before this ships ---------- */


/* --------------------------------------------------------------------------
   The Mago form renders for real here, so the slot is just a frame. Everything
   inside the iframe is drawn by mago.co and no rule in this file can reach it.
   Height is MEASURED, not guessed - the show pages settled on 700px after a
   guessed 620/860 split cut the Submit button off on desktop.
   -------------------------------------------------------------------------- */
.hm-page .hm-magoslot{border:0;background:transparent;padding:0;}
.hm-page .hm-magoslot iframe{width:100%;height:700px;border:0;display:block;}

/* --------------------------------------------------------------------------
   ELEMENTOR CONTAINER OVERRIDES
   These reach outside .hm-page on purpose - the boxed container and its
   padding are what leave white gutters down the sides of a full-bleed page.
   Every selector is gated on :has(.hm-page) so none of it can touch a page
   that does not carry this markup.
   -------------------------------------------------------------------------- */
.e-con:has(.hm-page), .elementor-section:has(.hm-page){
  width:100% !important;max-width:none !important;
  padding:0 !important;margin:0 !important;
  gap:0 !important;row-gap:0 !important;column-gap:0 !important;
}
.e-con:has(.hm-page) .e-con-inner,
.elementor-section:has(.hm-page) .elementor-container{
  width:100% !important;max-width:none !important;
  padding-left:0 !important;padding-right:0 !important;
}
.elementor-section:has(.hm-page) .elementor-column,
.elementor-section:has(.hm-page) .elementor-widget-wrap{padding:0 !important;}
body:has(.hm-page) .elementor-widget-html .elementor-widget-container{padding:0;margin:0;}