/* =========================================================
   LK FINANCIAL — TEMPLATE STYLESHEET
   A generic, reusable financial-adviser landing page template.
   Swap colours in :root, swap placeholder images, swap copy.
========================================================= */

:root {
  /* ---- Palette (sampled from the reference design) ---- */
  --color-primary: #365F8C;
  --color-primary-dark: #2C4C71;
  --color-primary-light: #D4E5F7;
  --color-primary-light-2: #A3C4E9;
  --color-navy: #3C4658;
  /* Secondary "service page" accent — used sparingly on inner pages
     (e.g. the Mortgages page) for marquees, tags and highlight cards,
     while the shared header/nav/footer stay on --color-primary. */
  --color-accent: #528E92;
  --color-accent-dark: #3F6E71;
  --color-accent-light: #E4EEEE;
  --color-bg: #F6F9FC;
  --color-text: #3C4658;
  --color-text-muted: #6B7686;
  --color-white: #FFFFFF;
  --color-border: rgba(212, 229, 247, 0.6);
  --color-success: #00B67A;

  /* ---- Type ---- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'PT Serif', Georgia, 'Times New Roman', serif;

  /* ---- Misc ---- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 40px -12px rgba(54,95,140,0.18);
  --container-w: 80rem;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------
   RESET / BASE
--------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  margin: 0 0 16px;
}
p { margin: 0 0 16px; color: var(--color-text-muted); }
button { font-family: inherit; cursor: pointer; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: 860px; }

/* ---------------------------------------------------------
   FADE-IN ON SCROLL (jQuery toggles .visible)
   Content is visible by default (progressive enhancement) —
   it's only hidden once the "js-fade" class confirms the
   scripts actually loaded, so a blocked/slow CDN never
   leaves the page blank.
--------------------------------------------------------- */
.fade-in { transition: opacity 0.7s ease, transform 0.7s ease; }
.js-fade .fade-in { opacity: 0; transform: translateY(28px); }
/* "none", not translateY(0): any transform value other than none creates a
   stacking context, which would trap the z-index of anything inside (e.g. the
   hero's dropdown menu) below later siblings such as the trust bar. */
.js-fade .fade-in.visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 15px;
  /* Stated explicitly because <button> does not inherit line-height from the
     body the way <a> does — its UA font shorthand resets it to "normal", which
     made button-based .btn elements about 6px shorter than link-based ones. */
  line-height: 1.6;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--outline { background: #fff; color: var(--color-primary); border-color: var(--color-border); }
.btn--outline:hover { border-color: var(--color-primary); }
.btn--white { background: #fff; color: var(--color-primary); }
.btn--white:hover { background: var(--color-primary-light); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn--outline-light:hover { border-color: #fff; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,0.2); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,0.08); }

/* ---------------------------------------------------------
   TOP BAR
--------------------------------------------------------- */
.top-bar { background: #fff; border-bottom: 1px solid var(--color-border); }
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo__mark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--color-primary);
  line-height: 1;
}
.logo__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-navy);
}
.logo--light .logo__mark,
.logo--light .logo__name { color: #fff; }
.logo__image {
  display: block;
  width: var(--logo-width, 180px);
  max-width: 100%;
  height: auto;
}

.top-bar__right { display: flex; align-items: center; gap: 20px; }
.top-bar__phone { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.top-bar__phone i { color: var(--color-primary); }

.rating-badge { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.rating-badge__stars { display: inline-flex; gap: 2px; color: var(--color-success); font-size: 12px; }
.rating-badge--center { justify-content: center; margin-top: 24px; }
.rating-badge--light,
.rating-badge--on-dark { color: rgba(255,255,255,0.7); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-navy); border-radius: 2px; }

/* ---------------------------------------------------------
   PRIMARY NAV
--------------------------------------------------------- */
.site-nav {
  background: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background var(--transition), box-shadow var(--transition);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 52px;
  transition: min-height var(--transition);
}
.site-nav__menu { flex: 1 1 auto; }

/* The logo, phone and CTA only appear once the bar is stuck to the top of the
   window, standing in for the top bar that has scrolled out of view. */
.site-nav__brand,
.site-nav__actions { display: none; align-items: center; gap: 20px; flex: 0 0 auto; }
.site-nav__phone { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.site-nav__phone i { color: var(--color-primary); }

.site-nav__list { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.site-nav__list > li { position: relative; }
.site-nav__list > li > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  transition: background var(--transition);
}
.site-nav__list > li > a:hover,
.has-dropdown:hover > a { background: rgba(255,255,255,0.1); }
.site-nav__list > li > a i { font-size: 10px; transition: transform var(--transition); }
.has-dropdown:hover > a i,
.has-dropdown:focus-within > a i { transform: rotate(180deg); }
.site-nav__list > li > a.is-current { background: rgba(255,255,255,0.14); text-underline-offset: 4px; }

/* ---- Stuck state: white bar, dark links, brand + actions revealed ---- */
.site-nav.is-stuck {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 6px 20px rgba(54,95,140,0.08);
}
.site-nav.is-stuck .site-nav__inner { min-height: 72px; }
.site-nav.is-stuck .site-nav__brand,
.site-nav.is-stuck .site-nav__actions { display: flex; }
.site-nav.is-stuck .site-nav__list > li > a { color: var(--color-navy); padding: 16px 10px; }
.site-nav.is-stuck .site-nav__list > li > a:hover,
.site-nav.is-stuck .has-dropdown:hover > a,
.site-nav.is-stuck .has-dropdown:focus-within > a { background: var(--color-primary-light); color: var(--color-primary); }
.site-nav.is-stuck .site-nav__list > li > a.is-current {
  background: none;
  color: var(--color-primary);
}
.site-nav.is-stuck .site-nav__phone { color: var(--color-text); }

/* Sub-menu accordion control. Only used at mobile widths — on desktop the
   chevron inside the link is the affordance and hover opens the dropdown. */
.nav-sub-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 52px;
  padding: 0;
  background: none;
  border: 0;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
}
.nav-sub-toggle i { transition: transform var(--transition); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition);
  z-index: 50;
}
/* Opened on hover, and on keyboard focus anywhere inside the item — no JS. */
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text);
}
.dropdown li a:hover { background: var(--color-primary-light); color: var(--color-primary); }

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */
.hero { padding: 80px 0 0; background: linear-gradient(180deg, #EEF4FA 0%, var(--color-bg) 100%); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding-bottom: 56px;
  position: relative;
  z-index: 2;
}
.hero h1 { font-size: 52px; margin-bottom: 24px; }
.hero__lead { font-size: 17px; max-width: 460px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__actions--center { justify-content: center; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Hero slideshow: every image occupies the same grid cell, so the box is as
   tall as the tallest and the crossfade causes no layout shift. */
.hero__slideshow { display: grid; }
.hero__slideshow > img {
  grid-area: 1 / 1;
  width: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slideshow > img.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__slideshow > img { transition: none; }
}

.dropdown-btn { position: relative; }
.dropdown-btn__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition);
  z-index: 20;
}
/* Bridges the 8px gap so the pointer can travel from button to menu. */
.dropdown-btn__menu::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.dropdown-btn:hover > .dropdown-btn__menu,
.dropdown-btn:focus-within > .dropdown-btn__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-btn__menu li a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.dropdown-btn__menu li a:hover { background: var(--color-primary-light); color: var(--color-primary); }

/* ---- Marquee ---- */
.marquee {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--color-border);
  background: #fff;
  overflow: hidden;
  padding: 22px 0;
}
.marquee__track {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  row-gap: 14px;
}
/* The infinite scroll effect (and item duplication) only kicks in
   once JS confirms it can seamlessly loop the content; otherwise
   the trust list just wraps as a static row — still fully visible. */
.js-fade .marquee__track {
  flex-wrap: nowrap;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.js-fade .marquee__track:hover { animation-play-state: paused; }
.marquee-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-navy); white-space: nowrap; }
.marquee-item i { color: var(--color-primary); font-size: 13px; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   SECTION SCAFFOLDING
--------------------------------------------------------- */
.section { padding: 96px 0; }
.section--tint { background: #EEF4FA; }
.section--dark { background: var(--color-navy); }
.section--dark h2, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.65); }
.section--cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  text-align: center;
}
.section--cta h2 { color: #fff; }
.section--cta p { color: rgba(255,255,255,0.75); margin-left: auto; margin-right: auto; }

/* --- Light boxes on dark sections ----------------------------------------
   The rules above colour every h2, h4 and p beneath a dark or CTA section,
   which also catches the components that carry their own white or tinted
   background — a white card full of white text. Put those back to the normal
   colours. Components that are genuinely transparent on dark (.step-card) are
   deliberately absent, and the accent stat card is re-excepted below. */
.section--dark .card,
.section--dark .stat-card,
.section--dark .quote-card,
.section--dark .testimonial,
.section--dark .testimonial-card,
.section--dark .faq-item,
.section--dark .detail-card,
.section--dark .form-card,
.section--dark .map-card,
.section--cta .card,
.section--cta .stat-card,
.section--cta .quote-card,
.section--cta .testimonial,
.section--cta .testimonial-card,
.section--cta .faq-item,
.section--cta .detail-card,
.section--cta .form-card,
.section--cta .map-card {
  color: var(--color-text);
}

.section--dark .card h2,
.section--dark .stat-card h2,
.section--dark .quote-card h2,
.section--dark .testimonial h2,
.section--dark .testimonial-card h2,
.section--dark .faq-item h2,
.section--dark .detail-card h2,
.section--dark .form-card h2,
.section--dark .map-card h2,
.section--cta .card h2,
.section--cta .stat-card h2,
.section--cta .quote-card h2,
.section--cta .testimonial h2,
.section--cta .testimonial-card h2,
.section--cta .faq-item h2,
.section--cta .detail-card h2,
.section--cta .form-card h2,
.section--cta .map-card h2,
.section--dark .card h4,
.section--dark .stat-card h4,
.section--dark .quote-card h4,
.section--dark .testimonial h4,
.section--dark .testimonial-card h4,
.section--dark .faq-item h4,
.section--dark .detail-card h4,
.section--dark .form-card h4,
.section--dark .map-card h4,
.section--cta .card h4,
.section--cta .stat-card h4,
.section--cta .quote-card h4,
.section--cta .testimonial h4,
.section--cta .testimonial-card h4,
.section--cta .faq-item h4,
.section--cta .detail-card h4,
.section--cta .form-card h4,
.section--cta .map-card h4 {
  color: var(--color-navy);
}

.section--dark .card p,
.section--dark .stat-card p,
.section--dark .quote-card p,
.section--dark .testimonial p,
.section--dark .testimonial-card p,
.section--dark .faq-item p,
.section--dark .detail-card p,
.section--dark .form-card p,
.section--dark .map-card p,
.section--cta .card p,
.section--cta .stat-card p,
.section--cta .quote-card p,
.section--cta .testimonial p,
.section--cta .testimonial-card p,
.section--cta .faq-item p,
.section--cta .detail-card p,
.section--cta .form-card p,
.section--cta .map-card p {
  color: var(--color-text-muted);
}

/* Accent stat cards have a dark accent background, so they keep light text. */
.section--dark .stat-card--accent h4,
.section--cta .stat-card--accent h4 { color: #fff; }
.section--dark .stat-card--accent p,
.section--cta .stat-card--accent p { color: #fff; opacity: 0.85; }

.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: 38px; }
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  max-width: none;
  gap: 24px;
}
.section-head--split .link-arrow { flex-shrink: 0; margin-bottom: 8px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}
.badge__dot { font-size: 6px; }
.badge--dark { background: rgba(54,95,140,0.3); color: var(--color-primary-light-2); }

.section-cta { text-align: center; margin-top: 48px; }

/* ---------------------------------------------------------
   GRIDS / CARDS
--------------------------------------------------------- */
.grid { display: grid; gap: 32px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card__media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--color-bg); }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__tag {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.92);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { font-size: 22px; margin-bottom: 10px; }

