/* ============================================
   Danijel Pevec — Design Tokens
   ============================================ */

:root {
  /* DARK (default) — Deep navy + champagne gold */
  --bg-0: #07101e;          /* deepest */
  --bg-1: #0a1628;          /* base */
  --bg-2: #0f1d33;          /* surface */
  --bg-3: #142847;          /* elevated */
  --line: rgba(201, 169, 97, 0.18);
  --line-strong: rgba(201, 169, 97, 0.42);
  --line-soft: rgba(255, 255, 255, 0.06);

  --ink-0: #f5f1e8;         /* headings */
  --ink-1: #e8e2d2;         /* body */
  --ink-2: #a8a99c;         /* muted */
  --ink-3: #6d6f66;         /* faint */

  --gold: #c9a961;          /* primary accent */
  --gold-bright: #f0d186;   /* hover */
  --gold-deep: #8a7340;     /* deep */
  --gold-soft: rgba(201, 169, 97, 0.12);

  --error: #c87a4a;          /* form validation */
  --gold-shine: linear-gradient(135deg, #e8c87a 0%, #f5dca0 35%, #c9a961 65%, #a88a48 100%);
  --gold-shine-hover: linear-gradient(135deg, #f5dca0 0%, #ffe8b8 35%, #e0c280 65%, #c9a961 100%);

  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 4vw, 56px);
}

[data-theme="light"] {
  --bg-0: #f5f1e8;
  --bg-1: #faf7ef;
  --bg-2: #ffffff;
  --bg-3: #f0ead9;
  --line: rgba(10, 22, 40, 0.14);
  --line-strong: rgba(10, 22, 40, 0.32);
  --line-soft: rgba(10, 22, 40, 0.06);

  --ink-0: #0a1628;
  --ink-1: #1a2b44;
  --ink-2: #4a5a6e;
  --ink-3: #8a96a5;

  --gold: #8a7340;
  --gold-bright: #6f5c30;
  --gold-deep: #5a4a26;
  --gold-soft: rgba(138, 115, 64, 0.10);

  --error: #b35a2a;          /* darker error tone for legibility on cream bg */

  --shadow-lg: 0 24px 60px rgba(10, 22, 40, 0.10);
  --shadow-md: 0 8px 32px rgba(10, 22, 40, 0.08);
}

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

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background 400ms ease, color 400ms ease;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Soft champagne highlight — like a gold marker pen, not an inverted block.
   Same visual feel in both themes: text stays in its natural colour while a
   light-gold tint reads behind it. */
::selection {
  background: rgba(240, 209, 134, 0.42);
  color: var(--ink-0);
}

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

.serif { font-family: var(--serif); font-weight: 400; }
.italic { font-style: italic; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink-0);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.lead {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-1);
  font-weight: 300;
}

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

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

section { position: relative; }

.section-pad {
  padding-top: clamp(80px, 12vw, 160px);
  padding-bottom: clamp(80px, 12vw, 160px);
}

.divider-rule {
  display: block;
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* ============================================
   Buttons
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: all 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  white-space: nowrap;
}

.btn-primary {
  /* Two stacked backgrounds: a soft cream radial glow that tracks the mouse
     (via JS-set --mx/--my) layered over the gold gradient. Defaults center
     the glow when the mouse hasn't entered yet. */
  background:
    radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(255, 250, 220, 0.45),
                    rgba(255, 250, 220, 0) 60%),
    var(--gold-shine);
  color: #1a1408;
  padding: 18px 30px;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
  box-shadow: 0 1px 0 rgba(255, 240, 200, 0.5) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 8px 24px rgba(201, 169, 97, 0.25);
  text-decoration: none;
  overflow: hidden;
}
.btn-primary:hover {
  background:
    radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%),
                    rgba(255, 250, 220, 0.55),
                    rgba(255, 250, 220, 0) 60%),
    var(--gold-shine-hover);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 248, 220, 0.7) inset, 0 -1px 0 rgba(0,0,0,0.1) inset, 0 12px 32px rgba(240, 209, 134, 0.4);
  color: #1a1408;
}
@media (prefers-reduced-motion: reduce) {
  /* Lock the glow to centre — no mouse tracking — for users who prefer
     reduced motion */
  .btn-primary, .btn-primary:hover {
    background:
      radial-gradient(180px circle at 50% 50%,
                      rgba(255, 250, 220, 0.45),
                      rgba(255, 250, 220, 0) 60%),
      var(--gold-shine);
  }
}
/* Visible keyboard focus ring — meets WCAG 2.4.7 (Focus Visible) */
.btn:focus-visible {
  outline: 2px solid var(--ink-0);
  outline-offset: 3px;
}

