/* ============================================================
   Bramble & Bark — dog grooming sector template
   Warm cocoa / blush / cream. Five hues, no cool tones.
   Fonts: Fraunces (display) + Nunito Sans (body).
   ============================================================ */

:root {
  --cocoa: #3b2a24;        /* deep espresso — dark anchor: header, footer, dark sections */
  --cocoa-light: #4e3830;
  --rose: #c08575;         /* dusty rose — focus outline */
  --rose-deep: #9a5647;    /* cocoa-rose — primary buttons, icons, checks (5.5:1 on white) */
  --blush: #e3a696;        /* soft blush accent (6.6:1 on cocoa) */
  --blush-deep: #b5654f;   /* deeper blush */
  --ink: #33261f;          /* warm near-black text */
  --grey: #6f5b52;         /* warm secondary text (6.4:1 on white) */
  --cream: #f6eee7;        /* warm cream — alt sections */
  --white: #ffffff;

  /* Tints of the cocoa anchor, used for borders/shadows/watermarks so no
     stray cool hue creeps back in (this skin replaced a blue trade skin). */
  --line: rgba(59, 42, 36, 0.09);
  --line-strong: rgba(59, 42, 36, 0.14);
  --overlay-1: rgba(38, 25, 20, 0.92);
  --overlay-2: rgba(38, 25, 20, 0.72);
  --overlay-3: rgba(38, 25, 20, 0.45);

  --radius: 14px;
  --shadow: 0 12px 30px rgba(59, 42, 36, 0.10);
  --shadow-lg: 0 24px 60px rgba(59, 42, 36, 0.18);
  --accent-text: #8a4a38;  /* deep terracotta — eyebrow on white (6.7:1, WCAG AA) */

  --font-head: 'Fraunces', serif;
  --font-body: 'Nunito Sans', sans-serif;

  /* One easing + duration scale so every animation shares a rhythm. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.18s;
  --t-mid: 0.28s;
  --t-slow: 0.5s;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0; }

/* Accessibility: skip link + visible keyboard focus */
.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 200;
  background: var(--cocoa);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Motion =================================================
   Scroll reveal: JS adds .reveal, IntersectionObserver adds .is-visible.
   Transform/opacity only, so nothing reflows.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) ease, transform var(--t-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Hero entrance — choreographed on load, eyebrow first, trust strip last.
   Deliberately a CSS animation, not a JS-toggled class: the content must never
   depend on script to become visible. `both` fill holds the start frame during
   the delay and the end frame afterwards, so nothing flashes or gets stranded. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__content > * { animation: heroRise 0.42s var(--ease-out) both; }
.hero__content > *:nth-child(1) { animation-delay: 0.04s; }
.hero__content > *:nth-child(2) { animation-delay: 0.12s; }
.hero__content > *:nth-child(3) { animation-delay: 0.20s; }
.hero__content > *:nth-child(4) { animation-delay: 0.28s; }
.hero__content > *:nth-child(5) { animation-delay: 0.36s; }

/* Section-title underline draws itself in when the title reveals. */
.section__title::after { transform: scaleX(0); transform-origin: center; }
.section__title--left::after { transform-origin: left center; }
.section__title.is-visible::after {
  transform: scaleX(1);
  transition: transform 0.55s var(--ease-out) 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__content > * { animation: none; opacity: 1; transform: none; }
  .section__title::after { transform: scaleX(1); }
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) ease,
              background var(--t-fast) ease, color var(--t-fast) ease;
  white-space: nowrap;
}
.btn--primary {
  background: var(--rose-deep);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(154, 86, 71, 0.28);
}
.btn--primary:hover {
  background: var(--blush-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(154, 86, 71, 0.35);
}
/* Press feedback — settles back under the resting position, then releases. */
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.09s; }
.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: inherit;
}
.section--dark .btn--ghost, .hero .btn--ghost { border-color: rgba(255,255,255,0.6); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
#reviews .btn--ghost, .reviews__cta .btn--ghost { border-color: var(--rose-deep); color: var(--rose-deep); }
#reviews .btn--ghost:hover, .reviews__cta .btn--ghost:hover { background: var(--rose-deep); color: var(--white); }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ===== Topbar ===== */
.topbar {
  background: var(--cocoa);
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  gap: 12px;
}
.topbar__item a { font-weight: 600; color: var(--white); }
.topbar__badge { display: none; }
@media (min-width: 720px) { .topbar__badge { display: block; } }
/* Below 720px the badge is hidden and the topbar is just these two links, so
   grow their tap area to the 44px minimum. The strip absorbs the extra height
   rather than the links overhanging into the header. */
@media (max-width: 719px) {
  .topbar__inner { padding: 0 24px; }
  .topbar__item a { display: inline-block; padding: 13px 0; }
}

/* ===== Header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(38, 25, 20, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: box-shadow var(--t-mid) ease;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  gap: 16px;
}
/* Header lockup: emblem + wordmark side by side. The supplied logo is a tall
   stacked lockup whose wordmark turns to mush at header size, so the emblem is
   used as the mark and the wordmark is set live in Fraunces to match it. */
.brand { display: inline-flex; align-items: center; gap: 11px; padding: 5px 0; }
.brand__mark { height: 42px; width: auto; flex-shrink: 0; }
.brand__logo { height: 48px; width: auto; }
.nav {
  display: none;
  gap: 28px;
  font-weight: 600;
  font-size: 0.95rem;
}
.nav a { color: rgba(255,255,255,0.88); position: relative; padding: 6px 0; transition: color 0.2s ease; }
.nav a:hover { color: var(--blush); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--blush);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a.active { color: var(--blush); }
.nav a.active::after { transform: scaleX(1); }
.nav--mobile-open a::after { display: none; }
.nav--mobile-open a.active { color: var(--blush); }
.header__cta { display: none; }
.header__cta.btn--primary {
  background: var(--blush);
  color: var(--cocoa);
  box-shadow: 0 8px 20px rgba(227, 166, 150, 0.28);
}
.header__cta.btn--primary:hover {
  background: #f0bcae;
  box-shadow: 0 12px 26px rgba(227, 166, 150, 0.4);
}
@media (min-width: 900px) {
  .nav { display: flex; margin-left: auto; margin-right: 24px; }
  .header__cta { display: inline-flex; }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;   /* 44x44 minimum touch target */
  height: 44px;
  padding: 0 4px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) ease;
}
/* Hamburger folds into a cross — the state change animates rather than snapping. */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .nav-toggle { display: none; } }

