/* Mages Group — shared stylesheet. Mobile-first, no frameworks, no third-party requests.
   Palette and type matched to the Squarespace 7.1 site this replaces (black / green / pale yellow, Montserrat + Poppins). */

@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/montserrat-var-latin.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-500-latin.woff2) format("woff2")}

:root{
  --black:#101010; --green:#00b28f; --green-dark:#008c71; --yellow:#fdfa90; --dark:#1d231c; --white:#fff;
  --grey:#f3f3f1; --text:#101010;
  --font:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-btn:Poppins,Montserrat,system-ui,sans-serif;
  --gut:clamp(16px,4vw,40px); --maxw:1200px;
  --sec-pad:clamp(44px,7vw,96px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--text);background:#fff;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font);font-weight:500;line-height:1.2;margin:0 0 .6em}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.25em}
hr{border:0;border-top:2px solid currentColor;opacity:.25;margin:1.4em 0;width:100%}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:#fff;padding:.7em 1em;z-index:200}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- announcement bar ---------- */
.announce{background:var(--green);color:var(--black);text-align:center;font-size:.95rem;padding:.55em 2.6em .55em 1em;position:relative;border-bottom:5px solid var(--yellow)}
.announce a{color:inherit}
.announce button{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);background:none;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--black);padding:.3rem .6rem}

