/* Hairways Salon - Amelia booking pages - monochrome design system */
:root {
  /* Palette taken from the salon itself: warm wood, black leather, ivory
     walls and the gold of the mirror lights. Pure black-on-white read cold
     and clinical, which is the opposite of how the room actually feels. */
  --hwb-black: #16150f;      /* warm near-black, not pure #000 */
  --hwb-white: #fff;
  --hwb-grey: #6b675c;       /* neutral biased toward the wood tones */
  --hwb-light: #faf6ec;      /* warm ivory, replaces the cold #f5f5f5 */
  --hwb-border: #e6dfd0;

  --hwb-gold: #b8892b;       /* accent - the mirror light / brass */
  --hwb-gold-ink: #8a6414;   /* accessible gold for text on ivory */
  --hwb-gold-soft: #f3e5c4;
  --hwb-sand: #f1e9d8;
  --hwb-plum: #4a2f3d;       /* secondary accent for women's side */
  --hwb-radius: 10px;
  --hwb-gap: 1.25rem;
  --hwb-max: 1120px;
  --hwb-font: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hwb, .hwb * { box-sizing: border-box; margin: 0; padding: 0; }
.hwb { font-family: var(--hwb-font); color: var(--hwb-black); line-height: 1.55; }
.hwb em { font-style: normal; font-weight: 200; }
.hwb img { max-width: 100%; height: auto; }

/* ---- layout ---- */
.hwb-in { max-width: var(--hwb-max); margin: 0 auto; padding: 0 1.25rem; }
.hwb-sec { padding: 3.5rem 0; }
.hwb-sec--alt { background: var(--hwb-light); }

/* ---- hero ---- */
.hwb-hero {
  background: var(--hwb-black);
  color: var(--hwb-white);
  text-align: center;
  padding: 3.5rem 1.25rem 3rem;
}
.hwb-hero__eyebrow {
  display: block;
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: .75rem;
}
.hwb-hero h1 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: .75rem;
  text-wrap: balance;
}
.hwb-hero p {
  max-width: 540px;
  margin: 0 auto .75rem;
  opacity: .72;
  font-size: .95rem;
}
.hwb-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
}
.hwb-badges li {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3em .9em;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 100px;
  opacity: .75;
}

/* ---- back link ---- */
.hwb-back { padding: 1rem 1.25rem; max-width: var(--hwb-max); margin: 0 auto; }
.hwb-back a { color: var(--hwb-grey); text-decoration: none; font-size: .85rem; }
.hwb-back a:hover { color: var(--hwb-black); }

/* ---- section head ---- */
.hwb-head { text-align: center; margin-bottom: 2.5rem; }
.hwb-eyebrow {
  display: block;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hwb-grey);
  margin-bottom: .5rem;
}
.hwb-h2 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: .5rem;
  text-wrap: balance;
}
.hwb-sub { max-width: 520px; margin: 0 auto; color: var(--hwb-grey); font-size: .9rem; }

/* ---- category filter chips ---- */
.hwb-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hwb-border);
}
.hwb-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .45em 1em;
  font-size: .82rem;
  line-height: 1.2;
  border: 1px solid var(--hwb-border);
  border-radius: 100px;
  text-decoration: none;
  color: var(--hwb-black);
  background: var(--hwb-white);
  transition: background .18s, border-color .18s, color .18s;
}
.hwb-chip span {
  font-size: .72rem;
  color: var(--hwb-grey);
  font-variant-numeric: tabular-nums;
}
.hwb-chip:hover {
  border-color: var(--hwb-black);
  color: var(--hwb-black);
}
.hwb-chip.is-on {
  background: var(--hwb-black);
  border-color: var(--hwb-black);
  color: var(--hwb-white);
}
.hwb-chip.is-on span { color: rgba(255,255,255,.7); }
.hwb-chip:focus-visible { outline: 2px solid var(--hwb-black); outline-offset: 2px; }

.hwb-filtered {
  font-size: .85rem;
  color: var(--hwb-grey);
  margin-bottom: 1.25rem;
}
.hwb-filtered strong { color: var(--hwb-black); font-weight: 500; }
.hwb-filtered a { color: var(--hwb-black); text-decoration: underline; }

/* ---- homepage hero (colour photo, never greyscaled) ---- */
.hwb-hero2 {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--hwb-white);
}
/* The homepage no longer uses Ecomus's transparent header, so the header sits
   in normal flow and the hero needs no reserve. The JS still measures at
   runtime and will re-add space if a transparent header is ever switched
   back on, so this is only the pre-JS starting value. */
.hwb-hero2 { padding-top: 0; }