.btn-ghost {
  color: var(--ink-0);
  padding: 18px 30px;
  background: var(--bg-2);
}
.btn-ghost:hover {
  color: var(--gold);
  background: var(--bg-3);
}

.btn-link {
  padding: 0;
  background: none;
  border: none;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.btn-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 1px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 320ms ease;
}
.btn-link:hover::after { transform: scaleX(1); }
.btn-link .arrow { transition: transform 280ms ease; }
.btn-link:hover .arrow { transform: translateX(4px); }

/* ============================================
   Nav
   ============================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 320ms ease, border-color 320ms ease, padding 320ms ease, backdrop-filter 320ms ease;
  border-bottom: 1px solid transparent;
  padding: 22px 0;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  padding: 14px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  /* Reserve space for the wider Croatian brand-tag so the brand block
     occupies the same width regardless of language */
  min-width: 280px;
}
.brand-mono {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--gold);
  transition: all 320ms ease;
  position: relative;
}
.brand-mono::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--gold);
  opacity: 0.35;
  pointer-events: none;
}
.brand:hover .brand-mono { background: var(--gold-soft); }
/* Brand text column — fixed width and height so the brand block has the
   same footprint in EN ("Family Business Advisor") and HR ("Savjetnik za
   obiteljske tvrtke"). The HR tag wraps to two lines within this width. */
.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 220px;
  min-height: 42px;
}
.brand-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-0);
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
.brand-tag {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 4px;
  /* Force single line so EN ("FAMILY BUSINESS ADVISOR") and HR ("OBITELJSKI
     SAVJETNIK") render at the same height — no vertical layout shift on
     language switch. The brand-text width is sized to fit both. */
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}
/* Each link reserves min-width matching the longer of its EN/HR label so
   switching languages doesn't shift adjacent items. The inner span carries
   the underline so it tracks the text width, not the reserved width. */
.nav-link {
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-1);
  letter-spacing: 0.04em;
  position: relative;
  padding: 6px 0;
  transition: color 240ms ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nav-links > .nav-link:nth-child(1) { min-width: 75px; }   /* Approach / Pristup */
.nav-links > .nav-link:nth-child(2) { min-width: 140px; }  /* Who we work with / S kim radimo */
.nav-links > .nav-link:nth-child(3) { min-width: 95px; }   /* How we work / Kako radimo */
.nav-links > .nav-link:nth-child(4) { min-width: 70px; }   /* Insights / Uvidi */
.nav-links > .nav-link:nth-child(5) { min-width: 90px; }   /* Assessment / Procjena */
.nav-links > .nav-link:nth-child(6) { min-width: 65px; }   /* About / O meni */

.nav-link > span {
  position: relative;
  display: inline-block;
}
.nav-link > span::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms ease;
}
/* Fallback: if a nav-link has no inner span, draw underline on the link itself */
.nav-link:not(:has(> span))::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: max(60%, 50px);
  height: 1px;
  background: var(--gold);
  transform: translateX(-50%) scaleX(0);
  transform-origin: right;
  transition: transform 320ms ease;
}
.nav-link:hover { color: var(--ink-0); }
.nav-link:hover > span::after { transform: scaleX(1); transform-origin: left; }
.nav-link:not(:has(> span)):hover::after { transform: translateX(-50%) scaleX(1); transform-origin: left; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.toggle-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  background: var(--bg-2);
  transition: border-color 240ms ease;
}
.toggle-group:hover { border-color: color-mix(in oklab, var(--gold) 35%, var(--line)); }

.toggle-group button,
.toggle-group a {
  background: none;
  border: none;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink-2);
  border-radius: 999px;
  /* Property-specific transitions so the press transform can have its own
     bezier without affecting the color/background fades. */
  transition:
    color 240ms ease,
    background-color 280ms ease,
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 280ms ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  line-height: 1;
  /* Allow scale transform to use the box center */
  transform-origin: center;
}

/* Hover on the *inactive* option — preview the switch with a soft tint */
.toggle-group button:not(.active):hover,
.toggle-group a:not(.active):hover {
  color: var(--ink-0);
  background: color-mix(in oklab, var(--gold) 10%, transparent);
}

