/* ==========================================================================
   Centa — stylesheet
   --------------------------------------------------------------------------
   One file, no build step, no framework. Roughly 700 lines against the ~250 KB
   of Bootstrap + template CSS the Joomla site shipped, and it loads in one
   request.

   Order: tokens → reset → primitives → layout → components → responsive.
   Everything is driven by the custom properties at the top, so retuning the
   palette is a handful of edits rather than a search-and-replace.
   ========================================================================== */

/* ------------------------------------------------------------- tokens --- */
:root {
  /* Brand. --brand-600 is the working blue: the logo's swirl is a touch
     brighter (#0d86c4) and the old Joomla preset brighter still (#00aeef),
     but neither clears 4.5:1 on white for text. This one does, so links and
     buttons stay readable without abandoning the identity. */
  --brand-800: #08507c;
  --brand-700: #0a648f;
  --brand-600: #0d7ab8;
  --brand-500: #0d86c4;
  --brand-400: #35a7e0;
  --brand-100: #d3ecfa;
  --brand-50:  #eef7fd;

  --ink-900: #0f1b26;
  --ink-800: #16283a;
  --ink-700: #2a3f52;
  --ink-500: #55697c;
  --ink-400: #7b8b9c;

  --surface:    #ffffff;
  --surface-2:  #f5f9fc;
  --surface-3:  #eaf2f8;
  --line:       #e1eaf2;
  --line-soft:  #edf3f8;

  --ok:   #1a7f5a;
  --warn: #9a6206;
  --warn-bg: #fdf6e8;

  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  /* Shadows stay tinted with the brand hue rather than neutral grey — a pure
     black shadow over a blue-tinted page reads as dirt. */
  --shadow-sm: 0 1px 2px rgba(15, 40, 62, .06), 0 1px 3px rgba(15, 40, 62, .05);
  --shadow-md: 0 4px 12px rgba(15, 40, 62, .07), 0 2px 4px rgba(15, 40, 62, .04);
  --shadow-lg: 0 18px 40px rgba(15, 40, 62, .10), 0 4px 12px rgba(15, 40, 62, .05);

  --wrap: 1180px;
  --gap: 28px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;

  /* Fluid type: no media queries needed for headings. */
  --t-display: clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem);
  --t-h1:      clamp(1.9rem, 1.35rem + 2.2vw, 2.85rem);
  --t-h2:      clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem);
  --t-h3:      clamp(1.1rem, 1.02rem + .35vw, 1.28rem);
  --t-lead:    clamp(1.05rem, 1rem + .35vw, 1.2rem);
}

/* --------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink-900);
  line-height: 1.2;
  letter-spacing: -.015em;
  font-weight: 700;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -.008em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-800); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin: .35em 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--brand-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--brand-700); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 600;
  transition: top .15s ease;
}
.skip:focus { top: 0; color: #fff; }

/* ---------------------------------------------------------- primitives --- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.eyebrow {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand-600); margin: 0 0 .75rem;
}

.muted { color: var(--ink-400); font-weight: 400; display: block; font-size: .88em; }

.note {
  font-size: .93rem; color: var(--ink-500); margin-top: 1.25rem;
}

.icon { width: 26px; height: 26px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .68em 1.35em;
  font: inherit; font-weight: 600; font-size: .96rem;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, transform .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.btn--lg { padding: .82em 1.7em; font-size: 1rem; }

.btn--primary {
  background: var(--brand-600); color: #fff; border-color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--brand-700); border-color: var(--brand-700);
  color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md);
}

.btn--ghost { background: transparent; color: var(--brand-700); border-color: var(--brand-100); }
.btn--ghost:hover {
  background: var(--brand-50); border-color: var(--brand-400);
  color: var(--brand-800); transform: translateY(-1px);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------- header --- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 76px;
}

.brand { flex: none; display: flex; align-items: center; }
.brand img { width: 150px; height: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; margin: 0; }

.nav__link {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .6em .8em; border-radius: var(--radius-sm);
  color: var(--ink-800); font-weight: 600; font-size: .95rem;
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.nav__link:hover { background: var(--surface-2); color: var(--brand-700); }
.nav__link.is-active { color: var(--brand-700); }
.nav__link.is-active::after {
  content: ""; position: absolute; left: .8em; right: .8em; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--brand-600);
}

.nav__chev { width: 15px; height: 15px; transition: transform .18s ease; opacity: .6; }
.nav__item--has-menu:hover .nav__chev,
.nav__item--has-menu.is-open .nav__chev { transform: rotate(180deg); }

.nav__phone {
  font-weight: 700; color: var(--ink-800); text-decoration: none;
  font-size: .95rem; white-space: nowrap;
}
.nav__phone:hover { color: var(--brand-700); }

/* Dropdown. Opens on hover for mice, and on click/Enter for keyboards and
   touch — the JS toggles .is-open, so neither group is locked out. */
