/* =========================================================================
   Hairways - homepage hero  (.hwh)
   Rebuilt 2026-10-01 around the client's own photography.

   The two photographs were shot to a brief, so the layout can finally do the
   obvious thing instead of working around a snapshot:

     desktop  the wide frame was composed with its LEFT THIRD deliberately
              empty - plain ivory wall. The headline sits in that space, on
              the photograph itself. Nothing is covered, nothing is cropped
              out; the emptiness is used for what it was left for.

     mobile   a separate upright frame, shown whole below the logo, with the
              words on an ivory panel beneath it.

   Light, not dark. The salon's walls are ivory, the photographs are bright,
   and the sections below the hero are white - a near-black hero met that
   white edge like a slammed door. Warm ivory ground, warm near-black type,
   brass for emphasis: the room's own colours.
   ========================================================================= */

.hwh {
  --hwh-paper: #f7f3ea;      /* warm ivory - the salon's walls */
  --hwh-paper-2: #fffdf8;
  --hwh-ink: #171510;        /* warm near-black, never pure #000 */
  --hwh-ink-2: #574f43;      /* body copy */
  --hwh-ink-3: #8c8375;      /* labels */
  --hwh-brass: #9a7420;      /* accessible brass on ivory (7.0:1) */
  --hwh-brass-lit: #c79a3c;  /* the button - brass at full strength */
  --hwh-brass-bg: #f0e6cf;
  --hwh-rule: #e2dace;
  --hwh-open: #2f7a4d;
  --hwh-shut: #9c4a38;

  --hwh-serif: 'Instrument Serif', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --hwh-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  position: relative;
  background: var(--hwh-paper);
  color: var(--hwh-ink);
  font-family: var(--hwh-sans);
  overflow: hidden;
}

.hwh, .hwh * { box-sizing: border-box; }

/* Ecomus rounds every image it can reach; on a full-bleed hero that reads as
   a rendering fault. Two classes to outrank the theme. */
.hwh .hwh__photo,
.hwh .hwh__photo picture,
.hwh .hwh__photo img { border-radius: 0 !important; }


/* ---------- the photograph -------------------------------------------- */

.hwh__photo {
  position: relative;
  margin: 0;
  line-height: 0;
  background: var(--hwh-paper);
}

.hwh__photo picture { display: block; }

.hwh__photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;   /* the service cards are desaturated; the hero never is */
}


/* ---------- the words --------------------------------------------------- */

.hwh__panel { position: relative; padding: 1.5rem 1.35rem 2.6rem; }

.hwh__inner { max-width: 34rem; }

/* live opening state - the one thing a walk-in customer wants first */
.hwh__status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.15rem;
  padding: .4em .85em;
  background: var(--hwh-paper-2);
  border: 1px solid var(--hwh-rule);
  border-radius: 100px;
  font-size: .78rem;
  letter-spacing: .01em;
  color: var(--hwh-ink-2);
}

.hwh__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hwh-ink-3); flex: none; }
.hwh__status.is-open .hwh__dot { background: var(--hwh-open); box-shadow: 0 0 0 3px rgba(47,122,77,.18); }
.hwh__status.is-shut .hwh__dot { background: var(--hwh-shut); box-shadow: 0 0 0 3px rgba(156,74,56,.16); }
.hwh__status b { font-weight: 500; color: var(--hwh-ink); }

.hwh__eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .85rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hwh-brass);
}

.hwh__eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; flex: none; opacity: .8; }

