/**************************************************************
 * Charleston - Commercial Mortgages story landing page
 * Variant G (storytelling) rebuilt for native Contao elements.
 * SELF-CONTAINED: this is the ONLY stylesheet the layout loads
 * (framework CSS removed), so it includes its own reset, fonts,
 * page-shell zeroing, and a custom LP header + footer.
 * Scope: body.cm-story. British English, no em/en dashes.
 **************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');

/* ---- reset + neutralise Contao's structural wrappers ---- */
body.cm-story{margin:0;padding:0;background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.cm-story #wrapper,body.cm-story #container,body.cm-story #main,
body.cm-story .inside,body.cm-story #main .inside,body.cm-story .mod_article{
  max-width:none;width:auto;margin:0;padding:0;float:none;background:none;border:0;box-shadow:none;
}
body.cm-story h1,body.cm-story h2,body.cm-story h3,body.cm-story h4,body.cm-story p,body.cm-story ul,body.cm-story ol,body.cm-story figure{margin:0;padding:0}
body.cm-story ul,body.cm-story ol{list-style:none}
/* Contao marks hidden/empty form fields and elements with .invisible; the framework
   reset we removed used to hide these, so restore it. */
body.cm-story .invisible{display:none !important}
.cm-story{
  --navy:#1F3A6B;--navy-deep:#16294D;--magenta:#C2197A;--magenta-deep:#9E1463;
  --magenta-soft:#FCE9F3;--cyan:#2BA8E0;--cyan-deep:#1B7FB0;
  --d-magenta:#C2197A;--d-olive:#8FA82A;--d-amber:#F4B81C;--d-orange:#E97826;--d-teal:#1E7C8C;--d-burgundy:#7A1E3E;
  --bg:#fff;--bg-muted:#F6F7F9;--bg-tint:#FAFBFC;
  --ink:#16294D;--ink-soft:#4A5468;--ink-faint:#7A8294;--hairline:#E5E8ED;--hairline-2:#EEF0F4;
  --accent:var(--magenta);--accent-soft:var(--magenta-soft);
  --shadow-sm:0 1px 2px rgba(22,41,77,.06),0 1px 0 rgba(22,41,77,.04);
  --shadow-md:0 8px 24px -8px rgba(22,41,77,.18),0 2px 6px rgba(22,41,77,.06);
  --shadow-lg:0 24px 48px -16px rgba(22,41,77,.20),0 8px 16px -8px rgba(22,41,77,.08);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);line-height:1.55;letter-spacing:-.005em;
}
.cm-story *,.cm-story *::before,.cm-story *::after{box-sizing:border-box}
.cm-story img{max-width:100%;display:block}
.cm-story a{color:inherit;text-decoration:none}