/* The selected option — solid gold with a subtle inset highlight + outer glow */
.toggle-group button.active,
.toggle-group a.active {
  background: var(--gold);
  color: var(--bg-0);
  box-shadow:
    0 1px 0 rgba(255, 240, 200, 0.45) inset,
    0 -1px 0 rgba(120, 90, 40, 0.18) inset,
    0 4px 14px rgba(201, 169, 97, 0.22);
}

/* Press feedback — gentle squeeze, snappier than the hover transition */
.toggle-group button:active,
.toggle-group a:active {
  transform: scale(0.94);
}

/* Keyboard focus — same gold ring shape as the active pill (a11y) */
.toggle-group button:focus-visible,
.toggle-group a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: grid;
  place-items: center;
  color: var(--ink-1);
  transition:
    border-color 240ms ease,
    color 240ms ease,
    background-color 240ms ease,
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.theme-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 6%, var(--bg-2));
}
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.nav-cta {
  padding: 10px 20px;
  font-size: 12px;
  /* Reserve width for the longer language ("Private conversation" vs
     "Privatni razgovor") so the button keeps the same footprint */
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  align-items: center;
  justify-content: center;
  color: var(--ink-1);
  transition:
    border-color 240ms ease,
    color 240ms ease,
    background-color 240ms ease,
    transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.menu-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: color-mix(in oklab, var(--gold) 6%, var(--bg-2));
}
.menu-btn:active { transform: scale(0.92); }
.menu-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Mobile nav drawer */
.mobile-drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 90vw);
  height: 100vh;
  background: var(--bg-1);
  border-left: 1px solid var(--line);
  padding: 100px 32px 40px;
  z-index: 60;
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer .nav-link {
  font-family: var(--serif);
  font-size: 26px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mobile-drawer .nav-link::after { display: none; }
.mobile-drawer-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.scrim.show { opacity: 1; pointer-events: auto; }

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

.hero {
  position: relative;
  padding-top: clamp(140px, 18vw, 220px);
  padding-bottom: clamp(80px, 12vw, 140px);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg::before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  top: -200px;
  right: -200px;
  background: radial-gradient(circle at center, var(--gold-soft), transparent 60%);
  opacity: 0.7;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}

.hero-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(48px, 8vw, 80px);
  flex-wrap: wrap;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
}
.hero-meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
}

.hero-headline {
  font-size: clamp(44px, 7.5vw, 116px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink-0);
  font-family: var(--serif);
}
.hero-headline .accent {
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}
.hero-headline .br { display: block; }

.hero-sub-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  margin-top: clamp(56px, 8vw, 96px);
  align-items: start;
}
.hero-sub {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink-1);
  font-weight: 300;
  max-width: 56ch;
}
.hero-cta-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.hero-cta-block .small {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.hero-marquee {
  margin-top: clamp(80px, 12vw, 140px);
  padding: 28px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-marquee .item {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--ink-2);
}
.hero-marquee .item .num {
  font-style: normal;
  color: var(--gold);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  margin-right: 14px;
}

/* ============================================
   Sections — generic
   ============================================ */

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: clamp(56px, 8vw, 96px);
}
.section-head h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.section-head h2 .accent {
  font-style: italic;
  color: var(--gold);
}

.two-col {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) 1.4fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.two-col .col-left { position: sticky; top: 110px; }

/* ============================================
   "Who I work with"
   ============================================ */

.who-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
.who-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 32px;
  padding: 28px 16px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
/* Hover only changes the background; padding stays put so siblings don't
   reflow and the gold-soft fill glides in without the previous left/right
   "jump". Extends .reveal's transition list so background animates too —
   matching specificity with .js-scroll-ready .reveal but coming later in
   source order to win the cascade. */
.js-scroll-ready .who-item.reveal {
  transition:
    opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.who-item:hover { background: var(--gold-soft); }
.who-item .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
}
.who-item .label {
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400;
  color: var(--ink-0);
  line-height: 1.25;
}

.disclaimer {
  margin-top: 56px;
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  position: relative;
}
.disclaimer::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: var(--gold);
}
.disclaimer p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--ink-1);
  line-height: 1.55;
}

/* ============================================
   Challenges
   ============================================ */

.challenges-section { background: var(--bg-2); }

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1280px) {
  .challenge-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .challenge-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .challenge-grid { grid-template-columns: 1fr; }
}
.challenge-card {
  background: var(--bg-2);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: background 280ms ease;
  min-height: 220px;
}
.challenge-card:hover { background: var(--bg-3); }
.challenge-card .ord {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.challenge-card h3 {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-0);
}

