/* ============================================================
   Payble UK microsite -styles
   ============================================================ */

:root {
  /* Brand */
  /* Brand palette v2 -Navy anchor + orchid→coral duotone + lilac/grey neutrals */
  --ink:        #04102C;  /* navy -header/footer/body text/buttons-at-rest */
  --ink-soft:   #565C6B;  /* readable muted grey for body/secondary copy */
  --label-grey: #9AA0AD;  /* muted grey for small labels */
  --cream:      #FCF7FD;  /* lilac -page background + soft cards */
  --surface:    #F7F7F8;  /* light grey card/option surface */
  --white:      #ffffff;

  --coral:      #FF8E98;  /* coral pink -duotone end */
  --coral-deep: #FF7E89;
  --purple:     #D86BC8;  /* orchid -duotone start */
  --purple-deep:#C24FAE;  /* deeper orchid for accent fills */
  --magenta:    #D86BC8;  /* orchid -duotone start (fills/gradients) */
  --magenta-2:  #FF8E98;  /* coral -duotone end */
  --accent-ink: #A8388F;  /* readable deep-orchid for small accent TEXT (flows INTO Payble) */
  --accent-coral: #C8455C; /* readable deep-coral for small accent TEXT (flows OUT of Payble) */

  --hl-from:    #F7A8B8;  /* highlighter gradient (device unchanged) */
  --hl-to:      #BCA0E0;

  /* System */
  --maxw: 1120px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 40px rgba(20, 20, 54, 0.08);
  --shadow-lg: 0 24px 70px rgba(20, 20, 54, 0.14);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --font: "Poppins", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 92px 0; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px;
  font-weight: 600; color: var(--accent-ink); margin-bottom: 14px;
}