.check-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--color-text-muted); padding: 6px 0; }
.check-list li i { color: var(--color-primary); font-size: 12px; }
.check-list--pill li { padding: 8px 0; font-weight: 500; color: var(--color-text); }
.check-list--pill li i {
  background: var(--color-primary-light);
  color: var(--color-primary);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-primary); font-size: 14.5px; margin-top: auto; padding-top: 16px; }
.link-arrow i { font-size: 12px; transition: transform var(--transition); }
.link-arrow:hover i { transform: translateX(4px); }
.link-arrow--btn { background: none; border: none; padding-top: 8px; }

/* ---- Stats ---- */
.stat-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--color-border);
}
.stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 20px;
}
.stat-card__num { font-family: var(--font-heading); font-size: 42px; font-weight: 700; color: var(--color-primary); margin-bottom: 6px; }
.stat-card__num--text { font-size: 26px; }
.stat-card h3, .stat-card h4 { font-size: 16px; margin-bottom: 8px; }
.stat-card p { font-size: 14px; margin-bottom: 0; }

/* ---- Split rows ---- */
.split-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  margin-bottom: 88px;
}
.split-row:last-child { margin-bottom: 0; }
.split-row--reverse .split-row__media { order: 2; }
.split-row--reverse .split-row__content { order: 1; }
.split-row__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.rule { display: block; width: 40px; height: 3px; background: var(--color-primary); border-radius: 2px; margin-bottom: 20px; }
.split-row__content h3 { font-size: 28px; }

