:root {
  --bs-nav-link-font-size: 1.1rem;
  --bs-border-width: 1.5px;
}

/* ─── Fluid base font-size ─────────────────────────────────────────────────── */
html {
  /* 16px → 20px | 320px → 1440px */
  font-size: clamp(16px, calc(16px + 4 * ((100vw - 320px) / 1120)), 20px);
}

@media (min-width: 1440px) {
  html {
    /* 18px → 24px | 1440px → 1800px */
    font-size: clamp(18px, calc(18px + 6 * ((100vw - 1440px) / 360)), 24px);
  }

  :root {
    --bs-nav-link-font-size: 1.1rem;
  }
}

@media (min-width: 1800px) {
  html {
    /* 20px → 24px | 1800px → 2560px */
    font-size: clamp(20px, calc(20px + 4 * ((100vw - 1800px) / 760)), 24px);
  }
}

/* ─── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-style: normal;
  line-height: 1.1em;
  font-family: "Google Sans Flex", sans-serif;
  color: var(--primary);
  font-weight: 600;
}

h1       { font-size: clamp(1.8rem,  4.16rem,  4.16rem);  margin-bottom: 2rem; }
h1.small { font-size: clamp(1rem, 1.0833rem, 1.0833rem); line-height: 1.8rem; font-weight: 500; }
h1.mediumSize { font-size: clamp(1.3rem,  2rem,      2rem); line-height: 2.7rem; font-weight: 500; margin-bottom: 1rem}
h2       { font-size: clamp(1.6rem,  2.6667rem, 2.6667rem); margin-bottom: 1rem; color: var(--primary); }
h2.small { font-size: clamp(1rem,    1.3333rem, 1.3333rem); }
h3       { font-size: clamp(1.3rem,  2rem,      2rem); line-height: 2.7rem; font-weight: 500;}
h4       { font-size: clamp(1.2rem,  1.6667rem, 1.6667rem); font-weight: 500; margin-bottom: 0.5rem; }
h5       { font-size: clamp(1.1rem,  1.3333rem, 1.3333rem); line-height: 2.4rem; font-weight: 400; }
h6       { font-size: clamp(1rem,    1rem,      1rem);       line-height: 1.8rem; font-weight: 500; }

p             { font-size: 1rem; }
p.intro, .intro {
  font-size: clamp(1.3rem, 2rem, 2rem);
  line-height: clamp(1.8rem, 3rem, 3rem);
  color: var(--primary);
}
p.ingress     { font-size: clamp(1.1rem, 1.33rem, 1.33rem); line-height: 150%; font-weight: 400; }
p.ingress-small,
span.ingress-small,
.ingress-small { font-size: 1.11rem; line-height: 100%; }
p.big         { font-size: 1.2rem; line-height: 1.5em; }

.text-size-4  { font-size: 1.11rem; }
strong        { font-weight: 600; }
.medium       { font-weight: 600; }

a.small,
p.small {
  font-size: 0.8rem;
}

a.smaller,
p.smaller {
  font-size: 0.7rem;
}

/* ─── Layout ───────────────────────────────────────────────────────────────── */
.vh-85        { height: 85vh; }
.vh-75        { height: 75vh; }
.h-6          { height: 1.5rem; }
.w-6          { width: 1.5rem; }
.w-40         { width: 40%; }
.w-60         { width: 60%; }
.mr-2         { margin-right: 2rem; }
.row-size-    { padding-left: 4rem; padding-right: 4rem; }
.row-size-Indrag { padding-left: 15%;   padding-right: 15%; } 
.row-size-Smal { padding-left: 15%;   padding-right: 15%; } 
div.row-size-Smal > div {
    width: 1220px;
    max-width: 100%;
    margin: auto;
}

.min-lg-vh-75 { min-height: 75vh; }
.min-lg-vh-70 { min-height: 70vh; }

/* ─── Responsive overrides ─────────────────────────────────────────────────── */
@media (max-width: 1440px) {
  :root { --bs-nav-link-font-size: 1rem; }
  h4 { font-weight: 600; }
  .min-lg-vh-70 { min-height: 50vh; }
}

@media (max-width: 860px) {
  .min-lg-vh-75,
  .min-lg-vh-70 { min-height: inherit; }
  .w-60, .w-40  { width: 100%; }
}