.mega {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 330px; padding: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__item--has-menu:hover .mega,
.nav__item--has-menu.is-open .mega,
.mega:focus-within {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* A hover bridge, so the pointer can cross the 10px gap without the menu
   snapping shut halfway. */
.nav__item--has-menu::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}

.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }
.mega__list a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink-800);
}
.mega__list a:hover { background: var(--brand-50); }
.mega__label { display: block; font-weight: 650; font-size: .93rem; }
.mega__desc { display: block; font-size: .83rem; color: var(--ink-500); line-height: 1.45; }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer;
}
.burger span {
  display: block; height: 2px; border-radius: 2px; background: var(--ink-800);
  transition: transform .2s ease, opacity .2s ease;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------- breadcrumbs --- */
.crumbs { border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: .5em; list-style: none;
  margin: 0; padding: 11px 0; font-size: .87rem;
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: .5em; color: var(--ink-500); }
.crumbs li + li::before { content: "/"; color: var(--ink-400); }
.crumbs a { color: var(--ink-500); text-decoration: none; }
.crumbs a:hover { color: var(--brand-700); text-decoration: underline; }

/* --------------------------------------------------------------- hero --- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(3.5rem, 2rem + 7vw, 7rem) 0 clamp(3rem, 2rem + 5vw, 5.5rem);
  background:
    radial-gradient(900px 420px at 78% -8%, var(--brand-100) 0%, transparent 62%),
    linear-gradient(180deg, var(--brand-50) 0%, #fff 82%);
}
/* A faint grid, cut off with a mask so it fades instead of ending in a line.
   Subtle enough to read as texture rather than decoration. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--brand-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--brand-100) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .34;
  -webkit-mask-image: radial-gradient(680px 380px at 82% 0%, #000 0%, transparent 72%);
          mask-image: radial-gradient(680px 380px at 82% 0%, #000 0%, transparent 72%);
}
/* .hero__inner also carries .wrap, so constraining the measure has to happen on
   the children — putting a max-width on the element itself would shrink the
   centred .wrap and pull the hero copy out of line with the logo above it and
   the section headings below. */
.hero__inner { position: relative; z-index: 1; }
.hero__inner > * { max-width: 760px; }
.hero h1 { font-size: var(--t-display); margin-bottom: .35em; }
.hero--compact h1 { font-size: var(--t-h1); }
.hero--compact { padding-block: clamp(2.6rem, 2rem + 3vw, 4rem) clamp(2.2rem, 1.8rem + 2vw, 3rem); }
.hero__text { font-size: var(--t-lead); color: var(--ink-700); max-width: 62ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* -------------------------------------------------------------- bands --- */
.band { padding: clamp(3rem, 2rem + 4vw, 5rem) 0; }
.band--tint { background: var(--surface-2); border-block: 1px solid var(--line-soft); }

.section-head { max-width: 660px; margin-bottom: 2.5rem; }
.section-head h2 { margin-bottom: .35em; }
.section-head p { color: var(--ink-500); font-size: var(--t-lead); margin: 0; }

/* --------------------------------------------------------------- grid --- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }

/* --------------------------------------------------------------- card --- */
.card {
  display: flex; flex-direction: column;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card .icon {
  width: 44px; height: 44px; padding: 9px; margin-bottom: 18px;
  color: var(--brand-600); background: var(--brand-50);
  border-radius: 12px; border: 1px solid var(--brand-100);
  transition: background-color .18s ease, color .18s ease;
}
.card h3 { margin-bottom: .4em; }
.card p { color: var(--ink-500); font-size: .96rem; margin-bottom: 0; }
.card--compact { padding: 24px 22px; }

.card--link { text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand-400);
  color: inherit;
}
.card--link:hover .icon { background: var(--brand-600); color: #fff; }

.card__more {
  margin-top: auto; padding-top: 18px;
  font-weight: 650; font-size: .92rem; color: var(--brand-700);
  display: inline-flex; align-items: center; gap: .4em;
}
.card__more::after { content: "→"; transition: transform .18s ease; }
.card--link:hover .card__more::after { transform: translateX(4px); }
.card__note { margin-top: auto; padding-top: 18px; font-size: .92rem; }

.card--download { align-items: flex-start; }
.downloads { margin-top: 2rem; }

/* -------------------------------------------------------------- split --- */
.split {
  display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1.15fr .85fr; align-items: center;
}
.split__aside {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px;
  box-shadow: var(--shadow-md);
}
.split__aside img { margin-bottom: 22px; max-width: 220px; }

.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 30px; margin: .7em 0;
  font-size: .96rem; color: var(--ink-700);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d7ab8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat;
  border: 1px solid var(--brand-100);
}

/* ----------------------------------------------------------- callouts --- */
.callout {
  display: flex; gap: 22px; align-items: flex-start;
  padding: 30px; border-radius: var(--radius);
  border: 1px solid var(--brand-100); background: var(--brand-50);
}
.callout .icon { width: 40px; height: 40px; color: var(--brand-600); flex: none; }
.callout h2, .callout h3 { margin-bottom: .45em; }
.callout p:last-child { margin-bottom: 0; }
.callout__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4rem; }
.callout--brand { background: var(--brand-50); }
.callout--wide { align-items: center; }
/* The small variant carries no icon, so its heading and body are direct
   children. Left as flex they would sit side by side instead of stacking. */
.callout--sm { display: block; padding: 22px; margin-top: 2rem; }
.callout--sm h3 { font-size: 1.02rem; }
.callout--sm p { font-size: .93rem; margin-bottom: 0; }
.callout--warn { background: var(--warn-bg); border-color: #f0dcae; }
.callout--warn .icon { color: var(--warn); }

/* --------------------------------------------------------------- cta --- */
.band--cta {
  background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
  color: #fff;
}
.band--cta h2 { color: #fff; }
.band--cta p { color: rgba(255, 255, 255, .86); margin-bottom: 0; max-width: 52ch; }
.band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.band--cta .btn--primary { background: #fff; color: var(--brand-800); border-color: #fff; }
.band--cta .btn--primary:hover { background: var(--brand-50); color: var(--brand-800); }
.band--cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.band--cta .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

/* -------------------------------------------------------------- prose --- */
.prose { max-width: 74ch; }
/* Same trap as .hero__inner: where .prose sits ON a .wrap, a max-width here
   would shrink the centred wrap and shove the text into the middle of the
   page, out of line with the header, breadcrumb and hero above it. Constrain
   the measure on the children instead. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 74ch; }
.prose--tight { max-width: 82ch; margin-top: 2rem; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; }
.prose li { margin: .5em 0; }
.prose--legal { max-width: 78ch; }
.prose--legal ul { padding-left: 1.15em; }
.prose--legal li { color: var(--ink-700); }

.colophon {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-500);
}

.link-list { list-style: none; padding: 0; }
.link-list li {
  padding: 16px 0; border-bottom: 1px solid var(--line);
  margin: 0;
}
.link-list li:first-child { border-top: 1px solid var(--line); }
.link-list a { font-weight: 650; }
.link-list .muted { margin-top: .2em; }

.note-list { font-size: .93rem; color: var(--ink-500); }

/* -------------------------------------------------------------- steps --- */
.steps ol, .steps-list { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps li, .steps-list > li {
  position: relative; counter-increment: step;
  padding-left: 62px; margin: 0 0 2.2rem;
}
.steps li::before, .steps-list > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%; font-weight: 700; font-size: 1.05rem;
  color: #fff; background: var(--brand-600);
  box-shadow: var(--shadow-sm);
}
.steps-list > li::before { background: var(--brand-600); }
.steps li:last-child, .steps-list > li:last-child { margin-bottom: 0; }
.steps h3, .steps-list h3 { margin-bottom: .35em; }

/* ------------------------------------------------------------- tables --- */
/* The scroll container carries tabindex and role=region in the markup so a
   keyboard user can actually reach and scroll a wide table. */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; }

.compare { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 720px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; }
.compare thead th {
  background: var(--ink-800); color: #fff;
  font-size: .88rem; font-weight: 650;
  position: sticky; top: 0;
  border-bottom: 0;
}
.compare thead th:first-child { background: var(--ink-900); }
.compare tbody th {
  font-weight: 600; color: var(--ink-800);
  border-bottom: 1px solid var(--line-soft);
  min-width: 260px;
}
.compare tbody td {
  text-align: center; border-bottom: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft);
}
.compare tbody tr:nth-child(even) td,
.compare tbody tr:nth-child(even) th { background: var(--surface-2); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }

.row-price th { font-weight: 700; }
.row-price td.price-cell {
  font-size: 1.12rem; font-weight: 700; color: var(--brand-700);
  background: var(--brand-50) !important;
}
.compare .tick { width: 20px; height: 20px; color: var(--ok); margin-inline: auto; }
.compare td.no { color: var(--ink-400); }
.cell-note { display: block; font-size: .8rem; color: var(--ink-500); margin-top: .2em; }

.compare--data { min-width: 860px; }
.compare--data tbody td { text-align: center; font-size: .9rem; }
.compare--data tbody td .muted { margin-top: .25em; color: var(--brand-700); }

/* -------------------------------------------------------- price cards --- */
.price-cards { margin-top: 2.5rem; }
.price-card {
  padding: 30px 26px; text-align: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.price-card--featured {
  border-color: var(--brand-400); border-width: 2px;
  box-shadow: var(--shadow-md);
}
.price-card h3 { font-size: 1.02rem; color: var(--ink-500); font-weight: 650; }
.price {
  font-size: 2.3rem; font-weight: 700; color: var(--brand-700);
  line-height: 1.1; margin: .3em 0 .6em;
}
.price span { display: block; font-size: .82rem; font-weight: 500; color: var(--ink-500); margin-top: .5em; }
.price-card__note { font-size: .9rem; color: var(--ink-500); margin: 0; }

/* ----------------------------------------------------------- helpdesk --- */
.helpdesk {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #fff; box-shadow: var(--shadow-sm);
}
.helpdesk__frame { width: 100%; height: 78vh; min-height: 560px; border: 0; display: block; }

/* ------------------------------------------------------------ contact --- */
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }

.contact-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 22px; }
.contact-list .icon { width: 38px; height: 38px; padding: 8px; color: var(--brand-600); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 10px; }
.contact-list__label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-400); font-weight: 700; margin-bottom: .15em; }
.contact-list a { font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- form --- */
.form {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 38px);
  box-shadow: var(--shadow-md);
}
.form h2 { margin-bottom: 1.2em; }