/* ---- Team carousel ---- */
.carousel-controls { display: flex; gap: 10px; }
.carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.carousel-arrow:hover { background: var(--color-primary); color: #fff; }

.carousel { overflow: hidden; }
.carousel__track { display: flex; gap: 24px; transition: transform 0.5s ease; }
.team-card {
  flex: 0 0 calc(25% - 18px);
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  padding-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.team-card__media { aspect-ratio: 5/6; overflow: hidden; margin-bottom: 20px; background: var(--color-bg); border-radius: var(--radius-md); }
.team-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; }
.team-card:hover .team-card__media img { transform: scale(1.05); }
.team-card h4 { font-size: 18px; margin: 0 20px 4px; }
.team-card__role { display: block; margin: 0 20px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-primary); }
.team-card .link-arrow { margin: 0 20px; padding-top: 8px; }

.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.carousel-dots--inline { justify-content: flex-end; margin-top: 0; }
.carousel-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: all var(--transition);
}
.carousel-dots span.is-active { width: 24px; border-radius: 4px; background: var(--color-primary); }

/* ---- Steps ---- */
.steps { margin-bottom: 8px; }
.step-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  text-align: center;
}
.step-card__num { display: block; font-family: var(--font-heading); font-size: 30px; font-weight: 700; color: var(--color-primary-light-2); margin-bottom: 12px; }
.step-card h4 { font-size: 16px; }
.step-card p { font-size: 13.5px; margin-bottom: 0; }

