/* ------------------------------------------------------------------------
   thri5.co.uk: the parent company page, on top of shared/brand.css.

   Layout concept: one quiet column. This is a corporate page, not a sales
   page, so it is deliberately plainer than the ThriveFSM site. It shares
   the stone and ink neutrals so the two read as related, and lets navy do
   most of the accenting.
   ------------------------------------------------------------------------ */

:root {
  --wrap-max: 720px;
  --band-y:   clamp(40px, 6vw, 66px);
  --eyebrow:  var(--navy);
  --focus:    var(--navy);
}

body { line-height: 1.65; }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.12; }
h1 { font-size: clamp(1.95rem, 4.6vw, 2.9rem); }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h3 { font-size: 1.1rem; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--brass); }

.prose { color: var(--ink-soft); }
.prose > p + p { margin-top: 1em; }
.prose--lead { font-size: clamp(1.05rem, 1.4vw, 1.17rem); margin-top: 22px; }
.band--navy .prose { color: var(--on-navy); opacity: 0.86; }

/* ------------------------------------------------- company name as mark */
.company {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.14rem;
  letter-spacing: -0.015em;
}
.company i { font-style: normal; color: var(--brass); }

.topbar .wrap {
  padding-block: 16px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar .role {
  font-size: 0.79rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ----------------------------------------------------- operating brand */
.brandcard {
  margin-top: 30px;
  background: linear-gradient(var(--card), var(--card));
  border-radius: 2px;
  border-top: 2px solid var(--brass);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.brandcard .lockup svg { width: 32px; height: 32px; }
.brandcard .wordmark { font-size: 1.42rem; }
.brandcard p { color: var(--ink-soft); font-size: 0.99rem; }

.btn { align-self: flex-start; font-size: 0.93rem; padding: 12px 22px; }

.history { list-style: none; padding: 0; margin: 26px 0 0; }
.history li {
  padding: 14px 0 14px 20px;
  border-left: 2px solid var(--hair);
  color: var(--ink-soft);
  font-size: 0.99rem;
}
.history li strong { color: var(--ink); font-weight: 600; }

.contact-line { margin-top: 22px; }
.legal { margin-top: 36px; padding-top: 20px; max-width: none; }