/* Documented shared palette and typefaces from sections 01–07. */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-cream: #fcf9ec;
  --color-dark: #0b0b0b;
  --color-accent: #a65235;
  --font-body: "Libre Baskerville", serif;
  --font-heading: "Anton", sans-serif;
  --header-height: 88px;
  --header-logo-width: 392.01px;
  --language-font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--color-black);
  background: var(--color-white);
  font-family: var(--font-body);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding-left: 120px;
  padding-right: 129px;
  background: var(--color-white);
}

.brand {
  display: block;
  flex: 0 1 var(--header-logo-width);
  min-width: 0;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.language-switcher {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 69px;
  width: 69px;
  height: 20px;
  /* Recorded Figma Y=34.5, intentionally 0.5px below header centre. */
  transform: translateY(0.5px);
  white-space: nowrap;
}

.language-button {
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--color-black);
  background: transparent;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--language-font-size);
  line-height: 20px;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
}

.language-button[aria-pressed="false"]:is(:hover, :focus-visible) {
  text-decoration: underline;
}

.language-divider {
  position: absolute;
  /* X=1280.42 minus group X=1242; Y is centred within 20px. */
  left: calc(1280.42px - 1242px);
  top: calc((20px - 12.18px) / 2);
  width: 2px;
  height: 12.18px;
  background: var(--color-black);
  pointer-events: none;
}

/* The documented keyboard focus treatment from section 07. */
.brand:focus-visible, .language-button:focus-visible {
  outline: 2px solid var(--color-accent);
}

/* Header-specific breakpoints; other sections have their own thresholds. */
@media (width < 1024px) {
  :root {
    --header-height: 80px;
    --header-logo-width: 320px;
    --language-font-size: 15px;
  }
  .site-header { padding-inline: 32px; }
  .language-switcher { transform: none; }
}

@media (width < 768px) {
  :root {
    --header-height: 72px;
    --header-logo-width: 200px;
    --language-font-size: 14px;
  }
  .site-header { padding-inline: 20px; }
}

/* Hero: recorded 1440px composition, followed by approved responsive rules. */
.hero {
  --hero-emblem-width: min(30.164vw, 434.36px);
  position: relative;
  height: 620px;
  overflow: hidden;
  background-image: url("../images/hero-background-turku.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--color-black);
}

.hero-heading {
  position: absolute;
  top: 131.04px;
  left: 120px;
  width: 237px;
  max-width: 520px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 400;
  line-height: 75px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  text-shadow: 0 0 17.8px #fcf8ed;
}

html[lang="fi"] .hero-heading { width: max-content; }
.hero-heading > span { display: block; white-space: nowrap; }

.hero-subtitle {
  position: absolute;
  top: 377.59px;
  left: 120px;
  width: 440px;
  max-width: calc(100% - 120px - 129px - var(--hero-emblem-width) - 24px);
  margin: 0;
  font-family: var(--font-body);
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0.1em;
  text-align: left;
  text-shadow: 0 0 17.8px #fcf8ed;
}

html[lang="fi"] .hero-subtitle { width: max-content; }
.hero-subtitle > span { display: block; }

.hero-emblem {
  position: absolute;
  top: 46.92px;
  right: 129px;
  display: block;
  width: var(--hero-emblem-width);
  height: auto;
  aspect-ratio: 1;
}

@media (768px <= width < 1024px) {
  .hero {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 560px;
    height: auto;
    padding-inline: 32px;
  }
  .hero-copy { flex: 1 1 auto; min-width: 0; }
  .hero-heading, .hero-subtitle {
    position: static;
    width: auto;
    max-width: 100%;
  }
  .hero-heading { font-size: 52px; line-height: 62px; }
  .hero-subtitle { margin-top: 20px; font-size: 24px; line-height: 32px; }
  .hero-emblem {
    position: static;
    flex: 0 1 340px;
    width: 340px;
    max-width: 340px;
    min-width: 0;
  }
}

@media (768px <= width < 900px) {
  .hero { flex-direction: column; justify-content: center; }
  .hero-copy { flex: none; align-self: stretch; }
  .hero-emblem { flex: none; }
}

@media (width < 768px) {
  .hero {
    background-image: url("../images/hero-background-turku-mobile.webp");
    height: auto;
    min-height: 700px;
    padding: 48px 20px;
  }
  .hero-heading, .hero-subtitle {
    position: static;
    width: auto;
    max-width: 100%;
  }
  .hero-heading { font-size: 48px; line-height: 56px; }
  .hero-subtitle { margin-top: 24px; font-size: 22px; line-height: 30px; }
  .hero-emblem {
    position: static;
    width: 100%;
    max-width: 300px;
    margin: 32px auto 0;
  }
}

/* My Ideology: approved 8px gaps override the original 10px Auto Layout gap. */
.ideology {
  display: grid;
  grid-template-columns: minmax(0, 533px) minmax(0, 588px);
  column-gap: 79px;
  align-items: start;
  min-height: 821.81px;
  padding: 94.39px 120px 94.42px;
  background: var(--color-cream);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
}

.ideology-inner { display: contents; }

@media (width > 1440px) {
  .ideology { display: block; }
  .ideology-inner {
    display: grid;
    grid-template-columns: 533px 588px;
    column-gap: 79px;
    align-items: start;
    max-width: 1200px;
    margin-inline: auto;
  }
}

.ideology-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 633px;
}