.nav--mobile-open {
  display: flex !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cocoa);
  flex-direction: column;
  padding: 16px 24px 24px;
  gap: 4px;
  box-shadow: var(--shadow);
}
.nav--mobile-open a { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--overlay-1) 15%, var(--overlay-2) 50%, var(--overlay-3) 100%);
}
.hero__content { position: relative; z-index: 1; padding: 100px 24px 80px; max-width: 720px; }
.eyebrow {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.hero .eyebrow, .section--dark .eyebrow { color: var(--blush); }
.eyebrow--center { display: block; text-align: center; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; margin-bottom: 20px; }
.hero__lede { font-size: 1.1rem; color: rgba(255,255,255,0.86); max-width: 560px; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.92rem; color: rgba(255,255,255,0.9); font-weight: 500; }
@media (min-width: 620px) {
  .hero__trust {
    gap: 0;
    margin-top: 4px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.18);
  }
  .hero__trust li { position: relative; padding: 0 22px; }
  .hero__trust li:first-child { padding-left: 0; }
  .hero__trust li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background: rgba(255,255,255,0.22);
  }
}

/* Mobile hero: designed for thumb + small viewport, not a shrunk desktop */
@media (max-width: 619px) {
  .hero { min-height: auto; }
  .hero__content { padding: 72px 24px 56px; }
  .hero__lede { font-size: 1rem; margin-bottom: 26px; }
  .hero__actions { flex-direction: column; margin-bottom: 28px; }
  .hero__actions .btn { width: 100%; }
  .hero__trust { flex-direction: column; gap: 10px; border-left: 3px solid var(--blush); padding-left: 14px; }
}

/* ===== Sections — generous rhythm on desktop, tighter on mobile ===== */
.section { padding: 110px 0; scroll-margin-top: 96px; }
@media (max-width: 719px) { .section { padding: 64px 0; } }
.section--alt { background: var(--cream); }
.section--dark { background: var(--cocoa); color: var(--white); }
.section__title {
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight: 800;
  max-width: 640px;
  margin: 0 auto 16px;
}
.section__title::after {
  content: "";
  display: block;
  width: 52px;
  height: 3px;
  border-radius: 3px;
  background: var(--blush);
  margin: 18px auto 0;
}
.section__title--left { text-align: left; margin: 0 0 18px; max-width: none; }
.section__title--left::after { margin-left: 0; margin-right: auto; }
.section__lede {
  text-align: center;
  color: var(--grey);
  max-width: 560px;
  margin: 0 auto 48px;
  font-size: 1.05rem;
}
.section--dark .section__lede, .section--dark p { color: rgba(255,255,255,0.75); }

