/* Make It Ring — shared styles for the v2 ad landing pages
   (moving-ads, cleaning-ads, restoration-ads) */

:root { --accent: #FF5A1F; }

html { -webkit-text-size-adjust: 100%; }
/* clip (not hidden) — `hidden` makes the page a scroll container and breaks position:sticky */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
body { margin: 0; background: #e9e9e7; font-family: 'Archivo', Helvetica, Arial, sans-serif; color: #111; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: #111; text-decoration: none; }
a:hover { color: #000; opacity: .75; }
img { max-width: 100%; }
input, button, select { font-family: inherit; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .plus { transform: rotate(45deg); }
details[open] .openhint { display: none; }
.plus { transition: transform 160ms ease; display: inline-block; }
.selectwrap { position: relative; flex: 1 1 190px; min-width: 0; display: block; }
.selectwrap select { width: 100%; height: 48px; border: 1.5px solid #d8d8d4; border-radius: 999px; background: #fff; font-size:17.5px; font-weight: 600; color: #111; outline: none; appearance: none; -webkit-appearance: none; padding: 0 44px 0 18px; cursor: pointer; }
.selectwrap select:focus { border-color: #111; }
.selectwrap .caret { position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2.5px solid #111; border-bottom: 2.5px solid #111; transform: rotate(45deg); pointer-events: none; }
.selectwrap.dark select { background: #2e2e2e; border-color: #4a4a4a; color: #fff; }
.selectwrap.dark select:focus { border-color: #fff; }
.selectwrap.dark .caret { border-right-color: #fff; border-bottom-color: #fff; }
@media (max-width: 520px) { .selectwrap { flex: 1 1 100%; } }

.shell {
  padding: calc(10px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px));
}
@media (min-width: 700px) {
  .shell {
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px))
             calc(20px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
  }
}
.card { border-radius: 28px; padding: 26px 20px; }
@media (min-width: 700px) { .card { padding: 48px 40px; } }
@media (min-width: 1000px) { .card { padding: 68px 60px; } }
.pad { border-radius: 20px; padding: 22px 20px; }
@media (min-width: 700px) { .pad { padding: 30px 26px; } }

.h2 { font-size: clamp(30px, 6.6vw, 50px); letter-spacing: -0.05em; font-weight: 900; line-height: 1.02; margin: 0 0 10px; }
.lede { font-size: clamp(17.5px, 4vw, 19.5px); color: #555; line-height: 1.55; margin: 0 0 26px; }
@media (min-width: 700px) { .lede { margin-bottom: 42px; } }
.badge { display: inline-block; border-radius: 8px; padding: 7px 13px; font-size:13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; }
.mono { font-family: 'Archivo', Helvetica, Arial, sans-serif; font-weight: 600; }

.g2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.g4 { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1000px) { .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.split { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .split { gap: 44px; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.wide { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .wide { gap: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba { display: none; }
@media (min-width: 760px) { .ba { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bamobile { display: block; }
@media (min-width: 760px) { .bamobile { display: none; } }
.stats3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) and (max-width: 899px) { .stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .stats3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stats3 > .pad p:first-child { font-size: clamp(21.5px, 3.4vw, 35.5px); }

.hero { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .hero { gap: 52px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.herostack { position: relative; height: 330px; min-width: 0; }
@media (min-width: 560px) { .herostack { height: 440px; } }
@media (min-width: 900px) { .herostack { height: 500px; } }

.inputrow { display: flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 8px 8px 10px; max-width: 540px; flex-wrap: wrap; }
.gobtn { border: 0; border-radius: 999px; padding: 0 24px; height: 48px; font-size:16.5px; font-weight: 700; cursor: pointer; white-space: nowrap; flex: 0 0 auto; background: var(--accent); color: #fff; }
.gobtn:hover { opacity: .85; }
@media (max-width: 520px) { .inputrow { border-radius: 20px; padding: 10px; } .gobtn { flex: 1 1 100%; } }

/* Without the grey pills these are just a tick and a word, so they need real
   space between them rather than a grid cell each to sit inside. */
.assurances { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 26px; }
.assurances > span { flex: 0 1 auto; min-width: 0; }
.navlinks { display: none; }
@media (min-width: 940px) { .navlinks { display: flex; align-items: center; gap: 24px; font-size:15.5px; font-weight: 500; } }
.navphone { display: none; }
@media (min-width: 620px) { .navphone { display: inline-flex; } }
.moretoggle { display: none; }
@media (max-width: 699px) { .moretoggle { display: flex; } }
@media (max-width: 560px) { button, select { min-height: 44px; } }


/* Vetted signal in the hero */
.vetted {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #666;
}
.vetted-stars {
  font-size: 15px;
  letter-spacing: 1.5px;
  line-height: 1;
  white-space: nowrap;
}

/* Testimonial video */
.vid {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  transition: transform 140ms ease, background 140ms ease;
}
.vid-play svg { margin-left: 3px; }
.vid-play:hover { transform: translate(-50%, -50%) scale(1.06); background: #fff; }
.vid-play:focus-visible { outline: 3px solid var(--accent, #FF5A1F); outline-offset: 3px; }
.vid.is-playing .vid-play { display: none; }

/* The comparison panels have no separate mobile markup, unlike the case-study
   .ba block which pairs with .bamobile. Hiding them left the section empty on
   phones, so stack them instead. */
@media (max-width: 759px) {
  #compare .ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* The four consultation cards sat two-up on phones, which squeezed each one to
   about 170px and made the headings wrap to four lines. One column, with the
   number as a marker beside the text, reads as a list instead of a grid. */
@media (max-width: 619px) {
  #consult .g4 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #consult .g4 > .pad {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 15px;
    align-items: start;
    padding: 18px 18px 20px;
  }
  #consult .g4 > .pad > .mono {
    grid-row: 1 / span 2;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    /* the markup sets colour, size and margin inline, so these have to win */
    margin: 0 !important;
    color: #fff !important;
    font-size: 13.5px !important;
  }
  #consult .g4 > .pad > h3 { margin: 4px 0 7px; font-size: 18.5px; }
  #consult .g4 > .pad > p { margin: 0; font-size: 16px; }
}

/* On a phone, forcing two equal columns left each chip about 170px, which is
   narrower than the labels; they wrapped to two lines and sat unevenly. Let
   the chips size to their own text and flow instead: two on the first row,
   one on the second, every label on a single line. */
@media (max-width: 619px) {
  .assurances { gap: 10px 22px; }
  .assurances > span > span { white-space: nowrap; font-size: 15px !important; }
  .assurances > span > img { width: 16px !important; height: 16px !important; }
}

/* The mark is set at 30px for desktop; that is heavy on a phone, so trim it
   there. Inline height on the img means these have to be !important. */
@media (max-width: 619px) {
  nav img[src*="logo-make-it-ring"],
  header img[src*="logo-make-it-ring"] { height: 24px !important; }
  footer img[src*="logo-make-it-ring"] { height: 20px !important; }
}

/* Qualification note above the spend picker. It is guidance, not an option, so
   it sits outside the control with a rule down its edge. The copy is set inline;
   the dark call to action needs the inverse, hence !important. */
#cta .qual-note {
  background: rgba(255, 255, 255, .10) !important;
  color: #ddd9d5 !important;
  border-left-color: #fff !important;
  text-align: left;
  /* The note sets margin and max-width inline, and an inline shorthand beats a
     stylesheet longhand, so it was pinned to the left edge of a centred card.
     540px is the picker's width, so the two now share their side edges. */
  max-width: 540px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero testimonials: on cleaning-ads the two client videos stand in for the
   photo stack, so the section that used to repeat them below is gone. They
   keep the photos' framing — white mount, hairline border, soft shadow — but
   are staggered rather than tilted, since rotating a video leaves its native
   controls sitting askew once it starts playing. */
.herovids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  min-width: 0;
}
.herovids > figure {
  margin: 0;
  background: #fff;
  border: 1px solid #e5e5e2;
  border-radius: 22px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}
.herovids > figure:nth-child(2) { transform: translateY(24px); }
/* .vid is centred and capped at 300px for the two-up section layout; in the
   hero it has to fill its own column instead. */
.herovids .vid { max-width: none; margin: 0; border-radius: 16px; }

@media (max-width: 900px) {
  .herovids { max-width: 460px; }
}
/* A fixed 66px button swallows 40% of the frame once the column narrows, so
   size it against the frame instead of the viewport: the hero video width does
   not track the viewport linearly, it jumps when the hero folds to one column. */
.herovids .vid-play {
  width: 26%;
  height: auto;
  min-width: 32px;
  max-width: 58px;
  aspect-ratio: 1;
}
.herovids .vid-play svg { width: 42%; height: 42%; margin-left: 4%; }

/* Two portrait frames side by side leave each about 148px wide on a phone,
   which is too small to read a face. Below 560px they go one per row and get
   capped so a 9:16 frame does not run away down the page; the stagger goes
   with them, since it only means anything across a row. */
@media (max-width: 560px) {
  .herovids {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    max-width: 262px;
    margin-left: auto;
    margin-right: auto;
  }
  .herovids > figure { border-radius: 18px; padding: 6px; }
  .herovids > figure:nth-child(2) { transform: none; }
  .herovids .vid { border-radius: 13px; }
}

/* Once the hero folds to one column the videos drop below the copy, where they
   read as loose media with nothing naming them. This heading labels them, and
   only exists at those widths: beside the headline on desktop the context is
   already obvious, and a second heading there would compete with the h1. */
.heroproof-head { display: none; }
@media (max-width: 899px) {
  .heroproof-head {
    display: block;
    max-width: 460px;
    margin: 4px auto 16px;
    text-align: center;
  }
  .heroproof-head .badge { margin-bottom: 10px; }
  .heroproof-head h2 {
    font-size: clamp(23px, 5.6vw, 30px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 900;
    margin: 0;
  }
  /* keep the frames under their own heading rather than off to one side */
  .herovids { margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .heroproof-head { max-width: 300px; margin-bottom: 14px; }
}

/* The open sign. It sits on the budget question's own line, so it costs no
   extra height, and is tinted green so it reads at a glance the way a shop's
   OPEN sign does rather than as another line of copy. */
.spendhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 15px;
}
.spendhead-q { min-width: 0; }

.online {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  /* same shape language as the qualification note below it: a rule down the
     leading edge, square against it, rounded away from it, same 14px type */
  padding: 8px 13px 8px 10px;
  border-left: 3px solid #16a34a;
  border-radius: 0 10px 10px 0;
  background: #eef6f0;
}
.online-face { position: relative; flex: 0 0 auto; width: 24px; height: 24px; }
/* swap .online-mono for <img class="online-photo" src="images/alex.jpg" alt="">
   when there is a photograph; the crop and dot placement already suit it */
.online-photo,
.online-mono {
  width: 100%; height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}
.online-mono {
  display: flex; align-items: center; justify-content: center;
  background: #111; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  user-select: none;
}
.online-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px #eef6f0;
}
.online-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #16a34a;
  animation: online-pulse 2.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes online-pulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .online-dot::after { animation: none; } }
.online-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #15803d;
  white-space: nowrap;
}
/* on a narrow phone the badge drops under the question and sits left with it */
@media (max-width: 419px) {
  .spendhead { justify-content: flex-start; }
}

/* On a phone the button had the row to itself. It now shares it with the sign,
   split by a hairline so the two read as separate things rather than one wide
   control. One instance per breakpoint, the same way .ba pairs with .bamobile
   elsewhere in this sheet. */
.online-mob { display: none; }

@media (max-width: 520px) {
  .online-desk { display: none; }
  .gobtn { flex: 1 1 auto; min-width: 118px; }
  .online-mob {
    display: inline-flex;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 2px 0 11px;
    background: none;
    border-radius: 0;
    /* the divider */
    border-left: 1px solid #d6d6d2;
    align-self: stretch;
    align-items: center;
  }
  .online-mob .online-face { width: 22px; height: 22px; }
  .online-mob .online-mono { font-size: 10px; }
  .online-mob .online-dot { width: 8px; height: 8px; box-shadow: 0 0 0 2px #f1f1ef; }
  .online-mob .online-text { font-size: 13.5px; }
}

/* At 320px the button's own label sets a floor min-width cannot lower, so the
   pair wanted 264px in a 240px row. Trimming the button's side padding and the
   sign's type keeps both on one line down to the narrowest phone in use. */
@media (max-width: 340px) {
  .gobtn { padding: 0 14px; }
  .online-mob { padding-left: 9px; }
  .online-mob .online-text { font-size: 12px; }
}

/* The note stopped 51px short of the sign above it, so their right edges did
   not line up. Letting it run the full column width lands it exactly on the
   sign's edge. Scoped to the sibling of .spendhead, so only the page carrying
   the sign is affected; the note sets max-width inline, hence !important.
   No effect on phones, where the column is already narrower than the cap. */
.spendhead + .qual-note { max-width: none !important; }

/* The chips sat hard against the left margin on a phone, which read as a
   ragged edge under the centred picker. */
@media (max-width: 619px) {
  .assurances { justify-content: center; }
}

/* Oversized wordmark across the footer, the way a shop paints its name on the
   window. Traced from the logo PNG so it stays sharp at any size: the original
   is 961px wide and would have been resampled well past its resolution here.
   Set as a mask rather than an image so it takes one flat tint; the two-tone
   logo goes muddy once it is this pale. */
.sitefoot-mark {
  width: 100%;
  aspect-ratio: 813 / 180;
  opacity: .09;
  -webkit-mask: url(../../images/logo-wordmark.svg) no-repeat center / 100% 100%;
  mask: url(../../images/logo-wordmark.svg) no-repeat center / 100% 100%;
  margin: 4px 0 clamp(20px, 3.2vw, 32px);
}
/* the colour is painted only where the mask can actually cut it out; without
   the guard, a browser that ignores the mask would draw a plain grey bar */
@supports (mask-image: url(i.svg)) or (-webkit-mask-image: url(i.svg)) {
  .sitefoot-mark { background: #111; }
}
.footrule {
  height: 1px;
  background: #e4e4e1;
  margin: 0 0 clamp(16px, 2.4vw, 24px);
}
@media (max-width: 619px) {
  .sitefoot-mark { opacity: .11; }
}

/* The picker is the only place the spend is asked for, so it has to be chosen
   before the button moves anyone on. Same red as the booking form's errors. */
.selectwrap select.is-invalid {
  border-color: #D92C07 !important;
  background: #FFF7F5 !important;
}
.selectwrap.dark select.is-invalid {
  border-color: #FF6B4A !important;
  background: #3a1c16 !important;
}
.spend-error {
  margin: 10px 0 0;
  color: #C42506;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}
#cta .spend-error { color: #FFB4A0; }