/* ==========================================================================
   ML PSYCHOLOGY ROCKHAMPTON
   Static site built from "MLP_Site Proof_v2.pdf".

   The proof is a single 841.89 x 2309.6 pt artboard. Embedded images sit at
   ~1:1 against a 1200 px design frame, so every measurement below is the
   proof value converted at 1 pt = 1.42535 px and rounded to the nearest px.

   Deliberate departures from the proof are marked [DEPARTURE].
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette — sampled directly from the proof */
  --maroon:      #69373A;   /* body copy, headings, footer ground */
  --blush:       #EFADA1;   /* logo circle, hero button, section ground */
  --sage:        #BDC39C;   /* hero multiply, FAQ ground, inner-page header */
  --cream:       #F8DFB7;   /* hairline rules, form outline */
  --floral:      #E0A494;   /* sage multiplied over blush, resolved to flat */
  --white:       #FFFFFF;

  --maroon-tint: rgba(105, 55, 58, 0.14);
  --maroon-mid:  rgba(105, 55, 58, 0.55);

  /* Type */
  --font-display: 'Noto Serif Display', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-h1:      42px;   /* proof is 24 pt / 34 px; raised at client request.
                           42 is the largest that still holds 2 lines. */
  --fs-h2:      34px;   /* 24 pt — the proof uses one heading size throughout */
  --fs-body:    16px;   /* 11 pt */
  --fs-nav:     14px;
  --fs-btn:     13px;
  --fs-tagline: 9px;
  --fs-ack:     13px;   /* 8 pt in the proof — raised for legibility */
  --fs-legal:   12px;   /* 6 pt in the proof — raised at client's request */

  /* The proof sets body copy at 1.2. That is too tight to read comfortably
     on screen, so it ships at 1.35. Change this one value to 1.2 to match
     the proof exactly.                                          [DEPARTURE] */
  --lh-body: 1.35;
  --lh-head: 1.2;

  /* One blank line, matching the body leading. The proof uses 13.2 pt. */
  --blank-line: 22px;

  /* Layout — one reading container, one chrome container */
  --shell:        900px;   /* content sections */
  --shell-wide:  1120px;   /* hero copy, footer */
  --shell-header:1440px;   /* header — runs closer to the page edge */
  --gutter:     24px;

  --radius: 0px;          /* the proof uses hard corners throughout */
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--maroon);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 3px;
}

.hero :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--maroon);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Shared layout + type
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide {
  max-width: calc(var(--shell-wide) + var(--gutter) * 2);
}

.shell--header {
  max-width: calc(var(--shell-header) + var(--gutter) * 2);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: 0.005em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  margin: 0;
}

p + p { margin-top: var(--blank-line); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;          /* 25.1 pt */
  min-width: 148px;          /* 103.5 pt */
  padding: 8px 22px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  font-size: var(--fs-btn);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* The proof draws this blush on the photograph. Against the supplied hero
   image blush measures 1.33:1 and cannot be rescued without crushing the
   photo, so the outline and label are white — 4.9:1 over the scrim below.
                                                                [DEPARTURE] */
.btn--light { color: var(--white); }
.btn--light:hover,
.btn--light:focus-visible {
  background: var(--white);
  color: var(--maroon);
}

/* The proof draws the second button in blush on white — 1.88:1, well below
   the 4.5:1 minimum. Recoloured to maroon at the client's request; the
   outline geometry is unchanged.                               [DEPARTURE] */
.btn--dark { color: var(--maroon); }
.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--maroon);
  color: var(--white);
}

/* --------------------------------------------------------------------------
   4. Brand lockup
   -------------------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--white);
}

.brand__mark { width: 63px; height: 63px; flex: none; }

/* Supplied brand artwork (Asset 2 dark-ground / Asset 1 light-ground).
   Full lockup — circle, wordmark and tagline are all inside the SVG, so the
   accessible name lives on the img's alt text. */
.brand__lockup {
  display: block;
  height: 64px;
  width: auto;
  max-width: 100%;
}

.brand__text { display: block; }

.brand__word {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand__tagline {
  display: block;
  margin-top: 3px;
  color: var(--blush);
  font-size: var(--fs-tagline);
  font-weight: 400;
  letter-spacing: 0.19em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  padding-block: 42px;
}

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

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 56px;
}

