/* Thomas A. Thejn — Independent IT Transformation Advisory.
   Palette and typeface carried over from the previous site: deep navy
   (#0D1B2A) for authority, gold (#C8922A) as the single accent, warm cream
   (#F5F2EC) so the light sections do not read clinical. DM Sans throughout,
   self-hosted so the page makes no third-party request. */

/* ---------- Fonts (self-hosted, no external requests) ---------- */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  --navy-900: #0D1B2A;
  --navy-800: #16293D;
  --navy-700: #1E3A52;
  --slate-400: #7B95AB;
  --slate-300: #8FA3B4;
  --slate-200: #C2D2DF;
  --gold: #C8922A;
  --gold-light: #E8B96A;
  /* Gold at 4.5:1 on cream and white. The brighter --gold above is for dark
     grounds and for fills behind dark text; it fails AA as text on light. */
  --gold-ink: #94661A;
  --cream: #F5F2EC;
  --cream-dark: #EAE5DC;

  --bg: var(--cream);
  --surface: #ffffff;
  --text: var(--navy-900);
  --muted: #55677A;
  --line: var(--cream-dark);

  --wrap: 70rem;
  --measure: 44rem;
  --radius: 4px;

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 500;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.9rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem); }
h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--navy-900);
  padding: 0.6rem 1rem; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Header ----------
   A floating pill over the page rather than a full-width bar: it reads as a
   control surface, and it keeps the navy band behind the hero uninterrupted.
   Four grouped entries with panels, rather than eight flat links — eight fitted
   in English and wrapped onto two lines in Danish, which broke the header. */

.header-shell {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0.85rem 0;
  background: var(--navy-900);
}

