@charset "UTF-8";
/*
 * www.magnum.lv — site stylesheet
 *
 * Design tokens (colours, fonts, metrics) are lifted verbatim from the legacy
 * stylesheet so the site still looks like itself. What changed is the layout
 * mechanism: fixed 988px floats became flex/grid with breakpoints, so the site
 * works on phones and tablets. The desktop breakpoint restores the original
 * metrics exactly.
 *
 * Open Sans is self-hosted rather than @import-ed from fonts.googleapis.com —
 * that keeps font-src at 'self' in the CSP and removes a third-party request
 * (and its GDPR implications) from every page load.
 */

/* ============================== Fonts ============================== */

/* Open Sans v44 is a variable font: one file per subset covers 300-800. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Latvian diacritics live here: ā č ē ģ ī ķ ļ ņ š ū ž */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Russian */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ============================== Tokens ============================== */

:root {
  /* Colours, straight from the legacy stylesheet */
  --red-accent: #c11842;   /* active nav, content h2 */
  --red-brand: #ce202f;    /* contact band, buttons, structure heading */
  --red-dark: #b80000;     /* eyebrow text, table titles, rules */
  --red-deep: #600000;     /* staff position */
  --grey-circle: #8e8e8e;
  --grey-circle-rule: #9e9e9e;

  --text: #000;
  --text-content: #333;
  --text-muted: #666;
  --text-faint: #959595;
  --link: #555;
  --link-hover: #888;

  --bg-light: #f8f7f7;
  --bg-structure: #f0f0f0;
  --bg-row: #eee;
  --white: #fff;

  /* Type */
  --font-body: Verdana, Geneva, Tahoma, sans-serif;
  --font-display: 'Open Sans', var(--font-body);

  /* Metrics */
  --container: 988px;
  --gutter: 16px;
  --header-height: 64px;   /* desktop value is set at the breakpoint */

  --focus: 2px solid var(--red-accent);
}

/* ============================== Reset =============================== */

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

html {
  /* Replaces the legacy jQuery animate() scrolling. */
  scroll-behavior: smooth;
  /* Anchors land below the fixed header instead of under it. */
  scroll-padding-top: calc(var(--header-height) + 16px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  /* Nothing may cause a horizontal scrollbar on a phone. */
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible keyboard focus everywhere — the legacy site had none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

h1, h2, h3, h4 { font-weight: normal; margin: 0 0 0.6em; }
p { margin: 0 0 1em; line-height: 1.75; }
ul { line-height: 1.8; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 10px 16px;
  background: var(--red-brand);
  color: var(--white);
}
.skip-link:focus { left: 0; }

/* Utility classes replacing the legacy inline style attributes,
   which the sanitiser strips so that style-src can stay strict. */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* ============================== Header ============================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  background: var(--white) url('../img/headerBg.png') repeat;
  border-bottom: 1px solid var(--bg-light);
}

.site-header.is-scrolled { box-shadow: 0 1px 4px rgb(0 0 0 / 0.14); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-height);
  padding-block: 10px;
}

.logo { flex: 0 0 auto; display: block; }
.logo img { display: block; width: 130px; height: auto; }

/* --- Mobile toggle --- */

.nav-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;   /* 44px: minimum comfortable touch target */
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--text-muted);
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Nav panel (mobile) --- */

.header-nav {
  display: none;
  position: absolute;
  inset: 100% 0 auto 0;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 8px var(--gutter) 20px;
  background: var(--white);
  border-bottom: 1px solid #e2e2e2;
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.12);
}

.header-nav.is-open { display: block; }
body.nav-open { overflow: hidden; }

.langs {
  display: flex;
  gap: 4px;
  margin: 0 0 8px;
  padding: 8px 0;
  list-style: none;
  border-bottom: 1px solid #eee;
}

.langs a {
  display: block;
  padding: 8px 12px;
  font-size: 11px;
  text-transform: uppercase;
}
.langs a:hover { color: var(--link-hover); text-decoration: none; }
.langs .active { color: var(--red-accent); }

.menu { margin: 0; padding: 0; list-style: none; }
.menu > li { position: relative; }

.menu > li > a {
  display: block;
  padding: 12px 0;
  font-size: 13px;
  text-transform: uppercase;
}
.menu > li > a:hover { color: var(--link-hover); text-decoration: none; }
.menu > li > a.active { color: var(--red-accent); }

.submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
}

.submenu {
  display: none;
  margin: 0 0 8px;
  padding: 0 0 8px 14px;
  list-style: none;
  border-left: 2px solid var(--bg-light);
}

