/* =========================================================================
   HAIRWAYS - LUX
   Premium page system for About Us, Our Store and Contact Us.
   Built 2026-10-06, replacing the monochrome placeholder layout.

   The pages this replaces were greyscale, full of placeholder boxes and set
   in the same serif every template uses - which is what makes a page read as
   generated rather than designed. Three decisions push against that:

   1. COLOUR. Espresso, ivory, brass and a deep wine, taken from the salon's
      own room - black fittings, gold mirror lights, ivory walls. Wine appears
      once or twice per page as a feature surface, never as decoration.
   2. CONTINUITY. Instrument Serif and Jost are already the site's faces, used
      on the homepage hero and the Signature band. Reusing them instead of
      introducing a fourth font is what makes the site feel like one brand.
   3. FEWER, LARGER PICTURES. There are four real photographs of this salon.
      Six small frames would mean two empty; four large ones read as an edit.

   Namespaced .lx- so nothing collides with the older .hw- system still
   loaded on these pages.
   ========================================================================= */

.lx {
  --lx-ink:    #171310;
  --lx-ink-2:  #514840;
  --lx-ink-3:  #8a8075;
  --lx-paper:  #faf7f1;
  --lx-cream:  #f2ebdd;
  --lx-wine:   #3b252e;
  --lx-brass:  #9a7420;
  --lx-brass-lit: #c9a44c;
  --lx-line:   rgba(23,19,16,.13);
  --lx-line-d: rgba(250,247,241,.17);

  --lx-serif: 'Instrument Serif', 'Hoefler Text', Georgia, serif;
  --lx-sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--lx-sans);
  font-weight: 300;
  line-height: 1.7;
  color: var(--lx-ink-2);
  background: var(--lx-paper);
  -webkit-font-smoothing: antialiased;
}
.lx *, .lx *::before, .lx *::after { box-sizing: border-box; }
.lx img { max-width: 100%; display: block; }

/* The theme rounds every image site-wide; on full-bleed editorial frames a
   rounded corner reads as a rendering fault. */
.lx img, .lx .lx-fig { border-radius: 0 !important; }


/* ---- surfaces ---------------------------------------------------------- */

.lx-sec { padding: clamp(3.2rem, 8vw, 7rem) 0; position: relative; }
.lx-sec--paper { background: var(--lx-paper); }
.lx-sec--cream { background: var(--lx-cream); }
.lx-sec--ink   { background: var(--lx-ink);  color: rgba(250,247,241,.74); }
.lx-sec--wine  { background: var(--lx-wine); color: rgba(250,247,241,.78); }
.lx-sec--tight { padding: clamp(2.4rem, 5vw, 4rem) 0; }

.lx-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.3rem; }
.lx-narrow { max-width: 760px; }


/* ---- type -------------------------------------------------------------- */

.lx-eyebrow {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1.05rem;
  font-size: .67rem; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--lx-brass);
}
.lx-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; opacity: .8; }
.lx-sec--ink .lx-eyebrow, .lx-sec--wine .lx-eyebrow { color: var(--lx-brass-lit); }

.lx-h1 {
  margin: 0 0 1rem;
  font-family: var(--lx-serif); font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.01em;
  color: var(--lx-paper); text-wrap: balance;
}

.lx-h2 {
  margin: 0 0 1rem;
  font-family: var(--lx-serif); font-weight: 400;
  font-size: clamp(1.95rem, 4.6vw, 3.1rem);
  line-height: 1.08; letter-spacing: -.005em;
  color: var(--lx-ink); text-wrap: balance;
}
.lx-sec--ink .lx-h2, .lx-sec--wine .lx-h2 { color: var(--lx-paper); }
.lx-h2 em { font-style: italic; color: var(--lx-brass); }
.lx-sec--ink .lx-h2 em, .lx-sec--wine .lx-h2 em { color: var(--lx-brass-lit); }

.lx-h3 {
  margin: 0 0 .5rem;
  font-family: var(--lx-serif); font-weight: 400;
  font-size: 1.42rem; line-height: 1.2; color: var(--lx-ink);
}
.lx-sec--ink .lx-h3, .lx-sec--wine .lx-h3 { color: var(--lx-paper); }