.site-header {
  width: min(100% - 2.5rem, calc(var(--wrap) + 6rem));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0.6rem 0.5rem 1.35rem;
  background: var(--navy-800);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.brand-dot { color: var(--gold); }
.brand-logo { display: block; height: 2.35rem; width: auto; }
@media (max-width: 1240px) { .brand-logo { height: 2.1rem; } }
@media (max-width: 560px)  { .brand-logo { height: 1.9rem; } }

/* ---- Desktop navigation ---- */

.site-nav { flex: 1 1 auto; min-width: 0; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-group { position: relative; }

.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-top:hover,
.nav-group:focus-within > .nav-top { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-top[aria-current] { color: #fff; background: rgba(255, 255, 255, 0.06); }

.nav-caret {
  width: 0.36rem;
  height: 0.36rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.55;
  transition: transform 0.15s ease;
}
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret { transform: translateY(0) rotate(225deg); opacity: 1; }

/* The panel. Opens on hover and on keyboard focus, so it needs no JavaScript
   — which keeps the site's zero-script property intact. */
.nav-panel {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: -0.5rem;
  width: min(30rem, 84vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(6, 14, 24, 0.32);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* Panels near the right-hand end open leftwards, or they extend past the
   viewport and give the page a horizontal scrollbar even while hidden —
   a hidden element still contributes to scroll width. */
.nav-group:nth-last-child(-n + 3) > .nav-panel { left: auto; right: -0.5rem; }

/* An invisible bridge so the pointer can travel from label to panel. */
.nav-panel::before {
  content: '';
  position: absolute;
  inset: -0.8rem 0 100% 0;
}
.nav-group:hover > .nav-panel,
.nav-group:focus-within > .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.nav-panel a {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.12s ease;
}
.nav-panel a:hover { background: var(--cream); }
.nav-panel strong {
  display: block;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 700;
  margin-bottom: 0.12rem;
}
.nav-panel span { display: block; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }

.nav-panel-more {
  display: block;
  margin-top: 0.35rem;
  padding: 0.65rem 0.8rem;
  border-top: 1px solid var(--line);
  color: var(--gold-ink);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}
.nav-panel-more:hover { color: var(--gold-ink); text-decoration: underline; }

/* ---- Right-hand actions ---- */

.header-actions { flex: none; display: flex; align-items: center; gap: 0.55rem; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.4rem 0.2rem;
}
.header-phone:hover { color: #fff; }
.header-phone-icon { width: 1rem; height: 1rem; flex: none; opacity: 0.75; }

.header-lang {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.82rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  white-space: nowrap;
}
.header-lang:hover { border-color: var(--gold); color: #fff; }

.header-cta {
  background: var(--gold);
  color: var(--navy-900);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.62rem 1.15rem;
  border-radius: 999px;
  white-space: nowrap;
}
.header-cta:hover { background: var(--gold-light); }

/* ---- Narrow widths ---- */

.nav-toggle, .nav-button { display: none; }

@media (max-width: 1240px) {
  .header-phone span { display: none; }
  .header-phone { padding: 0.4rem; }
  .nav-top { padding: 0.55rem 0.6rem; font-size: 0.85rem; }
}

@media (max-width: 1060px) {
  .site-header { flex-wrap: wrap; border-radius: 20px; padding: 0.7rem 0.8rem 0.7rem 1.1rem; }
  .site-nav { flex-basis: 100%; order: 3; display: none; }
  .nav-toggle:checked ~ .site-nav { display: block; }

  .nav-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    color: #fff;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
  }
  .nav-button-bars {
    width: 1rem; height: 2px; background: #fff;
    box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;
  }
  .header-actions { order: 2; margin-left: 0.4rem; }

  /* Panels become inline sections rather than overlays: nothing is positioned
     absolutely, so nothing can be clipped by the pill. */
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding-top: 0.5rem; }
  .nav-group { position: static; }
  .nav-top {
    justify-content: space-between;
    padding: 0.75rem 0.4rem;
    font-size: 0.95rem;
    border-radius: 8px;
    white-space: normal;
  }
  .nav-caret { transform: rotate(45deg); }
  .nav-panel {
    position: static;
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    margin: 0 0 0.5rem;
    padding: 0.35rem;
  }
  .nav-panel::before { display: none; }
  .nav-panel a:hover { background: rgba(255, 255, 255, 0.06); }
  .nav-panel strong { color: #fff; }
  .nav-panel span { color: var(--slate-300); }
  .nav-panel-more { border-top-color: rgba(255, 255, 255, 0.12); color: var(--gold); }
}

@media (max-width: 560px) {
  .header-lang { display: none; }
  .header-cta { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
}

/* ---------- Hero ---------- */

.hero { background: var(--navy-900); color: #fff; padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem); }
.hero-inner { max-width: 54rem; }
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero-line { display: block; }
.hero-line-accent { color: var(--gold); }
.hero .lead { color: var(--slate-200); }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.73rem; font-weight: 700; color: var(--muted);
  margin-bottom: 1rem;
}
.eyebrow-accent { color: var(--gold); }

.lead { font-size: clamp(1.08rem, 1rem + 0.5vw, 1.28rem); max-width: var(--measure); }
.lead-narrow { color: var(--muted); margin-bottom: 2.5rem; }
.band-dark .lead-narrow, .hero .lead-narrow { color: var(--slate-200); }

/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.85rem 1.6rem; border-radius: var(--radius);
  font-size: 0.95rem; font-weight: 700; text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--gold); color: var(--navy-900); }
.btn-primary:hover { background: var(--gold-light); }
.btn-ghost { border-color: currentColor; color: inherit; }
.btn-ghost-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-ghost-light:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Stats ---------- */

.stats-band { background: var(--navy-800); color: #fff; padding: 2.5rem 0; }
.stats-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat-value { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.9rem); font-weight: 500; color: var(--gold); line-height: 1; letter-spacing: -0.03em; }
.stat-label { font-size: 0.86rem; color: var(--slate-300); }

/* ---------- Sections ---------- */

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-alt { background: var(--surface); }
.band-dark { background: var(--navy-900); color: #fff; }
.band-dark .headline, .band-dark h3 { color: #fff; }

.headline { margin-bottom: 1.25rem; }
.headline span { display: block; }
.headline-muted { color: var(--muted); }
.band-dark .headline-muted { color: var(--slate-300); }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* Problems */
.problems { margin-top: 1rem; }
.problem { border-top: 2px solid var(--navy-900); padding-top: 1.1rem; }
.problem-num { display: block; font-size: 0.78rem; font-weight: 700; color: var(--gold-ink); letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.problem h3 { margin-bottom: 0.4rem; }
.problem p { color: var(--muted); font-size: 0.97rem; }

/* Services */
.service {
  background: var(--cream); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--radius);
  padding: 1.75rem; display: flex; flex-direction: column;
}
.section-alt .service { background: var(--cream); }
.service h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.service > p { color: var(--muted); font-size: 0.97rem; }
.service-terms {
  font-size: 0.9rem; color: var(--navy-700) !important;
  border-left: 2px solid var(--gold); padding-left: 0.85rem; margin-top: 1rem;
}
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0 0; padding: 0; }
.tags li {
  font-size: 0.76rem; font-weight: 500; color: var(--navy-700);
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.25rem 0.7rem;
}

/* Approach phases */
.phases {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.phase { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 1.1rem; }
.phase-num { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; }
.phase h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.phase p { color: var(--slate-300); font-size: 0.95rem; }

/* About */
.about-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  align-items: start;
}
.about-copy p { color: var(--muted); }
.credentials { list-style: none; margin: 0; padding: 0; }
.credential { display: flex; gap: 1.25rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.credential:first-child { border-top: 1px solid var(--line); }
.cred-year { flex: none; width: 4.7rem; font-size: 0.82rem; font-weight: 700; color: var(--gold-ink); padding-top: 0.15rem; }
.cred-content { display: flex; flex-direction: column; gap: 0.15rem; }
.cred-content strong { font-weight: 700; font-size: 0.97rem; }
.cred-content span { font-size: 0.88rem; color: var(--muted); }

/* Testimonials */
.quotes { margin-bottom: 3.5rem; }
.quote { margin: 0; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.quote blockquote { margin: 0 0 1.25rem; }
.quote blockquote p { font-size: 1.02rem; color: var(--text); }
.quote blockquote p::before { content: '“'; color: var(--gold); }
.quote blockquote p::after { content: '”'; color: var(--gold); }
.quote figcaption { display: flex; flex-direction: column; gap: 0.1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.quote figcaption strong { font-size: 0.94rem; }
.quote figcaption span { font-size: 0.85rem; color: var(--muted); }

.clients-title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--muted); margin-bottom: 1.25rem; }
.client-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.75rem; }
.client-list li {
  font-size: 0.9rem; font-weight: 500; color: var(--navy-700);
  border: 1px solid var(--line); background: var(--cream);
  border-radius: var(--radius); padding: 0.5rem 1rem;
}

/* Contact */
.contact-band { text-align: center; }
.contact-inner .headline, .contact-inner .lead { margin-inline: auto; }
.contact-inner .lead-narrow { margin-bottom: 2rem; }
.contact-points { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-bottom: 1.25rem; }
.contact-point {
  display: inline-block; text-decoration: none; font-weight: 700;
  font-size: 1.05rem; color: var(--navy-900); background: var(--gold);
  padding: 0.85rem 1.6rem; border-radius: var(--radius);
}
.contact-point:hover { background: var(--gold-light); }
.contact-location { font-size: 0.88rem; color: var(--slate-400); }

/* ---------- Page head (privacy, errors) ---------- */

.page-head { background: var(--navy-900); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.page-head h1 { color: #fff; }
.page-head .lead { color: var(--slate-200); }
.page-head .note { color: var(--slate-400); font-size: 0.9rem; }

.prose { max-width: var(--measure); }
.prose h2 { font-size: 1.3rem; font-weight: 700; margin-top: 2.25rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--muted); }
/* Exclude buttons: .prose a is more specific than .btn-primary and was
   overriding its text colour, dropping the contrast on the gold fill. */
.prose a:not(.btn) { color: var(--navy-700); }

.error-page { min-height: 40vh; display: flex; align-items: center; }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-900); color: var(--slate-300); padding: 2.5rem 0 1.75rem; font-size: 0.9rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.footer-copy { margin: 0; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.footer-links a { color: var(--slate-200); text-decoration: none; }
.footer-links a:hover { color: var(--gold); text-decoration: underline; }
.footer-note { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.footer-note p { font-size: 0.82rem; color: var(--slate-400); margin: 0; }

/* ---------- Navigation additions ---------- */

/* Where a link leaves the reader's language, say so in words rather than with
   a badge — badges next to every Danish menu item read as an error. */
.card-lang { color: var(--muted); font-style: italic; }
.band-dark .card-lang { color: var(--slate-400); }
.site-nav ul { gap: 1.15rem; }
.site-nav a { font-size: 0.87rem; }

@media (max-width: 1100px) and (min-width: 901px) {
  .site-nav ul { gap: 0.85rem; }
  .site-nav a { font-size: 0.82rem; }
}

/* ---------- Breadcrumbs ---------- */

.breadcrumbs { background: var(--navy-800); font-size: 0.83rem; }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0.7rem 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.4rem; color: var(--slate-300); }
.breadcrumbs li + li::before { content: '/'; color: var(--slate-400); opacity: 0.6; }
.breadcrumbs a { color: var(--slate-200); text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold); text-decoration: underline; }
.breadcrumbs [aria-current] { color: #fff; }

/* ---------- Guides ---------- */

.guide-wrap { max-width: 46rem; }
.guide-head { background: var(--navy-900); color: #fff; padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem); }
.guide-head h1 { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
.guide-meta { color: var(--slate-400); font-size: 0.87rem; margin: 0; }
.guide .wrap.guide-wrap { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* The direct-answer box. Sits first so both a hurried human and an answer
   engine get the conclusion before the argument. */
.answer-box {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  padding: 1.4rem 1.6rem; margin-bottom: 2rem;
}
.answer-box h2 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 700; color: var(--gold-ink); margin-bottom: 0.6rem;
}
.answer-box p { margin: 0; font-size: 1.03rem; }

.toc {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; margin-bottom: 2.25rem;
}
.toc h2 {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.15em;
  font-weight: 700; color: var(--muted); margin-bottom: 0.6rem;
}
.toc ol { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 0.94rem; }
.toc a { color: var(--navy-700); text-decoration: none; }
.toc a:hover { color: var(--gold); text-decoration: underline; }

.guide-body h2 { font-size: 1.55rem; font-weight: 500; margin-top: 2.5rem; letter-spacing: -0.02em; }
.guide-body h3 { font-size: 1.12rem; margin-top: 1.75rem; }
.guide-body p, .guide-body li { color: var(--muted); }
.guide-body strong { color: var(--text); font-weight: 700; }
.guide-body ul, .guide-body ol { padding-left: 1.2rem; display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
.guide-body a { color: var(--navy-700); text-decoration-color: var(--gold); }
.guide-body a:hover { color: var(--gold); }

.table-scroll { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; background: var(--surface); }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--cream-dark); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--muted); }
td.row-head { color: var(--text); font-weight: 500; }

.faq { margin-top: 3rem; border-top: 2px solid var(--navy-900); padding-top: 1.5rem; }
.faq h2 { font-size: 1.4rem; font-weight: 500; margin-bottom: 1.25rem; }
.faq dl { margin: 0; display: grid; gap: 1.4rem; }
.faq dt { font-weight: 700; margin-bottom: 0.35rem; }
.faq dd { margin: 0; color: var(--muted); }

.related { margin-top: 3rem; }
.related h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }

.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.guide-list a {
  display: block; text-decoration: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.35rem;
  transition: border-color 0.15s ease;
}
.guide-list a:hover { border-color: var(--gold); }
.guide-list strong { display: block; font-size: 1.05rem; margin-bottom: 0.3rem; }
.guide-list span { display: block; color: var(--muted); font-size: 0.94rem; }
.guide-list-meta { margin-top: 0.5rem; font-size: 0.8rem !important; color: var(--muted) !important; }
.guide-list-lg a { padding: 1.5rem 1.6rem; }
.guide-list-lg strong { font-size: 1.2rem; }

/* ---------- Replacement service phases ---------- */

.phase-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: phase; }
.phase-step {
  display: flex; gap: 1.5rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem;
}
.phase-step-num {
  flex: none; font-size: 1.6rem; font-weight: 500; color: var(--gold-ink);
  line-height: 1; width: 2.5rem; letter-spacing: -0.03em;
}
.phase-step-body h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.phase-step-body > p { color: var(--muted); }
.phase-output {
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line);
  font-size: 0.92rem; color: var(--navy-700) !important;
}

.case-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--navy-700); border-radius: var(--radius); padding: 1.75rem;
}
.case-panel p { color: var(--muted); }
.case-note { margin-top: 1rem; font-style: italic; }

/* ---------- Vision page ---------- */

.check-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.check-list li { position: relative; padding-left: 1.6rem; color: var(--muted); font-size: 0.96rem; }
.check-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--gold-ink); font-weight: 700;
}
.check-list-light li::before, .band-dark .check-list li::before { color: var(--gold); }
.check-list-light li { color: var(--slate-200); }
.band-dark .check-list { max-width: var(--measure); }

.pull-quote {
  font-size: 1.15rem; line-height: 1.55; color: var(--text);
  border-left: 3px solid var(--gold); padding-left: 1.25rem;
}
.solution-closing { margin-top: 1.75rem; font-size: 1.1rem; font-weight: 500; }
.stats-grid-light .stat-value { color: var(--navy-700); }
.stats-grid-light .stat-label { color: var(--muted); }

/* ---------- References stories ---------- */

.stories { display: grid; gap: 1.25rem; }
.story {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--radius); padding: 1.75rem;
}
.story-sector {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.13em;
  font-weight: 700; color: var(--gold-ink); margin-bottom: 0.6rem;
}
.story h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.65rem; }
.story p { color: var(--muted); max-width: var(--measure); }