.site-nav a {
  position: relative;
  color: var(--white);
  font-size: var(--fs-nav);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

/* Hamburger — no mobile layout exists in the proof, so this is new. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle__bar + .nav-toggle__bar { margin-top: 5px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 520px;
  padding-block: 190px 76px;
  background: var(--sage);
  color: var(--white);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

/* The proof multiplied a flat sage fill over the photograph at 100% (PDF form
   XObject Fm0 under ExtGState /GS1, BM /Multiply, ca 1). Dropped at the
   client's request in favour of the even wash below.           [DEPARTURE] */

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* One even wash across the whole frame, replacing both the sage multiply and
   the right-hand ramp. The supplied photograph is brightest (cream blazer,
   white notebook) exactly where the type sits, so without this the headline
   measures 1.14:1. At 0.55 the paragraph lands on 4.20:1, just under AA, so
   this is 0.60 — visually near-identical, and everything clears.
   Measured: headline 5.01:1, paragraph 4.91:1, button 5.66:1, nav 5.91:1.
                                                                [DEPARTURE] */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 18, 0.60);
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 2; }

.hero__copy {
  margin-left: 40%;
  max-width: 620px;
}

.hero__copy h1 { text-wrap: balance; }

.hero__copy p {
  margin-top: 20px;
  max-width: 516px;
}

.hero__copy .btn { margin-top: 39px; }

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */

.about {
  position: relative;
  padding-block: 96px 120px;
  background: var(--white);
  overflow: hidden;
}

.about__inner { position: relative; }

.about__copy { max-width: 542px; }

.about__copy h2 { margin-bottom: 19px; }

.accreditations {
  display: flex;
  align-items: center;
  gap: 42px;
  margin-top: 44px;
}

.accreditations img { width: auto; }
.accreditations li:nth-child(1) img { height: 46px; }
.accreditations li:nth-child(2) img { height: 43px; }

.about__portrait {
  position: absolute;
  right: -118px;
  bottom: -151px;
  width: 529px;              /* 371.1 pt */
  pointer-events: none;
}

.about__portrait img { width: 100%; }

/* --------------------------------------------------------------------------
   8. How I Can Help You
   -------------------------------------------------------------------------- */

.help {
  position: relative;
  padding-block: 90px 110px;
  background: var(--blush);
  overflow: hidden;
}

.help__floral {
  position: absolute;
  top: 11px;
  left: -24%;
  width: 76%;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.help__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 3fr;
}

.help__copy { grid-column: 2; }

.help__copy h2 { margin-bottom: 19px; }

.help__copy h3 { margin-bottom: 10px; }

.ruled-list { margin: 0; }
.ruled-list + h3 { margin-top: 27px; }
.ruled-list + p  { margin-top: 9px; }

/* 33.6 px per row — the proof steps its rules every 23.5 pt. */
.ruled-list li { padding-block: 6px; }
.ruled-list li + li { border-top: 1px solid var(--cream); }

/* --------------------------------------------------------------------------
   9. Session Details
   -------------------------------------------------------------------------- */

.session {
  padding-block: 80px 92px;
  background: var(--white);
}

.session__inner { text-align: center; }

.session__inner h2 { margin-bottom: 19px; }

.session__list {
  margin-inline: auto;
  max-width: 652px;
}

.session__list dt { font-weight: 600; }
.session__list dd { margin: 0 0 var(--blank-line); }
.session__list dd:last-child { margin-bottom: 0; }

.session__note {
  margin-inline: auto;
  margin-top: 38px;
  max-width: 652px;
}

.session .btn { margin-top: 49px; }

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */

.faq {
  padding-block: 84px 104px;
  background: var(--sage);
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 606px) 1fr;
  gap: 40px;
  align-items: center;
}

.faq__copy h2 { margin-bottom: 19px; }

.faq__item + .faq__item { margin-top: var(--blank-line); }

/* Centres the seal in the gap between the text column and the page edge.
   The text column ends at 50vw + 156px, so the midpoint of that gap and the
   page edge is 75vw + 78px — which is (25vw - 240px) beyond the shell edge. */
.faq__seal {
  justify-self: end;
  margin-right: calc(240px - 25vw);
}
/* Ring and monogram are separate files so the ring can turn on its own. Both
   carry the seal's original 161 x 161 viewBox, so stacking them at the same
   size re-registers the artwork exactly. */
.seal {
  position: relative;
  display: block;
  width: 264px;
  aspect-ratio: 1;
}

.seal__ring,
.seal__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */

.contact {
  padding-block: 80px 96px;
  background: var(--white);
}

.contact__inner { text-align: center; }

.contact__inner h2 { margin-bottom: 19px; }

.contact__inner > p {
  margin-inline: auto;
  max-width: 668px;
}

.contact__prompt {
  margin-top: var(--blank-line);
  font-weight: 600;
}

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