.lx-lede {
  margin: 0 0 1.3rem;
  font-size: 1.1rem; line-height: 1.75;
  color: var(--lx-ink-2); max-width: 58ch; text-wrap: pretty;
}
.lx-sec--ink .lx-lede, .lx-sec--wine .lx-lede { color: rgba(250,247,241,.72); }

.lx p { margin: 0 0 1.1em; font-size: 1.01rem; }
.lx p:last-child { margin-bottom: 0; }

.lx-label {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lx-ink-3); margin-bottom: .4rem;
}
.lx-sec--ink .lx-label, .lx-sec--wine .lx-label { color: rgba(250,247,241,.5); }


/* ---- hero -------------------------------------------------------------- */

.lx-hero { position: relative; min-height: clamp(360px, 64vh, 620px); display: flex; align-items: flex-end; overflow: hidden; }
.lx-hero__img { position: absolute; inset: 0; }
.lx-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }

/* On a phone the hero frame is nearly square, so a 16:9 photograph loses its
   outer thirds. Centred, the stylist shot cropped down to the back of a
   client's head and a hairdryer - no face, no subject. Holding the crop to
   the right keeps the stylist in frame, which is the whole point of the
   picture. Pages that set object-position inline are unaffected. */
@media (max-width: 899px) {
  .lx-hero__img img { object-position: 82% 28%; }
  /* A hero that ships its own portrait crop for the phone is already framed;
     re-aiming it at 82% would push the subject back out of frame. */
  .lx-hero--mob .lx-hero__img img { object-position: center 24%; }
}

/* ---- full-bleed hero, whole photograph -------------------------------- */
/* On desktop a landscape hero shows the picture COMPLETE: the image sits in
   normal flow and sets the section's height, so nothing is cropped, and the
   type is laid over its lower third.

   Only landscape photographs get this. A portrait shown whole at 1440px wide
   would stand about 1800px tall - taller than the screen, which is not a
   hero, so those keep the cropped band. */
/* A hero whose photograph is shown whole at EVERY width, phone included.
   16:9 on a 375px screen stands only ~210px tall, so the headline cannot sit
   on top of it - the text moves below the image onto the ink ground instead,
   and the veil is switched off because there is nothing left to veil. */
@media (max-width: 899px) {
  .lx-hero--full16 { min-height: 0; display: block; background: var(--lx-ink); overflow: visible; }
  .lx-hero--full16 .lx-hero__img { position: relative; inset: auto; }
  .lx-hero--full16 .lx-hero__img img { width: 100%; height: auto; object-fit: fill; object-position: center; }
  .lx-hero--full16 .lx-hero__veil { display: none; }
  .lx-hero--full16 .lx-hero__in { position: static; padding-top: 1.7rem; padding-bottom: 2.3rem; }
}

@media (min-width: 900px) {
  .lx-hero--full { min-height: 0; display: block; }
  .lx-hero--full .lx-hero__img { position: relative; inset: auto; }
  .lx-hero--full .lx-hero__img img { height: auto; object-fit: fill; object-position: center; }
  .lx-hero--full .lx-hero__in {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding-top: 0;
  }
}

/* The veil only has to carry the type, which sits in the lower third - so it
   is heavy at the foot and nearly clears by the top, letting the photograph
   itself show rather than sitting behind a flat wash. Still colour: the
   client has asked more than once that their photographs keep it. */
.lx-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(14,11,9,.86) 0%,
    rgba(14,11,9,.66) 26%,
    rgba(14,11,9,.34) 52%,
    rgba(14,11,9,.06) 100%);
}
.lx-hero__in { position: relative; width: 100%; padding-bottom: clamp(2.2rem, 5vw, 4rem); padding-top: clamp(5rem, 12vw, 8rem); }
.lx-hero .lx-lede { color: rgba(250,247,241,.78); max-width: 46ch; margin-bottom: 0; }

.lx-crumb { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,247,241,.5); margin: 0 0 1.4rem; }
.lx-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(250,247,241,.3); }
.lx-crumb a:hover { color: var(--lx-brass-lit); border-color: var(--lx-brass-lit); }


/* ---- editorial split --------------------------------------------------- */
/* Asymmetric on purpose. A 50/50 split is what a page builder produces; an
   uneven one is what a designer draws. */

.lx-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
.lx-split__body { min-width: 0; }

