/* Magic's Auto theme. Design rules: docs/reviews/design-accessibility.md section 3.
   Colours and type sizes live in :root; everything below uses them. */
:root{
  /* colour */
  --red:#dd0b0b; --red-dark:#b30909;            /* the one action colour */
  --navy:#001840; --navy-light:#0f2f66;         /* brand colour, from the logo */
  --ink:#000; --muted:#6b6b6b;
  --line:#e9e9e9;                               /* decorative lines only */
  --control:#949494;                            /* borders of things you interact with (3:1 on white) */
  --panel:#ebebeb;
  --dark:#111; --darker:#222; --on-dark:#ccc;
  /* type */
  --head:Montserrat,Helvetica,Arial,sans-serif; --body:"PT Sans",Helvetica,Arial,sans-serif;
  --fs-page:2.1875rem;   /* 35px page titles and text on photos */
  --fs-section:1.625rem; /* 26px section headings */
  --fs-sub:1.125rem;     /* 18px sub-headings */
  --fs-body:1rem;        /* 16px */
  --fs-label:.875rem;    /* 14px labels, menu */
  --fs-small:.8125rem;   /* 13px small print */
  /* layout */
  --gutter:30px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:var(--fs-body);line-height:1.7;color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.wp-site-blocks>*,:where(.wp-site-blocks)>*{margin-block-start:0}
.site-main{margin:0!important;padding:0}
.wp-block-post-content>*{margin-block:0}
/* plain text pages (Privacy Policy, Disclaimer): the other pages keep their content inside rows */
.wp-block-post-content>p{margin-block:0 14px}
.wp-block-post-content>p:last-child{margin-bottom:40px}
.wp-block-post-content>h2:not(.screen-reader-text){margin-block:44px 14px}
.wp-block-post-content>ul{margin-block:0 14px;padding-left:22px}
.wp-block-post-content>ul li{margin-bottom:6px}
.wp-block-post-content>.wp-block-table{margin-block:6px 20px}
.wp-block-post-content>.wp-block-table th,.wp-block-post-content>.wp-block-table td{padding:10px 12px;border:1px solid var(--line);vertical-align:top;text-align:left}
.wp-block-post-content>.wp-block-table th{font-family:var(--head);font-size:var(--fs-label);font-weight:600}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
#our-services{scroll-margin-top:20px}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.site-footer :focus-visible,.cta-band :focus-visible,.page-banner :focus-visible,.magics-hero :focus-visible{outline-color:#fff}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- headings: one look per job ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--head);color:var(--ink);letter-spacing:-.2px}
.magics-heading{font-size:var(--fs-section);font-weight:700;line-height:1.3;margin:0 0 30px;position:relative;padding-bottom:22px}
.magics-heading.has-line::after{content:"";position:absolute;left:0;bottom:0;width:80px;height:2px;background:var(--red)}
.magics-heading.has-text-align-center::after{left:50%;transform:translateX(-50%)}
p+.magics-heading,p+.magics-sep{margin-top:30px}
.sub-heading{font-size:var(--fs-sub);font-weight:600;line-height:1.4;margin:0 0 14px}
p+.sub-heading,ul+.sub-heading,figure+.sub-heading{margin-top:30px}

/* ---------- buttons: one shape, two styles (solid and outline) ---------- */
.wp-block-buttons{margin:0}
.wp-block-button__link,.wpcf7 input[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border:2px solid var(--red);border-radius:2px;background:var(--red);color:#fff;font-family:var(--head);font-size:var(--fs-small);font-weight:600;line-height:1.2;letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.wp-block-button__link:hover,.wpcf7 input[type=submit]:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff;text-decoration:none}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;border-color:var(--control);color:var(--muted)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--red);border-color:var(--red);color:#fff}
.cta-band .wp-block-button.is-style-outline .wp-block-button__link{border-color:#fff;color:#fff}
.cta-band .wp-block-button.is-style-outline .wp-block-button__link:hover{background:#fff;border-color:#fff;color:#000}

/* ---------- top bar ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);font-size:var(--fs-small);color:var(--muted);padding:0!important}
.topbar-inner{margin-inline:auto!important;margin-block:0!important;min-height:56px;align-items:stretch!important;gap:0!important}
.topbar-left,.topbar-right{gap:0!important;align-items:stretch!important}
.topbar .topbar-item{margin:0;padding:0 18px;line-height:56px;border-left:1px solid var(--line);color:var(--muted);font-size:var(--fs-small)}
.topbar .topbar-right .topbar-item:last-child,.topbar .topbar-review{border-right:1px solid var(--line)}
.topbar .topbar-item a,.topbar .social-icons a{color:var(--muted)}
.topbar .topbar-item a:hover,.topbar .topbar-item a:focus-visible,.topbar .social-icons a:hover,.topbar .social-icons a:focus-visible{color:var(--red);text-decoration:none}
.social-icons{display:flex;align-items:center}
.social-icons a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.topbar .social-icons.topbar-social{height:56px;padding:0 12px;gap:4px;margin:0;border-left:1px solid var(--line);font-size:.9375rem}
.topbar .social-icons.topbar-social a{width:28px;height:28px}

/* ---------- masthead and menu ---------- */
.masthead{background:#fff;padding:35px 0 0!important}
.masthead-inner{margin-inline:auto!important;margin-block:0!important;gap:20px!important}
.site-logo{margin:0!important}
.site-logo img{display:block;height:auto}
.site-logo a:hover{text-decoration:none}
.main-nav{font-family:var(--head);font-size:var(--fs-label);font-weight:500;gap:0!important}
.main-nav .wp-block-navigation__container{gap:0!important}
.main-nav a.wp-block-navigation-item__content{color:var(--red)!important;padding:0 18px 35px;text-decoration:none}
.main-nav a.wp-block-navigation-item__content:hover{color:var(--navy)!important;text-decoration:none}
.main-nav .current-menu-item>a,.main-nav a[aria-current]{font-weight:700}
.main-nav .wp-block-navigation-item:last-child .wp-block-navigation-item__content{padding-right:0}
.main-nav .wp-block-navigation__responsive-container-open{color:var(--navy);padding:6px}
.main-nav .wp-block-navigation__responsive-container-open svg{width:34px;height:34px;fill:var(--navy);stroke:var(--navy);stroke-width:.9}
@media (min-width:600px) and (max-width:1023px){
  .main-nav .wp-block-navigation__responsive-container-open:not(.always-shown){display:flex}
  .main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
}
.main-nav .wp-block-navigation__responsive-container.is-menu-open{background:#fff;padding:0;color:var(--red)}
.main-nav .is-menu-open .wp-block-navigation__responsive-dialog{padding:0}
.main-nav .is-menu-open .wp-block-navigation__responsive-container-content{padding:72px 24px 24px;align-items:flex-start!important;justify-content:flex-start!important}
.main-nav .is-menu-open .wp-block-navigation__container{align-items:stretch!important;gap:0!important;width:100%}
.main-nav .is-menu-open .wp-block-navigation-item{width:100%;border-bottom:1px solid var(--line);align-items:stretch}
.main-nav .is-menu-open a.wp-block-navigation-item__content{display:block;width:100%;padding:16px 4px!important;font-size:1.0625rem}
.main-nav .wp-block-navigation__responsive-container-close{top:20px;right:20px;color:var(--navy);padding:8px}
.main-nav .wp-block-navigation__responsive-container-close svg{width:28px;height:28px}

/* ---------- rows and layout ---------- */
.vc-row{padding-top:25px;padding-bottom:25px}
.wp-block-columns{gap:40px!important;margin-bottom:0}
.wp-block-column>*:first-child{margin-top:0}
.vc-row p{margin:0 0 14px}
.vc-row .wp-block-columns{margin-bottom:10px}
.wp-block-image img{display:block}
.vc-row .wp-block-image{margin:0 0 20px}
.wp-block-image.aligncenter{text-align:center}
.wp-block-image.aligncenter img{margin-inline:auto}
.row-bleed>.wp-block-columns{max-width:1130px;margin-inline:auto}
.row-bleed .wp-block-column{display:flex;flex-direction:column}
.row-bleed .wp-block-column>.service-card{flex:1 1 auto}
a[href^="tel:"],a[href^="mailto:"]{overflow-wrap:anywhere}

/* ---------- inner pages: title bar, content ---------- */
.page-title-bar{border-bottom:1px solid var(--line);padding:0!important;margin:0!important}
.page-title-inner{margin-inline:auto!important;padding:38px 0;gap:20px!important}
.page-title-bar h1.page-title{font-size:var(--fs-page);font-weight:700;text-transform:uppercase;line-height:1.2;margin:0}
.page-body{max-width:1130px;margin-inline:auto!important;display:flex;align-items:stretch}
.page-body>.wp-block-post-content,.page-body>.page-inner{flex:1;min-width:0;padding:40px 0 20px}
.page-body .vc-row{padding-left:0;padding-right:0}
.page-body .vc-row.alignfull{max-width:none;margin-left:0;margin-right:0}
.page-body .wp-block-column p{margin:0 0 20px}
.page-body .wp-block-image{margin:0 0 20px}
/* the main photo at the top of a page: full width, but not taller than a banner */
.page-body .vc-row:first-child>.wp-block-image:first-child img{width:100%;height:420px;aspect-ratio:auto!important;object-fit:cover}
.page-body .wp-block-image.size-medium img{width:100%}
.page-wide{padding:40px 0 20px!important}
.page-wide>.wp-block-post-content{max-width:1130px;margin-inline:auto}
.page-wide-inner{max-width:1130px;margin-inline:auto;padding:40px 0 20px}

.page-intro{max-width:1130px;margin-inline:auto;padding-bottom:40px}
.page-intro p{margin:0 0 14px}
/* MOT Services: the photo links sit within the page margins, with a small gap between them */
.page-intro~.cta-band.wp-block-cover{width:auto;max-width:1130px;margin:0 auto 14px}
.page-intro~.cta-band:last-child{margin-bottom:40px}
.page-intro~.cta-band .wp-block-cover__inner-container{padding-left:40px;padding-right:40px}

/* ---------- text on photos: always white on a soft gradient ---------- */
.cta-band.wp-block-cover,.page-banner.wp-block-cover{padding:0;margin:0}
.cta-band.wp-block-cover{min-height:400px}
.cta-band .wp-block-cover__inner-container,.page-banner .wp-block-cover__inner-container{position:relative;z-index:1;max-width:1130px;width:100%;margin-inline:auto}
.cta-band::after,.page-banner.has-title::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.58) 42%,rgba(0,0,0,.14) 68%,rgba(0,0,0,0) 84%)}
.band-label{font-family:var(--head);font-size:var(--fs-label);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0 0 20px!important}
.band-title,.page-banner .banner-title{font-family:var(--head);font-size:var(--fs-page);font-weight:700;line-height:1.2;text-transform:uppercase;color:#fff;margin:0 0 30px;max-width:760px;letter-spacing:-.2px}
.page-banner .banner-title{margin:0}
.band-title,.band-label,.page-banner .banner-title{text-shadow:0 2px 14px rgba(0,0,0,.65)}

/* ---------- separator labels ---------- */
.magics-sep{display:flex;align-items:center;gap:12px;margin:0 0 20px}
.magics-sep::before,.magics-sep::after{content:"";flex:1;border-top:4px solid var(--navy)}
.magics-sep h3{margin:0;font-size:var(--fs-label);font-weight:600;letter-spacing:.5px;text-transform:uppercase;line-height:1.2;text-align:center}

/* ---------- feature cards ---------- */
.magics-card .wp-block-image{margin:0 0 20px}
.magics-card .wp-block-image img{border:1px solid #ddd;padding:3px;background:#fff;width:100%;aspect-ratio:2/1;object-fit:cover}
/* logo: framed like the photos beside it, at the same 2:1 shape, so the headings below line up */
.magics-card.is-logo .wp-block-image{display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;border:1px solid #ddd;padding:3px 16px}
.magics-card.is-logo .wp-block-image img{border:0;padding:0;aspect-ratio:auto;object-fit:contain;height:auto}
.magics-card .sub-heading{margin:0 0 12px}
.magics-card p{margin:0 0 14px}
.magics-card .more-link{margin:0}
.more-link a{display:inline-block;padding:4px 0;font-family:var(--head);font-size:var(--fs-small);font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--red)}

/* ---------- What We Test: diagram, with the same items as text for phones and screen readers ---------- */
.wwt-diagram img{width:100%;max-width:900px;height:auto;aspect-ratio:900/510}
.wwt-list{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- service flip cards ---------- */
.service-card{position:relative;display:grid;min-height:250px;margin:0 0 40px;cursor:default;outline-offset:3px}
.service-card>*{grid-area:1/1;margin:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;transition:transform .5s ease-in-out;border-radius:10px;overflow:hidden}
.service-card .service-front{position:absolute;inset:0;transform:rotateY(0deg);z-index:1}
.service-card .service-front img{display:block;width:100%;height:100%;object-fit:cover}
.service-card .service-back{transform:rotateY(180deg);background:var(--panel);display:flex;flex-direction:column;justify-content:center;text-align:center;padding:16px 20px;font-size:.9375rem;line-height:1.55;color:var(--ink)}
.service-card .service-back-title{font-family:var(--head);font-size:var(--fs-sub);font-weight:600;margin:0 0 10px}
.service-card .service-back p{margin:0 0 10px}
.service-card .service-back>:last-child{margin-bottom:0}
@media (hover:hover){
  html:not(.uses-touch) .service-card:hover .service-front{transform:rotateY(-180deg)}
  html:not(.uses-touch) .service-card:hover .service-back{transform:rotateY(0deg)}
}
.service-card:focus-visible .service-front,.service-card.is-flipped .service-front{transform:rotateY(-180deg)}
.service-card:focus-visible .service-back,.service-card.is-flipped .service-back{transform:rotateY(0deg)}
.service-hint{display:none;position:absolute;right:12px;bottom:12px;padding:6px 12px;border-radius:2px;background:var(--navy);color:#fff;font-family:var(--head);font-size:var(--fs-small);font-weight:600}
@media (hover:none){.service-hint{display:block}}
@media (prefers-reduced-motion:reduce){.service-card>*{transition:none}}

/* ---------- certification logos ---------- */
.client-table{width:100%;table-layout:fixed;border-collapse:collapse;border:1px solid var(--line)}
.client-table td{border:1px solid var(--line);padding:6px;vertical-align:middle;text-align:center}
.client-table img{max-width:100%;height:auto;display:block;margin:auto}

/* ---------- accordions ---------- */
.wp-block-details{margin:0 0 15px;border:0;overflow:hidden}
.wp-block-details summary{display:block;background:var(--navy);color:#fff;font-family:var(--head);font-weight:600;font-size:var(--fs-small);letter-spacing:1px;line-height:1.2;text-transform:uppercase;padding:13px 30px 12px;cursor:pointer;list-style:none;position:relative}
.wp-block-details summary::-webkit-details-marker{display:none}
.wp-block-details summary:hover{background:var(--navy-light)}
.wp-block-details[open] summary{background:var(--red)}
.wp-block-details[open] summary:hover{background:var(--red-dark)}
.wp-block-details summary:focus-visible{outline-offset:-4px;outline-color:#fff}
.wp-block-details[open]{padding-bottom:25px}
.wp-block-column .wp-block-details>*:not(summary){margin:14px 0 4px}
.wp-block-details ul{margin:0 2px 14px 20px;padding-left:20px}
.wp-block-details li{margin:8px 0;line-height:1.6}

/* ---------- galleries and the full-screen viewer ---------- */
.wp-block-gallery{gap:10px!important}
.wp-block-gallery .wp-block-image img{border-radius:2px;aspect-ratio:2/1;object-fit:cover;width:100%;height:auto}
.wp-block-gallery figure.wp-block-image img{cursor:zoom-in}
html.msa-lb-lock{overflow:hidden}
.msa-lb{position:fixed;inset:0;z-index:2147483647;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;touch-action:pan-y}
.msa-lb[hidden]{display:none}
.msa-lb.is-open{opacity:1}
.msa-lb-img{display:block;width:96vw;height:92vh;max-width:none;object-fit:contain;margin:0;user-select:none}
.msa-lb button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;width:48px;height:48px;border-radius:50%;font:300 34px/1 Arial,sans-serif;display:flex;align-items:center;justify-content:center;padding:0 0 4px;transition:background .15s}
.msa-lb button:hover,.msa-lb button:focus-visible{background:rgba(255,255,255,.3);outline:2px solid #fff;outline-offset:2px}
.msa-lb-close{top:16px;right:16px}
.msa-lb-nav{top:50%;margin-top:-24px}
.msa-lb-nav.prev{left:16px}.msa-lb-nav.next{right:16px}
.msa-lb-count{position:absolute;bottom:14px;left:0;right:0;pointer-events:none;text-align:center;color:var(--on-dark);font-size:var(--fs-small)}
.msa-lb.single .msa-lb-nav,.msa-lb.single .msa-lb-count{display:none}

/* ---------- hero slider ---------- */
.magics-hero{--k:calc(min(100vw,1230px)/1230);--hero-h:min(52.85vw,650px);position:relative;overflow:hidden;background:#000;margin:0!important}
.magics-hero>.wp-block-cover{min-height:var(--hero-h)!important;padding:0}
.magics-hero:not(.is-ready){height:var(--hero-h)}
.magics-hero:not(.is-ready)>.wp-block-cover:not(:first-of-type){display:none}
.magics-hero.is-ready{height:var(--hero-h)}
.magics-hero.is-ready>.wp-block-cover{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none;margin:0}
.magics-hero.is-ready>.wp-block-cover.is-active{opacity:1;pointer-events:auto;z-index:1}
/* slides stay undisplayed until about to be shown, so their lazy images don't download on page load */
.magics-hero.is-ready>.wp-block-cover:not(.is-near):not(.is-active){display:none}
.magics-hero .wp-block-cover__inner-container{position:absolute;left:50%;top:0;transform:translateX(-50%);width:calc(var(--k)*1230);height:calc(var(--k)*650);max-width:none;padding:0;display:block}
.magics-hero .hero-photo{position:absolute;margin:0}
.magics-hero .hero-photo img{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.magics-hero .hero-logo{z-index:2}
.magics-hero .hero-logo img{filter:brightness(0) invert(1)}
.magics-hero .hero-text{position:absolute;z-index:2;margin:0;transform:translateX(-50%);text-align:center;white-space:nowrap;font-family:var(--head);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.magics-hero .hero-text p{margin:0;line-height:1.15}
.magics-hero .hero-title{font-weight:700;font-size:max(1.375rem,calc(var(--k)*60))}
.magics-hero .hero-title.is-main{font-size:max(2rem,calc(var(--k)*100))}
.magics-hero .hero-sub{font-weight:500;font-size:max(.875rem,calc(var(--k)*32));margin-top:calc(var(--k)*8)}
.magics-hero .hero-sub.is-main{font-size:max(1rem,calc(var(--k)*44));margin-top:0}
.magics-hero .hero-s1 .wp-block-cover__inner-container::before{content:"";position:absolute;left:calc(var(--k)*215);top:calc(var(--k)*130);width:calc(var(--k)*800);height:calc(var(--k)*400);background:radial-gradient(ellipse closest-side,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 40%,rgba(0,0,0,.25) 75%,rgba(0,0,0,0) 100%);pointer-events:none;z-index:1}
.magics-hero .hero-s3 .hero-text{color:var(--navy);text-shadow:0 0 14px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.9)}  /* the one pale photo: navy text */
.hero-nav{position:absolute;margin:0;top:50%;transform:translateY(-50%);z-index:5;width:30px;height:110px;border:0;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hero-nav.prev{left:0}.hero-nav.next{right:0}
.hero-nav svg{width:12px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.hero-nav .hero-thumb{position:absolute;top:0;width:180px;height:140px;background:#fff;color:var(--ink);font:600 var(--fs-small)/1.2 var(--head);text-transform:uppercase;display:none;text-align:left;box-shadow:0 2px 10px rgba(0,0,0,.4);padding:0 0 10px}
.hero-nav.prev .hero-thumb{left:30px}.hero-nav.next .hero-thumb{right:30px}
.hero-nav .hero-thumb img{display:block;width:100%;height:110px;object-fit:cover;filter:grayscale(1);opacity:.8;margin-bottom:8px}
.hero-nav .hero-thumb span{padding:0 10px;display:block}
.hero-nav:hover .hero-thumb,.hero-nav:focus-visible .hero-thumb{display:block}
@media (hover:none){.hero-nav .hero-thumb{display:none!important}}
.auto-toggle{display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.auto-toggle svg{width:12px;height:14px;fill:currentColor;pointer-events:none}
.hero-pause{position:absolute;margin:0;right:14px;bottom:14px;z-index:5;width:36px;height:36px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff}
.hero-pause:hover{background:rgba(0,0,0,.85)}
@media (prefers-reduced-motion:reduce){.magics-hero.is-ready>.wp-block-cover{transition:none}html{scroll-behavior:auto}}

/* ---------- reviews ---------- */
.magics-reviews{position:relative}
.magics-reviews .rev-viewport{overflow:hidden}
.magics-reviews:not(.is-ready)>.wp-block-quote:not(:first-of-type){display:none}
.magics-reviews .rev-track{display:flex;will-change:transform;transition:transform .3s ease}
.magics-reviews .rev-track.no-anim{transition:none}
.magics-reviews .rev-track>.wp-block-quote{flex:0 0 100%;min-width:0}
.magics-reviews .wp-block-quote{margin:0 0 46px;border:1px solid var(--line);padding:18px 20px 12px;line-height:1.7;min-height:110px;position:relative}
.magics-reviews .wp-block-quote p{margin:0 0 10px;font-style:italic}
.magics-reviews .wp-block-quote cite{display:block;position:absolute;left:0;top:calc(100% + 8px);margin:0;padding-left:20px;line-height:1.3;font-style:normal;font-weight:700;font-size:var(--fs-body);color:var(--ink)}
.rev-nav{position:absolute;right:0;top:-72px;display:flex;gap:6px;z-index:2}
.rev-nav button{width:34px;height:34px;border:2px solid var(--control);background:#fff;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,border-color .15s,color .15s}
.rev-nav button:hover{background:var(--red);border-color:var(--red);color:#fff}
.rev-nav .rev-arrow svg{width:8px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
@media (prefers-reduced-motion:reduce){.magics-reviews .rev-track{transition:none}}

/* ---------- contact form ---------- */
.wpcf7 form label{display:block;margin:0 0 14px;color:var(--ink);line-height:1.6}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 textarea{display:block;width:100%;margin-top:6px;border:2px solid var(--control);border-radius:2px;background:#fff;padding:10px 15px;font:var(--fs-body) var(--body);color:var(--ink)}
.wpcf7 textarea{height:262px}
.wpcf7 input:not([type=submit]):focus,.wpcf7 textarea:focus{border-color:var(--red);box-shadow:0 0 0 1px var(--red);outline:0}
.wpcf7 .wpcf7-not-valid{border-color:var(--red)}
.wpcf7-not-valid-tip{display:inline-block;margin-top:3px;color:var(--red);font-size:.75rem;letter-spacing:1.5px;text-transform:uppercase}
.wpcf7 form .wpcf7-response-output{margin:28px 7px 14px;padding:3px 14px;border:2px solid var(--red);background:#fff}
.wpcf7 form.sent .wpcf7-response-output{border-color:#46b450}

/* ---------- call now bar (plugin): same red as every other action ---------- */
#callnowbutton{background-color:var(--red)!important}
#callnowbutton{transition:background-color .15s}
#callnowbutton:hover,#callnowbutton:active,#callnowbutton:focus-visible{background-color:var(--red-dark)!important;text-decoration:none}
#callnowbutton span{font-family:var(--head)}

/* ---------- footer: light text on dark, links white ---------- */
.site-footer{background:var(--dark);color:var(--on-dark);font-size:var(--fs-label);line-height:1.7;margin:0!important}
.site-footer p{margin:0 0 12px;color:var(--on-dark);font-size:var(--fs-label)}
.site-footer a{color:#fff}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-columns .wp-block-column:first-child p a{text-decoration:underline}
.footer-connect{position:relative;z-index:5;padding:0!important;height:0}
.footer-connect>.wp-block-group{position:absolute;z-index:5;left:max(30px,calc(50% - 565px));top:-16px;background:var(--red);padding:0 20px;height:45px;align-items:center;gap:14px!important}
.footer-connect>.wp-block-group::before{content:"";position:absolute;left:-9px;top:0;width:0;height:0;border-right:9px solid var(--red-dark);border-bottom:9px solid transparent}
.footer-connect .footer-follow{margin:0;font-weight:700;color:#fff}
.footer-connect .social-icons{gap:6px;font-size:var(--fs-small)}
.footer-connect .social-icons a{width:28px;height:28px;border:1px solid #fff;border-radius:50%;color:#fff;transition:color .15s,background .15s}
.footer-connect .social-icons a:hover,.footer-connect .social-icons a:focus-visible{background:#fff;color:var(--red);text-decoration:none}
.footer-widgets{padding:70px 0 40px!important}
.footer-columns{gap:46px!important;margin:0}
.footer-title{font-family:var(--head);font-size:var(--fs-label);font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:#fff;margin:0 0 20px}
.footer-contact{position:relative;padding-left:35px}
.footer-contact::before{content:"";position:absolute;left:2px;top:4px;width:14px;height:14px;background:var(--on-dark);-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.footer-address{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}
.footer-phone{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.01z'/%3E%3C/svg%3E")}
.footer-mail{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2V5zm2 2v.5l8 5.5 8-5.5V7H4zm16 3.4-8 5.5-8-5.5V17h16v-6.6z'/%3E%3C/svg%3E")}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dotted #444;color:var(--on-dark);font-size:var(--fs-label)}
.hours li:last-child{border:0}
.hours li span{font-weight:700;color:#fff}
.site-info{background:var(--darker);padding:20px 0!important;font-size:var(--fs-small);color:var(--on-dark)}
.site-info .copy-text{margin:0;color:var(--on-dark);font-size:var(--fs-small)}
.footer-nav{font-size:var(--fs-small);gap:0!important}
.footer-nav .wp-block-navigation__container{gap:6px 18px!important}
.footer-nav a.wp-block-navigation-item__content{color:#fff!important;padding:4px 0;text-decoration:none}
.footer-nav a.wp-block-navigation-item__content:hover{text-decoration:underline}

/* ---------- side margins once the 1130px content no longer fits ---------- */
@media (max-width:1190px){
  .masthead,.page-title-bar,.footer-widgets,.site-info{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
  .vc-row.alignfull{padding-left:var(--gutter);padding-right:var(--gutter)}
  .page-intro{padding-left:var(--gutter);padding-right:var(--gutter)}
  .page-intro~.cta-band.wp-block-cover{margin-left:var(--gutter);margin-right:var(--gutter)}
  .cta-band .wp-block-cover__inner-container,.page-banner .wp-block-cover__inner-container,.page-wide-inner{padding-left:var(--gutter);padding-right:var(--gutter)}
  .page-body .vc-row.alignfull,.page-wide-inner .vc-row.alignfull,.page-wide .vc-row.alignfull{padding-left:0;padding-right:0}
}
@media (min-width:782px) and (max-width:1190px){
  .topbar{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
  .page-body,.page-wide{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
}

/* ---------- tablet: multi-column rows stay side by side; they only stack on phones ---------- */
@media (min-width:600px) and (max-width:781px){
  .wp-block-columns:not(.footer-columns){flex-wrap:nowrap!important;gap:30px!important}
  .wp-block-columns:not(.footer-columns)>.wp-block-column{flex-basis:0!important;flex-grow:1!important;min-width:0}
  .wp-block-columns:not(.footer-columns)>.wp-block-column[style*="flex-basis:50%"]{flex-basis:50%!important;flex-grow:0!important}
  .wp-block-columns:not(.footer-columns)>.wp-block-column[style*="flex-basis:33.33%"]{flex-basis:33.33%!important;flex-grow:0!important}
  .wp-block-columns:not(.footer-columns)>.wp-block-column[style*="flex-basis:66.66%"]{flex-basis:66.66%!important;flex-grow:0!important}
  .footer-columns{flex-wrap:wrap!important}
  .footer-columns>.wp-block-column{flex-basis:calc(50% - 23px)!important}
  .row-bleed .wp-block-columns{gap:20px!important}
}

/* ---------- phones and small tablets ---------- */
@media (max-width:781px){
  .page-body .vc-row:first-child>.wp-block-image:first-child img{height:auto;aspect-ratio:5/3!important}
  :root{--fs-page:1.875rem;--fs-section:1.375rem}
  .wp-block-columns{gap:20px!important}
  /* top bar: stacked rows, phone numbers first */
  .topbar-inner{flex-direction:column;align-items:stretch!important;padding:0!important}
  .topbar-left,.topbar-right{flex-direction:column!important;align-items:stretch!important;width:100%}
  .topbar .social-icons.topbar-social{justify-content:center;height:auto;padding:8px 0;gap:10px;border:0;border-bottom:1px solid var(--line)}
  .topbar .social-icons.topbar-social a{width:44px;height:44px}
  .topbar .topbar-review{display:block;text-align:center;padding:0!important;line-height:1.5;border:0;border-bottom:1px solid var(--line)}
  .topbar .topbar-right .topbar-item{display:block;text-align:center;padding:0!important;line-height:1.5;border:1px solid var(--line);margin-top:-1px}
  .topbar .topbar-item a{display:inline-block;padding:12px 8px}
  .topbar .topbar-right .topbar-item:nth-child(1){order:2}
  .topbar .topbar-right .topbar-item:nth-child(2){order:1}
  .masthead{padding:34px var(--gutter) 30px!important}
  .masthead-inner{flex-wrap:nowrap!important;align-items:center!important}
  .site-logo img{width:175px!important}
  .main-nav a.wp-block-navigation-item__content{padding:8px 0}
  /* title bar centred; left-aligned when it has no button */
  .page-title-bar{padding-left:0!important;padding-right:0!important}
  .page-title-inner{flex-direction:column;align-items:center!important;justify-content:center;text-align:center;padding:40px var(--gutter) 36px!important;gap:26px!important}
  .page-title-bar h1.page-title{text-align:center}
  .page-title-inner:not(:has(.wp-block-buttons)){align-items:flex-start!important;justify-content:flex-start;text-align:left;padding-bottom:30px!important}
  .page-title-inner:not(:has(.wp-block-buttons)) h1.page-title{text-align:left}
  .page-body>.wp-block-post-content,.page-body>.page-inner{padding:25px var(--gutter)}
  .page-wide{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
  /* gradients become an even tint: the text covers the full width of the photo */
  .cta-band::after,.page-banner.has-title::after{background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.68) 60%,rgba(0,0,0,.42) 100%)}
  .page-notitle .cta-band.wp-block-cover{min-height:362px!important}
  .wp-block-gallery.has-nested-images.columns-5{gap:10px!important}
  .wp-block-gallery.has-nested-images.columns-5>.wp-block-image{width:calc((100% - 40px)/5)!important;flex:0 0 calc((100% - 40px)/5)!important}
  .vc-row .wp-block-gallery{margin-bottom:56px}
  .magics-card:not(.is-logo){margin-bottom:26px}
  .rev-nav{top:-62px}
  .footer-widgets{padding-top:60px!important}
  /* bigger tap targets for the numbers people call */
  .site-footer .footer-contact a,.page-wide-inner a[href^="tel:"],.page-wide-inner a[href^="mailto:"]{display:inline-block;padding:6px 0}
}
@media (max-width:600px){
  .wwt-list{position:static;width:auto;height:auto;margin:0 0 20px;padding-left:20px;overflow:visible;clip-path:none;white-space:normal;columns:2;column-gap:24px}
  .wwt-list li{margin:0 0 6px;break-inside:avoid;line-height:1.4}
  .hero-nav{width:28px;height:44px}
  .hero-nav svg{width:8px;height:12px}
  .hero-pause{width:32px;height:32px;right:auto;left:8px;bottom:8px}
  .magics-hero .hero-s3 .hero-text{left:max(calc(var(--k)*300),8.25rem)}
  .magics-hero .hero-s4 .hero-text{left:min(calc(var(--k)*1020),calc(100% - 5.5rem))}
}