/* --- carousel --- */
.hwb-hero2__slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* both slides are pre-cut to 16:9 */
  overflow: hidden;
  background: var(--hwb-light);
}
.hwb-hero2__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  line-height: 0;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.hwb-hero2__slide.is-on { opacity: 1; pointer-events: auto; }
/* the whole photo is a link to the booking page */
.hwb-hero2__shot { display: block; width: 100%; height: 100%; }
.hwb-hero2__shot:focus-visible {
  outline: 3px solid var(--hwb-black);
  outline-offset: -3px;
}
.hwb-hero2__slide picture,
.hwb-hero2__slide img { display: block; width: 100%; height: 100%; }

/* Ecomus rounds every image site-wide via
     .elementor .elementor-element img { border-radius: var(--em-image-rounded) }
   which curved the hero corners. Square them off - the hero is edge-to-edge
   and rounded corners on a full-bleed image just look like a mistake.
   Specificity has to beat the theme's two-class selector. */
.hwb .hwb-hero2__slides,
.hwb .hwb-hero2__slides picture,
.hwb .hwb-hero2__slides img,
.hwb .hwb-hero2__fig,
.hwb .hwb-hero2__fig img {
  border-radius: 0 !important;
}
.hwb-hero2__slide img {
  object-fit: cover;
  object-position: center;
  filter: none;           /* service cards are greyscale; the hero is not */
}

.hwb-hero2__dots {
  position: absolute;
  left: 50%;
  bottom: .9rem;
  transform: translateX(-50%);
  display: flex;
  gap: .45rem;
  z-index: 2;
}
/* Dark dots: the photos are bright (white walls, marble floor), so white dots
   disappeared into them. A white ring keeps them legible if a darker photo is
   ever used. */
.hwb-hero2__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17,17,17,.42);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.9);
  cursor: pointer;
  transition: background .25s, width .25s;
}
.hwb-hero2__dot:hover { background: rgba(17,17,17,.7); }
.hwb-hero2__dot.is-on {
  background: var(--hwb-black);
  width: 26px;
  border-radius: 100px;
}
.hwb-hero2__dot:focus-visible { outline: 2px solid var(--hwb-black); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hwb-hero2__slide { transition: none; }
}

.hwb-hero2__fig { margin: 0; line-height: 0; }
/* The salon photo is shown WHOLE - never cropped. Its native ratio is
   1.845:1, which is 16:9 for all practical purposes, so it needs no crop
   to sit in a widescreen frame. height:auto is what keeps it uncropped;
   object-fit:cover here would silently cut the sides off. */
.hwb-hero2__fig img {
  display: block;
  width: 100%;
  height: auto;
  /* the service cards are desaturated; the hero is not */
  filter: none;
}
.hwb-hero2__panel {
  display: flex;
  align-items: center;
  padding: 1.6rem 1.25rem 2.5rem;
}
/* Nothing may constrain the photo's width - if a theme or Elementor wrapper
   adds side padding, the hero would render narrower than the screen. */
.hwb-hero2, .hwb-hero2__fig { width: 100%; max-width: 100%; }
.hwb-hero2__inner { width: 100%; max-width: 34rem; margin: 0 auto; }

.hwb-hero2__eyebrow {
  display: block;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--hwb-grey);
  margin-bottom: .9rem;
}
.hwb-hero2__h {
  font-size: clamp(2rem, 8.5vw, 3.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
  text-wrap: balance;
}
.hwb-hero2__h em {
  font-style: italic;
  font-weight: 300;
  color: var(--hwb-grey);
}
.hwb-hero2__lede {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--hwb-grey);
  max-width: 44ch;
  margin-bottom: 1.6rem;
}
.hwb-hero2__cta { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.6rem; }
.hwb-hero2__cta .hwb-btn { text-align: center; padding: .95em 1.6em; font-size: .92rem; }
.hwb-hero2__primary { letter-spacing: .02em; }

.hwb-hero2__marks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hwb-border);
  font-size: .8rem;
  color: var(--hwb-grey);
}
.hwb-hero2__marks b { font-weight: 500; color: var(--hwb-black); }

/* side-by-side once there is room for it */
/* Desktop keeps the photo full-width and uncropped across the top, with the
   copy directly beneath - the same order as mobile. A side-by-side split was
   tried first but it forces a crop to fill the column height, and the whole
   point is that the salon photo stays whole. */
@media (min-width: 861px) {
  /* No height cap: capping the height made `contain` letterbox the photo and
     render it smaller than the space available. Letting it run full width at
     its natural ratio is the largest it can be without cropping. */
  .hwb-hero2 { padding-top: 0; }
  .hwb-hero2__slides { max-width: 1920px; margin: 0 auto; }
  .hwb-hero2__dots { bottom: 1.35rem; }
  .hwb-hero2__panel { padding: 2.5rem 2rem 3rem; }
  .hwb-hero2__inner { max-width: 62rem; text-align: center; }
  .hwb-hero2__lede { margin-left: auto; margin-right: auto; }
  .hwb-hero2__cta { flex-direction: row; justify-content: center; }
  .hwb-hero2__cta .hwb-btn { padding: .9em 2.2em; }
  .hwb-hero2__marks { justify-content: center; gap: .4rem 2rem; }
}
@media (min-width: 1200px) {
  .hwb-hero2__panel { padding: 3rem 4.5rem; }
}

