/* REVENU | revenu-academy.nl
   Reference formula: thetruthembodied.com + thejamiesea.com
   Full-width alternating dark/cream bands. One photo per section max.
   Rebuilt 2026-08-31. */

/* ─── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: #4a1f2a;
  background: #fffcf6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: #953a4d; text-decoration: underline; }
a:hover { color: #742f3d; }

/* ─── Design tokens ─────────────────────────────────────────── */
:root {
  --sand:       #e4d9c3;
  --sand-deep:  #d8c8ab;
  --paper:      #fffcf6;
  --ink:        #4a1f2a;
  --ink-mute:   #7a5560;
  --rust:       #af475d;   /* display fills only */
  --rust-deep:  #953a4d;   /* text, links, eyebrows — 5.02:1 on cream */
  --rose-wash:  #ebd3d8;
  --choc:       #742f3d;
  --choc-mid:   #8d4453;
  --tan:        #b08491;

  /* The two deep darks from the reference formula */
  --dark1:      #2b1219;   /* hero overlay, positioning band, footer */
  --dark2:      #3a1a22;   /* approach band */

  --radius-photo: 24px;

  --shadow-photo: 0 8px 40px 0 rgba(43,18,25,.22);

  --max-w: 1200px;
  --gutter: 1.5rem;

  /* Section vertical rhythm: ~120px desktop / ~72px mobile */
  --section-py: clamp(4.5rem, 9vw, 7.5rem);
}

/* ─── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1rem, 1.8vw, 1.2rem); }

/* Italic accent word — dark headings */
h1 em, h2 em {
  font-style: italic;
  color: var(--rust-deep);
}

/* Italic accent word — on dark bands, keep it light */
.bg-dark1 h1 em,
.bg-dark1 h2 em,
.bg-dark2 h1 em,
.bg-dark2 h2 em {
  color: var(--rose-wash);
}

.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rust-deep);
}

/* ─── Layout helpers ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-py); }

/* ─── Band colour utilities ──────────────────────────────────── */
.bg-paper { background: var(--paper); }
.bg-sand  { background: var(--sand); }

.bg-dark1 {
  background: var(--dark1);
  color: var(--rose-wash);
}
.bg-dark1 h1, .bg-dark1 h2, .bg-dark1 h3, .bg-dark1 p { color: var(--rose-wash); }
.bg-dark1 .eyebrow { color: var(--tan); }
.bg-dark1 a { color: var(--rose-wash); }

.bg-dark2 {
  background: var(--dark2);
  color: var(--rose-wash);
}
.bg-dark2 h1, .bg-dark2 h2, .bg-dark2 h3, .bg-dark2 p { color: var(--rose-wash); }
.bg-dark2 .eyebrow { color: var(--tan); }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  padding: .7rem 1.75rem;
  line-height: 1;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .15s ease;
}

/* Dark solid — matches reference (small solid dark red) */
.btn-dark {
  background: var(--dark1);
  color: var(--rose-wash);
  border: none;
}
.btn-dark:hover {
  background: var(--choc);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(43,18,25,.28);
}

/* Transparent white border — hero only */
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.75);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* Outline dark — for offers without a price */
.btn-outline-dark {
  background: transparent;
  color: var(--dark1);
  border: 1px solid var(--dark1);
}
.btn-outline-dark:hover {
  background: var(--dark1);
  color: var(--rose-wash);
  transform: translateY(-1px);
}

.btn-sm { font-size: .75rem; padding: .6rem 1.4rem; }

/* ─── Header ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--sand);
  padding-block: 1rem;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark--light { color: var(--rose-wash); }
/* TODO: replace .wordmark text with <img> once logo PNG is placed at assets/img/logo-horizontal.png */

/* ─── 1. HERO — full-bleed image + dark overlay ─────────────── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* she sits far right, the headline gets the empty wall on the left */
  object-position: 92% 20%;
}

@media (max-width: 900px) {
  .hero__bg img { object-position: 72% 14%; }
}

/* Overlay: rgba(28,12,16,0.55) keeps white text well above 4.5:1 */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(28,12,16,.35) 0%,
    rgba(28,12,16,.60) 50%,
    rgba(28,12,16,.72) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem var(--gutter);
  max-width: 860px;
  width: 100%;
}

.hero__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  /* sits UNDER the headline, like the reference */
  order: 2;
  margin: 1.4rem 0 2.2rem;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 640px;
  margin-right: auto;
  padding-left: clamp(1.5rem, 7vw, 6rem);
}

@media (max-width: 900px) {
  .hero__content { align-items: center; text-align: center; margin: 0 auto; }
}

.hero__content h1 {
  color: #fff;
  order: 1;
  margin-bottom: 0;
}

.hero__content .btn { order: 3; }
/* em inside hero h1 is white italic, no colour tint needed */
.hero__content h1 em {
  font-style: italic;
  color: var(--rose-wash);
}

/* ─── 2. POSITIONING STATEMENT ───────────────────────────────── */
.positioning {
  padding-block: var(--section-py);
}

.positioning__inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding-inline: var(--gutter);
}

