/* ===========================================================================
   Deborah's Hoppy Hearts — one-page marketing site
   Recreated from design option 1a. Every value here traces to
   docs/DESIGN-HANDOFF.md; see docs/REFERENCE.md for how to read the mockup.

   Designed widths: 1000px desktop, 390px phone.
   No shadows by design — separation comes from the cream / sage-grey bands.
   =========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Colour */
  --page-cream: #faf8f1;      /* page bg, About + QR sections, pricing cards */
  --band-cream: #f4f1e6;      /* header, hero, footer */
  --band-sage: #eaeade;       /* trust bar, pricing section, phone QR block */
  --card-cream: #f1eee2;      /* phone pricing rows */
  --sage: #6b7f5c;            /* buttons, prices, eyebrows, accents */
  --sage-hover: #5a6d4d;
  --ink: #4a3b32;             /* headings, nav */
  --body: #5a4c42;            /* body copy */
  --muted: #8a7c70;           /* qualifiers, footnotes */
  --rule: rgba(107, 127, 92, .2);
  --rule-25: rgba(107, 127, 92, .25);
  --rule-30: rgba(107, 127, 92, .3);
  --rule-35: rgba(107, 127, 92, .35);
  --rule-40: rgba(107, 127, 92, .4);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, serif;
  --script: "Parisienne", cursive;

  /* Layout */
  --max-width: 1000px;
  --pad-x: 44px;              /* section horizontal padding, desktop */
  --pad-x-header: 34px;       /* header and trust bar */
  --radius-btn: 2px;
  --radius-card: 3px;
}

/* ── Accessibility note: palette contrast ────────────────────────────────────
   The approved palette is reproduced exactly above. Four of its combinations
   land below the WCAG 2.1 AA minimum of 4.5:1 for normal-size text:

     --muted  #8a7c70 on page cream #faf8f1   3.80:1   (card footnotes)
     --muted  #8a7c70 on sage band  #eaeade   3.33:1   (pricing footnote)
     --sage   #6b7f5c on page cream #faf8f1   4.10:1   (eyebrows, location)
     #fff on --sage #6b7f5c                   4.36:1   (solid buttons)

   Changing brand colours is the client's call, not ours, so the design ships
   as approved. If she wants AA, uncommenting the block below is the whole fix:
   the same hues darkened the minimum amount needed, no layout change.

:root {
  --muted: #73675d;   /* 5.16 on cream, 4.53 on the sage band */
  --sage:  #5d6e50;   /* 5.18 on cream, 4.54 on the sage band, 5.51 for white */
  --sage-hover: #4c5b42;
}
   ────────────────────────────────────────────────────────────────────────── */

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

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

body {
  margin: 0;
  background: var(--page-cream);
  color: var(--body);
  font: 400 17px/1.65 var(--serif);
}

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

h1, h2, h3, p, ul, address { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: var(--sage); }

:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 1px;
}

