/* ==========================================================================
   Meridian: warm, human, European
   --------------------------------------------------------------------------
   Generous rounded shapes, wide soft shadows, long lines and a slower reading
   rhythm. The least like a security vendor of the directions, and the most
   like a firm you would actually want in the building during a bad week.

   The argument for it: this company sells a named person who turns up two days
   a month. Density sells a platform; space sells people.

   Palette and typefaces are the Think Smart huisstijl, unchanged. The warmth
   here comes from shape, spacing and line height rather than from a second
   palette.

   The moves that make it Meridian:

     * Generous radii and soft, wide shadows. Nothing has a sharp corner.
     * A slower reading rhythm: taller lines, more space between sections, and
       a narrower measure for running text.
     * Imagery, when it exists, is larger and less cropped than elsewhere.
   ========================================================================== */

:root {
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 30px;
  --radius-xl: 38px;
  --page-max: 1200px;

  --shadow-sm: 0 4px 16px rgba(15, 15, 83, 0.05);
  --shadow: 0 18px 44px rgba(15, 15, 83, 0.08);
  --shadow-lg: 0 32px 70px rgba(15, 15, 83, 0.13);

  --section-y: clamp(62px, 6.5vw, 100px);
}

body {
  line-height: 1.75;
}

/* Running text sits on a narrower measure than the base design allows, which
   is the other half of the slower rhythm. */
.prose,
.intro-copy,
.head-block > p {
  max-width: 60ch;
}

h1,
h2,
h3,
h4,
h5 {
  letter-spacing: -0.015em;
}

/* A serif at body size is slower to read, which suits a subject people are
   trying to understand rather than skim. Headings stay on the sans so the
   page still has a clear voice change between structure and prose. */
.prose,
.intro-copy,
.head-block > p,
.hero__lead,
.pagehero__lead,
.card p,
.deadline p,
.measure p,
.step p,
.tier li,
.value span {
  font-family: var(--font-body);
}

.eyebrow {
  font-family: var(--font-head);
  letter-spacing: 0.18em;
  color: var(--teal-deep);
}

.btn {
  border-radius: 999px;
  padding: 13px 24px;
}

.btn--primary {
  box-shadow: 0 10px 26px rgba(26, 163, 163, 0.24);
}

.btn--primary:hover {
  box-shadow: 0 18px 34px rgba(15, 15, 83, 0.22);
}

.hero__card {
  border-radius: var(--radius-xl);
  min-height: clamp(460px, 60vw, 620px);
}

.hero__bg::after {
  background: linear-gradient(
    100deg,
    rgba(15, 15, 83, 0.9) 0%,
    rgba(15, 15, 83, 0.7) 44%,
    rgba(15, 15, 83, 0.24) 74%,
    rgba(15, 15, 83, 0.04) 100%
  );
}

.hero__rings {
  border-color: rgba(255, 255, 255, 0.16);
  background: radial-gradient(circle, rgba(69, 215, 200, 0.1), transparent 58%);
}

.hero__facts li {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.trust-strip {
  border-radius: var(--radius-lg);
}

/* Photography gets more room and softer edges than in the other directions. */
.split__visual .fig,
.mcard__media,
.img-collage .im,
.post__media {
  border-radius: var(--radius-lg);
}

.mcard__media {
  aspect-ratio: 16 / 9;
}

.split {
  gap: clamp(40px, 6vw, 72px);
}

.card,
.tier,
.measure,
.step,
.deadline,
.cert,
.value,
.loc,
.faq details,
.ck-opt,
.entity-card {
  border-radius: var(--radius);
}

.card__ico,
.trust__ico,
.value__ico,
.mega__ico,
.loc__pin {
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
}

.mcard__ico,
.ck-result__ico {
  border-radius: 50%;
}

.measure__n,
.ck-opt .k {
  border-radius: 50%;
}

.navy-panel,
.compare__card--dark,
.figure-card,
.person,
.wizard__aside,
.cta-band,
.incident-band,
.next-step {
  border-radius: var(--radius-lg);
}

.person__top img {
  border-radius: 50%;
  width: 96px;
  height: 96px;
  border-color: rgba(69, 215, 200, 0.55);
}

.cta-band {
  background: var(--grad);
}

.incident-band {
  background: linear-gradient(100deg, #7a2a12 0%, var(--navy) 70%);
}

table.data thead th {
  background: var(--surface);
  font-family: var(--font-head);
}

.table-scroll {
  border-radius: var(--radius);
}

.site-header {
  background: rgba(255, 255, 255, 0.92);
}

.field input,
.field select,
.field textarea {
  border-radius: 14px;
  font-family: var(--font-body);
}

.form-card {
  border-radius: var(--radius-lg);
}

.logo-grid img {
  filter: grayscale(1) ;
  opacity: 0.45;
}

.site-footer {
  background: var(--navy);
}

.pagehero h1::after {
  background: var(--grad);
  width: 62px;
  height: 4px;
}

.consent {
  border-radius: var(--radius);
}