.form {
  margin-inline: auto;
  margin-top: 25px;
  max-width: 768px;          /* 538.6 pt — the outlined box in the proof */
  padding: 40px;
  border: 1px solid var(--cream);
  text-align: left;
}

.form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.form__field { margin-bottom: 22px; }
.form__row .form__field { margin-bottom: 0; }
.form__row + .form__field { margin-top: 22px; }

.form__field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form__field .req { color: var(--maroon); }
.form__field .opt {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}

.form input,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--maroon-tint);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: border-color 0.2s ease;
}

.form input:hover,
.form textarea:hover { border-color: var(--maroon-mid); }

.form input:focus,
.form textarea:focus {
  border-color: var(--maroon);
  outline: 1px solid var(--maroon);
  outline-offset: -2px;
}

.form textarea { resize: vertical; min-height: 140px; }

.form [aria-invalid='true'] { border-color: #B3261E; }

.form__error {
  margin-top: 6px;
  color: #B3261E;
  font-size: 13px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.form__status:empty { display: none; }
.form__status { font-size: 14px; }
.form__status--ok { color: var(--maroon); font-weight: 600; }
.form__status--err { color: #B3261E; }

.form.is-sending button[type='submit'] { opacity: 0.6; pointer-events: none; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding-block: 40px 26px;
  background: var(--maroon);
  color: var(--white);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  align-items: start;
}

/* Logo and tagline are one grid item so the tagline can't be pushed down by
   the taller acknowledgement column beside it. */
.site-footer__brand { grid-column: 1; }

.brand--stacked { align-items: center; gap: 14px; }
.brand--stacked .brand__mark { width: 70px; height: 70px; }
.brand--stacked .brand__word { font-size: 30px; letter-spacing: 0.04em; }

.brand__tagline--footer {
  margin-top: 6px;
  color: var(--sage);
}

.acknowledgement { grid-column: 2; }

.acknowledgement img { width: 58px; margin-bottom: 14px; }

.acknowledgement p {
  font-size: var(--fs-ack);
  line-height: 1.45;
}

.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 48px;
  color: var(--blush);
  font-size: var(--fs-legal);
}

.site-footer__legal { display: flex; gap: 8px; justify-content: center; }
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { text-decoration: underline; }

.site-footer__credit { text-align: right; }
.site-footer__credit a { text-decoration: none; }
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   13. Responsive
        No mobile layout exists in the proof — everything below is derived.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__copy { margin-left: 38%; }
  .about__portrait { right: -80px; width: 460px; }
  .about__copy { max-width: 500px; }
}

@media (max-width: 900px) {
  :root { --fs-h1: 36px; --fs-h2: 31px; }

  .about__copy { max-width: 58%; }
  .about__portrait { right: -60px; bottom: -70px; width: 380px; }

  .faq__inner { grid-template-columns: minmax(0, 1fr) 200px; gap: 40px; }
  .faq__seal { margin-right: 0; }
  .seal { width: 200px; }

  .help__inner { grid-template-columns: 1fr; }
  .help__copy { grid-column: 1; }
  .help__floral { left: -46%; width: 118%; opacity: 0.55; }
}

@media (max-width: 820px) {
  .nav-toggle { display: block; }

  .site-header { padding-block: 28px; }
  .brand__lockup { height: 56px; }

  .site-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    max-height: 0;
    overflow: hidden;
    background: var(--maroon);
    transition: max-height 0.3s ease;
  }

  .site-nav.is-open { max-height: 60vh; }

  .page-header .site-nav { background: var(--sage); }
  .page-header .site-nav li + li { border-top-color: rgba(105, 55, 58, 0.22); }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
  }

  .site-nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.16); }

  .site-nav a { display: block; padding: 16px 0; }
  .site-nav a::after { display: none; }

  .hero {
    min-height: 0;
    padding-block: 168px 72px;
  }
  .hero__copy { margin-left: 0; max-width: 560px; }


  .about { padding-block: 0 72px; }
  .about__inner { display: flex; flex-direction: column; }
  .about__copy { max-width: none; }

  /* On desktop the pink section below gives the cut-out something to stand
     on. Mobile has no such anchor, so it gets its own full-bleed blush band
     and sits on the base of it, using the same device rather than floating on
     white. The supplied cut-out is 1000 x 1000 with the subject at x 41-903,
     y 70-999, so its bottom edge is already flush; the small translate
     re-centres her against the uneven side padding. */
  .about__portrait {
    position: relative;
    inset: auto;          /* clears the desktop right/bottom bleed offsets */
    order: -1;
    width: auto;
    margin: 0 calc(var(--gutter) * -1) 44px;
    padding-top: 24px;
    background: var(--sage);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;   /* keeps the multiply below inside this block */
  }

  /* Grain over the sage so the band is not a flat fill. Generated by an
     feTurbulence data URI rather than a bitmap, so it costs no request and
     stays sharp at any density. Tiled at 140 px and multiplied, which only
     darkens, so it reads as paper rather than speckle. */
  .about__portrait::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    background-repeat: repeat;
    mix-blend-mode: multiply;
    opacity: 0.34;
    pointer-events: none;
  }

  .about__portrait img {
    position: relative;
    z-index: 1;
    width: min(380px, 88%);
    max-width: none;
    transform: translateX(2.75%);   /* subject centre is 47.25% of the file */
  }

  .faq__inner { grid-template-columns: 1fr; gap: 40px; }
  .faq__seal { justify-self: center; }

  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__brand { grid-column: 1; }
  .acknowledgement { grid-column: 1; }

  .site-footer__bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    text-align: center;
    margin-top: 36px;
  }
  .site-footer__credit { text-align: center; }
}