.visually-hidden {
  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; border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -150%);
  z-index: 100;
  padding: 10px 18px;
  background: var(--sage);
  color: #fff;
  font: 600 12px/1 var(--serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ── Band layout ─────────────────────────────────────────────────────────── */
/* Each section is a full-bleed colour band whose *content* is capped at
   1000px. --bleed is the leftover gutter either side of that cap, so the
   background reaches the viewport edges while the content stays aligned.
   (`100%` resolves against the containing block — always viewport width
   here — so there is no circular dependency with the element's own padding.) */
.site-header,
.hero,
.trust,
.about,
.pricing,
.qr,
.site-footer {
  --bleed: max(0px, calc((100% - var(--max-width)) / 2));
}

/* ── Shared pieces ───────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  border-radius: var(--radius-btn);
  font: 600 12px/1 var(--serif);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn--solid {
  padding: 14px 26px;
  background: var(--sage);
  color: #fff;
}
.btn--solid:hover,
.btn--solid:focus-visible { background: var(--sage-hover); }

.eyebrow {
  font: 400 11px/1 var(--serif);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sage);
}
/* The pricing eyebrow reads "Bunny parties" on desktop and "Party prices"
   on phones, per the approved mock. */
.eyebrow__narrow { display: none; }

/* Parisienne is used for exactly four strings across the page. */
.script-heading {
  font-family: var(--script);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px calc(var(--bleed) + var(--pad-x-header));
  background: var(--band-cream);
  border-bottom: 1px solid var(--rule);
}

.site-header__logo { display: block; line-height: 0; }
.site-header__logo img {
  width: 216px;
  /* Drops the logo's white background into the cream band. */
  mix-blend-mode: multiply;
}

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

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 400 13px/1 var(--serif);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-nav__list a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__list a[aria-current="page"] { border-bottom-color: var(--sage); }

.site-nav__call { padding: 11px 20px; letter-spacing: .12em; white-space: nowrap; }

/* Hamburger — three 20x1px bars, 4px apart. Hidden until the nav collapses. */
.nav-toggle {
  display: none;
  width: 40px; height: 34px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px; height: 1px;
  background: var(--ink);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after  { top: 5px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* No inner padding of its own — the text column supplies it and the photo
     runs flush to the content edge, as in the mock. */
  padding-inline: var(--bleed);
  background: var(--band-cream);
}

/* The photo comes first in the DOM so it stacks above the text on phones
   without needing `order`. At desktop the columns are placed explicitly:
   text left, photo right. */
.hero__text  { grid-area: 1 / 1; }
.hero__photo { grid-area: 1 / 2; }

.hero__text { padding: 64px var(--pad-x); }

.hero__heading { font-weight: 400; }
.hero__line1,
.hero__script,
.hero__line3 { display: block; }

.hero__line1 { font: 400 46px/1.05 var(--serif); color: var(--ink); }
.hero__script {
  font: 400 66px/1 var(--script);
  color: var(--sage);
  margin: 6px 0 2px;
  white-space: nowrap;
}
.hero__line3 { font: 400 40px/1.1 var(--serif); color: var(--ink); }

.hero__divider {
  width: 120px; height: 1px;
  background: var(--rule-40);
  margin: 26px 0;
}

.hero__subhead {
  font: 400 19px/1.5 var(--serif);
  color: var(--body);
  max-width: 330px;
  margin-bottom: 28px;
}

.hero__cta { display: flex; gap: 12px; align-items: center; }
.hero__cta-aside { font: 400 15px/1 var(--serif); color: var(--sage); white-space: nowrap; }
.hero__cta-aside a { color: inherit; text-decoration: none; }
.hero__cta-aside a:hover,
.hero__cta-aside a:focus-visible { text-decoration: underline; }
.hero__cta-narrow { display: none; }

/* 400px tall and vertically centred in the row — the text column is taller,
   so cream shows above and below the photo, as in the mock. */
.hero__photo img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* ── Trust bar ───────────────────────────────────────────────────────────── */
.trust {
  padding: 30px calc(var(--bleed) + var(--pad-x-header));
  background: var(--band-sage);
}
.trust__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust__list li {
  text-align: center;
  font: 400 13px/1.5 var(--serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust__list li:not(:last-child) { border-right: 1px solid var(--rule-25); }

/* ── About ───────────────────────────────────────────────────────────────── */
.about {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 56px calc(var(--bleed) + var(--pad-x));
}
.about__photo img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.about .script-heading { font-size: 48px; margin: 10px 0 16px; }
.about__copy { font: 400 17px/1.65 var(--serif); color: var(--body); }
.about__location {
  font: 400 16px/1.6 var(--serif);
  color: var(--sage);
  margin-top: 18px;
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.pricing {
  padding: 52px calc(var(--bleed) + var(--pad-x));
  background: var(--band-sage);
  text-align: center;
}
.pricing__heading { font-size: 50px; margin: 8px 0 26px; }

.pricing__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 860px;
  margin: 0 auto 34px;
  text-align: left;
}

.card {
  background: var(--page-cream);
  padding: 22px;
  border-radius: var(--radius-card);
  /* The one sanctioned shadow in the design, and only on hover. */
  transition: box-shadow .15s ease;
}
.card:hover { box-shadow: 0 2px 8px rgba(74, 59, 50, .08); }

.card__title { font: 400 20px/1.2 var(--serif); color: var(--ink); }
.card__qualifier {
  font: 400 13px/1.5 var(--serif);
  color: var(--muted);
  margin: 4px 0 12px;
}
.card__price { font: 600 26px/1 var(--serif); color: var(--sage); }
.card__footnote {
  font: 400 12px/1.4 var(--serif);
  color: var(--muted);
  margin-top: 4px;
}
/* Width-specific labels — see the note in index.html. */
.card__qualifier-narrow,
.card__price-narrow { display: none; }

.pricing__footnote {
  font: 400 14px/1.5 var(--serif);
  color: var(--muted);
  margin-top: 14px;
}

/* ── QR block ────────────────────────────────────────────────────────────── */
.qr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 44px calc(var(--bleed) + 44px);
  background: var(--page-cream);
}
/* `display: flex` above outranks the browser's own [hidden] rule, so the
   markup's `hidden` attribute needs this to actually take. */
.qr[hidden] { display: none; }
.qr__code {
  width: 118px; height: 118px;
  flex: none;
  border: 1px solid var(--rule-30);
}
.qr__heading { font-size: 34px; }
.qr__copy {
  font: 400 16px/1.55 var(--serif);
  color: var(--body);
  max-width: 280px;
  margin-top: 8px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  padding: 36px calc(var(--bleed) + var(--pad-x));
  background: var(--band-cream);
  border-top: 1px solid var(--rule);
}
.site-footer__logo img { width: 200px; mix-blend-mode: multiply; }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  font: 400 15px/1.9 var(--serif);
  font-style: normal;
  color: var(--body);
}
.site-footer__contact a {
  color: var(--body);
  text-decoration: none;
  width: fit-content;
}
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: var(--sage);
  text-decoration: underline;
}

.site-footer__social { text-align: right; font: 400 14px/1.8 var(--serif); }
.site-footer__social a { color: var(--body); text-decoration: none; }
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  color: var(--sage);
  text-decoration: underline;
}
/* The Facebook mark sits where the text link used to. inline-flex keeps the
   focus ring tight to the glyph instead of the full line box. */