/* ---- page title band ---- */
.hwb-titlebar {
  background: var(--hwb-light);
  border-bottom: 1px solid var(--hwb-border);
  padding: 1.75rem 0 1.9rem;
  text-align: center;
}
.hwb-crumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hwb-grey);
  margin-bottom: .6rem;
}
.hwb-crumb a { color: var(--hwb-grey); text-decoration: none; }
.hwb-crumb a:hover { color: var(--hwb-black); text-decoration: underline; }
.hwb-crumb span[aria-current] { color: var(--hwb-black); }
.hwb-titlebar__h {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* ---- steps rail ---- */
.hwb-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin-bottom: 1.75rem;
}
.hwb-step {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .9rem;
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  background: var(--hwb-white);
  font-size: .9rem;
  color: var(--hwb-grey);
  transition: border-color .2s, background .2s;
}
.hwb-step__n {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hwb-border);
  font-size: .8rem;
  line-height: 1;
  color: var(--hwb-grey);
  background: var(--hwb-white);
}
.hwb-step__n svg { width: 14px; height: 14px; }
.hwb-step__t { line-height: 1.3; }

/* completed */
.hwb-step.is-done { background: var(--hwb-light); border-color: var(--hwb-border); color: var(--hwb-black); }
.hwb-step.is-done .hwb-step__n {
  background: var(--hwb-black);
  border-color: var(--hwb-black);
  color: var(--hwb-white);
}
/* current */
.hwb-step.is-now {
  border-color: var(--hwb-black);
  color: var(--hwb-black);
  font-weight: 500;
}
.hwb-step.is-now .hwb-step__n {
  background: var(--hwb-black);
  border-color: var(--hwb-black);
  color: var(--hwb-white);
}

@media (min-width: 620px) {
  .hwb-steps { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
}

/* ---- service groups ---- */
.hwb-group { margin-bottom: 2.5rem; }
.hwb-group__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--hwb-border);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
}
.hwb-group__h h3 { font-size: 1.1rem; font-weight: 400; }
.hwb-group__h span { font-size: .8rem; color: var(--hwb-grey); }

.hwb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--hwb-gap);
}

/* ---- card ---- */
.hwb-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--hwb-white);
  transition: box-shadow .2s, transform .2s;
}
.hwb-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.hwb-card:focus-visible { outline: 2px solid var(--hwb-black); outline-offset: 2px; }

.hwb-ph {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--hwb-light) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  /* photos stay in colour - greyscale made the pages feel cold */
}
.hwb-ph__mark { font-size: 2rem; font-weight: 200; color: rgba(0,0,0,.12); letter-spacing: .08em; }
.hwb-ph[style*="background-image"] .hwb-ph__mark,
.hwb-cat__ph[style*="background-image"] .hwb-ph__mark { display: none; }

.hwb-dur {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  background: rgba(255,255,255,.92);
  padding: .2em .6em;
  border-radius: 100px;
}
.hwb-dur svg { width: 12px; height: 12px; }

.hwb-card__body { padding: .85rem 1rem .5rem; flex: 1; }
.hwb-card__body h4 { font-size: .95rem; font-weight: 400; margin-bottom: .25rem; }
.hwb-card__body p { font-size: .8rem; color: var(--hwb-grey); }

.hwb-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 1rem;
  border-top: 1px solid var(--hwb-border);
}
.hwb-price { font-size: 1.05rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.hwb-price small {
  display: block;
  font-size: .65rem;
  font-weight: 300;
  color: var(--hwb-grey);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hwb-go { font-size: .8rem; font-weight: 400; letter-spacing: .04em; }

/* ---- gateway category cards ---- */
.hwb-cats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--hwb-gap);
}
.hwb-cat {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--hwb-white);
  transition: box-shadow .2s, transform .2s;
}
.hwb-cat:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
.hwb-cat__ph {
  aspect-ratio: 16/10;
  background: var(--hwb-light) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  /* photos stay in colour - greyscale made the pages feel cold */
}
.hwb-cat__body { padding: 1.25rem; }
.hwb-cat__body h3 { font-size: 1.15rem; font-weight: 400; margin-bottom: .75rem; }
.hwb-cat__list { list-style: none; margin-bottom: 1rem; }
.hwb-cat__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-bottom: 1px solid var(--hwb-border);
  font-size: .85rem;
}
.hwb-cat__list li b { font-weight: 400; font-variant-numeric: tabular-nums; }
.hwb-cat__foot { display: flex; justify-content: space-between; align-items: center; }
.hwb-count { font-size: .8rem; color: var(--hwb-grey); }