/* ---------- header / nav ---------- */
.site-header{background:var(--black);color:#fff;position:sticky;top:0;z-index:100}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--gut);max-width:1500px;margin:auto}
.hdr__logo{display:block;flex:0 0 auto}
.hdr__logo img{width:clamp(170px,21vw,300px);height:auto}
.nav-toggle{display:none;background:none;border:2px solid #fff;color:#fff;border-radius:3px;padding:.45rem .7rem;font:inherit;font-size:.9rem;cursor:pointer}
.nav{display:flex;align-items:center;gap:1.4rem;flex:1;justify-content:center}
.nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:0}
.nav__item{position:relative}
.nav__item>a,.nav__item>button{display:block;background:none;border:0;color:#fff;font:inherit;font-size:1.1rem;font-weight:500;padding:.6rem 1rem;text-decoration:none;cursor:pointer;white-space:nowrap}
.nav__item>a:hover,.nav__item>button:hover,.nav__item.is-here>a,.nav__item.is-here>button{color:var(--green)}
.nav__item--sep>a{border-left:2px solid var(--yellow);padding-left:1rem;margin-left:.2rem;line-height:1}
.nav__item--sep{padding:.6rem 0}
.nav__item--sep>a{padding-top:0;padding-bottom:0}
.nav__sub{list-style:none;margin:0;padding:.5rem 0;position:absolute;left:0;top:100%;min-width:15rem;background:var(--black);border-top:3px solid var(--green);display:none;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.nav__item:hover>.nav__sub,.nav__item:focus-within>.nav__sub,.nav__item.is-open>.nav__sub{display:block}
.nav__sub a{display:block;padding:.65rem 1.2rem;color:#fff;text-decoration:none;font-size:1rem}
.nav__sub a:hover{color:var(--green);background:#1a1a1a}
.btn,.hdr__cta{display:inline-block;background:var(--green);color:#fff;font-family:var(--font-btn);font-weight:500;font-size:1rem;line-height:1.2;text-align:center;text-decoration:none;padding:.9rem 1.15rem;border:0;border-radius:0;cursor:pointer;transition:background .15s}
.btn:hover,.hdr__cta:hover{background:var(--green-dark)}
.btn--wide{min-width:min(100%,20rem)}
.btn--white{background:#fff;color:var(--green)}
.btn--white:hover{background:var(--yellow);color:var(--black)}
.hdr__cta{flex:0 0 auto}

@media (max-width:1000px){
  .nav-toggle{display:block}
  .hdr{flex-wrap:wrap}
  .hdr__cta{display:none}
  .nav{display:none;flex:1 0 100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:1rem}
  .nav.is-open,.no-js .nav{display:flex}
  .nav__list{flex-direction:column;align-items:stretch}
  .nav__item>a,.nav__item>button{width:100%;text-align:left;padding:.85rem .25rem;border-bottom:1px solid #2a2a2a}
  .nav__item--sep{padding:0}
  .nav__item--sep>a{border-left:0;padding:.85rem .25rem;margin:0;line-height:inherit}
  .nav__sub{position:static;display:none;box-shadow:none;border-top:0;padding:0 0 0 1rem}
  .nav__item:hover>.nav__sub,.nav__item:focus-within>.nav__sub{display:none}
  .nav__item.is-open>.nav__sub,.no-js .nav__sub{display:block}
  .nav__cta-m{display:block!important}
}
.nav__cta-m{display:none;margin-top:1rem}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;text-align:center;background:var(--black);display:grid;place-items:center;min-height:clamp(300px,48vw,560px);padding:3rem var(--gut) 5rem;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.38);z-index:1}
.hero__inner{position:relative;z-index:2;max-width:56rem}
.hero h1{font-size:clamp(2rem,5.2vw,3.6rem);font-weight:500;margin:0}
.hero p{font-size:clamp(1.05rem,2vw,1.3rem);margin:1rem 0 0}

/* ---------- sections ---------- */
.sec{position:relative;padding:var(--sec-pad) var(--gut)}
.sec--div{padding-bottom:calc(var(--sec-pad) + clamp(20px,3.4vw,44px))}
.sec--div::after,.hero--div::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:clamp(20px,3.6vw,48px);background:var(--next,#fff);clip-path:polygon(0 100%,100% 100%,100% 0,50% 100%,0 0);z-index:3}
.wrap{max-width:var(--maxw);margin:0 auto}
.wrap--narrow{max-width:62rem}
.t-black,.t-black-bold{background:var(--black);color:#fff}
.t-dark{background:var(--dark);color:#fff}
.t-white,.t-white-bold{background:#fff;color:var(--text)}
.t-light{background:var(--yellow);color:var(--text)}
.t-bright{background:var(--green);color:#fff}
.t-black-bold h2,.t-white-bold h2,.t-white-bold h3,.t-black-bold h3,.t-white h2{color:var(--green)}
.t-white h2{color:var(--green)}
.t-black-bold h2,.t-white-bold h2,.t-white h2,.t-bright h2,.t-light h2{font-weight:700;font-size:clamp(1.7rem,3.6vw,2.6rem)}
.t-bright h2,.t-bright h3{color:#fff}
.t-bright .btn{background:#fff;color:var(--green)}
.t-bright .btn:hover{background:var(--yellow);color:var(--black)}
.center{text-align:center}
.sec h2.center,.sec--center h2{text-align:center}
.sec--center{text-align:center}
.sec--center .wrap{display:flex;flex-direction:column;align-items:center}

.tick-list{list-style:none;padding:0;margin:0 0 1.2em}
.tick-list li{position:relative;padding-left:1.7em;margin:.35em 0}
.tick-list ul{list-style:disc;padding-left:1.2em;margin:.3em 0}
.tick-list ul li{padding-left:.2em;margin:.15em 0}
.tick-list>li::before{content:"";position:absolute;left:0;top:.5em;width:.95em;height:.55em;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg) scale(.9);transform-origin:left top}
.prose-cols{display:grid;gap:2rem}
@media (min-width:860px){.prose-cols{grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}}

/* icon cards */
.cards{display:grid;gap:2.6rem 2rem;grid-template-columns:1fr;margin-top:2rem;text-align:center}
@media (min-width:620px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cards{grid-template-columns:repeat(3,1fr)}}
.card__icon{width:clamp(96px,10vw,128px);height:auto;margin:0 auto 1rem;border-radius:50%}
.card h3{font-size:1.35rem;font-weight:700;color:#fff;margin-bottom:.5em}
.card p{margin:0;color:#fff}
.t-white-bold .card h3,.t-white .card h3{color:var(--text)}
.t-white-bold .card p,.t-white .card p{color:var(--text)}
.cards-break{grid-column:1/-1}

/* feature rows (image + text) */
.feature{display:grid;gap:1.5rem;align-items:center;margin:0 0 3rem}
.feature:last-child{margin-bottom:0}
.feature img{width:100%;height:auto;border-radius:2px;aspect-ratio:4/3;object-fit:cover}
@media (min-width:860px){
  .feature{grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:4rem}
  .feature:nth-child(even) img{order:2}
}
.split{display:grid;gap:2rem;align-items:start}
@media (min-width:860px){.split{grid-template-columns:1.2fr 1fr;gap:3.5rem}}
.figure img{width:100%;border-radius:2px}

/* home service grid */
.svc-grid{display:grid;gap:2rem 1.2rem;grid-template-columns:repeat(2,1fr);margin-top:2rem;list-style:none;padding:0}
@media (min-width:760px){.svc-grid{grid-template-columns:repeat(3,1fr);gap:2.4rem 2rem}}
.svc-grid a{display:block;text-decoration:none;text-align:center;color:#fff}
.svc-grid img{width:clamp(110px,16vw,190px);margin:0 auto .8rem}
.svc-grid span{display:block;font-weight:600;font-size:1.1rem}
.svc-grid a:hover span{color:var(--green)}

/* home slider */
.slider{position:relative;background:var(--black);color:#fff;overflow:hidden}
.slider__track{display:grid}
.slide{grid-area:1/1;position:relative;min-height:clamp(340px,56vw,640px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .6s}
.slide.is-active{opacity:1;visibility:visible}
.no-js .slide:first-child{opacity:1;visibility:visible}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:1}
.slide__title{position:relative;z-index:2;margin:0;padding:3rem 3.5rem;font-size:clamp(1.8rem,4.6vw,3.4rem);font-weight:500;text-align:center;max-width:52rem}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:3rem;height:3rem;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:1.4rem;cursor:pointer;display:grid;place-items:center}
.slider__btn:hover{background:var(--green-dark)}
.slider__btn--prev{left:clamp(8px,2vw,28px)}
.slider__btn--next{right:clamp(8px,2vw,28px)}
@media (max-width:620px){.slider__btn{width:2.4rem;height:2.4rem;top:auto;bottom:1rem;transform:none}}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:2rem 0}
@media (min-width:760px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery a{display:block;overflow:hidden;background:#000}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .25s}
.gallery a:hover img{transform:scale(1.04)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:500;display:none;place-items:center;padding:1rem}
.lightbox.is-open{display:grid}
.lightbox img{max-height:92vh;max-width:96vw;width:auto;height:auto;object-fit:contain}
.lightbox button{position:absolute;top:.6rem;right:.8rem;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}

/* suppliers */
.supplier-lead{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.supplier-lead{grid-template-columns:1.3fr 1fr;gap:3rem}}
.logo-box{background:#fff;padding:1rem;display:grid;place-items:center;border:1px solid #e5e5e0;min-height:130px}
.logo-box img{max-height:110px;width:auto;max-width:100%;object-fit:contain}
.photo-pair{display:grid;gap:.8rem;grid-template-columns:1fr 1fr;margin-top:1rem}
.partners{display:grid;gap:1.6rem;grid-template-columns:1fr;margin-top:2rem}
@media (min-width:860px){.partners{grid-template-columns:repeat(2,1fr);gap:2rem}}
.partner{background:var(--grey);padding:1.4rem;display:grid;gap:1rem;align-content:start}
.partner h2{font-size:1.4rem!important;margin:0 0 .4em;text-align:left!important}
.partner p{margin:0 0 .8em;font-size:1rem}
.partner .logo-box{min-height:110px}
.milwaukee{display:grid;gap:1.6rem;align-items:center;background:#fff;border-left:8px solid #c92a28;padding:1.6rem;margin:0 0 2.4rem;box-shadow:0 2px 14px rgba(0,0,0,.12)}
@media (min-width:760px){.milwaukee{grid-template-columns:220px 1fr;gap:2.4rem}}
.milwaukee img{width:min(220px,60%);height:auto}
.milwaukee h2{margin-bottom:.3em;color:#c92a28!important;text-align:left!important}
.milwaukee p{margin:0 0 .8em}

/* contact */
.contact-grid{display:grid;gap:2.5rem;align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1.1fr;gap:4rem}}
.contact-grid h1{font-size:clamp(2.4rem,5vw,3.6rem);color:var(--green);font-weight:700}
.contact-grid h2{font-size:1.4rem;color:var(--text)!important;font-weight:700;text-align:left!important}
.contact-grid p{margin:0 0 1rem;font-size:1.1rem}
.contact-grid .lead{font-size:1.3rem;font-weight:600}

/* forms */
.form{display:grid;gap:1.1rem}
.form .row{display:grid;gap:1.1rem}
@media (min-width:560px){.form .row--2{grid-template-columns:1fr 1fr}}
.form label{display:block;font-size:.95rem;font-weight:500}
.form label small{font-weight:400;opacity:.7;margin-left:.3em}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{display:block;width:100%;margin-top:.3rem;font:inherit;font-size:1rem;padding:.7rem .75rem;border:1px solid #9a9a95;border-radius:0;background:#fff;color:var(--text)}
.form textarea{min-height:9rem;resize:vertical}
.form input:focus,.form textarea:focus{outline:3px solid var(--green);outline-offset:0;border-color:var(--green)}
.form .check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400}
.form .check input{margin-top:.35rem;width:1.1rem;height:1.1rem;accent-color:var(--green)}
.form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .fine{font-size:.85rem;opacity:.8;margin:0}
.form-msg{padding:.9rem 1rem;border-left:5px solid var(--green);background:#e9f7f3;color:var(--text);margin:0 0 1.2rem;font-weight:500}
.form-msg--err{border-color:#c0392b;background:#fbeae7}
.t-black .form-msg,.t-black-bold .form-msg{color:var(--text)}
.form button[disabled]{opacity:.6;cursor:wait}
.t-black-bold .form label,.footer-form label{color:#fff}

/* policy pages */
.policy{max-width:50rem}
.policy h1{font-size:clamp(2.2rem,5vw,3.2rem);color:var(--green);font-weight:700}
.policy h2{font-size:1.45rem;color:var(--text);font-weight:700;margin-top:1.8em}
.policy p{font-size:1.05rem}
.cc-table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.98rem}
.cc-table th,.cc-table td{border:1px solid #ccc;padding:.6rem .7rem;text-align:left;vertical-align:top}
.cc-table th{background:var(--grey)}
@media (max-width:640px){
  .cc-table thead{position:absolute;left:-9999px}
  .cc-table,.cc-table tbody,.cc-table tr,.cc-table td{display:block;width:100%}
  .cc-table tr{border:1px solid #ccc;margin:0 0 .8rem}
  .cc-table td{border:0;border-bottom:1px solid #eee;padding:.45rem .7rem}
  .cc-table td::before{content:attr(data-label) ": ";font-weight:700}
}

/* ---------- footer ---------- */
.f-cta{position:relative;color:#fff;text-align:center;padding:clamp(56px,9vw,110px) var(--gut);background:var(--black);overflow:hidden}
.f-cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.f-cta::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
.f-cta__in{position:relative;z-index:2;max-width:46rem;margin:auto}
.f-cta h2{font-size:clamp(1.8rem,4.4vw,3rem);font-weight:600}
.f-cta p{font-size:1.15rem}
.f-partners{background:#fff;padding:clamp(40px,6vw,72px) 0;text-align:center}
.f-partners h3{color:var(--green);font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:700;margin-bottom:1.4rem}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__track{display:flex;gap:2.5rem;align-items:center;width:max-content;animation:marq 120s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{height:64px;width:auto;max-width:170px;object-fit:contain;flex:0 0 auto}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none;overflow:visible}
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding:0 var(--gut)}
  .marquee [aria-hidden=true]{display:none}
  .slide{transition:none}
  html{scroll-behavior:auto}
}
.f-partners .btn{margin-top:2rem}
.f-accred{background:#fff;padding:0 var(--gut) clamp(40px,6vw,72px)}
.f-accred h3{color:var(--green);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700}
.f-accred p{max-width:60rem}
.accred-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:center;margin-top:1.5rem;list-style:none;padding:0}
@media (min-width:640px){.accred-logos{grid-template-columns:repeat(4,1fr)}}
@media (min-width:960px){.accred-logos{grid-template-columns:repeat(6,1fr)}}
.accred-logos img{height:70px;width:100%;object-fit:contain}
.f-main{background:var(--black);color:#fff;padding:clamp(44px,6vw,80px) var(--gut)}
.f-main__in{max-width:var(--maxw);margin:auto;display:grid;gap:2.5rem}
@media (min-width:900px){.f-main__in{grid-template-columns:1fr 1.1fr;gap:4rem}}
.f-main h4{color:var(--green);font-size:1.5rem;font-weight:700}
.f-main address{font-style:normal;margin-bottom:1rem}
.f-main a{color:#fff}
.f-main a:hover{color:var(--green)}
.f-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.2rem 0;padding:0;list-style:none;font-size:.95rem}
.f-legal button{background:none;border:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.f-legal button:hover{color:var(--green)}
.social{display:flex;gap:.8rem;margin:1rem 0 0;padding:0;list-style:none}
.social a{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:2px solid #fff;border-radius:50%}
.social a:hover{border-color:var(--green)}
.social svg{width:1.2rem;height:1.2rem;fill:currentColor}
.f-main .form input[type=text],.f-main .form input[type=email],.f-main .form textarea{border-color:#555}
.f-main .fine,.f-main .check{color:#ddd}
.f-base{background:#16181a;color:#b4b4b0;font-size:.85rem;text-align:center;padding:1rem var(--gut);border-top:1px solid rgba(255,255,255,.07)}

/* ---------- consent banner ---------- */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:400;background:#fff;color:var(--text);box-shadow:0 -4px 22px rgba(0,0,0,.25);padding:1rem var(--gut);display:none}
.cc.is-open{display:block}
.cc__in{max-width:var(--maxw);margin:auto;display:grid;gap:1rem;align-items:center}
@media (min-width:860px){.cc__in{grid-template-columns:1fr auto;gap:2rem}}
.cc p{margin:0;font-size:.88rem;line-height:1.5}
.cc__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.cc__btns .btn{padding:.7rem 1rem;font-size:.9rem}
.cc__btns .btn--ghost{background:#fff;color:var(--green);box-shadow:inset 0 0 0 2px var(--green)}
.cc__btns .btn--ghost:hover{background:#e9f7f3}
.cc__panel{display:none;margin-top:1rem;border-top:1px solid #ddd;padding-top:1rem}
.cc.is-managing .cc__panel{display:block}
.cc__opt{display:flex;gap:.8rem;align-items:flex-start;margin:0 0 .8rem;font-size:.9rem}
.cc__opt input{margin-top:.3rem;width:1.1rem;height:1.1rem;accent-color:var(--green)}
.cc__opt strong{display:block}

/* review helper: add ?check=1 to any URL to outline copy that still needs sign-off */
html.show-check [data-check]{outline:3px dashed #e67e00;outline-offset:3px;position:relative}
html.show-check [data-check]::before{content:"CHECK: " attr(data-check);display:block;background:#e67e00;color:#fff;font:600 12px/1.3 var(--font);padding:2px 6px;margin-bottom:4px}

/* 404 + small utilities */
.notfound{text-align:center;padding:clamp(60px,10vw,140px) var(--gut)}
.notfound h1{font-size:clamp(3rem,10vw,6rem);color:var(--green);font-weight:700;margin:0}
.notfound ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin:2rem 0 0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.open-facts{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.6rem 0}
@media (min-width:700px){.open-facts{grid-template-columns:repeat(3,1fr)}}
.open-facts div{background:#fff;color:var(--text);padding:1.2rem;border-top:6px solid #c92a28}
.open-facts strong{display:block;font-size:1.25rem;margin-bottom:.2rem}
.slot{border:2px dashed #b9b9b0;background:#fafaf6;padding:1.4rem;margin:1.4rem 0;color:#555}
.slot strong{display:block;color:#c92a28;margin-bottom:.3rem}
@media print{.announce,.site-header,.cc,.f-cta,.f-partners,.nav-toggle{display:none!important}}

/* Build credit. Only the brand word is a link, so it reads as a line of text
   rather than an advert. Stacks under the company line on narrow screens. */
.f-credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.f-credit a:hover,.f-credit a:focus-visible{color:#fff;border-bottom-color:#fff}
@media (max-width:767px){.f-credit{display:block;margin-top:.55rem}.f-credit-sep{display:none}}

/* ============================================================
   OPEN DAY — sticker trigger + full-width drawer.
   Temporary: retires itself after 20 Oct 2026.
   The sticker sits bottom-right; opening it drops a full-width
   explainer down from under the sticky header, Milwaukee red
   against Mages black, using Rowan's approved milwaukee-logo.svg.
   Removing it: delete this block and the matching block in site.js.
   ============================================================ */
.od-wrap{position:fixed;right:1.1rem;bottom:calc(1.1rem + var(--od-offset,0px));z-index:60}
.od-sticker{position:relative;width:116px;height:116px;border:0;padding:0;cursor:pointer;background:none;transform:rotate(-8deg);transition:transform .25s ease,filter .25s ease;filter:drop-shadow(0 6px 14px rgba(0,0,0,.34))}
.od-sticker:hover,.od-sticker:focus-visible{transform:rotate(0deg) scale(1.06);filter:drop-shadow(0 10px 22px rgba(0,0,0,.42))}
.od-sticker__face{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#db011c;color:#fff;border:4px solid #fff;text-align:center;line-height:1.1}
.od-sticker__kicker{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.92}
.od-sticker__big{font-size:1.42rem;font-weight:800;margin:.12em 0;letter-spacing:-.01em}
.od-sticker__date{font-size:.72rem;font-weight:700;background:#fdfa90;color:#101010;border-radius:2px;padding:.1em .45em}
.od-sticker__pulse{position:absolute;inset:0;border-radius:50%;border:2px solid #db011c;animation:odPulse 1.5s ease-out 3;pointer-events:none}
@keyframes odPulse{0%{transform:scale(1);opacity:.65}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.od-sticker__close{position:absolute;top:-7px;right:-7px;width:28px;height:28px;border-radius:50%;border:2px solid #fff;background:#101010;color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0;z-index:1}

.od-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:97;opacity:0;pointer-events:none;transition:opacity .3s ease}
.od-scrim[data-open="true"]{opacity:1;pointer-events:auto}

/* The drawer sits BELOW the sticky header (z-index 100) so the nav stays put. */
.od-drawer{position:fixed;left:0;right:0;top:var(--od-top,0px);z-index:99;overflow:hidden;pointer-events:none;visibility:hidden;transition:visibility 0s linear .38s}
.od-drawer[data-open="true"]{visibility:visible;transition-delay:0s}
.od-drawer[data-open="true"]{pointer-events:auto}
.od-drawer__inner{background:#101010;color:#f2f2f0;border-bottom:5px solid #db011c;transform:translateY(-100%);transition:transform .38s cubic-bezier(.22,.61,.36,1);max-height:calc(100vh - var(--od-top,0px) - var(--od-offset,0px));max-height:calc(100dvh - var(--od-top,0px) - var(--od-offset,0px));overflow-y:auto;overscroll-behavior:contain}
.od-drawer[data-open="true"] .od-drawer__inner{transform:translateY(0)}
.od-drawer__bar{background:#db011c;height:4px}
.od-drawer__wrap{max-width:1500px;margin:auto;padding:40px var(--gut) 48px;display:grid;grid-template-columns:1.15fr .85fr;gap:38px}
.od-drawer__x{position:absolute;top:12px;right:calc(var(--gut) / 2 - 8px);width:34px;height:34px;border:0;border-radius:50%;background:#2a2d30;color:#fff;font-size:19px;line-height:1;cursor:pointer;z-index:2}
/* Milwaukee alone. The Mages logo is in the sticky header directly above,
   so repeating it here read as weak and duplicated. */
.od-brand{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.od-brand img{display:block;height:46px;width:auto}
.od-brand__rule{flex:1;height:2px;background:linear-gradient(90deg,#db011c,rgba(219,1,28,0))}
.od-drawer h2{margin:0 0 10px;font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:.95;font-weight:800;color:#fff;letter-spacing:-.025em;text-transform:uppercase}
.od-drawer h2 em{font-style:normal;color:#db011c}
.od-when{display:inline-block;margin:0 0 8px;font-size:1.02rem;font-weight:800;color:#101010;background:#fdfa90;padding:.3em .7em;border-radius:2px;letter-spacing:.01em}
.od-where{margin:0 0 16px;font-size:.92rem;color:#c2c8cc}
.od-drawer p.od-copy{margin:0 0 11px;font-size:1rem;line-height:1.6;color:#d2d6d8;max-width:62ch}
.od-drawer p.od-copy strong{color:#fff}
.od-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:16px 0 0;padding:0;list-style:none}
.od-grid li{position:relative;padding-left:17px;font-size:.93rem;line-height:1.45;color:#d2d6d8}
.od-grid li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;background:#db011c;border-radius:50%}
.od-grid li strong{color:#fff;display:block}
.od-side{background:#1a1d1f;border-radius:5px;padding:20px}
.od-side h3{margin:0 0 4px;font-size:1.02rem;color:#fff}
.od-side p{margin:0 0 14px;font-size:.88rem;line-height:1.5;color:#a9afb3}
.od-actions{display:grid;gap:9px;margin-bottom:17px}
.od-btn{display:block;text-align:center;padding:12px 10px;border-radius:3px;font-size:.93rem;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.od-btn--cal{background:#00b28f;color:#06352c}
.od-btn--more{background:#db011c;color:#fff}
.od-btn:hover{filter:brightness(1.1)}
.od-signup{border-top:1px solid #2b3034;padding-top:15px}
.od-signup__row{display:flex;gap:7px}
.od-signup input{flex:1;min-width:0;padding:11px 11px;border-radius:3px;border:1px solid #7b8388;background:#101214;color:#f2f2f0;font-size:16px;font-family:inherit}
.od-signup input::placeholder{color:#a9afb3;opacity:1}
.od-signup input:focus{outline:2px solid #00b28f;outline-offset:1px}
.od-signup button{padding:11px 16px;border-radius:3px;border:0;background:#db011c;color:#fff;font-weight:800;font-size:.88rem;cursor:pointer;font-family:inherit}
.od-signup__msg{margin:9px 0 0;font-size:.85rem;color:#00d6ab}
.od-signup__msg--err{color:#ff9a90}
.od-foot{margin:14px 0 0;font-size:.78rem;color:#8a9094}
@media (max-width:860px){.od-drawer__wrap{grid-template-columns:1fr;gap:22px;padding-top:40px}.od-grid{grid-template-columns:1fr}}
@media (max-width:420px){.od-sticker{width:96px;height:96px}.od-sticker__big{font-size:1.2rem}}
@media (prefers-reduced-motion:reduce){.od-sticker,.od-drawer__inner,.od-scrim{transition:none}.od-sticker__pulse{animation:none}.od-sticker:hover{transform:rotate(-8deg)}}

/* Open day takeover of the announcement bar. Milwaukee red, and it opens the
   drawer rather than navigating, so the bar and the drop-down are one thing. */
.announce--od{background:#db011c;color:#fff;border-bottom:4px solid #101010;font-weight:500}
.announce--od strong{font-weight:800;letter-spacing:.04em}
.announce--od .announce__dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.65);margin:0 .7em;vertical-align:middle}
.announce--od .announce__cta{display:inline-block;margin-left:.85em;color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.55);padding-bottom:1px}
.announce--od .announce__cta:hover,.announce--od .announce__cta:focus-visible{border-bottom-color:#fff}
.announce--od button{color:#fff}
.announce--od{cursor:pointer}
.announce--od .announce__short{display:none}
.announce--od .announce__cta{display:inline-block;margin-left:.85em;color:#fff;font-weight:800;border-bottom:2px solid rgba(255,255,255,.55);padding-bottom:1px}
.announce--od:hover .announce__cta,.announce--od:focus-visible .announce__cta{border-bottom-color:#fff}
/* Phones: two lines maximum. Headline on its own line, the details beneath with
   the chevron, and the whole bar is the tap target. Tested on a real iPhone -
   the previous version ran to three lines and read badly. */
@media (max-width:640px){
  .announce--od{padding:.5em 2.4em .55em 1em;line-height:1.3}
  .announce--od strong{display:block;font-size:.95rem;letter-spacing:.06em}
  .announce--od .announce__dot{display:none}
  .announce--od .announce__long{display:none}
  .announce--od .announce__short{display:inline}
  .announce--od .announce__meta{font-size:.82rem}
  .announce--od .announce__cta{margin-left:.5em;font-size:.82rem;border-bottom:0}
}

/* Headline: bigger, tighter, with a Milwaukee red rule above it.
   The yellow date chip fought the red, so the date is now white on black. */
.od-drawer h2{font-size:clamp(2.9rem,6.6vw,5rem)!important;letter-spacing:-.035em!important;margin:0 0 12px!important}
.od-kicker{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#db011c}
.od-kicker::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,#db011c,rgba(219,1,28,0))}
.od-when{background:#fff!important;color:#101010!important;font-weight:800!important;letter-spacing:.02em!important}

@media (prefers-reduced-motion:reduce){.od-sticker:hover,.od-sticker:focus-visible{transform:rotate(-8deg);filter:drop-shadow(0 6px 14px rgba(0,0,0,.34))}}

/* Poster in the side column. Shown at roughly a third of its pixel width,
   which hides the WhatsApp compression that makes it soft at full size. */
.od-poster{display:block;width:100%;height:auto;border-radius:4px;margin:0 0 18px;border:1px solid #2b3034}
@media (max-width:860px){.od-poster{max-width:520px;margin-inline:auto}}

/* Phones: the sticker is dropped. The red bar is already persistent at the top
   and does the same job, while the sticker sat on top of the page content
   (it covered the "Welcome to Mages" heading on a real iPhone). Desktop keeps
   both: there the bar is a thin strip and the sticker earns its place. */
@media (max-width:640px){.od-wrap{display:none!important}}