@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Brand palette: purple is the one accent, gold is ornament only. */
  --paper: #fbfaf9;
  --paper-raised: #ffffff;
  --paper-tint: #f4eff6;
  --ink: #1b1820;
  --ink-soft: #4b4552;
  --line: #ddd5e0;
  --line-strong: #b9aebf;
  --accent: #52195d;
  --accent-strong: #52195d;
  --accent-hover: #3b1144;
  --on-accent: #ffffff;
  --gold: #b8903a;
  --logo-plate: transparent;
  --focus: #52195d;
  --shadow: 0 1px 2px rgba(27, 24, 32, 0.06), 0 12px 32px rgba(27, 24, 32, 0.06);

  --display: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
  --radius: 6px;
  --shell: min(1180px, calc(100vw - 48px));
  --measure: 66ch;
  --measure-lead: 34em;

  --text-small: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --text-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --text-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #130f16;
  --paper-raised: #1c1721;
  --paper-tint: #231b29;
  --ink: #f4f0f6;
  --ink-soft: #bdb4c4;
  --line: #372d3f;
  --line-strong: #5b4d66;
  --accent: #d6aee1;
  --accent-strong: #d6aee1;
  --accent-hover: #e8cff0;
  --on-accent: #1d0f23;
  --gold: #d2ae5e;
  --logo-plate: #ffffff;
  --focus: #e8cff0;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
}

/* The same tokens, for a visitor whose system asks for dark and who has not chosen a
   theme on this site. Without this a system-dark visitor gets the light theme on first
   load while <meta name="color-scheme" content="light dark"> already draws the browser
   controls dark. The declarations must stay byte-identical to the block above;
   tests/content.test.ts asserts it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #130f16;
    --paper-raised: #1c1721;
    --paper-tint: #231b29;
    --ink: #f4f0f6;
    --ink-soft: #bdb4c4;
    --line: #372d3f;
    --line-strong: #5b4d66;
    --accent: #d6aee1;
    --accent-strong: #d6aee1;
    --accent-hover: #e8cff0;
    --on-accent: #1d0f23;
    --gold: #d2ae5e;
    --logo-plate: #ffffff;
    --focus: #e8cff0;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.3);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

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

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

button {
  font: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
blockquote,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.15;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
}

p {
  max-width: var(--measure);
  text-wrap: pretty;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

/* Buttons */
.button {
  display: inline-flex;
  min-height: 48px;
  padding: 0 var(--space-6);
  align-items: center;
  justify-content: center;
  border: 2px solid var(--accent-strong);
  border-radius: var(--radius);
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.header-inner {
  display: flex;
  width: var(--shell);
  min-height: 76px;
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-3);
  color: var(--ink);
  text-decoration: none;
}

.logo-chip {
  display: block;
  padding: 3px 5px;
  border-radius: 4px;
  background: var(--logo-plate);
  line-height: 0;
}

.logo-chip img {
  width: 64px;
  height: auto;
}

.brand-name {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.header-actions,
.primary-nav,
.nav-list {
  display: flex;
  align-items: center;
}

.header-actions {
  gap: var(--space-4);
}

.nav-list {
  margin: 0;
  padding: 0;
  gap: var(--space-1);
  list-style: none;
}

.nav-list > li {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-list a {
  display: flex;
  min-height: 44px;
  padding: 0 var(--space-3);
  align-items: center;
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--accent);
}

.nav-list a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

.sub-toggle {
  display: flex;
  width: 44px;
  height: 44px;
  margin-left: -12px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.sub-toggle::before {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
  content: "";
}

.sub-list {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  list-style: none;
  visibility: hidden;
}

/* No :focus-within here: it would hold the menu open after Escape while focus stays on the toggle. */
.has-sub:hover > .sub-list,
.has-sub > .sub-list[data-open="true"] {
  visibility: visible;
}

.menu-toggle {
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
}

/* Theme control: a 44 by 44 icon button, the moon in light and the sun in dark. Both icons
   occupy the same 20 by 20 box, so toggling never shifts the header. The theme attribute picks
   the icon, so the right one shows before any script runs. */
.theme-toggle {
  display: inline-flex;
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--accent);
}

.theme-toggle svg {
  display: block;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

.menu-toggle {
  display: none;
}

/* Hero */
/* Full-width photograph band. The text sits over a left-to-right gradient that is solid enough
   behind the text (alpha stops below) for 4.5:1 against the lightest photograph pixel, and
   fully clear before her face. Text colours here are fixed, so both themes read the same. */
.hero {
  position: relative;
  display: flex;
  min-height: clamp(520px, 78vh, 820px);
  padding: var(--space-12) 0;
  align-items: center;
  overflow: hidden;
  background: #1c120d;
}

.hero-photo,
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-photo img {
  left: 8%;
  object-fit: cover;
  object-position: 50% 12%;
}

.hero::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgb(14, 9, 8) 0%,
    rgb(14, 9, 8) 8%,
    rgba(14, 9, 8, 0.82) 20%,
    rgba(14, 9, 8, 0.5) 34%,
    rgba(14, 9, 8, 0) 48%
  );
  content: "";
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  max-width: min(560px, calc(41% - (100% - var(--shell)) / 2));
  margin-left: calc((100% - var(--shell)) / 2);
  gap: var(--space-4);
  justify-items: start;
  color: #ffffff;
}