.menu > li.submenu-open .submenu { display: block; }

.submenu a {
  display: block;
  padding: 8px 0;
  font-size: 12px;
}
.submenu a::first-letter { text-transform: capitalize; }
.submenu a:hover { color: var(--red-accent); text-decoration: none; }

/* ============================ Hero / home =========================== */

.hero {
  background: var(--white) url('../img/homeBg.jpg') no-repeat center top / cover;
  padding-top: calc(var(--header-height) + 32px);
  padding-bottom: 40px;
  text-align: center;
}

.hero-inner { max-width: 700px; margin: 0 auto; }

.hero-eyebrow {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--red-dark);
}

.hero-heading {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 300;
  line-height: 1.25;
}

.hero-text { text-align: left; font-size: 12px; }
.hero-text p { line-height: 1.55; margin: 8px 0; }

/*
 * The hero headings come from editor content that still carries the legacy
 * .small / .big / .medium class names, so those are styled rather than
 * rewritten — it keeps the imported HTML working and stays editable.
 *
 * `.small` is deliberately GLOBAL, matching the legacy `#home .small, .small`
 * rule: the same markup is reused as the body of the Nosaukums page, where it
 * must still render 18px dark red rather than inheriting the body text style.
 */
.small {
  font-size: 18px;
  color: var(--red-dark);
}

.hero .small { margin: 0 0 4px; }

.hero .big {
  font-size: 26px;
  line-height: 1.25;
  margin: 0 0 16px;
}

.hero .medium {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
}

/* --- Service bubbles --- */

.service-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 30px;
  margin: 32px 0 48px;
  padding: 0;
  list-style: none;
}

.service-bubbles a,
.service-bubbles .service-static {
  display: block;
  position: relative;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: url('../img/red_opacity_70.png') repeat 0 0;
  transition: background 0.2s;
}

.service-bubbles a:hover,
.service-bubbles a:focus-visible {
  background: url('../img/black_opacity_70.png') repeat 0 0;
  text-decoration: none;
}

.service-ico {
  position: absolute;
  background-image: url('../img/sprite.png');
  background-repeat: no-repeat;
}

/* Sprite offsets carried over unchanged from the legacy stylesheet. */
.service-pharmacy   .service-ico { top: 26px; left: 34px; width: 28px; height: 45px; background-position: 0 -82px; }
.service-hospitals  .service-ico { top: 30px; left: 30px; width: 38px; height: 45px; background-position: -38px -82px; }
.service-veterinary .service-ico { top: 25px; left: 35px; width: 27px; height: 45px; background-position: -86px -82px; }
.service-trade      .service-ico { top: 32px; left: 27px; width: 45px; height: 45px; background-position: -123px -82px; }
.service-suppliers  .service-ico { top: 18px; left: 34px; width: 31px; height: 52px; background-position: -178px -82px; }

.service-name {
  position: absolute;
  left: 0;
  bottom: -22px;
  width: 98px;
  font-size: 11px;
  line-height: 1.1;
  color: var(--red-dark);
  text-transform: uppercase;
  text-align: center;
  transition: color 0.2s;
}

.service-bubbles a:hover .service-name,
.service-bubbles a:focus-visible .service-name { color: var(--text); }

/* ======================= Team + contact band ======================== */

.team-section {
  background: var(--red-brand);
  color: var(--white);
  font-family: var(--font-display);
  padding: 40px 0;
}

.team-inner { display: flex; flex-direction: column; gap: 32px; }

.section-heading {
  margin: 0 0 20px;
  font-size: 22px;
  color: var(--white);
  text-transform: uppercase;
}

.staff-grid {
  display: grid;
  /* Cards fill the row on a phone and land on the legacy 220px on desktop. */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 28px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.staff-card { text-align: center; }

.staff-photo {
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
}

.staff-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-name {
  margin: 0 0 2px;
  font-size: 15px;
  color: var(--white);
  text-transform: uppercase;
}

.staff-position {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--red-deep);
  text-transform: uppercase;
  line-height: 1.35;
}

.staff-email a,
.staff-phone a { font-size: 12px; color: var(--text); text-decoration: underline; }
.staff-email, .staff-phone { margin: 0; word-break: break-word; }

/* --- Contact card --- */

.contact-card {
  font-size: 14px;
  color: var(--white);
  /* Heading and address are centred in the column. */
  text-align: center;
}