/* Figures show the WHOLE photograph at its own ratio - no fixed frame, no
   cover-cropping. A 3:4 portrait renders 3:4, a 4:3 landscape renders 4:3.
   Forcing mixed-ratio photographs into one frame shape is what was slicing
   the tops off mirrors and the ends off shelves. */
.lx-fig { overflow: hidden; background: var(--lx-cream); }
.lx-fig img { width: 100%; height: auto; display: block; }

/* The ratio modifiers remain for anything that genuinely needs a fixed
   frame - the square staff portraits, which are 640x640 at source, so cover
   crops nothing from them. */
.lx-fig--fixed img { height: 100%; object-fit: cover; }
.lx-fig--4x5.lx-fig--fixed  { aspect-ratio: 4/5; }
.lx-fig--3x4.lx-fig--fixed  { aspect-ratio: 3/4; }
.lx-fig--3x2.lx-fig--fixed  { aspect-ratio: 3/2; }
.lx-fig--16x9.lx-fig--fixed { aspect-ratio: 16/9; }
.lx-fig--1x1.lx-fig--fixed  { aspect-ratio: 1/1; }

/* A thin brass rule offset behind the picture - one small flourish, used
   sparingly, that a template would not produce. */
.lx-figwrap { position: relative; }
.lx-figwrap::after {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 62%; height: 62%; border: 1px solid var(--lx-brass);
  opacity: .4; pointer-events: none; z-index: -1;
}

.lx-cap { margin-top: .7rem; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lx-ink-3); }


/* ---- facts strip ------------------------------------------------------- */

.lx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lx-line); border: 1px solid var(--lx-line); }
.lx-fact { background: var(--lx-paper); padding: 1.2rem 1.1rem; }
.lx-sec--cream .lx-fact { background: var(--lx-cream); }
.lx-fact dt { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--lx-brass); margin-bottom: .45rem; }
.lx-fact dd { margin: 0; font-size: .95rem; color: var(--lx-ink); line-height: 1.55; }


/* ---- numbered list ----------------------------------------------------- */
/* Numbers here are real: these are the fifteen reasons, in order, and the
   client refers to them by number. */

.lx-index { border-top: 1px solid var(--lx-line); }
.lx-row {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .3rem 1rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--lx-line);
}
.lx-row__n { font-family: var(--lx-serif); font-size: 1.05rem; color: var(--lx-brass); line-height: 1.5; font-variant-numeric: tabular-nums; }
.lx-row__t { font-size: 1.04rem; color: var(--lx-ink); font-weight: 400; }
.lx-row__d { grid-column: 2; font-size: .95rem; color: var(--lx-ink-2); }


/* ---- cards ------------------------------------------------------------- */

.lx-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lx-line); border: 1px solid var(--lx-line); }
.lx-card { background: var(--lx-paper); padding: 1.5rem 1.35rem; }
.lx-sec--cream .lx-card { background: var(--lx-cream); }
.lx-card p { font-size: .95rem; margin: 0; }
.lx-card .lx-h3 { font-size: 1.22rem; }

/* statement blocks - mission / vision / promise */
.lx-stmt { background: var(--lx-paper); padding: clamp(1.5rem,3vw,2.2rem); border: 1px solid var(--lx-line); display: flex; flex-direction: column; }
.lx-sec--cream .lx-stmt { background: var(--lx-paper); }
.lx-stmt__q {
  font-family: var(--lx-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.62rem); line-height: 1.42;
  color: var(--lx-ink); margin: 0 0 1.1rem;
}
.lx-stmt p { font-size: .97rem; color: var(--lx-ink-2); }


/* ---- pull quote -------------------------------------------------------- */

.lx-quote { text-align: center; max-width: 24ch; margin-inline: auto; }
.lx-quote--wide { max-width: 34ch; }
.lx-quote__t {
  font-family: var(--lx-serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.2;
  color: var(--lx-paper); margin: 0 0 1.3rem; text-wrap: balance;
}
.lx-quote__by { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lx-brass-lit); }


/* ---- buttons ----------------------------------------------------------- */

