/*--------------------------------------------------------------
# Editorial layer — typography scale, rhythm and arrangement
#
# The site already had good bones; what it lacked was a *system*.
# Sizes were picked per component (13.5px here, 17px there, 26px
# somewhere else), so nothing related to anything else and the
# page read as flat no matter how good the individual parts were.
#
# This layer replaces those one-off values with a single fluid
# modular scale, one vertical rhythm, and one display family, then
# applies it across the home page and the inner pages together.
# Load it LAST — it is deliberately the final word on type.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 1. Tokens
#
# Every size below is a clamp() on the same shape:
#   clamp(min, base + slope*vw, max)
# so the whole page scales as one piece between phone and desktop
# instead of stepping at breakpoints.
--------------------------------------------------------------*/
body.home-2026,
body.inner-page {
  /* Display face. Poppins is geometric and even in colour, which is
     what carries large bold headings; Raleway's high contrast and
     narrow counters go muddy above ~40px. Both are self-hosted at
     all nine weights, so 800 is a real cut, never synthesised.
     Redefining --heading-font here re-points every h1-h6 rule in
     main.css at once. */
  --heading-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nv-display: var(--heading-font);

  /* Type scale — a minor third that opens toward a perfect fourth
     at the display end, so headings gain presence faster than body
     copy does. */
  --t-display: clamp(2.55rem, 1.45rem + 4.4vw, 4.6rem);   /* 41 -> 74px */
  --t-h2:      clamp(2rem, 1.35rem + 2.7vw, 3.4rem);      /* 32 -> 54px */
  --t-h3:      clamp(1.3rem, 1.14rem + 0.7vw, 1.65rem);   /* 21 -> 26px */
  --t-h4:      clamp(1.15rem, 1.06rem + 0.4vw, 1.35rem);  /* 18 -> 22px */
  --t-lead:    clamp(1.06rem, 1rem + 0.4vw, 1.25rem);     /* 17 -> 20px */
  --t-body:    clamp(1rem, 0.97rem + 0.16vw, 1.075rem);   /* 16 -> 17px */
  --t-small:   0.9375rem;                                 /* 15px */
  --t-label:   0.75rem;                                   /* 12px */

  /* Tracking. Large type needs less of it, small caps need more —
     using one value for both is the most common reason a page
     looks untouched. */
  --tr-display: -0.035em;
  --tr-head: -0.028em;
  --tr-title: -0.015em;
  --tr-label: 0.15em;

  /* Vertical rhythm. One gap between full-bleed blocks, one gap
     under every section heading. Opening the page up is now a
     two-line edit rather than a dozen. */
  --nv-section-gap: clamp(88px, 8.5vw, 152px);
  --nv-head-gap: clamp(44px, 4.6vw, 72px);

  /* Reading measure — paragraphs stop at a comfortable line length
     regardless of how wide their container happens to be. */
  --nv-measure: 68ch;

  font-size: var(--t-body);
  line-height: 1.75;
}

/*--------------------------------------------------------------
# 2. Body copy
#
# 16px at 1.6 is a default, not a decision. Bumping the base a
# little and opening the leading is the single change that does
# most for how considered a page feels.
--------------------------------------------------------------*/
body.home-2026 p,
body.inner-page p,
body.home-2026 li,
body.inner-page li {
  text-wrap: pretty;
}/* The home hero carries one sentence, so it can take the full lead size.
   Inner-page heroes carry a whole opening paragraph — About runs seven
   lines — and at 20px that becomes the loudest thing on the page. */
body.home-2026 .hx-hero p {
  font-size: var(--t-lead);
  margin-bottom: 36px;
}/*--------------------------------------------------------------
# 4. Section headings
#
# Eyebrow, headline, lead — at a fixed ratio, on every section of
# every page. The repetition is the point: it is what makes a long
# scroll feel arranged rather than assembled.
--------------------------------------------------------------*/
body.home-2026 .hx-section-head,
body.inner-page .hx-section-head {
  max-width: 780px;
  margin-bottom: var(--nv-head-gap);
}

body.home-2026 .hx-section-head h2,
body.inner-page .hx-section-head h2,
body.inner-page .hx-catalogue-title h2 {
  font-family: var(--nv-display);
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}

body.home-2026 .hx-section-head p,
body.inner-page .hx-section-head p {
  font-size: var(--t-lead);
  line-height: 1.7;
  max-width: 60ch;
  margin: 18px auto 0 auto;
}

/*--------------------------------------------------------------
# 5. Eyebrow pills
#
# An outline pill on a busy photograph disappears. A faint fill
# derived from currentColor holds on both light and dark grounds
# without needing a second rule for each.
--------------------------------------------------------------*/
body .hx-pill {
  font-family: var(--nv-display);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  padding: 7px 16px;
  border-color: color-mix(in srgb, currentColor, transparent 55%);
  background: color-mix(in srgb, currentColor, transparent 92%);
}

