/* ============================================================
   Tail & Blush — Lip Blush landing page
   Self-hosted fonts: drop real files into fonts/ and uncomment
   the @font-face blocks below before launch (see fonts/README.txt).
   Until then this falls back to a close-matching system stack.
   ============================================================ */

/*
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair-display-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

:root {
  --color-cream: #faf6f2;
  --color-white: #ffffff;
  --color-burgundy: #5c1a2e;
  --color-burgundy-dark: #43101f;
  /* Darkened from the original #c48a95/#a86f7c — those failed WCAG AA
     contrast (~2.8:1 / ~4.0:1) for white button text and for the
     eyebrow labels that also use rose-dark. These pass at ~4.8:1/~6:1
     while staying in the same dusty-rose family. */
  --color-rose: #936770;
  --color-rose-dark: #7d585f;
  --color-text: #2b2321;
  --color-text-muted: #6b5c58;
  --color-border: #e8dcd6;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --max-width: 560px;
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-burgundy);
  line-height: 1.2;
  margin: 0 0 16px;
}

h1 {
  font-size: 2.1rem;
}

h2 {
  font-size: 1.6rem;
}

p {
  margin: 0 0 16px;
}

.section {
  padding: 48px 0;
}

.section--cream {
  background: var(--color-cream);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--color-rose-dark);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

/* Real photos */
.photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.photo--hero {
  aspect-ratio: 21 / 9;
}

.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.photo--before-after {
  aspect-ratio: 1 / 1;
}

.photo--headshot {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 16px;
}

/* Site logo (header) */
.site-header {
  padding: 14px 20px;
}

.site-logo {
  height: 40px;
  width: auto;
}

/* Hero */
.hero {
  padding: 40px 0 32px;
  background: var(--color-cream);
}

.hero__subhead {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

/* Compact hero — tightened so the booking form directly below still
   fits in the first viewport on mobile and desktop. */
.hero--compact {
  padding: 12px 0 10px;
}

.hero--compact h1 {
  font-size: 1.25rem;
  margin-bottom: 6px;
}

.hero--compact .hero__subhead {
  font-size: 0.78rem;
  margin-bottom: 8px;
}

/* Buttons */
.btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: var(--color-rose);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 16px 24px;
  border: none;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-rose-dark);
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-burgundy);
  text-decoration: underline;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0;
}

/* Reviews */
.review {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.review p {
  font-style: italic;
  margin-bottom: 8px;
}

.review cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-burgundy);
  font-size: 0.9rem;
}

.disclaimer {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* Price */
.price-box {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.price-box__amount {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-burgundy);
  display: block;
  margin-bottom: 4px;
}

/* Consultation details list */
.details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.details-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.details-list li:last-child {
  border-bottom: none;
}

/* Form */
.form-section {
  background: var(--color-burgundy);
  color: var(--color-white);
}

.form-section h2 {
  color: var(--color-white);
}

/* Heading shown only in the desktop split-screen layout — mobile's
   compact form has no room for it and doesn't need it, since it sits
   right under the hero headline already. */
.form-section__heading {
  display: none;
}

.form-field {
  margin-bottom: 14px;
}

.form-field label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.form-field input[type="text"],
.form-field input[type="tel"],
.form-field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-white);
  color: var(--color-text);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.form-checkbox input {
  margin-top: 3px;
  flex-shrink: 0;
}

.form-consent {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 16px 0;
}

.form-consent a {
  color: var(--color-white);
}

/* Compact form variant — used for the form directly under the hero so
   it fits above the fold. Field labels/copy are unchanged, only spacing. */
.form-section--compact {
  padding: 12px 0 16px;
}

.form-section--compact .form-field {
  margin-bottom: 6px;
}

.form-section--compact .form-field label {
  font-size: 0.74rem;
  margin-bottom: 2px;
}

.form-section--compact .form-field input {
  padding: 8px 10px;
  font-size: 0.9rem;
}

.form-section--compact .form-checkbox {
  font-size: 0.7rem;
  margin-bottom: 4px;
  gap: 6px;
}

.form-section--compact .form-consent {
  font-size: 0.64rem;
  margin: 6px 0;
}

.form-section--compact .btn {
  padding: 11px 24px;
  font-size: 0.9rem;
}