.ideology-copy > * {
  flex: none;
  max-width: 100%;
  margin: 0;
  white-space: pre-line;
}

.ideology-label {
  position: relative;
  width: 152px;
  min-height: 38px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: 0.1em;
  /* Paint fill over a centred 4px stroke, leaving the specified 2px outside. */
  -webkit-text-stroke: 4px #fdf7eb;
  paint-order: stroke fill;
}

.ideology-label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.75px;
  width: 33.87px;
  border-top: 1.5px solid var(--color-accent);
}

.ideology-heading {
  width: 533px;
  min-height: 75px;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 75px;
  letter-spacing: 0.1em;
}

.ideology-intro { width: 314px; min-height: 75px; font-weight: 500; letter-spacing: -0.01em; }
.ideology-transition { width: 234px; min-height: 25px; }
.ideology-comparison { width: 454.36px; min-height: 75px; }
.ideology-belief, .ideology-action {
  min-height: 75px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 75px;
  letter-spacing: 0.1em;
}
.ideology-belief { width: 448px; }
.ideology-support { width: 285px; min-height: 56px; font-weight: 700; line-height: 28px; }
.ideology-action { width: 390px; color: var(--color-accent); }
.ideology-closing {
  position: relative;
  /* Reference: line begins at x=120; text begins at approximately x=147.5. */
  width: calc(277px + 27.5px);
  min-height: 75px;
  padding-left: 27.5px;
}
.ideology-closing::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((75px - 79.51px) / 2);
  width: 2px;
  height: 79.51px;
  background: var(--color-accent);
}

html[lang="fi"] .ideology-copy > :not(.ideology-label) { width: 100%; }

/* Preserve the recorded English line breaks at the reference desktop size.
   A browser includes trailing letter spacing in line fitting; Figma does not. */
@media (width >= 1440px) {
  html[lang="en"] .ideology-copy > * { white-space: pre; }
}

.ideology-gallery {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  aspect-ratio: 588 / 615.37;
  /* 103.21px gallery offset minus 94.39px text offset. */
  margin-top: 8.82px;
}
.ideology-gallery-row {
  display: grid;
  gap: 16px;
  min-height: 0;
}
/* Ratios derived from the authorised reference; gaps remain exactly 16px. */
.ideology-gallery-row:nth-child(1) { grid-template-columns: minmax(0, 283fr) minmax(0, 290fr); }
.ideology-gallery-row:nth-child(2) { grid-template-columns: minmax(0, 188fr) minmax(0, 384fr); }
.ideology-gallery-row:nth-child(3) { grid-template-columns: minmax(0, 188fr) minmax(0, 188fr) minmax(0, 180fr); }
.ideology-image-card {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
}
.ideology-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ideology-image-card img {
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ideology-image-card:hover img { transform: scale(1.06); }
}

