/* ==========================================================================
   Hiring Momentum Consulting
   --------------------------------------------------------------------------
   Brand palette taken from the HMC logo files:
     Navy  #1E2761   primary — text, dark sections, buttons
     Gold  #C9A24B   accent — rules, diamonds, buttons on navy. Never as text
                     on white (contrast 2.3:1).
     Mist  #F4F6FB   alternate section ground
     Slate #4A4A57   secondary text
     Ice   #CADCFC   secondary text on navy
   Type: Georgia for display (matches the logo; a system font). Body text in
   Google Sans Flex, and Lora for the Aesthetic Momentum wordmark only — both
   SIL OFL (licences in assets/fonts/), both SELF-HOSTED.
   Never switch this to the Google Fonts CDN: it would send visitor IPs to
   Google and make the Datenschutz statement "no third-party fonts" false.
   ========================================================================== */

@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/google-sans-flex-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;
}
@font-face {
  font-family: "Google Sans Flex";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/google-sans-flex-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;
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-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;
}

:root {
  --menu-gap: 36px;               /* one gap between every header menu element */
  --navy:       #1E2761;
  --navy-deep:  #161C49;
  --gold:       #C9A24B;
  --gold-light: #DDBF78;           /* buttons on navy — lighter than the logo gold */
  --mist:       #F4F6FB;
  --slate:      #4A4A57;
  --ice:        #CADCFC;
  --navy-ink:   #0E1330;           /* body text: near-black navy, 18:1 on white */

  --ink:        var(--navy);
  --ink-soft:   var(--navy-ink);
  --ink-faint:  var(--navy);       /* labels, meta — dark blue, no greys on light grounds */
  --line:       #dde2ee;           /* navy-tinted hairline   */
  --paper:      #ffffff;
  --paper-alt:  var(--mist);

  --on-dark:      #ffffff;
  --on-dark-soft: var(--ice);
  --on-dark-line: #36407a;

  --font-serif: Georgia, "Times New Roman", Times, serif;
  --font-am:    "Lora", Georgia, serif;   /* Aesthetic Momentum wordmark */
  --font-sans:  "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;

  --container: 1140px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 11vw, 148px);
  --header-h: 80px;
  --header-h-scrolled: 64px;

  --radius: 1px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Where things live
   --------------------------------------------------------------------------
   Fonts and tokens        @font-face blocks, then :root
   Reset / base            element defaults, reduced motion, print
   Layout primitives       .container, .section and its modifiers
   Typography              headings, .body, .lead, .measure, .eyebrow
   Buttons & links         .btn and its modifiers
   Header                  logo, nav, burger, sticky behaviour
   Home — hero
   Section kicker          the italic closing line above a CTA
   Audit page              stages, score, insights, price
   Solutions page          the five cards
   Partner page
   About page              portrait, facts, bio
   Closing CTA             the dark photo section that ends every page
   Footer
   Legal / content pages   Impressum, Datenschutz, AGB
   Shared components       .chain and .chain--funnel, .stages, .score,
                           .pillars, .split, .media, .ico
   Images and icons

   Two things must stay in step by hand:
     - the burger breakpoint, 1140px in the media query near the header; the
       script closes the menu by asking whether the burger is still visible,
       so it needs no copy of the number
     - the photo credits in the footer of all 12 content pages, whenever a
       photo is added or removed
   ========================================================================== */

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
strong { color: var(--ink); font-weight: 600; }