@media (max-width: 620px) {
  :root {
    --fs-h1: 31px;
    --fs-h2: 27px;
    --gutter: 20px;
  }

  .brand__lockup { height: 48px; }

  .brand--stacked .brand__mark { width: 58px; height: 58px; }

  .hero { padding-block: 146px 64px; }
  .hero__copy p { margin-top: 18px; }
  .hero__copy .btn { margin-top: 28px; }

  .btn { width: 100%; max-width: 320px; }

  .accreditations { gap: 30px; margin-top: 32px; }
  .accreditations li:nth-child(1) img { height: 48px; }
  .accreditations li:nth-child(2) img { height: 45px; }

  .help { padding-block: 64px 76px; }
  .help__floral { left: -60%; width: 150%; }

  .session { padding-block: 60px 64px; }
  .session .btn { margin-top: 36px; }

  .faq { padding-block: 60px 72px; }
  .seal { width: 150px; }

  .contact { padding-block: 60px 68px; }

  .form { padding: 24px 20px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .form__row .form__field { margin-bottom: 22px; }
  .form__row .form__field:last-child { margin-bottom: 0; }
  .form__actions { flex-direction: column; align-items: stretch; }

  .brand--stacked .brand__word { font-size: 25px; }
  .brand--stacked .brand__mark { width: 58px; height: 58px; }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .nav-toggle, .form, .btn { display: none !important; }
  body { color: #000; }
  .hero, .help, .faq, .site-footer { background: none !important; color: #000 !important; }
}


/* --------------------------------------------------------------------------
   15. Inner pages (legal, thank-you)
        Not in the proof — derived from the same tokens.        [DEPARTURE]
   -------------------------------------------------------------------------- */

.page-header {
  /* relative, not static — the mobile drawer is absolutely positioned and
     anchors to this element. */
  position: relative;
  inset: auto;
  padding-block: 28px;
  background: var(--sage);
}

/* Inner pages invert the header: sage ground, maroon type. Maroon on sage
   measures 5.14:1. */
.page-header .brand,
.page-header .site-nav a { color: var(--maroon); }

.page-header .nav-toggle__bar { background: var(--maroon); }

.page-header :focus-visible { outline-color: var(--maroon); }

.page {
  padding-block: 64px 80px;
}

.page__inner { max-width: 720px; }

.page h1 { margin-bottom: 8px; }

.page__updated {
  margin-bottom: 40px;
  font-size: 14px;
  opacity: 0.75;
}

.page h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 22px;
}

.page h2:first-of-type { margin-top: 0; }

.page p + p,
.page ul + p,
.page p + ul { margin-top: var(--blank-line); }

.page ul {
  margin-top: var(--blank-line);
  padding-left: 22px;
  list-style: disc;
}

.page li + li { margin-top: 8px; }

.page a { color: var(--maroon); }

.page .draft-note {
  margin-bottom: 40px;
  padding: 18px 20px;
  border: 1px solid var(--cream);
  background: #FDF8EF;
  font-size: 14px;
}

.page__back { display: inline-block; margin-top: 48px; }

/* Thank-you */
.thanks {
  display: flex;
  align-items: center;
  min-height: 60vh;
  padding-block: 80px;
  text-align: center;
}

.thanks__inner { max-width: 560px; margin-inline: auto; }
.thanks h1 { margin-bottom: 19px; }
.thanks .btn { margin-top: 40px; }

/* --------------------------------------------------------------------------
   16. Motion
        MOTION_INTENSITY 4 of 10. Every animation here earns its place:

          · Hero entrance     - establishes reading order at first paint.
          · Section reveal    - each section announces itself as it becomes
                                relevant, rather than all arriving at once.
          · Child stagger     - heading then content, in reading sequence.
          · Press feedback    - acknowledges the tap on interactive elements.

        Nothing loops, nothing parallaxes, nothing hijacks the scroll. Only
        transform and opacity are animated, so this stays on the compositor.

        The whole layer is gated twice: on .has-motion (added by main.js, so
        the site is fully visible with JavaScript off) and on a reduced-motion
        preference. Either gate failing leaves the page completely static.
   -------------------------------------------------------------------------- */

:root {
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 620ms;
  --reveal-stagger: 70ms;
  --reveal-shift: 18px;
}

@media (prefers-reduced-motion: no-preference) {

  /* --- Scroll reveal ----------------------------------------------------- */

  .has-motion [data-reveal]:not([data-reveal='fade']) > * {
    opacity: 0;
    transform: translate3d(0, var(--reveal-shift), 0);
    transition:
      opacity   var(--reveal-duration) var(--ease-out-quint),
      transform var(--reveal-duration) var(--ease-out-quint);
  }

  .has-motion [data-reveal]:not([data-reveal='fade']).is-visible > * {
    opacity: 1;
    transform: none;
  }

  /* The portrait and the seal fade only. They must never be given a transform
     here: on mobile the portrait's img already carries
     translate(-4.1%, -7%) to crop the cut-out to its subject, and setting
     transform (or resetting it to none) would clobber that crop. */
  .has-motion [data-reveal='fade'] > * {
    opacity: 0;
    transition: opacity 900ms var(--ease-out-quint);
  }

  .has-motion [data-reveal='fade'].is-visible > * { opacity: 1; }

  /* On mobile the portrait sits on a blush band. Fading the image alone would
     leave the band to arrive on its own, so the whole block fades instead. */
  @media (max-width: 820px) {
    .has-motion .about__portrait > * { opacity: 1; }
    .has-motion .about__portrait {
      opacity: 0;
      transition: opacity 900ms var(--ease-out-quint);
    }
    .has-motion .about__portrait.is-visible { opacity: 1; }
  }

  /* The seal is a ring of type set around a circle, so turning it is the one
     perpetual motion on this page the artwork itself asks for. Slow enough to
     read as a stamp settling rather than a spinner: one revolution every 45
     seconds, about 8 degrees per second. The monogram stays put. Not gated on
     .has-motion, so it still turns without JavaScript. */
  .seal__ring {
    animation: seal-turn 45s linear infinite;
    transform-origin: 50% 50%;
  }

  @keyframes seal-turn {
    to { transform: rotate(360deg); }
  }

  .has-motion [data-reveal].is-visible > *:nth-child(2) { transition-delay: calc(var(--reveal-stagger) * 1); }
  .has-motion [data-reveal].is-visible > *:nth-child(3) { transition-delay: calc(var(--reveal-stagger) * 2); }
  .has-motion [data-reveal].is-visible > *:nth-child(4) { transition-delay: calc(var(--reveal-stagger) * 3); }
  .has-motion [data-reveal].is-visible > *:nth-child(5) { transition-delay: calc(var(--reveal-stagger) * 4); }
  .has-motion [data-reveal].is-visible > *:nth-child(6) { transition-delay: calc(var(--reveal-stagger) * 5); }

  /* --- Hero entrance ------------------------------------------------------
     Above the fold, so this runs on load rather than on intersection. */

  .has-motion .hero__copy > * {
    opacity: 0;
    animation: rise var(--reveal-duration) var(--ease-out-quint) forwards;
  }
  .has-motion .hero__copy > *:nth-child(1) { animation-delay: 120ms; }
  .has-motion .hero__copy > *:nth-child(2) { animation-delay: 220ms; }
  .has-motion .hero__copy > *:nth-child(3) { animation-delay: 320ms; }

  /* The photograph settles behind the copy instead of appearing with it. */
  .has-motion .hero__media img {
    animation: settle 1400ms var(--ease-out-quint) forwards;
  }

  @keyframes rise {
    from { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes settle {
    from { transform: scale(1.04); }
    to   { transform: scale(1); }
  }

  /* --- Interaction feedback ---------------------------------------------- */

  .btn { transition: background-color 0.2s ease, color 0.2s ease, transform 0.12s ease; }
  .btn:active { transform: translateY(1px); }

  .nav-toggle:active { transform: scale(0.94); }

  .accreditations img,
  .site-footer__legal a,
  .site-footer__credit a { transition: opacity 0.2s ease; }

  .accreditations li:hover img { opacity: 0.72; }
}