/* ============================================
   Approach
   ============================================ */

.approach-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.2;
  color: var(--ink-0);
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 22ch;
  position: relative;
  padding-left: 32px;
}
.approach-quote::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 1px;
  background: var(--gold);
}
.approach-quote .accent { color: var(--gold); font-style: italic; }

.approach-list {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}
.approach-list-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--ink-1);
  line-height: 1.5;
}
.approach-list-item .marker {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 18px;
}

.approach-coda {
  margin-top: 56px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.3;
  color: var(--gold);
  max-width: 28ch;
}

/* ============================================
   How we work
   ============================================ */

.howwework-section { background: var(--bg-1); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 24px;
}
.service-card {
  border: 1px solid var(--line);
  padding: 40px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--bg-2);
  position: relative;
  transition: all 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  min-height: 360px;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 480ms ease;
}
.service-card:hover {
  border-color: var(--gold);
  background: var(--bg-3);
  transform: translateY(-4px);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .num {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--gold);
  font-style: italic;
}
.service-card h3 {
  font-size: clamp(22px, 1.7vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink-0);
}
.service-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.service-card .glyph {
  margin-top: auto;
  color: var(--gold);
  opacity: 0.5;
}

.start-cta {
  margin-top: clamp(56px, 8vw, 80px);
  padding: clamp(40px, 6vw, 72px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.start-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, var(--gold-soft), transparent 50%);
  pointer-events: none;
}
.start-cta-text {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--ink-0);
  font-weight: 400;
  max-width: 26ch;
}
.start-cta-text .accent { color: var(--gold); font-style: italic; }

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

.about-section { background: var(--bg-1); position: relative; }
.about-section::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--line), transparent);
  pointer-events: none;
  display: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(48px, 6vw, 100px);
  align-items: start;
}
.about-card {
  border: 1px solid var(--line);
  padding: 48px 40px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 110px;
}
.about-portrait {
  aspect-ratio: 4/5;
  background:
    linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.about-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 35%, var(--gold-soft), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 4px, rgba(201, 169, 97, 0.04) 4px 5px);
}
.about-portrait .mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 120px);
  color: var(--gold);
  letter-spacing: 0.02em;
  font-weight: 400;
}
.about-portrait .mono::after {
  content: "";
  position: absolute;
  width: 64%;
  height: 1px;
  background: var(--gold);
  bottom: 28%;
  opacity: 0.5;
}

.about-card .name {
  font-family: var(--serif);
  font-size: clamp(24px, 2vw, 30px);
  color: var(--ink-0);
  line-height: 1.1;
}
.about-card .role {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.about-card .meta-list {
  display: grid;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.about-card .meta-list .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.about-card .meta-list .row .lbl {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-3);
}
.about-card .meta-list .row .val {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-1);
  text-align: right;
}

.about-text { display: grid; gap: 28px; }
.about-text p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--ink-1);
}
.about-text p.lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.4;
  color: var(--ink-0);
  font-weight: 400;
}
.about-text .pull {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  color: var(--gold);
  border-left: 1px solid var(--gold);
  padding-left: 24px;
  font-style: italic;
}

/* Alpha capitalis */
.alpha-block {
  margin-top: 48px;
  padding: 32px;
  border: 1px solid var(--line);
  background: var(--bg-0);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
}
.alpha-logo {
  width: 64px; height: 64px;
  border: 1px solid var(--gold);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  color: var(--gold);
  font-size: 22px;
  position: relative;
}
.alpha-logo::after {
  content: "α";
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold);
}
.alpha-text { display: grid; gap: 6px; }
.alpha-text .alpha-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink-0);
  letter-spacing: 0.04em;
}
.alpha-text .alpha-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
.alpha-link {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.alpha-link:hover { color: var(--gold-bright); }

/* ============================================
   Final CTA
   ============================================ */

.final-cta {
  text-align: center;
  padding: clamp(100px, 14vw, 180px) 0;
  background: var(--bg-0);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 1000px; height: 1000px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--gold-soft), transparent 60%);
  pointer-events: none;
}
.final-cta-content { position: relative; }
.final-cta h2 {
  font-size: clamp(40px, 6.5vw, 88px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin: 0 auto 32px;
}
.final-cta h2 .accent { font-style: italic; color: var(--gold); }
.final-cta p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--ink-2);
  margin-bottom: 48px;
}

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