.lx-btns { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.7rem; }
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .85em 1.9em;
  font-family: var(--lx-sans); font-size: .85rem; font-weight: 400;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--lx-ink); background: var(--lx-ink); color: var(--lx-paper);
  transition: background .22s, color .22s, border-color .22s;
}
.lx-btn:hover { background: var(--lx-brass); border-color: var(--lx-brass); color: #fffdf7; }
.lx-btn--ghost { background: transparent; color: var(--lx-ink); border-color: rgba(23,19,16,.28); }
.lx-btn--ghost:hover { background: transparent; border-color: var(--lx-ink); color: var(--lx-ink); }
.lx-sec--ink .lx-btn, .lx-sec--wine .lx-btn { background: var(--lx-paper); border-color: var(--lx-paper); color: var(--lx-ink); }
.lx-sec--ink .lx-btn:hover, .lx-sec--wine .lx-btn:hover { background: var(--lx-brass-lit); border-color: var(--lx-brass-lit); color: var(--lx-ink); }
.lx-sec--ink .lx-btn--ghost, .lx-sec--wine .lx-btn--ghost { background: transparent; color: var(--lx-paper); border-color: rgba(250,247,241,.34); }
.lx-sec--ink .lx-btn--ghost:hover, .lx-sec--wine .lx-btn--ghost:hover { border-color: var(--lx-brass-lit); color: var(--lx-brass-lit); }
.lx-btn:focus-visible { outline: 2px solid var(--lx-brass); outline-offset: 3px; }

.lx-link { color: var(--lx-brass); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; font-size: .95rem; }
.lx-link:hover { color: var(--lx-ink); }
.lx-sec--ink .lx-link, .lx-sec--wine .lx-link { color: var(--lx-brass-lit); }


/* ---- hours table ------------------------------------------------------- */

.lx-hours { width: 100%; border-collapse: collapse; margin: 1.3rem 0 0; }
.lx-hours th, .lx-hours td { text-align: left; padding: .72rem .2rem; border-bottom: 1px solid var(--lx-line); font-weight: 300; font-size: .97rem; }
.lx-hours th { color: var(--lx-ink-2); }
.lx-hours td { text-align: right; color: var(--lx-ink); font-variant-numeric: tabular-nums; }
.lx-hours tr:last-child th, .lx-hours tr:last-child td { border-bottom: 0; }
.lx-hours .is-shut td { color: var(--lx-brass); font-style: italic; }
.lx-hours .is-today th, .lx-hours .is-today td { color: var(--lx-ink); font-weight: 400; }
.lx-hours .is-today th::after { content: " \00b7 today"; color: var(--lx-brass); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }


/* ---- team ------------------------------------------------------------- */

.lx-team { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.lx-team figure { margin: 0; }
.lx-team img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }


/* ---- FAQ --------------------------------------------------------------- */
/* <details> rather than scripted accordions: it works with no JavaScript,
   is keyboard operable for free, and the browser handles find-in-page. */

.lx-faq { border-top: 1px solid var(--lx-line); }
.lx-faq details { border-bottom: 1px solid var(--lx-line); }
.lx-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.25rem 0; cursor: pointer; list-style: none;
  font-size: 1.04rem; color: var(--lx-ink);
}
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary::after { content: "+"; font-size: 1.3rem; color: var(--lx-brass); flex: none; line-height: 1; transition: transform .25s; }
.lx-faq details[open] summary::after { transform: rotate(45deg); }
.lx-faq summary:hover { color: var(--lx-brass); }
.lx-faq__a { padding: 0 0 1.35rem; font-size: .97rem; color: var(--lx-ink-2); max-width: 70ch; }


/* ---- contact form (Contact Form 7) ------------------------------------ */