.hero-copy h1 {
  font-size: clamp(2rem, 1.1rem + 2.5vw, 3.25rem);
}

.hero-lede {
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  line-height: 1.5;
}

.hero-copy .button {
  margin-top: var(--space-2);
  border-color: #ffffff;
  background: #ffffff;
  color: #1b1820;
}

.hero-copy .button:hover {
  border-color: #efe3f2;
  background: #efe3f2;
}

.hero-copy a:focus-visible {
  outline-color: #ffffff;
}

.hero-id {
  display: grid;
  margin-top: var(--space-2);
  gap: var(--space-1);
}

/* Name and title form one signature block at body size in the surrounding text colour. */
.person-name {
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.4;
}

.person-title {
  color: inherit;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
}

/* Sections */
.section {
  width: var(--shell);
  margin: 0 auto;
  padding: 0 0 var(--space-24);
}

.section-head {
  display: grid;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}

.service-grid {
  display: grid;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.service-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Photograph first, edge to edge; the credit sits directly under it, then the title and arrow. */
.card-photo {
  order: 0;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.photo-credit {
  display: block;
  color: var(--ink-soft);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.4;
}

.service-card .photo-credit {
  order: 1;
  min-height: calc(2.625rem + var(--space-2));
  padding: var(--space-2) var(--space-6) 0;
}

/* The Speak card has no credit; keep its title level with the others. */
.card-photo + .card-title {
  margin-top: calc(2.625rem + var(--space-2));
}

.card-title {
  order: 2;
  flex: 1;
  padding: var(--space-4) var(--space-6) 0;
}

.service-card::after {
  order: 3;
  padding: var(--space-4) var(--space-6) var(--space-6);
  color: var(--accent);
  content: "\2192";
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}

.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.55;
}

.hero + .section {
  padding-top: var(--space-12);
}

.intro {
  padding-bottom: var(--space-12);
}

.intro p {
  max-width: var(--measure-lead);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(32px, 6vw, 88px);
}

.band {
  padding: var(--space-24) 0;
  background: var(--paper-tint);
}

.band .section {
  padding-bottom: 0;
}

.result-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.result-group {
  display: grid;
  padding: var(--space-8);
  align-content: start;
  gap: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.result-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-4);
  list-style: none;
}

.result-list li {
  position: relative;
  padding-left: var(--space-6);
}

.result-list li::before {
  position: absolute;
  top: 0.6em;
  left: 2px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--gold);
  content: "";
}

/* The credibility line is a statement in its own band, not a label for the quotation below it. */
.credibility-band {
  padding: var(--space-12) 0;
  background: #52195d; /* the logo purple in both themes, like the hero's fixed colours */
  color: #ffffff;
}

.credibility-line {
  width: var(--shell);
  max-width: none;
  margin-inline: auto;
  font-family: var(--display);
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  text-wrap: balance;
}

.quotes-section {
  padding-top: var(--space-24);
}

/* One <figure class="quote"> per quotation; add more inside .quotes when Anna-Maria sends them. */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-6);
}

.quote {
  display: grid;
  max-width: 760px;
  padding-left: var(--space-6);
  gap: var(--space-4);
  border-left: 3px solid var(--gold);
}