.contact-card h2 { font-size: 15px; color: var(--white); text-transform: uppercase; }
.contact-card p { margin: 0 0 8px; }

/*
 * The list is centred as a block but its items stay left-aligned inside it.
 * Centring the item text itself would strand the sprite icons, which are
 * absolutely positioned at the left edge of each <li>.
 */
.contact-list {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.contact-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 4px;
}

.contact-list a { color: var(--white); }
.contact-location a { text-decoration: underline; }

/*
 * Sprite icons. Note `background-image` + `background-repeat` rather than the
 * `background` shorthand: the shorthand resets background-position, and this
 * rule (0-1-2) outranks a plain `.contact-phone::before` (0-1-1), so the
 * shorthand would silently reset every icon to the sprite's top-left corner.
 * The per-icon selectors below are class-scoped to outrank it.
 */
.contact-list li::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  background-image: url('../img/sprite.png');
  background-repeat: no-repeat;
}

.contact-list .contact-phone::before    { top: 4px; width: 8px;  height: 12px; background-position: -30px -42px; }
.contact-list .contact-email::before    { top: 8px; width: 10px; height: 7px;  background-position: -39px -42px; }
.contact-list .contact-location::before { top: 6px; width: 9px;  height: 12px; background-position: -50px -42px; }
/* The orders line carries no icon on the original site; the 20px indent keeps
   it aligned with the rest of the list. */
.contact-list .contact-fax::before      { content: none; }

/* ========================= Group structure ========================== */

.structure-section {
  background: var(--bg-structure);
  box-shadow: inset 0 0 114px #c2c2c2;
  font-family: var(--font-display);
  padding: 40px 0;
}

.structure-heading {
  margin: 0 0 24px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--red-brand);
}

/*
 * Below 1024px the diagram is a plain grid of circles: the legacy version was a
 * 741x444 background image with ten absolutely positioned circles on top, which
 * cannot shrink. Above 1024px the original artwork and coordinates come back
 * (coordinates are injected per request from the database, in a nonced style
 * block).
 */
.structure-diagram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 40px 16px;
  justify-items: center;
}

.circle { position: relative; width: 130px; }

.circle a,
.circle .circle-static {
  display: block;
  width: 130px;
  height: 130px;
  padding: 30px 8px 0;
  border-radius: 50%;
  text-align: center;
  text-decoration: none !important;
  overflow: hidden;
}

.circle-grey a,
.circle-grey .circle-static { background: var(--grey-circle); }

.circle-red a,
.circle-red .circle-static {
  background: var(--red-brand);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
}

.circle strong {
  display: block;
  padding: 0 2px 4px;
  font-size: 11px;
  line-height: 1.45;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--white);
}

.circle-activity {
  display: inline-block;
  width: 85px;
  padding-top: 4px;
  border-top: 1px solid var(--grey-circle-rule);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 300;
  color: var(--text);
}

.circle-country {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  color: #999;
}

.circle a:hover { background: var(--text); }
.circle-grey a:hover,
.circle-grey a:hover .circle-activity { color: var(--white) !important; }

/* ============================= Partners ============================= */

.partners-section { padding: 32px 0; background: var(--white); }

.partners-heading {
  color: var(--text-muted);
  font-size: 22px;
  text-transform: uppercase;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  align-items: center;
  gap: 30px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
}

.partner img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* ========================= Content pages ============================ */

.content-wrap {
  background: var(--bg-light);
  padding-top: calc(var(--header-height) + 24px);
  padding-bottom: 40px;
  min-height: 60vh;
}

.content-inner { display: flex; flex-direction: column; gap: 24px; }

.content-submenu { background: url('../img/submenuBg.png') repeat-y top right; padding: 12px 16px; }
.content-submenu ul { margin: 0; padding: 0; list-style: none; }

.content-submenu a {
  display: block;
  padding: 8px 0;
  font-size: 11px;
  text-transform: uppercase;
}
.content-submenu a:hover { color: var(--red-accent); text-decoration: none; }

.content-body {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-content);
}

.content-body h1 { font-size: 24px; color: var(--text-muted); }
.content-body h2 { font-size: 18px; color: var(--red-accent); text-transform: uppercase; }
.content-body h3 { font-size: 16px; color: var(--text-muted); }

/* Child pages rendered inline beneath their parent. */
.subpage {
  padding: 24px 0 8px;
  border-top: 1px solid #e3e2e2;
  /* Anchored links must clear the fixed header. */
  scroll-margin-top: calc(var(--header-height) + 16px);
}