/* ---- Testimonials ---- */
.testimonial { background: #EEF4FA; border-radius: var(--radius-lg); padding: 48px; }
.testimonial__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.testimonial__track { position: relative; min-height: 170px; }
.testimonial__slide {
  margin: 0;
  display: none;
}
.testimonial__slide.is-active { display: block; }
/* No-JS fallback: show the first quote if nothing has been
   activated yet (modern browsers; degrades gracefully). */
.testimonial__track:not(:has(.is-active)) .testimonial__slide:first-child { display: block; }
.testimonial__quote-icon { color: var(--color-primary-light-2); font-size: 24px; margin-bottom: 16px; }
.testimonial__slide p { font-size: 19px; color: var(--color-navy); font-family: var(--font-heading); line-height: 1.55; }
.testimonial__slide footer { display: flex; flex-direction: column; margin-top: 16px; font-size: 14px; }
.testimonial__slide footer span { color: var(--color-text-muted); }

/* ---- Blog ---- */
.blog-card__meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 12px; }
.tag { background: var(--color-primary-light); color: var(--color-primary); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 11px; padding: 5px 10px; border-radius: var(--radius-pill); }
.tag--alt { background: #FCE7D6; color: #B5651D; }

/* ---- About ---- */
.about-text__more { overflow: hidden; max-height: 0; transition: max-height 0.5s ease; }
.about-text__more.is-open { max-height: 1200px; }

/* ---------------------------------------------------------
   FOOTER
--------------------------------------------------------- */
.site-footer { background: var(--color-navy); color: rgba(255,255,255,0.8); padding-top: 80px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 48px;
  padding-bottom: 56px;
}
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 14.5px; margin: 18px 0; }
.footer-col h5 { color: #fff; font-family: var(--font-body); font-size: 15px; margin-bottom: 20px; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a { color: rgba(255,255,255,0.65); font-size: 14.5px; transition: color var(--transition); }
.footer-col ul li a:hover { color: #fff; }

.footer-contact li { display: flex; gap: 12px; margin-bottom: 20px; }
.footer-contact li i { color: var(--color-primary-light-2); margin-top: 3px; }
.footer-contact li span { display: flex; flex-direction: column; font-size: 14.5px; }
.footer-contact li a { color: #fff; font-weight: 600; }
.footer-contact li small { color: rgba(255,255,255,0.5); margin-top: 2px; }
.footer-contact li strong { color: #fff; display: block; margin-bottom: 2px; }

.social-links { display: flex; gap: 10px; margin-top: 24px; }
.social-links a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.social-links a:hover { background: var(--color-primary); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 28px 0; }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.footer-bottom p { font-size: 12.5px; color: rgba(255,255,255,0.5); margin: 0; max-width: 640px; }
.footer-bottom__links { display: flex; gap: 10px; flex-shrink: 0; }
.footer-disclaimer { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 12px; }
.footer-copyright { font-size: 12.5px; color: rgba(255,255,255,0.4); margin: 0; }

/* ---------------------------------------------------------
   BACK TO TOP
--------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index: 200;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ---------------------------------------------------------
   INNER / SERVICE PAGES (e.g. mortgages.html)
   Shared header, nav and footer styling lives above; these
   components are the extra building blocks inner pages reuse.
--------------------------------------------------------- */

/* Hero checklist (inner-page hero variant with ticks instead of a paragraph) */
.hero__checklist { margin-bottom: 20px; }
.hero__checklist li { padding: 6px 0; font-size: 15px; }

/* Teal "accent" marquee variant for inner pages */
.marquee--accent { background: var(--color-accent); border-top-color: transparent; }
.marquee--accent .marquee-item { color: #fff; }
.marquee--accent .marquee-item i { color: rgba(255,255,255,0.85); }

/* Intro split-row with a floating pull-quote card */
.split-row--intro { grid-template-columns: 1.3fr 1fr; align-items: start; }
.quote-card {
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 36px;
  position: relative;
  margin-top: 24px;
}
.quote-card__icon { color: var(--color-primary-light-2); font-size: 26px; margin-bottom: 12px; }
.quote-card p { font-family: var(--font-heading); font-size: 19px; color: var(--color-navy); line-height: 1.5; margin-bottom: 20px; }
.quote-card .rule { margin-bottom: 0; }

/* Highlighted "accent" stat/info card (e.g. "Our Promise") */
.stat-card--accent { background: var(--color-accent); border-color: var(--color-accent); }
.stat-card--accent h4, .stat-card--accent p { color: #fff; }
.stat-card--accent p { opacity: 0.85; }
.stat-card__icon--light { background: rgba(255,255,255,0.2); color: #fff; }

/* Accent variant of the card media tag */
.card__tag--accent { background: var(--color-accent); color: #fff; }

/* ---- Generic multi-item carousel (.js-carousel) ----
   Reusable beyond the Mortgages page: give the track's children
   a width via a slide class (e.g. .service-slide) and the JS in
   script.js handles paging, dots and resize automatically. */
.js-carousel-wrap { position: relative; }
/* No-JS fallback: slides wrap into a plain multi-row grid so every
   item stays visible. Once JS confirms it's running (.js-fade),
   it becomes a single-row, transform-paged carousel. */
.js-carousel__track { display: flex; flex-wrap: wrap; gap: 24px; row-gap: 24px; }
.js-carousel__slide { flex-shrink: 0; }
.js-fade .js-carousel { overflow: hidden; }
.js-fade .js-carousel__track { flex-wrap: nowrap; transition: transform 0.5s ease; }

.service-slide { flex: 0 0 calc(33.333% - 16px); }
.testimonial-card { flex: 0 0 calc(33.333% - 16px); }

.carousel-arrow--edge {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  box-shadow: var(--shadow-sm);
}
.carousel-arrow--edge-left { left: -22px; }
.carousel-arrow--edge-right { right: -22px; }

/* Testimonial card (carousel slide variant, distinct from the
   single-quote fade testimonial used on the home page) */
.testimonial-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--color-border);
  margin: 0;
}
.testimonial-card p { font-size: 15px; color: var(--color-text); margin: 16px 0; }
.testimonial-card footer { display: flex; flex-direction: column; font-size: 14px; }
.testimonial-card footer span { color: var(--color-text-muted); }

/* Mini CTA bar between sections */
.cta-bar { background: var(--color-primary); padding: 40px 0; }
.cta-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-bar h3 { color: #fff; font-size: 22px; margin-bottom: 6px; }
.cta-bar p { color: rgba(255,255,255,0.75); margin: 0; }
.cta-bar__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Bordered checklist "info cards" (Our Approach section) */
.info-check-list { margin: 24px 0; }
.info-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  background: #fff;
}
.info-check-list li i {
  background: var(--color-primary-light);
  color: var(--color-primary);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.info-check-list li strong { display: block; color: var(--color-navy); font-size: 15px; margin-bottom: 2px; }
.info-check-list li span { font-size: 14px; color: var(--color-text-muted); }

/* Pill feature tags (Protection cross-sell section) */
.pill-feature-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.pill-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}
.pill-feature i { font-size: 12px; }

/* Circular step-number variant (used on inner-page journey sections) */
.step-card--circle { text-align: left; }
.step-card__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 16px;
}

/* FAQ accordion */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 16px; background: #fff; overflow: hidden; }
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-navy);
}
.faq-item__question i { font-size: 12px; color: var(--color-primary); transition: transform var(--transition); flex-shrink: 0; }
.faq-item.is-open .faq-item__question i { transform: rotate(180deg); }
/* Answers are visible by default (no-JS fallback shows every
   answer, like a plain Q&A list); once JS confirms it's running
   (.js-fade on <html>) they collapse into a normal accordion.
   Opening is left entirely to slideDown/slideUp, which manage the
   inline display themselves — a CSS rule for ".is-open" here would
   reveal the answer the instant the class is added, before the
   slide has a chance to run. */
/* Answers come from a WYSIWYG, so the size is set on the wrapper for everything
   inside to inherit, and lists get their bullets and indent back — the base
   reset strips them from every ul on the site. */
.faq-item__answer { padding: 0 22px 20px; font-size: 14.5px; }
.faq-item__answer p { margin: 0 0 12px; }
.faq-item__answer ul,
.faq-item__answer ol { margin: 0 0 12px; padding-left: 22px; list-style: disc; }
.faq-item__answer ol { list-style: decimal; }
.faq-item__answer ul ul,
.faq-item__answer ol ol,
.faq-item__answer ul ol,
.faq-item__answer ol ul { margin: 6px 0 0; }
.faq-item__answer li { margin-bottom: 6px; color: var(--color-text-muted); }
.faq-item__answer li:last-child { margin-bottom: 0; }
.faq-item__answer a { color: var(--color-primary); text-decoration: underline; }
.faq-item__answer strong { color: var(--color-text); }
.faq-item__answer > *:last-child { margin-bottom: 0; }
.js-fade .faq-item__answer { display: none; }

/* Important-information strip above the footer */
.section--info { padding: 56px 0; }
.section--info h4 { font-size: 16px; margin-bottom: 16px; }
.info-list li { position: relative; padding: 6px 0 6px 20px; font-size: 13.5px; color: var(--color-text-muted); }
.info-list li::before { content: ''; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-light-2); }

/* ---------------------------------------------------------
   SIMPLE INNER-PAGE HERO (no image — e.g. team.html)
--------------------------------------------------------- */
.page-hero { padding: 72px 0 56px; background: linear-gradient(180deg, #EEF4FA 0%, var(--color-bg) 100%); text-align: center; }
.page-hero h1 { font-size: 44px; margin-bottom: 16px; }
.page-hero .section-head { margin-bottom: 0; }

/* ---------------------------------------------------------
   TEAM GRID CARD (static grid, opens the profile modal)
--------------------------------------------------------- */
/* Portraits fill the card edge to edge at a fixed height, cropped from the
   top so heads stay in frame — unlike the other card media, which contains
   the whole image. */
.team-grid-card .card__media {
  aspect-ratio: auto;
  height: 320px;
}
.team-grid-card .card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.team-grid-card .card__body h3 { margin-bottom: 4px; }
.team-grid-card .team-card__role { display: block; margin-bottom: 12px; }
.team-grid-card__bio { font-size: 14px; }
/* Bios only clamp to 3 lines once JS confirms the "View profile"
   modal can actually open to show the rest — otherwise the full
   bio stays visible on the card (no dead-end truncated text). */
.js-fade .team-grid-card__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-modal-trigger { background: none; border: none; cursor: pointer; font-family: inherit; }
/* No-JS fallback: the trigger can't open a modal without script.js,
   so hide it rather than leave a dead button (the full bio above
   already shows everything the modal would have said). */
.js-fade .team-modal-trigger { display: inline-flex; }
.team-modal-trigger { display: none; }

/* ---------------------------------------------------------
   MODAL (team profile, and reusable for any other popup)
--------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 37, 53, 0.6);
  backdrop-filter: blur(8px);
}
.modal__dialog {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  transform: translateY(16px);
  transition: transform var(--transition);
}
.modal.is-open .modal__dialog { transform: translateY(0); }
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg);
  border: none;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.modal__close:hover { background: var(--color-primary-light); color: var(--color-primary); }
.modal__media { flex: 0 0 42%; }
.modal__media { background: var(--color-bg); }
.modal__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.modal__body { padding: 36px; flex: 1; min-width: 0; }
.modal__body h3 { font-size: 24px; margin-bottom: 10px; }
.modal__position { margin-bottom: 18px; }
.modal__body > p { font-size: 14.5px; }
.modal__body .rule { margin: 20px 0; }
.modal__contact-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 12px; }
.modal__contact { margin-bottom: 24px; }
.modal__contact a { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--color-navy); padding: 6px 0; }
.modal__contact a i { color: var(--color-primary); width: 16px; }
.modal__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Booking pop-up: a single full-width column holding the embed, rather than
   the two-column media + body layout the team profile modal uses. */
.modal--booking .modal__dialog { max-width: 900px; display: block; }
.modal--booking .modal__body { padding: 32px; }
.modal--booking .modal__body h3 { margin-bottom: 6px; padding-right: 44px; }
.modal--booking .modal__body > p { margin-bottom: 20px; }
.modal__embed { position: relative; width: 100%; height: var(--booking-height, 700px); max-height: calc(100vh - 200px); }
.modal__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 768px) {
  .modal--booking .modal__body { padding: 24px 16px; }
  .modal__embed { height: calc(100vh - 200px); }
}

/* ---------------------------------------------------------
   COMPACT DECORATIVE CTA (e.g. team.html closing section)
--------------------------------------------------------- */
.section--cta-simple {
  background: var(--color-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 88px 0;
}
.section--cta-simple h2 { color: #fff; }
.section--cta-simple p { color: rgba(255,255,255,0.75); max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-simple__decor { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.06); pointer-events: none; }
.cta-simple__decor--left { width: 320px; height: 320px; left: -120px; bottom: -140px; }
.cta-simple__decor--right { width: 220px; height: 220px; right: 8%; top: -80px; }

/* ---------------------------------------------------------
   FEATURED ARTICLE (news.html)
--------------------------------------------------------- */
.featured-article {
  display: flex;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.featured-article__media { position: relative; flex: 0 0 46%; min-height: 320px; background: var(--color-bg); }
.featured-article__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.featured-article__body { padding: 48px; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.featured-article__body .tag { align-self: flex-start; margin-bottom: 18px; }
.featured-article__body h2 { font-size: 30px; margin-bottom: 14px; }
.featured-article__body p { margin-bottom: 20px; }

/* Overlay badge for article thumbnails (category / "Featured") */
.card__tag--dark { background: var(--color-navy); color: #fff; }

/* ---------------------------------------------------------
   CATEGORY FILTER PILLS + PAGINATION (news.html)
   Generic ".js-filter-grid" component — see script.js.
   No-JS fallback: every ".js-filter-item" stays visible (base
   CSS sets no display rules), so all articles show unfiltered
   and unpaginated. The pagination nav is populated by JS only,
   so it stays empty (and invisible) without script.js.
--------------------------------------------------------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition);
}
.filter-pill i { font-size: 11px; color: var(--color-text-muted); }
.filter-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.filter-pill.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.filter-pill.is-active i { color: rgba(255,255,255,0.8); }

.filter-count { font-size: 14px; color: var(--color-text-muted); margin-bottom: 28px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination__btn,
.pagination__arrow {
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.pagination__btn:hover,
.pagination__arrow:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination__btn.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.pagination__arrow[disabled] { opacity: 0.35; pointer-events: none; }

/* ---------------------------------------------------------
   CONTACT PAGE (contact.html)
--------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-grid h2 { margin-top: 16px; font-size: 32px; }
.contact-grid > div > p { margin-bottom: 28px; }

/* Left column — detail rows */
.detail-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
}
.detail-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  margin-top: 0;
}
.detail-card__icon--accent { background: var(--color-success); }
.detail-card__icon--dark { background: var(--color-text); }
.detail-card strong { display: block; font-size: 15.5px; color: var(--color-navy); }
.detail-card strong a { color: inherit; }
.detail-card strong a:hover { color: var(--color-primary); }
.detail-card span:not(.detail-card__icon) { display: block; font-size: 13.5px; color: var(--color-text-muted); margin-top: 2px; }

.social-links--dark a { background: var(--color-primary-light); color: var(--color-primary); }
.social-links--dark a:hover { background: var(--color-primary); color: #fff; }

/* Right column — form card */
.form-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 44px; }
.form-card h2 { margin-top: 16px; margin-bottom: 24px; font-size: 28px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 8px; }
.form-control {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control::placeholder { color: #A7B0BE; }
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
textarea.form-control { resize: vertical; min-height: 100px; }
select.form-control { cursor: pointer; }

.form-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 24px; cursor: pointer; }
.form-checkbox input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--color-primary); }
.form-checkbox a { color: var(--color-primary); font-weight: 600; }

.btn--block { width: 100%; justify-content: center; }

/* Success confirmation — swapped in for the form by script.js on
   submit; base CSS hides it so the form (with its native HTML5
   validation) is always the default state, JS or no JS. */
.form-success { display: none; text-align: center; padding: 24px 0; }
.form-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  font-size: 22px;
  margin-bottom: 20px;
}
.form-success h3 { font-size: 22px; margin-bottom: 10px; }
.form-success p { font-size: 14.5px; margin: 0; }
.form-card.is-submitted form { display: none; }
.form-card.is-submitted .form-success { display: block; }

/* Left-aligned section intro (map section heading) */
.section-head-left { max-width: 640px; margin-bottom: 40px; }
.section-head-left h2 { margin-top: 16px; font-size: 32px; }

/* Map card */
.map-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.map-card__embed { position: relative; width: 100%; height: var(--map-height, 420px); }
.map-card__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-card__bar { padding: 24px 28px; }
.map-card__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.map-card__bar span { font-size: 14.5px; color: var(--color-text); font-weight: 500; }
.map-card__bar span i { color: var(--color-primary); margin-right: 6px; }

/* Full-bleed variant: the card sits outside .container and runs edge to edge,
   while the address bar's contents stay aligned with the rest of the page. */
.map-card--full {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
.map-card--full .map-card__bar { padding: 24px 0; }
.map-card--full .map-card__bar-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { order: -1; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .team-card { flex: 0 0 calc(33.333% - 16px); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .split-row,
  .split-row--intro { grid-template-columns: 1fr; gap: 32px; }
  .split-row--reverse .split-row__media,
  .split-row--reverse .split-row__content { order: initial; }
  .service-slide,
  .testimonial-card { flex: 0 0 calc(50% - 12px); }
  .carousel-arrow--edge-left { left: 0; }
  .carousel-arrow--edge-right { right: 0; }
  .site-nav.is-stuck .site-nav__phone { display: none; }
  .faq-grid { grid-template-columns: 1fr; }
  .featured-article__body { padding: 36px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .form-card { padding: 32px; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }

  /* The whole header sticks. The two bars are separate siblings rather than
     one wrapper on purpose: a sticky element can only stick within its own
     parent, so wrapping them would stop the desktop nav sticking at all. */
  .top-bar {
    position: sticky;
    top: 0;
    z-index: 110;
  }
  .top-bar__inner {
    min-height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .logo__image { width: auto; max-height: 40px; }

  /* Pinned directly beneath the top bar, so an open menu travels with it. */
  .site-nav {
    position: sticky;
    top: 64px;
  }

  /* Only the logo and the hamburger belong up here at this width. */
  .top-bar__phone,
  .top-bar__right .btn,
  .top-bar__right .rating-badge { display: none; }

  /* Not sticky in the desktop sense, so the stuck treatment never applies. */
  .site-nav.is-stuck {
    background: var(--color-primary);
    border-bottom: 0;
    box-shadow: none;
  }
  .site-nav__inner,
  .site-nav.is-stuck .site-nav__inner { display: block; min-height: 0; }
  .site-nav.is-stuck .site-nav__brand,
  .site-nav.is-stuck .site-nav__actions { display: none; }
  .site-nav.is-stuck .site-nav__list > li > a { color: rgba(255,255,255,0.92); }
  .site-nav__list {
    display: none;
    flex-direction: column;
    /* Without this the column list wraps into extra columns once max-height
       constrains it, throwing items off to the right. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }
  .site-nav__list.is-open {
    display: flex;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav__list > li > a { padding: 14px 20px; }
  /* Touch devices have no hover, so sub-menus become an accordion: the label
     stays a link to the parent page and the arrow beside it does the opening. */
  .site-nav__list > li.has-dropdown {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .nav-sub-toggle { display: flex; }
  .site-nav__list > li > a i { display: none; }

  .dropdown {
    position: static;
    display: none;
    grid-column: 1 / -1;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255,255,255,0.06);
    margin: 0 12px 8px;
  }
  .site-nav__list > li.has-dropdown.is-open > .dropdown { display: block; }
  .site-nav__list > li.has-dropdown.is-open > .nav-sub-toggle i { transform: rotate(180deg); }
  .dropdown li a { color: rgba(255,255,255,0.85); }
  .dropdown li a:hover { background: rgba(255,255,255,0.1); color: #fff; }

  .hero h1 { font-size: 36px; }
  .section { padding: 64px 0; }
  .section-head h2 { font-size: 28px; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .team-card { flex: 0 0 calc(100% - 0px); }
  .team-grid-card .card__media { height: 280px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
  .testimonial { padding: 28px; }
  .service-slide,
  .testimonial-card { flex: 0 0 100%; }
  .cta-bar__inner { flex-direction: column; align-items: flex-start; }
  .carousel-arrow--edge { display: none; }
  .modal__dialog { flex-direction: column; max-height: calc(100vh - 32px); }
  .modal__media { flex-basis: auto; height: 220px; }
  .modal__body { padding: 28px; }
  .page-hero h1 { font-size: 32px; }
  .featured-article { flex-direction: column; }
  .featured-article__media { flex-basis: auto; min-height: 220px; }
  .featured-article__body { padding: 28px; }
  .pagination { flex-wrap: wrap; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 24px; }
  .map-card__embed { height: min(var(--map-height, 420px), 300px); }
  .map-card__bar-inner { flex-direction: column; align-items: flex-start; }
}



/* CSS for the shortcode [cmplz-cookies]
 * If you want to disable document CSS, without losing the Cookie Table CSS
 */

#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary {
  display: block;
  cursor: pointer;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary::-webkit-details-marker,
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories summary::marker {
  display: none;
  content: '';
}
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description,
#cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data,
#cmplz-document .cmplz-dropdown .cmplz-sharing-data {
  display: inline-block;
  width: calc(50% - 35px);
  vertical-align: top;
}
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-header .cmplz-accept-service,
#cmplz-document .cmplz-dropdown .cmplz-service-header .cmplz-accept-service {
  display: none;
}
@media only screen and (max-width: 600px) {
  #cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description,
  #cmplz-document .cmplz-dropdown .cmplz-service-description,
  #cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data,
  #cmplz-document .cmplz-dropdown .cmplz-sharing-data {
    width: 100%;
  }
}
#cmplz-cookies-overview .cmplz-dropdown summary,
#cmplz-document .cmplz-dropdown summary {
  display: block;
  cursor: pointer;
}
#cmplz-cookies-overview .cmplz-dropdown summary::-webkit-details-marker,
#cmplz-document .cmplz-dropdown summary::-webkit-details-marker,
#cmplz-cookies-overview .cmplz-dropdown summary::marker,
#cmplz-document .cmplz-dropdown summary::marker {
  display: none;
  content: '';
}
#cmplz-cookies-overview .cmplz-dropdown summary div,
#cmplz-document .cmplz-dropdown summary div {
  display: grid;
  grid-template: "heading chevron";
  grid-template-columns: 2fr 35px;
  grid-gap: 15px;
  align-items: center;
}
#cmplz-cookies-overview .cmplz-dropdown summary div h3,
#cmplz-document .cmplz-dropdown summary div h3 {
  grid-area: heading;
  margin: 0;
}
#cmplz-cookies-overview .cmplz-dropdown summary div:after,
#cmplz-document .cmplz-dropdown summary div:after {
  grid-area: chevron;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary,
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary {
  display: block;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div,
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
  grid-template: "heading paragraph checkbox chevron";
  grid-template-columns: 2fr auto auto 35px;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p,
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div p {
  grid-area: paragraph;
}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose,
#cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
  display: grid;
}
@media only screen and (min-width: 600px) {
  #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose,
  #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template: "purpose purpose purpose" "header1 header2 header3" auto;
  }
  #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose,
  #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose {
    grid-area: purpose;
  }
  #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header,
  #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .name-header {
    grid-area: header1;
  }
  #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header,
  #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .retention-header {
    grid-area: header2;
  }
  #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header,
  #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .function-header {
    grid-area: header3;
  }
}
@media only screen and (max-width: 600px) {
  #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose,
  #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose {
    grid-template-columns: 100px 1fr;
  }
  #cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose,
  #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy .cookies-per-purpose .purpose {
    grid-column: span 2;
  }
}
/**
* Categories on the cookie policy
* Do not wrap in cmplz-document, to ensure it works with the separate shortcode
 */
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories {
  margin-top: 10px;
  display: block;
  width: 100%;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
  background-color: rgba(239, 239, 239, 0.25);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary::marker {
  display: none;
  content: '';
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category summary::-webkit-details-marker {
  display: none;
  content: '';
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
  padding: 10px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category:not(:last-child) {
  margin-bottom: 5px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
  display: grid;
  grid-template-columns: 1fr auto 25px;
  grid-template-rows: auto;
  align-items: center;
  grid-gap: 10px;
  padding: 5px 10px;
  background-color: rgba(239, 239, 239, 0.5);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header section {
  padding: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2 {
  grid-column-start: 1;
  width: 100%;
  justify-self: start;
  font-size: 18px;
  text-align: left;
  margin-top: 8px;
  text-transform: initial;
  padding-bottom: 10px;
  border-bottom: 0;
  margin-bottom: 0px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header h2:before {
  height: 0;
  margin: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
  font-size: var(--cmplz_category_header_active_font_size);
  color: var(--cmplz_category_header_always_active_color);
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active label,
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active input {
  display: none;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header label > span {
  display: none;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox {
  display: flex;
  align-items: center;
  margin: 0;
  padding: initial;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open {
  grid-column-start: 3;
  cursor: pointer;
  content: '';
  background: var(--cmplz_category_open_icon_url) no-repeat;
  transform: rotate(0deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-size: cover;
  height: 25px;
  width: 25px;
}
#cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category[open] .cmplz-icon.cmplz-open {
  transform: rotate(180deg);
}
.postbox #cmplz-document {
  margin: auto auto;
}
#cmplz-document {
  font-size: 14px;
  margin-top: 0;
  max-width: 600px;
  text-justify: inter-word;
  /* Buttons styles */
  /*WCAG2.0 */
}
#cmplz-cookies-overview .cmplz-dropdown h4,
#cmplz-document .cmplz-dropdown h4 {
  font-size: 18px;
  text-align: left;
  margin-top: 15px;
  margin-bottom: 5px;
  text-transform: initial;
}
#cmplz-cookies-overview .cmplz-dropdown summary h3,
#cmplz-document .cmplz-dropdown summary h3 {
  padding: 0 5px;
  font-size: 18px;
  border-bottom: 0;
}
#cmplz-cookies-overview .cmplz-dropdown summary p,
#cmplz-document .cmplz-dropdown summary p {
  text-align: right;
  padding: 0;
  margin: 0;
  font-size: 14px;
  border-bottom: 0;
}
#cmplz-document input::-moz-focus-inner,
#cmplz-document button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
#cmplz-document a {
  text-decoration: underline;
}
#cmplz-document a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}
#cmplz-document a:focus {
  border: 1px solid black;
  padding: 2px;
}
#cmplz-document #cmplz-dnsmpd-form label {
  margin-right: 20px;
  min-width: 100px;
  display: inline-block;
}
#cmplz-document .alert {
  padding: 7px;
  color: white;
  margin: 10px 0;
}
#cmplz-document .alert.error {
  background-color: #f44336;
}
#cmplz-document .alert.success {
  background-color: green;
}
#cmplz-document .close {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
#cmplz-document .close:hover {
  color: black;
}
#cmplz-document h2,
#cmplz-document h3 {
  font-size: 22px;
  text-align: left;
  margin-top: 15px;
  text-transform: initial;
  padding-bottom: 10px;
  border-bottom: 1px solid #c6c6c6;
  margin-bottom: 10px;
}
#cmplz-document.impressum h2,
#cmplz-document.impressum h3 {
  border-bottom: none;
  font-size: 1em;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