/* ---------- Home: explore cards ---------- */

.explore-grid { margin-top: 0.5rem; }
.explore-card {
  display: block; text-decoration: none; position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.75rem;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.explore-card:hover { border-color: var(--gold); }
.explore-card h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.explore-card p { color: var(--muted); font-size: 0.96rem; margin: 0; }
.explore-more { position: absolute; top: 1.6rem; right: 1.75rem; color: var(--gold-ink); font-size: 1.1rem; }

.contact-point-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.contact-point-ghost:hover { background: transparent; border-color: var(--gold); color: var(--gold); }

.client-list li a { text-decoration: none; color: var(--navy-700); }
.client-list li:has(a):hover { border-color: var(--gold); }

.related-title { margin-top: 2.5rem; }
.problem-closing { margin-top: 2.5rem; }

/* ---------- "Why building is realistic now" ---------- */

.viability-grid {
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .viability-grid { grid-template-columns: 1fr; } }

.viability-note {
  background: var(--navy-900); color: var(--slate-200);
  border-radius: var(--radius); padding: 1.6rem 1.75rem;
  border-left: 4px solid var(--gold);
}
.viability-note p { font-size: 0.98rem; }
.viability-note .actions { margin-top: 1.25rem; }
.viability-note .btn-ghost { border-color: rgba(255, 255, 255, 0.35); color: #fff; font-size: 0.88rem; padding: 0.6rem 1.1rem; }
.viability-note .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

/* ---------- Verdict scorecard ----------
   Status colour is semantic and deliberately separate from the gold accent,
   so "recommended" versus "not yet" reads at a glance without competing with
   the brand. */

.verdict {
  --verdict: var(--slate-400);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--verdict);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.75rem;
}
.verdict-adopt   { --verdict: #2E7D5B; }
.verdict-caveats { --verdict: #94661A; }
.verdict-partial { --verdict: #A9662E; }
.verdict-not-yet { --verdict: #9A4633; }

.verdict-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin-bottom: 1.1rem; }
.verdict-pill {
  flex: none; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--verdict);
  border-radius: 3px; padding: 0.28rem 0.6rem;
}
.verdict-summary { margin: 0; font-size: 1.02rem; font-weight: 500; color: var(--text); flex: 1 1 16rem; }

.verdict-grid {
  margin: 0; display: grid; gap: 0.85rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid var(--line); padding-top: 1.1rem;
}
.verdict-grid > div { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.verdict-grid dt {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted);
}
.verdict-grid dd { margin: 0; font-size: 0.92rem; color: var(--text); overflow-wrap: break-word; }

.verdict-disclosure {
  margin: 1.1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.84rem; font-style: italic; color: var(--muted);
}

/* ---------- Cluster scorecard ---------- */

.scorecard { margin-bottom: 2rem; }
.scorecard td { font-size: 0.88rem; }
.scorecard .row-head a { color: var(--navy-700); font-weight: 700; text-decoration-color: var(--gold); }
.scorecard .row-head a:hover { color: var(--gold); }

.status-dot {
  --verdict: var(--slate-400);
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.8rem; font-weight: 700; color: var(--verdict); white-space: nowrap;
}
.status-dot::before {
  content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--verdict); flex: none;
}
.status-adopt   { --verdict: #2E7D5B; }
.status-caveats { --verdict: #94661A; }
.status-partial { --verdict: #A9662E; }
.status-not-yet { --verdict: #9A4633; }

/* The EN badge appears on navy in the header and on a white card on the home
   page; gold only has the contrast for the first. */

/* Decorative quote marks, dimmed rather than accented, so they do not read as
   low-contrast text. */
.quote blockquote p::before, .quote blockquote p::after { color: var(--gold-ink); }

.definition-note {
  margin-top: 1.25rem; max-width: var(--measure);
  font-size: 0.94rem; color: var(--muted);
  border-left: 3px solid var(--gold-ink); padding-left: 1rem;
}

/* ---------- Home: the ServiceNow band ----------
   Sits directly below the stats, before the general narrative, because it is
   the most specific thing on offer. Given the raised navy so it reads as its
   own proposition rather than as part of the hero. */

.servicenow-band {
  /* Alternates with the stats strip above (navy-800) so the two dark bands
     read as separate sections rather than one long block. */
  background: var(--navy-900);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.sn-points { margin-top: 0.5rem; }
.sn-point { border-top: 2px solid rgba(255, 255, 255, 0.18); padding-top: 1.1rem; }
.sn-point-num {
  display: block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.5rem;
}
.sn-point h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: #fff; }
.sn-point p { color: var(--slate-300); font-size: 0.96rem; }
.sn-note {
  margin-top: 1.75rem; max-width: var(--measure);
  font-size: 0.9rem; color: var(--slate-300);
  border-left: 3px solid var(--gold); padding-left: 1rem;
}

/* ---------- Code blocks in guides ----------
   Markdown fences render as pre > code. Without the scroll container a long
   line pushes the whole page sideways on a phone. */

.guide-body pre {
  overflow-x: auto;
  background: var(--navy-900);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
  -webkit-overflow-scrolling: touch;
}
.guide-body pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--slate-200);
  white-space: pre;
}
.guide-body :not(pre) > code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  color: var(--navy-900);
}

/* ---------- Photographs ----------
   Every slot is optional. When a photo is absent the containing layout keeps
   its original single-column form, so the page never shows a gap where an
   image was meant to be. */

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

.about-grid-photo {
  grid-template-columns: minmax(0, 300px) minmax(0, 1.4fr) minmax(0, 1.1fr);
}
@media (max-width: 1080px) {
  .about-grid-photo { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .about-grid-photo .credentials { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .about-grid-photo { grid-template-columns: 1fr; }
}

.portrait { margin: 0; }
.portrait-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  /* A hairline rather than a shadow: the photographs have light backgrounds
     and need a defined edge against cream more than they need lift. */
  border: 1px solid var(--line);
}
.band-dark .portrait-img { border-color: rgba(255, 255, 255, 0.16); }

.section-figure { margin: 0 0 2.25rem; }
.section-figure-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (min-width: 861px) {
  .section-figure-img { aspect-ratio: 21 / 9; }
}

/* The language switch sits in the header actions at most widths, and moves
   into the menu on the narrowest screens where the actions row has no room. */
.nav-lang-mobile { display: none; }
@media (max-width: 560px) {
  .nav-lang-mobile { display: block; }
  .nav-lang-mobile .nav-top { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 0.4rem; }
}

/* ---------- Services page ---------- */

.offerings { display: grid; gap: 1.25rem; }
.offering {
  display: flex;
  gap: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.75rem;
  scroll-margin-top: 6rem;
}
.offering-num {
  flex: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gold-ink);
  line-height: 1;
  width: 2.3rem;
  letter-spacing: -0.03em;
}
.offering-body { min-width: 0; }
.offering h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.offering-lead { font-size: 1.03rem; font-weight: 550; color: var(--text); margin-bottom: 0.85rem; }
.offering p { color: var(--muted); max-width: var(--measure); }
.offering-terms {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--navy-700) !important;
}
@media (max-width: 640px) {
  .offering { flex-direction: column; gap: 0.5rem; padding: 1.4rem; }
  .offering-num { width: auto; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; }
}

/* ---------- The European band, and pull-quotes ----------
   Used on the home page and on the vision page. Both sit on the navy band,
   so the colours here are the light-on-dark set; a pull-quote on a light
   ground would need its own rule, and there is not one yet. */

.europe-band {
  background: var(--navy-900);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.pull-quote {
  margin: 2.25rem 0 1.75rem;
  max-width: var(--measure);
  border-left: 3px solid var(--gold);
  padding-left: 1.35rem;
}
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  line-height: 1.5;
  color: #fff;
  font-style: italic;
  max-width: none;
}
.pull-quote figcaption {
  margin-top: 0.75rem;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  /* slate-300 rather than slate-400 so the attribution clears AA at this
     size against navy-900. */
  color: var(--slate-300);
}

.eu-figures { margin-top: 2.5rem; }
.eu-figure { border-top: 2px solid rgba(255, 255, 255, 0.18); padding-top: 1.1rem; }
.eu-figure p.eu-figure-value {
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem);
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.55rem;
}
.eu-figure h3 {
  font-size: 1.05rem;
  font-weight: 550;
  margin-bottom: 0.45rem;
  color: #fff;
}
.eu-figure p { color: var(--slate-300); font-size: 0.96rem; }

/* Closing line under a dark band: the sentence the section is actually for,
   so it is set larger than the body around it. */
.band-closing {
  margin-top: 2rem;
  max-width: var(--measure);
  font-size: 1.05rem;
  color: var(--slate-200);
}