/* PurePoint — rules the clone lost along with the theme's tab stylesheet.
 * Everything here is scoped to components the export left unstyled or inert. */

/* FAQ tabs. Without these all four panes stacked on top of one another. If the
   JavaScript fails, .tab-1 is still marked active in the markup, so the page
   shows one pane rather than nothing. */
.tabs .tab { display: none; }
.tabs .tab.active { display: block; }

.tabs-menu-item {
  cursor: pointer;
  padding: 14px 0;
  border-bottom: 1px solid rgba(11, 44, 58, 0.12);
  transition: color 0.2s ease;
}
.tabs-menu-item:hover { color: #0E7490; }
.tabs-menu-item.active { color: #0E7490; font-weight: 700; }

/* Accordion arrow, which the theme rotated from JavaScript */
button.accordion .faq-arrow,
button.question .faq-arrow { transition: transform 0.3s ease; }
button.accordion.active .faq-arrow,
button.question.active .faq-arrow { transform: rotate(45deg); }

/* The mobile nav panel. The header markup has no separate mobile menu, so on a
   phone the burger has to drop the desktop list down as a sheet. */
@media (max-width: 991px) {
  .top-header .menu-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #0B1F4B;
    padding: 96px 28px 40px;
    overflow-y: auto;
    z-index: 40;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    display: block;
  }
  body.nav-open .top-header .menu-container { transform: translateX(0); }
  body.nav-open { overflow: hidden; }

  .top-header .menu-container .menu {
    display: block;
    margin: 0;
    padding: 0;
    position: static;
    height: auto;
    transform: none;
  }
  /* The theme faded each item in from opacity:0 with the script the export
     lost, so without this the panel slides in completely empty. */
  .top-header .menu-container .menu > li,
  .top-header .menu-container .sub-menu > li {
    display: block;
    margin: 0 0 6px;
    opacity: 1 !important;
    transform: none !important;
  }
  .top-header .menu-container .menu a { color: #fff; font-size: 1.6rem; display: block; padding: 10px 0; }
  .top-header .menu-container .sub-menu {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    padding-left: 18px;
    background: none;
    box-shadow: none;
  }
  .top-header .menu-container .sub-menu a { font-size: 1.3rem; opacity: 0.85; }
  .top-header .burger { z-index: 50; }
}

/* The form confirmation line we append when a submit composes an email */
.pp-sent { color: #0E7490; font-weight: 500; }

/* ==== Owner-directed corrections ======================================= */

/* The header CTA shipped with `padding: 10px 0` and a Bootstrap link colour
   (#0d6efd) on its label, so the text touched both edges of the pill and sat
   blue-on-blue over the hero. Padding restored, and the label now takes the
   brand colours in both header states. */
.top-header .button.small-button {
  padding-left: 22px;
  padding-right: 22px;
  min-width: 0;
}
.top-header .button.small-button span:last-of-type {
  color: #FFFFFF;
  white-space: nowrap;
}
.top-header:not(.scrolled) .button.small-button {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}
.top-header:not(.scrolled) .button.small-button:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #FFFFFF;
}
.top-header.scrolled .button.small-button {
  background: #1648B8;
  border-color: #1648B8;
}
.top-header.scrolled .button.small-button span:last-of-type { color: #FFFFFF; }
.top-header.scrolled .button.small-button:hover { background: #0F3891; border-color: #0F3891; }

/* Everything below the hero is white. The theme tinted two bands and left a
   third showing the flat colour of a background image that died with the
   export. */
.accordion-photo-section,
.gray-bg,
.text-slider-section,
.regular-swiper-section { background: #FFFFFF !important; }

/* "Host a station" was a photo band with a 75% overlay. With the photo gone it
   read as a flat slate panel, so it becomes a white band with ink type and the
   brand mark as the flourish. */
.caption-section { background: #FFFFFF !important; }
.caption-section:before { display: none !important; }
.caption-section .caption-h,
.caption-section .additional_text *,
.caption-section h2 { color: #0B1F4B !important; }
.caption-section .button { border-color: #1648B8; }
.caption-section .button span:last-of-type { color: #1648B8; }
.caption-section .button:hover { background: #1648B8; }
.caption-section .button:hover span:last-of-type { color: #FFFFFF; }
.caption-section .caption-signet { filter: none; }

/* ==== Home page build-out ==============================================
   Layout for the sections the theme had no component for. Colours are the
   brand pack values: #1648B8 blue, #BFE8D2 mint, #0B1F4B ink. */
.pp-section { background: #FFFFFF; }
.pp-section.pp-tint { background: #F7F9FB; }
.pp-eyebrow {
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: #1648B8; margin-bottom: 1.2rem;
}
.pp-section h2.small-h { margin-bottom: 2rem; }
/* the theme centres .small-h; in these sections the eyebrow and body copy are
   left aligned, so a centred heading between them read as a mistake */
.pp-section h2.small-h { text-align: left; }
#faq .pp-acc { margin-top: 4rem; }
.pp-lead { max-width: 62ch; }

.pp-price-grid { display: grid; gap: 4rem; align-items: start; }
.pp-price-tag { display: flex; align-items: baseline; gap: 0.8rem; margin: 3rem 0; }
.pp-price-amount { font-size: 7rem; font-weight: 700; color: #1648B8; line-height: 1; letter-spacing: -0.03em; }
.pp-price-unit { font-size: 2rem; color: #5B6B7A; }
.pp-price-points { list-style: none; margin: 0; padding: 0; }
.pp-price-point { border-top: 1px solid #E4E7EC; padding: 2.2rem 0; }
.pp-price-point h3 { font-size: 1.9rem; margin: 0 0 0.6rem; color: #0B1F4B; }
.pp-price-point p { margin: 0; color: #5B6B7A; }

.pp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4rem; }
.pp-card {
  border: 1px solid #E4E7EC; border-radius: 1.6rem; padding: 3rem 2.6rem;
  background: #FFFFFF; transition: border-color 0.2s ease, transform 0.2s ease;
}
.pp-card:hover { border-color: #1648B8; transform: translateY(-3px); }
.pp-card h3 { font-size: 2rem; margin: 0 0 1.2rem; color: #0B1F4B; }
.pp-card p { margin: 0 0 1.6rem; color: #5B6B7A; }
.pp-card-link { color: #1648B8; font-weight: 600; text-decoration: none; }
.pp-card-link:hover { text-decoration: underline; }

.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; }
.pp-step { border-top: 3px solid #1648B8; padding-top: 2rem; }
.pp-step-n { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.12em; color: #1648B8; margin: 0 0 0.8rem; }
.pp-step h3 { font-size: 2rem; margin: 0 0 1rem; color: #0B1F4B; }
.pp-step p { margin: 0; color: #5B6B7A; }

/* forms */
.pp-form { display: grid; gap: 2rem; margin-top: 3rem; }
.pp-field { display: grid; gap: 0.7rem; }
.pp-field label { font-size: 1.4rem; font-weight: 700; color: #0B1F4B; }
.pp-form input, .pp-form select {
  font: inherit; font-size: 1.6rem; color: #0B1F4B; background: #FFFFFF;
  border: 1px solid #C7CDD6; border-radius: 0.8rem; padding: 1.2rem 1.4rem;
  width: 100%; min-height: 5rem;
}
.pp-form input:focus-visible, .pp-form select:focus-visible {
  outline: 3px solid #1648B8; outline-offset: 2px; border-color: #1648B8;
}
.pp-form input[aria-invalid="true"], .pp-form select[aria-invalid="true"] { border-color: #C0392B; border-width: 2px; }
.pp-err { font-size: 1.3rem; font-weight: 600; color: #C0392B; margin: 0; }
.pp-fine { font-size: 1.3rem; color: #5B6B7A; margin: 1.6rem 0 0; }
.pp-form-msg { font-size: 1.6rem; font-weight: 600; margin: 1.2rem 0 0; min-height: 1.4em; }
.pp-form-msg[data-state="ok"] { color: #1D7A4C; }
.pp-form-msg[data-state="bad"] { color: #C0392B; }
.pp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pp-form button[disabled] { opacity: 0.6; pointer-events: none; }

/* the register block is the one brand-coloured band below the hero */
.pp-brand-band { background: #1648B8; }
.pp-brand-band h2.small-h, .pp-brand-band .pp-lead { color: #FFFFFF; }
.pp-brand-band .pp-eyebrow { color: #BFE8D2; }
.pp-brand-band label { color: #FFFFFF; }
.pp-brand-band .pp-fine { color: rgba(255,255,255,0.78); }
.pp-brand-band .pp-err { color: #FFD9D2; }
.pp-brand-band .pp-form-msg[data-state="ok"] { color: #BFE8D2; }
.pp-brand-band .pp-form-msg[data-state="bad"] { color: #FFD9D2; }
.pp-button-invert { background: #FFFFFF; border-color: #FFFFFF; }
.pp-button-invert span:last-of-type { color: #1648B8 !important; }
.pp-button-invert:hover { background: #BFE8D2; border-color: #BFE8D2; }

/* FAQ accordion */
.pp-acc { border-top: 1px solid #E4E7EC; margin-top: 3rem; }
.pp-acc-item { border-bottom: 1px solid #E4E7EC; }
.pp-acc-item h3 { margin: 0; font-size: inherit; }
.pp-acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding: 2.4rem 0; background: none; border: 0; cursor: pointer;
  text-align: left; font-size: 1.9rem; font-weight: 600; color: #0B1F4B;
}
.pp-acc-btn:hover { color: #1648B8; }
.pp-acc-icon { position: relative; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; }
.pp-acc-icon::before, .pp-acc-icon::after {
  content: ""; position: absolute; background: #1648B8; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.pp-acc-icon::before { inset: 45% 0 45% 0; }
.pp-acc-icon::after { inset: 0 45% 0 45%; }
.pp-acc-btn[aria-expanded="true"] .pp-acc-icon::after { transform: scaleY(0); opacity: 0; }
.pp-acc-panel { overflow: hidden; }
.pp-acc-panel p { color: #5B6B7A; padding-bottom: 2.4rem; margin: 0; max-width: 62ch; }

@media (min-width: 768px) {
  .pp-price-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
  .pp-cards { grid-template-columns: repeat(2, 1fr); }
  .pp-steps { grid-template-columns: repeat(3, 1fr); }
  .pp-form-grid { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
  .pp-form-inline { grid-template-columns: 1.2fr 1fr auto; align-items: end; }
  .pp-form-inline .pp-form-msg { grid-column: 1 / -1; }
  .pp-field-wide { grid-column: 1 / -1; }
}
/* four across only when there is genuinely room for it. At 1200 the columns
   were narrow enough to break the body copy into three word lines. */
@media (min-width: 1500px) {
  .pp-cards { grid-template-columns: repeat(4, 1fr); }
}

/* Native scrolling, restored. The theme's Locomotive Scroll stylesheet is still
   in the bundle, so even with the classes stripped these stay as a guard: if
   anything ever re-adds them, the page must not become unscrollable again. */
html.has-scroll-smooth,
html.has-scroll-smooth body,
html, body { overflow-x: hidden; overflow-y: visible; }
body { overflow-y: visible !important; }
html { overflow-y: auto !important; }

/* Anchor jumps clear the fixed header instead of hiding under it. */
html { scroll-padding-top: 8rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* ==== Host a station, tidied ===========================================
   The heading was rendering at 96px against 32px everywhere else, the copy ran
   the full 1280px with no measure, and the signets either side were the white
   mark on a now-white band, so only their mint hub showed as a stray dot. */
.caption-section .caption-h {
  font-size: 4rem;
  line-height: 1.15;
  gap: 1.6rem;
}
.caption-section .caption-signet { width: 2.6rem; height: auto; flex: 0 0 auto; }
.caption-section .caption { width: 100%; }
/* 62ch resolved against a flex item that had already shrunk to 372px, so the
   copy came out as a tall skinny column. An explicit width plus max-width sets
   the measure from the section, not from whatever the flex item collapsed to. */
.caption-section .additional_text {
  width: 100%;
  max-width: 60rem;
  margin-inline: auto;
}
.caption-section .additional_text p { font-size: 1.8rem; line-height: 1.7; }
.caption-section { padding-block: 10rem; }

/* ==== FAQ, larger ======================================================
   Questions were 19px against 20px body copy, so the thing you are meant to
   scan read smaller than the paragraphs around it. */
.pp-acc-btn { font-size: 2.4rem; font-weight: 700; padding: 3rem 0; gap: 3rem; }
/* The question text lives in a span, and the theme has its own rule for spans
   inside buttons that shrank it to about 13px, so the question read smaller
   than the answer underneath it. Size has to be set on the span itself. */
.pp-acc-btn > span:first-child {
  font-size: 2.2rem;
  font-weight: 700;
  color: inherit;
  line-height: 1.35;
}
.pp-acc-panel p { font-size: 1.9rem; line-height: 1.75; padding-bottom: 3rem; }
.pp-acc-icon { width: 2rem; height: 2rem; }

/* ==== Price calculator ================================================= */
.pp-calc {
  margin: 3rem 0;
  padding: 2.8rem;
  border: 1px solid #E4E7EC;
  border-radius: 1.6rem;
  background: #F7F9FB;
}
.pp-calc-label {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0B1F4B;
  margin-bottom: 1.6rem;
}
.pp-calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.6rem;
  border-radius: 999px;
  background: #D9DEE7;
  outline: none;
  margin: 0;
}
.pp-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #1648B8;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.28);
  cursor: pointer;
}
.pp-calc-range::-moz-range-thumb {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #1648B8;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 8px rgba(11, 31, 75, 0.28);
  cursor: pointer;
}
.pp-calc-range:focus-visible { outline: 3px solid #1648B8; outline-offset: 4px; }
.pp-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  color: #5B6B7A;
  margin-top: 0.8rem;
}
.pp-calc-out {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 2rem 0 0;
}
.pp-calc-litres { font-size: 2rem; font-weight: 700; color: #0B1F4B; }
.pp-calc-eq { font-size: 1.6rem; color: #5B6B7A; }
.pp-calc-cost { font-size: 3.6rem; font-weight: 700; color: #1648B8; line-height: 1; }
.pp-calc-note { font-size: 1.3rem; color: #5B6B7A; margin: 1.2rem 0 0; }