/* ==========================================================================
   IntegriPure — Water Independence Landing Page
   Page stylesheet. Loaded as a file so nothing on the page can delete it.

   File:    /pages/integripure-landing.css
   Version: 1.0.0
   Scope:   everything is scoped to .ip — the wrapper div on every HTML
            widget in the Elementor template. It cannot leak into the rest
            of the site. The only unscoped rule is body padding for the
            sticky mobile bar (line ~330), which is why this file should be
            enqueued on this page only.

   CONTENTS
   01  Tokens — colours, font, radius, logo columns   <- edit here first
   02  Base
   03  Hero trust row
   04  Client logo wall
   05  Risk list
   06  Tier ladder
   07  Three-column services
   08  Sector list + note
   09  Big number
   10  Tables (installed plants / pricing)
   11  Process phases
   12  SLA strip
   13  Image caption overlay
   14  Two-up feature images
   15  FAQ accordion
   16  Contact details + people
   17  Forms  <- DELETE once both forms are Contact Form 7
   18  Sticky mobile bar
   ========================================================================== */


/* 01 — TOKENS ============================================================= */
/* Change a colour here and it updates everywhere it's used. */

:root {
  --ip-font:        Lato, Helvetica, Arial, sans-serif;
  --ip-radius:      3px;

  /* brand */
  --ip-blue:        #1FA8DF;
  --ip-blue-dark:   #1789B8;
  --ip-aqua:        #5CE9DE;
  --ip-gradient:    linear-gradient(118deg, #1789B8 0%, #1FA8DF 52%, #5CE9DE 100%);
  --ip-tint:        #E3F4FB;   /* pale blue fill */

  /* dark sections */
  --ip-navy:        #01143C;
  --ip-navy-2:      #08205A;   /* table frame fill */
  --ip-navy-line:   #20386E;
  --ip-navy-text:   #A9BDDC;

  /* light sections */
  --ip-ink:         #333333;   /* headings */
  --ip-body:        #5A6570;   /* body copy */
  --ip-muted:       #777777;   /* labels, captions */
  --ip-line:        #DCE3E7;   /* borders */
  --ip-line-soft:   #EBF0F3;   /* faint borders */
  --ip-th:          #F0F0F0;   /* table header fill */

  /* accents — amber removed, it isn't in the CI */
  --ip-accent:      #1FA8DF;   /* section numbers + eyebrows on navy (was #F0B45A) */
  --ip-note-rule:   #1789B8;   /* pricing note border (was #C4761A) */
  --ip-note-bg:     #E3F4FB;   /* pricing note fill   (was #FBF0E1) */

  /* form fields */
  --ip-field:       #FAFCFD;
  --ip-placeholder: #9AA5AC;

  /* logo wall columns — must divide the logo count exactly.
     21 logos = 7 across on desktop, 3 on tablet. */
  --ip-logo-cols:   7;
  --ip-logo-cols-t: 3;
}


/* 02 — BASE =============================================================== */

.ip   { font-family: var(--ip-font); }
.ip * { box-sizing: border-box; }
.ip p { margin: 0; }


/* 03 — HERO TRUST ROW (on navy) =========================================== */

.ip-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 20px;
}
.ip-trust div { padding-right: 18px; border-right: 1px solid rgba(255,255,255,.14); }
.ip-trust div:last-child { border-right: 0; padding-right: 0; }
.ip-trust b {
  display: block;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ip-aqua);
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ip-trust span { font-size: .75rem; color: var(--ip-navy-text); }

@media (max-width: 600px) {
  .ip-trust { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .ip-trust div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .ip-trust b { font-size: 1.15rem; }
  .ip-trust span { font-size: .7rem; }
}


/* 04 — CLIENT LOGO WALL =================================================== */

.ip-logos {
  display: grid;
  grid-template-columns: repeat(var(--ip-logo-cols), 1fr);
  gap: 1px;
  background: var(--ip-line-soft);
  border: 1px solid var(--ip-line-soft);
  border-radius: var(--ip-radius);
  overflow: hidden;
}
.ip-logos div {
  background: #fff;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
}
.ip-logos img {
  max-height: 46px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .2s, opacity .2s;
}
.ip-logos div:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 1080px) { .ip-logos { grid-template-columns: repeat(var(--ip-logo-cols-t), 1fr); } }
@media (max-width: 560px)  { .ip-logos div { height: 76px; padding: 12px; } .ip-logos img { max-height: 34px; } }


/* 05 — RISK LIST (on navy) ================================================ */

/* Runs horizontally: as many columns as fit, minimum 190px each.
   Falls back to a stack on narrow screens by itself — no breakpoint needed. */