.positioning__main {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.positioning__main em {
  font-style: italic;
  color: var(--rust-deep);
}

.positioning__sub {
  font-size: clamp(.9375rem, 1.5vw, 1.0625rem);
  color: var(--ink-mute);
  line-height: 1.7;
}

/* ─── 3. INTRO — cream, two columns ─────────────────────────── */
.intro__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.intro__photo img {
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-photo);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.intro__text .eyebrow { margin-bottom: .75rem; }

.intro__text h2 { margin-bottom: 1.25rem; }

.intro__text p {
  color: var(--ink-mute);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.intro__text .btn { margin-top: 1rem; }

@media (min-width: 768px) {
  .intro__inner {
    grid-template-columns: 5fr 7fr;
    gap: 5rem;
  }
}

/* ─── 4. RECOGNITION — bg image + overlay, centred copy ─────── */
.recognition {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.recognition__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.recognition__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.recognition__overlay {
  position: absolute;
  inset: 0;
  background: rgba(43,18,25,.70);
  pointer-events: none;
}

.recognition__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 5rem var(--gutter);
  max-width: 640px;
  width: 100%;
}

.recognition__content h2 {
  color: #fff;
  margin-bottom: 2rem;
}

.recognition__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.recognition__list li {
  color: rgba(235,211,216,.88);
  font-size: clamp(.9375rem, 1.4vw, 1.0625rem);
  line-height: 1.6;
}

/* ─── 5. APPROACH — sand #e4d9c3, two columns ───────────────── */
.approach__heading {
  text-align: center;
  color: var(--ink);
  margin-bottom: 3rem;
}

.approach__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.approach__photo img {
  border-radius: var(--radius-photo);
  box-shadow: var(--shadow-photo);
  width: 100%;
  height: auto;
  object-fit: cover;
}

.approach__text p {
  color: var(--ink-mute);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .approach__inner {
    grid-template-columns: 5fr 7fr;
    gap: 5rem;
  }
}

/* ─── 6. OFFERS — cream, no photos, numbered rows ───────────── */
.offers__eyebrow { display: block; text-align: center; margin-bottom: 1rem; }

.offers__heading {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}

.offers__list {
  list-style: none;
  max-width: 900px;
  margin-inline: auto;
}

.offer-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
  padding-block: 2.5rem;
  border-top: 1px solid rgba(74,31,42,.15);
}

.offer-row--last {
  border-bottom: 1px solid rgba(74,31,42,.15);
}

.offer-row__meta {
  display: flex;
  align-items: baseline;
  gap: .75rem;
}

.offer-row__number {
  font-family: 'DM Sans', sans-serif;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--rust-deep);
  white-space: nowrap;
}

.offer-row__label {
  font-family: 'DM Sans', sans-serif;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.offer-row__name {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .6rem;
}

.offer-row__desc {
  font-size: .9375rem;
  color: var(--ink-mute);
  line-height: 1.65;
  max-width: 56ch;
}

.offer-row__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
}

.offer-row__price {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
}

/* Desktop: three columns — number+label | body | action-right */
@media (min-width: 768px) {
  .offer-row {
    grid-template-columns: 180px 1fr auto;
    align-items: start;
    gap: 1.5rem 2.5rem;
    padding-block: 2.75rem;
  }

  .offer-row__action {
    align-items: flex-end;
    text-align: right;
  }
}

/* ─── 7. TOPICS — sand, two-column list ─────────────────────── */
/* ─── 7. TOPICS — dark band ──────────────────────────────────── */
.topics__eyebrow { display: block; text-align: center; margin-bottom: .75rem; }

.topics__heading {
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 3rem;
}

/* heading and eyebrow colour on dark bg handled by .bg-dark1 rules above */

.topics__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.topics__col {
  display: flex;
  flex-direction: column;
}

.topic-link {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.25rem 0;
  text-decoration: none;
  border-top: 1px solid rgba(235,211,216,.12);
  transition: padding-left .15s ease;
}

.topic-link:last-child { border-bottom: 1px solid rgba(235,211,216,.12); }

.topic-link:hover { padding-left: .5rem; }

.topic-link__eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tan);
}

.topic-link__title {
  font-family: 'DM Sans', sans-serif;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--rose-wash);
  line-height: 1.4;
}

@media (min-width: 768px) {
  .topics__cols {
    grid-template-columns: 1fr 1fr;
    gap: 0 4rem;
  }
}

/* ─── 8. FAQ — cream ─────────────────────────────────────────── */
.faq__eyebrow { display: block; text-align: center; margin-bottom: .75rem; }

.faq__heading {
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}

.faq__list {
  max-width: 720px;
  margin-inline: auto;
}

.faq__item {
  padding-block: 2rem;
  border-top: 1px solid rgba(74,31,42,.12);
}

.faq__item:last-child { border-bottom: 1px solid rgba(74,31,42,.12); }

.faq__item h3 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .65rem;
}

.faq__item p {
  color: var(--ink-mute);
  line-height: 1.75;
}

.faq__item a {
  color: var(--rust-deep);
}

/* ─── Footer — dark #2b1219 ──────────────────────────────────── */
.site-footer {
  padding-block: 3.5rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.footer-tagline {
  color: rgba(235,211,216,.55);
  font-size: .875rem;
  margin-top: .5rem;
  line-height: 1.55;
}

.footer-email a {
  color: var(--rose-wash);
  font-size: .875rem;
  text-decoration: none;
}
.footer-email a:hover { text-decoration: underline; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  list-style: none;
}
.footer-links a {
  color: rgba(235,211,216,.55);
  font-size: .875rem;
  text-decoration: none;
}
.footer-links a:hover { color: var(--rose-wash); text-decoration: underline; }

.footer-legal {
  width: 100%;
  color: rgba(235,211,216,.35);
  font-size: .8rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(235,211,216,.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
}

/* Google Preferred Source button wrapper */
.gsrc-wrapper { display: flex; align-items: center; }

/* ─── Accessibility ──────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--rust-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}