::selection { background: var(--gold); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.section--dark :focus-visible,
.footer :focus-visible { outline-color: var(--gold); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  font-size: 14px;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

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

.section {
  padding-block: var(--section-y);
  scroll-margin-top: calc(var(--header-h-scrolled) + 8px);
}
/* A sub-page opens on its section label, right under the header, so it needs
   far less air above it than a section that follows other content. The home
   page is unaffected: its first section is the hero. */
main > section.section:first-of-type { padding-top: clamp(40px, 4.4vw, 68px); }

.section--alt  { background: var(--paper-alt); }
.section--dark { background: var(--navy); color: var(--on-dark-soft); }

.measure    { max-width: 62ch; }

/* Section label — the gold diamond is the logo's own motif */
.eyebrow {
  font-size: clamp(14px, 1.2vw, 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 650;
  margin-bottom: clamp(30px, 3.4vw, 40px);
  display: flex;
  align-items: center;
  gap: 16px;
}
.eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  max-width: 120px;
}
.section--dark .eyebrow { color: var(--ice); }

/* ==========================================================================
   Typography
   ========================================================================== */

.display {
  font-family: var(--font-serif);
  font-size: clamp(2.3rem, min(6.6vw, 9.5vh), 4.9rem);
  line-height: 1.08;
  letter-spacing: -0.005em;   /* sentence case, so no cap tracking */
  text-wrap: balance;         /* no one-word orphan line in either language */
  font-weight: 400;
  color: var(--ink);
}

.h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  font-weight: 400;
  color: var(--ink);
}
.section--dark .h2 { color: var(--on-dark); }

.h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: 0.005em;
  font-weight: 650;
  color: var(--ink);
}

.lead {
  font-size: clamp(1.075rem, 1.7vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
}
.section--dark .lead { color: var(--on-dark-soft); }

.body { color: var(--ink-soft); }
.section--dark .body { color: var(--on-dark-soft); }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease);
  white-space: nowrap;
}

/* On light grounds: navy with white text; hover warms to gold */
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--gold); color: var(--navy); }

/* On navy grounds: gold with navy text (6.1:1) */
.section--dark .btn--primary { background: var(--gold-light); color: var(--navy); }
.section--dark .btn--primary:hover { background: #fff; color: var(--navy); }

.btn--sm { padding: 11px 18px; font-size: 12px; }

/* Long German labels must wrap on phones rather than widen the page */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; letter-spacing: 0.06em; padding: 15px 22px; }
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--gold); }

/* the quiet button has to read on the dark sections too */
.section--dark .btn--ghost {
  background: var(--navy);
  color: var(--gold-light);
  border-color: var(--gold);
}
.section--dark .btn--ghost:hover { background: var(--gold-light); color: var(--navy); border-color: var(--gold-light); }

/* a link inside the closing line keeps the gold underline */
.contact .lead a { border-bottom: 1px solid var(--gold); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
}
.link-arrow .arw { color: var(--gold); transition: transform 0.2s var(--ease); }
.link-arrow:hover .arw { transform: translateX(3px); }
.footer .link-arrow { color: #fff; }

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

/* the header runs wider than the text columns so the menu has room */
.header .container { max-width: 1280px; }

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  overflow-anchor: none;   /* its own height change must not move the scroll */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.header.is-scrolled { border-bottom-color: var(--line); }

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  transition: height 0.25s var(--ease);
}
.header.is-scrolled .header__inner { height: var(--header-h-scrolled); }

/* Horizontal wordmark, built from the logo's own elements:
   letter-spaced Georgia caps in navy, gold diamond, gold CONSULTING. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--navy);
  font-family: var(--font-serif);
  text-transform: uppercase;
  line-height: 1;
}
.logo__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.logo__word {
  font-size: 17px;
  letter-spacing: 0.19em;
}
.logo__diamond {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  background: var(--gold);
  transform: rotate(45deg);
}
.logo__sub {
  font-size: 10px;
  letter-spacing: 0.34em;
  color: var(--gold);
}
@media (max-width: 1100px) { .logo__word { font-size: 15px; letter-spacing: 0.16em; } .logo__sub { font-size: 9px; } }
@media (max-width: 440px)  {
  .logo__word { font-size: 14px; letter-spacing: 0.13em; }
  .header__actions { gap: 12px; }
  .header__inner { gap: 12px; }
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  margin-left: auto;             /* push the menu right; spacing to EN/DE is the same gap */
}
.nav a {
  font-size: 14.5px;
  font-weight: 520;
  color: var(--navy);
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--navy); font-weight: 650; border-bottom-color: var(--gold); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  flex-shrink: 0;
}

.lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.lang a:hover { color: var(--navy); }
.lang [aria-current="true"] { color: var(--navy); font-weight: 700; border-bottom: 1px solid var(--gold); }
.lang a:not([aria-current]) { font-weight: 500; }
.lang .sep { color: var(--gold); }
.lang--mobile { display: none; }   /* only inside the burger menu */

.burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--navy);
}
.burger span { position: relative; transition: background-color 0.18s var(--ease); }
.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.22s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top:  5.5px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1140px) {   /* burger earlier: six menu items need the room */
  :root { --header-h: 64px; --header-h-scrolled: 64px; }   /* no shrink-on-scroll on touch screens */
  .header {
    background: #fff;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .header__inner { transition: none; }
  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 2px solid var(--gold);
    padding: 8px var(--gutter) 28px;
    margin: 0;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }
  .header.is-scrolled .nav { inset-block-start: var(--header-h-scrolled); }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    padding: 15px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--navy);
  }
  .header__actions { margin-left: auto; }

  /* language switch moves into the burger menu */
  .header__actions .lang { display: none; }
  .nav .lang--mobile {
    display: flex;
    gap: 10px;
    padding-top: 20px;
    font-size: 15px;
  }
  .nav .lang--mobile a {
    padding: 0;
    font-size: 15px;
    border-bottom: 1px solid transparent;
    color: var(--ink-faint);
  }
  .nav .lang--mobile a[aria-current="true"] {
    color: var(--navy);
    border-bottom-color: var(--gold);
  }
}

@media (max-width: 560px) {
  .header__actions .btn { display: none; }
}

/* ==========================================================================
   Home — hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(32px, 6vh, 88px);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 55%, var(--mist) 100%);
  border-bottom: 1px solid var(--line);
}
.hero__title { max-width: none; }   /* each sentence has its own <br> */

/* Photo: sits behind the right of the hero and fades out under the text.
   The mask is fully transparent wherever the headline and buttons sit. */
.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 72vw;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, transparent 34%, rgba(0,0,0,.12) 48%,
    rgba(0,0,0,.55) 62%, rgba(0,0,0,.9) 76%, #000 86%);
          mask-image: linear-gradient(to right,
    transparent 0%, transparent 34%, rgba(0,0,0,.12) 48%,
    rgba(0,0,0,.55) 62%, rgba(0,0,0,.9) 76%, #000 86%);
}
.hero > .container { position: relative; z-index: 1; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  filter: grayscale(1) contrast(1.04);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: color;   /* cools the grey facade toward brand navy, keeps its light */
  opacity: 0.35;
}

@media (min-width: 901px) {
  /* the text column ends before the photo; the headline sizes itself to that column */
  .hero__content {
    --left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    width: calc(66vw - var(--left) - 56px);
    container-type: inline-size;
  }
  /* sized so the headline sets in two lines in both languages */
  .hero .hero__title { font-size: clamp(1.9rem, min(8.2cqi, 9vh), 4.3rem); }
  .hero__sub { max-width: min(44ch, 100%); }
}
@media (max-width: 900px) {
  .hero__media { display: none; }
}

/* logo diamond above the gold rule */
.hero__diamond {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 0 clamp(22px, 3.5vh, 30px) calc((72px - 14px) / 2);   /* centred over the 72px rule */
  background: var(--gold);
  transform: rotate(45deg);
}

/* gold rule above the headline, echoing the logo's top line */
.hero__title::before {
  content: "";
  display: block;
  width: 72px;
  height: 1.5px;
  background: var(--gold);
  margin-bottom: clamp(20px, 4vh, 40px);
}

.hero__sub {
  margin-top: clamp(20px, 4vh, 40px);
  max-width: 44ch;
}