.subpage:first-of-type { border-top: 0; }
.subpage-nested { padding-left: 12px; border-top: 0; }
.subpage-nested h3 { font-size: 14px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; }

.error-body { padding: 40px 0 80px; }

/* --- Editor-produced content --- */

.rich-text a { color: var(--red-accent); text-decoration: underline; }
.rich-text img { height: auto; margin: 8px 0; }
.rich-text ul, .rich-text ol { padding-left: 20px; }

/* Wide tables scroll inside their own box rather than widening the page. */
.rich-text table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 12px;
}

.rich-text th, .rich-text td { padding: 6px 8px; vertical-align: top; text-align: left; }
.rich-text th { color: var(--red-dark); text-transform: uppercase; border-bottom: 1px dotted var(--red-dark); }
.rich-text tr:nth-child(even) td { background: var(--bg-row); }

/* ============================== Footer ============================== */

.site-footer {
  background: var(--bg-light) url('../img/footerBg.png') repeat-x top left;
  font-size: 11px;
  color: var(--text-muted);
  padding: 20px 0 30px;
}

.footer-inner { display: flex; flex-direction: column; gap: 12px; }
.footer-copy { color: var(--text-faint); }
.footer-copy a { color: var(--text-faint); }
.privacy-link { padding-left: 10px; text-decoration: underline; }
.footer-contacts { display: flex; flex-direction: column; gap: 4px; }
.footer-contacts a { text-decoration: underline; }
.footer-contacts a:hover { color: var(--text); }

/* ======================= Tablet: >= 768px =========================== */

@media (min-width: 768px) {
  :root { --header-height: 72px; }

  .hero-heading { font-size: 34px; }
  .hero-eyebrow { font-size: 18px; }
  .hero .big    { font-size: 34px; }

  .staff-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .partners-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  .footer-inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .footer-contacts { flex-direction: row; gap: 25px; }

  .team-inner { flex-direction: row; align-items: flex-start; gap: 40px; }
  .team { flex: 1 1 auto; }
  .contact-card { flex: 0 0 240px; margin-top: 58px; }

  .content-inner { flex-direction: row; align-items: flex-start; }
  .content-submenu { flex: 0 0 250px; }
  .content-body { flex: 1 1 auto; padding: 0 15px; }
}

/* ====================== Desktop: >= 1024px ==========================
 * Restores the original desktop presentation exactly.
 */