.hwh__title {
  margin: 0 0 .9rem;
  font-family: var(--hwh-serif);
  /* Capped well below 100vw at every step - a raw vw clamp is what pushed the
     previous hero's headline off the side of the page between 700 and 860px. */
  font-size: clamp(2.15rem, 7.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -.005em;
  color: var(--hwh-ink);
  text-wrap: balance;
}

.hwh__title em { font-style: italic; color: var(--hwh-brass); }

.hwh__lede {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.66;
  color: var(--hwh-ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}


/* ---------- calls to action -------------------------------------------- */

.hwh__cta { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.9rem; }

.hwh__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 1em 1.75em;
  font-family: var(--hwh-sans);
  font-size: .9rem;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background .2s, color .2s, border-color .2s;
}

.hwh__btn--gold {
  background: var(--hwh-ink);
  color: var(--hwh-paper);
  font-weight: 400;
}

.hwh__btn--gold:hover { background: var(--hwh-brass); color: #15140e; }

.hwh__btn--ghost {
  background: transparent;
  color: var(--hwh-ink);
  border-color: #cdc4b4;
}

.hwh__btn--ghost:hover { border-color: var(--hwh-ink); background: rgba(23,21,16,.04); }

.hwh__btn:focus-visible { outline: 2px solid var(--hwh-brass); outline-offset: 3px; }

.hwh__arrow { transition: transform .2s; }
.hwh__btn:hover .hwh__arrow { transform: translateX(3px); }


/* =========================================================================
   Tablet
   ========================================================================= */

@media (min-width: 600px) {
  .hwh__panel { padding: 2.6rem 2.2rem 3.2rem; }
  .hwh__title { font-size: clamp(2.5rem, 5.4vw, 3.3rem); }
  .hwh__lede  { font-size: 1.05rem; }
  .hwh__cta   { flex-direction: row; flex-wrap: wrap; }
}


/* =========================================================================
   Desktop - the words move onto the photograph

   The wide frame was composed with its left third empty for exactly this.
   A soft ivory wash runs left-to-right underneath the type: over the wall it
   is invisible, and it guarantees contrast if the crop ever shifts.
   ========================================================================= */

@media (min-width: 981px) {
  .hwh { display: grid; }

  /* Both children occupy the same grid cell, so the panel sits on the photo
     without absolute positioning - the photo keeps setting the height. */
  .hwh__photo,
  .hwh__panel { grid-area: 1 / 1; }

  /* aspect-ratio, not just max-height. The child image is sized with
     height:100%, and a percentage only resolves against a parent whose own
     height is definite - with max-height alone the box stayed auto-height,
     the percentage collapsed back to auto, and object-position was ignored
     while the photograph got clipped from the bottom instead of cropped. */
  .hwh__photo {
    /* width:100% is load-bearing. With aspect-ratio set, max-height shrinks
       the element's WIDTH as well to preserve the ratio - on a 1920px screen
       that left the photograph stopping at 1351px with bare ivory beside it.
       Pinning the width makes aspect-ratio drive the height only. */
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: min(80vh, 760px);
    overflow: hidden;
  }

  /* Once max-height bites, the box is wider than 16:9 and the frame crops top
     and bottom. Hold it high - the stylist's head sits near the top of the
     frame and a centred crop takes the top of it off. */
  .hwh__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 24%;
  }

  .hwh__panel {
    display: flex;
    align-items: center;
    padding: 3rem clamp(2rem, 4vw, 4rem) 3rem clamp(2.5rem, 6vw, 6rem);
    /* Has to stay near-opaque across the whole text column and only then
       feather out. An earlier, shorter wash left the last stat sitting over
       the client's dark hair at around 1024px wide, where it was close to
       unreadable. */
    background: linear-gradient(
      100deg,
      rgba(247, 243, 234, .985) 0%,
      rgba(247, 243, 234, .97)  38%,
      rgba(247, 243, 234, .90)  52%,
      rgba(247, 243, 234, .45)  64%,
      rgba(247, 243, 234, 0)    78%
    );
  }

  /* The column widens with the viewport, but never past the strong part of
     the wash - that ratio is what keeps the type legible at every width. */
  .hwh__inner { max-width: 28rem; }

  .hwh__title { font-size: clamp(2.6rem, 3.3vw, 3.5rem); margin-bottom: 1rem; }
  .hwh__lede  { margin-bottom: 1.9rem; max-width: 40ch; }
}

@media (min-width: 1200px) {
  .hwh__inner { max-width: 31rem; }
}

@media (min-width: 1400px) {
  .hwh__title { font-size: 3.7rem; }
  .hwh__inner { max-width: 34rem; }
}


/* =========================================================================
   Preferences

   The hero commits to one light treatment on purpose - it has to sit under a
   white theme header and above white sections - so there is no dark branch.
   Every colour above is stated outright rather than inherited, so the section
   renders the same whatever the host page is doing.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hwh__btn, .hwh__arrow { transition: none; }
}