.hero__cta {
  margin-top: clamp(24px, 5vh, 52px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
}

/* ==========================================================================
   Section kicker (the italic closing line)
   ========================================================================== */

.philosophy__kicker {
  margin-top: clamp(56px, 6.5vw, 88px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold);   /* the rule sits under the line, not over it */
  max-width: 62ch;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-style: italic;
  color: var(--navy);
}
/* beside an image the kicker stays with its column */
.split .philosophy__kicker {
  margin-top: clamp(32px, 3.5vw, 44px);   /* tighter inside a column */
  margin-inline: 0;
  text-align: left;
}

/* ==========================================================================
   Audit page
   ========================================================================== */

.score {
  border: 1px solid var(--on-dark-line);
  border-top: 2px solid var(--gold);
  padding: clamp(26px, 3.4vw, 38px);
}
@media (min-width: 901px) { .score { position: sticky; top: calc(var(--header-h-scrolled) + 32px); } }

.score__label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ice);
  font-weight: 600;
}
.score__range {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 5.6vw, 4.2rem);
  color: #fff;
  line-height: 1;
}
.score__value { margin-right: 0.12em; }
.score__max {
  font-size: 0.4em;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.score__scale {
  margin-top: 26px;
  height: 42px;
  position: relative;
  border-bottom: 1px solid var(--on-dark-line);
}
.score__ticks {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
}
.score__ticks i {
  display: block;
  width: 1px;
  height: 9px;
  background: var(--on-dark-line);
}
.score__ticks i:nth-child(5n + 1) { height: 18px; background: rgba(202, 220, 252, 0.45); }
.score__ticks i.is-on,
.score__ticks i.is-on:nth-child(5n + 1) { background: var(--gold); }

/* progress: --p runs 0 → 1, set by main.js on scroll */
.score__fill {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 4px;
  width: calc(var(--p, 1) * 100%);
  background: var(--gold);
}
.score__marker {
  position: absolute;
  left: calc(var(--p, 1) * 100%);
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

.score__foot {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--ice);
  letter-spacing: 0.04em;
}

.price {
  margin-top: clamp(32px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}
.price__figure {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.6vw, 2.6rem);
  color: var(--gold);
  line-height: 1.1;
}
.price__tax {
  font-size: 13px;
  color: var(--ice);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.price__note {
  flex-basis: 100%;
  font-size: 14.5px;
  color: var(--ice);
  max-width: 54ch;
}

.audit__cta { margin-top: 34px; text-align: center; }

/* ==========================================================================
   Solutions page
   ========================================================================== */

.solutions {
  margin-top: clamp(26px, 2.6vw, 36px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 1.9vw, 26px);
}
@media (max-width: 860px) { .solutions { grid-template-columns: 1fr; } }

/* Each solution sits in its own card, with the gold accent riding the top edge */
.solution {
  position: relative;
  padding: clamp(20px, 1.9vw, 26px);
  border: 1px solid var(--line);
  border-top: 1px solid var(--navy);
  background: var(--paper-alt);
}
.section--alt .solution { background: var(--paper); }
.solution::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 52px;
  height: 3px;
  background: var(--gold);
}
.solution h3 { margin-top: 8px; }
.solution p  { margin-top: 9px; font-size: 15px; line-height: 1.55; }

/* Each card offers the same thing on hover: write about this one service.
   The card reserves the room for it, so nothing shifts when it appears, and
   a keyboard reveals it by focusing the link. Where there is no hover at all
   it simply stays visible. */
.solution { padding-bottom: calc(clamp(20px, 1.9vw, 26px) + 12px); }
.solution__mail {
  position: absolute;
  right: clamp(20px, 1.9vw, 26px);
  bottom: clamp(10px, 1.1vw, 14px);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--gold);
  border: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.solution:hover .solution__mail,
.solution__mail:focus-visible { opacity: 1; }
.solution__mail:hover { text-decoration-color: var(--navy); }

@media (hover: none) {
  .solution__mail { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .solution__mail { transition: none; }
}

/* ==========================================================================
   Partner page
   ========================================================================== */

.partners {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
}
@media (max-width: 760px) { .partners { grid-template-columns: minmax(0, 1fr); gap: 56px; } }

/* Open, left-aligned columns — same rule + gold accent as the service blocks */
.partner {
  position: relative;
  border-top: 1px solid var(--navy);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.partner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--gold);
}

/* Both marks share one box height so the labels below line up */
.lockup__mark {
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.lockup__logo { height: 124px; width: auto; }

/* Aesthetic Momentum: their "am" mark with the wordmark set in Lora below,
   exactly as on aesthetic-momentum.at (lowercase, weight 400) */
.lockup__mark--am { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; }
.lockup__am-logo  { height: 52px; width: auto; }
.lockup__am-word  {
  font-family: var(--font-am);
  font-weight: 400;
  font-size: 12.73px;          /* renders exactly as wide as the 52px-high mark (124.8px); scale both together */
  line-height: 1;
  letter-spacing: -0.005em;
  color: #000;
}

.partner__label {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--navy);
}
.partner__list {
  margin-top: 14px;
  width: 100%;
}
.partner__list li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 17px;
  color: var(--ink-soft);
}
.partner__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.partner__link { margin-top: 22px; }