/* ===== Services grid ===== */
.grid--services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  counter-reset: svc;
}
.card {
  position: relative;
  /* Column flex so the price line can be pushed to the bottom and stay on a
     shared baseline across a row, however long the description runs. */
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) ease, border-color var(--t-mid) ease;
}
.card::after {
  counter-increment: svc;
  content: "0" counter(svc);
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  color: rgba(59, 42, 36, 0.14);
  letter-spacing: 0.02em;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(154, 86, 71, 0.35); }
.card:active { transform: translateY(-2px) scale(0.99); transition-duration: 0.09s; }
.card__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rose-deep);
  margin-bottom: 18px;
  transition: transform var(--t-mid) var(--ease-out);
}
.card:hover .card__icon { transform: scale(1.06) rotate(-3deg); }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.card p { color: var(--grey); font-size: 0.96rem; line-height: 1.55; }
.card__price {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.card__price strong { color: var(--rose-deep); font-family: var(--font-head); font-size: 1.02rem; }

/* Secondary services — compact chip list */
.services-more { margin-top: 44px; text-align: center; }
.services-more__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 22px;
}
.services-more__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
}
.services-more__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(59, 42, 36, 0.05);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) ease;
}
.services-more__list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rose-deep);
  flex-shrink: 0;
}
.services-more__list li:hover { transform: translateY(-2px); border-color: rgba(154, 86, 71, 0.4); }

/* ===== Why choose us ===== */
.why__grid { display: grid; gap: 48px; align-items: center; }
.why__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.why__list { display: flex; flex-direction: column; gap: 16px; margin: 26px 0 30px; }
.why__list li { padding-left: 30px; position: relative; color: var(--grey); line-height: 1.5; }
.why__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rose-deep);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why__list strong { color: var(--ink); }
@media (min-width: 860px) {
  .why__grid { grid-template-columns: 1fr 1.1fr; }
}

/* ===== Gallery ===== */
.gallery { columns: 1; gap: 18px; }
@media (min-width: 620px) { .gallery { columns: 2; } }
@media (min-width: 980px) { .gallery { columns: 3; } }
.gallery__item {
  margin: 0 0 18px;
  break-inside: avoid;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.gallery__item img { width: 100%; height: auto; display: block; transition: transform 0.4s var(--ease-out); }
/* Masonry rhythm: taller tiles once there is more than one column.
   Columns layout, so this crops to a portrait ratio rather than spanning grid rows. */
@media (min-width: 620px) {
  .gallery__item--tall img { aspect-ratio: 3 / 4; object-fit: cover; }
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 16px 14px;
  background: linear-gradient(0deg, rgba(38, 25, 20, 0.85), transparent);
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-mid) ease, transform var(--t-mid) var(--ease-out);
}
.gallery__item:hover figcaption { opacity: 1; transform: translateY(0); }
/* Touch devices have no hover — captions always visible */
@media (hover: none) {
  .gallery__item figcaption { opacity: 1; transform: none; }
}

/* ===== Reviews ===== */
.ratings-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 28px;
  margin: 0 auto 48px;
  padding: 18px 28px;
  max-width: 620px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
}
.ratings-bar__item { display: flex; align-items: center; gap: 10px; }
.ratings-bar__stars { color: var(--blush-deep); font-size: 1.1rem; letter-spacing: 1px; }
.ratings-bar__label { font-size: 0.95rem; color: var(--grey); }
.ratings-bar__label strong { color: var(--ink); font-family: var(--font-head); }
.ratings-bar__divider { width: 1px; height: 28px; background: var(--line-strong); }
@media (max-width: 520px) {
  .ratings-bar { border-radius: 18px; flex-direction: column; }
  .ratings-bar__divider { width: 60px; height: 1px; }
}

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) ease;
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.review-card__stars { color: var(--blush-deep); font-size: 1.05rem; margin-bottom: 14px; letter-spacing: 2px; }
.review-card p { color: var(--ink); line-height: 1.6; font-size: 0.98rem; }
.review-card__author { margin-top: 18px; font-weight: 700; font-size: 0.9rem; color: var(--rose-deep); }
.review-card__author span { color: var(--grey); font-weight: 400; }
.reviews__cta { text-align: center; margin-top: 40px; }

