/* ============================================================
   Hope Adoptions & Consulting
   Design system — palette, typography, layout primitives
   ============================================================ */

/* -------- Tokens -------- */
:root {
  /* Ink (text) */
  --ink: #242a36;
  --ink-soft: #4c5361;
  --muted: #7a8291;

  /* Navy — trust, steadiness */
  --navy: #1f2a44;
  --navy-deep: #141c30;
  --navy-soft: #3a486a;

  /* Sage — Wyoming landscape, growth, hope */
  --sage: #8ba394;
  --sage-deep: #617a6d;
  --sage-mist: #e6ece7;

  /* Honey — warmth, attention (used sparingly) */
  --honey: #c5904f;
  --honey-deep: #a4733a;
  --honey-soft: #efd9b1;

  /* Neutrals */
  --cream: #faf6ef;
  --cream-deep: #f1e9d9;
  --white: #ffffff;
  --line: #e4dfd4;

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Space & layout */
  --container: 1120px;
  --container-narrow: 720px;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(20, 28, 48, 0.06);
  --shadow-md: 0 10px 30px -15px rgba(20, 28, 48, 0.22);
  --radius: 6px;
  --radius-lg: 10px;
}

/* -------- Reset / base -------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--honey-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-deep);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 0.75rem;
}

.lead {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: 0.75rem 1rem;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; }

/* -------- Containers & sections -------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--sage { background: var(--sage-mist); }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-deep); color: #fff; }

.btn--honey { background: var(--honey); color: var(--navy-deep); }
.btn--honey:hover { background: var(--honey-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--navy); border-color: currentColor; }
.btn--ghost:hover { background: var(--navy); color: #fff; }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn--ghost-light:hover { background: #fff; color: var(--navy); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--honey);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease, gap 0.2s ease;
}
.link-arrow::after { content: "→"; transition: transform 0.2s ease; }
.link-arrow:hover { color: var(--honey-deep); gap: 0.65rem; }

/* -------- Header -------- */
.site-header {
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.35rem 1.5rem;     /* was 1rem — ~+35% for a taller, more substantial header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-header__brand {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-header__brand-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.15rem;          /* bumped from 1.85rem so the wordmark carries its weight */
  font-weight: 500;
  color: var(--honey-soft);
  line-height: 1;
  white-space: nowrap;
}
.site-header__brand-sub {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 0.88rem;          /* bumped from 0.78rem */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255,255,255,0.88);
  padding-left: 1rem;
  border-left: 1px solid rgba(255,255,255,0.22);
}
.site-header__brand-line { display: block; white-space: nowrap; }
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.65rem;                /* bumped from 1.4rem */
  flex-wrap: wrap;
}
.site-header__nav a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 1.05rem;          /* bumped from 0.95rem */
  letter-spacing: 0.04em;
  transition: color 0.15s ease;
}
.site-header__nav a:hover { color: var(--honey-soft); }
.site-header__nav-cta {
  border: 1px solid rgba(255,255,255,0.4);
  padding: 0.55rem 1.1rem;     /* bumped to match the larger type */
  border-radius: var(--radius);
}
.site-header__nav-cta:hover {
  background: var(--honey);
  border-color: var(--honey);
  color: var(--navy-deep) !important;
}

/* Hamburger button — hidden by default, shown on narrow screens */
.site-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  cursor: pointer;
}
.site-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Collapse to hamburger earlier so the brand never has to fight the nav for space */
@media (max-width: 900px) {
  .site-header__inner { padding-block: 0.85rem; position: relative; }
  .site-header__toggle { display: flex; }

  .site-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-deep);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  .site-header__nav--open { display: flex; }
  .site-header__nav a {
    padding: 0.85rem 0;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 1.05rem;
  }
  .site-header__nav-cta {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem !important;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: var(--radius);
  }
}

/* Mobile brand logotype: scale "Hope" up a touch and tighten the sub text
   (layout is already stacked — that's the desktop default now) */
@media (max-width: 900px) {
  .site-header__brand { gap: 0.7rem; }
  .site-header__brand-mark { font-size: 2.15rem; }
  .site-header__brand-sub {
    font-size: 0.68rem;
    line-height: 1.15;
    padding-left: 0.75rem;
    border-left-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.8);
  }
}

@media (max-width: 360px) {
  .site-header__brand-mark { font-size: 1.85rem; }
  .site-header__brand-sub { font-size: 0.62rem; letter-spacing: 0.1em; }
}

/* -------- Page hero — shared by home and all interior pages -------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(239, 217, 177, 0.28), transparent 55%),
    linear-gradient(180deg, var(--sage-mist) 0%, var(--cream) 70%, var(--cream) 100%);
  padding: clamp(3rem, 6vw, 5rem) 1.5rem clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 5rem;
  height: 3px;
  background: var(--honey);
  border-top-left-radius: 3px;
}
.page-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
/* Make the content column itself a "container" so the h1 below can
   size based on the column's actual width (not the viewport width). */
.page-hero__content {
  container-type: inline-size;
  container-name: hero-text;
}