.footer {
  padding: 80px 0 32px;
  border-top: 1px solid var(--line);
  background: var(--bg-0);
  font-size: 13px;
  color: var(--ink-2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer a { color: var(--ink-1); transition: color 200ms ease; }
.footer a:hover { color: var(--gold); }

.footer-brand .brand-name { font-size: 22px; }
.footer-brand p {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-3);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom .copy { letter-spacing: 0.04em; }
.footer-bottom .legal { display: flex; gap: 24px; }

/* ============================================
   Modal
   ============================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--bg-1);
  border: 1px solid var(--line);
  width: min(640px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(32px, 4vw, 56px);
  position: relative;
  transform: translateY(20px) scale(0.98);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: var(--shadow-lg);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink-1);
  display: grid;
  place-items: center;
  transition: all 240ms ease;
}
.modal-close:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: rotate(90deg);
}

.modal-eyebrow {
  margin-bottom: 14px;
}
.modal h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.modal h2 .accent { font-style: italic; color: var(--gold); }
.modal-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  margin-bottom: 36px;
  line-height: 1.5;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}
.field label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field label .req { color: var(--gold); }
.field input, .field textarea, .field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  color: var(--ink-0);
  font-family: var(--sans);
  font-size: 16px;
  outline: none;
  transition: border-color 240ms ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--gold);
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--ink-3);
  font-family: var(--serif);
  font-style: italic;
}
.field.error input, .field.error textarea, .field.error select {
  border-color: var(--error);
}
.field .err {
  font-size: 11px;
  color: var(--error);
  letter-spacing: 0.08em;
  font-style: italic;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.modal-foot .note {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  font-family: var(--serif);
  max-width: 28ch;
}

/* Modal success state */
.modal-success { text-align: center; padding: 24px 0; }
.modal-success .seal {
  width: 88px; height: 88px;
  margin: 0 auto 32px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gold);
  position: relative;
  animation: sealIn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.modal-success .seal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  opacity: 0.4;
}
@keyframes sealIn {
  0% { transform: scale(0.6) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.modal-success h2 { margin-bottom: 16px; }
.modal-success p { color: var(--ink-2); margin-bottom: 28px; }

/* ============================================
   Reveal animations
   ============================================ */

/* Scroll-reveal entrance: scoped to .js-scroll-ready (set on <html> by an
   inline script before paint) so non-JS / pre-hydration users see content
   immediately. The IntersectionObserver in app.jsx (React) and
   src/scroll-reveal.js (static blog pages) adds .in when an element enters
   the viewport. */
.js-scroll-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.js-scroll-ready .reveal.in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}
.js-scroll-ready .reveal.delay-1 { transition-delay: 80ms; }
.js-scroll-ready .reveal.delay-2 { transition-delay: 160ms; }
.js-scroll-ready .reveal.delay-3 { transition-delay: 240ms; }
.js-scroll-ready .reveal.delay-4 { transition-delay: 320ms; }

/* Stagger children: parent gets .reveal-stagger, each child reveals slightly
   later than its predecessor */
.js-scroll-ready .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.js-scroll-ready .reveal-stagger > .reveal:nth-child(2) { transition-delay: 90ms; }
.js-scroll-ready .reveal-stagger > .reveal:nth-child(3) { transition-delay: 180ms; }
.js-scroll-ready .reveal-stagger > .reveal:nth-child(4) { transition-delay: 270ms; }
.js-scroll-ready .reveal-stagger > .reveal:nth-child(5) { transition-delay: 360ms; }
.js-scroll-ready .reveal-stagger > .reveal:nth-child(n+6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
  .js-scroll-ready .reveal,
  .js-scroll-ready .reveal.in,
  .js-scroll-ready .reveal-stagger > .reveal {
    opacity: 1; transform: none; transition: none; transition-delay: 0ms;
  }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-cta { display: none; }
  .hero-sub-row { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .two-col .col-left { position: static; }
  .services-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .start-cta { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Let the brand block shrink so the EN/HR toggle, theme button and
     hamburger fit on screen. Brand-tag wraps to exactly two lines (8px
     font + 0.2em letter-spacing keep "FAMILY BUSINESS" / "OBITELJSKI
     BIZNIS" inside the 120px column). The toggle, theme and hamburger
     are sized at 38px with an 8px gap between them. */
  .brand { min-width: auto; gap: 8px; }
  .brand-text { width: 120px; min-height: auto; }
  .brand-tag {
    white-space: normal;
    line-height: 1.3;
    font-size: 8px;
    letter-spacing: 0.2em;
  }
  .nav-inner { gap: 6px; }
  .nav-actions { gap: 8px; }
  .theme-toggle, .menu-btn { width: 38px; height: 38px; }
  .nav-actions .toggle-group button,
  .nav-actions .toggle-group a { padding: 6px 10px; font-size: 11px; }
  .hero-eyebrow-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-marquee { gap: 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .alpha-block { grid-template-columns: 1fr; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .who-item { grid-template-columns: 36px 1fr; gap: 16px; padding: 20px 8px; }
  .modal { padding: 32px 24px; }
  .approach-quote { padding-left: 20px; }
  .start-cta-text { font-size: 22px; }
}

/* ============================================
   Blog — section, cards, index, article
   ============================================ */

.blog-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px 28px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 320ms ease,
              background 320ms ease,
              box-shadow 320ms ease;
  min-height: 320px;
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  background: var(--bg-3);
  box-shadow: var(--shadow-md);
}

.blog-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.blog-card-cat { color: var(--gold); font-weight: 500; }
.blog-card-dot { color: var(--ink-3); }

.blog-card-title {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.2;
  color: var(--ink-0);
}
.blog-card:hover .blog-card-title { color: var(--gold); }

.blog-card-excerpt {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-1);
  font-weight: 300;
  flex-grow: 1;
}

.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.blog-card-date { font-size: 12px; color: var(--ink-2); letter-spacing: 0.06em; }
.blog-card-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  transition: transform 280ms ease;
}
.blog-card:hover .blog-card-arrow { transform: translateX(4px); }

.blog-section-cta {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

/* Blog index page */
.blog-page-header {
  padding-top: 180px;
  padding-bottom: 80px;
  border-bottom: 1px solid var(--line);
}
.blog-page-header h1 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.05;
  margin-top: 24px;
  margin-bottom: 28px;
  max-width: 18ch;
}
.blog-page-header .lead { max-width: 56ch; }

.blog-page-list {
  padding-top: 80px;
  padding-bottom: 120px;
}
.blog-page-list .blog-grid { gap: 28px; }
@media (min-width: 961px) { .blog-page-list .blog-grid { grid-template-columns: 1fr 1fr 1fr; } }

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 24px;
  transition: color 220ms ease;
}
.blog-back:hover { color: var(--gold); }
.blog-back .arr { transform: rotate(180deg); display: inline-block; }

/* Article page */
.article-header {
  padding-top: 160px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-soft);
}
.article-header .container { max-width: 820px; }
.article-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.article-meta-row .cat { color: var(--gold); }
.article-meta-row .dot { color: var(--ink-3); }

.article-title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  color: var(--ink-0);
  margin-bottom: 28px;
  text-wrap: balance;
}
.article-deck {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--ink-1);
  font-weight: 300;
  font-family: var(--serif);
  font-style: italic;
  max-width: 60ch;
}

