/* ==========================================================================
   Atlas: editorial and unhurried
   --------------------------------------------------------------------------
   Wide margins, hairline rules and almost no shadow. The reference direction
   argues by density; this one argues by composure. It suits a reader who
   distrusts being sold to, which, for a compliance audience, is most of them.

   The palette and the typefaces are the Think Smart huisstijl, unchanged: this
   direction differs in shape, rhythm and restraint, not in brand. Every theme
   here obeys the same rule, so a client is choosing a temperament rather than
   a different company.

   The moves that make it Atlas rather than a recolour:

     * Display type set large and tight, with italic used for emphasis rather
       than bold.
     * Near-square corners, and cards that sit on the ground as ruled areas
       rather than as floating objects.
     * Rules instead of shadows. Nothing lifts on hover; a hairline changes
       weight instead.
     * The accent used sparingly and never as a large fill.
   ========================================================================== */

:root {
  /* A wider display scale: this direction leads with its headlines. */
  --step-4: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  --step-5: clamp(2.5rem, 1.6rem + 4vw, 4.6rem);

  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 5px;
  --radius-xl: 6px;
  --page-max: 1180px;

  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
}

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

body {
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  line-height: 1.7;
}

/* Emphasis is italic, not bold. That is the whole reason for a serif. */
.hero h1 .accent,
.head-block h2 em,
.prose em {
  font-style: italic;
  color: var(--teal-deep);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--muted);
}

.eyebrow svg {
  display: none;
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 2px;
  letter-spacing: 0.01em;
}

.btn--primary {
  background: var(--navy);
  box-shadow: none;
}

.btn--primary:hover {
  background: var(--teal-deep);
  transform: none;
}

.btn--solid:hover,
.btn--white:hover,
.btn--alert:hover {
  transform: none;
}

.btn--ghost {
  border-color: var(--line-2);
}

/* Cards are ruled areas on the paper, not objects above it. */
.card,
.tier,
.measure,
.step,
.deadline,
.cert,
.value,
.loc,
.post,
.mcard,
.form-card,
.table-scroll,
.faq details {
  border-radius: var(--radius);
  box-shadow: none;
}

.card--lift:hover,
.tier:hover,
.measure:hover,
.cert:hover,
.value:hover,
.post:hover,
.mcard:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--navy);
}

.trust-strip {
  border-radius: var(--radius);
  box-shadow: none;
  border-top: 2px solid var(--navy);
}

.hero__card {
  border-radius: var(--radius-xl);
}

.hero__bg::after {
  background: linear-gradient(
    100deg,
    rgba(28, 27, 24, 0.93) 0%,
    rgba(28, 27, 24, 0.78) 45%,
    rgba(28, 27, 24, 0.32) 74%,
    rgba(28, 27, 24, 0.08) 100%
  );
}

.hero__rings {
  border-color: rgba(246, 243, 236, 0.16);
  background: none;
}

.hero__rings::after {
  border-color: rgba(178, 84, 58, 0.3);
}

.hero__facts li {
  border-radius: 2px;
  background: rgba(246, 243, 236, 0.08);
  border-color: rgba(246, 243, 236, 0.2);
}

/* Section heads get a rule above them instead of a coloured eyebrow chip. */
.head-block {
  border-top: 1px solid var(--line-2);
  padding-top: 26px;
}

.head-block--center {
  border-top: none;
  padding-top: 0;
}

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

.navy-panel::after,
.figure-card::after,
.compare__card--dark::after,
.person::after,
.wizard__aside::after {
  display: none;
}

.cta-band {
  background: var(--navy);
  border-radius: var(--radius-lg);
}

.cta-band::after {
  display: none;
}

.measure__n {
  background: var(--navy);
  border-radius: 2px;
}

.card__tag,
.tier__flag,
.badge,
.loc .tag,
.footer-office .tag {
  border-radius: 2px;
  font-family: var(--font-body);
  letter-spacing: 0.12em;
}

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

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

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

.nav__link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

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

.pagehero h1::after {
  background: var(--alert);
  height: 2px;
  width: 44px;
}