/* ---- popular ---- */
.hwb-pop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--hwb-gap);
}
.hwb-pop a {
  position: relative;
  display: block;
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  text-decoration: none;
  color: inherit;
  background: var(--hwb-white);
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
/* a gold edge that grows in on hover, instead of a flat grey wash */
.hwb-pop a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hwb-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s ease;
}
.hwb-pop a:hover {
  border-color: var(--hwb-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22,21,15,.07);
}
.hwb-pop a:hover::before { transform: scaleY(1); }
.hwb-pop h4 { font-size: .98rem; font-weight: 400; margin-bottom: .3rem; }
.hwb-pop span { font-size: .82rem; color: var(--hwb-gold-ink); font-weight: 500; }

/* ---- menu-page intro (women's / men's) ---- */
.hwb-mintro {
  padding: 1.9rem 1.25rem .4rem;
  text-align: center;
}
.hwb-mintro .hwb-eyebrow { margin-bottom: .6rem; }
.hwb-mintro__text {
  max-width: 52ch;
  margin: 0 auto 1.15rem;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--hwb-black);
  text-wrap: balance;
}
.hwb-mintro__chips { margin-bottom: 1.35rem; }
.hwb-mintro__chips b { font-weight: 500; }
.hwb-mintro__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.hwb-mintro__cta .hwb-btn { padding: .8em 1.7em; }

@media (min-width: 700px) {
  .hwb-mintro { padding-top: 2.4rem; }
  .hwb-mintro__text { font-size: 1.14rem; }
}

/* ---- gateway intro (replaces the removed dark hero) ---- */
.hwb-gateway__intro { padding: 1.9rem 1.25rem .3rem; text-align: center; }
.hwb-lede {
  max-width: 54ch;
  margin: 0 auto 1.1rem;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--hwb-grey);
}
.hwb-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
}
.hwb-chips li {
  font-size: .73rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .42em 1em;
  border-radius: 100px;
  background: var(--hwb-sand);
  border: 1px solid var(--hwb-border);
  color: var(--hwb-gold-ink);
}