.ip-risk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 30px;
  border-top: 0;
}
.ip-risk article {
  display: block;
  padding: 20px 0 0;
  border-top: 1px solid var(--ip-navy-line);
  border-bottom: 0;
}
.ip-risk .n {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ip-accent);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.ip-risk h3 { font-size: 1.06rem; font-weight: 700; color: #fff; margin: 0 0 9px; line-height: 1.35; letter-spacing: -.01em; }
.ip-risk p  { font-size: .89rem; line-height: 1.68; color: var(--ip-navy-text); }
.ip-risk .sys { display: block; margin: 8px 0 0; font-size: .78rem; color: var(--ip-accent); font-style: italic; line-height: 1.55; }
.ip-risk .tag { display: block; margin-top: 14px; font-size: .88rem; font-weight: 700; color: var(--ip-aqua); line-height: 1.55; letter-spacing: .005em; }

@media (min-width: 901px) { .ip-shot.sticky { position: sticky; top: 100px; } }


/* 06 — TIER LADDER (the one card-style block) ============================= */

.ip-ladder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  overflow: hidden;
  background: var(--ip-line);
}
.ip-ladder .rail {
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--ip-gradient);
  z-index: 2;
}
.ip-tier {
  background: #fff;
  padding: 34px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--ip-line);
}
.ip-tier:last-child { border-right: 0; }
.ip-tier .step { display: flex; align-items: center; gap: 11px; }
.ip-tier .step i {
  font-style: normal;
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: var(--ip-tint);
  color: var(--ip-blue-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 900;
}
.ip-tier .step em {
  font-style: normal;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ip-muted);
}
.ip-tier h3 { font-size: 1.2rem; font-weight: 700; color: var(--ip-ink); margin: 0; line-height: 1.3; letter-spacing: -.01em; }
.ip-tier p  { font-size: .93rem; color: var(--ip-body); line-height: 1.65; }
.ip-tier ul { margin: 4px 0 0; padding: 0; list-style: none; }
.ip-tier li { font-size: .86rem; color: var(--ip-body); padding-left: 20px; position: relative; line-height: 1.5; margin-bottom: 8px; }
.ip-tier li:before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--ip-blue);
  border-bottom: 2px solid var(--ip-blue);
  transform: rotate(-45deg);
}
.ip-tier .from { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--ip-line); font-size: .78rem; color: var(--ip-muted); font-weight: 700; }
.ip-tier .from b { color: var(--ip-blue); font-size: 1.02rem; font-weight: 900; letter-spacing: -.02em; }

@media (max-width: 820px) {
  .ip-ladder { grid-template-columns: 1fr; }
  .ip-tier { border-right: 0; border-bottom: 1px solid var(--ip-line); }
  .ip-tier:last-child { border-bottom: 0; }
}


/* 07 — THREE PLAIN COLUMNS (no boxes) ===================================== */

.ip-svc3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.ip-svc3 article { padding: 0 30px; border-left: 1px solid var(--ip-line); }
.ip-svc3 article:first-child { padding-left: 0; border-left: 0; }
.ip-svc3 article:last-child  { padding-right: 0; }
.ip-svc3 .k  { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--ip-blue); margin-bottom: 8px; }
.ip-svc3 h3  { font-size: 1.2rem; font-weight: 700; color: var(--ip-ink); margin: 0 0 9px; line-height: 1.3; }
.ip-svc3 p   { font-size: .92rem; color: var(--ip-body); line-height: 1.68; }

@media (max-width: 820px) {
  .ip-svc3 { grid-template-columns: 1fr; gap: 26px; }
  .ip-svc3 article { padding: 0 0 26px; border-left: 0; border-bottom: 1px solid var(--ip-line); }
  .ip-svc3 article:last-child { padding-bottom: 0; border-bottom: 0; }
}


/* 08 — SECTOR LIST + NOTE ================================================= */

.ip-sectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 34px;
  border-top: 2px solid var(--ip-blue);
}
.ip-sectors article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 24px 0;
  border-bottom: 1px solid var(--ip-line);
}
.ip-sectors svg { width: 30px; height: 30px; color: var(--ip-blue); margin-top: 2px; }
.ip-sectors h3  { font-size: 1.04rem; font-weight: 700; color: var(--ip-ink); margin: 0 0 5px; line-height: 1.3; }
.ip-sectors p   { font-size: .9rem; color: var(--ip-body); line-height: 1.6; }
.ip-sectors .spec   { display: block; margin-top: 9px; font-size: .73rem; color: var(--ip-muted); }
.ip-sectors .spec b { color: var(--ip-blue); font-weight: 700; }