.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: .93rem; color: var(--ink-800); margin-bottom: .45em; }
.req { color: #c0392b; }

.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: .96rem; color: var(--ink-900);
  background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #c0392b; background: #fdf3f2;
}
.field__err { margin: .45em 0 0; font-size: .87rem; color: #c0392b; font-weight: 500; }

.field--check { display: flex; align-items: center; gap: 10px; }
.field--check input { width: 19px; height: 19px; accent-color: var(--brand-600); flex: none; }
.field--check label { margin: 0; font-weight: 500; font-size: .93rem; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden fields but happily fill in ones that are merely out of view. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  margin: 1.2rem 0 0; padding: 14px 16px;
  border-radius: var(--radius-sm); font-size: .93rem;
  border: 1px solid var(--brand-100); background: var(--brand-50); color: var(--ink-800);
}
.form__status[data-state="error"] { background: #fdf3f2; border-color: #f3ccc6; }
.form__status[data-state="ok"] { background: #eef8f3; border-color: #bfe3d3; }
.form__legal { margin: 1.2rem 0 0; font-size: .84rem; color: var(--ink-400); }

/* ------------------------------------------------------------ sitemap --- */
.sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.sitemap__col h2 { font-size: 1.05rem; margin-bottom: .6em; }
.sitemap__col h2 a { text-decoration: none; }
.sitemap__col ul { list-style: none; padding: 0; margin: 0; }
.sitemap__col li { margin: .5em 0; }
.sitemap__col li a { color: var(--ink-500); text-decoration: none; font-size: .95rem; }
.sitemap__col li a:hover { color: var(--brand-700); text-decoration: underline; }

/* ------------------------------------------------------------- footer --- */
.site-footer { background: var(--ink-900); color: #b9c7d4; padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; margin-top: 0; }
.site-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--gap); padding-bottom: 3rem;
}
.site-footer h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 1.1em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: .6em 0; font-size: .93rem; }
.site-footer a { color: #b9c7d4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__brand img {
  width: 160px; margin-bottom: 20px;
  /* The logo is dark-on-transparent; invert it so it reads on the dark bar. */
  filter: brightness(0) invert(1); opacity: .95;
}
.site-footer__brand p { font-size: .93rem; max-width: 34ch; color: #94a6b6; }
.site-footer__contact li { color: #94a6b6; line-height: 1.6; }

.site-footer__bar {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: center; justify-content: space-between;
  padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.site-footer__bar p { margin: 0; font-size: .87rem; color: #8296a7; }
.site-footer__bar ul { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__bar li { margin: 0; font-size: .87rem; }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 980px) {
  .split, .contact { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .burger { display: block; }

  .nav {
    position: fixed; inset: 76px 0 auto;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 16px 24px 28px;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.is-open { display: flex; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: .8em .6em; font-size: 1rem; justify-content: space-between; }
  .nav__link.is-active::after { display: none; }
  .nav__item--has-menu::after { display: none; }

  /* On a phone the dropdown becomes a plain nested list — no floating panel,
     no hover, and it only opens when tapped. */
  .mega {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; padding: 0 0 8px 12px; margin: 0;
    border: 0; border-left: 2px solid var(--brand-100);
    border-radius: 0; box-shadow: none;
    display: none;
  }
  .nav__item--has-menu.is-open .mega { display: block; }
  .nav__item--has-menu:hover .mega { display: none; }
  .nav__item--has-menu.is-open:hover .mega { display: block; }
  .mega__desc { display: none; }

  .nav__item--cta { margin-top: 14px; }
  .nav__item--cta .btn { width: 100%; }
  .nav__aside { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
  .nav__phone { font-size: 1.05rem; }

  .band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 20px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .card { padding: 24px 22px; }
  .callout { flex-direction: column; gap: 16px; padding: 24px; }
  .steps li, .steps-list > li { padding-left: 0; padding-top: 54px; }
  .steps li::before, .steps-list > li::before { width: 38px; height: 38px; font-size: .98rem; }
  .helpdesk__frame { height: 70vh; min-height: 460px; }
  .hero__actions .btn, .band__actions .btn { width: 100%; }
}

/* --------------------------------------------------------------- print --- */
@media print {
  .site-header, .site-footer, .band--cta, .skip, .crumbs { display: none; }
  body { font-size: 11pt; color: #000; }
  .hero { background: none; padding: 0 0 1rem; }
  .hero::after { display: none; }
  .card, .callout, .table-wrap { box-shadow: none; border: 1px solid #ccc; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}