/* ---- how it works ---- */
.hwb-how {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hwb-border);
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  overflow: hidden;
}
.hwb-how__item {
  background: var(--hwb-white);
  padding: 1.5rem 1.4rem 1.6rem;
  position: relative;
}
.hwb-how__n {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  margin-bottom: .8rem;
  border-radius: 50%;
  background: var(--hwb-black);
  color: var(--hwb-gold-soft);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.hwb-how__item h3 {
  font-size: 1.02rem;
  font-weight: 400;
  margin-bottom: .4rem;
  text-wrap: balance;
}
.hwb-how__item p { font-size: .87rem; line-height: 1.62; color: var(--hwb-grey); }
@media (min-width: 760px) {
  .hwb-how { grid-template-columns: repeat(3, 1fr); }
}

/* ---- buttons ---- */
.hwb-btn {
  display: inline-block;
  padding: .65em 1.5em;
  font-size: .85rem;
  font-weight: 400;
  letter-spacing: .04em;
  border-radius: 100px;
  text-decoration: none;
  transition: background .2s, color .2s;
  background: var(--hwb-black);
  color: var(--hwb-white);
  border: 1px solid var(--hwb-black);
}
.hwb-btn:hover { background: #333; border-color: #333; color: var(--hwb-white); }
.hwb-btn--ghost { background: transparent; color: var(--hwb-black); }
.hwb-btn--ghost:hover { background: var(--hwb-black); color: var(--hwb-white); }
.hwb-btn--light { background: var(--hwb-white); color: var(--hwb-black); border-color: var(--hwb-white); }
.hwb-btn--light:hover { background: #eee; border-color: #eee; color: var(--hwb-black); }
.hwb-btn--lightghost { background: transparent; color: var(--hwb-white); border-color: rgba(255,255,255,.4); }
.hwb-btn--lightghost:hover { background: rgba(255,255,255,.12); color: var(--hwb-white); }

/* ---- help block ---- */
/* Was plain black type on white and read as an afterthought. Now a warm card
   with a gold rule, so it reads as an invitation rather than filler. */
.hwb-help {
  text-align: center;
  padding: 2.4rem 1.4rem 2.6rem;
  background: linear-gradient(180deg, var(--hwb-sand) 0%, var(--hwb-light) 100%);
  border: 1px solid var(--hwb-border);
  border-top: 3px solid var(--hwb-gold);
  border-radius: var(--hwb-radius);
}
.hwb-help h3 { color: var(--hwb-black); }
.hwb-help h3::after {
  content: '';
  display: block;
  width: 38px;
  height: 2px;
  margin: .7rem auto 0;
  background: var(--hwb-gold);
}
.hwb-sec--alt .hwb-help { color: var(--hwb-black); }
.hwb-help-legacy { text-align: center; padding: 2rem 0; }
.hwb-help h3 { font-size: 1.2rem; font-weight: 400; margin-bottom: .5rem; }
.hwb-help p { max-width: 480px; margin: 0 auto 1.25rem; color: var(--hwb-grey); font-size: .9rem; }
.hwb-help__btns { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.hwb-help__meta { font-size: .8rem; color: var(--hwb-grey); line-height: 1.7; }
.hwb-help__meta a { color: var(--hwb-grey); }
/* help block sits on the light section, so use dark buttons there */
.hwb-sec--alt .hwb-btn--light { background: var(--hwb-black); color: var(--hwb-white); border-color: var(--hwb-black); }
.hwb-sec--alt .hwb-btn--lightghost { color: var(--hwb-black); border-color: var(--hwb-border); }
.hwb-sec--alt .hwb-btn--lightghost:hover { background: rgba(0,0,0,.05); color: var(--hwb-black); }

/* ---- booking form panel ---- */
.hwb-form { margin-bottom: 2.5rem; scroll-margin-top: 100px; }
.hwb-picked__back {
  display: inline-block;
  margin-bottom: .75rem;
  font-size: .85rem;
  color: var(--hwb-black);
  text-decoration: none;
}
.hwb-picked__back:hover { text-decoration: underline; }

.hwb-picked {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem;
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  background: var(--hwb-white);
  margin-bottom: .75rem;
}
.hwb-picked__fig {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: var(--hwb-light) center/cover no-repeat;
  /* photos stay in colour - greyscale made the pages feel cold */
  display: grid;
  place-items: center;
}
.hwb-picked__fig[style*="background-image"] .hwb-ph__mark { display: none; }
.hwb-picked__fig .hwb-ph__mark { font-size: 1.1rem; }
.hwb-picked__body { min-width: 0; }
.hwb-picked__label {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hwb-grey);
  margin-bottom: .2rem;
}
.hwb-picked__body h3 {
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: .2rem;
}
.hwb-picked__body p { font-size: .85rem; color: var(--hwb-grey); }

.hwb-reassure {
  padding: .8rem 1rem;
  border-left: 2px solid var(--hwb-black);
  background: var(--hwb-light);
  border-radius: 0 8px 8px 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--hwb-grey);
  margin-bottom: 1.25rem;
}

@media (max-width: 420px) {
  .hwb-picked { gap: .75rem; padding: .7rem; }
  .hwb-picked__fig { flex-basis: 56px; width: 56px; height: 56px; }
  .hwb-picked__body h3 { font-size: 1rem; }
}

/* ---- homepage category cards ---- */
/* Two-up from the smallest screens: six tall cards in one column made the
   homepage an endless scroll. The card is restyled rather than just squeezed -
   shorter image, tighter type, stacked footer - so it still reads at ~160px. */
.hwb-grid--cats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.hwb-card--cat .hwb-ph { aspect-ratio: 3/2; }
.hwb-card--cat .hwb-card__body { padding: .7rem .75rem .4rem; }
.hwb-card--cat .hwb-card__body h4 {
  font-size: .9rem;
  line-height: 1.25;
  margin-bottom: .2rem;
  text-wrap: balance;
}
.hwb-card--cat .hwb-card__body p {
  font-size: .75rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hwb-card--cat .hwb-card__foot {
  padding: .5rem .75rem .6rem;
  gap: .5rem;
}
.hwb-card--cat .hwb-price { font-size: .95rem; line-height: 1.2; }
.hwb-card--cat .hwb-price small { font-size: .6rem; letter-spacing: .03em; }
.hwb-card--cat .hwb-go { font-size: .75rem; white-space: nowrap; }

/* very narrow phones: drop the description so the card stays compact */
@media (max-width: 400px) {
  .hwb-grid--cats { gap: .6rem; }
  .hwb-card--cat .hwb-card__body p { display: none; }
  .hwb-card--cat .hwb-card__foot { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* roomier screens: let them breathe and go wider */
@media (min-width: 601px) {
  .hwb-grid--cats {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--hwb-gap);
  }
  .hwb-card--cat .hwb-ph { aspect-ratio: 4/3; }
  .hwb-card--cat .hwb-card__body { padding: .85rem 1rem .5rem; }
  .hwb-card--cat .hwb-card__body h4 { font-size: .95rem; }
  .hwb-card--cat .hwb-card__body p { font-size: .8rem; }
  .hwb-card--cat .hwb-card__foot { padding: .6rem 1rem; }
  .hwb-card--cat .hwb-price { font-size: 1.05rem; }
}

/* ---- team ---- */
.hwb-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.hwb-team__card {
  margin: 0;
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  overflow: hidden;
  background: var(--hwb-white);
  transition: box-shadow .22s, transform .22s;
}
.hwb-team__card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.09); transform: translateY(-2px); }
.hwb-team__ph {
  aspect-ratio: 1 / 1;   /* square boxes - the 3:4 portraits read too large */
  background: var(--hwb-light);
  overflow: hidden;
}
/* staff portraits stay in colour - the greyscale used on service cards would
   make the team look cold and dated */
.hwb-team__ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  filter: none;
  transition: transform .5s ease;
}
.hwb-team__card:hover .hwb-team__ph img { transform: scale(1.035); }
.hwb-team__cap {
  padding: .7rem .8rem .8rem;
  text-align: center;
}
.hwb-team__cap b { display: block; font-size: .92rem; font-weight: 500; line-height: 1.3; }
.hwb-team__cap span {
  display: block;
  margin-top: .15rem;
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hwb-grey);
}
.hwb-team__trust { margin-top: 1.75rem; }