.ip-secnote {
  margin-top: 34px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--ip-line);
  border-left: 3px solid var(--ip-blue);
  border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
}
.ip-secnote p { font-size: .95rem; color: var(--ip-body); line-height: 1.72; max-width: 84ch; }
.ip-secnote b { color: var(--ip-ink); font-weight: 700; }

@media (max-width: 900px) { .ip-sectors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ip-sectors { grid-template-columns: 1fr; } }


/* 09 — BIG NUMBER ========================================================= */

.ip-bignum {
  font-size: 3.4rem;
  font-weight: 900;
  color: var(--ip-aqua);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.ip-bignum small {
  display: block;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  color: var(--ip-navy-text);
  margin-top: 8px;
}
@media (max-width: 600px) { .ip-bignum { font-size: 2.6rem; } }


/* 10 — TABLES ============================================================= */

/* horizontal scroll wrapper — keeps wide tables from blowing out the layout */
.ip-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }

/* -- Systems we have built and installed (on navy) -- */
.ip-plantframe {
  border: 1px solid var(--ip-navy-line);
  border-radius: var(--ip-radius);
  overflow: hidden;
  background: var(--ip-navy-2);
}
table.ip-spec { width: 100%; border-collapse: collapse; min-width: 760px; table-layout: fixed; }
table.ip-spec th:nth-child(1), table.ip-spec td:nth-child(1) { width: 180px; }
table.ip-spec th:nth-child(2), table.ip-spec td:nth-child(2) { width: 200px; }
table.ip-spec th:nth-child(3), table.ip-spec td:nth-child(3) { width: 140px; }
table.ip-spec th {
  text-align: left;
  font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ip-aqua);
  padding: 15px 26px;
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid var(--ip-navy-line);
  white-space: nowrap;
}
table.ip-spec td {
  padding: 24px 26px;
  border-top: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
  font-size: .92rem; color: var(--ip-navy-text); line-height: 1.68;
}
table.ip-spec tbody tr:first-child td { border-top: 0; }
table.ip-spec tbody tr:hover td { background: rgba(92,233,222,.045); }
table.ip-spec td.lph {
  font-size: 1.32rem; font-weight: 900; color: var(--ip-aqua);
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
table.ip-spec td.lph em {
  display: block; font-style: normal;
  font-size: .58rem; font-weight: 700; letter-spacing: .13em;
  color: var(--ip-navy-text); margin-top: 9px; line-height: 1.6;
}
table.ip-spec td.fac { color: #fff; font-weight: 700; font-size: .98rem; }

/* -- Pricing table (light) -- */
.ip-frame { border: 1px solid var(--ip-line); border-radius: var(--ip-radius); overflow: hidden; background: #fff; }
table.ip-price { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
table.ip-price th {
  text-align: left;
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ip-muted);
  padding: 16px 20px;
  background: var(--ip-th);
  border-bottom: 1px solid var(--ip-line);
  white-space: nowrap;
}
table.ip-price td { padding: 20px; border-bottom: 1px solid var(--ip-line-soft); vertical-align: top; font-size: .93rem; color: var(--ip-body); line-height: 1.6; }
table.ip-price tr:last-child td { border-bottom: 0; }
table.ip-price td.svc { font-weight: 700; color: var(--ip-ink); font-size: 1rem; }
table.ip-price td.svc span { display: block; font-weight: 400; font-size: .85rem; color: var(--ip-muted); margin-top: 4px; }
table.ip-price td.from { font-size: 1.3rem; font-weight: 900; color: var(--ip-blue); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.ip-price td.from.sm { font-size: 1rem; letter-spacing: 0; color: var(--ip-body); font-weight: 700; }
table.ip-price tr.feat td { background: var(--ip-tint); }
table.ip-price tr.feat td.svc { color: var(--ip-blue-dark); }

.ip-note {
  margin-top: 24px;
  padding: 17px 19px;
  background: var(--ip-note-bg);
  border-left: 3px solid var(--ip-note-rule);
  font-size: .88rem; color: var(--ip-body); line-height: 1.65;
  border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
}
.ip-note b { color: var(--ip-ink); }


/* 11 — PROCESS PHASES ===================================================== */

.ip-phases { border-top: 1px solid var(--ip-line); }
.ip-phases article {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ip-line-soft);
}
.ip-phases .n  { font-size: .76rem; font-weight: 900; color: var(--ip-blue); letter-spacing: .08em; padding-top: 4px; }
.ip-phases h3  { font-size: 1.2rem; font-weight: 700; color: var(--ip-ink); margin: 0 0 6px; line-height: 1.3; letter-spacing: -.01em; }
.ip-phases p   { font-size: .95rem; color: var(--ip-body); line-height: 1.7; }

@media (max-width: 560px) { .ip-phases article { grid-template-columns: 1fr; gap: 6px; } }


/* 12 — SLA STRIP ========================================================== */

.ip-sla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ip-line);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  overflow: hidden;
}
.ip-sla div  { background: #fff; padding: 22px 20px; }
.ip-sla b    { display: block; font-size: 1.12rem; font-weight: 900; color: var(--ip-blue); letter-spacing: -.02em; margin-bottom: 6px; }
.ip-sla span { font-size: .86rem; color: var(--ip-body); line-height: 1.55; }

@media (max-width: 900px) { .ip-sla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ip-sla { grid-template-columns: 1fr; } }


/* 13 — IMAGE CAPTION OVERLAY ============================================== */

.ip-shot { position: relative; border-radius: var(--ip-radius); overflow: hidden; }
.ip-shot img { width: 100%; display: block; object-fit: cover; aspect-ratio: 4/5; }
.ip-shot .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 20px 16px;
  background: linear-gradient(to top, rgba(1,20,60,.92), rgba(1,20,60,0));
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #fff;
}
.ip-shot .cap b { color: var(--ip-aqua); font-weight: 900; }


/* 14 — TWO-UP FEATURE IMAGES ============================================== */

.ip-fimgs { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.ip-fimgs img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--ip-radius); aspect-ratio: 3/4; display: block; }
.ip-fimgs img:first-child { aspect-ratio: 4/5; }