/* value-colour accent modifiers, set on a section wrapper */
.cm-story .v-transparency{--accent:#E97826;--accent-soft:#FCEBDD}
.cm-story .v-integrity{--accent:#C2197A;--accent-soft:#FCE9F3}
.cm-story .v-communication{--accent:#C9991A;--accent-soft:#FBF1D6}
.cm-story .v-knowledge{--accent:#1E7C8C;--accent-soft:#E0EEF1}

/* ---- wrap / section scaffold ---- */
.cm-story .lp-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.cm-story .lp-section{padding:clamp(48px,6vw,88px) 0;position:relative;overflow:hidden}
.cm-story .lp-section.tint{background:linear-gradient(180deg,var(--accent-soft) 0,transparent 38%),var(--bg);border-top:1px solid var(--hairline)}
.cm-story .lp-section.themed::before{content:"";position:absolute;top:0;left:0;width:6px;height:100%;background:var(--accent)}
.cm-story .lp-watermark{position:absolute;top:-.16em;right:clamp(8px,3vw,44px);z-index:0;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:clamp(110px,20vw,280px);line-height:1;color:var(--accent);opacity:.07;pointer-events:none}
.cm-story .lp-section > .lp-wrap{position:relative;z-index:1}

/* =====================================================================
   SECTION DIVIDER - centred 6-dot brand ribbon between chapters.
   Consistent, on-brand, matches the dots used in the CTA/values band.
   Applied as a `.lp-divider` element placed BETWEEN sections.
   ===================================================================== */
.cm-story .lp-divider{display:flex;align-items:center;justify-content:center;gap:18px;padding:clamp(28px,4vw,44px) 0;background:#fff}
.cm-story .lp-divider::before,.cm-story .lp-divider::after{content:"";height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,var(--hairline))}
.cm-story .lp-divider::after{background:linear-gradient(90deg,var(--hairline),transparent)}
.cm-story .lp-divider .dots{display:inline-flex;gap:7px}
.cm-story .lp-divider .dots i{width:9px;height:9px;border-radius:50%;display:inline-block}
.cm-story .lp-divider .dots i:nth-child(1){background:var(--d-magenta)}
.cm-story .lp-divider .dots i:nth-child(2){background:var(--d-olive)}
.cm-story .lp-divider .dots i:nth-child(3){background:var(--d-amber)}
.cm-story .lp-divider .dots i:nth-child(4){background:var(--d-orange)}
.cm-story .lp-divider .dots i:nth-child(5){background:var(--d-teal)}
.cm-story .lp-divider .dots i:nth-child(6){background:var(--d-burgundy)}

/* ---- chapter heading ---- */
.cm-story .chapter-tag{display:inline-flex;align-items:center;gap:12px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.cm-story .chapter-tag .n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:0}
.cm-story h2{margin:0 0 14px;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.06;font-weight:300;letter-spacing:-.03em;color:var(--navy)}
.cm-story h2 strong{font-weight:800}
.cm-story .lp-lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-soft);line-height:1.65;max-width:60ch}
.cm-story h3{font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-.01em;margin:0 0 8px}
.cm-story p{margin:0 0 1em}
/* two-column section header: heading left, intro paragraph right (matches mockup) */
.cm-story .sec-head{display:grid;gap:16px}
@media(min-width:900px){.cm-story .sec-head{grid-template-columns:1.05fr .95fr;align-items:end;gap:48px}}
.cm-story .sec-head h2{margin:14px 0 0}
.cm-story .sec-head .lp-lead{margin:0}
/* bigger, bolder watermark per mockup */
.cm-story .lp-watermark{font-size:clamp(120px,22vw,300px);opacity:.08}
/* watermark on the dark CTA band: use white (magenta accent would not read) */
.cm-story .cta-band .lp-watermark{color:#fff;opacity:.06}
/* card icon chip */
.cm-story .lp-card .chip{width:54px;height:54px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.cm-story .lp-card .chip svg{width:26px;height:26px;color:var(--accent)}
/* story-CTA call button icon */
.cm-story .story-cta a.call svg{width:17px;height:17px;fill:#fff}

/* ---- hero ---- */
.cm-story .lp-hero.lp-section{padding:0} /* override generic section padding; hero spacing is on .lp-wrap */
.cm-story .lp-hero{position:relative;color:#fff;overflow:hidden;display:flex;align-items:flex-start;
  min-height:100vh;min-height:100svh;
  background-color:#1F3A6B; /* solid fallback so the hero is never bare */
  background-image:radial-gradient(115% 80% at 90% 6%,rgba(43,168,224,.28),transparent 52%),linear-gradient(135deg,#1B335F 0,#1F3A6B 34%,#5A2A6B 74%,#9E1463 100%);
  background-repeat:no-repeat;background-size:cover}
/* city skyline silhouette along the bottom of the hero */
.cm-story .lp-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='xMidYMax slice'><g fill='%23ffffff' opacity='.06'><polygon points='0,120 60,120 60,180 110,180 110,130 180,130 180,180 240,180 240,150 320,150 320,180 380,180 380,100 440,100 440,180 500,180 500,70 540,40 580,70 580,180 640,180 640,120 720,120 720,90 780,90 780,180 860,180 860,150 940,150 940,180 1020,180 1020,100 1080,100 1080,60 1120,30 1160,60 1160,180 1240,180 1240,130 1320,130 1320,180 1400,180 1400,90 1460,90 1460,180 1540,180 1540,150 1600,150 1600,200 0,200'/></g></svg>") center bottom / 1600px 200px repeat-x}
.cm-story .lp-hero .lp-wrap{position:relative;z-index:1;width:100%;display:grid;gap:clamp(20px,3vw,40px);padding:clamp(128px,15vh,180px) clamp(20px,4vw,48px) clamp(40px,6vh,72px);align-items:start}
@media(min-width:900px){.cm-story .lp-hero .lp-wrap{grid-template-columns:1.05fr .95fr;align-items:start}}
.cm-story .lp-hero .eyebrow{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:10px}
.cm-story .lp-hero .eyebrow::before{content:"";width:24px;height:1px;background:rgba(255,255,255,.7)}
.cm-story .lp-hero h1{margin:16px 0 16px;font-size:clamp(2.6rem,5vw,3.9rem);line-height:1.08;font-weight:300;letter-spacing:-.02em;color:#fff}
.cm-story .lp-hero h1 .u{font-weight:800;background:linear-gradient(transparent 62%,rgba(43,168,224,.55) 62%)}
.cm-story .lp-hero .lp-lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:rgba(255,255,255,.9);max-width:42ch;margin:0 0 24px}
.cm-story .lp-pills{display:flex;flex-wrap:nowrap;gap:9px;margin-bottom:24px;list-style:none;padding:0;max-width:560px}
.cm-story .lp-pills li{flex:1 1 0;justify-content:center;display:inline-flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:500;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;white-space:nowrap;text-align:center}
@media(max-width:560px){.cm-story .lp-pills{flex-wrap:wrap}.cm-story .lp-pills li{flex:1 1 auto}}
.cm-story .lp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---- trust strip (below hero) ---- */
.cm-story .trust-strip{background:var(--bg-muted);border-bottom:1px solid var(--hairline)}
.cm-story .trust-strip .lp-wrap{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:18px clamp(20px,4vw,48px)}
.cm-story .trust-item{display:flex;align-items:center;gap:11px}
.cm-story .trust-item .ic{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;flex:none}
.cm-story .trust-item .ic svg{width:17px;height:17px;color:var(--magenta)}
.cm-story .trust-item b{display:block;font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.2}
.cm-story .trust-item small{font-size:12px;color:var(--ink-faint)}
@media(max-width:760px){.cm-story .trust-strip .lp-wrap{justify-content:flex-start}.cm-story .trust-item{flex:1 1 44%}}

/* ---- buttons ---- */
.cm-story .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;font-size:16px;font-weight:700;border-radius:8px;border:1px solid var(--magenta);background:var(--magenta);color:#fff;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:var(--shadow-sm)}
.cm-story .btn:hover{background:var(--magenta-deep);border-color:var(--magenta-deep);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.cm-story .btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cm-story .btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---- cards ---- */
.cm-story .lp-cards{display:grid;gap:22px;margin-top:44px}
@media(min-width:680px){.cm-story .lp-cards.c3{grid-template-columns:repeat(3,1fr)}.cm-story .lp-cards.c2{grid-template-columns:repeat(2,1fr)}}
.cm-story .lp-card{background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:28px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s,border-color .25s}
.cm-story .lp-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.cm-story .lp-card:hover::before{transform:scaleX(1)}
.cm-story .lp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent-soft)}
.cm-story .lp-card .num{position:absolute;top:16px;right:20px;font-family:"JetBrains Mono",monospace;font-weight:500;font-size:42px;line-height:1;color:var(--accent);opacity:.12}

/* ---- inline story CTA ---- */
.cm-story .story-cta{margin-top:42px;border-radius:16px;position:relative;overflow:hidden;background:linear-gradient(120deg,var(--accent-soft),transparent 70%),#fff;border:1px solid var(--hairline);border-left:5px solid var(--accent);padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;box-shadow:var(--shadow-sm)}
.cm-story .story-cta .t{flex:1 1 280px}
.cm-story .story-cta .t strong{display:block;font-size:18px;font-weight:800;color:var(--navy);margin-bottom:3px}
.cm-story .story-cta .t span{font-size:14.5px;color:var(--ink-soft)}
.cm-story .story-cta a.call{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:8px;font-size:15px;font-weight:700;color:#fff;background:var(--accent);border:1px solid var(--accent);transition:filter .2s,transform .2s}
.cm-story .story-cta a.call:hover{filter:brightness(.92);transform:translateY(-1px)}

/* ---- process steps ---- */
.cm-story .lp-steps{display:grid;gap:26px;margin-top:44px;position:relative;list-style:none;padding:0}
@media(min-width:760px){.cm-story .lp-steps{grid-template-columns:repeat(4,1fr)}}
.cm-story .lp-steps li{position:relative}
.cm-story .lp-steps .sn{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--accent);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cm-story .lp-steps .when{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

/* ---- values band ---- */
/* values band is now LIGHT (white cards with coloured left borders) */
.cm-story .values-band{background:var(--bg-muted);border-block:1px solid var(--hairline)}
.cm-story .values-band h2{color:var(--navy)}
.cm-story .values-band .chapter-tag{color:var(--navy-soft)}
.cm-story .values-band .chapter-tag .n{background:var(--navy);color:#fff}
.cm-story .values-band .lp-lead{color:var(--ink-soft)}
.cm-story .values-grid{display:grid;gap:16px;margin-top:40px;list-style:none;padding:0}
@media(min-width:620px){.cm-story .values-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cm-story .values-grid{grid-template-columns:repeat(3,1fr)}}
.cm-story .value{--vc:var(--magenta);display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:12px;background:#fff;border:1px solid var(--hairline);border-left:3px solid var(--vc);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.cm-story .value:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cm-story .value .vi{width:14px;height:14px;border-radius:50%;background:var(--vc);flex:none;margin-top:5px;box-shadow:0 0 0 5px color-mix(in srgb,var(--vc) 18%,transparent)}
.cm-story .value h3{color:var(--navy);margin-bottom:4px}
.cm-story .value p{color:var(--ink-soft);font-size:13.5px;margin:0}
.cm-story .value.integrity{--vc:#C2197A}.cm-story .value.honesty{--vc:#8FA82A}.cm-story .value.communication{--vc:#F4B81C}
.cm-story .value.transparency{--vc:#E97826}.cm-story .value.knowledge{--vc:#1E7C8C}.cm-story .value.commitment{--vc:#7A1E3E}

/* ---- final CTA band ---- */
.cm-story .cta-band{position:relative;overflow:hidden;color:#fff;background:var(--navy);text-align:center}
.cm-story .cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(194,25,122,.5),transparent 55%)}
.cm-story .cta-band .lp-wrap{position:relative;z-index:1;padding:clamp(48px,6vw,80px) clamp(20px,4vw,48px)}
.cm-story .cta-band h2{color:#fff}
.cm-story .phone-xl{display:inline-flex;align-items:center;gap:14px;font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:800;color:#fff;margin:0}
/* phone flanked by dot clusters, all centred on one row */
.cm-story .phone-row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.5vw,28px);margin:8px 0}
.cm-story .phone-row .cta-dots{display:inline-flex;gap:5px;margin:0;flex:none}
.cm-story .cta-dots{display:inline-flex;gap:4px;margin-bottom:6px}
.cm-story .cta-dots span{width:8px;height:8px;border-radius:50%}
@media(max-width:560px){.cm-story .phone-row .cta-dots{display:none}}
.cm-story .cta-dots span:nth-child(1){background:var(--d-magenta)}.cm-story .cta-dots span:nth-child(2){background:var(--d-olive)}.cm-story .cta-dots span:nth-child(3){background:var(--d-amber)}.cm-story .cta-dots span:nth-child(4){background:var(--d-orange)}.cm-story .cta-dots span:nth-child(5){background:var(--d-teal)}.cm-story .cta-dots span:nth-child(6){background:var(--d-burgundy)}

/* ---- the eKeeper form (Contao .ce_form), scoped + branded ---- */
/* =========================================================
   eKeeper form (Contao .ce_form) - full styling
   ========================================================= */
.cm-story .ce_form .formbody{background:#fff;color:var(--navy)}
/* hide all hidden/tracking + honeypot fields */
.cm-story .ce_form .widget.invisible,.cm-story .ce_form .invisible,
.cm-story .ce_form .rsas-field,.cm-story .ce_form input[name="email"],
.cm-story .ce_form input[name="url"]{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
/* the in-form duplicate headline (form 37 has a headline field) - hide, the card head covers it */
.cm-story .hero-aside .ce_form .widget-headline{display:none}

/* compact two-column form: lay widgets out in a flex grid */
.cm-story .ce_form .formbody{display:flex;flex-wrap:wrap;gap:0 14px}
.cm-story .ce_form .formbody > *{flex:1 1 100%}
/* First + Last name share a row; First/Office phone share a row */
.cm-story .ce_form .widget-text:has(input[name="first_name"]),
.cm-story .ce_form .widget-text:has(input[name="last_name"]),
.cm-story .ce_form .widget-text:has(input[name="mobile_tel"]),
.cm-story .ce_form .widget-text:has(input[name="Phone"]){flex:1 1 calc(50% - 7px)}
.cm-story .ce_form .widget{margin-bottom:9px}
.cm-story .ce_form label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:4px}
.cm-story .ce_form input.text,.cm-story .ce_form select,
.cm-story .ce_form input[type="text"],.cm-story .ce_form input[type="email"],
.cm-story .ce_form input[type="number"],.cm-story .ce_form input[type="tel"]{
  width:100%;padding:10px 13px;font:inherit;font-size:14.5px;background:var(--bg-tint);
  border:1px solid var(--hairline);border-radius:8px;color:var(--navy);
  -webkit-appearance:none;appearance:none;
}
.cm-story .ce_form input::placeholder{color:var(--ink-faint)}
.cm-story .ce_form input.text:focus,.cm-story .ce_form select:focus,
.cm-story .ce_form input:focus{outline:none;border-color:var(--magenta);background:#fff;box-shadow:0 0 0 4px rgba(194,25,122,.10)}
.cm-story .ce_form select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%234A5468' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}

/* consent checkbox group (fieldset.checkbox_container) */
.cm-story .ce_form .widget-checkbox{margin-bottom:10px}
.cm-story .ce_form fieldset.checkbox_container{border:1px solid var(--hairline);border-radius:8px;padding:9px 12px;margin:0;background:var(--bg-tint)}
.cm-story .ce_form fieldset.checkbox_container legend{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);padding:0 4px;line-height:1.35}
.cm-story .ce_form fieldset.checkbox_container span{display:inline-flex;align-items:center;gap:6px;margin:5px 12px 1px 0;font-size:12.5px;color:var(--ink-soft)}
.cm-story .ce_form fieldset.checkbox_container label{display:inline;margin:0;text-transform:none;letter-spacing:0;font-weight:500;font-size:12.5px;color:var(--ink)}
.cm-story .ce_form input.checkbox{width:15px;height:15px;accent-color:var(--magenta);margin:0}

/* captcha / antispam row: input + question 50/50 */
.cm-story .ce_form .widget-captcha{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:12px}
.cm-story .ce_form .widget-captcha label{display:none}
/* the question text is the real prompt -> show it FIRST (full width), input below it */
.cm-story .ce_form .captcha_text{flex:1 1 100%;order:1;font-size:13px;font-weight:600;color:var(--ink-soft);line-height:1.3}
.cm-story .ce_form input.captcha{flex:1 1 100%;order:2;width:100%;min-width:0;text-align:left;font-weight:600;font-size:14.5px}
.cm-story .ce_form input.captcha::placeholder{color:var(--ink-faint)}

/* submit */
.cm-story .ce_form .submit_container{margin-top:4px}
.cm-story .ce_form .submit{width:100%;padding:16px 22px;font:inherit;font-size:16px;font-weight:700;color:#fff;background:var(--magenta);border:1px solid var(--magenta);border-radius:8px;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s}
.cm-story .ce_form .submit:hover{background:var(--magenta-deep);transform:translateY(-1px);box-shadow:0 10px 20px -8px rgba(194,25,122,.5)}

/* validation errors */
.cm-story .ce_form .error,.cm-story .ce_form p.error{color:#c0142a;font-size:12px;margin-top:5px;text-transform:none;letter-spacing:0}
.cm-story .ce_form .widget.error input,.cm-story .ce_form input.error{border-color:#c0142a;box-shadow:0 0 0 3px rgba(192,20,42,.10)}

/* ============ STICKY LP HEADER (auto light/dark) ============ */
.cm-story .lp-header{position:fixed;top:0;left:0;right:0;z-index:30;background:transparent;border-bottom:1px solid transparent;transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.cm-story .lp-header .lp-wrap{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px clamp(20px,4vw,48px);transition:padding .25s ease}
.cm-story .lp-header .lp-logo{display:block;line-height:0}
.cm-story .lp-header .lp-logo img{height:60px;width:auto;display:block;transition:height .25s ease}
/* two logo variants swapped by header theme */
.cm-story .lp-header .lp-logo .logo-light{display:block}
.cm-story .lp-header .lp-logo .logo-dark{display:none}
.cm-story .lp-header.on-light .lp-logo .logo-light{display:none}
.cm-story .lp-header.on-light .lp-logo .logo-dark{display:block}
.cm-story .lp-header .lp-phone{text-align:right;line-height:1.25;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end}
.cm-story .lp-header .lp-phone .lbl{font-size:12px;font-weight:500;color:rgba(255,255,255,.78);transition:color .25s ease}
.cm-story .lp-header .lp-phone .number,
.cm-story .lp-header .lp-phone a{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:color .25s ease}
.cm-story .lp-header .lp-phone .number::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:cmpulse 2.4s infinite}
@keyframes cmpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
/* LIGHT theme (over a light/white section): dark text, dark logo */
.cm-story .lp-header.on-light .lp-phone .lbl{color:var(--ink-soft)}
.cm-story .lp-header.on-light .lp-phone .number,
.cm-story .lp-header.on-light .lp-phone a{color:var(--cyan-deep)}
/* STUCK: solid background once scrolled (colour depends on light/dark) */
.cm-story .lp-header.is-stuck{box-shadow:var(--shadow-sm)}
.cm-story .lp-header.is-stuck.on-light{background:rgba(255,255,255,.96);border-bottom-color:var(--hairline-2);backdrop-filter:saturate(1.4) blur(6px)}
.cm-story .lp-header.is-stuck.on-dark{background:rgba(22,41,77,.82);border-bottom-color:rgba(255,255,255,.08);backdrop-filter:saturate(1.2) blur(6px)}
.cm-story .lp-header.is-stuck .lp-wrap{padding-top:11px;padding-bottom:11px}
.cm-story .lp-header.is-stuck .lp-logo img{height:46px}
@media(max-width:520px){.cm-story .lp-header .lp-logo img{height:34px}.cm-story .lp-header .lp-phone .lbl{display:none}.cm-story .lp-header .lp-phone .number,.cm-story .lp-header .lp-phone a{font-size:18px}}

/* ============ FAQ chapter (accordions + side CTA) ============ */
.cm-story .faq-layout{display:grid;gap:clamp(24px,3vw,40px);margin-top:40px}
@media(min-width:900px){.cm-story .faq-layout{grid-template-columns:1.6fr .9fr;align-items:start}}
.cm-story .faq-list details{background:#fff;border:1px solid var(--hairline);border-radius:10px;margin-bottom:12px;padding:4px 22px;transition:box-shadow .2s,border-color .2s}
.cm-story .faq-list details[open]{box-shadow:var(--shadow-sm);border-color:var(--accent-soft)}
.cm-story .faq-list summary{cursor:pointer;list-style:none;font-weight:700;font-size:16px;color:var(--navy);padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.cm-story .faq-list summary::-webkit-details-marker{display:none}
.cm-story .faq-list summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s;flex:none}
.cm-story .faq-list details[open] summary::after{transform:rotate(-135deg)}
.cm-story .faq-list details p{margin:0 0 16px;font-size:14.5px;color:var(--ink-soft);line-height:1.65}
/* side CTA card */
.cm-story .faq-cta{background:var(--navy);color:#fff;border-radius:14px;padding:28px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.cm-story .faq-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 110% -10%,rgba(43,168,224,.4),transparent 60%);pointer-events:none}
.cm-story .faq-cta > *{position:relative;z-index:1}
.cm-story .faq-cta .dots{display:inline-flex;gap:5px;margin-bottom:14px}
.cm-story .faq-cta .dots i{width:8px;height:8px;border-radius:50%;display:inline-block}
.cm-story .faq-cta .dots i:nth-child(1){background:var(--d-magenta)}.cm-story .faq-cta .dots i:nth-child(2){background:var(--d-olive)}.cm-story .faq-cta .dots i:nth-child(3){background:var(--d-amber)}.cm-story .faq-cta .dots i:nth-child(4){background:var(--d-orange)}.cm-story .faq-cta .dots i:nth-child(5){background:var(--d-teal)}.cm-story .faq-cta .dots i:nth-child(6){background:var(--d-burgundy)}
.cm-story .faq-cta h3{font-size:21px;font-weight:800;color:#fff;letter-spacing:-.015em;margin:0 0 8px;line-height:1.15}
.cm-story .faq-cta p{font-size:14px;color:rgba(255,255,255,.8);line-height:1.6;margin:0 0 18px}
.cm-story .faq-cta .faq-phone{display:block;font-size:26px;font-weight:800;color:#fff;margin-bottom:14px}
.cm-story .faq-cta .faq-phone .number{color:#fff}
.cm-story .faq-cta a.faq-call{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:15px 20px;border-radius:8px;font-size:15px;font-weight:700;color:#fff;background:var(--magenta);border:1px solid var(--magenta);transition:background .2s,transform .15s}
.cm-story .faq-cta a.faq-call:hover{background:var(--magenta-deep);transform:translateY(-1px)}
.cm-story .faq-cta a.faq-call svg{width:17px;height:17px;fill:#fff}
.cm-story .faq-cta .faq-hours{font-size:12.5px;color:rgba(255,255,255,.6);margin:12px 0 0;text-align:center}

/* ============ FOOTER (full, from mockup) ============ */
.cm-story .lp-foot{background:var(--navy-deep);color:rgba(255,255,255,.66);font-size:13.5px}
/* Trustpilot bar */
.cm-story .foot-trust{border-bottom:1px solid rgba(255,255,255,.1)}
.cm-story .foot-trust .lp-wrap{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px clamp(20px,4vw,48px);font-size:14px;color:rgba(255,255,255,.82)}
.cm-story .foot-trust .tp-stars{display:inline-flex;gap:3px}
.cm-story .foot-trust .tp-stars span{width:19px;height:19px;background:#00b67a;display:inline-flex;align-items:center;justify-content:center;border-radius:2px}
.cm-story .foot-trust .tp-stars svg{width:13px;height:13px;fill:#fff}
.cm-story .foot-trust b{color:#fff;font-weight:700}
.cm-story .foot-trust .tp-name{font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:5px}
/* Main columns */
.cm-story .foot-main{padding:48px 0 36px}
.cm-story .foot-grid{display:grid;gap:38px}
@media(min-width:760px){.cm-story .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px}}
.cm-story .foot-logo{height:48px;width:auto;margin-bottom:18px}
.cm-story .foot-brand .foot-call{display:inline-flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:#fff;cursor:pointer}
.cm-story .foot-brand .foot-call .number{color:#fff}
.cm-story .foot-brand .foot-call svg{width:19px;height:19px;color:var(--cyan)}
.cm-story .foot-brand .foot-tag{margin:14px 0 0;font-size:13px;color:rgba(255,255,255,.55);max-width:30ch;line-height:1.55}
.cm-story .foot-col h4,.cm-story .foot-news h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);margin:0 0 16px}
.cm-story .foot-col a{display:block;color:rgba(255,255,255,.78);padding:6px 0;font-size:14px;transition:color .15s,padding-left .15s}
.cm-story .foot-col a:hover{color:#fff;padding-left:4px}
/* Newsletter + social */
.cm-story .news-form{display:flex;flex-direction:column;gap:9px}
.cm-story .news-form input{padding:12px 14px;font:inherit;font-size:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:8px;color:#fff}
.cm-story .news-form input::placeholder{color:rgba(255,255,255,.5)}
.cm-story .news-form input:focus{outline:none;border-color:var(--magenta);background:rgba(255,255,255,.1)}
.cm-story .news-form button{padding:12px 18px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:var(--magenta);border:1px solid var(--magenta);border-radius:8px;cursor:pointer;transition:background .2s}
.cm-story .news-form button:hover{background:var(--magenta-deep)}
.cm-story .foot-social{display:flex;gap:10px;margin-top:20px}
.cm-story .foot-social a{width:38px;height:38px;border-radius:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.cm-story .foot-social a:hover{background:var(--magenta);border-color:var(--magenta);transform:translateY(-2px)}
.cm-story .foot-social svg{width:17px;height:17px;fill:#fff}
/* Legal */
.cm-story .foot-legal{border-top:1px solid rgba(255,255,255,.1);padding:28px 0 40px}
.cm-story .foot-legal .lp-wrap{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
@media(min-width:760px){.cm-story .foot-legal .lp-wrap{grid-template-columns:1fr auto;gap:32px}}
.cm-story .foot-legal p{margin:0 0 12px;font-size:12.5px;line-height:1.65;color:rgba(255,255,255,.6);max-width:90ch}
.cm-story .foot-legal .warn{color:#f0b46a;font-weight:600;letter-spacing:.01em}
.cm-story .foot-legal .nacfb{width:96px;height:auto;opacity:.92;flex:none}
@media(max-width:760px){.cm-story .lp-foot{padding-bottom:80px}}

/* ============ HERO form card (right column) ============ */
.cm-story .lp-hero .hero-copy{min-width:0}
/* one white card containing the head + the Contao form; rainbow bar on top */
.cm-story .hero-aside{width:100%;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;color:var(--navy)}
.cm-story .hero-aside::before{content:"";position:absolute;top:0;left:22px;right:22px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--d-magenta),var(--d-olive),var(--d-amber),var(--d-orange),var(--d-teal),var(--d-burgundy))}
.cm-story .hero-form-head{padding:20px 26px 0}
.cm-story .hero-form-head h3{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.015em;margin:0 0 6px}
.cm-story .hero-form-head .hero-form-meta{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--ink-soft)}
.cm-story .dot-live{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:cmpulse 2.4s infinite}
.cm-story .dot-off{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);display:inline-block}
/* availability: hide BOTH by default; JS sets data-state to reveal exactly one.
   (If JS fails, neither shows a duplicate; the form is still usable.) */
.cm-story .hero-form-meta .avail-online,.cm-story .hero-form-meta .avail-offline{display:none;align-items:center;gap:8px;font-size:12px;font-weight:500;color:var(--ink-soft)}
.cm-story .hero-form-meta[data-state="online"] .avail-online{display:inline-flex}
.cm-story .hero-form-meta[data-state="offline"] .avail-offline{display:inline-flex}
/* the Contao form sits inside the card now: drop its own card chrome */
.cm-story .hero-aside .ce_form .formbody{background:none;box-shadow:none;border-radius:0;padding:12px 26px 22px}
.cm-story .hero-aside .ce_form .formbody::before{display:none}
.cm-story .btn-call{background:var(--magenta);border-color:var(--magenta);box-shadow:0 10px 26px -10px rgba(194,25,122,.6)}
.cm-story .btn-call::before{content:"Call ";font-weight:700}
/* out of hours the JS rewrites the button to "Request a callback" - drop the "Call " prefix */
[data-hours="closed"] .cm-story .btn-call::before{content:none}
.cm-story .btn-call .ph,.cm-story .btn-call .number{color:#fff;font-weight:700}
.cm-story .btn-call .number::before{content:none}
.cm-story .hero-trust{margin-top:16px;font-size:13px;color:rgba(255,255,255,.72)}
/* CTA-band embedded form card */
.cm-story .cta-form{max-width:560px;margin:26px auto 0;text-align:left}
.cm-story .cta-form .ce_form .formbody{background:#fff;border-radius:14px;padding:24px 24px 20px;box-shadow:var(--shadow-lg)}
.cm-story .cta-form label{color:var(--ink-soft)}

/* ============ OUT-OF-HOURS: de-emphasise phone numbers ============
   When the page is closed, JS sets <html data-hours="closed"> and swaps the
   call BUTTONS to "Request a callback". The displayed phone numbers stay but are
   dimmed (reference, not a primary action). In-hours everything is normal. */
[data-hours="closed"] .cm-story .lp-header .lp-phone{opacity:.55}
[data-hours="closed"] .cm-story .lp-header .lp-phone .number::before{animation:none;background:var(--ink-faint)}
[data-hours="closed"] .cm-story .cta-band .phone-xl{opacity:.5}
[data-hours="closed"] .cm-story .faq-cta .faq-phone{opacity:.5}
/* the big CTA-band number is no longer the action out of hours; soften it */
[data-hours="closed"] .cm-story .cta-dots{opacity:.5}
/* out of hours the primary button already becomes "Request a callback",
   so hide the now-redundant secondary "Request a callback" ghost button in the hero */
[data-hours="closed"] .cm-story .lp-actions .btn-ghost-light{display:none}

/* ============ STICKY MOBILE CALL BAR ============ */
.cm-story .lp-callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px 14px;background:var(--navy-deep);box-shadow:0 -6px 20px rgba(0,0,0,.25)}
.cm-story .lp-callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 16px;border-radius:8px;font-weight:700;font-size:16px;background:var(--magenta);color:#fff}
@media(max-width:860px){.cm-story .lp-callbar{display:flex}.cm-story .lp-footer .lp-wrap{padding-bottom:84px}}