/* Footer */
.site-footer {
  background: var(--color-burgundy-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: 24px 0 32px;
  font-size: 0.78rem;
  text-align: center;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer p {
  margin: 0 0 8px;
}

/* Cookie consent banner */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 16px 20px 20px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1000;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner p {
  font-size: 0.85rem;
  margin-bottom: 12px;
}

.cookie-banner__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cookie-banner__actions .btn {
  padding: 12px;
  font-size: 0.9rem;
}

.btn-secondary {
  background: var(--color-white);
  color: var(--color-burgundy);
  border: 1px solid var(--color-burgundy);
}

.btn-secondary:hover {
  background: var(--color-cream);
}

/* Sticky mobile "Book" bar — mobile only; stays visible while the rest
   of the page scrolls, and always points at the single booking form. */
.sticky-cta {
  display: none;
}

/* Explicit override so the hidden state always wins over the mobile
   display:block rule below, regardless of source order. */
.sticky-cta[hidden] {
  display: none;
}

@media (max-width: 639px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 10px 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  }

  .sticky-cta .btn {
    padding: 13px;
    font-size: 0.92rem;
  }

  /* Leave room so the sticky bar never covers page content */
  body {
    padding-bottom: 60px;
  }
}

/* Basic desktop widening */
@media (min-width: 640px) {
  .cookie-banner__actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  .cookie-banner__actions .btn {
    width: auto;
  }
}

/* Wider desktop/tablet container — the page is single-column at every
   width; this only widens that column and nudges up type so it doesn't
   look lost in the extra room. Mobile (<640px) is untouched, and the
   compact above-the-fold hero+form fit still holds at this width. */
@media (min-width: 900px) {
  :root {
    --max-width: 920px;
  }

  .site-logo {
    height: 52px;
  }

  /* Flush left, matching the full-bleed hero band below it, rather
     than sitting indented inside the centered 920px column. */
  .site-header {
    max-width: none;
    padding: 20px 32px;
  }

  body {
    font-size: 1.0625rem;
  }

  h2 {
    font-size: 1.85rem;
  }

  .hero--compact h1 {
    font-size: 1.9rem;
    margin-bottom: 10px;
  }

  .hero--compact .hero__subhead {
    font-size: 1.05rem;
    margin-bottom: 14px;
  }

  /* A bit more vertical breathing room now that content blocks (review
     cards, price box) are 880px wide instead of 520px — 48px of padding
     reads as cramped at that width. */
  .section {
    padding: 64px 0;
  }

  /* Split-screen hero: image+headline on the left, the booking form on
     the right, full-bleed edge to edge — instead of one long narrow
     column with the form stacked underneath. This is the main desktop
     redesign; mobile markup/CSS for these two sections is untouched. */
  .hero-band {
    display: flex;
    align-items: stretch;
  }

  .hero-band .hero,
  .hero-band .form-section {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding: 72px 0;
  }

  .hero-band .hero .container,
  .hero-band .form-section .container {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    padding: 0 56px;
  }

  /* Image breaks out of the container's side padding to run the full
     width of its panel — much more presence than a boxed-in banner. */
  .hero-band .photo--hero {
    width: calc(100% + 112px);
    max-width: none;
    margin: 0 -56px 28px;
  }

  .hero-band .hero__subhead {
    margin-bottom: 0;
  }

  /* Give the form panel real content instead of two fields floating in
     a lot of empty burgundy — a heading, and room to breathe. */
  .form-section__heading {
    display: block;
    font-size: 1.7rem;
    margin-bottom: 28px;
  }

  .hero-band .form-field {
    margin-bottom: 22px;
  }

  .hero-band .form-field label {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }

  .hero-band .form-field input {
    padding: 14px 16px;
    font-size: 1rem;
  }

  .hero-band .form-checkbox {
    font-size: 0.85rem;
    gap: 10px;
    margin-bottom: 20px;
  }

  .hero-band .form-consent {
    font-size: 0.8rem;
    margin: 20px 0;
  }

  .hero-band .form-section .btn {
    padding: 16px 24px;
    font-size: 1rem;
  }

  /* Two-up review grid instead of two full-width stacked cards */
  .review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
  }

  .review-grid .review {
    margin-bottom: 0;
  }
}