.site-footer__fb {
  display: inline-flex;
  color: var(--body);
  transition: color .15s ease;
}
.site-footer__fb:hover,
.site-footer__fb:focus-visible { color: var(--sage); }
/* Kills the underline the generic .site-footer__social a:hover rule adds —
   there is no text to underline, and it draws a stray line under the icon. */
.site-footer__fb:hover,
.site-footer__fb:focus-visible { text-decoration: none; }

.site-footer__tagline {
  font: 400 13px/1.4 var(--serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  margin-top: 10px;
}

/* Full-width line under the three footer columns. */
.site-footer__colophon {
  grid-column: 1 / -1;
  /* The mobile footer sets justify-items: center, which would shrink this to
     the text width and cut the rule short. */
  justify-self: stretch;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-30);
  text-align: center;
  font: 400 12px/1.5 var(--serif);
  letter-spacing: .08em;
  color: var(--sage);
}
/* No text-transform here on purpose — uppercasing flattens the RmarTech
   camel-case into RMARTECH and loses the brand's own spelling. */
.site-footer__colophon-name {
  color: var(--body);
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .15s ease;
}
.site-footer__colophon-name:hover,
.site-footer__colophon-name:focus-visible {
  color: var(--sage);
  text-decoration: underline;
}

/* ===========================================================================
   Responsive — transitions documented in docs/DESIGN-HANDOFF.md
   =========================================================================== */

/* Nav collapses behind the hamburger below 768px. */
@media (max-width: 767px) {
  .nav-toggle { display: flex; }

  .site-header { flex-wrap: wrap; }

  .site-nav {
    display: none;
    order: 3;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 14px;
  }
  .site-nav.is-open { display: flex; }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .site-nav__list a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav__list a:hover,
  .site-nav__list a:focus-visible,
  .site-nav__list a[aria-current="page"] {
    border-bottom-color: var(--rule);
    color: var(--sage);
  }

  .site-nav__call { margin-top: 14px; text-align: center; }
}

