@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&display=swap");

/* Suave: light surface, ink text, accent for kicker and icons. Colours come from the theme tokens:
   --hwe-hero-background-color (surface), --hwe-hero-text-color (ink), --hwe-accent-color (accent). */
:root {
  --suave-surface: var(--hwe-hero-background-color, #f4efe8);
  --suave-ink: var(--hwe-hero-text-color, #111);
  --suave-accent: var(--hwe-accent-color, #5c1a22);
  --suave-sand: color-mix(in srgb, var(--suave-accent) 12%, var(--suave-surface));
  --suave-line: color-mix(in srgb, var(--suave-ink) 22%, transparent);
  --suave-serif: "Fraunces", Georgia, "Times New Roman", serif;
}
body {
  background: var(--suave-surface);
  color: var(--suave-ink);
}
h1, h2, h3, .hwe-section-title, .hwe-step-number, .hwe-stat-title {
  font-family: var(--suave-serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}
h3 { font-weight: 400; }
a { color: var(--suave-accent); }

/* Nav: light, sticky, soft blur. The button keeps the ink colour. */
.hwe-nav-suave {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--hwe-menu-color) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--suave-line);
  --bs-navbar-brand-color: var(--suave-ink);
  --bs-navbar-brand-hover-color: var(--suave-ink);
  --bs-navbar-color: var(--suave-ink);
  --bs-navbar-hover-color: var(--suave-accent);
  --bs-navbar-active-color: var(--suave-accent);
}
.hwe-nav-suave .navbar-brand { font-family: var(--suave-serif); font-size: 1.25rem; }
/* The vertical's pack mark is a light glyph made for dark bars; on the light surface it goes dark. Uploaded logos stay as sent. */
.hwe-nav-suave .hwe-nav-logo[src*="/site/templates/"] { filter: brightness(0); opacity: .85; }
.hwe-nav-suave .hwe-burger { color: var(--suave-ink); }
.hwe-nav-suave .hwe-nav-wa {
  background: var(--suave-ink);
  border-color: var(--suave-ink);
  color: var(--suave-surface);
  border-radius: 999px;
  padding: .4rem 1.1rem;
}

/* Hero: text, optional arch portrait, decorative blobs (no photo background). */
.hwe-hero-suave {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 4rem !important;
  padding-bottom: 4.5rem !important;
  background: var(--suave-surface);
  color: var(--suave-ink);
}
.hwe-blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--suave-accent) 14%, var(--suave-surface));
  pointer-events: none;
}
.hwe-blob-a { width: 26rem; height: 26rem; top: -10rem; right: -6rem; }
.hwe-blob-b { width: 14rem; height: 14rem; bottom: -5rem; left: -4rem; background: color-mix(in srgb, var(--suave-accent) 9%, var(--suave-surface)); }
.hwe-blob-c { width: 7rem; height: 7rem; top: 38%; left: 46%; background: color-mix(in srgb, var(--suave-accent) 7%, var(--suave-surface)); }
.hwe-hero-lines {
  position: absolute;
  z-index: -1;
  width: 22rem;
  right: 6%;
  bottom: 0;
  color: color-mix(in srgb, var(--suave-accent) 40%, transparent);
  pointer-events: none;
}
/* The chrome caps .hwe-hero .container at 100% width (for the 50% text packs); Suave wants the normal container. */
.hwe-hero-suave > .container { max-width: 1140px; }
@media (min-width: 1400px) { .hwe-hero-suave > .container { max-width: 1320px; } }
.hwe-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hwe-hero-copy { max-width: 40rem; }
.hwe-hero-title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); line-height: 1.1; }
.hwe-hero-sub { color: color-mix(in srgb, var(--suave-ink) 78%, transparent); font-size: 1.15rem; }
.hwe-hero-cta {
  background: var(--suave-ink);
  border: 1px solid var(--suave-ink);
  color: var(--suave-surface);
  border-radius: 999px;
  padding: .75rem 1.75rem;
}
.hwe-hero-cta:hover, .hwe-hero-cta:focus-visible { background: var(--suave-accent); border-color: var(--suave-accent); color: var(--suave-surface); }
.hwe-hero-portrait {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 1.5rem 1.5rem;
}
@media (min-width: 992px) {
  .hwe-hero-grid:has(.hwe-hero-portrait) { grid-template-columns: 1.25fr 1fr; }
}

