/* ============================================================
   QKulm — Palette override (cream / oatmeal / slate / navy /
   orange / terracotta / teal). Layout, typography and all
   existing interactions preserved.
   ============================================================ */

:root {
  /* Legacy token remap */
  --cobalt: #0C1F4B;        /* slate */
  --cobalt-deep: #0C1F4B;   /* dark navy */
  --cobalt-ink: #0C1F4B;    /* dark navy */
  --peach: #938D81;         /* warm orange */
  --peach-soft: #938D81;    /* oatmeal */
  --offwhite: #F4EEE6;      /* cream */
  --ink: #0C1F4B;           /* dark navy */

  /* New palette helpers */
  --cream: #F4EEE6;
  --oatmeal: #938D81;
  --slate: #0C1F4B;
  --navy: #0C1F4B;
  --orange: #938D81;
  --terracotta: #752D39;
  --teal: #533235;

  --hairline: rgba(244,238,230,0.18);
  --hairline-ink: rgba(12,31,75,0.16);
}

/* ---------- Base surfaces ---------- */

body {
  background: var(--slate);
  color: var(--cream);
}

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

/* ---------- Header ---------- */

.site-header {
  background: linear-gradient(
    to bottom,
    rgba(12,31,75,0.94),
    rgba(12,31,75,0.74) 70%,
    rgba(12,31,75,0)
  );
}

.site-header.is-scrolled {
  background: rgba(12,31,75,0.94);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav-desktop a {
  color: rgba(244,238,230,0.78);
}

.nav-desktop a:hover {
  color: var(--cream);
}

.nav-desktop a[aria-current='page'] {
  color: var(--orange);
}

.nav-desktop a::after {
  background: var(--orange);
}

.nav-desktop a[aria-current='page']::after {
  background: var(--orange);
}

.nav-mobile {
  background: var(--navy);
}

.nav-mobile a {
  color: var(--cream);
}

.nav-mobile a[aria-current='page'],
.nav-mobile a .arrow-mini {
  color: var(--orange);
}

/* ---------- Hero (home) ---------- */

.hero {
  background: var(--slate);
  color: var(--cream);
}

.hero-title {
  color: var(--cream);
}

.hero-title em {
  color: var(--orange);
}

.hero-sub {
  color: rgba(244,238,230,0.86);
}

.hero-brandline {
  color: var(--orange);
}

.hero-brandline .dot {
  background: var(--orange);
}

.hero-brandline .muted {
  color: rgba(244,238,230,0.55);
}

.hero-visual::after {
  background: linear-gradient(
    160deg,
    rgba(12,31,75,0.34),
    rgba(12,31,75,0) 42%,
    rgba(12,31,75,0.42)
  );
}

/* ---------- Eyebrows / leads ---------- */

.eyebrow {
  color: var(--orange);
}

.eyebrow--ink {
  color: var(--terracotta);
}

.lead {
  color: var(--cream);
}

/* ---------- CTA link ---------- */

.cta:hover {
  color: var(--orange);
}

.cta:hover .arrow {
  background: var(--orange);
}

.cta--peach {
  color: var(--orange);
}

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

.btn {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--navy);
}

.btn:hover {
  background: transparent;
  color: var(--orange);
}

.btn.cta {
  color: var(--navy);
}

.btn.cta:hover {
  color: var(--orange);
}

/* ============================================================
   Light reading bands (cream surfaces, dark navy text)
   ============================================================ */

.home .narrative,
.narrative,
.service-list,
.portrait-teaser {
  background: var(--cream);
  color: var(--navy);
}

.home .narrative h1,
.home .narrative h2,
.home .narrative h3,
.home .narrative h4,
.narrative h1,
.narrative h2,
.narrative h3,
.narrative h4,
.service-list h1,
.service-list h2,
.service-list h3,
.service-list h4,
.portrait-teaser h1,
.portrait-teaser h2,
.portrait-teaser h3,
.portrait-teaser h4,
.portrait-teaser blockquote {
  color: var(--navy);
}

.home .narrative p,
.narrative p,
.service-list p,
.portrait-teaser p,
.narrative-body {
  color: rgba(12,31,75,0.86);
}

.home .narrative .lead,
.narrative .lead,
.service-list .lead,
.portrait-teaser .lead {
  color: var(--navy);
}