.quote blockquote p {
  max-width: none;
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.5;
}

.quote figcaption {
  font-weight: 700;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--paper-tint);
}

.footer-inner {
  display: grid;
  width: var(--shell);
  margin-inline: auto;
  padding: var(--space-12) 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-8);
}

.footer-inner .logo-chip {
  justify-self: start;
}

.footer-inner .logo-chip img {
  width: 88px;
}

.footer-tagline {
  font-family: var(--display);
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.footer-about {
  display: grid;
  gap: var(--space-3);
}

.footer-links {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-1);
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

.footer-legal {
  display: grid;
  width: var(--shell);
  margin-inline: auto;
  padding: var(--space-4) 0 var(--space-8);
  gap: var(--space-1);
  color: var(--ink-soft);
  font-size: var(--text-small);
}

.footer-legal p {
  max-width: none;
}

.button-desktop {
  white-space: nowrap;
}

/* Between the mobile-menu breakpoint (900px) and full width the header is tight: keep every item on one line. */
@media (min-width: 901px) and (max-width: 1080px) {
  .header-inner {
    gap: var(--space-3);
  }

  .header-actions {
    gap: var(--space-2);
  }

  .brand {
    gap: var(--space-2);
  }

  .logo-chip img {
    width: 52px;
  }

  .brand-name {
    font-size: 1.0625rem;
  }

  .nav-list {
    gap: 0;
  }

  .nav-list a {
    padding: 0 var(--space-2);
  }

  .header-actions .button-desktop {
    padding: 0 var(--space-3);
  }
}

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

@media (max-width: 900px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
  }

  .header-inner {
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: 68px;
    padding: var(--space-2) 0;
  }

  .header-actions {
    display: contents;
  }

  .brand {
    margin-right: auto;
  }

  .theme-toggle {
    order: 1;
  }

  .menu-toggle {
    order: 2;
  }

  .header-actions .button-desktop {
    display: none;
  }

  .primary-nav {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    padding-bottom: var(--space-4);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .js .primary-nav[data-open="false"] {
    display: none;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list > li {
    display: block;
    border-top: 1px solid var(--line);
  }

  .nav-list a {
    min-height: 48px;
    padding: 0 var(--space-2);
    font-size: var(--text-body);
  }

  .sub-toggle {
    display: none;
  }

  .sub-list {
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-2) var(--space-6);
    border: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
  }

  .primary-nav .button {
    width: 100%;
  }

  /* Stacked: the photograph first at full width, then the text on the page surface. */
  .hero {
    display: block;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .hero::before {
    display: none;
  }

  .hero-photo,
  .hero-photo img {
    position: static;
    inset: auto;
  }

  .hero-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 520px;
    object-position: 50% 12%;
  }

  .hero-copy {
    width: var(--shell);
    max-width: none;
    margin: var(--space-8) auto 0;
    color: var(--ink);
  }

  .hero-copy .button {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
    color: var(--on-accent);
  }

  .hero-copy .button:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
  }

  .hero-copy a:focus-visible {
    outline-color: var(--focus);
  }

  .two-col,
  .result-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding-bottom: var(--space-16);
  }

  .hero + .section {
    padding-top: var(--space-8);
  }

  .quotes-section {
    padding-top: var(--space-16);
  }

  .credibility-band {
    padding: var(--space-8) 0;
  }

  .band {
    padding: var(--space-16) 0;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 901px) {
  .primary-nav .button-mobile {
    display: none;
  }

  /* The sticky header already shows "Start a conversation"; a second button on the same screen is removed. */
  .hero-copy .button,
  .page-cta:has(> .button[href="/contact"]:only-child) {
    display: none;
  }
}

@media (max-width: 600px) {
  :root {
    --shell: calc(100vw - 40px);
  }

  .service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-card {
    min-height: 0;
  }

  .result-group {
    padding: var(--space-6) var(--space-4);
  }

  .brand {
    min-width: 0;
    gap: var(--space-2);
  }

  .brand-name {
    font-size: 1rem;
  }

  .logo-chip img {
    width: 52px;
  }

  .menu-toggle {
    padding: 0 10px;
  }
}

@media (max-width: 400px) {
  .brand-name {
    font-size: 0.9375rem;
  }

  .logo-chip img {
    width: 44px;
  }

  .menu-toggle {
    padding: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}