@media (1024px <= width < 1440px) {
  .ideology {
    grid-template-columns: minmax(0, 533fr) minmax(0, 588fr);
    column-gap: calc(79 / 1440 * 100vw);
    padding-inline: calc(120 / 1440 * 100vw);
  }
}

@media (width < 1024px) {
  .ideology {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    min-height: 0;
    padding: 64px 32px;
  }
  .ideology-copy { min-height: 0; }
  .ideology-copy > :not(.ideology-label) { width: 100%; }
  .ideology-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    align-items: start;
    aspect-ratio: auto;
    margin-top: 0;
  }
  .ideology-gallery-row { display: contents; }
  .ideology-gallery img { height: auto; }
}

@media (width < 768px) {
  .ideology { gap: 40px; padding: 48px 20px; }
  .ideology-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* Core Principles: element dimensions take priority over Figma selection bounds. */
.core-principles {
  position: relative;
  min-height: 318.84px;
  /* Bottom space = 318.84 - 51.43 - (84.7 + 75 + 50 + 2 * 13). */
  padding: 51.43px calc(109.05 / 1440 * 100%) 31.71px calc(108.15 / 1440 * 100%);
  background: var(--color-dark);
}

.core-principles-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.core-principle {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}

.core-principle:nth-child(3) { gap: 13px; }

.core-principle-icon {
  display: block;
  flex: none;
  width: 84.7px;
  height: 84.7px;
  object-fit: contain;
}

.core-principle-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 202px;
  max-width: 100%;
  min-height: 75px;
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0.1em;
  white-space: pre-line;
}

.core-principle:nth-child(1) .core-principle-heading { width: 196px; }
.core-principle:nth-child(2) .core-principle-heading { width: 199px; }
.core-principle:nth-child(4) .core-principle-heading { width: 84.7px; }

.core-principle-copy {
  flex: none;
  max-width: 100%;
  min-height: 50px;
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0;
  white-space: pre-line;
}
.core-principle:nth-child(1) .core-principle-copy { width: 198px; }
.core-principle:nth-child(2) .core-principle-copy { width: 190px; }
.core-principle:nth-child(3) .core-principle-copy { width: 135px; }

/* Finnish text can use its full 202px group and grow vertically. */
html[lang="fi"] .core-principle .core-principle-heading,
html[lang="fi"] .core-principle .core-principle-copy { width: 202px; }

.core-principle:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 97.28px;
  width: 1px;
  height: 151.15px;
  background: var(--color-accent);
  pointer-events: none;
}
/* First divider x=414px measured from the reference; subsequent pitch is 305px. */
.core-principle:nth-child(1)::after { left: calc(414 / 1440 * 100%); }
.core-principle:nth-child(2)::after { left: calc(719 / 1440 * 100%); }
.core-principle:nth-child(3)::after { left: calc(1024 / 1440 * 100%); }

@media (width >= 1024px) {
  /* Preserve Figma line breaks without wrapping on trailing letter spacing. */
  html[lang="en"] .core-principle-heading,
  html[lang="en"] .core-principle-copy { white-space: pre; }
}

@media (width < 1024px) {
  .core-principle:nth-child(n) .core-principle-heading { width: 202px; }
}

@media (768px <= width < 1024px) {
  .core-principles { min-height: 0; padding: 48px 32px; }
  .core-principles-list {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    grid-auto-rows: 1fr;
    gap: 32px;
  }
  .core-principle::after { display: none; }
  .core-principles-list::before,
  .core-principles-list::after {
    content: "";
    position: absolute;
    background: var(--color-accent);
    pointer-events: none;
  }
  .core-principles-list::before { top: calc(50% - 0.5px); left: 0; width: 100%; height: 1px; }
  .core-principles-list::after { left: calc(50% - 0.5px); top: 0; width: 1px; height: 100%; }
}