.lx-form { background: var(--lx-paper); border: 1px solid var(--lx-line); padding: clamp(1.4rem, 3vw, 2.2rem); }
.lx-form p { margin: 0 0 1rem; font-size: .95rem; }
.lx-form label { display: block; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-ink-3); margin-bottom: .45rem; }
.lx-form input[type=text], .lx-form input[type=email], .lx-form input[type=tel],
.lx-form input[type=date], .lx-form select, .lx-form textarea {
  width: 100%; font-family: var(--lx-sans); font-weight: 300;
  font-size: 16px;            /* below 16px iOS zooms the page on focus */
  padding: .8rem .9rem; color: var(--lx-ink);
  background: #fff; border: 1px solid var(--lx-line); border-radius: 0;
  transition: border-color .2s;
}
.lx-form textarea { min-height: 128px; resize: vertical; }
.lx-form input:focus, .lx-form select:focus, .lx-form textarea:focus { outline: none; border-color: var(--lx-ink); }
.lx-form input[type=submit], .lx-form button[type=submit] {
  width: 100%; min-height: 50px; margin-top: .4rem;
  font-family: var(--lx-sans); font-size: .85rem; letter-spacing: .09em; text-transform: uppercase;
  background: var(--lx-ink); color: var(--lx-paper); border: 1px solid var(--lx-ink);
  cursor: pointer; transition: background .22s, border-color .22s;
}
.lx-form input[type=submit]:hover { background: var(--lx-brass); border-color: var(--lx-brass); }
.lx-form .wpcf7-not-valid-tip { font-size: .8rem; color: #a33; margin-top: .3rem; }
.lx-form .wpcf7-response-output { margin: 1.2rem 0 0 !important; padding: .9rem 1.1rem !important; border: 1px solid var(--lx-line) !important; font-size: .9rem; }
.lx-form .wpcf7-spinner { margin: .6rem auto 0; display: block; }


/* ---- map --------------------------------------------------------------- */

.lx-map { border: 1px solid var(--lx-line); overflow: hidden; background: var(--lx-cream); }
.lx-map iframe { display: block; width: 100%; height: clamp(280px, 42vw, 440px); border: 0; }


/* =========================================================================
   Wider screens
   ========================================================================= */

@media (min-width: 680px) {
  .lx-facts { grid-template-columns: repeat(4, 1fr); }
  .lx-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .lx-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .lx-team { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .lx-row { grid-template-columns: 3.4rem 1fr; }
}

@media (min-width: 900px) {
  .lx-split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2.5rem, 5vw, 5rem); }
  /* the uneven splits - text narrower than picture, or the reverse */
  .lx-split--text  { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
  .lx-split--media { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
  .lx-split--flip .lx-split__media { order: -1; }
  .lx-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lx-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .lx-team { grid-template-columns: repeat(5, 1fr); }
  .lx-row { grid-template-columns: 4rem minmax(0,1fr) minmax(0,1.5fr); align-items: baseline; gap: 1.6rem; }
  .lx-row__d { grid-column: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-btn, .lx-faq summary::after, .lx-form input { transition: none; }
}

/* These pages commit to one warm light treatment - they sit under a white
   theme header and the ivory footer - so there is no dark-scheme branch.
   Every colour above is stated outright rather than inherited. */


/* ------------------------------------------------------------------ *
 * Inside Hairways - landscape plates (16:9) + scroll reveal.
 * Reveal styles are gated behind .hw-anim, which the script adds, so a
 * JS failure leaves every element visible rather than blank.
 * ------------------------------------------------------------------ */
.hw-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
@media (max-width: 760px) { .hw-shots { grid-template-columns: 1fr; gap: 1.4rem; } }
.hw-shot { margin: 0; }
.hw-shot__fig { overflow: hidden; background: #0d0d0d; }
.hw-shot__fig img { --s: 1; transform: scale(var(--s)); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.hw-shot:hover .hw-shot__fig img, .hw-shot:focus-within .hw-shot__fig img { --s: 1.045; }
.hw-shot__cap { transition: color .45s ease, letter-spacing .55s ease; }
.hw-shot:hover .hw-shot__cap { color: var(--lx-ink); letter-spacing: .26em; }

.hw-anim .hw-rv { opacity: 0; transform: translateY(18px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); transition-delay: var(--hw-d, 0ms); }
.hw-anim .hw-rv.is-in { opacity: 1; transform: none; }
.hw-anim .hw-shot.hw-rv .hw-shot__fig img { --s: 1.09; }
.hw-anim .hw-shot.hw-rv.is-in .hw-shot__fig img { --s: 1; }
.hw-anim .hw-shot.hw-rv.is-in:hover .hw-shot__fig img { --s: 1.045; }

@media (prefers-reduced-motion: reduce) {
	.hw-anim .hw-rv { opacity: 1; transform: none; transition: none; }
	.hw-shot__fig img, .hw-anim .hw-shot.hw-rv .hw-shot__fig img, .hw-anim .hw-shot.hw-rv.is-in .hw-shot__fig img { --s: 1; transition: none; }
	.hw-shot__cap, .hw-shot:hover .hw-shot__cap { transition: none; letter-spacing: .2em; }
}