/* 15 — FAQ ACCORDION ====================================================== */

.ip-faq { border-top: 1px solid var(--ip-line); }
.ip-faq details { border-bottom: 1px solid var(--ip-line); }
.ip-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font-weight: 700; font-size: 1.03rem; color: var(--ip-ink);
}
.ip-faq summary::-webkit-details-marker { display: none; }
.ip-faq summary:after {
  content: "";
  position: absolute; right: 10px; top: 26px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ip-blue);
  border-bottom: 2px solid var(--ip-blue);
  transform: rotate(45deg);
  transition: transform .2s;
}
.ip-faq details[open] summary:after { transform: rotate(-135deg); top: 29px; }
.ip-faq summary:hover { color: var(--ip-blue); }
.ip-faq .ans { padding: 0 44px 22px 0; font-size: .97rem; line-height: 1.75; color: var(--ip-body); max-width: 70ch; }


/* 16 — CONTACT DETAILS + PEOPLE =========================================== */

.ip-cl { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.ip-cl .ic { flex: none; width: 20px; height: 20px; color: var(--ip-blue); margin-top: 2px; }
.ip-cl b   { display: block; font-size: .96rem; font-weight: 700; color: var(--ip-ink); margin-bottom: 2px; }
.ip-cl a, .ip-cl span { font-size: .92rem; color: var(--ip-body); text-decoration: none; line-height: 1.6; }
.ip-cl a:hover { color: var(--ip-blue); }

.ip-people { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ip-line); }
.ip-people b  { display: block; font-size: .96rem; font-weight: 900; color: var(--ip-ink); }
.ip-people em {
  font-style: normal; display: block;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ip-muted); font-weight: 700; margin-bottom: 8px;
}
.ip-people a { display: block; font-size: .87rem; color: var(--ip-body); text-decoration: none; }
.ip-people a:hover { color: var(--ip-blue); }

@media (max-width: 520px) { .ip-people { grid-template-columns: 1fr; } }


/* 17 — FORMS ==============================================================
   Only needed while a form is still the built-in HTML one. The hero form is
   already Contact Form 7. Delete this whole block once the bottom form
   (#ip-full-form) is CF7 too — then the CF7 stylesheet takes over.
   ========================================================================== */

.ip-form {
  background: #fff;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  box-shadow: 0 2px 5px rgba(1,20,60,.08), 0 24px 54px -18px rgba(1,20,60,.34);
  padding: 28px;
  position: relative;
}
.ip-form:before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--ip-gradient);
  border-radius: var(--ip-radius) var(--ip-radius) 0 0;
}
.ip-form h3   { font-size: 1.3rem; font-weight: 900; color: var(--ip-ink); margin: 0 0 7px; letter-spacing: -.02em; }
.ip-form .sub { font-size: .88rem; color: var(--ip-body); margin: 0 0 20px; line-height: 1.55; }

.ip-fg { display: grid; gap: 13px; }
.ip-fg.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .ip-fg.two { grid-template-columns: 1fr; } }