@media (width < 768px) {
  .core-principles { min-height: 0; padding: 48px 20px; }
  .core-principles-list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .core-principle { position: relative; }
  .core-principle:not(:last-child)::after {
    top: auto;
    bottom: -16.5px;
    left: 0;
    width: 100%;
    height: 1px;
  }
}

/* Businesses & Activities: all measurements are section-relative. */
.businesses {
  min-height: 622.35px;
  padding: 75.65px 0 93.97px;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  text-align: center;
}
.businesses-inner { width: 100%; max-width: 1200px; margin-inline: auto; }
.businesses-heading {
  width: 618px;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 75px;
  letter-spacing: 0.1em;
}
.business-parent, .business-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  background: var(--color-cream);
}
.business-parent {
  width: 588px;
  max-width: 100%;
  min-height: 131.88px;
  /* 164.44 - (75.65 + 75) = 13.79px heading-to-card gap. */
  margin: 13.79px auto 0;
  padding: 28.07px 24px 31.54px;
}
.business-parent-logo { display: block; width: 232px; max-width: 100%; height: auto; }
.business-parent-copy { width: 471px; max-width: 100%; margin: 2.27px 0 0; }
.businesses-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* 337.06 - (164.44 + 131.88) = 40.74px parent-to-row gap. */
  margin: 40.74px 0 0;
  padding: 0;
  list-style: none;
}
.business-card {
  position: relative;
  min-height: 191.32px;
  padding: 0 23.395px 19.76px;
}
.business-logo-slot { position: relative; width: 100%; height: 107.56px; flex: none; }
.business-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  max-width: 100%;
  object-fit: contain;
}
/* Offsets account for the card's 1px inside border. */
.business-logo-visit { top: 17.34px; width: 287px; height: 75px; }
.business-logo-rock { top: 38.15px; width: 259.49px; height: 40px; }
.business-logo-neuvonantaja { top: 35.95px; width: 262px; height: 44px; }
.business-divider {
  position: absolute;
  top: 107.56px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 335.21px;
  max-width: calc(100% - 48px);
  height: 1px;
  background: var(--color-accent);
}
.business-copy {
  width: 335.21px;
  max-width: 100%;
  /* Reference: description text frame begins 12px below the divider centre. */
  margin: 12px 0 0;
  white-space: pre-line;
}

@media (width >= 1200px) {
  .businesses-heading { white-space: nowrap; }
  html[lang="en"] .business-parent-copy { white-space: nowrap; }
}

@media (768px <= width < 1200px) {
  .businesses { min-height: 0; padding: 48px 32px; }
  .businesses-heading { font-size: 32px; }
  .businesses-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-card:last-child { grid-column: 1 / -1; width: calc((100% - 24px) / 2); justify-self: center; }
}

@media (width < 768px) {
  .businesses { min-height: 0; padding: 48px 20px; }
  .businesses-heading { font-size: 28px; line-height: 42px; }
  .business-parent { width: 100%; }
  .businesses-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .business-logo { height: auto; }
  .business-divider { width: calc(100% - 48px); }
}

/* Services & Projects: centred 1090px badge bounds, 70px badges, 134px clear gaps. */
.business-rebels-link { display: block; margin-top: 16px; border-radius: inherit; color: var(--color-white); text-decoration: none; }
.business-rebels-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.business-rebels-cta { display: block; padding: 4px 22px; border: 1px solid var(--color-accent); border-radius: 999px; background: var(--color-accent); font-size: 14px; line-height: 25px; transition: background-color .2s, box-shadow .2s; }
.business-rebels-link:hover .business-rebels-cta { background: #91462d; box-shadow: 0 3px 9px #a6523526; }
.business-rebels-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .business-rebels-cta { transition: none; } }