@media (min-width: 560px) {
  .hwb-team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
}
@media (min-width: 860px) {
  .hwb-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Six across on wide screens keeps each box modest rather than looming. */
@media (min-width: 1100px) {
  .hwb-team {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1120px;
    margin: 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hwb-team__card, .hwb-team__ph img { transition: none; }
  .hwb-team__card:hover { transform: none; }
  .hwb-team__card:hover .hwb-team__ph img { transform: none; }
}

/* ---- why choose us ---- */
.hwb-why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--hwb-border);
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  overflow: hidden;
}
.hwb-why__item {
  background: var(--hwb-white);
  padding: 1.6rem 1.5rem 1.75rem;
}
.hwb-why__n {
  display: block;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--hwb-grey);
  font-variant-numeric: tabular-nums;
  margin-bottom: .7rem;
}
.hwb-why__item h3 {
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: .5rem;
  text-wrap: balance;
}
.hwb-why__item p {
  font-size: .87rem;
  line-height: 1.62;
  color: var(--hwb-grey);
}
.hwb-sec--alt .hwb-why__item { background: var(--hwb-white); }

/* ---- visit us ---- */
.hwb-visit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  background: var(--hwb-white);
  border: 1px solid var(--hwb-border);
  border-radius: var(--hwb-radius);
  padding: 1.75rem 1.5rem;
}
.hwb-visit__col h3 {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hwb-grey);
  font-weight: 500;
  margin-bottom: .8rem;
}
.hwb-visit__addr {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.1rem;
}
.hwb-visit__contact { list-style: none; }
.hwb-visit__contact li { padding: .6rem 0; border-bottom: 1px solid var(--hwb-border); }
.hwb-visit__contact li:last-child { border-bottom: none; }
.hwb-visit__contact a {
  display: block;
  font-size: 1rem;
  color: var(--hwb-black);
  text-decoration: none;
}
.hwb-visit__contact a:hover { text-decoration: underline; }
.hwb-visit__contact span {
  display: block;
  font-size: .78rem;
  color: var(--hwb-grey);
  margin-top: .1rem;
}

.hwb-hours { width: 100%; border-collapse: collapse; margin-bottom: .9rem; }
.hwb-hours th,
.hwb-hours td {
  text-align: left;
  padding: .5rem 0;
  font-size: .9rem;
  font-weight: 400;
  border-bottom: 1px solid var(--hwb-border);
}
.hwb-hours td { text-align: right; color: var(--hwb-grey); font-variant-numeric: tabular-nums; }
.hwb-hours tr:last-child th,
.hwb-hours tr:last-child td { border-bottom: none; }
.hwb-hours th span {
  display: inline-block;
  margin-left: .5em;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--hwb-black);
  color: var(--hwb-white);
  padding: .15em .5em;
  border-radius: 100px;
  vertical-align: middle;
}
.hwb-hours .is-today th,
.hwb-hours .is-today td { color: var(--hwb-black); font-weight: 500; }
.hwb-hours .is-closed td { color: var(--hwb-grey); font-style: italic; }
.hwb-visit__note {
  font-size: .8rem;
  color: var(--hwb-grey);
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

@media (min-width: 720px) {
  .hwb-visit { grid-template-columns: 1fr 1fr; gap: 3rem; padding: 2.25rem 2.25rem 2.5rem; }
}

/* ---- FAQ accordion ---- */
.hwb-faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--hwb-border);
}
.hwb-faq__item { border-bottom: 1px solid var(--hwb-border); }
.hwb-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem .25rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  list-style: none;
  transition: color .18s;
}
.hwb-faq__item summary::-webkit-details-marker { display: none; }
.hwb-faq__item summary:hover { color: var(--hwb-grey); }
.hwb-faq__item summary:focus-visible { outline: 2px solid var(--hwb-black); outline-offset: 2px; }

/* plus / minus indicator, drawn in CSS so it needs no icon font */
.hwb-faq__item summary i {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.hwb-faq__item summary i::before,
.hwb-faq__item summary i::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform .22s ease, opacity .22s ease;
}
.hwb-faq__item summary i::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.hwb-faq__item summary i::after  { left: 6px; top: 0; width: 1.5px; height: 14px; }
.hwb-faq__item[open] summary i::after { transform: rotate(90deg); opacity: 0; }
.hwb-faq__item[open] summary { color: var(--hwb-black); font-weight: 500; }