/* Hero and About stack; hero type steps down to the phone scale. */
@media (max-width: 860px) {
  :root { --pad-x: 20px; --pad-x-header: 20px; }

  .hero { grid-template-columns: 1fr; }
  /* Single column — DOM order already puts the photo first. */
  .hero__text,
  .hero__photo { grid-area: auto; }
  .hero__photo img { height: 210px; }

  .hero__text { padding: 28px var(--pad-x); text-align: center; }
  /* The vw terms are tuned so the designed 390px width lands exactly on the
     mock's 28 / 44 / 24, while the floors keep Parisienne legible (never
     below ~40px) down to 320px. */
  .hero__line1  { font-size: clamp(24px, 7.2vw, 28px); }
  .hero__script { font-size: clamp(40px, 11.3vw, 44px); margin: 4px 0; }
  .hero__line3  { font-size: clamp(21px, 6.2vw, 24px); }

  .hero__divider { display: none; }
  .hero__subhead {
    font-size: 16px;
    max-width: none;
    margin: 16px 0 20px;
  }
  /* Phone copy is the shorter two-sentence subhead. */
  .hero__subhead-tail { display: none; }

  .hero__cta { display: block; }
  .hero__cta-btn {
    display: block;
    padding: 16px;
    font-size: 13px;
    text-align: center;
  }
  .hero__cta-wide,
  .hero__cta-aside { display: none; }
  .hero__cta-narrow { display: inline; }

  .about { grid-template-columns: 1fr; gap: 24px; }
  .about__photo { order: -1; }             /* photo first */
  .about .script-heading { font-size: clamp(34px, 9vw, 48px); }

  .pricing { padding: 30px calc(var(--bleed) + var(--pad-x)); }
  .pricing__heading { font-size: clamp(34px, 9vw, 50px); }
  /* 4-up becomes 2-up before collapsing to rows. */
  .pricing__cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Trust bar goes 2x2 and loses its dividers; footer and QR stack. */
@media (max-width: 700px) {
  .trust { padding: 26px calc(var(--bleed) + var(--pad-x-header)); }
  .trust__list { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .trust__list li:not(:last-child) { border-right: 0; }

  .qr {
    flex-direction: column;
    gap: 14px;
    padding: 28px calc(var(--bleed) + var(--pad-x));
    text-align: center;
    background: var(--band-sage);
  }
  .qr__code { width: 104px; height: 104px; }
  .qr__heading { font-size: 28px; }
  .qr__copy { display: none; }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    padding: 26px calc(var(--bleed) + var(--pad-x));
    text-align: center;
  }
  .site-footer__contact { align-items: center; }
  .site-footer__social { text-align: center; }
}

/* Pricing cards become the stacked row treatment. */
@media (max-width: 560px) {
  .pricing__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  /* Rows: title + qualifier on the left, price on the right. .card__head
     keeps that pairing together as a single flex item. */
  .card {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: var(--card-cream);
    padding: 16px;
  }
  .card:hover { box-shadow: none; }
  .card__head { min-width: 0; }

  .card__title { font-size: 18px; }
  .card__qualifier { font-size: 12px; line-height: 1.4; margin: 0; }
  .card__price { font-size: 22px; white-space: nowrap; }
  .card__footnote { display: none; }

  .card__qualifier-wide,
  .card__price-wide { display: none; }
  .card__qualifier-narrow,
  .card__price-narrow { display: inline; }
  .eyebrow__wide { display: none; }
  .eyebrow__narrow { display: inline; }

  /* Outlined rather than solid at this width. */
  .pricing__pdf {
    display: block;
    padding: 15px;
    background: none;
    color: var(--sage);
    border: 1px solid var(--rule-35);
    letter-spacing: .14em;
    text-align: center;
  }
  .pricing__pdf:hover,
  .pricing__pdf:focus-visible {
    background: none;
    border-color: var(--sage);
    color: var(--sage-hover);
  }
}

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