/* ============================================================
   Jacqueline Bennett Career Counselling — design tokens & base
   ============================================================ */

:root {
  /* Brand colors sampled directly from Jacqueline's existing logo/card */
  --ink: #313b3f;
  --ink-soft: #5b6469;
  --paper: #f7f3ec;
  --clay: #a15c30;
  --clay-deep: #7e4623;
  --sage: #fca311; /* Pantone 137 C */
  --sage-deep: #d98a0e;
  --pop: #85600f; /* same deep gold tone as the headings — used for primary CTAs and active nav state */
  --pop-deep: #6b4c0c;
  --heading-gold: #85600f; /* a darkened tone of the logo gold, deep enough to pass contrast for heading text */
  --logo-gold: #f0ac2b; /* the logo's true, undarkened gold — used only for small decorative marks (never text) */
  --sand: #e4dacb;
  --sand-deep: #d8caae;
  --line: #c9bda8;
  --white: #fffdf9;

  --font-display: "Lora", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Public Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 62ch;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 500; color: var(--heading-gold); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 600; }

p { margin: 0 0 1em; max-width: var(--measure); }
p.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-deep);
  margin-bottom: 1em;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--logo-gold);
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-3);
}

section { padding: var(--space-5) 0; }
section.tight { padding: var(--space-4) 0; }
section[id] { scroll-margin-top: 76px; }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn-primary {
  background: var(--pop);
  color: var(--white);
}
.btn-primary:hover { background: var(--pop-deep); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-1px); }

.btn-arrow { transition: transform 0.18s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* solid white (the logo's native background) rather than the warm paper
     tone, so the gold/charcoal logo reads with real contrast, not a wash */
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem var(--space-3);
  max-width: 1120px;
  margin: 0 auto;
}

/* the big brand statement at the very top of the page — separate from the
   sticky nav below so the wordmark can be the real opening moment, and the
   nav can stay quiet and out of the way */
.brand-hero {
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-3);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  overflow-x: hidden;
}
.brand-hero__inner {
  max-width: 1120px;
  margin: 0 auto;
}

.brand--hero .brand-mark {
  height: 120px;
}
.brand--hero .brand-text {
  left: 145px;
}
.brand--hero .brand-name {
  top: 8%;
  font-size: clamp(1.4rem, 7vw, 3.2rem);
}
.brand-hero .brand--hero small {
  top: 89%;
  /* fluid: shrinks enough to stay on one line even at narrow widths,
     caps out at a more restrained size on wide screens */
  font-size: clamp(0.68rem, 3.2vw, 1.35rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
}

@media (max-width: 640px) {
  .brand--hero .brand-mark { height: 70px; }
  .brand--hero .brand-text { left: 82px; }
}

@media (max-width: 480px) {
  .brand--hero .brand-mark { height: 54px; }
  .brand--hero .brand-text { left: 62px; }
  .brand--hero .brand-name { font-size: clamp(1.15rem, 6.2vw, 1.9rem); }
}

/* one continuous asset (icon + flowing tail), traced directly from
   Jacqueline's original card — never reassembled by hand, so the line
   always stays attached exactly as it does there. The name and subtitle
   are overlaid on top of it, positioned at the same proportions (as a
   % of the image's own height) that the name/"PSYCHOLOGY" sit at on the
   original card: name above the line, subtitle below it. */
.brand {
  position: relative;
  display: inline-flex;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  height: 56px;
  width: auto;
  display: block;
}

.brand-text {
  position: absolute;
  left: 68px;
  top: 0;
  height: 100%;
  width: max-content;
}

.brand-name {
  position: absolute;
  top: 21.5%;
  left: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.brand small {
  position: absolute;
  top: 89%;
  left: 0;
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 4px;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--ink); }

.nav-list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--pop);
  border-radius: 2px;
}

@media (max-width: 820px) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: 0.8rem;
  }

  .nav-list {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* scales from ~8px at a small phone up to ~12px near the desktop handoff at 820px */
    gap: clamp(0.5rem, 0.35rem + 0.5vw, 0.75rem);
  }

  .nav-list li { flex: 0 0 auto; }

  .nav-list a {
    display: block;
    /* padding is in em, so it scales together with font-size below */
    padding: 0.45em 0.9em;
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
    /* fluid type: ~13.1px (0.82rem) at 375px wide, up to 16px (1rem) at the 820px handoff to desktop nav */
    font-size: clamp(0.82rem, 0.666rem + 0.65vw, 1rem);
    background: var(--white);
  }

  .nav-list a[aria-current="page"] {
    background: var(--pop);
    border-color: var(--pop);
    color: var(--white);
  }
  .nav-list a[aria-current="page"]::after { display: none; }
}

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-4) 0 var(--space-4);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-4);
  align-items: start;
}

.hero h1 { margin-bottom: 0; }

/* a quiet echo of the logo's own tail-line, so the page's opening moment
   rhymes with the brand mark instead of introducing a second, unrelated
   flourish */
.hero__rule {
  width: 140px;
  margin: 0.5em 0 1.3em;
}
.hero__rule svg { width: 100%; height: auto; display: block; }
.hero__rule path { fill: none; stroke: var(--logo-gold); stroke-width: 2; stroke-linecap: round; }
.hero__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* the "not X, it is Y" closing thought — given a quiet visual break from the
   surrounding paragraphs so its contrast reads as a considered statement */
.hero__statement {
  margin-top: var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid var(--heading-gold);
  max-width: 42ch;
}
.hero__statement p {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5em;
}
.hero__statement p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

/* ---------- Cards / grid ---------- */

.who-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
@media (max-width: 700px) {
  .who-list { grid-template-columns: 1fr; }
}
.who-list__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.who-list__label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--heading-gold);
  margin-bottom: 0.6em;
}
.who-list__item p { margin: 0; }

.hero__rule--qualifications { margin-top: var(--space-4); }

.qualifications-heading {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.qualifications-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  max-width: 62ch;
}
.qualifications-list li {
  position: relative;
  padding-left: 1.1em;
  line-height: 1.5;
}
.qualifications-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay);
}

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Section variants ---------- */

.section--sand { background: var(--sand); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-4); } }

.portrait-frame {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--sand) 0%, var(--sand-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.portrait-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }

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

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
}
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.45em;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.8em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
  border-color: var(--sage);
}

.field textarea { resize: vertical; min-height: 120px; }

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

.form-status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--success { background: #faf0da; color: var(--sage-deep); }
.form-status--error { background: #f3ded6; color: var(--clay-deep); }

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

.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-4) 0 var(--space-3);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.site-footer__brand { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); margin-bottom: 0.3em; }

.site-footer__lockup {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.site-footer__mark {
  height: 34px;
  width: 34px;
  flex-shrink: 0;
}

/* ---------- Section-lead photo (small figure beside the section's own
   eyebrow + heading, rather than a standalone strip between sections) ---------- */
.section-lead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.section-lead__img {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.section-lead__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.02);
}
.section-lead .eyebrow { margin-bottom: 0.3em; }
.section-lead h2 { margin-bottom: 0; }

@media (max-width: 480px) {
  .section-lead__img { width: 68px; height: 68px; }
}

/* ---------- Focus visibility ---------- */

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}