.article-byline {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-2);
}
.article-byline .author-mono {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.04em;
}
.article-byline .who { color: var(--ink-1); }
.article-byline .who strong { color: var(--ink-0); font-weight: 500; }

/* Optional cover image between the byline (header) and the body. The
   container matches the article-body width so the image sits visually
   above the prose at the same column. */
.article-cover {
  margin: 0;
  padding-top: 48px;
}
.article-cover .container { max-width: 820px; }
.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--line);
}

.article-body {
  padding-top: 56px;
  padding-bottom: 80px;
}
.article-body .container { max-width: 720px; }
.article-body h2 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.18;
  margin-top: 56px;
  margin-bottom: 20px;
  color: var(--ink-0);
}
.article-body h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  margin-top: 36px;
  margin-bottom: 14px;
  color: var(--ink-0);
}
.article-body p,
.article-body ul,
.article-body ol {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-1);
  font-weight: 300;
  margin: 0 0 22px;
}
.article-body ul,
.article-body ol { padding-left: 26px; }
.article-body li { margin-bottom: 10px; }
.article-body strong { color: var(--ink-0); font-weight: 500; }
.article-body em { color: var(--ink-0); }
/* Inline article links — scoped to exclude .btn so the gold CTA button keeps
   its dark-on-gold text contrast (was being overridden by this selector,
   making the button text invisible) */