#cmplz-document.impressum p {
  margin-bottom: 7px;
}
#cmplz-document h4 {
  font-size: 18px;
  text-align: left;
  margin-top: 15px;
  margin-bottom: 5px;
  text-transform: initial;
}
#cmplz-document h5 {
  font-size: 14px;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
  text-transform: initial;
}
#cmplz-document h3.annex,
#cmplz-document h4.annex {
  font-weight: bold;
}
#cmplz-document span h3 {
  font-size: 14px;
  border-bottom: 0;
}
#cmplz-document p,
#cmplz-document li,
#cmplz-document td {
  font-size: 14px;
  margin-top: 0;
}
#cmplz-document ol.alphabetic {
  counter-reset: list;
  list-style-type: none;
}
#cmplz-document ol.alphabetic li:before {
  font-weight: bold;
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}
#cmplz-document ul {
  list-style: disc;
  margin-left: 15px;
  margin-bottom: 15px;
}
#cmplz-document ol.alphabetic ol {
  counter-reset: list;
  list-style-type: none;
}
#cmplz-document ol.alphabetic ol li:before {
  font-weight: bold;
  content: counter(list, decimal) ") ";
  counter-increment: list;
}
#cmplz-document .cmplz-subtitle {
  font-weight: bold;
  margin-top: 25px;
}
#cmplz-document .cmplz-indent {
  margin-left: 36px;
}
#cmplz-cookies-overview .cmplz-dropdown,
#cmplz-document .cmplz-dropdown {
  background-color: rgba(239, 239, 239, 0.25);
}