/* ==========================================================================
   About page
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* photo column hugs the photo */
  gap: clamp(32px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 640px) {   /* tablets keep the photo beside the text */
  .about__grid { grid-template-columns: 1fr; }
}

.portrait {
  position: relative;
  margin: 0;
  max-width: min(480px, 42vw);   /* keeps the text column readable on tablets */
}
.portrait img {
  width: auto;                  /* keep the photo's own proportions (800 × 955) */
  height: auto;
  max-width: 100%;
  /* fits photo + caption on screen when arriving via the "About" menu link:
     viewport minus sticky header, section padding + label above, caption below */
  max-height: calc(100vh - 356px);
  max-height: calc(100svh - 356px);
  min-height: 300px;
  object-fit: cover;             /* if size limits ever conflict, crop instead of squashing */
  object-position: 50% 20%;
  background: var(--mist);
}
.portrait__frame { position: relative; width: fit-content; }
/* slight inner shadow — an overlay, because inset box-shadow is hidden under <img> */
.portrait__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 22px rgba(22, 28, 73, 0.08);
  pointer-events: none;
  z-index: 1;
}
.portrait figcaption {
  margin-top: 18px;
  font-family: var(--font-serif);
  color: var(--navy);
  font-size: 17px;
}
.portrait figcaption span {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.about__grid { isolation: isolate; }

/* stacked layout on phones: must come after the base portrait rules to win.
   The 42vw cap above would otherwise make the photo 164px wide. */
@media (max-width: 640px) {
  .portrait { max-width: 440px; }
  .portrait__frame { width: 100%; }
  .portrait img { width: 100%; height: auto; max-height: none; min-height: 0; }
}

.about__name {
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);   /* the name is the headline here */
  line-height: 1.05;
}
.about__role {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.about__tagline {
  margin-top: clamp(24px, 3vw, 34px);
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.25;
  color: var(--navy);
}

/* flex, not inline: an inline-flex button with an icon sits on a different
   baseline than one without, which knocks the two out of alignment */
.about__cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}
.btn__icon { flex-shrink: 0; margin-top: -1px; }

.about__focus {
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

/* ==========================================================================
   Closing CTA (every page)
   ========================================================================== */

.contact { text-align: center; }
.contact .h2   { margin-inline: auto; max-width: 22ch; }
.contact .lead { margin-inline: auto; margin-top: 24px; max-width: 52ch; }
.contact::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 34px;
  background: var(--gold);
  transform: rotate(45deg);
}
/* the closing CTA can carry a second, quieter button */
.contact__cta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

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

