/* ==========================================================================
   MBPS design system
   Hand built for the WordPress rebuild. No Webflow, no framework.

   Deliberately static: nothing fades in, nothing is hidden at load, there
   are no scroll listeners and no reveal animations. Every element paints
   at its final position on first render. Transitions exist only on hover
   and focus, and are disabled entirely for reduced-motion users.
   ========================================================================== */

:root{
  --brand:#ec1c23;
  --brand-dark:#861014;
  --brand-deep:#5e0b0e;
  --ink:#0a0a0a;
  --ink-2:#2a2a2a;
  --ink-3:#5b5b5b;
  --line:#e6e6e6;
  --line-2:#c5c5c5;
  --bg:#ffffff;
  --bg-alt:#f4f4f5;
  --black:#000000;
  --white:#ffffff;

  --font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Measured on the original: content sits in a 1350px box with 45px gutters
     at a 1440 viewport, and stays 1350 on wider screens. Section backgrounds
     are still full bleed, because the colour lives on .section while only the
     .wrap inside it is constrained. */
  --maxw:1320px;
  --pad:clamp(20px,4vw,45px);
  /* Distance from a .wrap's content edge out to the viewport edge. Anything
     that has to reach the edge of the screen offsets by this. */
  --edge:calc((100vw - min(100vw, var(--maxw) + var(--pad) * 2)) / 2 + var(--pad));
  --r:6px;
  --r-lg:12px;
  --shadow:0 2px 6px rgba(0,0,0,.05),0 12px 28px rgba(0,0,0,.07);
  --t:.18s ease;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Body copy runs about 15 percent larger than a default 17px scale, which is
   what the original sets. Headings are sized in rem off the root, so raising
   this moves paragraphs, lists and inline text without touching them. */
body{margin:0;font-family:var(--font);color:var(--ink-2);background:var(--bg);
  font-size:19.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* The original runs its headings at 700-800, not 900. At 900 everything reads
   a notch heavier and slightly cramped next to it. */
h1,h2,h3,h4,h5{color:var(--ink);font-weight:800;line-height:1.14;margin:0 0 .5em;
  letter-spacing:-.02em}
/* A handful of section headings are 60px on the original rather than the 40px
   the rest run at. Opt in per heading rather than inflating every h2. */
.h2--xl{font-size:clamp(2.3rem,4.3vw,3.75rem);line-height:1.17}
h1{font-size:clamp(2.2rem,4.4vw,3.3rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin:.35em 0}
strong{font-weight:900;color:var(--ink)}
.red{color:var(--brand)}

/* ---------- layout ---------- */
/* Content is boxed to 1130px and centred; section backgrounds stay full bleed
   because the background lives on .section and only the .wrap inside it is
   constrained. Measured against the original: on a 1440 viewport its content
   container is 1130 wide with 155px either side, which is what this produces.
   Anything that has to touch the viewport edge opts out explicitly. */
.wrap{width:100%;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto;
  padding:0 var(--pad)}
.section{padding:clamp(56px,7vw,96px) 0;position:relative}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--black);color:#cfcfcf}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark strong{color:#fff}
.section--tight{padding:clamp(34px,4vw,56px) 0}
.rule{height:6px;background:var(--brand);width:100%}

/* Explicit column counts, not auto-fit. On a full width container auto-fit
   packs in extra columns and quietly changes the layout, which is how the
   two column card grids became three. */
.grid{display:grid;gap:26px;grid-template-columns:1fr}
@media (min-width:760px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1100px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}
/* A lone card on the final row sits centred rather than stranded left. */
.grid--2 > :last-child:nth-child(odd){grid-column:1 / -1;max-width:calc(50% - 13px);
  margin-inline:auto}
@media (max-width:759px){
  .grid--2 > :last-child:nth-child(odd){max-width:none}
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.lede{font-size:1.22rem;color:var(--ink-3);max-width:62ch}
/* Readability guard on full width layouts: body prose keeps a sane measure
   even when the container spans a 2560px monitor. Cards and grids are
   unaffected because their columns already constrain the line length. */
.section > .wrap > p,
.section > .wrap > ul,
.section > .wrap > ol{max-width:78ch}
.split > div > p:not(.lede):not(.quote__name):not(.quote__role){max-width:72ch}

/* Photograph runs off the edge of the viewport rather than sitting inside the
   gutter, which is how the original frames this pairing. */
.split--bleed{align-items:stretch}
.split--bleed > div:last-child{display:flex}
.elementor .split--bleed > div:last-child > img,
.split--bleed > div:last-child > img{width:calc(100% + var(--edge));max-width:none;
  margin-right:calc(-1 * var(--edge));height:100%;object-fit:cover;border-radius:0}

/* Red circle ticks, as on the original, instead of plain disc bullets. */
.ticks{list-style:none;margin:1.5rem 0;padding:0}
.ticks li{position:relative;padding-left:46px;margin:.95em 0;font-weight:700;
  line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.05em;width:27px;height:27px;
  border-radius:50%;background-color:var(--brand);background-repeat:no-repeat;
  background-position:center;background-size:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E")}
.section--dark .lede{color:#b9b9b9}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.narrow{max-width:820px;margin-inline:auto}

/* eyebrow: short red dash then red label */
.eyebrow{display:flex;align-items:center;gap:14px;font-size:1.02rem;font-weight:700;
  color:var(--brand);margin:0 0 1rem}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--brand);flex:none}
.center .eyebrow{justify-content:center}

/* ---------- buttons ---------- */
/* Measured against the original in a browser rather than guessed: its CTAs
   run 20-22px at weight 500-700 in a 68px tall pill. The rebuild was 17px at
   weight 900, which is why they read as small even though the box was
   slightly taller. Label size is what the eye judges, not box height. */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.92em 2.9em;border-radius:var(--r);
  font-weight:700;font-size:1.32rem;border:2px solid transparent;cursor:pointer;
  line-height:1.2;transition:background var(--t),color var(--t),border-color var(--t)}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark);color:#fff}
.btn--dark{background:var(--black);color:#fff}
.btn--dark:hover{background:#222;color:#fff}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.section--dark .btn--ghost{border-color:#3a3a3a;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.6rem}
.center .btn-row,.btn-row.center{justify-content:center}

/* metro line — the "MBPS provides IT services in Phoenix, Las Vegas and Houston"
   footer line on every service page. Quiet by design: it is a geographic signal
   for crawlers and a wayfinding aid, not a CTA competing with the buttons above. */
.metro-line{margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid var(--line-2);
  font-size:1.02rem;color:var(--ink);opacity:.72}
.metro-line a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.metro-line a:hover{color:var(--brand)}
.section--dark .metro-line{border-top-color:#3a3a3a;color:#fff;opacity:.8}

/* phone call-out block, as on the hero */
/* Measured against the original in a browser: 329x86 box, 60px icon, an 18px
   label at weight 600 over a 30px number at weight 900. The rebuild was at
   roughly two thirds of that on every axis, which is why it read as a much
   smaller button. Sizes are in px because the original's are. */
.phone-cta{display:inline-flex;align-items:center;gap:12px;background:var(--brand);
  color:#fff;border-radius:8px;padding:13px 20px 13px 14px;font-weight:900}
.phone-cta:hover{background:var(--brand-dark);text-decoration:none;color:#fff}
.phone-cta svg{width:60px;height:60px;fill:currentColor;flex:none}
.phone-cta small{display:block;font-size:18px;font-weight:600;line-height:24px;opacity:.95}
.phone-cta b{display:block;font-size:30px;font-weight:900;line-height:35px;letter-spacing:0}

/* ---------- cards ---------- */
.card{background:#fff;border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow)}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.card--num{display:grid;grid-template-columns:auto 1fr;gap:0 20px;align-items:start}
.card__num{width:56px;height:56px;border-radius:50%;background:var(--brand);
  color:#fff;font-weight:900;display:grid;place-items:center;font-size:1.05rem}
.card--num h3{margin-top:.4em}
.card--num p{grid-column:1 / -1;margin-top:.7em;color:var(--ink-3)}

/* ---------- promo panel ---------- */
.promo{background:linear-gradient(180deg,var(--brand) 0%,var(--brand-deep) 100%);
  border-radius:var(--r-lg);padding:clamp(44px,6vw,76px) clamp(24px,5vw,64px);
  text-align:center;color:#fff}
.promo h2{color:#fff;max-width:22ch;margin-inline:auto}
.promo p{color:rgba(255,255,255,.92);max-width:60ch;margin-inline:auto;font-size:1.1rem}

/* ---------- media ---------- */
/* Square by default. On the original most photographs have no radius at all;
   rounding is the exception, applied per block. */
.media{border-radius:0;overflow:hidden}
.media--edge{border:2px solid var(--brand);border-radius:var(--r-lg);overflow:hidden}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.collage img{border:2px solid var(--brand);border-radius:var(--r-lg)}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-around;gap:34px}
.logos img{max-height:52px;width:auto}

/* ---------- people grid ----------
   Photo with a white card overlapping its lower edge: red role above a bold
   name, left aligned, matching the original MBPS team cards. */
/* Four across, like the original. auto-fill was packing six columns into the
   full width container and shrinking every portrait. */
.people{display:grid;grid-template-columns:repeat(4,1fr);
  gap:34px 26px;padding-bottom:10px}
.person{position:relative;display:flex;flex-direction:column}
.person__photo{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;
  border-radius:var(--r-lg);background:var(--bg-alt)}
.person__card{position:relative;margin:-64px 14px 0;background:#fff;
  border-radius:var(--r-lg);padding:18px 22px;box-shadow:0 2px 6px rgba(0,0,0,.06),
  0 14px 34px rgba(0,0,0,.12)}
.person__role{margin:0 0 .15em;color:var(--brand);font-weight:400;font-size:.98rem;
  line-height:1.3}
.person__name{margin:0;font-size:1.28rem;font-weight:900;color:var(--ink);line-height:1.2}
.section--dark .person__card{background:#fff}
@media (max-width:640px){
  .people{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .person__card{margin:-52px 10px 0;padding:14px 16px}
  .person__name{font-size:1.12rem}
}

/* ---------- stat band ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;
  background:var(--brand);border-radius:var(--r-lg);padding:44px 28px;color:#fff}
.stat{text-align:center;padding:8px 12px}
.stat b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;line-height:1.1}
.stat span{display:block;margin-top:.4em;font-size:.95rem;opacity:.92}

/* ---------- portrait images ----------
   Editorial portraits inside a split section should not grow to fill the
   column; capped so they read as a photo, not a hero. */
/* Elementor's frontend sets .elementor img{max-width:100%}, which is one
   class more specific than .media--portrait and quietly wins, so the cap has
   to be written at least as specifically as that. */
.elementor img.media--portrait,.media--portrait{max-width:340px;width:100%;height:auto;
  border-radius:var(--r-lg)}
/* A tall portrait photograph in a split column will otherwise stretch the row
   to its own natural height and dwarf the copy beside it. */
.elementor img.media--cap,.media--cap{max-height:420px;width:100%;object-fit:cover;
  border-radius:var(--r-lg)}

/* Icon + title + body block. The original draws the mark plainly at ~34px
   rather than sitting it in a tinted chip. */
.feature-lite__ico{display:block;margin-bottom:16px}
.feature-lite__ico svg,.feature-lite__ico img{width:50px;height:50px;fill:var(--brand)}
.feature-lite h3{margin:0 0 .4em;font-size:1.5rem;font-weight:700}
.feature-lite p{color:var(--ink-3);margin:0}
.section--dark .feature-lite p{color:#b9b9b9}

/* White card set on the grey page, as the original frames its About block. */
.panel{background:#fff;border-radius:var(--r-lg);padding:clamp(30px,3.6vw,58px)}
.split--narrow-first{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
/* The photograph is taller than the two feature blocks beside it; centring
   leaves a dead band above them. */
.panel>.split:last-child{align-items:start}
/* 549x300 on the original. Capping only the height let it run 420 tall and
   crop the subject's head out of frame. */
/* The source is a 1500x2250 portrait. Cropped to a 300px landscape band from
   the centre it lands on the subject's torso and cuts his head off; the
   original frames head to waist. */
.elementor .panel__media img.media--cap,.panel__media img{margin-left:auto;max-height:300px;
  object-position:50% 18%}
/* Lato sets narrower than the original's Satoshi, so the same column width
   gives two lines here and three there. Cap the measure so it breaks the way
   the original does at any window width. */
.panel .h2--xl{max-width:8.2em}

/* Ideal clients: photograph first, copy second, with the original's red
   diagonal behind the picture. */
.serve{align-items:center}
.serve>div:first-child{position:relative}
.serve>div:first-child::before{content:"";position:absolute;inset:-26px -30px -26px -34px;
  background:var(--brand);clip-path:polygon(14% 0,100% 0,86% 100%,0 100%);z-index:0}
.serve>div:first-child img{position:relative;z-index:1}

/* Meet our team: heading left, intro beside it, on the dark panel. */
.team-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:end;
  border-bottom:1px solid #2a2a2a;padding-bottom:26px}
.team-head h2{margin-bottom:0}
.team-head p{margin:0;color:#bdbdbd}
.section--dark .person__name{color:var(--ink)}
@media (max-width:900px){
  .split--narrow-first,.team-head{grid-template-columns:1fr}
  .serve>div:first-child::before{display:none}
}
/* The portrait sits level with the eyebrow above the quote rather than being
   centred against a much taller column of text, and its column is only as
   wide as the photograph. A 1fr/1fr split leaves a bay of empty grey between
   the picture and the copy that the original does not have. */
.quote-body{align-self:start}
.split:has(>div>.media--portrait){align-items:start;
  grid-template-columns:auto minmax(0,1fr);gap:clamp(30px,3.4vw,54px)}

/* ---------- logo marquee ----------
   Continuous horizontal scroll for partner and certification logos. The
   track is duplicated once and translated by exactly -50%, so the loop is
   seamless. Pauses on hover, and holds still entirely for reduced-motion
   users, who instead get a normal scrollable row. */
.marquee{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:72px;width:max-content;
  animation:mbps-marquee 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee img{max-height:54px;max-width:210px;width:auto;object-fit:contain;flex:none}
/* The certification badges are square, so a height cap alone renders them far
   smaller than the wordmarks in the first strip. Give them their own size. */
.marquee--slow .marquee__track{animation-duration:64s;gap:88px}
.marquee--slow img{max-height:78px;max-width:130px}
@keyframes mbps-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .marquee__track{animation:none}
}

/* ---------- tabbed panel (core services) ---------- */
.tabs{display:grid;grid-template-columns:minmax(300px,.9fr) 1.6fr;gap:0;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.tabs__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.tabs__btn{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  padding:26px 28px;background:#fff;border:0;border-bottom:1px solid var(--line);
  font-family:inherit;font-size:1.12rem;font-weight:900;color:var(--ink);cursor:pointer;
  transition:background var(--t),color var(--t)}
.tabs__btn:last-child{border-bottom:0}
.tabs__btn[aria-selected="true"]{background:var(--brand);color:#fff}
.tabs__btn:hover:not([aria-selected="true"]){background:var(--bg-alt)}
.tabs__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  background:var(--brand-tint,#fdecec);flex:none}
.tabs__btn[aria-selected="true"] .tabs__ico{background:rgba(255,255,255,.22)}
.tabs__ico svg{width:22px;height:22px;fill:var(--brand)}
.tabs__btn[aria-selected="true"] .tabs__ico svg{fill:#fff}
/* The photograph fills the panel and a white card sits over its lower right
   corner, which is how the original presents each service. */
.tabs__panels{position:relative;min-height:100%}
.tabs__panel{display:none;height:100%}
.tabs__panel[data-active="true"]{display:flex;align-items:flex-end;justify-content:flex-end;
  position:relative;min-height:430px}
.tabs__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tabs__body{position:relative;background:#fff;width:min(80%,660px);padding:28px 32px 30px;
  box-shadow:0 18px 44px rgba(0,0,0,.16)}
.tabs__head{display:flex;align-items:center;gap:14px;margin-bottom:.75em}
.tabs__head h3{margin:0}
.tabs__num{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;
  background:var(--black);color:#fff;font-weight:900;font-size:.82rem;border-radius:6px}
.tabs__body p{color:var(--ink-3);max-width:60ch;margin:0}
.link-arrow{display:inline-flex;align-items:center;gap:.55em;margin-top:1.1em;
  color:var(--brand);font-weight:700;font-size:.95rem}
.link-arrow:hover{color:var(--brand-dark);text-decoration:none}
@media (max-width:900px){
  .tabs{grid-template-columns:1fr}
  .tabs__panel img{height:220px}
}

/* ---------- testimonials carousel ----------
   Scroll-snap, no library. Every card is in the DOM and readable by
   crawlers; the carousel only changes what is on screen. Works with no
   JavaScript at all: it degrades to a horizontally scrollable row. */
.tst{position:relative}
.tst__track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(340px,1fr);
  gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 4px 22px;scrollbar-width:thin}
.tst__item{scroll-snap-align:start;min-width:0}
.tst__item p{color:var(--ink-3)}
.tst__who{margin-top:1.2em;color:var(--ink)}
.tst__who b{display:block;color:var(--brand);font-size:1.1rem}
.tst__who span{display:block;font-size:.9rem;color:var(--ink-3);font-weight:400}
.tst__nav{display:flex;gap:10px;justify-content:center;margin-top:10px}
.tst__btn{width:46px;height:46px;border-radius:50%;border:2px solid var(--line-2);
  background:#fff;color:var(--ink);font-size:1.1rem;cursor:pointer;
  transition:background var(--t),border-color var(--t),color var(--t)}
.tst__btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.tst__btn[disabled]{opacity:.35;cursor:default}
.section--dark .tst__btn{background:transparent;border-color:#3a3a3a;color:#fff}
.tst-grid .card p:first-child{color:var(--ink-3)}
@media (max-width:640px){
  .tst__track{grid-auto-columns:minmax(84vw,1fr);gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .tst__track{scroll-behavior:auto}
}

/* ---------- article prose ---------- */
.prose{max-width:none;margin-inline:auto;font-size:1.06rem}
.prose h2{margin-top:1.8em;font-size:clamp(1.5rem,2.6vw,2rem)}
.prose h3{margin-top:1.5em}
.prose img{margin:2em auto;border-radius:var(--r-lg)}
.prose ul,.prose ol{padding-left:1.3em}
.prose blockquote{margin:1.8em 0;padding:.2em 0 .2em 22px;border-left:4px solid var(--brand);
  font-size:1.1rem;color:var(--ink)}
.prose .embed{margin:2em 0}

/* ---------- quote ---------- */
.quote{border-left:4px solid var(--brand);padding-left:22px}
.quote__name{color:var(--brand);font-size:1.55rem;font-weight:900;line-height:1.2;margin:0}
.quote__role{color:var(--ink);font-weight:700;margin:0}

/* ---------- hero media collage ----------
   Main team photo with two supporting shots beneath, as on the original. */
.hero-media{display:flex;flex-direction:column;gap:16px}
.hero-media__main{width:100%;border-radius:var(--r-lg)}
.hero-media__pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-media__pair img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10;
  border:2px solid var(--brand);border-radius:var(--r-lg)}
@media (max-width:640px){
  .hero-media__pair{gap:12px}
}

/* ---------- hero ---------- */
.hero{background:var(--black);color:#c9c9c9;padding:clamp(56px,7vw,104px) 0}
.hero h1{color:#fff}
.hero .lede{color:#b9b9b9;font-size:1.15rem}
/* Inner pages use a light hero. Only the homepage runs the black one, which
   matches the original: black is reserved for the front page and for the
   dark feature bands further down each page. */
.hero--page{background:var(--bg);color:var(--ink-2);
  padding:clamp(46px,5vw,76px) 0;border-bottom:1px solid var(--line)}
.hero--page h1{color:var(--ink)}
.hero--page .lede{color:var(--ink-3)}

/* About page hero: a darkened photograph behind, a portrait inset beside the
   copy. The original uses this rather than the light inner page split. */
.hero--page.hero--photo{background:var(--black);color:#fff;position:relative;
  overflow:hidden;padding:clamp(56px,6vw,92px) 0}
.hero--photo__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.2;filter:grayscale(.25)}
.hero--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.66) 100%)}
.hero--photo>.wrap{z-index:1}
.hero--photo>.wrap{position:relative}
/* Same split layout as .hero--page, only on a black field. The original runs
   the security pages this way so the illustration reads against black rather
   than floating on white. No bottom hairline: the red .rule that follows the
   section is the divider. */
.hero--page.hero--dark{background:var(--black);color:#c9c9c9;border-bottom:0}
.hero--dark h1,.hero--dark h2,.hero--dark h3{color:#fff}
.hero--dark .lede{color:#cfcfcf}
.hero--dark .eyebrow{color:var(--brand)}
.hero--dark strong{color:#fff}
.hero--dark .btn--ghost{border-color:#3a3a3a;color:#fff}

/* The about banner's headline is 83px on the original, not the 48px the
   homepage hero uses. */
.hero--photo h1{color:#fff;font-size:clamp(2.6rem,6vw,5.2rem);line-height:1.13}
.hero--photo .lede{color:#d2d2d2}
.hero--photo .split{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);align-items:center}
.elementor .hero--photo__inset img,.hero--photo__inset img{width:100%;max-width:330px;
  border-radius:var(--r-lg);display:block}

/* Full bleed photographic hero, the pattern used on masterthyself.org: the
   image is a real <img> behind the content rather than a CSS background, so
   it can be eager loaded and carry alt text, with a one sided scrim keeping
   the copy legible. --bgpos frames the photograph per page. */
.hero--page.hero--cover{position:relative;overflow:hidden;background:var(--black);
  color:#fff;min-height:min(72vh,620px);display:flex;align-items:center;
  padding:clamp(60px,7vw,110px) 0}
/* The height has to be forced at this specificity. A plain .hero--cover__bg
   rule loses to .elementor img{height:auto}, which let the image render at
   its natural ratio, overflow the section and get clipped from the top —
   so object-position appeared to do nothing however it was set. */
.hero--page.hero--cover .hero--cover__bg,
.hero--cover__bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:var(--bgpos,center);border-radius:0}
/* An even wash rather than a one sided gradient, so the photograph reads
   across the whole hero the way christosoil.com does, with a soft vignette
   and a text shadow carrying the contrast for the copy. */
.hero--cover::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,4,4,.7) 0%,rgba(6,4,4,.5) 48%,rgba(6,4,4,.42) 100%),
    radial-gradient(130% 105% at 28% 50%,rgba(0,0,0,.2) 0%,rgba(0,0,0,.55) 100%)}
.hero--cover h1,.hero--cover .lede,.hero--cover .eyebrow{
  text-shadow:0 2px 14px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.5)}
.hero--cover>.wrap{position:relative;z-index:2}
.hero__inner{max-width:720px}
.hero--cover h1{color:#fff}
.hero--cover .lede{color:#dcdcdc}
.hero--cover .eyebrow{color:var(--brand)}
@media (max-width:820px){
  .hero--page.hero--cover{min-height:0}
  .hero--cover::after{background:linear-gradient(180deg,rgba(6,4,4,.9),rgba(6,4,4,.8))}
}

/* The original's inner page banner on the utility and listing pages: black,
   centred, no photograph, eyebrow ruled on both sides. Confirmed from the
   Webflow stylesheet, .inner-banner-section uses --secondary-1 (#040302)
   with .inner-banner-content{text-align:center}. */
.hero--page.hero--banner{background:var(--black);color:#fff;text-align:center;
  padding:clamp(66px,8vw,110px) 0 clamp(54px,6.5vw,92px)}
.hero--banner h1{color:#fff;text-transform:capitalize}
.hero--banner .lede{color:#c4c4c4;max-width:620px;margin-inline:auto}
.hero--banner .eyebrow{justify-content:center;color:var(--brand)}
.hero--banner .eyebrow::after{content:"";width:34px;height:2px;background:var(--brand);flex:none}

/* Feature cards: image on top, title, body. */
.card--feature{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--feature .card__img{width:100%;height:210px;object-fit:cover}
.card--feature h3{margin:24px 26px .4em}
.card--feature p{margin:0 26px 26px;color:var(--ink-3)}

/* Threat character cards, /malware-protection "Meet the malware family".
   The original runs these as black panels four across: the portrait bleeds to
   the top edge of the card, a small red category label sits above a large
   white name, and a red rule separates the name from the description. */
.card--threat{background:var(--black);color:#c9c9c9;box-shadow:none;
  border-radius:var(--r-lg);padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--threat .card__img{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;
  object-position:center top}
.card--threat .eyebrow{display:block;margin:22px 24px .3em;color:var(--brand);
  font-size:.8rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  line-height:1.4}
.card--threat .eyebrow::before{display:none}
.card--threat h3{color:#fff;margin:0 24px .8em;font-size:clamp(1.3rem,1.7vw,1.55rem);
  padding-bottom:.55em;border-bottom:3px solid var(--brand)}
.card--threat p{margin:0 24px 26px;color:#bdbdbd;font-size:.97rem;line-height:1.6}

/* ---------- header ---------- */
/* Hello Elementor's theme.css caps .site-header:not(.dynamic-header) and
   .site-footer:not(.dynamic-footer) at 1140px, which leaves a white gutter
   either side of the black bar. Both are full bleed here, so opt out at the
   same specificity Hello uses. */
.site-header:not(.dynamic-header),.site-footer:not(.dynamic-footer){
  max-width:none;margin-left:0;margin-right:0}
.site-header{position:sticky;top:0;z-index:900;background:var(--black);color:#fff;width:100%}
.site-header__bar{display:flex;align-items:stretch;gap:18px;min-height:82px}
.site-header__logo{display:flex;align-items:center;padding-right:8px}
.logo{display:block}
.logo svg{display:block;height:34px;width:auto}
.logo--white{color:#fff}
.logo--ink{color:var(--ink)}

.site-nav{margin-left:auto;display:flex;align-items:stretch;gap:2px;list-style:none;
  margin-block:0;padding:0}
.site-nav li{position:relative;list-style:none;display:flex;align-items:center}
.site-nav>li>a,.site-nav>li>button{display:inline-flex;align-items:center;gap:.4em;
  padding:.6em .95em;font-weight:700;font-size:16px;color:#fff;background:none;border:0;
  font-family:inherit;cursor:pointer;border-radius:var(--r);white-space:nowrap}
.site-nav>li>a:hover,.site-nav>li>button:hover,
.site-nav>li>button:focus,.site-nav>li>button:active,
.site-nav>li>button:focus-visible{color:var(--brand);text-decoration:none;
  background:none;border:0;box-shadow:none;outline:0}
.site-nav__caret{width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.8}

/* Mega panel. Dark like the original, four fixed columns. Explicit column
   counts rather than auto-fit, because under a full width header auto-fit
   repacks the columns and the panel silently wraps onto a second row.

   The wide panel is measured against the header, not against its own menu
   item. Anchored to the item it is 1180px wide starting at a point near the
   right of the bar, so it hangs off the left edge of the document and the
   whole page gains a horizontal scrollbar. */
.site-nav>li.has-mega--wide{position:static}
.mega{position:absolute;top:100%;background:#0d0d0d;color:#fff;
  box-shadow:0 30px 60px rgba(0,0,0,.5);padding:40px 44px 46px;display:none}
.has-mega--wide>.mega{left:var(--pad);right:var(--pad)}
/* Narrow panels hang from the left edge of their own item so they read as
   belonging to it. Right aligning them pushes the panel back under the
   neighbouring items, which looks detached. */
.has-mega--narrow>.mega{left:0;right:auto;min-width:340px;padding:24px 28px}
.mega a.mega__sub{padding-left:18px;font-size:.88rem;color:#b6b6b6}
.mega a.mega__sub:hover{color:var(--brand)}

/* Cost comparison calculator: three inputs across the top and a plain results
   list, which is the layout Alex wrote and prefers over the card version. */
.mbps-calc--compare{max-width:1000px;margin:0 auto}
.mbps-calc--compare .mc-cmp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mbps-calc--compare .mc-cmp-field{display:block;padding:0;border:0}
.mbps-calc--compare .mc-cmp-field label{display:block;font-size:14px;font-weight:700;
  color:#111;margin-bottom:8px}
/* The estimator's own stylesheet pins .mc-num-input to a 64px numeric stepper.
   These three are full width text fields, so the override needs to outrank it. */
.mbps-calc.mbps-calc--compare .mc-num-input{width:100%;max-width:none;padding:12px 14px;
  border:1px solid #d9d9d9;border-radius:6px;font-size:16px;font-weight:400;
  font-family:inherit;background:#fff;color:#111;text-align:left}
.mbps-calc--compare .mc-cmp-note{font-size:12.5px;color:#7c7c78;margin:14px 0 0;
  text-align:center;line-height:1.5}
.mbps-calc--compare .mc-cmp-results{list-style:none;margin:30px 0 0;padding:0}
.mbps-calc--compare .mc-cmp-results li{font-weight:700;font-size:17px;color:#111;margin:.45em 0}
.mbps-calc--compare .mc-cmp-results b{color:var(--brand);font-weight:700}
.mbps-calc--compare .mc-cmp-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.mbps-calc--compare .mc-btn-dark{background:#1c1c1c;color:#fff;border:0;border-radius:6px;
  padding:13px 26px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer}
.mbps-calc--compare .mc-btn-dark:hover{background:#333}
.mbps-calc--compare .mc-cta.mc-cta--inline{display:inline-block;width:auto;margin-top:0;
  padding:13px 26px}
@media (max-width:760px){
  .mbps-calc--compare .mc-cmp-row{grid-template-columns:1fr}
}
@media print{
  .site-header,.site-footer,.mc-cmp-actions,.rule{display:none!important}
}
.site-nav li[data-open="true"]>.mega{display:block}
.mega__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 30px}
/* The four column heads were the same weight and near enough the same size as
   the 28 links beneath them, so the whole panel read as one long list. Real
   weight plus a rule turns it back into four scannable groups. */
.mega__title{display:block;font-size:1.02rem;font-weight:800;letter-spacing:.005em;
  text-transform:none;color:#fff;margin:0 0 .5em;padding:0 0 .62em;
  border-bottom:1px solid rgba(255,255,255,.16)}
.mega__title:hover{color:var(--brand);text-decoration:none}
.mega a{display:block;padding:.55em 0;color:#d8d8d8;font-size:.93rem;font-weight:400;
  line-height:1.35}
.mega a:hover{color:var(--brand);text-decoration:none}
/* Strip along the bottom of the wide mega panel. Fills the dead space under
   the short Infrastructure column and gives someone who did not find their
   problem in the list somewhere to go. */
.mega__foot{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 30px;
  margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.mega a.mega__promo{padding:0}
.mega__promo-label{display:block;font-weight:700;font-size:.95rem;color:#fff}
.mega__promo-sub{display:block;font-size:.83rem;color:#9d9d9d;margin-top:3px}
.mega a.mega__promo:hover .mega__promo-label{color:var(--brand)}
.site-nav li[data-open="true"]>button{color:var(--brand)}
.site-nav li[data-open="true"] .site-nav__caret{transform:rotate(-135deg) translateY(-2px)}

.site-nav>li>a.header-phone{display:flex;align-items:center;gap:12px;background:var(--brand-dark);
  color:#fff;padding:0 22px;font-weight:900;white-space:nowrap;border-radius:0}
.site-nav>li>a.header-phone:hover{background:var(--brand);color:#fff;text-decoration:none}
.site-nav>li.header-btn>a.btn--primary{background:var(--brand);color:#fff;border-radius:0;
  padding:0 36px;height:100%;display:flex;align-items:center}
.site-nav>li.header-btn>a.btn--primary:hover{background:var(--brand-dark);color:#fff}
.site-nav>li.header-phone-li{display:flex}
.site-nav>li.header-phone-li,.site-nav>li.header-btn{align-items:stretch}
/* Header phone block and Contact Us, measured against the original: a 14px
   label at weight 300 over a 20px number at weight 600, and a 20px button
   label. The rebuild had all three at roughly 12-16px, which is the same
   undersized-label problem the body CTAs had. */
.header-phone svg{width:34px;height:34px;fill:currentColor;flex:none}
.header-phone small{display:block;font-size:14px;font-weight:300;line-height:1.35;opacity:.95}
.header-phone b{display:block;font-size:20px;font-weight:600;line-height:1.3}
.site-nav>li.header-btn>a.btn--primary{font-size:20px;font-weight:600}
.header-btn{display:flex;align-items:center}
.header-btn .btn{border-radius:0;height:100%;padding-inline:26px}
.user-portal{display:inline-flex;align-items:center;gap:.5em}
.user-portal svg{width:16px;height:16px;fill:var(--brand)}

.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:12px;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:2px;background:#fff;margin:6px 0;
  transition:transform var(--t),opacity var(--t)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- footer ---------- */
.site-footer{background:var(--black);color:#a9a9a9;padding:70px 0 30px;font-size:.95rem;
  border-top:6px solid var(--brand)}
.site-footer a{color:#d6d6d6}
.site-footer a:hover{color:#fff}
.site-footer h4{color:#fff;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  margin:0 0 1.2em}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.footer__logo{margin-bottom:20px}
.footer__logo .logo svg{height:40px}
.footer__links{list-style:none;margin:0;padding:0}
.footer__links li{margin:.5em 0}
/* Small caps label above the corporate address, so "Corporate Headquarters"
   reads as a heading for the address rather than as part of it. */
.footer__label{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.55;margin-bottom:3px}

/* Review chooser cards on /review. One card per Google Business Profile, so
   the row grows with the business rather than needing a redesign. */
.rvcta{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));margin-top:40px}
.rvcta__card{background:#fff;border:1px solid var(--line,#E6E5E1);border-radius:var(--r-lg);padding:clamp(26px,3vw,40px)}
.rvcta__card h3{font-size:1.55rem;margin:0 0 6px}
.rvcta__addr{font-weight:600;opacity:.75;margin:0 0 10px}
.rvcta__card .btn-row{margin-top:22px}
.market__links{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}

/* Review headline figures. Numbers come from the live GoHighLevel aggregate,
   so they cannot drift from the grid below them. */
.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;
  text-align:center}
.statband__fig b{display:block;font-size:clamp(2.6rem,5vw,4rem);font-weight:900;line-height:1.05;
  color:var(--brand)}
.statband__fig span{display:block;margin-top:6px;font-size:1rem;font-weight:600;opacity:.75}

/* Contact row under a CTA button. Replaces the phone / email / address lines
   the Webflow extraction dumped into the page as loose paragraphs, twice. */
.ctainfo{list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;margin:24px 0 0;padding:0;font-size:1rem}
.ctainfo li{position:relative;opacity:.85}
.ctainfo li+li::before{content:"";position:absolute;left:-15px;top:.55em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45}
.ctainfo a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.18)}
.ctainfo a:hover{border-bottom-color:currentColor}
.section--dark .ctainfo a,.hero .ctainfo a{border-bottom-color:rgba(255,255,255,.3)}
.center .ctainfo{justify-content:center}
@media (max-width:640px){
  .ctainfo{gap:10px;flex-direction:column}
  .ctainfo li+li::before{display:none}
}
.footer__social{display:flex;gap:12px;margin-top:22px}
.footer__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid #3a3a3a;transition:background var(--t),border-color var(--t)}
.footer__social a:hover{background:var(--brand);border-color:var(--brand)}
.footer__social svg{width:16px;height:16px;fill:currentColor}
.footer__bottom{border-top:1px solid #242424;margin-top:48px;padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.86rem}

/* ---------- misc ---------- */
.embed iframe{width:100%;border:0;display:block;border-radius:var(--r-lg)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.85em 1em;border-bottom:1px solid var(--line)}
th{font-weight:900;color:var(--ink)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:999;background:#fff;padding:12px 18px;border-radius:var(--r)}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .site-nav>li>a,.site-nav>li>button{padding:.6em .7em;font-size:.92rem}
  .header-phone{padding:0 14px}
}
@media (max-width:1024px){
  .footer__top{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:960px){
  .nav-toggle{display:block}
  .site-nav{position:fixed;inset:82px 0 0;background:var(--black);flex-direction:column;
    align-items:stretch;gap:0;padding:12px var(--pad) 48px;overflow-y:auto;display:none}
  .site-header[data-open="true"] .site-nav{display:flex}
  .site-nav li{display:block}
  .site-nav>li>a,.site-nav>li>button{width:100%;justify-content:space-between;
    padding:1.05em .2em;border-bottom:1px solid #232323;border-radius:0}
  .mega{position:static;display:none;box-shadow:none;border-radius:0;padding:6px 0 18px;
    min-width:0;background:transparent}
  .mega a{color:#c9c9c9}
  .mega__cols{grid-template-columns:1fr;gap:18px}
  .mega__foot{grid-template-columns:1fr;gap:16px;margin-top:20px;padding-top:18px}
  .header-phone{padding:18px 0;background:none;justify-content:flex-start}
  .header-btn{margin-top:14px}
  .header-btn .btn{width:100%;justify-content:center;border-radius:var(--r);padding:1em}
  .collage{grid-template-columns:1fr}
}
@media (max-width:640px){
  .footer__top{grid-template-columns:1fr}
  body{font-size:16px}
  .card{padding:26px}
  .card--feature,.card--threat{padding:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- pull quote ---------- */
.quote-mark{display:block;color:#f5b9bb;font-size:4.6rem;line-height:.55;font-weight:900;
  margin:.15em 0 .25em}
.quote-body h2{font-style:italic}
.quote-body p:not(.eyebrow){font-style:italic}

/* ---------- progressive disclosure ---------- */
.more{margin-top:26px}
.more[hidden]{display:none}
.more-toggle{display:inline-flex;align-items:center;gap:.6em;background:none;border:0;padding:0;
  font-family:inherit;font-size:1rem;font-weight:700;color:var(--brand);cursor:pointer;
  text-decoration:underline;text-underline-offset:5px}
.more-toggle i{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;
  background:var(--brand);color:#fff;border-radius:5px;font-style:normal;font-size:.72rem;
  text-decoration:none}
.more-toggle[aria-expanded="true"] i{transform:rotate(180deg)}

/* ---------- contact block ---------- */
.formblock{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;overflow:hidden;
  border-radius:var(--r-lg)}
.formblock__left{background:var(--black);color:#fff;padding:clamp(30px,3.4vw,52px)}
.formblock__left h2{color:#fff}
.formblock__left img{display:block;width:100%;margin-top:30px;border-radius:var(--r)}
.formblock__right{background:var(--brand);padding:clamp(24px,2.6vw,40px)}
/* Reserve the height. The GoHighLevel embed resizes itself once its script
   runs, and without a floor the panel rendered as an empty red block on a
   cold load until the page was refreshed. */
.formblock__right iframe{border-radius:var(--r);min-height:620px}
.embed iframe{min-height:620px}

/* ---------- FAQ accordion ---------- */
/* Column flow so the numbering reads 1-2-3 down the left and 4-5-6 down the
   right, the way the original orders them. Every answer stays in the HTML. */
.faq{display:grid;grid-template-columns:1fr;gap:0 64px}
.faq__item{border-top:1px solid var(--line)}
.faq__item:last-child{border-bottom:1px solid var(--line)}
.faq__item>summary{display:flex;align-items:flex-start;gap:28px;padding:30px 0;cursor:pointer;
  font-weight:700;font-size:1.2rem;line-height:1.42;list-style:none;color:var(--ink)}
.faq__item>summary::-webkit-details-marker{display:none}
.faq__item>summary::marker{content:""}
.faq__n{flex:none;min-width:26px;font-weight:400;font-size:1.32rem;color:var(--ink);
  line-height:1.3}
.faq__q{flex:1}
.faq__ico{position:relative;flex:none;width:28px;height:28px;margin-top:2px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;left:0;top:13px;
  width:28px;height:3px;background:var(--ink)}
.faq__ico::after{transform:rotate(90deg);transition:transform var(--t)}
.faq__item[open] .faq__ico::after{transform:rotate(0)}
.faq__a{padding:0 0 30px 54px;color:var(--ink-3)}
.faq__a p{margin:0 0 1em}
.faq__a p:last-child{margin-bottom:0}

/* Column flow needs the row count to be exactly half the questions, or the
   grid spills into a third column and every question wraps to five lines.
   --rows is set per block from the question count. */
@media (min-width:1100px){
  .faq{grid-template-columns:1fr 1fr;grid-auto-flow:column;
    grid-template-rows:repeat(var(--rows,3),auto)}
  .faq__item:last-child{border-bottom:1px solid var(--line)}
  .faq__item:nth-child(var(--rows,3)){border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .formblock{grid-template-columns:1fr}
  .tabs__body{width:100%}
  .tabs__panel[data-active="true"]{min-height:0;display:block}
  .tabs__panel img{position:static;height:220px}
}

/* ---------- blog index and category archives ---------- */
.bfilter{display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;margin-bottom:38px}
.bfilter__cats{display:flex;flex-wrap:wrap;gap:10px}
.bfilter__dates{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bfilter__dates label{display:flex;align-items:center;gap:8px;font-size:.9rem;
  color:var(--ink-3)}
.bfilter__dates input{border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  font-family:inherit;font-size:.9rem;color:var(--ink);background:#fff}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;
  padding:9px 20px;font-size:.94rem;font-weight:700;color:var(--ink);background:#fff;
  cursor:pointer;font-family:inherit}
.chip:hover{border-color:var(--ink);text-decoration:none;color:var(--ink)}
.chip--on{background:var(--brand);border-color:var(--brand);color:#fff}
.chip--on:hover{color:#fff;border-color:var(--brand)}
.chip--go{background:var(--black);border-color:var(--black);color:#fff}
.chip--go:hover{background:#222;color:#fff}

/* Pinned post: artwork left, panel right, overlapping slightly, the way the
   original leads its blog index. */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  margin-bottom:52px}
.feat__media{display:block;overflow:hidden;background:var(--bg-alt)}
.feat__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.feat__panel{background:var(--bg-alt);padding:clamp(26px,3.2vw,48px);margin-left:-40px}
.feat__flag{margin:0 0 .5em;color:var(--brand);font-weight:700;font-size:1rem}
.feat h2{font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.2;margin:0 0 .5em}
.feat h2 a{color:var(--ink)}
.feat h2 a:hover{color:var(--brand);text-decoration:none}
.feat__text{color:var(--ink-3);margin:0 0 1.2em}
.feat__date{display:flex;align-items:center;gap:10px;margin:0;color:var(--ink-3);
  font-size:.95rem}
.feat__date svg{width:18px;height:18px;fill:currentColor;flex:none}

.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden}
.bcard__media{display:block;background:var(--bg-alt);aspect-ratio:16/10;overflow:hidden}
.bcard__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.bcard__body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.bcard__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  font-size:.82rem;color:var(--ink-3)}
.bcard__cat{background:var(--brand);color:#fff;font-weight:700;font-size:.76rem;
  padding:5px 12px;border-radius:4px}
.bcard__cat:hover{background:var(--brand-dark);color:#fff;text-decoration:none}
.bcard__flag{background:var(--black);color:#fff;font-weight:700;font-size:.76rem;
  padding:5px 12px;border-radius:4px}
.bcard h3{font-size:1.16rem;margin:0 0 .5em;line-height:1.3}
.bcard h3 a{color:var(--ink)}
.bcard h3 a:hover{color:var(--brand);text-decoration:none}
.bcard__text{color:var(--ink-3);font-size:.95rem;margin:0 0 1em}
.bcard .link-arrow{margin-top:auto}
.bcard--featured{border-color:var(--brand)}

.bpager{margin-top:46px}
.bpager ul{display:flex;justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.bpager li{margin:0}
.bpager a,.bpager span{display:inline-flex;align-items:center;min-width:44px;
  justify-content:center;padding:10px 16px;border:1px solid var(--line);border-radius:999px;
  font-weight:700;color:var(--ink)}
.bpager a:hover{border-color:var(--ink);text-decoration:none}
.bpager .current{background:var(--brand);border-color:var(--brand);color:#fff}
.bempty{text-align:center;color:var(--ink-3);padding:40px 0}

@media (max-width:1000px){ .bgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:820px){
  .feat{grid-template-columns:1fr}
  .feat__panel{margin-left:0}
}
@media (max-width:640px){
  .bgrid{grid-template-columns:1fr}
  .bfilter{flex-direction:column;align-items:stretch}
}

/* ---------- HTML sitemap ---------- */
.smap{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.smap__card{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;background:#fff}
.smap__card--wide{grid-column:1 / -1}
.smap__card--wide ul{columns:3;column-gap:30px}
.smap__head{margin:0 0 .8em;font-weight:800;font-size:1.1rem;color:var(--ink)}
.smap__head a{color:var(--ink)}
.smap__head a:hover{color:var(--brand);text-decoration:none}
.smap__card ul{list-style:none;margin:0;padding:0}
.smap__card li{margin:0 0 .55em;break-inside:avoid}
.smap__card li a{color:var(--ink-2);font-size:.98rem}
.smap__card li a:hover{color:var(--brand);text-decoration:none}
@media (max-width:1000px){
  .smap{grid-template-columns:repeat(2,1fr)}
  .smap__card--wide ul{columns:2}
}
@media (max-width:640px){
  .smap{grid-template-columns:1fr}
  .smap__card--wide ul{columns:1}
}

/* ---------- contact hero ----------
   Copy and contact details over the photograph, the enquiry form floating on
   a red panel beside it, which is how the original frames this page. */
.chero{align-items:stretch}
.chero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px);align-items:center;width:100%}
.chero__copy{max-width:620px}
.cinfo{list-style:none;margin:1.6rem 0 0;padding:0}
.cinfo li{display:flex;align-items:center;gap:14px;margin:0 0 .9em;color:#e8e8e8;
  font-size:1.02rem}
.cinfo a{color:#e8e8e8}
.cinfo a:hover{color:#fff}
.cinfo__ico{display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:9px;background:var(--brand)}
.cinfo__ico svg{width:18px;height:18px;fill:#fff}
.chero__form{background:var(--brand);border-radius:var(--r-lg);padding:clamp(18px,2vw,28px);
  box-shadow:0 26px 60px rgba(0,0,0,.4)}
.chero__form iframe{border-radius:var(--r);min-height:620px;background:transparent}
@media (max-width:980px){
  .chero__grid{grid-template-columns:1fr}
  .chero{min-height:0}
}

/* Full bleed map strip. */
.section--flush{padding:0}
.mapwrap iframe{display:block;width:100%;border:0;min-height:420px}

/* Coverage map. Drawn as an inline SVG from an Albers projection of the
   contiguous states, so it scales cleanly and needs no third party embed. */
.usmap-wrap{margin-top:40px}
.usmap{display:block;width:100%;height:auto;max-width:1000px;margin:0 auto}
.usmap__land{fill:#1a1414;stroke:#3d2c2c;stroke-width:1.5;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.usmap__halo{fill:var(--brand);opacity:.15}
.usmap__star{fill:var(--brand)}
.usmap__label{fill:#fff;font-family:var(--font);font-weight:800;font-size:19px}
.usmap__pin{transition:transform var(--t)}
@media (max-width:700px){ .usmap__label{font-size:26px} }

/* Alternating split sections: every other one puts the photograph on the
   left, which is how the original staggers a run of them. */
.split--flip > div:first-child{order:2}
.split--flip > div:last-child{order:1}
@media (max-width:900px){
  .split--flip > div:first-child,.split--flip > div:last-child{order:0}
}

/* Awards: dark panel, photograph left, copy and the certification strip on
   the right. */
.awards{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
  background:#0d0d0d;color:#fff;border-radius:var(--r-lg);overflow:hidden;align-items:stretch}
.awards__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
/* Brand lockup in place of a photograph. */
.awards__media--brand{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:clamp(30px,3.5vw,54px);
  background:radial-gradient(120% 100% at 30% 20%,#2a0a0c 0%,#120607 55%,#0a0505 100%);
  position:relative;overflow:hidden}
.awards__media--brand::before{content:"";position:absolute;inset:-30% -10% auto -40%;height:70%;
  background:var(--brand);opacity:.16;transform:rotate(-18deg)}
.awards__logo{position:relative;display:block;color:#fff;width:min(100%,240px)}
.awards__logo svg{display:block;width:100%;height:auto;fill:currentColor}
.awards__tag{position:relative;color:var(--brand);font-weight:800;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;text-align:center}
.awards__body{padding:clamp(26px,3.2vw,48px)}
.awards__body h2{color:#fff}
.awards__body p{color:#c6c6c6}
.awards__body .eyebrow{color:var(--brand)}
.awards__body .marquee{margin-top:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.awards__body .marquee img{filter:brightness(0) invert(1);opacity:.85}
@media (max-width:900px){ .awards{grid-template-columns:1fr} }

/* ---------- areas we serve ----------
   One horizontal band per market: office details on the left, the towns that
   market covers on the right. */
.market{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,44px);margin-bottom:26px}
.market:last-of-type{margin-bottom:0}
.market__eyebrow{margin:0 0 .4em;color:var(--brand);font-weight:700;font-size:.95rem}
.market h2{margin:0 0 .7em;font-size:clamp(1.5rem,2.4vw,2rem)}
.market__contact{list-style:none;margin:0 0 1.1em;padding:0}
.market__contact li{display:flex;align-items:flex-start;gap:14px;margin:0 0 .8em;
  color:var(--ink-2)}
.market__contact a{color:var(--ink-2)}
.market__contact a:hover{color:var(--brand)}
.market__ico{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:8px;background:#fdecec}
.market__ico svg{width:18px;height:18px;fill:var(--brand)}

/* Photographic band. The image sits behind a dark scrim so the type keeps its
   contrast; --bg is set per band in the markup. */
.market--photo{position:relative;overflow:hidden;border-color:transparent;color:#fff;
  background:#0d0d0d}
/* The photograph runs at full strength; a one sided gradient darkens the left
   where the office details sit and thins out to the right so the picture is
   actually visible. The areas list gets its own soft panel so it stays
   readable over the brighter side. */
/* --bgpos lets a band frame its own photograph; the reception shot needs to
   sit high so the lettering on the wall stays in view. */
.market--photo::before{content:"";position:absolute;inset:0;
  background:var(--bg) var(--bgpos,center) / cover no-repeat}
.market--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,5,5,.95) 0%,rgba(8,5,5,.88) 34%,
    rgba(8,5,5,.55) 62%,rgba(8,5,5,.3) 100%)}
.market--photo>*{position:relative;z-index:1}
.market--photo h2,.market--photo .market__areas-label{color:#fff}
.market--photo .market__contact li,.market--photo .market__contact a{color:#e2e2e2}
.market--photo .market__contact a:hover{color:#fff}
.market--photo .market__ico{background:rgba(236,28,35,.22)}
.market--photo .market__ico svg{fill:#fff}
.market--photo .arealist li{color:#d5d5d5}
.market--photo .arealist li a{color:#fff}
.market--photo .arealist li a:hover{color:var(--brand)}
.market--photo .market__note{color:#d5d5d5}
.market--photo .market__areas,.market--photo .market__note{
  background:rgba(8,5,5,.55);border-radius:10px;padding:22px 26px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.market--photo .market__note{border-left:3px solid var(--brand)}
/* One list per market. Towns with a page of their own are links; the rest are
   plain text, because linking them would mean spinning up a thin page each. */
.market__areas-label{margin:0 0 .7em;font-weight:800;font-size:1.16rem;color:var(--ink)}
.arealist{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35em 28px}
.arealist li{margin:0;font-size:1.12rem;line-height:1.7;color:var(--ink-2)}
.arealist li a{color:var(--ink);font-weight:700}
.arealist li a:hover{color:var(--brand);text-decoration:none}
.market__page{margin:14px 0 0;font-weight:700}
.market__page a{color:var(--brand)}
.market--hq{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.market__note{color:var(--ink-3);border-left:3px solid var(--brand);padding-left:20px}
.market__note p{margin:0}

@media (max-width:820px){
  .market{grid-template-columns:1fr}
}
@media (max-width:520px){ .arealist{grid-template-columns:1fr} }

/* ---------- careers ---------- */
.job-row{display:grid;grid-template-columns:1fr 1.35fr .8fr auto;gap:24px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 30px}
.job-row__label{margin:0 0 .35em;font-size:1.02rem;color:var(--ink)}
.job-row__value{margin:0;font-size:1.12rem;font-weight:800;color:var(--ink)}
.job-row__value--light{font-weight:400;color:var(--ink-2)}
.job-row__cta .btn{white-space:nowrap}

.job{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,60px);
  align-items:start}
.job__body h3{margin:1.5em 0 .5em;font-size:1.14rem}
.job__body ul{margin:0 0 1.2em;padding-left:1.2em}
.job__body li{margin:.4em 0}
.job__meta{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;
  position:sticky;top:110px}
.job__meta-item{display:flex;align-items:center;gap:14px;margin:0;padding:14px 0;
  font-size:.98rem;border-bottom:1px solid var(--line)}
.job__meta-item:last-child{border-bottom:0}
.job__meta-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:8px;background:#fdecec}
.job__meta-ico svg{width:19px;height:19px;fill:var(--brand)}

.applyform{background:var(--brand);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);
  margin-top:40px;color:#fff}
.applyform__title{margin:0 0 18px;font-weight:800;font-size:1.05rem}
.applyform__note{margin:0 0 16px;background:rgba(255,255,255,.16);border-radius:6px;
  padding:10px 14px;font-weight:700}
.applyform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.applyform input,.applyform textarea{display:block;width:100%;margin-bottom:14px;
  padding:13px 15px;border:0;border-radius:6px;font-family:inherit;font-size:.98rem;
  color:var(--ink);background:#fff}
.applyform textarea{resize:vertical}
.applyform__submit{background:var(--black);color:#fff;border:0;border-radius:6px;
  padding:14px 34px;font-family:inherit;font-weight:800;font-size:1rem;cursor:pointer}
.applyform__submit:hover{background:#222}

@media (max-width:900px){
  .job{grid-template-columns:1fr}
  .job__meta{position:static}
  .job-row{grid-template-columns:1fr;gap:16px}
}

/* ---------- Google reviews ----------
   Rendered from GoHighLevel's own data rather than its iframe, so every
   review is on the page and the text is crawlable. Colours taken from the
   widget's config so it reads the same as the embedded version. */
.rv{background:#111;border:1px solid #292929;border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,34px);color:#f0f0f0}
.rv__head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid #292929;margin-bottom:22px}
.rv__head>div:first-child{flex:1 1 320px;min-width:0}
.rv__title{margin:0;font-size:1.28rem;font-weight:800;color:#fff}
.rv__blurb{margin:.3em 0 0;font-size:.86rem;color:#bdbdbd}
.rv__score{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.15}
.rv__score b{font-size:2rem;font-weight:800;color:#fff}
.rv__stars{color:#ffbc00;font-size:.9rem;letter-spacing:.1em}
.rv__count{font-size:.78rem;color:#bdbdbd}
.rv__write{flex:none;background:#155eef;color:#fff;font-weight:700;font-size:.92rem;
  padding:11px 20px;border-radius:6px;white-space:nowrap}
.rv__write:hover{background:#0f4bc4;color:#fff;text-decoration:none}

.rv__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rv__item{background:#111;border:1px solid #292929;border-radius:8px;padding:16px 18px;
  display:flex;flex-direction:column}
.rv__rating{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.rv__rating b{color:#ffbc00;font-weight:800;font-size:.95rem}
.rv__rating span{color:#ffbc00;font-size:.82rem;letter-spacing:.08em}
.rv__rating time{margin-left:auto;font-size:.72rem;color:#bdbdbd}
.rv__text{margin:0 0 14px;font-size:.84rem;line-height:1.55;color:#f0f0f0}
.rv__who{margin:auto 0 0;font-size:.8rem;color:#bdbdbd}

@media (max-width:1100px){ .rv__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .rv__grid{grid-template-columns:1fr}
  .rv__head{flex-direction:column;align-items:flex-start}
  .rv__score{align-items:flex-start}
}

/* ---------- square photographs ----------
   Counted on the original: 16 of 26 images on the homepage and 7 of 15 on the
   about page have no corner radius. Rounding is the exception there, not the
   rule, so photographs are reset here while cards, panels and embeds keep
   theirs. The two collage strips keep 8px because the original rounds those
   inside their red border. */
.elementor img.media,.elementor img.media--portrait,.elementor img.media--cap,
.media,.media--portrait,.media--cap,.media--edge,
.hero-media__main,.hero--photo__inset img,.prose img,.card__img,
.person__photo,.tabs__panel img{border-radius:0}
.hero-media__pair img,.collage img{border-radius:8px}

/* ---------- F1 giveaway popup ----------
   Everything is namespaced under .mbps-pop so it cannot reach the rest of the
   site. Only the car is an image; the layout, badges and type are drawn in
   CSS so the panel stays sharp at any size. */
.mbps-pop{--pop-gold:#f5b323;--pop-red:#ec1c23;
  position:relative;background:#0b0505;color:#fff;font-family:var(--font);
  border:3px solid var(--pop-red);border-radius:14px;overflow:hidden;
  max-width:1040px;margin:0 auto;line-height:1.35}
.mbps-pop *{box-sizing:border-box}
.mbps-pop p{margin:0}

.mbps-pop__top{position:relative;min-height:270px;display:flex;align-items:center;
  background:radial-gradient(120% 130% at 78% 45%,#3a0a0c 0%,#120607 55%,#0b0505 100%)}
.mbps-pop__car{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;
  object-position:left center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.mbps-pop__head{position:relative;padding:30px 34px;max-width:56%}
.mbps-pop__logo{display:block;color:#fff;margin-bottom:18px}
.mbps-pop__logo svg{display:block;height:30px;width:auto}

.mbps-pop__title{margin:0;font-style:italic;font-weight:900;letter-spacing:-.01em;
  text-transform:uppercase;line-height:.92}
.mbps-pop__t1{display:block;color:#fff;font-size:clamp(26px,3.1vw,42px)}
.mbps-pop__t2{display:block;color:var(--pop-gold);font-size:clamp(38px,4.6vw,62px);
  text-shadow:0 3px 0 rgba(0,0,0,.35)}
.mbps-pop__sub{display:inline-block;margin-top:16px;background:var(--pop-red);color:#fff;
  font-style:italic;font-weight:900;font-size:clamp(13px,1.2vw,16px);
  padding:8px 16px;border-radius:3px}

.mbps-pop__body{padding:22px 34px 30px}
.mbps-pop__kicker{color:var(--pop-gold);font-style:italic;font-weight:900;
  text-transform:uppercase;font-size:clamp(15px,1.5vw,19px);letter-spacing:.01em;
  margin-bottom:16px}

.mbps-pop__grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.62fr;gap:16px;
  align-items:start}
.mbps-pop__prizes{display:contents}

.mbps-pop__prize{border-left:1px solid #2b1517;padding-left:16px}
.mbps-pop__prize:first-child{border-left:0;padding-left:0}
.mbps-pop__place{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mbps-pop__flag{width:26px;height:19px;flex:none}
.mbps-pop__place span{background:var(--pop-red);color:#fff;font-style:italic;font-weight:900;
  text-transform:uppercase;font-size:11px;letter-spacing:.04em;padding:4px 12px;border-radius:3px}
.mbps-pop__exp{color:var(--pop-gold);font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:10px;letter-spacing:0;margin-bottom:10px;white-space:nowrap}
.mbps-pop__prize ul{list-style:none;margin:0;padding:0}
.mbps-pop__prize li{position:relative;padding-left:14px;font-size:12.5px;color:#f2f2f2;
  margin-bottom:7px}
.mbps-pop__prize li::before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;
  border-radius:50%;background:var(--pop-red)}
.mbps-pop__value{margin-top:12px;border:1px solid var(--pop-gold);border-radius:3px;
  color:var(--pop-gold);font-style:italic;font-weight:700;font-size:11px;padding:6px 10px;
  text-align:center}

.mbps-pop__enter{border:2px solid var(--pop-red);border-radius:8px;padding:16px 18px;
  background:rgba(236,28,35,.06)}
.mbps-pop__enter-title{color:#fff;font-style:italic;font-weight:900;text-transform:uppercase;
  font-size:clamp(20px,2.2vw,28px);margin-bottom:10px;letter-spacing:.01em}
.mbps-pop__enter-row{display:flex;gap:12px;align-items:flex-start}
/* min-width:0 or the flex item refuses to shrink below its content and the
   QR code is pushed through the right edge of the panel. */
.mbps-pop__enter-row>div{flex:1 1 auto;min-width:0}
.mbps-pop__btn{display:block;background:var(--pop-gold);color:#0b0505;font-style:italic;
  font-weight:900;font-size:clamp(13px,1.15vw,16px);text-align:center;padding:9px 10px;
  border-radius:4px;text-decoration:none;white-space:nowrap}
.mbps-pop__btn:hover{background:#ffc93f;color:#0b0505;text-decoration:none}
.mbps-pop__fine{margin-top:10px;font-style:italic;font-size:11px;color:#e8e8e8}
.mbps-pop__npn{margin-top:8px;color:var(--pop-gold);font-style:italic;font-weight:900;
  text-transform:uppercase;font-size:11px}
.mbps-pop__qr{flex:none;display:block;background:#fff;padding:5px;border-radius:4px;line-height:0}
.mbps-pop__qr img{display:block;width:92px;height:92px}

@media (max-width:900px){
  .mbps-pop__grid{grid-template-columns:1fr 1fr;gap:18px}
  .mbps-pop__enter{grid-column:1 / -1}
  .mbps-pop__head{max-width:100%}
  .mbps-pop__car{width:100%;opacity:.35;
    -webkit-mask-image:none;mask-image:none}
}
@media (max-width:560px){
  .mbps-pop__grid{grid-template-columns:1fr}
  .mbps-pop__prize{border-left:0;padding-left:0;border-top:1px solid #2b1517;padding-top:14px}
  .mbps-pop__prize:first-child{border-top:0;padding-top:0}
  .mbps-pop__enter-row{flex-direction:column;align-items:center}
  .mbps-pop__body,.mbps-pop__head{padding-left:20px;padding-right:20px}
}