#cmplz-cookies-overview .cmplz-dropdown p,
#cmplz-document .cmplz-dropdown p,
#cmplz-cookies-overview .cmplz-dropdown a,
#cmplz-document .cmplz-dropdown a {
  font-size: 14px;
  margin-top: 0;
}
#cmplz-cookies-overview .cmplz-dropdown p,
#cmplz-document .cmplz-dropdown p,
#cmplz-cookies-overview .cmplz-dropdown a,
#cmplz-document .cmplz-dropdown a,
#cmplz-cookies-overview .cmplz-dropdown h4,
#cmplz-document .cmplz-dropdown h4,
#cmplz-cookies-overview .cmplz-dropdown ul,
#cmplz-document .cmplz-dropdown ul {
  padding: 0 15px ;
}
#cmplz-cookies-overview .cmplz-dropdown p.legal-obligations-description,
#cmplz-document .cmplz-dropdown p.legal-obligations-description {
  padding-bottom: 15px;
}
#cmplz-cookies-overview .cmplz-dropdown summary::marker,
#cmplz-document .cmplz-dropdown summary::marker {
  display: none;
  content: '';
}
#cmplz-cookies-overview .cmplz-dropdown summary::-webkit-details-marker,
#cmplz-document .cmplz-dropdown summary::-webkit-details-marker {
  display: none;
  content: '';
}
#cmplz-cookies-overview .cmplz-dropdown summary,
#cmplz-document .cmplz-dropdown summary {
  display: block;
  background-color: rgba(239, 239, 239, 0.5);
  margin: 5px 0;
  padding: 5px 10px;
  align-items: center;
  justify-items: stretch;
}
#cmplz-cookies-overview .cmplz-dropdown summary div:after,
#cmplz-document .cmplz-dropdown summary div:after {
  cursor: pointer;
  content: '';
  background: url(../images/down.png) no-repeat;
  transform: rotate(0deg);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-size: cover;
  height: 25px;
  width: 25px;
  margin: 5px;
}
#cmplz-cookies-overview .cmplz-dropdown[open],
#cmplz-document .cmplz-dropdown[open] {
  padding-bottom: 1px;
}
#cmplz-cookies-overview .cmplz-dropdown[open] summary div:after,
#cmplz-document .cmplz-dropdown[open] summary div:after {
  transform: rotate(180deg);
}
#cmplz-cookies-overview .cmplz-dropdown h4,
#cmplz-document .cmplz-dropdown h4 {
  font-size: 15px;
  margin: 5px 0;
}
#cmplz-cookies-overview .cmplz-dropdown h5,
#cmplz-document .cmplz-dropdown h5 {
  margin: 0;
}
#cmplz-cookies-overview .cmplz-dropdown .cmplz-service-description,
#cmplz-document .cmplz-dropdown .cmplz-service-description,
#cmplz-cookies-overview .cmplz-dropdown .cmplz-sharing-data,
#cmplz-document .cmplz-dropdown .cmplz-sharing-data {
  padding: 0 15px 15px;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose,