.article-body a:not(.btn) {
  color: var(--gold);
  border-bottom: 1px solid var(--line-strong);
  transition: color 220ms ease, border-color 220ms ease;
}
.article-body a:not(.btn):hover { color: var(--gold-bright); border-color: var(--gold); }
.article-body blockquote {
  margin: 36px 0;
  padding: 4px 0 4px 28px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.45;
  color: var(--ink-0);
}
.article-body .pull-quote {
  margin: 48px 0;
  padding: 32px 40px;
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.45;
  color: var(--ink-0);
  border-radius: 4px;
}

.article-faq {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line-soft);
}
.article-faq h2 { margin-top: 0; }
.article-faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 0;
}
.article-faq summary {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink-0);
  cursor: pointer;
  padding-right: 28px;
  position: relative;
  list-style: none;
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after {
  content: "+";
  position: absolute;
  right: 0; top: -2px;
  font-family: var(--sans);
  font-size: 24px;
  color: var(--gold);
  transition: transform 240ms ease;
}
.article-faq details[open] summary::after { transform: rotate(45deg); }
.article-faq details p {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 16px;
  color: var(--ink-1);
}

.article-cta {
  margin-top: 64px;
  padding: 48px 40px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-2);
}
.article-cta h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  margin-bottom: 12px;
  color: var(--ink-0);
}
.article-cta p {
  color: var(--ink-2);
  margin-bottom: 24px;
  font-size: 16px;
}

.article-related {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 80px 0;
}
.article-related h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 30px);
  margin-bottom: 32px;
  color: var(--ink-0);
}

@media (max-width: 640px) {
  .article-body .container { padding-left: 24px; padding-right: 24px; }
  .article-body p, .article-body ul, .article-body ol { font-size: 16px; }
  .article-body .pull-quote { padding: 24px 22px; }
  .article-cta { padding: 32px 22px; }
  .blog-page-header { padding-top: 140px; padding-bottom: 56px; }
  .blog-page-list { padding-top: 56px; padding-bottom: 80px; }
}

/* Blog pages reuse the main React .nav classes (.brand, .nav-link, .toggle-group, .theme-toggle, .nav-cta).
   The .scrolled class is applied permanently on blog pages so the nav has its solid backdrop from the start. */

/* ============================================
   Assessment CTA on home page (between Challenges and Approach)
   ============================================ */

.assessment-cta-section {
  padding-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(60px, 8vw, 120px);
}
.assessment-cta-box {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 5vw, 64px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
.assessment-cta-box::before {
  /* Subtle gold corner glow — matches the page's gold accent without
     overpowering the content */
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, var(--gold-soft) 0%, transparent 65%);
  pointer-events: none;
}
.assessment-cta-box > * { position: relative; z-index: 1; }
.assessment-cta-box .eyebrow { justify-content: center; margin-bottom: 20px; }
.assessment-cta-box h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  margin: 16px 0 24px;
  text-wrap: balance;
}
.assessment-cta-box .lead {
  max-width: 56ch;
  margin: 0 auto 36px;
}
.assessment-cta-note {
  margin-top: 24px;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}

/* ============================================
   Assessment page (assessment.html)
   ============================================ */

.assessment-section {
  padding-top: clamp(140px, 16vw, 200px);
  padding-bottom: clamp(60px, 10vw, 120px);
}

.assessment-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(36px, 5vw, 64px);
  box-shadow: var(--shadow-md);
}

.assessment-title {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.1;
  margin-top: 24px;
  margin-bottom: 24px;
  text-wrap: balance;
}

.assessment-lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-1);
  font-weight: 300;
  margin-bottom: 32px;
}

.assessment-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.assessment-dim-list {
  margin: 32px 0 36px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: 24px 0;
}
.assessment-dim-list-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.assessment-dim-item {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.assessment-dim-item:last-child { border-bottom: 0; }
.assessment-dim-item .dim-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-0);
}
.assessment-dim-item .dim-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .assessment-dim-item { grid-template-columns: 1fr; gap: 6px; }
}

.assessment-privacy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
  margin-bottom: 32px;
}