.footer {
  background: var(--navy-deep);
  color: var(--ice);
  padding-block: clamp(56px, 7vw, 88px) 40px;
  font-size: 14.5px;
  border-top: 2px solid var(--gold);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__name {
  color: #fff;
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 16px;
  line-height: 1.5;
}
.footer__name span {
  display: block;
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  margin-top: 4px;
}
.footer p { margin-top: 10px; line-height: 1.6; }

.footer__head {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 650;
  margin-bottom: 14px;
}
.footer__links li { margin-bottom: 9px; }
.footer__links a:hover { color: #fff; }

.footer__seal {
  margin: 26px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer__seal img {
  width: 62px;
  height: auto;
  flex-shrink: 0;
  background: #fff;        /* the seal artwork expects a light ground */
  padding: 5px;
  border-radius: 2px;
}
.footer__seal figcaption a {
  color: #fff;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer__seal figcaption a:hover { border-bottom-color: var(--gold); }

.footer__seal figcaption {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ice);
  max-width: 26ch;
}
.footer__seal figcaption a { display: inline-block; margin-top: 5px; white-space: nowrap; }

.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--on-dark-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-size: 13.5px;
}
.footer__bottom a:hover { color: #fff; }
.footer__credit a { border-bottom: 1px solid var(--on-dark-line); }
.footer__credit a:hover { border-bottom-color: var(--gold); }

/* ==========================================================================
   Legal / content pages
   ========================================================================== */

.page-head {
  padding-block: clamp(56px, 8vw, 104px) clamp(32px, 4vw, 48px);
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.1;
  font-weight: 400;
  color: var(--navy);
}

.prose {
  padding-block: clamp(44px, 6vw, 76px) clamp(64px, 9vw, 112px);
  max-width: 72ch;
}
.prose h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--navy);
  margin-top: 2.4em;
  margin-bottom: 0.7em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1rem;
  font-weight: 650;
  color: var(--navy);
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.prose p, .prose ul { font-size: 16px; }
.prose p + p { margin-top: 1em; }
.prose ul { margin-top: 0.8em; }
.prose li { margin-bottom: 0.5em; padding-left: 18px; position: relative; }
.prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.prose a { color: var(--navy); border-bottom: 1px solid var(--gold); }
.prose dl { margin: 1em 0 0; }
.prose dt { font-weight: 600; color: var(--navy); margin-top: 1em; font-size: 15px; }
.prose dd { margin: 2px 0 0; font-size: 16px; }

.error-page {
  min-height: 62vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding-block: 80px;
}
.error-page .code {
  font-family: var(--font-serif);
  font-size: clamp(3.4rem, 9vw, 6rem);
  color: var(--navy);
  line-height: 1;
}
.error-page p { margin-top: 18px; }
.error-page .btn { margin-top: 34px; }

@media print {
  .header, .footer, .btn, .burger { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section { padding-block: 18pt; }
  .section--dark { background: #fff; color: #000; }
}

/* ==========================================================================
   Shared components — chain, funnel, stages, score, plan, pillars
   ========================================================================== */

.section--deep { background: var(--navy-deep); }

/* A photo behind a dark section, held back far enough that the copy still
   reads at AA contrast. */
.section--photo {
  background-image:
    linear-gradient(rgba(22, 28, 73, 0.88), rgba(22, 28, 73, 0.88)),
    url("../img/cta-skyline.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Hero -------------------------------------------------------------- */
.hero__kicker {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--gold);
}
.hero__kicker + .hero__sub { margin-top: 18px; }

/* --- Solutions: five cards with icons ---------------------------------- */
/* Five cards on a six-column grid: two wide ones on top, three below, so no
   row is left with a hole in it. */
.solutions--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.solutions--five > * { grid-column: span 2; }
.solutions--five > :nth-child(1),
.solutions--five > :nth-child(2) { grid-column: span 3; }

@media (max-width: 1000px) {
  .solutions--five { grid-template-columns: minmax(0, 1fr); }
  .solutions--five > *,
  .solutions--five > :nth-child(1),
  .solutions--five > :nth-child(2) { grid-column: span 1; }
}

.solution__icon { color: var(--gold); margin-bottom: 10px; }

/* --- Five connected blocks (problem, plan, system) ---------------------- */
.chain {
  margin-top: clamp(44px, 5vw, 66px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.chain__step {
  background: var(--paper-alt);
  padding: 26px 22px 28px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.section--alt .chain__step { background: var(--paper); }

.chain__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.chain__label::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 15px;
}
.chain__step p + p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.chain__step .chain__tags {
  font-size: 13px;
  line-height: 1.5;
  color: var(--navy);
  margin-top: 14px;
}

.chain:not(.chain--plain) .chain__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
  z-index: 1;
}

@media (max-width: 1000px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* five blocks in two columns leave one cell empty: the rules move onto the
     blocks themselves so nothing shows through where the sixth would be */
  .chain { background: none; border: 0; }
  .chain .chain__step { box-shadow: 0 0 0 1px var(--line); }
  .chain:not(.chain--plain) .chain__step:not(:last-child)::after { content: none; }
}
@media (max-width: 560px) { .chain { grid-template-columns: minmax(0, 1fr); } }

/* --- Audit stages 01-05 and the insight blocks -------------------------- */
.stages,
.insights {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
}
/* The audit reads as a sequence: a rule runs down the left, a diamond marks
   each step, and the number sits beside the step it belongs to. */
.stages {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 3vw, 38px);
}
.stages::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--on-dark-line);
}

.stages .stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 4px;
  padding: 0 0 0 clamp(34px, 3.4vw, 46px);
  border-top: none;
}
.stages .stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 15px;
  height: 15px;
  background: var(--gold);
  transform: rotate(45deg);
}

.stages .stage__num {
  grid-column: 1;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold-light);
}
.stages .stage__title {
  grid-column: 2;
  margin-top: 0;
  align-self: center;
}
.stages .stage p:not(.stage__num) {
  grid-column: 2;
  margin-top: 0;
  max-width: 62ch;
}