.services {
  min-height: 839.25px;
  padding: 73.28px 0 113.88px;
  background: var(--color-cream);
  color: var(--color-black);
  text-align: center;
}
.services-heading-row {
  display: grid;
  grid-template-columns: 262.26px minmax(0, 618px) 262.26px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1201.22px;
  margin-inline: auto;
}
.services-heading {
  min-width: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 75px;
  letter-spacing: 0.1em;
}
.services-heading-divider { display: block; height: 1px; background: var(--color-accent); }
.services-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  /* 435.59 - 248 = 187.59; 611.84 - 435.59 = 176.25. */
  grid-template-rows: minmax(187.59px, auto) minmax(176.25px, auto) auto;
  align-items: start;
  width: 100%;
  max-width: 1224px;
  /* 248 - (73.28 + 75) = 99.72. */
  margin: 99.72px auto 0;
  padding: 0;
  list-style: none;
}
.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}
.service-item img { display: block; flex: none; width: 70px; height: 70px; }
@media (hover: hover) and (pointer: fine) {
  .service-item img {
    transform-origin: center center;
    transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .service-item:hover img { transform: translateY(-6px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .service-item img { transform: none; transition: none; }
  .service-item:hover img { transform: none; }
}
.service-label {
  max-width: 100%;
  margin: 18.53px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 0;
  white-space: pre-line;
}
.service-item:first-child .service-label { width: 79px; }
.service-item:last-child { justify-self: center; max-width: 204px; }
.service-item:last-child .service-label { width: 105px; }
.service-description { width: 100%; margin-top: 0; }

@media (width >= 1200px) {
  .services-heading { white-space: nowrap; }
  .service-item-sports { grid-column: 3; }
  .service-item:last-child { grid-column: 4; }
}

@media (width < 1200px) {
  .services { min-height: 0; padding: 48px 32px; }
  .services-heading-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 618px) minmax(0, 1fr);
    column-gap: 29.35px;
  }
  .services-heading { font-size: 34px; line-height: 51px; letter-spacing: 0.08em; }
  .services-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 32px;
    margin-top: 32px;
  }
}

@media (width < 768px) {
  .services { padding-inline: 20px; }
  .services-heading-row { display: block; }
  .services-heading-divider { display: none; }
  .services-heading { font-size: 28px; line-height: 42px; letter-spacing: 0.06em; }
  .services-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width < 360px) {
  .services-heading { font-size: 24px; line-height: 36px; letter-spacing: 0.05em; }
  .services-list { grid-template-columns: minmax(0, 1fr); }
}

/* Get in Touch / Footer */
.site-footer { font-family: var(--font-body); }
.footer-contact {
  min-height: 401.56px;
  padding: 38.41px 0 107.01px;
  background: var(--color-dark);
  color: var(--color-white);
  text-align: center;
}
.footer-heading-row {
  display: grid;
  grid-template-columns: 262.26px 237px 262.26px;
  gap: 23.67px;
  align-items: center;
  justify-content: center;
}
.footer-heading-row h2 {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 75px;
  letter-spacing: .1em;
  white-space: nowrap;
}
.footer-heading-divider { height: 1px; background: var(--color-accent); }
.footer-address { margin: 68.14px auto 0; max-width: 1224px; font-style: normal; }
.footer-contacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-contacts li { position: relative; min-width: 0; }
.footer-contacts li + li::before {
  content: "";
  position: absolute;
  left: -.5px;
  top: -19.07px;
  width: 1px;
  height: 151.15px;
  background: var(--color-cream);
  opacity: .7;
}
.footer-contacts a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 203px;
  max-width: 100%;
  margin-inline: auto;
  color: var(--color-white);
  font-size: 16px;
  line-height: 25px;
  text-decoration: none;
}
.footer-contacts img { display: block; width: 70px; height: 70px; flex: none; }
.footer-contacts a span { overflow-wrap: anywhere; }
.site-footer a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.footer-credit-bar { background: var(--color-white); color: var(--color-black); }
.footer-credit-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  max-width: 1200px;
  min-height: 63.94px;
  padding: 19.53px 0 19.41px;
  margin-inline: auto;
  font-size: 14px;
  line-height: 25px;
}
.footer-credit-inner p { margin: 0; }
.footer-credit-inner p:last-child { text-align: right; }
.footer-credit-inner a { color: inherit; text-decoration: none; }
@media (width < 1200px) {
  .footer-contact { min-height: 0; padding: 48px 32px; }
  .footer-heading-row { grid-template-columns: minmax(0, 262.26px) auto minmax(0, 262.26px); }
  .footer-heading-row h2 { font-size: 34px; line-height: 51px; letter-spacing: .08em; }
  .footer-address { margin-top: 32px; }
  .footer-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer-contacts li + li::before { display: none; }
  .footer-credit-inner { flex-wrap: wrap; justify-content: center; padding-inline: 32px; }
  .footer-credit-inner p, .footer-credit-inner p:last-child { text-align: center; }
}
@media (width < 768px) {
  .footer-contact { padding-inline: 20px; }
  .footer-heading-row { display: block; }
  .footer-heading-divider { display: none; }
  .footer-heading-row h2 { font-size: 28px; line-height: 42px; letter-spacing: .06em; }
  .footer-contacts { grid-template-columns: minmax(0, 1fr); }
  .footer-credit-inner { flex-direction: column; align-items: center; padding-inline: 20px; }
}
@media (width < 360px) {
  .footer-heading-row h2 { font-size: 24px; line-height: 36px; letter-spacing: .05em; }
}