.assessment-cta-row {
  display: flex;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

/* === Question step === */

.assessment-progress {
  max-width: 820px;
  margin: 0 auto 24px;
}
.assessment-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.assessment-progress-text { color: var(--ink-2); }
.assessment-progress-dim { color: var(--gold); }

.assessment-progress-bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  overflow: hidden;
}
.assessment-progress-fill {
  height: 100%;
  background: var(--gold);
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.assessment-question-card {
  padding: clamp(32px, 4vw, 56px);
}
.assessment-question-text {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  color: var(--ink-0);
  margin-bottom: 32px;
  text-wrap: balance;
}

.assessment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.assessment-option {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: center;
  text-align: left;
  padding: 18px 22px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-1);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease,
              transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.assessment-option:hover {
  border-color: var(--line-strong);
  background: var(--bg-3);
  transform: translateX(2px);
}
.assessment-option.selected {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--ink-0);
}
.assessment-option-marker {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--gold);
  font-weight: 500;
  transition: all 220ms ease;
}
.assessment-option.selected .assessment-option-marker {
  background: var(--gold);
  color: var(--bg-0);
  border-color: var(--gold);
}
.assessment-option:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.assessment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
}

/* === Analyzing screen (between last question and results) === */

.assessment-analyzing-wrap { min-height: 60vh; display: flex; align-items: center; }

.assessment-analyzing-card {
  text-align: center;
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 64px);
  max-width: 640px;
}

.assessment-analyzing-message {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  color: var(--ink-0);
  margin: 28px 0 36px;
  min-height: 1.3em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Re-mounts on key change → animation replays for crossfade effect */
  animation: assessmentMsgIn 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes assessmentMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.assessment-analyzing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.assessment-analyzing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.3;
  animation: assessmentDot 1200ms ease-in-out infinite;
}
.assessment-analyzing-dots span:nth-child(2) { animation-delay: 200ms; }
.assessment-analyzing-dots span:nth-child(3) { animation-delay: 400ms; }
@keyframes assessmentDot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}

.assessment-analyzing-bar {
  height: 2px;
  background: var(--line);
  border-radius: 1px;
  overflow: hidden;
  margin: 0 auto 16px;
  max-width: 320px;
}
.assessment-analyzing-bar-fill {
  height: 100%;
  width: 0;
  background: var(--gold-shine);
  animation-name: assessmentLoadFill;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: forwards;
}
@keyframes assessmentLoadFill {
  from { width: 0; }
  to   { width: 100%; }
}

.assessment-analyzing-counter {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .assessment-analyzing-message { animation: none; }
  .assessment-analyzing-dots span { animation: none; opacity: 0.6; }
  .assessment-analyzing-bar-fill { animation: none; width: 100%; }
}

/* === Results screen === */

.assessment-results-card { padding: clamp(36px, 5vw, 72px); }

.assessment-results-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  margin-top: 18px;
  margin-bottom: 36px;
  text-wrap: balance;
}

.assessment-overall {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-soft);
}
.assessment-overall-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.assessment-overall-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.assessment-overall-score {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-0);
}
.assessment-overall-score .muted { color: var(--ink-2); font-size: 16px; margin-left: 6px; }
.assessment-overall-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.assessment-overall-fill {
  height: 100%;
  background: var(--gold-shine);
  transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.assessment-narrative {
  margin: 36px 0;
  padding: 28px 32px;
  background: var(--bg-1);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.assessment-narrative h3 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  font-weight: 500;
}
.assessment-narrative p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-0);
  font-style: italic;
}

.assessment-dim-bars {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.assessment-dim-bar { padding: 4px 0; }
.assessment-dim-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 14px;
}
.assessment-dim-bar-meta .dim-name { color: var(--ink-0); font-family: var(--serif); font-size: 16px; }
.assessment-dim-bar-meta .dim-score { color: var(--ink-2); font-size: 13px; }
.assessment-dim-bar-track {
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.assessment-dim-bar-fill {
  height: 100%;
  background: var(--gold);
  transition: width 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.assessment-strength-priority-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin: 40px 0;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}
@media (max-width: 720px) {
  .assessment-strength-priority-grid { grid-template-columns: 1fr; }
}
.assessment-sp-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
  font-weight: 500;
}
.assessment-sp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.assessment-sp-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.assessment-sp-list li:last-child { border-bottom: 0; }
.assessment-sp-name {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-0);
}
.assessment-sp-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.assessment-final-cta {
  margin: 48px 0 24px;
  padding: 36px 32px;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}
.assessment-final-cta .btn-primary {
  max-width: 100%;
  white-space: normal;
}
.assessment-final-cta h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  margin-bottom: 12px;
  color: var(--ink-0);
}
.assessment-final-cta p {
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 24px;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}
.assessment-restart {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: var(--ink-2);
}

.assessment-disclaimer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-3);
  font-style: italic;
  text-align: center;
}