@media (max-width: 560px) {
  .stages .stage { padding-left: 30px; column-gap: 10px; }
  .stages .stage::before { width: 12px; height: 12px; }
  .stages::before { left: 5.5px; }
}
.insights { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* the four read-outs under the score stand apart from it and from the CTA */
.insights {
  margin-top: clamp(56px, 6vw, 92px);
  margin-bottom: clamp(28px, 3vw, 44px);
}

/* and each of them sits in its own box */
.insights .stage {
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid var(--on-dark-line);
  background: rgba(255, 255, 255, 0.035);
}
.insights .stage::before { left: -1px; width: 48px; }

.stage {
  border-top: 1px solid var(--on-dark-line);
  padding-top: 20px;
  position: relative;
}
.stage::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 38px;
  height: 3px;
  background: var(--gold);
}
.stage__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold-light);
}
.stage__title {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  line-height: 1.35;
}
.stage p:not(.stage__num) {
  margin-top: 8px;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--on-dark-soft);
}

@media (max-width: 900px) {
  .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .insights { grid-template-columns: minmax(0, 1fr); }
}

/* --- Audit stages ------------------------------------------------------- */
/* what the audit covers on the left, the five steps on the right, and the
   price block spanning both underneath */
.stages-row {
  margin-top: clamp(22px, 2.4vw, 34px);   /* room under the section heading */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(36px, 5vw, 76px);
  row-gap: 0;
  align-items: stretch;
}
.stages-row .stages-intro {
  margin-top: 0;                    /* its first paragraph carries the 28px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* the text ends level with the last step */
}
.stages-row .stages-intro .measure { max-width: none; }
.stages-row .stages { margin-top: 28px; }
.stages-row .audit__foot { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .stages-row { grid-template-columns: minmax(0, 1fr); }
  .stages-row .stages { margin-top: clamp(36px, 4.5vw, 52px); }
}

/* --- Audit foot: result + price beside the CTA -------------------------- */
.audit__foot {
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--on-dark-line);   /* one rule across both columns */
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;   /* the sub-scores run the full height of the card */
}
@media (max-width: 860px) { .audit__foot { grid-template-columns: minmax(0, 1fr); } }

.audit__cta-note {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-light);
}

/* --- Score demo --------------------------------------------------------- */
.score-demo {
  margin-top: clamp(40px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 900px) {
  .score-demo { grid-template-columns: minmax(0, 1fr); }
  .score-demo .score { order: -1; }   /* stacked, the score itself still leads */
}
.score-demo .score { position: static; }

.badge {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 9px;
  border: 1px solid var(--on-dark-line);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ice);
  vertical-align: 2px;
}

.score-leaks {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.score-mini {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.score-mini li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--on-dark-line);
  font-size: 15.5px;
}
.score-mini li:first-child { border-top: none; padding-top: 0; }
.score-mini__flag {
  flex: none;
  width: 21px;
  height: 21px;
  color: var(--gold-light);
}
.score-mini__label { flex: 1; color: var(--on-dark-soft); }
.score-mini__val {
  font-weight: 700;
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}

/* --- 90-day plan -------------------------------------------------------- */
.plan__tagline {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--gold);
}