/* Buttons and sections. */
.btn-primary {
  --bs-btn-bg: var(--suave-ink);
  --bs-btn-border-color: var(--suave-ink);
  --bs-btn-color: var(--suave-surface);
  --bs-btn-hover-bg: var(--suave-accent);
  --bs-btn-hover-border-color: var(--suave-accent);
  --bs-btn-hover-color: var(--suave-surface);
  --bs-btn-active-bg: var(--suave-accent);
  --bs-btn-active-border-color: var(--suave-accent);
  --bs-btn-active-color: var(--suave-surface);
  border-radius: 999px;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.hwe-section { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.hwe-section-alt, .hwe-quote { background: var(--suave-sand); }
.hwe-eyebrow { color: var(--suave-accent); }
.hwe-about-photo, .hwe-steps-photo { border-radius: 999px 999px 1.5rem 1.5rem; }

/* Areas and topics: grid with a rule on top, no cards. */
.hwe-areas .card, .hwe-topics .card {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--suave-line);
  border-radius: 0;
  box-shadow: none !important;
}
.hwe-areas .card-body, .hwe-topics .card-body { padding: 1.5rem 0 0 !important; border-top: 0 !important; }
.hwe-area-card .card-body { border-radius: 0; }

/* FAQ: title on the left (sticky), accordion on the right from 992px. */
.hwe-faq .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--suave-line); --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; }
.hwe-faq .accordion-item { background: transparent; border-width: 0 0 1px; }
.hwe-faq .accordion-button { background: transparent; box-shadow: none; padding-left: 0; font-family: var(--suave-serif); font-weight: 400; color: var(--suave-ink); }
.hwe-faq .accordion-body { padding-left: 0; }
@media (min-width: 992px) {
  .hwe-faq > .container { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; }
  .hwe-faq .hwe-section-title { position: sticky; top: 6rem; text-align: left !important; margin: 0 !important; }
}

/* Steps with a photo, feature, stats and quote. */
.hwe-feature-photo { border-radius: 1.25rem 1.25rem 1.25rem 7rem; }
.hwe-feature-kicker { color: var(--suave-accent); }
.hwe-stats { background: transparent; }
.hwe-stat { border-top: 1px solid var(--suave-ink); }
.hwe-stat-title { font-size: 1.5rem; }
.hwe-quote-text { font-family: var(--suave-serif); font-weight: 300; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); line-height: 1.25; }
.hwe-quote-cite { color: var(--suave-accent); }

/* Testimonials: the chrome paints this section for a dark bar (white text on the footer colour). On Suave it is
   the surface (between the sand FAQ and contact) with ink text and the accent for kicker, quotes, avatar and button. */
.hwe-testimonials-section {
  --hwe-testimonials-bg: var(--suave-surface);
  --hwe-testimonials-text: var(--suave-ink);
  --hwe-testimonials-accent: var(--suave-accent);
}
.hwe-testimonials-section .hwe-t-heading,
.hwe-testimonials-section .hwe-testimonial-author { font-family: var(--suave-serif); font-weight: 300; }
.hwe-testimonial-stars { color: #b7791f; }
.hwe-testimonial-avatar { border-color: var(--suave-surface); color: var(--suave-surface); }
.hwe-t-cta { border-radius: 999px; padding: .5rem 1.5rem; }
.hwe-t-cta:hover, .hwe-t-cta:focus-visible { color: var(--suave-surface); }

/* Footer: surface background, ink text. */
.hwe-footer {
  background: var(--hwe-footer-color);
  color: var(--suave-ink);
  border-top: 1px solid var(--suave-line);
}
.hwe-footer-name { font-family: var(--suave-serif); font-size: 1.25rem; }
.hwe-footer-link { color: var(--suave-ink); text-decoration: none; }
.hwe-footer-link:hover { color: var(--suave-accent); }
.hwe-emergency {
  padding: .5rem 1rem;
  text-align: center;
  background: var(--suave-sand);
  color: var(--suave-ink);
}

/* Agenda (booking widget): like the testimonials, ink on the surface, serif 300 titles and pill buttons. */
.hwe-booking-section {
  --hwe-booking-bg: var(--suave-surface);
  --hwe-booking-text: var(--suave-ink);
  --hwe-booking-accent: var(--suave-accent);
  --hwe-booking-accent-text: var(--suave-surface);
  --hwe-booking-surface: var(--suave-sand);
  --hwe-booking-line: var(--suave-line);
  --hwe-booking-radius: 1.25rem;
  --hwe-booking-heading-font: var(--suave-serif);
  --hwe-booking-heading-weight: 300;
}
.hwe-booking-section .hwe-booking-calendar,
.hwe-booking-section .hwe-booking-form { color: var(--suave-ink); }
.hwe-booking-section .hwe-booking-slot,
.hwe-booking-section .hwe-booking-calendly { border-radius: 999px; }