.ip-f { display: flex; flex-direction: column; gap: 6px; }
.ip-f label   { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ip-muted); }
.ip-f label i { font-style: normal; color: var(--ip-blue); }
.ip-f input, .ip-f select, .ip-f textarea {
  font-family: var(--ip-font);
  font-size: .95rem;
  color: var(--ip-ink);
  background: var(--ip-field);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  padding: 11px 13px;
  width: 100%;
}
.ip-f textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.ip-f input:focus, .ip-f select:focus, .ip-f textarea:focus {
  border-color: var(--ip-blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--ip-tint);
  outline: none;
}
.ip-f input::placeholder, .ip-f textarea::placeholder { color: var(--ip-placeholder); }

.ip-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.ip-checks label {
  font-size: .84rem; font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--ip-body);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  padding: 7px 12px;
  cursor: pointer;
  display: flex; align-items: center; gap: 7px;
}
.ip-checks label:hover { border-color: var(--ip-blue); background: var(--ip-tint); }
.ip-checks input { accent-color: var(--ip-blue); width: 14px; height: 14px; margin: 0; }

.ip-submit {
  width: 100%;
  background: var(--ip-blue);
  color: #fff;
  border: 0;
  border-radius: var(--ip-radius);
  padding: 15px 24px;
  font-family: var(--ip-font);
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: background .16s;
}
.ip-submit:hover { background: var(--ip-blue-dark); }
.ip-fnote { font-size: .73rem; color: var(--ip-muted); line-height: 1.5; margin: 13px 0 0; }

.ip-done    { display: none; text-align: center; padding: 26px 8px; }
.ip-done h4 { font-size: 1.18rem; font-weight: 900; color: var(--ip-ink); margin: 14px 0 8px; }
.ip-done p  { font-size: .92rem; color: var(--ip-body); max-width: 38ch; margin: 0 auto; line-height: 1.6; }
.ip-form.sent .ip-body { display: none; }
.ip-form.sent .ip-done { display: block; }


/* 18 — STICKY MOBILE BAR ================================================== */

.ip-stick {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: none;
  gap: 9px;
  padding: 10px 14px;
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--ip-line);
}
.ip-stick a   { flex: 1; text-align: center; padding: 13px 10px; border-radius: var(--ip-radius); font-weight: 700; font-size: .9rem; text-decoration: none; }
.ip-stick .a1 { border: 1px solid var(--ip-line); color: var(--ip-ink); }
.ip-stick .a2 { background: var(--ip-blue); color: #fff; }

@media (max-width: 760px) {
  .ip-stick { display: flex; }
  body:has(.ip-stick) { padding-bottom: 66px; }  /* only applies on pages that have the bar */
}

/* 19 — GHOST BUTTONS ON NAVY ==============================================
   The outline buttons in the dark sections were near-invisible. Swapped:
   solid aqua by default, outline on hover.

   Covers the three existing ones by ID. For any NEW button on navy, add the
   class  ip-ghost  in Elementor (Advanced → CSS Classes) and it picks this up
   with no further edits.
   ========================================================================== */

.elementor-page .elementor-element.elementor-element-6c9267fd a.elementor-button,
.elementor-page .elementor-element.elementor-element-6affa462 a.elementor-button,
.elementor-page .elementor-element.elementor-element-666aa29e a.elementor-button,
body.elementor-page .elementor-widget.ip-ghost a.elementor-button {
  background-color: var(--ip-aqua);
  color: var(--ip-navy);
  border: 1px solid var(--ip-aqua);
  text-decoration: none;
  transition: background-color .16s, color .16s, border-color .16s;
}

.elementor-page .elementor-element.elementor-element-6c9267fd a.elementor-button:hover,
.elementor-page .elementor-element.elementor-element-6affa462 a.elementor-button:hover,
.elementor-page .elementor-element.elementor-element-666aa29e a.elementor-button:hover,
body.elementor-page .elementor-widget.ip-ghost a.elementor-button:hover {
  background-color: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.55);
}

/* 20 — SECTION EYEBROW ON NAVY ============================================
   "WHERE WATER SYSTEMS GO WRONG" is an Elementor heading widget, so its
   amber colour is set in Elementor, not here. This overrides it to brand blue.
   Add the class  ip-eyebrow  to any other navy eyebrow to catch it too.
   ========================================================================== */

body.elementor-page .elementor-element.elementor-element-1bb727df .elementor-heading-title,
body.elementor-page .elementor-widget.ip-eyebrow .elementor-heading-title {
  color: var(--ip-accent);
}

/* end of file */