/* --- Three pillars ------------------------------------------------------ */
.pillars {
  margin-block: clamp(72px, 7.5vw, 112px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 760px) { .pillars { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

.pillar {
  border-top: 1px solid var(--navy);
  padding-top: 22px;
  position: relative;
}
.pillar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 44px;
  height: 3px;
  background: var(--gold);
}
.pillar h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.2;
  color: var(--navy);
}
.pillar p { margin-top: 12px; font-size: 15.5px; color: var(--ink-soft); }

/* --- Partner closing lines ---------------------------------------------- */
.partners__kicker {
  margin-top: clamp(36px, 4vw, 52px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gold);   /* the rule sits under the line */
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--navy);
}
.partners__legal {
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* --- About: fact squares ------------------------------------------------ */
.facts {
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.facts li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- Closing CTA -------------------------------------------------------- */
.contact__kicker {
  margin-top: 34px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--gold-light);
}

/* ==========================================================================
   Images and icons
   ========================================================================== */

/* a full-width photo stands on its own, with room on both sides */
.media {
  margin-block: clamp(72px, 8vw, 120px);
  width: 100%;
  height: auto;
}
.split .media { margin-block: 0; }

/* --- Text beside an image ------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.split .measure { max-width: none; }

/* a two-column block set off from what comes before and after it */
.split--spaced { margin-block: clamp(64px, 7vw, 104px); }
/* when it ends a section, the section padding is enough on its own */
.container > .split--spaced:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

/* --- Icons inside the five-part blocks and the pillars ------------------- */
.ico { color: var(--gold); }

.chain--icons .chain__step > .ico { grid-column: 1; margin-bottom: 10px; }
.chain--icons .chain__label { grid-column: 1; }
.chain__step > p:not(.chain__label) { grid-column: 1; }
.chain__tags { grid-column: 1; }
.chain--icons .chain__label::before { content: none; }   /* the icon replaces the rule */

.pillar > .ico { margin-bottom: 16px; }
.pillar::before { content: none; }                        /* same, for the pillars */
.pillar { border-top-color: var(--line); }

@media (max-width: 560px) {
  .ico { width: 26px; height: 26px; }
}

/* --- Photos on tablet and phone ------------------------------------------
   Stacked, a photo that shared a row with text would otherwise run the full
   width of the page and dwarf the copy it belongs to. */
@media (max-width: 860px) {
  .split .media {
    display: block;
    max-width: 480px;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .portrait { max-width: 300px; }
}

/* On a tablet the photo stays beside the name, the role, the tagline and the
   three facts, but the bio runs the full width underneath: in a column of
   roughly 430px those paragraphs break every six or seven words.
   `display: contents` lifts the text block's children into the grid so the
   two halves can be placed separately; the row gap goes, because each element
   already carries its own margin. */
@media (min-width: 641px) and (max-width: 860px) {
  .about__grid { row-gap: 0; }
  .about__grid > div { display: contents; }
  .about__grid > div > * { grid-column: 1 / -1; }
  .about__grid .about__name,
  .about__grid .about__role,
  .about__grid .about__tagline,
  .about__grid .facts { grid-column: 2; }
  .about__grid .portrait { grid-row: 1 / 5; }
  .about__grid > div > .body:first-of-type { margin-top: clamp(28px, 3.4vw, 40px); }
}

/* --- The Audit section on white ------------------------------------------
   It used to sit on navy, between two other sections. Now it opens the page,
   so it takes the page ground and the timeline, the price and the closing
   note swap their on-dark colours for the ones used elsewhere on white. */
.section--audit .stages::before,
.section--audit .stages .stage,
.section--audit .audit__foot { border-color: var(--line); }
.section--audit .stages::before { background: var(--line); }

.section--audit .stages .stage__num { color: var(--slate); }
.section--audit .stages .stage__title { color: var(--navy); }
.section--audit .stages .stage p:not(.stage__num) { color: var(--ink-soft); }

.section--audit .price__figure { color: var(--navy); }
.section--audit .price__tax,
.section--audit .price__note { color: var(--ink-soft); }
.section--audit .audit__cta-note { color: var(--navy); }

/* beside the five steps the intro sets slightly larger, so the two columns
   fill the same height without a hole between the paragraphs */
.stages-row .stages-intro .body {
  font-size: 18.5px;
  line-height: 1.62;
}
@media (max-width: 860px) {
  .stages-row .stages-intro .body { font-size: 17px; line-height: 1.65; }
}