@media (min-width: 1024px) {
  :root { --header-height: 95px; }

  .nav-toggle { display: none; }

  .header-inner { flex-wrap: wrap; align-items: flex-start; padding-block: 0; }

  .logo { margin: 30px 0 0 10px; }
  /* height:auto, not a fixed 40px — the new logo is 3.57:1 and a hard height
     would squash it. The width/height attributes on the <img> keep the box
     reserved so nothing shifts on load. */
  .logo img { width: 150px; height: auto; }

  .header-nav {
    display: flex;
    position: static;
    flex-direction: column;
    align-items: flex-end;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .langs {
    margin: 8px 5px 0 0;
    padding: 0;
    border: 0;
  }

  .langs a { padding: 0; margin-right: 8px; text-transform: none; }

  .menu { display: flex; margin-top: 12px; }

  .menu > li {
    /* The 1px separator between top-level items. */
    background: url('../img/sep.png') no-repeat right 4px;
    padding: 0 13px 0 12px;
  }
  .menu > li:last-child { background: none; }

  .menu > li > a { padding: 6px 0 20px; font-size: 12px; }

  .submenu-toggle { display: none; }

  /* Opens on hover AND on keyboard focus — the legacy version was
     mouseover-only and therefore unusable without a mouse. */
  .submenu {
    display: block;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: -14px;
    z-index: 9999;
    width: 250px;
    margin: 0;
    padding: 10px 0 10px 15px;
    background: var(--white) url('../img/headerBg.png') repeat;
    border: 0;
    box-shadow: 1px 1px 2px #999;
    transition: opacity 0.15s;
  }

  .menu > li:hover > .submenu,
  .menu > li:focus-within > .submenu {
    visibility: visible;
    opacity: 1;
  }

  .submenu a { width: 235px; padding: 5px 0; text-transform: lowercase; }

  .hero {
    background-position: center -100px;
    background-size: auto;
    min-height: 500px;
    /*
     * The header is fixed and overlays the hero, exactly as on the legacy site,
     * so this padding is measured from the top of the page — NOT added on top
     * of the header height. Adding both double-counts the header and pushes the
     * headings down into the pharmacist photo.
     *
     * 110px clears the 95px header with the same 15px gap the old site had.
     */
    --hero-pad-top: 110px;
    padding-top: var(--hero-pad-top);
    /* Clips the bottom of the pharmacist photo where the red band begins,
       exactly as the fixed-height #home box did on the legacy site. */
    overflow: hidden;
  }

  .hero .hero-body { position: relative; }

  /*
   * The pharmacist photo. Decorative, so it is a background rather than an
   * <img> — it needs no alt text and is never announced by a screen reader.
   *
   * Anchored to the top of .hero-body (the block *after* the headings) rather
   * than to a fixed offset from the hero. The legacy site hard-coded
   * `710px 250px`, which left the headings clearing her by about two pixels —
   * fine for content that never changed, but this is a CMS now, and one longer
   * heading would have run straight through her. Anchoring her to the flow
   * means a taller heading simply pushes her down.
   *
   * Shown only at this breakpoint: below it there is no free column beside the
   * copy, and overlapping it would be worse than omitting her.
   */
  .hero .hero-body::after {
    content: '';
    position: absolute;
    top: -6px;
    right: 0;
    width: 272px;
    height: 554px;
    background: url('../img/home.png') no-repeat 0 0;
    pointer-events: none;
  }

  /*
   * Reserve her column. Padding on .hero-body narrows the copy, but an
   * absolutely positioned ::after resolves `right: 0` against the padding box,
   * so she still sits flush to the right edge. That makes the separation
   * structural: no amount of text can reach her.
   * 272px photo + 20px breathing room.
   */
  .hero-inner { max-width: 100%; }
  .hero-body { padding-right: 292px; }
  .hero-text { max-width: 700px; margin-right: auto; }
  .hero .service-bubbles { justify-content: flex-start; padding-left: 50px; }

  .hero-heading { font-size: 42px; }
  .hero-eyebrow { font-size: 18px; }

  /* Legacy desktop sizes for the imported hero markup. */
  .hero .big    { font-size: 42px; }
  .hero .medium { font-size: 38px; }

  .service-bubbles { gap: 24px 30px; margin-bottom: 60px; }

  .team-section { padding: 50px 0; }
  .section-heading { font-size: 25px; }
  .staff-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 30px; }
  .contact-card { flex-basis: 260px; }

  .structure-section { padding: 70px 0; }
  .structure-heading { font-size: 25px; line-height: 35px; }

  /*
   * Original diagram: the circles are absolutely positioned over a 741x444
   * background image, at coordinates stored per company in the database and
   * emitted in a nonced <style> block by the template.
   */
  .structure-diagram {
    display: block;
    position: relative;
    width: 741px;
    height: 444px;
    margin: 105px 0 96px 111px;
    background: url('../img/structureBg.png') no-repeat 0 0;
  }

  .circle { position: absolute; width: 130px; }

  .circle a,
  .circle .circle-static { padding: 30px 0 0; height: 130px; }

  .circle-red a,
  .circle-red .circle-static { display: block; padding-top: 58px; height: 130px; }

  .circle strong { padding: 0 10px 4px; line-height: 16px; }

  .circle-country {
    position: absolute;
    top: 138px;
    left: 0;
    width: 130px;
    margin-top: 0;
  }

  .partners-section { padding: 30px 0; }
  .partners-heading { font-size: 25px; padding-left: 10px; }
  .partners-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 30px 40px; }
  .partner { height: 120px; }

  .content-wrap { padding-top: calc(var(--header-height) + 35px); }

  /*
   * The legacy content column was indented 350px to clear a 250px sidebar, and
   * kept that indent even on pages with no sidebar items (it used a fixed-
   * position #submenu plus a hard `margin-left: 350px` on #content). Reproduced
   * here by reserving the column on the wrapper, so the text starts in the same
   * place whether or not a submenu exists — without copying the position:fixed,
   * which would have pinned the sidebar to the viewport while scrolling.
   */
  .content-inner {
    display: block;
    position: relative;
    padding-left: 350px;
  }

  .content-submenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    padding: 20px;
    min-height: 250px;
  }

  .content-body { max-width: 606px; padding: 15px 0; }
  .content-body h1 { font-size: 30px; }

  .site-footer { font-size: 11px; }
}

/* ============================ Print ================================= */

@media print {
  .site-header, .nav-toggle, .header-nav, .service-bubbles { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .content-wrap, .hero { padding-top: 0; background: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}