/* Mobile text flow and spacing corrections. */
@media (max-width: 575.98px) {
  .ideology-copy > :not(.ideology-label) { min-height: 0; }
  .ideology-heading, .ideology-belief, .ideology-action { line-height: 1.2; }
  html[lang="en"] .ideology-heading { max-width: 320px; }
  .ideology-copy p { text-align: left; word-spacing: normal; }
  .ideology-comparison, .ideology-belief, .ideology-action { white-space: normal; }
  .ideology-copy { gap: 0; }
  .ideology-copy > .ideology-heading { margin-top: 8px; }
  .ideology-copy > .ideology-intro { margin-top: 28px; }
  .ideology-copy > .ideology-transition,
  .ideology-copy > .ideology-comparison { margin-top: 20px; }
  .ideology-copy > .ideology-belief { margin-top: 28px; }
  .ideology-copy > .ideology-support { margin-top: 24px; }
  .ideology-copy > .ideology-action { margin-top: 28px; }
  .ideology-copy > .ideology-closing { margin-top: 20px; }

  .core-principles { padding-block: 0; }
  .core-principles-list { gap: 0; }
  .core-principle:nth-child(n) { gap: 0; padding-block: 48px; height: auto; min-height: 0; }
  .core-principle-heading { display: block; min-height: 0; margin-top: 32px; }
  .core-principle-copy { min-height: 0; margin-top: 24px; }
  .core-principle:not(:last-child)::after { bottom: 0; }

  .footer-credit-inner { min-height: 0; height: auto; gap: 12px; padding-block: 24px; }
}

/* Footer branding: spacing follows the approved expanded footer reference. */
.footer-contact { min-height: 0; padding-top: 75px; padding-bottom: 96px; }
.footer-brand { width: min(100%, 808.86px); margin: 113px auto 0; }
.footer-brand-divider { height: 1px; background: var(--color-accent); }
.footer-logo { display: block; width: 393px; max-width: 100%; height: auto; margin: 77px auto 0; }
.footer-tagline {
  margin: 24px 0 0;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: .05em;
}
.footer-credit-inner { align-items: center; }
.footer-signature { display: grid; flex: 0 1 252px; width: 252px; max-width: 100%; opacity: .85; transition: opacity .25s ease, transform .25s ease; }
.footer-signature img { display: block; width: 100%; height: auto; }
.footer-signature:hover,
.footer-signature:focus-visible { opacity: 1; transform: translateY(-2px); }
@media (width < 1200px) {
  .footer-contact { padding-block: 48px; }
  .footer-brand { margin-top: 48px; }
  .footer-logo { margin-top: 48px; }
  .footer-tagline { font-size: 16px; line-height: 25px; }
}
@media (width < 768px) {
  .footer-signature { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-signature { transition: none; }
  .footer-signature:hover,
  .footer-signature:focus-visible { transform: none; }
}