.hwb-faq__a {
  padding: 0 .25rem 1.25rem;
  max-width: 65ch;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--hwb-grey);
}
.hwb-faq__a a { color: var(--hwb-black); }

@media (prefers-reduced-motion: reduce) {
  .hwb-faq__item summary i::before,
  .hwb-faq__item summary i::after { transition: none; }
}

/* ---- misc ---- */
.hwb-note { text-align: center; font-size: .8rem; color: var(--hwb-grey); margin-top: 2rem; line-height: 1.7; }
.hwb-all { text-align: center; margin-top: 2rem; }
.hwb-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 1.5rem;
  margin-top: 1.5rem;
  font-size: .8rem;
  color: var(--hwb-grey);
}

/* ---- responsive ---- */
@media (max-width: 600px) {
  .hwb-hero { padding: 2.5rem 1rem 2rem; }
  .hwb-sec { padding: 2.5rem 0; }
  .hwb-steps { gap: 1rem; font-size: .78rem; }
  .hwb-steps b { font-size: 1.25rem; }
  /* Service cards go two-up on phones too. One per row meant a 75-service
     menu scrolled forever. The card is recompacted below so the names and
     prices still read at half width rather than just being squeezed. */
  .hwb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .hwb-cats { grid-template-columns: 1fr; }

  .hwb-card .hwb-ph { aspect-ratio: 4 / 3; }
  .hwb-card__body { padding: .6rem .65rem .35rem; }
  .hwb-card__body h4 {
    font-size: .86rem;
    line-height: 1.25;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hwb-card__body p {
    font-size: .73rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hwb-card__foot { padding: .45rem .65rem .6rem; gap: .35rem; }
  .hwb-price { font-size: .95rem; line-height: 1.15; }
  .hwb-price small { font-size: .58rem; letter-spacing: .02em; }
  .hwb-go { font-size: .72rem; white-space: nowrap; }
  .hwb-dur { font-size: .64rem; padding: .18em .5em; bottom: .4rem; right: .4rem; }
  .hwb-dur svg { width: 10px; height: 10px; }
  .hwb-group__h h3 { font-size: 1rem; }

  /* Very narrow phones: the description is the first thing to go - a
     two-word fragment helps nobody, and the price is what matters. */
  @media (max-width: 380px) {
    .hwb-grid { gap: .55rem; }
    .hwb-card__body p { display: none; }
    .hwb-card__foot { flex-direction: column; align-items: flex-start; gap: .15rem; }
  }
  .hwb-pop { grid-template-columns: 1fr 1fr; }
  .hwb-picked { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hwb-card, .hwb-cat { transition: none; }
  .hwb-card:hover, .hwb-cat:hover { transform: none; }
}

/* ---- Amelia form: keep it monochrome ---- */
.hwb-page .amelia-app-booking,
.hwb-page #amelia-container { font-family: var(--hwb-font) !important; }
.hwb-page .amelia-app-booking .el-button--primary,
.hwb-page .am-button-primary {
  background: var(--hwb-black) !important;
  border-color: var(--hwb-black) !important;
}
.hwb-page .amelia-app-booking .el-button--primary:hover,
.hwb-page .am-button-primary:hover {
  background: #333 !important;
  border-color: #333 !important;
}

/* =========================================================
   SPLIT HERO
   The salon photo is bright and airy, so the type sits on a
   solid dark panel beside it rather than under a darkening
   scrim. A heavily blurred copy of the same shot backs the
   whole band so the black reads with depth, not flat.
   ========================================================= */
.hwb-hero--split {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: left;
  padding: clamp(2.25rem, 5vw, 4rem) 0;
}
.hwb-hero--split::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, #111 0%, rgba(17,17,17,.93) 40%, rgba(17,17,17,.72) 100%);
}
.hwb-hero__bg {
  position: absolute;
  inset: -10%;
  z-index: -2;
  background-size: cover;
  background-position: center 42%;
  filter: grayscale(1) blur(26px) brightness(.5) contrast(1.1);
  transform: scale(1.08);
}

.hwb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.hwb-hero__copy { min-width: 0; }

.hwb-hero--split .hwb-hero__eyebrow { margin-bottom: .9rem; }
.hwb-hero--split .hwb-hero__h {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: .85rem;
  text-wrap: balance;
}
.hwb-hero--split .hwb-hero__h em { font-weight: 200; opacity: .85; }
.hwb-hero--split p {
  margin: 0;
  max-width: 46ch;
  font-size: 1rem;
  opacity: .74;
}
.hwb-hero--split .hwb-badges {
  justify-content: flex-start;
  margin-top: 1.5rem;
}

/* Call to action */
.hwb-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.75rem;
}
.hwb-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .85em 1.6em;
  border-radius: 100px;
  font-size: .85rem;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.hwb-hero__btn--solid { background: #fff; color: #111; }
.hwb-hero__btn--solid:hover { background: #e6e6e6; transform: translateY(-1px); }
.hwb-hero__btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; }
.hwb-hero__btn--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); transform: translateY(-1px); }