#cmplz-document .cmplz-dropdown .cookies-per-purpose {
  border: 1px solid #dadada;
  grid-gap: 1px;
  background-color: #dadada;
  margin-bottom: 10px;
}
#cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div,
#cmplz-document .cmplz-dropdown .cookies-per-purpose div {
  background-color: white;
  padding: 15px;
}
@media only screen and (min-width: 600px) {
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .name-header,
  #cmplz-document .cmplz-dropdown .cookies-per-purpose .name-header {
    background-color: #f7f7f7;
  }
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .retention-header,
  #cmplz-document .cmplz-dropdown .cookies-per-purpose .retention-header {
    background-color: #f7f7f7;
  }
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose .function-header,
  #cmplz-document .cmplz-dropdown .cookies-per-purpose .function-header {
    background-color: #f7f7f7;
  }
}
@media only screen and (max-width: 600px) {
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose h5,
  #cmplz-document .cmplz-dropdown .cookies-per-purpose h5 {
    line-height: 1.8;
  }
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
  #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+2),
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
  #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+3),
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
  #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+4),
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
  #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+5),
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
  #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+6),
  #cmplz-cookies-overview .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7),
  #cmplz-document .cmplz-dropdown .cookies-per-purpose div:nth-child(12n+7) {
    background-color: #f7f7f7;
  }
}