.home .narrative .eyebrow,
.narrative .eyebrow,
.service-list .eyebrow,
.portrait-teaser .eyebrow {
  color: var(--terracotta);
}

.home .narrative a,
.narrative a,
.service-list a,
.portrait-teaser a {
  color: inherit;
}

.home .narrative .cta,
.narrative .cta,
.service-list .cta,
.portrait-teaser .cta {
  color: var(--navy);
}

.home .narrative .cta:hover,
.narrative .cta:hover,
.service-list .cta:hover,
.portrait-teaser .cta:hover {
  color: var(--terracotta);
}

.home .narrative .cta:hover .arrow,
.narrative .cta:hover .arrow,
.service-list .cta:hover .arrow,
.portrait-teaser .cta:hover .arrow {
  background: var(--terracotta);
}

.home .narrative .hairline,
.narrative .hairline,
.service-list .hairline,
.portrait-teaser .hairline,
.portrait-teaser cite {
  border-top-color: rgba(12,31,75,0.16);
}

.portrait-teaser cite {
  color: rgba(12,31,75,0.62);
}

.portrait-teaser figure,
.portrait-frame {
  background: var(--navy);
}

/* ============================================================
   Method teaser stays slate for alternation
   ============================================================ */

.method-teaser {
  background: var(--slate);
  color: var(--cream);
}

.method-teaser .lead,
.method-teaser h1,
.method-teaser h2,
.method-teaser h3,
.method-teaser h4 {
  color: var(--cream);
}

.method-teaser .eyebrow {
  color: var(--orange);
}

.method-teaser p {
  color: rgba(244,238,230,0.86);
}

.method-teaser a {
  color: inherit;
}

.method-teaser .cta {
  color: var(--cream);
}

.method-teaser .cta:hover {
  color: var(--orange);
}

.method-teaser .cta:hover .arrow {
  background: var(--orange);
}

/* ---------- Method steps (light) ---------- */

.method-steps {
  border-top-color: rgba(12,31,75,0.16);
}

.method-steps .step {
  border-bottom-color: rgba(12,31,75,0.16);
}

.method-steps .step .st-label {
  color: var(--terracotta);
}

.method-steps .step .st-text {
  color: var(--navy);
}

/* ============================================================
   Banded / other page content — dark navy
   ============================================================ */



/* ---------- Service rows (dark navy original) ---------- */

.rows {
  border-top-color: var(--hairline);
}

.row {
  border-bottom-color: var(--hairline);
}

.row-index {
  color: var(--orange);
}

.row-short {
  color: rgba(244,238,230,0.74);
}

.row summary:hover h3,
.row[open] h3 {
  color: var(--orange);
}

.row summary:hover .row-toggle,
.row[open] .row-toggle {
  border-color: var(--orange);
}

.row summary:hover .row-toggle {
  background: rgba(147,141,129,0.12);
}

.row-toggle {
  border-color: var(--hairline);
}

.row-body .body-inner {
  color: rgba(244,238,230,0.86);
}

/* ---------- Phase / reading content on navy ---------- */

.phase {
  border-top-color: var(--hairline);
  border-bottom-color: var(--hairline);
}

.phase-label {
  color: var(--orange);
}

.phase-label small {
  color: var(--orange);
}

.phase ul li {
  border-bottom-color: var(--hairline);
}

.phase ul li::before {
  background: var(--orange);
}

.phase p {
  color: rgba(244,238,230,0.86);
}

.about-portrait figure {
  background: var(--navy);
}

.about-signature {
  color: var(--orange);
}

.pull-quote {
  color: var(--cream);
}

/* ============================================================
   band-peach -> terracotta with cream text
   ============================================================ */

.band-peach {
  background: var(--terracotta);
  color: var(--cream);
}

.band-peach h1,
.band-peach h2,
.band-peach h3,
.band-peach h4,
.band-peach p,
.band-peach blockquote,
.band-peach li,
.band-peach cite,
.band-peach .lead,
.band-peach .method-steps .st-text {
  color: var(--cream);
}

.band-peach .eyebrow,
.band-peach .method-steps .step .st-label,
.band-peach .about-signature,
.band-peach .phase-label,
.band-peach .phase-label small {
  color: var(--cream);
}

.band-peach a {
  color: inherit;
}

.band-peach .cta {
  color: var(--cream);
}