.page-hero__content h1 {
  /* 13.5cqi = 13.5% of the content column's inline size. While the column
     is at its max width (wide desktop) this evaluates above 5rem and the
     clamp holds at 5rem. The moment the column itself starts shrinking,
     the h1 scales down proportionally — so the line count stays stable
     and the text never jumps to a third line at an in-between width. */
  font-size: clamp(2.75rem, 13.5cqi, 5rem);
  margin-bottom: 1rem;
  line-height: 1.1;
}
.page-hero__title-line { display: block; }
.page-hero__content .lead {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 48ch;
}
.page-hero__actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.page-hero__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--cream);
}
.page-hero__frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Warm-tone tint overlay for cooler photos — soft-light so it nudges tones without flattening the image */
.page-hero__frame--training::before,
.page-hero__frame--consulting::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(239, 217, 177, 0.18), rgba(212, 165, 116, 0.22));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* -------- Video embed (responsive 16:9) -------- */
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: min(900px, 100% - 3rem);
  margin: 2.5rem auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--navy-deep);
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 780px) {
  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__content { text-align: center; }
  .page-hero__content h1 {
    font-size: clamp(2.75rem, 8vw, 4rem);
    line-height: 1.08;
  }
  .page-hero__content .lead { margin-left: auto; margin-right: auto; }
  .page-hero__actions { justify-content: center; }
  .page-hero__frame { max-width: 420px; margin: 0 auto; width: 100%; }
}

/* -------- Info duo (two-up description cards) -------- */
.info-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: 1.5rem;
}
.info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
}
.info-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.info-card__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--honey-deep);
}
.info-card p:last-child { margin-bottom: 0; }

/* -------- Prose (long-form body content) -------- */
.prose {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: 1.5rem;
}
.prose h2 { margin-top: 2.5rem; }
.prose h3 {
  margin-top: 2.75rem;
  margin-bottom: 0.6rem;
  font-size: clamp(1.4rem, 2.2vw, 1.6rem);
  color: var(--navy-deep);
  position: relative;
  padding-left: 1rem;
}
.prose h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  bottom: 0.3em;
  width: 3px;
  background: var(--honey);
  border-radius: 2px;
}
.prose h3:first-child, .prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.5rem; }
.prose__note {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: var(--sage-mist);
  border-left: 3px solid var(--sage-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.prose__note strong { color: var(--navy-deep); }

/* -------- FAQ (accessible, uses <details>/<summary>) -------- */
.faq {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: 1.5rem;
}
.faq__item {
  border-top: 1px solid var(--line);
  padding: 1.25rem 0;
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy-deep);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--honey-deep);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--honey-deep); }
.faq__answer {
  margin-top: 1rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 2px solid var(--honey);
  color: var(--ink-soft);
}
.faq__answer p:last-child { margin-bottom: 0; }

/* -------- Poem (framed epigraph) -------- */
.poem {
  background: var(--sage-mist);
  padding: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  border-bottom: 1px solid var(--line);
}
.poem__card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.poem__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  font-weight: 500;
  color: var(--honey);
  line-height: 0;
  margin: 0 0 1rem;
}
.poem__text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.75;
  color: var(--navy-deep);
  margin: 0;
}
.poem__final {
  display: block;
  margin-top: 0.85rem;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.1rem);
  color: var(--honey-deep);
  letter-spacing: 0.005em;
}
.poem__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.poem__caption::before,
.poem__caption::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--line);
}

/* -------- Services -------- */
.services__intro {
  max-width: var(--container-narrow);
  margin: 0 auto 3rem;
  text-align: center;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: var(--container);
  margin: 0 auto;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card h3 { margin-bottom: 0.25rem; }
.service-card p { color: var(--ink-soft); flex: 1; }
.service-card .link-arrow { align-self: flex-start; }

/* -------- About Amber -------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}
.about__photo {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  position: relative;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  background: var(--cream);
}
.about__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about__text .pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--navy-deep);
  border-left: 3px solid var(--honey);
  padding-left: 1rem;
  margin: 1.75rem 0 1rem;
  line-height: 1.4;
}
.about__signature {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--navy-soft);
  margin: 0 0 1.25rem;
}
@media (max-width: 780px) {
  .about { grid-template-columns: 1fr; }
  .about__photo { max-width: 360px; width: 100%; margin: 0 auto; }
}

/* -------- CTA -------- */
/* Offset the Contact anchor past the sticky header so the card lands
   with comfortable space above it (not hidden under the nav). */
#contact { scroll-margin-top: 5rem; }

.cta-block {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 6vw, 5rem) 1.5rem;
  border-radius: 16px;
  max-width: min(var(--container), 100% - 3rem);
  margin: 0 auto;
  background-image:
    radial-gradient(ellipse at 20% 100%, rgba(197, 144, 79, 0.18), transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(139, 163, 148, 0.2), transparent 50%);
}
.cta-block h2 { color: #fff; }
.cta-block p { color: rgba(255,255,255,0.82); max-width: 50ch; margin-inline: auto; }
.cta-block__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* -------- Footer -------- */
.site-footer {
  background: var(--navy-deep);
  color: #c2c9d6;
  padding: 3.5rem 1.5rem 1.5rem;
  font-size: 0.95rem;
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 2.5rem;
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* Column 1 — brand echoes the site header */
.site-footer__brand {
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.site-footer__brand-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--honey-soft);
  line-height: 1;
}
.site-footer__brand-sub {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.site-footer__tag {
  color: #9fa7b8;
  margin: 0 0 1rem;
  max-width: 32ch;
  line-height: 1.55;
}
.site-footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.site-footer__contact a {
  color: #9fa7b8;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-footer__contact a:hover { color: var(--honey-soft); border-color: var(--honey-soft); }

/* Columns 2 & 3 — headings + link stacks */
.site-footer__heading {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey-soft);
  margin: 0 0 1rem;
}
.site-footer__col nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.site-footer__col nav a {
  color: #9fa7b8;
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer__col nav a:hover { color: var(--honey-soft); }
.site-footer__placeholder {
  color: #7a8291;
  font-style: italic;
}

.site-footer__legal {
  max-width: var(--container);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #8892a3;
  font-size: 0.85rem;
  text-align: center;
}

/* ============================================================
   Mobile overrides (<= 640px)
============================================================ */
@media (max-width: 640px) {
  /* Poem: drop the hard line break so the text flows naturally on small screens */
  .poem__text br { display: none; }
}