/*--------------------------------------------------------------
# 6. Buttons
#
# Pill buttons at 15px/500 read as secondary. The primary action
# on a landing page should be unmistakably the primary action.
--------------------------------------------------------------*/
body.home-2026 .hx-btn-primary,
body.inner-page .hx-btn-primary {
  font-family: var(--nv-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 16px 34px;
  /* A label at this weight has to hold one line — in the closing CTA the
     button shares a row with the copy, and left to itself "Get in Touch"
     broke across two. */
  white-space: nowrap;
}

body.home-2026 .hx-round-btn,
body.inner-page .hx-round-btn {
  width: 50px;
  height: 50px;
  min-width: 50px;
  font-size: 19px;
}

/*--------------------------------------------------------------
# 7. Card and component type
#
# These were the worst offenders — 13.5px descriptions under 17px
# titles, which is a caption set under a caption. Everything below
# moves onto the scale from section 1.
--------------------------------------------------------------*/

/* Service tiles (home) */
body.home-2026 .hx-service {
  min-height: 340px;
}

body.home-2026 .hx-service .hx-service-body {
  padding: 30px 28px 32px 28px;
}

body.home-2026 .hx-service h3 {
  font-family: var(--nv-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: var(--tr-title);
}

body.home-2026 .hx-service p {
  font-size: var(--t-small);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.86);
}

/* Why-us block (home) */
body.home-2026 .hx-why-lead {
  padding: 44px 40px;
}

/* One step below --t-h2: this is a heading inside a quarter-width card,
   not a section heading, and at the full section size it wrapped to three
   lines and pushed the three cards beside it out of proportion. */
body.home-2026 .hx-why-lead h3 {
  font-family: var(--nv-display);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tr-head);
  margin: 18px 0 16px 0;
}

body.home-2026 .hx-why-lead p {
  font-size: var(--t-body);
  line-height: 1.75;
  margin-bottom: 28px;
}

body.home-2026 .hx-why-card {
  padding: 36px 30px;
}

body.home-2026 .hx-why-card h4 {
  font-family: var(--nv-display);
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: var(--tr-title);
  margin-bottom: 14px;
}

body.home-2026 .hx-why-card p {
  font-size: var(--t-small);
  line-height: 1.75;
}

/* Closing CTA band (both) */
body.home-2026 .hx-cta-band h2,
body.inner-page .hx-cta-band h2 {
  font-family: var(--nv-display);
  font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.85rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tr-head);
  margin-bottom: 16px;
  text-wrap: balance;
}

body.home-2026 .hx-cta-band p,
body.inner-page .hx-cta-band p {
  font-size: var(--t-lead);
  line-height: 1.65;
  max-width: 46ch;
}

/* Team cards (both) */
body.home-2026 .hx-member-info h4,
body.inner-page .hx-member-info h4 {
  font-family: var(--nv-display);
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: var(--tr-title);
}

/* Feature / event / info cards (inner pages) */
body.inner-page .hx-feature h4,
body.inner-page .hx-info h3 {
  font-family: var(--nv-display);
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: var(--tr-title);
}

body.inner-page .hx-feature p,
body.inner-page .hx-info p,
body.inner-page .hx-event p {
  font-size: var(--t-small);
  line-height: 1.75;
}

body.inner-page .hx-event h3,
body.inner-page .hx-article-body h2 {
  font-family: var(--nv-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: var(--tr-title);
  text-wrap: balance;
}

body.inner-page .hx-split-copy h2 {
  font-family: var(--nv-display);
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tr-head);
  text-wrap: balance;
}

body.inner-page .hx-split-copy p,
body.inner-page .hx-article-body p {
  font-size: var(--t-body);
  line-height: 1.8;
  max-width: var(--nv-measure);
}

/* Pricing (inner) */
body.inner-page .hx-price-value {
  font-family: var(--nv-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

body.inner-page .hx-price ul li {
  font-size: var(--t-small);
  line-height: 1.65;
}

/*--------------------------------------------------------------
# 8. Figures
#
# Counters are the loudest small element on the page and were
# sitting at a flat 48px. Tabular figures stop the number jittering
# in width while it counts up.
--------------------------------------------------------------*/
body.home-2026 .counts .stats-item span {
  font-family: var(--nv-display);
  font-size: clamp(2.6rem, 1.7rem + 3.4vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

body.home-2026 .counts .stats-item p {
  font-family: var(--nv-display);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.5;
  margin-top: 12px;
}


/*--------------------------------------------------------------
# 9. The "What We Offer" split
#
# This block already had the boldest heading on the site; the copy
# beside it just needed to be brought up to match.
--------------------------------------------------------------*/
body.home-2026 .about .offer-title {
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: 0.98;
}

body.home-2026 .about .offer-lead {
  font-size: var(--t-lead);
  line-height: 1.75;
  max-width: 56ch;
}

body.home-2026 .about .offer-list li {
  font-size: var(--t-body);
  line-height: 1.7;
  gap: 12px;
  padding-bottom: 16px;
}

/*--------------------------------------------------------------
# 10. Rhythm
#
# One gap between blocks on both page types. The inner pages were
# on a fixed 120px while the home page used its own token; they
# now share the fluid one, so the two never drift apart.
--------------------------------------------------------------*/
body.inner-page .hx-block {
  padding-top: var(--nv-section-gap);
}

/*--------------------------------------------------------------
# 11. Navigation
#
# The menu is read at a glance, not at length — it wants slightly
# more weight and a touch of tracking, not more size.
--------------------------------------------------------------*/
body.home-2026 .navmenu > ul > li > a,
body.inner-page .navmenu > ul > li > a {
  font-weight: 500;
  letter-spacing: -0.005em;
}

body.home-2026 .hx-header .hx-contact,
body.inner-page .hx-header .hx-contact {
  font-weight: 600;
  letter-spacing: -0.005em;
}

/*--------------------------------------------------------------
# 12. Small screens
#
# The scale handles size on its own; what phones additionally need
# is the display type to stop being tracked as tightly, because
# negative tracking that reads as confident at 74px reads as
# cramped at 41px.
--------------------------------------------------------------*/
@media (max-width: 575px) {
  body.home-2026,
  body.inner-page {
    --tr-display: -0.022em;
    --tr-head: -0.018em;
  }

  body.home-2026 .hx-service .hx-service-body {
    padding: 24px 22px 26px 22px;
  }

  body.home-2026 .hx-why-lead {
    padding: 34px 26px;
  }
}