/* ===== About ===== */
.about__grid { display: grid; gap: 48px; align-items: center; }
.about__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.about__content p { color: var(--grey); line-height: 1.65; margin-bottom: 16px; }
.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.about__stats div {
  background: var(--cream);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
}
.about__stats strong {
  display: block;
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--rose-deep);
  /* Counting digits must not reflow the tile as they tick up. */
  font-variant-numeric: tabular-nums;
}
.about__stats span { display: block; font-size: 0.78rem; color: var(--grey); margin-top: 4px; }
@media (min-width: 860px) {
  .about__grid { grid-template-columns: 1.1fr 1fr; }
}

/* ===== Contact ===== */
.contact__grid { display: grid; gap: 48px; }
.contact__list { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }
.contact__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.02rem; line-height: 1.5; }
.contact__list a:hover { color: var(--blush); }
/* Phone/email links are the point of this list on a phone — give them the full
   44px tap height. The 16px row gap keeps the targets comfortably apart. */
@media (max-width: 899px) {
  .contact__list a { display: inline-block; padding: 10px 0; }
  .contact__icon { margin-top: 12px; }
}
.contact__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--blush);
}
.contact__icon svg { width: 22px; height: 22px; display: block; }
.contact__form {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 8px; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1rem; /* 16px — stops iOS zooming the page on focus */
  resize: vertical;
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.form-row input:hover, .form-row textarea:hover, .form-row select:hover { border-color: var(--rose); }
.form-row select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f5b52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.form-row select:invalid { color: var(--grey); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: 2px solid var(--rose);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(192, 133, 117, 0.15);
}
.form-note { margin-top: 14px; font-size: 0.88rem; text-align: center; color: var(--rose-deep); font-weight: 600; min-height: 1.2em; }
@media (min-width: 860px) {
  .contact__grid { grid-template-columns: 1fr 1.1fr; }
}

/* ===== Footer ===== */
.footer { background: var(--cocoa); color: rgba(255,255,255,0.75); padding: 32px 0 40px; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 0.85rem; }
/* Footer repeats the header lockup a touch larger. The supplied stacked lockup
   was tried here and rejected: at any height the footer row can afford, its
   wordmark is too small to read. */
.brand--footer { gap: 13px; }
.brand--footer .brand__mark { height: 52px; }
.brand--footer .brand__text { font-size: 1.08rem; }
.footer__inner a { font-weight: 600; color: var(--white); display: inline-block; padding: 12px 0; }
@media (min-width: 700px) {
  .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ===== Floating call button (mobile) ===== */
.call-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rose-deep);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 90;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) ease;
}
.call-fab svg { width: 24px; height: 24px; }
.call-fab:hover { background: var(--blush-deep); }
.call-fab:active { transform: scale(0.92); }
@media (min-width: 900px) { .call-fab { display: none; } }
/* Keep the last section clear of the floating button on mobile. */
@media (max-width: 899px) { .footer { padding-bottom: 96px; } }

/* ===== Text brand (businesses without a logo image) ===== */
/* Wordmark — caps serif with open tracking, echoing the logo's own lettering. */
.brand__text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.15;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.brand__text small {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blush);
  margin-top: 3px;
}
@media (max-width: 400px) {
  .brand__mark { height: 36px; }
  .brand__text { font-size: 0.92rem; letter-spacing: 0.05em; }
}

/* ===== Inner-page banner ===== */
.page-hero {
  position: relative;
  padding: 120px 0 68px;
  color: var(--white);
  text-align: center;
  overflow: hidden;
  background: var(--cocoa);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38, 25, 20, 0.82) 0%, rgba(38, 25, 20, 0.9) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--blush); }
.page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
.page-hero p {
  color: rgba(255,255,255,0.82);
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 1.05rem;
}
@media (max-width: 619px) { .page-hero { padding: 92px 0 52px; } }

/* Centred section CTA (e.g. "View all services") */
.section__cta { text-align: center; margin-top: 44px; }

/* ===== Bottom call-to-action band ===== */
.cta-band {
  background: var(--cocoa);
  color: var(--white);
  text-align: center;
  padding: 72px 0;
}
.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  max-width: 640px;
  margin: 0 auto;
}
.cta-band p {
  color: rgba(255,255,255,0.8);
  max-width: 540px;
  margin: 14px auto 28px;
  font-size: 1.05rem;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.cta-band .btn--ghost { border-color: rgba(255,255,255,0.6); color: var(--white); }
.cta-band .btn--ghost:hover { background: rgba(255,255,255,0.12); }

/* ===== Demo notice — this is a template, not a real business ===== */
.demo-note {
  background: var(--cream);
  border-bottom: 1px solid var(--line-strong);
  color: var(--grey);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
  padding: 10px 24px;
}
.demo-note strong { color: var(--ink); }