/* Homepage art direction. Loaded only by index.html; shared pages stay independent. */
body.home-refresh {
  --home-ink: #20211e;
  --home-white: #fff;
  --home-surface: #f5f5f5;
  --home-muted: #62645f;
  --home-line: #e4e4e4;
  --home-gold: #d9aa0e;
  --home-gold-text: #886808;
  --ink: var(--home-ink);
  --muted: var(--home-muted);
  --cream: var(--home-surface);
  --line: var(--home-line);
  --gold: var(--home-gold);
  --logo-gold: var(--home-gold);
  background: var(--home-white);
  color: var(--home-ink);
}

/* Bright gold belongs on buttons and dark surfaces; light surfaces use deep gold. */
body.home-refresh .eyebrow,
body.home-refresh header nav a[aria-current],
body.home-refresh header nav a:hover,
body.home-refresh header nav .services-dropdown a:hover,
body.home-refresh header nav .services-dropdown a:focus-visible {
  color: var(--home-gold-text);
}
body.home-refresh main h1 em,
body.home-refresh main h2 :is(em, span) { color: var(--home-ink); }
body.home-refresh .testimonials .reviews-heading .eyebrow { color: var(--home-gold-text); }
body.home-refresh :is(.category-arrow, .review-arrow, .review-initials) { color: var(--home-gold-text); }
body.home-refresh :is(.subtle, .price-note, .product-price > small, .reviews-summary, .review-source, .review-card figcaption a, #reviews-position) { color: var(--home-muted); }
body.home-refresh :is(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--home-gold-text);
}
body.home-refresh :is(.gold, .add-bag) { background: var(--home-gold); color: var(--home-ink); }
body.home-refresh :is(.gold, .add-bag):hover { background: #e4b92d; border-color: #e4b92d; }
body.home-refresh .announcement { background: var(--home-ink); }

/* Keep the existing hero people, with live text over a quiet urban background. */
body.home-refresh .hero,
body.home-refresh .hero .hero-art { background: var(--home-surface); }
body.home-refresh .hero::before {
  background: linear-gradient(90deg, rgb(245 245 245 / 96%) 0%, rgb(245 245 245 / 85%) 35%, rgb(245 245 245 / 64%) 44%, rgb(245 245 245 / 15%) 53%, transparent 60%);
}
body.home-refresh .hero .hero-art img { object-position: center; }
body.home-refresh .hero-copy > h1 { max-width: 48%; font-size: clamp(40px, 4vw, 64px); }
body.home-refresh .hero-copy > :is(p, .button-row, .hero-note) { max-width: 45%; }
body.home-refresh .hero-copy > p,
body.home-refresh .hero-note { color: var(--home-muted); }

/* Clean neutral content bands preserve every existing catalog and work image. */
body.home-refresh .trust { background: var(--home-white); border-color: var(--home-line); box-shadow: none; }
body.home-refresh :is(.craft-promise, .design-reveal, .testimonials) {
  background: var(--home-surface);
  background-image: none;
  border-color: var(--home-line);
}
body.home-refresh #visit .visit-grid { background: var(--home-surface); background-image: none; }
body.home-refresh .craft-promise-cards article { background: var(--home-white); }
body.home-refresh .craft-promise-cards article:is(:hover, .is-active) { background: var(--home-white); }
body.home-refresh .craft-promise-icon { background: var(--home-surface); color: var(--home-gold-text); }
body.home-refresh :is(.craft-promise-heading > p, .craft-promise-cards p, .design-reveal-copy > p, .design-reveal-hint, .design-reveal-hint > span, .our-works-intro > p) { color: var(--home-muted); }
body.home-refresh .design-reveal-divider > span { background: var(--home-gold); }
body.home-refresh .design-reveal-view:focus-within { outline-color: var(--home-gold-text); }

body.home-refresh .steps { background: var(--home-ink); background-image: none; }
body.home-refresh .steps .eyebrow { color: var(--home-gold); }
body.home-refresh .steps :is(h2, .steps-intro) { color: var(--home-white); }
body.home-refresh .steps .step-grid p { color: var(--home-muted); }

/* Give the enquiry the same light treatment as the approved homepage concept. */
body.home-refresh #bulk > div:first-child { background: transparent; color: var(--home-ink); }
body.home-refresh #bulk > div:first-child h2,
body.home-refresh #bulk > div:first-child h2 :is(span, em),
body.home-refresh #bulk > div:first-child a:not(.text-link),
body.home-refresh #bulk .bulk-phone strong { color: var(--home-ink); }
body.home-refresh #bulk > div:first-child .eyebrow { color: var(--home-gold-text); }
body.home-refresh #bulk > div:first-child p { color: var(--home-muted); }
body.home-refresh #bulk :is(.bulk-phone, .contact-email-text) { border-color: var(--home-line); }
body.home-refresh #bulk > form > p,
body.home-refresh #bulk > form :is(.form-note, .contact-form-note) { color: var(--home-muted) !important; }
body.home-refresh #bulk > form :is(input, textarea)::placeholder { color: var(--home-muted); }
body.home-refresh #bulk > form :is(input, textarea):focus { outline-color: var(--home-gold-text); }

/* A focused photographic CTA flows directly into the matching charcoal footer. */
body.home-refresh main .page-cta[data-page="home"] {
  --cta-photo: url('assets/home-refresh/home-cta-workshop.webp');
  --cta-backdrop: var(--home-ink);
  min-height: clamp(420px, 33vw, 550px);
  padding: 64px 0;
  background: var(--home-ink);
  color: var(--home-white);
}
body.home-refresh main .page-cta[data-page="home"]::before {
  background-image: linear-gradient(90deg, rgb(32 33 30 / 94%) 0%, rgb(32 33 30 / 86%) 38%, rgb(32 33 30 / 28%) 68%, rgb(32 33 30 / 16%) 100%), var(--cta-photo);
  background-size: cover;
  background-position: center;
}
body.home-refresh main .page-cta .page-cta-copy { max-width: 46%; }
body.home-refresh main .page-cta h2,
body.home-refresh main .page-cta.page-cta p { color: var(--home-white); }
body.home-refresh main .page-cta :is(.eyebrow, h2 span) { color: var(--home-gold); }
body.home-refresh main .page-cta .gold { color: var(--home-ink); }
body.home-refresh main .page-cta .page-cta-call { background: transparent; color: var(--home-white); border-color: rgb(255 255 255 / 75%); }
body.home-refresh main .page-cta .page-cta-call:hover { background: rgb(255 255 255 / 10%); border-color: var(--home-gold); }
body.home-refresh main .page-cta :focus-visible { outline-color: var(--home-gold); }
body.home-refresh footer { background: var(--home-ink); color: var(--home-white); border-top: 1px solid rgb(255 255 255 / 14%); }
body.home-refresh footer :is(p, a, .footer-bottom) { color: #d6d7d3; }
body.home-refresh footer :is(h4, .store-hours-title) { color: var(--home-gold); }
body.home-refresh footer .footer-bottom { border-color: rgb(255 255 255 / 16%); }
body.home-refresh footer .footer-socials .social-icon { background: transparent; color: #d6d7d3; border-color: rgb(255 255 255 / 25%); }
body.home-refresh footer .footer-socials .social-icon:is(:hover, :focus-visible) { color: var(--home-gold); border-color: var(--home-gold); background: rgb(255 255 255 / 6%); }
body.home-refresh footer a:hover { color: var(--home-gold); }
body.home-refresh footer :focus-visible { outline-color: var(--home-gold); }

@media (min-width: 761px) and (max-width: 1100px) {
  body.home-refresh .hero-copy > h1 { font-size: clamp(36px, 4vw, 44px); }
  body.home-refresh .hero-copy .desktop { display: none; }
  body.home-refresh .hero .button-row { flex-wrap: wrap; gap: 14px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  /* Portrait tablets need a dedicated photo area to keep both people in frame. */
  body.home-refresh section.hero { min-height: 0; display: block; padding: 40px 0 calc(66.667vw + 32px); }
  body.home-refresh .hero::before { background: none; }
  body.home-refresh .hero .hero-art { inset: auto 0 0; height: 66.667vw; }
  body.home-refresh .hero .hero-art img { object-position: right center; }
  body.home-refresh .hero-copy > h1 { max-width: 100%; font-size: 52px; }
  body.home-refresh .hero-copy > :is(p, .button-row, .hero-note) { max-width: 600px; }
}
@media (max-width: 760px) {
  /* Text stays above a right-aligned photo crop, keeping both faces unobstructed. */
  body.home-refresh section.hero { padding: 28px 0 calc(66.667vw + 24px); min-height: 0; display: block; }
  body.home-refresh .hero::before { background: none; }
  body.home-refresh .hero .hero-art { inset: auto 0 0; height: 66.667vw; }
  body.home-refresh .hero .hero-art img { object-position: right center; }
  body.home-refresh .hero-copy > h1 { max-width: 100%; font-size: clamp(32px, 9.5vw, 46px); }
  body.home-refresh .hero-copy > :is(p, .button-row, .hero-note) { max-width: 100%; }
  body.home-refresh .hero .button-row { flex-wrap: wrap; gap: 12px; }
  body.home-refresh main .page-cta[data-page="home"] { min-height: 0; padding: 48px 0 276px; }
  body.home-refresh main .page-cta[data-page="home"]::before {
    background-image: linear-gradient(180deg, #20211e 0%, rgb(32 33 30 / 85%) 14%, rgb(32 33 30 / 25%) 100%), var(--cta-photo);
    background-size: 100% 260px, auto 260px;
    background-position: center bottom, right bottom;
  }
  body.home-refresh main .page-cta .page-cta-copy { max-width: 100%; }
}