/*
 * Visual direction: a light page carried by dark blue and light blue,
 * with orange as a spark. Loaded after refine.css.
 * Orange is decorative or large only (numbers, quote marks, dots, lines):
 * it never carries small text, where it would not be readable.
 */

:root {
  --orange: #e8833a; /* decoration */
  --orange-strong: #c25e14; /* large text, 4:1 on the beige */
  --brand-blue: #1e78c8; /* the logo blue */
}
html:not(.dark-theme) {
  --ink: #0e2747; /* dark blue: headings, body ink, buttons */
  --muted: #4a5d74;
  --panel-back: #e5eef8; /* light blue: highlighted blocks */
  --panel-back-line: #cbdcef;
}

/* ---------- Home: opening ---------- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  text-align: left;
  padding-top: clamp(40px, 6vw, 88px);
}
.intro:before {
  display: none;
}
.intro .eyebrow {
  justify-content: flex-start;
}
.intro h1 {
  font-size: clamp(42px, 4.6vw, 66px);
  line-height: 1.04;
}
.intro-description,
html:not(.dark-theme) .intro-description {
  margin: 24px 0 0;
  max-width: 32em;
}
.intro-actions {
  justify-content: flex-start;
}
.status-dot,
html:not(.dark-theme) .status-dot {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgb(232 131 58 / 0.18);
}

/* Orange highlight under the italic words of the main headings. */
.intro h1 em,
.page-hero h1 em,
.big-quote em {
  background-image: linear-gradient(
    transparent 84%,
    rgb(232 131 58 / 0.55) 84%,
    rgb(232 131 58 / 0.55) 90%,
    transparent 90%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.04em;
}

/* ---------- Home: expertise cards in varied colours ---------- */
.intro + .expertises {
  padding-top: clamp(64px, 8vw, 112px);
}
html:not(.dark-theme) .flip-card--navy .flip-front {
  background: var(--ink);
  border-color: var(--ink);
}
html:not(.dark-theme) .flip-card--navy .flip-front:before {
  opacity: 0;
}
html:not(.dark-theme) .flip-card--navy .card-title {
  color: #faf7f0;
}
html:not(.dark-theme) .flip-card--navy .card-meta,
html:not(.dark-theme) .flip-card--navy .card-front-footer {
  color: #c3d3e6;
}
html:not(.dark-theme) .flip-card--navy .card-meta > span:first-child {
  color: #ffc48f;
}
html:not(.dark-theme) .flip-card--navy .card-meta > svg {
  color: #8cc8ff;
}
html:not(.dark-theme) .flip-card--navy .flip-corner {
  border-color: #3b5a85;
  color: #fff;
}
html:not(.dark-theme) .flip-card--navy .flip-front:hover .flip-corner {
  background: #1b3a63;
}
html:not(.dark-theme) .flip-card--navy .diagram-line {
  stroke: #4d74a3;
}
html:not(.dark-theme) .flip-card--navy .node-soft {
  fill: #17345c;
  stroke: #4d74a3;
}
html:not(.dark-theme) .flip-card--navy .node-blue {
  fill: var(--brand-blue);
  stroke: #8cc8ff;
}
html:not(.dark-theme) .flip-card--navy .diagram-ink {
  stroke: #fff;
}
html:not(.dark-theme) .flip-card--navy .signal-pulse {
  stroke: var(--orange);
}
html:not(.dark-theme) .flip-card--navy [data-spotlight]::after,
html:not(.dark-theme) .flip-card--navy .flip-front::after {
  background: radial-gradient(
    320px circle at var(--sx, 50%) var(--sy, 50%),
    rgb(140 200 255 / 0.16),
    transparent 65%
  );
}
html:not(.dark-theme) .flip-card--sky .flip-front {
  background: var(--panel-back);
  border-color: var(--panel-back-line);
}
html:not(.dark-theme) .flip-card--sky .flip-front:before {
  opacity: 0;
}
html:not(.dark-theme) .flip-card--sky .node-soft,
html:not(.dark-theme) .flip-card--sky .sheet {
  fill: #fdfbf6;
}

/* ---------- Home: big quote ---------- */
.big-quote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 36px);
  margin: 0 auto;
  padding-top: clamp(64px, 8vw, 120px);
}
.big-quote-mark {
  font: clamp(120px, 14vw, 200px) / 0.72 var(--serif);
  color: var(--orange);
}
.big-quote blockquote {
  margin: 0;
  max-width: 20em;
  font: clamp(30px, 3.8vw, 54px) / 1.1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.big-quote blockquote em {
  font-size: 1em;
  color: var(--brand-blue);
}
.big-quote figcaption {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin-top: 20px;
  font-size: var(--fs-body);
  color: var(--muted);
}

/* ---------- Shared accents ---------- */
html:not(.dark-theme) body {
  color: var(--ink);
}
.explore-link {
  border-top: 2px solid var(--ink);
}
html.dark-theme .explore-link {
  border-top-color: var(--line);
}
.step-number,
.value-number,
html:not(.dark-theme) .founder-initial {
  color: var(--orange-strong);
}
html.dark-theme .step-number,
html.dark-theme .value-number {
  color: #f2a65a;
}
.issue-piste,
.case-situation,
.editorial-note {
  border-left-color: var(--orange);
}
.editorial-note {
  border-left-width: 2px;
}
.inline-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.header nav a[aria-current="page"],
html:not(.dark-theme) .header nav a[aria-current="page"] {
  border-bottom: 2px solid var(--orange);
}
.scroll-progress {
  background: var(--orange);
}

/* Buttons: dark blue, with an orange arrow. */
html:not(.dark-theme) .button-dark,
html:not(.dark-theme) .button-lime {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
html:not(.dark-theme) .button:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
html:not(.dark-theme) .button:active {
  background: #0a1c33;
}
.button-dark svg,
.button-lime svg {
  color: #ffb27a;
}
html:not(.dark-theme) .button:hover svg {
  color: #fff;
}
html:not(.dark-theme) .nav-contact {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
html:not(.dark-theme) .nav-contact svg {
  color: #ffb27a;
}
html:not(.dark-theme) .nav-contact:hover {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}

/* Light blue blocks get a matching light blue edge. */
html:not(.dark-theme) .page-cta,
html:not(.dark-theme) .demo-invitation,
html:not(.dark-theme) .founders {
  border-color: var(--panel-back-line);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .intro {
    grid-template-columns: 1fr;
  }
  .intro-visual svg {
    max-width: 340px;
  }
}
@media (max-width: 600px) {
  .intro {
    text-align: left;
  }
  .intro-visual svg {
    max-width: 260px;
  }
  .big-quote {
    grid-template-columns: 1fr;
  }
  .big-quote-mark {
    font-size: 110px;
    line-height: 0.6;
  }
  .big-quote figcaption {
    grid-column: 1;
  }
}

/* ---------- Inner pages: one dark blue moment per page ---------- */
html:not(.dark-theme) .editorial-band {
  background: var(--ink);
  color: #faf7f0;
  border: 0;
  border-radius: 16px;
  padding: clamp(32px, 5vw, 64px);
  margin-block: clamp(40px, 5vw, 72px);
}
html:not(.dark-theme) .editorial-band h2 {
  color: #faf7f0;
}
html:not(.dark-theme) .editorial-band em {
  color: #8cc8ff;
}
html:not(.dark-theme) .editorial-band p {
  color: #c3d3e6;
}
html:not(.dark-theme) .editorial-band .inline-link {
  color: #a9d3ff;
}
html.dark-theme .card-back-top {
  color: #8fb3d8;
}
@media (max-width: 600px) {
  .intro-actions {
    align-items: flex-start;
  }
  .intro-visual svg {
    max-width: 300px;
  }
}

/* =========================================================
 * White background (replaces the beige). Cool, very light
 * blue-grey surfaces; dark blue, light blue and orange stay.
 * ========================================================= */
html:not(.dark-theme) {
  --night: #ffffff;
  --panel: #f6f9fc;
  --panel-back: #eef4fb;
  --panel-back-line: #d6e3f2;
  --line: #e2e8f0;
  --surface-dialog: #ffffff;
}
html:not(.dark-theme) .header {
  background: #ffffffed;
  border-color: var(--line);
}
html:not(.dark-theme) .flip-front {
  background: #f6f9fc;
  border-color: var(--line);
}
html:not(.dark-theme) .flip-back {
  background: #eef4fb;
  border-color: var(--panel-back-line);
}
html:not(.dark-theme) .card-more {
  border-color: var(--panel-back-line);
}
html:not(.dark-theme) dialog {
  border-color: var(--line);
  box-shadow: 0 30px 110px #0e274724;
}
html:not(.dark-theme) dialog::backdrop {
  background: #0e274759;
}
html:not(.dark-theme) .contact-form input,
html:not(.dark-theme) .contact-form textarea,
html:not(.dark-theme) .contact-form select,
html:not(.dark-theme) .contact-form select option,
html:not(.dark-theme) .demo-option {
  background-color: #ffffff;
}
html:not(.dark-theme) .demo-content {
  background: #f6f9fc;
  border-color: var(--line);
}
html:not(.dark-theme) .demo-progress i {
  background: #dfe7f1;
}

/* ---------- Home: four expertises, readable at a glance ---------- */
.expertises > h2 {
  max-width: 18em;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.expertise-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin: 40px 0 0;
  padding: 0;
}
.expertise {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.expertise > svg {
  width: 28px;
  height: 28px;
  color: var(--brand-blue);
}
.expertise-name {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--blue-ink);
}
.expertise-name span {
  color: var(--orange-strong);
}
.expertise h3 {
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.expertise p {
  font-size: 15px;
  line-height: 1.6;
}
.expertise .inline-link {
  margin-top: auto;
  padding: 0;
  background: none;
}
html.dark-theme .expertise {
  border-top-color: var(--line);
}
@media (max-width: 1000px) {
  .expertise-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .expertise-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
/* Small orange numbers need a deeper tone to stay readable (5:1). */
.expertise-name span {
  color: #b4500f;
}
html.dark-theme .expertise-name span {
  color: #f2a65a;
}

/* =========================================================
 * Home = the opening only: the text on the left, the site map
 * as the heart of the page, large and slightly to the right.
 * ========================================================= */
.intro {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 3vw, 48px);
  min-height: calc(100svh - 92px);
  padding-block: clamp(32px, 5vw, 72px);
}
.intro h1 {
  font-size: clamp(38px, 3.6vw, 58px);
}
@media (max-width: 900px) {
  .intro {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
}
@media (max-width: 600px) {
  .intro h1 {
    font-size: clamp(32px, 9vw, 40px);
  }
}