/* Framed photo */
.hwb-hero__media {
  position: relative;
  margin: 0;
  border-radius: calc(var(--hwb-radius) * 1.6);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #1b1b1b;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.hwb-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
.hwb-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 44%;
  display: block;
  filter: grayscale(1) contrast(1.06);
}

/* Floating caption chip on the photo */
.hwb-hero__tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1em;
  border-radius: 100px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(17,17,17,.62);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hwb-hero__tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

@media (max-width: 860px) {
  .hwb-hero--split { padding: 0 0 clamp(1.75rem, 6vw, 2.5rem); }
  .hwb-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 5vw, 1.75rem);
  }
  /* Photo leads on small screens, full-bleed out of the container. */
  .hwb-hero__media {
    order: -1;
    aspect-ratio: 16 / 10;
    border-radius: 0;
    box-shadow: none;
    margin-inline: -1.25rem;
  }
  .hwb-hero__media::after { border-radius: 0; border-inline: 0; border-top: 0; }
  .hwb-hero--split .hwb-hero__h { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hwb-hero--split p { max-width: none; font-size: .95rem; }
  .hwb-hero__tag { left: 1.25rem; bottom: 1rem; }
}
@media (max-width: 460px) {
  .hwb-hero__media { aspect-ratio: 4 / 3; }
  .hwb-hero__cta { gap: .5rem; }
  .hwb-hero__btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .hwb-hero__btn { transition: none; }
  .hwb-hero__btn:hover { transform: none; }
}

/* =========================================================
   HOME HERO
   The salon photo is shown exactly as supplied - full colour,
   uncropped, no filter of any kind. The type therefore sits on
   a solid dark panel beside it rather than over it.

   The homepage runs the theme header transparent with light
   text, so the top of this band must stay dark and carry
   enough top padding to clear it.
   ========================================================= */
.hwb-hhero {
  position: relative;
  background: #0d0d0d;
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #131313 0%, #0d0d0d 55%, #101010 100%);
  color: #fff;
  overflow: hidden;
  padding: clamp(7rem, 11vw, 10.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.hwb-hhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hwb-hhero__copy { min-width: 0; }

/* Eyebrow with a short leading rule */
.hwb-hhero__eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin-bottom: 1.35rem;
}
.hwb-hhero__eyebrow::before {
  content: '';
  width: clamp(24px, 4vw, 46px);
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}

.hwb-hhero__h {
  font-size: clamp(2.15rem, 4.6vw, 3.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.hwb-hhero__h em { font-weight: 200; font-style: normal; opacity: .88; }

.hwb-hhero p {
  margin: 0;
  max-width: 48ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255,255,255,.74);
}

/* Buttons */
.hwb-hhero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}
.hwb-hhero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .95em 1.9em;
  border-radius: 100px;
  font-size: .88rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.hwb-hhero__btn--solid { background: #fff; color: #111; }
.hwb-hhero__btn--solid:hover { background: #e8e8e8; transform: translateY(-1px); }
.hwb-hhero__btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.hwb-hhero__btn--ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.62);
  transform: translateY(-1px);
}

/* The photo: exactly as supplied, uncropped, unfiltered. */
.hwb-hhero__media {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0d0d0d;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.hwb-hhero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.15);
  pointer-events: none;
}
.hwb-hhero__media img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
}

/* Fact strip under the split */
.hwb-hhero__strip {
  margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.hwb-hhero__fact b {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: .3rem;
}
.hwb-hhero__fact span {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

@media (max-width: 900px) {
  .hwb-hhero {
    padding: clamp(6rem, 22vw, 8rem) 0 clamp(2.25rem, 7vw, 3rem);
  }
  .hwb-hhero__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 6vw, 2.5rem);
  }
  /* Copy leads on small screens so the transparent light header
     always sits over dark, never over the bright photo. */
  .hwb-hhero__copy { order: 1; }
  .hwb-hhero__media { order: 2; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
  .hwb-hhero__h { font-size: clamp(2rem, 8.5vw, 2.7rem); }
  .hwb-hhero p { max-width: none; font-size: .97rem; }
  .hwb-hhero__strip { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.25rem; }
}
@media (max-width: 460px) {
  .hwb-hhero__cta { gap: .55rem; }
  .hwb-hhero__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hwb-hhero__btn { transition: none; }
  .hwb-hhero__btn:hover { transform: none; }
}


/* "from" prefix on services quoted as a range rather than a fixed price */
.hwb-from {
  font-style: normal;
  font-size: .62em;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hwb-grey);
  margin-right: .3em;
  vertical-align: .12em;
}