/* ---------- Highlighter device ---------- */
.hl {
  position: relative;
  display: inline;
  white-space: nowrap;
  padding: 0 0.08em;
}
.hl::before {
  content: "";
  position: absolute;
  left: -0.08em; right: -0.08em;
  top: 6%; bottom: 4%;
  z-index: -1;
  background-image: url("../assets/highlighter.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(-0.5deg);
  /* Soften the brush so the dark (purple) end of the gradient doesn't darken
     enough to bury the near-black headline text -reads like a real pastel
     highlighter and keeps contrast comfortable. */
  opacity: 0.78;
}
/* Footer tagline is white text on the dark bar -keep the highlight full strength there. */
footer.site .hl::before { opacity: 1; }
/* stroke variants so repeated highlights don't look cloned */
.hl--b::before { background-image: url("../assets/highlighter-b.svg"); transform: rotate(0.45deg); }
.hl--c::before { background-image: url("../assets/highlighter-c.svg"); transform: rotate(-0.25deg); }
/* colourway modifiers -point .hl at an in-palette colourway */
.hl--cw-coral-purple::before { background-image: url("../assets/highlighter-cw-coral-purple.svg"); }
.hl--cw-purple-coral::before { background-image: url("../assets/highlighter-cw-purple-coral.svg"); }
.hl--cw-magenta::before      { background-image: url("../assets/highlighter-cw-magenta.svg"); }
.hl--cw-sunset::before       { background-image: url("../assets/highlighter-cw-sunset.svg"); transform: rotate(0.4deg); }
.hl--cw-coral::before        { background-image: url("../assets/highlighter-cw-coral.svg"); }
.hl--cw-purple::before       { background-image: url("../assets/highlighter-cw-purple.svg"); }
/* Small screens: highlights wrap across lines. A single absolute ::before can't
   follow text onto multiple lines (Safari paints one stray rectangle), so paint
   the brush as the span's OWN background with box-decoration-break: clone -> each
   wrapped line gets its own brush. */
@media (max-width: 560px) {
  .hl {
    white-space: normal;
    background-image: url("../assets/highlighter.svg");
    background-size: 100% 86%; background-position: center; background-repeat: no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .hl::before { display: none; }
  .hl--b { background-image: url("../assets/highlighter-b.svg"); }
  .hl--c { background-image: url("../assets/highlighter-c.svg"); }
  .hl--cw-coral-purple { background-image: url("../assets/highlighter-cw-coral-purple.svg"); }
  .hl--cw-purple-coral { background-image: url("../assets/highlighter-cw-purple-coral.svg"); }
  .hl--cw-magenta      { background-image: url("../assets/highlighter-cw-magenta.svg"); }
  .hl--cw-sunset       { background-image: url("../assets/highlighter-cw-sunset.svg"); }
  .hl--cw-coral        { background-image: url("../assets/highlighter-cw-coral.svg"); }
  .hl--cw-purple       { background-image: url("../assets/highlighter-cw-purple.svg"); }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 16px; text-decoration: none;
  padding: 15px 28px; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn-primary {
  background: linear-gradient(100deg, var(--magenta), var(--magenta-2));
  color: var(--white);
  box-shadow: 0 10px 26px rgba(216, 107, 200, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(216, 107, 200, 0.45); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(20,20,54,0.18);
}
.btn-ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(10px);
  background: rgba(252, 247, 253, 0.85);
  border-bottom: 1px solid rgba(20,20,54,0.06);
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 92px; transition: height .35s var(--ease); }
.brand-lockup { display: flex; align-items: center; gap: 28px; text-decoration: none; transition: gap .35s var(--ease); }
.logo-link { position: relative; display: inline-flex; align-items: center; }
.brand-lockup .logo { height: 44px; width: auto; display: block; transition: height .35s var(--ease), opacity .3s ease; }
.logo--white { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }
/* Scrolled: compact + dark, white logo + white nav text */
.nav--scrolled { background: #04102C; border-bottom-color: rgba(255,255,255,0.10); box-shadow: 0 8px 28px rgba(4,16,44,0.32); }
.nav--scrolled .wrap { height: 64px; }
/* The white logo is a wider aspect than the colour one and is absolutely
   positioned, so the layout only reserves the narrower colour logo's width.
   Widen the gap in the scrolled state so the white mark clears the region pills. */
.nav--scrolled .brand-lockup { gap: 44px; }
.nav--scrolled .brand-lockup .logo { height: 26px; }
.nav--scrolled .logo--white { height: 24px; }
.nav--scrolled .logo--colour { opacity: 0; }
.nav--scrolled .logo--white { opacity: 1; }
.nav--scrolled .nav-links a { color: rgba(255,255,255,0.78); }
.nav--scrolled .nav-links a:hover { color: #fff; }
.nav--scrolled .region-switch { background: rgba(255,255,255,0.14); }
.nav--scrolled .region-switch .region { color: rgba(255,255,255,0.72); }
.nav--scrolled .region-switch .region.active { background: #fff; color: var(--accent-ink); }
.region-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: rgba(20,20,54,0.05); border-radius: 999px;
}
.region-switch .region {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  color: var(--ink-soft); transition: background .2s, color .2s;
}
.region-switch .region.active { background: #fff; color: var(--accent-ink); box-shadow: var(--shadow); }
.region-switch a.region:hover { color: var(--accent-ink); }
@media (max-width: 420px) { .region-switch .region { padding: 6px 9px; } }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }
.nav .btn { padding: 10px 20px; font-size: 15px; }
@media (max-width: 820px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(217,79,160,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(155,109,201,0.12), transparent 55%);
  padding: 84px 0 96px;
}
.hero-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 38px; align-items: center; }
.gday {
  display: inline-block; font-weight: 700; font-size: 15px;
  color: var(--accent-ink); letter-spacing: 0.04em; margin-bottom: 18px;
  padding: 6px 14px; border-radius: 999px; background: rgba(216,107,200,0.08);
}
.hero h1 { font-size: clamp(30px, 4.2vw, 50px); font-weight: 700; }
.hero .lead-in { font-size: clamp(18px, 2.2vw, 24px); color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.hero p.sub { margin-top: 22px; font-size: 18px; color: var(--ink-soft); max-width: 540px; }
.hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero visual -transparent phone mockup on a soft glow + Kylie peek */
.hero-visual {
  position: relative; min-height: 540px;
  display: flex; align-items: center; justify-content: center;
}
.hero-visual::before { /* soft brand glow behind the phones */
  content: ""; position: absolute; inset: -2% 0; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgba(217,79,160,0.30), rgba(155,109,201,0.18) 48%, transparent 72%);
  filter: blur(8px);
}
.hero-phone {
  position: relative; z-index: 2; width: 100%; max-width: 820px;
  height: auto; display: block;
  filter: drop-shadow(0 30px 50px rgba(20,20,54,0.22));
}
.hero-kylie {
  position: absolute; z-index: 3; left: -6%; bottom: -2%;
  width: 200px; height: auto;
  filter: drop-shadow(0 14px 24px rgba(20,20,54,0.20));
}
.chips {
  position: absolute; z-index: 4; top: 8px; right: 0;
  display: flex; gap: 8px; flex-wrap: wrap; max-width: 220px; justify-content: flex-end;
}
.chip {
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,0.92); border: 1px solid rgba(20,20,54,0.08);
  padding: 7px 12px; border-radius: 999px; box-shadow: var(--shadow);
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 380px; margin-top: 12px; }
  .hero-kylie { width: 150px; left: 0; }
  .chips { position: static; max-width: none; justify-content: flex-start; margin-top: 14px; }
}

/* ---------- Problem ---------- */
.problem { background: var(--white); }
.problem h2 { font-size: clamp(28px, 3.4vw, 40px); max-width: 760px; }
.problem p.body { margin-top: 18px; font-size: 18px; color: var(--ink-soft); max-width: 760px; }
/* Equation: Rigid × Reactive × Costly = Worse collections */
.equation { display: flex; align-items: stretch; gap: 14px; margin-top: 42px; flex-wrap: wrap; }
.equation .stat {
  flex: 1 1 0; min-width: 150px; background: var(--cream); border-radius: var(--radius-sm);
  padding: 22px; display: flex; flex-direction: column; justify-content: center;
}
.equation .op {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: var(--ink-soft); flex: 0 0 auto;
}
.equation .op-eq { color: var(--accent-ink); font-size: 30px; }
.stat .v { font-size: 22px; font-weight: 700; color: var(--accent-ink); }
.stat .l { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }
.equation .stat-result {
  flex: 1.5 1 0; min-width: 220px;
  background: linear-gradient(135deg, rgba(216,107,200,0.10), rgba(255,142,152,0.16));
  border: 1px solid rgba(216,107,200,0.18);
}
.equation .stat-result .v { font-size: 24px; }
.equation .stat-result .l { font-size: 15px; color: var(--ink); }
@media (max-width: 760px){
  .equation { flex-direction: column; }
  .equation .op { transform: rotate(90deg); padding: 2px 0; }
}

/* ---------- Bill smoothing ---------- */
.bs { background: var(--white); }
.bs h2 { font-size: clamp(32px, 4vw, 50px); }
.bs .lead { margin-top: 16px; font-size: 19px; color: var(--ink-soft); max-width: 720px; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }

/* Testimonial callout -compact horizontal band below the principles */
.quote-band {
  margin: 28px 0 0; display: flex; align-items: center; gap: 26px;
  background: linear-gradient(120deg, #FCF7FD, #FCF7FD);
  border-radius: var(--radius); padding: 24px 32px; box-shadow: var(--shadow);
}
.quote-band .mark { font-size: 56px; line-height: 0; color: var(--coral-deep); font-weight: 700; align-self: flex-start; margin-top: 26px; }
.quote-band blockquote { margin: 0; flex: 1; font-size: 21px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.quote-band figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 210px; padding-left: 26px; border-left: 2px solid rgba(20,20,54,0.10); }
.quote-band .attr { font-weight: 600; font-size: 15px; }
.quote-band .ctx { color: var(--ink-soft); font-size: 14px; }
@media (max-width: 760px){
  .quote-band { flex-direction: column; align-items: flex-start; gap: 14px; }
  .quote-band .mark { margin-top: 18px; }
  .quote-band figcaption { border-left: 0; padding-left: 0; }
}
.principle {
  background: var(--white); border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.principle:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.principle .ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,142,152,0.22), rgba(255,142,152,0.22)); margin-bottom: 16px;
}
.principle .ic svg { width: 22px; height: 22px; stroke: var(--magenta); fill: none; stroke-width: 2; }
.principle h3 { font-size: 19px; }
.principle p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 860px){ .principles{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .principles{ grid-template-columns:1fr; } }

/* ---------- Support ---------- */
.support { background: var(--white); }
.support-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 40px; }
.support-item { display: flex; gap: 16px; }
.support-item .dot {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--coral), var(--purple)); display: grid; place-items: center; color: #fff;
}
.support-item .dot svg { width: 20px; height: 20px; fill: #fff; stroke: none; }
.support-item h3 { font-size: 18px; }
.support-item p { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 720px){ .support-grid{ grid-template-columns:1fr; } }

/* ---------- Compounding ---------- */
.compound h2 { font-size: clamp(28px, 3.6vw, 44px); max-width: 820px; }
.compound-grid { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 36px; margin-top: 44px; align-items: center; }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step {
  display: flex; align-items: center; gap: 16px; background: var(--white);
  border: 1px solid rgba(20,20,54,0.06); border-radius: 10px; padding: 16px 20px; box-shadow: 0 6px 18px rgba(20,20,54,0.07);
}
/* Number sits in a soft tinted round badge (treatment 03) */
.step .n {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  color: var(--purple-deep); background: rgba(216,107,200,0.14);
}
.step .t { font-weight: 600; font-size: 17px; }
.step + .step { position: relative; }
.result-card {
  background: linear-gradient(135deg, rgba(255,142,152,0.18), rgba(216,107,200,0.30));
  border-radius: var(--radius); padding: 30px;
}
.result-card .label { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.result-card .value { font-size: 28px; font-weight: 700; color: var(--accent-ink); margin-top: 10px; }
/* Resident-quote variant of the result card */
.result-quote { margin: 0; display: flex; flex-direction: column; }
.result-quote .mark { font-size: 52px; line-height: 0; margin: 16px 0 0; color: var(--coral-deep); font-weight: 700; }
.result-quote blockquote { margin: 14px 0 16px; font-size: 19px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.result-quote figcaption { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); font-weight: 600; border-top: 1px solid rgba(20,20,54,0.12); padding-top: 12px; }
@media (max-width: 820px){ .compound-grid{ grid-template-columns:1fr; } }

/* ---------- Who we are ---------- */
.who { background: linear-gradient(160deg, #fff, #FCF7FD); }
.who-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: 44px; align-items: center; }
.who h2 { font-size: clamp(26px, 3.2vw, 38px); }
.who p { margin-top: 16px; font-size: 18px; color: var(--ink-soft); }
.who .meta { margin-top: 18px; font-size: 15px; color: var(--accent-ink); font-weight: 500; }
/* Proudly working with -logo strip */
.logos { margin-top: 52px; }
.logos-label {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px;
  font-weight: 700; color: var(--ink-soft); margin-bottom: 18px; text-align: center;
}
.logos-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; }
.logo-spot {
  aspect-ratio: 5 / 2; border-radius: 8px;
  background: #fff; border: 1px solid rgba(20,20,54,0.06);
  display: flex; align-items: center; justify-content: center; padding: 9px;
}
.logo-spot img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
}
/* Logos whose source art sits small inside lots of whitespace -scale up to fill the tile. */
.logo-spot--zoom { overflow: hidden; }
.logo-spot--zoom img { transform: scale(1.5); }
/* "+ many more" tile keeps the grid square and signals the list is longer. */
.logo-spot--more {
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 700;
  color: var(--ink-soft); background: #F7F7F8; border-style: dashed; text-align: center;
}
/* "Proudly working with" wall nested in the contact section (left of the form). */
/* Left column is a flex column; the logo wall is pushed to the bottom so it
   lines up with the form's bottom regardless of which column is taller. */
.contact-grid > div:first-child { display: flex; flex-direction: column; }
.logos--contact { margin-top: auto; padding-top: 30px; }
/* Match the section eyebrow style (e.g. "Results", "Intelligent, action-oriented comms"). */
.logos--contact .logos-label {
  text-align: left; color: rgba(255,255,255,0.85); margin-bottom: 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.logos--contact .logos-grid { grid-template-columns: repeat(7, 1fr); gap: 7px; }
.logos--contact .logo-spot {
  aspect-ratio: 3 / 2; padding: 6px; border-radius: 6px; border-color: rgba(255,255,255,0.12);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
  min-height: 0; /* iOS Safari: stop a tall logo forcing the tile past its aspect-ratio */
}
/* Greyscale by default; lift to full colour + a gentle pop on hover.
   width/height:100% + contain means the image fills (and letterboxes within) the
   tile rather than dictating its height - keeps every tile uniform on Safari. */
.logos--contact .logo-spot img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .92; transition: filter .25s ease, opacity .25s ease; }
.logos--contact .logo-spot:hover { transform: scale(1.12); box-shadow: 0 10px 24px rgba(20,20,54,0.28); z-index: 2; }
.logos--contact .logo-spot:hover img { filter: grayscale(0); opacity: 1; }
.logos--contact .logo-spot--more {
  font-size: 9px; letter-spacing: 0.06em; background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35);
}
@media (max-width: 900px){ .logos--contact .logos-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 820px){ .who-grid{ grid-template-columns:1fr; } .logos-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 480px){ .logos-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Proof ---------- */
.proof { background: var(--white); }
.quote-card {
  max-width: 820px; margin: 0 auto; text-align: center;
  background: linear-gradient(160deg, #FCF7FD, #FCF7FD); border-radius: 24px; padding: 56px 40px; box-shadow: var(--shadow);
}
.quote-card .mark { font-size: 60px; line-height: .5; color: var(--coral-deep); font-weight: 700; }
.quote-card blockquote { font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; margin: 18px 0 26px; }
.quote-card .attr { font-weight: 600; }
.quote-card .ctx { color: var(--ink-soft); font-size: 15px; margin-top: 4px; }
.quote-card .swap { margin-top: 22px; font-size: 13px; color: var(--purple-deep); }

/* ---------- Contact ---------- */
.contact { background: linear-gradient(160deg, var(--magenta), var(--magenta-2)); color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.contact h2 { font-size: clamp(30px, 4vw, 46px); }
.contact p { margin-top: 16px; font-size: 18px; opacity: .95; max-width: 460px; }
.form-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-lg); }
.form-card label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.form-card input, .form-card textarea, .form-card select {
  width: 100%; padding: 12px 14px; border: 1.5px solid rgba(20,20,54,0.14);
  border-radius: 10px; font: inherit; font-size: 15px;
}
.form-card input:focus, .form-card textarea:focus { outline: none; border-color: var(--accent-ink); }
.form-card .btn { width: 100%; justify-content: center; margin-top: 20px; }
.form-note { font-size: 12px; color: var(--ink-soft); margin-top: 12px; text-align: center; }
.hs-placeholder { font-size: 13px; color: var(--ink-soft); background: var(--cream); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; }
@media (max-width: 820px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   HubSpot embedded form -restyle hsfc-* markup to match the site
   (scoped under .form-card; !important beats HubSpot's injected styles)
   ============================================================ */
.form-card .hsfc-Form { width: 100%; font-family: var(--font) !important; color: var(--ink); }
.form-card .hsfc-Step__Content { padding: 0 !important; }
.form-card .hsfc-Row { margin: 0 0 14px !important; }
.form-card .hsfc-Row:last-of-type { margin-bottom: 0 !important; }

/* Make the form fill the card so its bottom lines up with the logos column.
   The whole chain becomes a flex column; the submit anchors to the bottom, and
   a multi-line last field grows to fill the gap. */
.form-card { display: flex; flex-direction: column; }
.form-card .hs-form-html,
.form-card .hsfc-Renderer,
.form-card .hsfc-FormWrapper,
.form-card .hsfc-Form,
.form-card .hsfc-Step,
.form-card .hsfc-Step__Content {
  display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; min-height: 0;
}
.form-card .hsfc-NavigationRow { margin-top: 18px !important; }
/* The multi-line field grows to fill the remaining height so the form bottom
   meets the logos (no empty gap). Flex is plumbed Row → TextareaField → textarea. */
.form-card .hsfc-Step__Content > .hsfc-Row:has(textarea) { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0; }
.form-card .hsfc-TextareaField { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0; }
.form-card .hsfc-TextareaInput { flex: 1 1 auto !important; min-height: 64px; }

/* Labels */
.form-card .hsfc-FieldLabel,
.form-card .hsfc-FieldLabel * {
  font-family: var(--font) !important;
}
.form-card .hsfc-FieldLabel {
  display: block !important; font-size: 14px !important; font-weight: 600 !important;
  margin: 0 0 6px !important; color: var(--ink) !important; line-height: 1.3 !important;
}
.form-card .hsfc-FieldLabel__RequiredIndicator { color: var(--accent-ink) !important; }
.form-card .hsfc-FieldDescription { font-size: 12px !important; color: var(--ink-soft) !important; margin: 0 0 6px !important; }

/* Text / email / textarea inputs */
.form-card .hsfc-TextInput,
.form-card .hsfc-TextareaInput {
  width: 100% !important; padding: 12px 14px !important;
  border: 1.5px solid rgba(20,20,54,0.14) !important; border-radius: 10px !important;
  background: #fff !important; color: var(--ink) !important;
  font-family: var(--font) !important; font-size: 15px !important; box-shadow: none !important;
}
.form-card .hsfc-TextInput:focus,
.form-card .hsfc-TextInput:focus-visible,
.form-card .hsfc-TextareaInput:focus,
.form-card .hsfc-TextareaInput:focus-visible {
  outline: none !important; border-color: var(--accent-ink) !important; box-shadow: none !important;
}
.form-card .hsfc-TextareaInput { min-height: 64px; resize: vertical; }

/* Phone field: wrap flag-selector + number as one bordered control */
.form-card .hsfc-PhoneInput {
  display: flex !important; align-items: stretch !important;
  border: 1.5px solid rgba(20,20,54,0.14) !important; border-radius: 10px !important;
  background: #fff !important; overflow: hidden;
}
.form-card .hsfc-PhoneInput:focus-within { border-color: var(--accent-ink) !important; }
.form-card .hsfc-PhoneInput .hsfc-TextInput { border: 0 !important; border-radius: 0 !important; }
.form-card .hsfc-PhoneInput__FlagAndCaret {
  display: flex !important; align-items: center; gap: 4px; padding: 0 10px !important;
  border-right: 1.5px solid rgba(20,20,54,0.10) !important; background: transparent !important;
}

/* Submit button → magenta gradient pill (matches .btn-primary), full width */
.form-card .hsfc-NavigationRow { margin-top: 20px !important; padding: 0 !important; }
.form-card .hsfc-NavigationRow__Buttons { width: 100%; }
.form-card .hsfc-Button {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 100% !important; margin: 0 !important;
  background: linear-gradient(100deg, var(--magenta), var(--magenta-2)) !important;
  color: #fff !important; font-family: var(--font) !important; font-weight: 600 !important; font-size: 16px !important;
  padding: 15px 28px !important; border: 0 !important; border-radius: 999px !important; cursor: pointer;
  box-shadow: 0 10px 26px rgba(216,107,200,0.35) !important;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.form-card .hsfc-Button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(216,107,200,0.45) !important; }

/* Validation / alert text */
.form-card .hsfc-ErrorAlert,
.form-card .hsfc-NavigationRow__Alerts { color: #A8388F !important; font-size: 13px !important; }

/* ---------- Footer ---------- */
footer.site { background: var(--ink); color: rgba(255,255,255,0.82); padding: 48px 0; }
footer.site .wrap { display: flex; flex-direction: column; gap: 26px; }
footer.site .f-top { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: center; }
/* Logo left, tagline (with highlighter) immediately beside it. */
footer.site .f-brand { display: flex; flex-direction: row; align-items: center; gap: 22px; flex-wrap: wrap; }
footer.site .logo-white { height: 34px; width: auto; flex: none; }
/* Small lead-in + stacked tagline (one highlighter brush per line, hero treatment) */
footer.site .tagline--stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; max-width: none; }
footer.site .t-lead { font-size: 11px; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,0.72); margin-bottom: 2px; }
footer.site .t-line { display: block; font-weight: 800; font-size: clamp(13px, 1.35vw, 16px); line-height: 1.15; letter-spacing: -0.01em; color: #fff; }
footer.site .t-line .hl { display: inline; }
footer.site .f-links { display: flex; gap: 22px; flex-wrap: wrap; }
footer.site a { text-decoration: none; font-size: 14px; }
footer.site a:hover { color: #fff; }
footer.site .f-bottom { display: flex; gap: 56px; align-items: flex-start; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 22px; }
footer.site .f-offices { display: flex; gap: 48px; flex-wrap: wrap; flex: 0 0 auto; }
footer.site .f-office { display: flex; flex-direction: column; gap: 4px; }
footer.site .f-office-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 700; color: #fff; }
footer.site .f-office-addr { font-size: 14px; line-height: 1.5; opacity: .8; }
footer.site .legal { flex: 1 1 320px; font-size: 12px; line-height: 1.6; opacity: .6; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   Who we are -Kylie
   ============================================================ */
.who-kylie { display: flex; align-items: center; justify-content: center; }
.who-kylie img {
  width: 100%; max-width: 440px; height: auto;
  filter: drop-shadow(0 18px 34px rgba(20,20,54,0.16));
}
@media (max-width: 820px){ .who-kylie img { max-width: 320px; } }

/* ============================================================
   Our focus -collection-before-enforcement funnel
   ============================================================ */
.focus { background: linear-gradient(180deg, #FCF7FD, #FCF7FD); }
.focus-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 52px; align-items: center; }
.focus-copy h2 { font-size: clamp(28px, 3.4vw, 42px); }
.focus-copy .lead { margin-top: 18px; font-size: 18px; color: var(--ink-soft); }
.focus-note {
  margin-top: 22px; font-weight: 600; color: var(--purple-deep);
  background: rgba(255,142,152,0.10); border-radius: 12px; padding: 14px 18px; font-size: 15px;
}
.funnel-stage { position: relative; }
.funnel { display: flex; flex-direction: column; align-items: center; }
.tier {
  width: calc(100% - var(--i) * 11%);
  text-align: center; border-radius: 14px; padding: 16px 22px;
  box-shadow: 0 8px 20px rgba(20,20,54,0.07);
  /* enter animation, staggered by --i once the section reveals */
  opacity: 0; transform: translateX(18px) scale(.98);
  transition: opacity .55s var(--ease), transform .55s var(--ease), box-shadow .3s ease;
  transition-delay: calc(var(--i) * 0.12s);
}
.focus.in .tier { opacity: 1; transform: none; }

/* Top of funnel -where Payble works: softened brand colours + slight opacity */
.tier.is-focus {
  color: #fff;
  background: hsl(calc(312 - var(--i) * 12) calc(70% - var(--i) * 5%) calc(70% - var(--i) * 6%) / 0.92);
  box-shadow: 0 8px 20px rgba(20,20,54,0.09), 0 0 0 2px rgba(216,107,200,0.30);
}
.tier.is-focus .tier-name,
.tier.is-focus .tier-desc { text-shadow: 0 1px 2px rgba(20,20,54,0.18); }

/* Bottom of funnel -outside Payble's scope: greyed out */
.tier:not(.is-focus) { background: hsl(228 11% calc(89% - (var(--i) - 3) * 7%) / 0.92); color: var(--ink-soft); }
.tier:not(.is-focus) .tier-desc { color: #9AA0AD; }

.tier-name { font-weight: 700; font-size: 18px; }
.tier-desc { font-size: 13.5px; margin-top: 3px; }
.tier-gap {
  font-size: 12.5px; font-style: italic; font-weight: 600; color: var(--purple-deep);
  padding: 7px 0; opacity: 0; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * 0.12s);
}
.focus.in .tier-gap { opacity: 1; }
@media (max-width: 860px){ .focus-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (prefers-reduced-motion: reduce){ .tier, .tier-gap { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   Comms -proactive repairs
   ============================================================ */
.comms { background: var(--cream); }
.comms h2 { font-size: clamp(26px, 3.2vw, 40px); max-width: 760px; }
.comms .lead { margin-top: 14px; font-size: 18px; color: var(--ink-soft); max-width: 700px; }
/* Feature chips -horizontal row */
.comms-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.feat {
  background: linear-gradient(100deg, rgba(255,142,152,0.16), rgba(216,107,200,0.16));
  border: 1px solid rgba(20,20,54,0.06); border-radius: 12px; padding: 16px 18px;
  font-weight: 600; color: var(--ink); font-size: 15.5px;
}
/* SMS bubbles -two side by side, iMessage style */
.comms-messages { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; align-items: start; }
.sms-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 8px 8px;
}
.bubble {
  position: relative; background: linear-gradient(180deg, #299bff, #1184f4); color: #fff;
  border-radius: 20px; border-bottom-left-radius: 6px; padding: 15px 18px;
  box-shadow: 0 4px 14px rgba(17,132,244,0.28); max-width: 440px;
}
.bubble::before { /* incoming tail, bottom-left */
  content: ""; position: absolute; left: -7px; bottom: 7px;
  width: 0; height: 0; border: 9px solid transparent;
  border-right-color: #1184f4; border-left: 0;
}
/* Second (right-hand) bubble: outgoing-style tail hooking off the bottom-RIGHT
   corner, angled down slightly -mirrors the left bubble for a balanced pair. */
.comms-messages .sms:nth-child(2) .bubble { border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; }
.comms-messages .sms:nth-child(2) .bubble::before {
  left: auto; right: -7px; bottom: 7px;
  border-left: 9px solid #1184f4; border-right: 0;
}
.bubble p { font-size: 14.5px; color: #fff; margin: 0 0 8px; line-height: 1.5; }
.bubble p:last-of-type { margin-bottom: 0; }
.sms-link { display: inline-block; margin-top: 8px; font-size: 14px; color: #fff; text-decoration: underline; word-break: break-all; opacity: .95; }
@media (max-width: 860px){
  .comms-features { grid-template-columns: 1fr 1fr; }
  .comms-messages { grid-template-columns: 1fr; }
}

/* ============================================================
   Improve SPA success -comparison + case study
   ============================================================ */
.spa { background: var(--white); }
.spa h2 { font-size: clamp(30px, 4vw, 48px); }
.spa .lead { margin-top: 14px; font-size: 18px; color: var(--ink-soft); max-width: 680px; }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 40px; }
/* White cards lift cleanly off the pink section wash (section bg is a pink gradient). */
.cmp { border-radius: var(--radius); padding: 34px 28px; text-align: center; box-shadow: 0 10px 28px rgba(20,20,54,0.08); }
.cmp-manual { background: #fff; border: 1px solid rgba(20,20,54,0.06); }
.cmp-auto { background: #fff; border: 1.5px solid rgba(216,107,200,0.40); }
.cmp-tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cmp-manual .cmp-tag { color: var(--ink-soft); }
.cmp-auto .cmp-tag { color: var(--accent-ink); }
.cmp-num { font-size: clamp(56px, 9vw, 92px); font-weight: 800; line-height: 1; margin: 10px 0 14px; }
.cmp-manual .cmp-num { color: #9AA0AD; }
.cmp-auto .cmp-num { color: var(--ink); }
.cmp-cap { font-size: 14px; color: var(--ink-soft); }
.cmp-arrow { font-size: 40px; color: var(--accent-ink); font-weight: 700; }

.case { margin-top: 60px; padding-top: 36px; border-top: 1px solid rgba(20,20,54,0.08); }
.case-title { font-size: clamp(22px, 2.8vw, 32px); max-width: 820px; margin-top: 6px; }
.case-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; margin-top: 30px; align-items: stretch; }
.chart-card { background: #fff; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.chart-cap { font-size: 13px; color: var(--ink-soft); text-align: center; margin-bottom: 16px; }
.chart { display: flex; align-items: flex-end; justify-content: space-around; gap: 12px; height: 240px; }
.bar-col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; }
.bars { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 54px; height: 100%; }
.seg { width: 100%; height: 0; transition: height .9s var(--ease); }
.spa.in .seg { height: var(--h); }
.seg-manual { background: var(--ink); border-radius: 4px 4px 0 0; }
.seg-auto { background: var(--purple-deep); border-radius: 4px 4px 0 0; position: relative; }
/* "Payble goes live" pointer on the Automatic segment */
.seg-annot {
  position: absolute; bottom: calc(100% + 13px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--magenta); padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(216,107,200,0.35); pointer-events: none;
}
.seg-annot::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--accent-ink);
}
.bar-col:last-child .seg-manual { border-radius: 0; }
.bar-year { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }
.chart-legend { display: flex; gap: 20px; justify-content: center; margin-top: 16px; font-size: 13px; }
.lg::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.lg-manual::before { background: var(--ink); }
.lg-auto::before { background: var(--purple-deep); }
/* Three callouts that fill the full chart height (grid stretches the row) */
.case-stats { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.case-stat { flex: 1; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid rgba(20,20,54,0.06); border-radius: 10px; padding: 14px 18px; box-shadow: 0 8px 22px rgba(20,20,54,0.06); }
.case-stat .csv { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.05; }
.case-stat .csk { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); margin-top: 2px; }
.case-stat .csl { font-size: 13.5px; color: var(--ink-soft); margin-top: 5px; }
/* Accent callout -stands out from the other two */
.case-stat--accent { background: linear-gradient(150deg, var(--magenta), var(--purple-deep)); border-color: rgba(255,255,255,0.25); box-shadow: 0 12px 30px rgba(255,142,152,0.35); }
.case-stat--accent .csv { color: #fff; }
.case-stat--accent .csk { color: rgba(255,255,255,0.92); }
.case-stat--accent .csl { color: rgba(255,255,255,0.86); }
@media (max-width: 860px){
  .compare { grid-template-columns: 1fr; }
  .cmp-arrow { transform: rotate(90deg); justify-self: center; }
  .case-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){ .seg { transition: none; } .spa:not(.in) .seg { height: var(--h); } }

/* ============================================================
   Motion & interaction polish (final pass)
   ============================================================ */

/* Highlight is visible by default. JS adds .hl--anim to opt into the "draw-in"
   (starts clipped, .is-lit reveals it), so it can never be left hidden by a stale cache. */
.hl--anim::before { clip-path: inset(0 100% 0 0); transition: clip-path 1.7s var(--ease); transition-delay: var(--hl-delay, 0s); }
.hl--anim.is-lit::before { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce){ .hl--anim::before { clip-path: none; transition: none; } }

/* Hero phone -subtle float on hover */
.hero-phone { transition: transform .55s var(--ease), filter .55s ease; will-change: transform; }
.hero-phone:hover { transform: translateY(-12px) rotate(-0.8deg) scale(1.015); filter: drop-shadow(0 44px 64px rgba(20,20,54,0.30)); }

/* Kylie + animated tea steam */
.kylie-wrap { position: relative; display: inline-block; }
.kylie-wrap img { transition: transform .55s var(--ease); }
.who-kylie:hover .kylie-wrap img { transform: translateY(-6px) rotate(1.2deg); }
.steam {
  position: absolute; left: 47%; top: 36%; width: 38px; height: 70px;
  transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity .6s ease;
}
.who.in .steam { opacity: 1; }
.steam span {
  position: absolute; bottom: 0; width: 6px; border-radius: 6px;
  background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.92));
  filter: blur(2.5px); opacity: 0;
}
.steam span:nth-child(1){ left: 5px;  height: 26px; animation: steam 3.4s ease-in-out infinite; }
.steam span:nth-child(2){ left: 16px; height: 36px; animation: steam 3.4s ease-in-out infinite .9s; }
.steam span:nth-child(3){ left: 27px; height: 26px; animation: steam 3.4s ease-in-out infinite 1.8s; }
@keyframes steam {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scaleY(.8); }
  15%  { opacity: .78; }
  55%  { opacity: .45; transform: translateY(-22px) translateX(4px) scaleY(1.1); }
  100% { opacity: 0; transform: translateY(-48px) translateX(-3px) scaleY(1.3); }
}
@media (prefers-reduced-motion: reduce){ .steam { display: none; } }

/* Compounding flow -staggered slide-in + hover nudge */
.step { opacity: 0; transform: translateX(-14px); transition: opacity .5s var(--ease), transform .5s var(--ease), box-shadow .25s ease; transition-delay: calc(var(--i) * 0.08s); }
.compound.in .step { opacity: 1; transform: none; }
.step:hover { transform: translateX(5px); box-shadow: var(--shadow); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce){ .step { opacity: 1 !important; transform: none !important; } }

/* Results chart -bars react on hover */
.seg { transition: height .9s var(--ease), filter .25s ease, transform .25s ease; transform-origin: bottom; }
.bar-col:hover .seg { filter: brightness(1.1) saturate(1.08); }
.bar-col:hover .seg-auto { transform: scaleX(1.06); }

/* Funnel tiers -hover lift (no stagger delay on hover) */
.focus.in .tier:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); transition-delay: 0s; z-index: 2; position: relative; }

/* Problem equation -gentle pop on hover */
.equation .stat { transition: transform .25s var(--ease); }
.equation .stat:hover { transform: translateY(-4px); }

/* Comms bubbles -hover lift */
/* Comms bubbles: slide in (left from left, right from right -left lands first),
   then a one-off wiggle to draw the eye. */
.comms-messages .sms { opacity: 0; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.comms-messages .sms:nth-child(1) { transform: translateX(-46px); }
.comms-messages .sms:nth-child(2) { transform: translateX(46px); }
.comms.in .sms { opacity: 1; transform: none; }
.comms.in .sms:nth-child(1) { transition-delay: 0s; }
.comms.in .sms:nth-child(2) { transition-delay: 1s; }
.comms.in .sms:nth-child(1) .bubble { animation: bubble-wiggle .65s ease-in-out 2s 1; }
.comms.in .sms:nth-child(2) .bubble { animation: bubble-wiggle .65s ease-in-out 4s 1; }
@keyframes bubble-wiggle {
  0%, 100% { transform: rotate(0) translateX(0); }
  20% { transform: rotate(-2deg) translateX(-4px); }
  45% { transform: rotate(2deg) translateX(4px); }
  70% { transform: rotate(-1.2deg) translateX(-2px); }
}
@media (prefers-reduced-motion: reduce){
  .comms-messages .sms { opacity: 1; transform: none; transition: none; }
  .comms.in .sms .bubble { animation: none; }
}

/* Support icon tiles -pop on hover */
.support-item .dot { transition: transform .3s var(--ease); }
.support-item:hover .dot { transform: scale(1.1) rotate(-6deg); }

/* ============================================================
   Peeking Kylie (bottom-right, on the column edge; hands off to the real Kylie)
   ============================================================ */
.kylie-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  pointer-events: none;
  transform: translateY(130%); opacity: 0; visibility: hidden;
  transition: transform .6s var(--ease), opacity .5s ease, visibility .6s;
}
.kylie-dock.is-visible { transform: translateY(0); opacity: 1; visibility: visible; }
.kylie-dock .wrap {
  display: flex; justify-content: flex-end;
  transform-origin: bottom right; /* grows up-and-in from the column edge */
}
/* Pop-in: she enters 50% bigger, holds while sliding up, then settles to normal.
   Re-fires every time .is-visible is (re)applied, so it works on scroll-up re-appearance too. */
.kylie-dock.is-visible .wrap { animation: kylie-pop 1.2s var(--ease) both; }
@keyframes kylie-pop {
  0%, 50% { transform: scale(1.5); }
  100%    { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){ .kylie-dock.is-visible .wrap { animation: none; transform: none; } }
.kylie-peek {
  height: 120px; width: auto; display: block; margin-bottom: -4px;
  filter: drop-shadow(0 10px 18px rgba(4,16,44,0.26));
  animation: kylie-bob 4s ease-in-out infinite;
  transform-origin: bottom center; /* bottom stays put → crop edge never lifts into view */
  /* Dock itself is pointer-events:none; re-enable on Kylie so she's clickable */
  pointer-events: auto; cursor: pointer;
}
/* Scale-breathe + slight horizontal sway only -no upward translate, so the
   bottom crop line is always anchored off-screen. */
@keyframes kylie-bob { 0%,100% { transform: translateX(0) scale(1); } 50% { transform: translateX(-5px) scale(1.035); } }
@media (max-width: 720px){ .kylie-peek { height: 84px; } }
@media (prefers-reduced-motion: reduce){
  .kylie-dock { transition: opacity .4s ease, visibility .4s; transform: none; }
  .kylie-dock:not(.is-visible) { transform: none; }
  .kylie-peek { animation: none; }
}

/* ============================================================
   Mobile fix: contact section (logo wall + form) stacks cleanly
   ============================================================ */
/* Let logo tiles shrink evenly (wide logos were forcing uneven columns) */
.logos--contact .logo-spot { min-width: 0; }
@media (max-width: 820px){
  /* Single column, top-aligned (kills the desktop equal-height stretch) */
  .contact-grid { grid-template-columns: 1fr; align-items: start; }
  /* Undo the desktop "form fills to the logos' height" flex chain so the form
     is its natural height, stacked below the wall - prevents the overlap. */
  .form-card,
  .form-card .hs-form-html, .form-card .hsfc-Renderer, .form-card .hsfc-FormWrapper,
  .form-card .hsfc-Form, .form-card .hsfc-Step, .form-card .hsfc-Step__Content { display: block !important; flex: none !important; }
  .form-card .hsfc-NavigationRow { margin-top: 16px !important; }
  .logos--contact { margin-bottom: 26px; }
}
/* Responsive logo-wall columns down to phones */
@media (max-width: 720px){ .logos--contact .logos-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 520px){ .logos--contact .logos-grid { grid-template-columns: repeat(4, 1fr); } .logos--contact .logo-spot { aspect-ratio: 1.8 / 1; } }
@media (max-width: 400px){ .logos--contact .logos-grid { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   Integration - hub diagram + partner logos
   ============================================================ */
.integration { background: var(--white); }
/* Results sits straight after Integration - give it a soft pink wash so the
   sections alternate and the duotone theme carries through. */
.spa { background: linear-gradient(180deg, #FCEFF6, #FCF7FD); }
.integration h2 { font-size: clamp(28px, 3.6vw, 42px); max-width: 760px; }
.integration .lead { margin-top: 16px; font-size: 18px; color: var(--ink-soft); max-width: 780px; }

/* container-type lets the diagram's parts size in cqw (% of the hub's own width),
   so the whole composition scales down proportionally on narrow screens, keeping
   the wires, arrows and animation intact instead of collapsing to a stack. */
.hub { position: relative; max-width: 900px; margin: 52px auto 0; aspect-ratio: 2.286; container-type: inline-size; }
.hub-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub-wires .wire {
  fill: none; stroke: url(#hubgrad); stroke-width: 2.5;
  stroke-dasharray: 7 8; stroke-linecap: round;
  animation: wire-flow 1.2s linear infinite;
}
/* Direction coding: orchid = data/actions flowing INTO Payble, coral = flowing OUT */
.hub-wires .wire--in  { stroke: var(--magenta); }
.hub-wires .wire--out { stroke: var(--magenta-2); }
@keyframes wire-flow { to { stroke-dashoffset: -30; } }
@media (prefers-reduced-motion: reduce){ .hub-wires .wire { animation: none; } }

.hub-node {
  position: absolute; transform: translate(-50%,-50%); z-index: 2;
  background: #fff; border: 1px solid rgba(20,20,54,0.08); border-radius: 1.55cqw;
  box-shadow: 0 8px 22px rgba(20,20,54,0.08);
  padding: 1.45cqw 2cqw; min-width: 17.3cqw; text-align: center;
  /* Fixed height keeps all four boxes equal even when a name wraps to two lines */
  height: 9.8cqw; justify-content: center;
  display: flex; flex-direction: column; gap: 0.2cqw;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
}
.hub-node .hn-name { font-weight: 700; font-size: 1.78cqw; color: var(--ink); }
.hub-node .hn-role { font-size: 1.39cqw; color: var(--ink-soft); }
.hub-node--resident { left: 50%; top: 17.14%; }
.hub-node--system   { left: 16%; top: 71.43%; }
.hub-node--payments { left: 84%; top: 71.43%; }
.hub-core {
  left: 50%; top: 71.43%; min-width: 18.7cqw; border: 0;
  background: linear-gradient(120deg, var(--magenta), var(--magenta-2));
  box-shadow: 0 14px 34px rgba(216,107,200,0.40);
}
.hub-core .hn-name { color: #fff; font-size: 2.22cqw; }
.hub-core .hn-role { color: rgba(255,255,255,0.9); }

/* Hover/focus tooltips on the diagram nodes carry the context that used to sit
   in the cards below. Absolute, so they sit on top of the diagram. */
.hub-node.has-tip { cursor: help; }
/* Lift the hovered/focused node above the wire labels, pop it, and dim the rest */
.hub-node:hover, .hub-node:focus, .hub-node:focus-within {
  z-index: 30; transform: translate(-50%,-50%) scale(1.06);
  box-shadow: 0 18px 44px rgba(20,20,54,0.20);
}
.hub-core:hover, .hub-core:focus, .hub-core:focus-within {
  box-shadow: 0 20px 48px rgba(216,107,200,0.50);
}
/* Recede the other nodes WITHOUT transparency (so wires can't show through):
   flatten their shadow, mute their text, and desaturate the core's gradient. */
.hub:has(.hub-node:hover) .hub-node:not(:hover),
.hub:has(.hub-node:focus) .hub-node:not(:focus) {
  box-shadow: 0 3px 10px rgba(20,20,54,0.05);
  filter: grayscale(0.55) brightness(1.02);
}
.hub:has(.hub-node:hover) .hub-node:not(:hover):not(.hub-core) .hn-name,
.hub:has(.hub-node:hover) .hub-node:not(:hover):not(.hub-core) .hn-role,
.hub:has(.hub-node:focus) .hub-node:not(:focus):not(.hub-core) .hn-name,
.hub:has(.hub-node:focus) .hub-node:not(:focus):not(.hub-core) .hn-role { color: var(--label-grey); }
.hub-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  width: min(244px, 66vw); z-index: 10;
  background: var(--ink); color: #fff;
  font-size: 12.5px; line-height: 1.42; font-weight: 500; text-align: left;
  padding: 12px 14px; border-radius: 12px;
  box-shadow: 0 16px 40px rgba(4,16,44,0.30);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.hub-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--ink);
}
.hub-node:hover .hub-tip,
.hub-node:focus .hub-tip,
.hub-node:focus-within .hub-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* Resident sits at the top of the diagram, so its tip drops BELOW the node */
.hub-node--resident .hub-tip { top: calc(100% + 12px); bottom: auto; transform: translateX(-50%) translateY(-6px); }
.hub-node--resident .hub-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink); }

.wire-label {
  position: absolute; z-index: 3; font-size: 1.33cqw; line-height: 1.22;
  color: var(--ink-soft); background: rgba(252,247,253,0.9);
  padding: 0.22cqw 0.78cqw; border-radius: 0.67cqw; max-width: 16.7cqw;
}
.wl-res-in  { left: 47%; top: 42.86%; transform: translate(-100%,-50%); text-align: right; }
.wl-res-out { left: 53%; top: 42.86%; transform: translateY(-50%); }
.wl-sys-in  { left: 33%; top: 58.57%; transform: translate(-50%,-100%); text-align: center; }
.wl-sys-out { left: 33%; top: 84.29%; transform: translate(-50%,0); text-align: center; }
.wl-pay-out { left: 67%; top: 58.57%; transform: translate(-50%,-100%); text-align: center; }
.wl-pay-in  { left: 67%; top: 84.29%; transform: translate(-50%,0); text-align: center; }
/* Colour-code labels to match their connector direction */
.wl-res-in, .wl-sys-in, .wl-pay-in   { color: var(--accent-ink);   font-weight: 600; }
.wl-res-out, .wl-sys-out, .wl-pay-out { color: var(--accent-coral); font-weight: 600; }

/* Every logo sits in an identical tile and is contained, so mixed shapes (e.g. the
   square Capita mark vs wide wordmarks) all read at a consistent size. */
.integ-logo {
  height: 74px; background: #fff; border: 1px solid rgba(20,20,54,0.06);
  border-radius: 10px; display: grid; place-items: center; padding: 8px 14px; overflow: hidden;
}
/* Cap logo height (not just the tile) so a square mark like Capita can't grow the tile. */
.integ-logo img { max-width: 100%; max-height: 46px; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter .25s ease, opacity .25s ease; }
.integ-logo:hover img { filter: none; opacity: 1; }
/* "+ many more" as a tile in the grid, matching the logo tiles */
.integ-logo--more {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--label-grey); background: #faf9fc; border-style: dashed;
}

/* Reassurance pillars below the hub diagram */
.ia-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.ia-pillar { background: var(--cream); border: 1px solid rgba(20,20,54,0.06); border-radius: var(--radius); padding: 26px 24px; }
.ia-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(216,107,200,0.12); margin-bottom: 16px; }
.ia-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ia-pillar h3 { font-size: 17px; color: var(--ink); }
.ia-pillar p { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 760px){
  .ia-pillars { grid-template-columns: 1fr; }
}

/* Full-width partner-logo strip at the foot of the Integration section */
.il-logostrip { margin-top: 48px; border-top: 1px solid rgba(20,20,54,0.08); padding-top: 30px; }
.il-logostrip .logos-label { text-align: center; margin: 0; }
.il-logostrip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 18px; }

/* On phones the side nodes sit near the edges, so anchor their tooltips inward to
   keep them on-screen. Resident and Payble stay centred (they're mid-diagram). */
@media (max-width: 620px){
  .hub-tip { width: min(240px, 82vw); }
  .hub-node--system .hub-tip { left: 0; transform: translateX(0) translateY(6px); }
  .hub-node--system:hover .hub-tip,
  .hub-node--system:focus .hub-tip,
  .hub-node--system:focus-within .hub-tip { transform: translateX(0) translateY(0); }
  .hub-node--system .hub-tip::after { left: 9cqw; right: auto; transform: translateX(-50%); }
  .hub-node--payments .hub-tip { left: auto; right: 0; transform: translateX(0) translateY(6px); }
  .hub-node--payments:hover .hub-tip,
  .hub-node--payments:focus .hub-tip,
  .hub-node--payments:focus-within .hub-tip { transform: translateX(0) translateY(0); }
  .hub-node--payments .hub-tip::after { left: auto; right: 9cqw; transform: translateX(50%); }
}