.band-peach .cta:hover {
  color: var(--orange);
}

.band-peach .cta:hover .arrow {
  background: var(--orange);
}

.band-peach .btn {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--navy);
}

.band-peach .btn:hover {
  background: transparent;
  color: var(--orange);
}

.band-peach .hairline,
.band-peach .method-steps,
.band-peach .method-steps .step,
.band-peach .phase,
.band-peach .phase ul li {
  border-top-color: rgba(244,238,230,0.28);
  border-bottom-color: rgba(244,238,230,0.28);
}

.band-peach ::selection {
  background: var(--cream);
  color: var(--terracotta);
}

/* ---------- band-offwhite -> cream ---------- */

.band-offwhite {
  background: var(--cream);
  color: var(--navy);
}

.band-offwhite h1,
.band-offwhite h2,
.band-offwhite h3,
.band-offwhite h4,
.band-offwhite blockquote,
.band-offwhite .lead,
.band-offwhite .pull-quote {
  color: var(--navy);
}

.band-offwhite p,
.band-offwhite li,
.band-offwhite cite {
  color: rgba(12,31,75,0.82);
}

.band-offwhite .eyebrow,
.band-offwhite .method-steps .step .st-label,
.band-offwhite .phase-label,
.band-offwhite .phase-label small,
.band-offwhite .about-signature {
  color: var(--terracotta);
}

.band-offwhite a {
  color: inherit;
}

.band-offwhite .cta {
  color: var(--navy);
}

.band-offwhite .cta:hover {
  color: var(--terracotta);
}

.band-offwhite .cta:hover .arrow {
  background: var(--terracotta);
}

.band-offwhite .btn {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--navy);
}

.band-offwhite .hairline,
.band-offwhite .method-steps,
.band-offwhite .method-steps .step,
.band-offwhite .phase,
.band-offwhite .phase ul li {
  border-top-color: rgba(12,31,75,0.16);
  border-bottom-color: rgba(12,31,75,0.16);
}

/* ---------- Form / contact ---------- */

.form-field span,
.form-field label {
  color: rgba(244,238,230,0.88);
}

.form-field input,
.form-field textarea {
  border-bottom-color: var(--hairline);
  color: var(--cream);
}

.form-field input:focus,
.form-field textarea:focus {
  border-bottom-color: var(--orange);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(244,238,230,0.42);
}

.form-note {
  color: rgba(244,238,230,0.85);
}

.form-status {
  color: var(--orange);
}

.contact-aside p {
  color: rgba(244,238,230,0.82);
}

.contact-aside .small-note {
  color: rgba(244,238,230,0.58);
}

/* ---------- End CTA ---------- */

.end-cta {
  border-top-color: var(--hairline);
}

.end-cta .lead {
  color: var(--cream);
}

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

.site-footer {
  border-top-color: var(--hairline);
  color: rgba(244,238,230,0.66);
}

.footer-nav a:hover {
  color: var(--orange);
}

.logo-variant-cobalt,
.logo-variant-cobalt .eyebrow {
  color: var(--terracotta);
}


/* Compact portrait: photography supports the story. */
.portrait-teaser .portrait-frame,.page-intro-section .portrait-frame{width:220px;max-width:100%;height:auto;justify-self:end;align-self:start}
.portrait-frame img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}
.portrait-teaser{grid-template-columns:minmax(0,1fr) 220px}
.page-intro-section .split:has(.portrait-frame){grid-template-columns:minmax(0,1fr) 220px;gap:6vw}
@media(max-width:900px){.portrait-teaser,.page-intro-section .split:has(.portrait-frame){grid-template-columns:1fr}.portrait-teaser .portrait-frame,.page-intro-section .portrait-frame{width:160px;justify-self:start}}

/* Palette 19: reference swatches. Existing token names preserve integrations. */
:root{--mint-cream:#F4EEE6;--dusk:#938D81;--cobalt-reference:#0C1F4B;--cafe:#533235;--wine:#752D39;}
/* Wine buttons keep small labels clear on the new light surfaces. */
.btn,.btn.cta{background:var(--wine);border-color:var(--wine);color:var(--mint-cream);}
.btn:hover,.btn.cta:hover{background:transparent;color:var(--wine);}
.hero .btn:hover,.hero .btn.cta:hover{color:var(--mint-cream);border-color:var(--mint-cream);}