/* ==========================================================================
   Monaco — section design system
   --------------------------------------------------------------------------
   Re-derived from the MONACO-SALON-GURU-STAGING-HANDOFF-20260911 bundle.

   The handoff expressed this design as ~4,455 content-hash class names
   (.mp1r08jrs, .ms1hhy3xm, …) across ~39,000 lines of generated CSS, because
   it was machine-converted from a prerendered React build. None of that is
   maintainable, so nothing here is copied from it — the values below were
   measured from that CSS and consolidated into tokens.

   Every section style maps to one SiteOrigin Page Builder row. Apply the
   class in the row's "Row Styles → Attributes → Row Class" field. Widgets
   inside the row are ordinary SiteOrigin widgets and stay editable.

   Load order: enqueued after salonguru.css. The parent/child sheets use
   !important liberally, so type and colour rules here are scoped to .mo-*
   and mirror that where they must win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   The new design's display serif is Cormorant Garamond, replacing GT Alpina.
   Added here as self-hosted woff2 variable cuts. Body copy stays on the Karla
   the child theme already ships, so nothing existing changes.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-normal-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-normal-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin-var.woff2") format("woff2");
}
/* Karla is deliberately NOT redeclared. salonguru.css already registers it as
   'Karla Light' from Karla-VariableFont_wght.ttf and applies it to body copy
   with !important. Adding a second Karla face would download the same
   typeface twice and win nothing, so --mo-sans below points at the existing
   family. */

/* --------------------------------------------------------------------------
   2. Tokens
   Colour counts are occurrences in the handoff's patterns.css + sections.css
   + 94 page slices, which is how the palette was identified.
   -------------------------------------------------------------------------- */

:root {
  /* Palette */
  --mo-ink:          #0d0d0b;   /* 3,524 uses — dominant dark ground        */
  --mo-gold:         #b8975a;   /* 3,486 uses — primary brand gold          */
  /* The same gold, darkened for a cream ground. The reference does this in
     its contrast pass: b8975a on cream is 2.4:1, 79643b is 4.5:1. */
  --mo-gold-on-cream: #79643b;
  --mo-gold-bright:  #c9a84c;   /*   928 uses — brighter gold, rules/accents*/

  /* Gold as *lettering* is not one colour. Measured against the four grounds:
     #b8975a reads 7.05:1 on ink but only 2.43:1 on cream and 2.76:1 on white,
     and on a gold band it is 1:1 — invisible. The reference darkens it to
     #79643b on the light grounds (5.0:1 and 5.68:1) and drops to ink on gold.

     So every rule that colours *text* gold points at this token instead of
     picking a literal, and each ground redefines it below. Borders, rules and
     backgrounds keep --mo-gold: they are not being read. */
  --mo-gold-fg:      var(--mo-gold);
  --mo-gold-soft:    #c9a96e;   /*   210 uses — muted gold, borders         */
  /* The champagne the reference uses for rules and primary actions. Measured
     from the live build rather than the frequency counts above, which favour
     #b8975a from the bulk of the page CSS. */
  --mo-champagne:    #c6a76a;
  --mo-cream:        #f5f0e8;   /*   664 uses — the "cream ground"          */
  --mo-white:        #ffffff;
  --mo-grey:         #555555;   /*   322 uses — secondary body copy         */

  --mo-on-ink:       rgba(255, 255, 255, 0.92);
  --mo-on-ink-muted: rgba(255, 255, 255, 0.70);
  --mo-hairline:     rgba(255, 255, 255, 0.12);
  --mo-hairline-ink: rgba(13, 13, 11, 0.12);

  /* Type */
  --mo-serif: 'Cormorant Garamond', Georgia, serif;
  --mo-sans:  'Karla Light', 'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* Consolidated from dozens of near-identical generated clamp() values */
  /* Measured off the reference at 1737px, where its heroes run 72-88px, its
     section headings 46-52px and its card headings 21-28px. The caps here
     were 52/44/30, so every hero on the site was landing about a third short
     of the design and the section headings a little under. */
  --mo-fs-display: clamp(38px, 4.8vw, 80px);
  --mo-fs-h2:      clamp(28px, 3.2vw, 48px);
  --mo-fs-h3:      clamp(21px, 2.3vw, 28px);
  /* 18px matches salonguru.css's own `article .panel-grid p { 18px !important }`,
     the established body size for Page Builder content. The handoff measured
     17px; the house convention wins, and no !important is used here so the two
     rules agree instead of competing. */
  --mo-fs-body:    18px;
  --mo-fs-small:   15px;
  --mo-fs-eyebrow: 12px;

  --mo-ls-eyebrow: 0.18em;

  /* Rhythm */
  --mo-section-pad:      clamp(64px, 10vw, 100px) clamp(24px, 6vw, 80px);
  --mo-section-pad-tight: clamp(40px, 6vw, 64px) clamp(24px, 6vw, 80px);
  --mo-container:  1100px;
  --mo-container-wide: 1200px;
  --mo-measure:    680px;   /* comfortable prose measure */
  --mo-gap:        clamp(24px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   Content width
   SiteOrigin puts the row class ON .panel-row-style, whose children are the
   cells — there is no inner wrapper to constrain. So instead of a max-width on
   a child that does not exist, the band keeps its full-bleed background and
   its horizontal padding grows to centre the content. Works with any number of
   cells.
   -------------------------------------------------------------------------- */
.mo-prose-band   { --mo-band: var(--mo-container); }
.mo-split-media,
.mo-card-grid,
.mo-video-panel,
.mo-gallery      { --mo-band: var(--mo-container-wide); }
.mo-faq          { --mo-band: 800px; }
.mo-cta-band,
.mo-stat-band,
.mo-video-grid,
.mo-reviews,
.mo-social,
.mo-finance,
.mo-feature,
.mo-hero-compact { --mo-band: var(--mo-container-wide); }
.mo-why-band     { --mo-band: 1100px; }
.mo-staff-band,
.mo-review-band,
.mo-linkcards-band,
.mo-methods-band { --mo-band: var(--mo-container-wide); }
.mo-note-band    { --mo-band: 1100px; }
.mo-pair-band    { --mo-band: 800px; }

/* …and the padding that re-centres their content inside it. This one stays an
   explicit list: a fair number of bands own their horizontal padding outright
   — the heroes, the contact strip and panel, the footer — and a blanket
   selector out-weighed their opt-outs instead of yielding to them. Adding a
   band here is the one registration still to remember. */
.mo-prose-band,
.mo-split-media,
.mo-card-grid,
.mo-video-panel,
.mo-gallery,
.mo-faq,
.mo-cta-band,
.mo-stat-band,
.mo-hero-compact,
.mo-video-grid,
.mo-reviews,
.mo-social,
.mo-why-band,
.mo-feature,
.mo-finance,
.mo-staff-band,
.mo-review-band,
.mo-note-band,
.mo-pair-band,
.mo-linkcards-band,
.mo-methods-band {
  padding-inline: max(
    clamp(24px, 6vw, 80px),
    calc((100% - var(--mo-band)) / 2)
  ) !important;
}

/* --------------------------------------------------------------------------
   Full-bleed rows

   SGv6 caps every Page Builder row at the site content width:

       body article .panel-grid > div { max-width: 1200px; margin: auto; }   (parent.css)

   That is the house convention and the right default. This design is the
   exception: its bands run edge to edge with the content centred inside them,
   so the cap is lifted for .mo-* rows only, by matching that selector and
   adding the row's own class — specificity (0,2,3) against (0,1,3), so no
   !important and every other row on the site is untouched.
   -------------------------------------------------------------------------- */
/* Every band in this design is full bleed with its content centred inside it,
   which is the opposite of the house default. Listing the kinds one by one
   meant a new band silently kept SGv6's container cap until someone noticed —
   which happened four times. Any row carrying a mo- class is a band. */
body article .panel-grid > div[class*="mo-"] {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* Cells fill the row's height so a split hero's two halves are equal. */
.mo-hero-split > .panel-grid-cell,
.mo-split-media > .panel-grid-cell,
.mo-video-panel > .panel-grid-cell { align-self: stretch; }

/* --------------------------------------------------------------------------
   3. Shared section scaffolding
   -------------------------------------------------------------------------- */

/* -- tone baseline --------------------------------------------------------
   extract.py resolves each band's ground from the handoff's own stylesheet
   and carries it as .mo-light or .mo-dark. Until now every band kind restated
   what dark meant for the elements its author happened to meet — h2 and p,
   usually — and anything else fell through to salonguru.css, which colours
   all of `main` rgb(51,51,51). On an ink ground that is 1.54:1, so headings,
   sub-headings and inline links in those bands were unreadable.

   This says it once, for any dark band. Per-kind rules further down the sheet
   still refine it, and anything with its own ground — a gold button, a badge —
   carries its own colour with !important and is unaffected.

   Only `a` needs !important here, because salonguru.css marks its link colour
   that way; the rest win on specificity alone.
   ------------------------------------------------------------------------- */

.mo-dark { color: var(--mo-on-ink); }

.mo-dark h1,
.mo-dark h2,
.mo-dark h3,
.mo-dark h4,
.mo-dark h5,
.mo-dark h6 { color: var(--mo-white); }

.mo-dark p,
.mo-dark li,
.mo-dark dt,
.mo-dark dd,
.mo-dark td,
.mo-dark th,
.mo-dark blockquote,
.mo-dark figcaption { color: var(--mo-on-ink-muted); }

.mo-dark em,
.mo-dark strong,
.mo-dark small,
.mo-dark span { color: inherit; }

/* SiteOrigin's own wrappers sit between the row and the copy and carry a
   colour of their own, so a band's tone never reached anything that inherits
   rather than being matched directly — a bare <span>, most often. Setting the
   tone on the wrappers lets it through. */
.mo-dark .panel-grid-cell,
.mo-dark .so-panel,
.mo-dark .so-widget-sow-editor,
.mo-dark .siteorigin-widget-tinymce { color: var(--mo-on-ink); }

.mo-light .panel-grid-cell,
.mo-light .so-panel,
.mo-light .so-widget-sow-editor,
.mo-light .siteorigin-widget-tinymce { color: var(--mo-ink); }

.mo-dark a { color: var(--mo-gold-fg) !important; }
.mo-dark a:hover,
.mo-dark a:focus-visible { color: var(--mo-gold-bright, #d7b969) !important; }

.mo-dark .mo-eyebrow { color: var(--mo-gold-fg); }

/* The same, the other way up. Kept deliberately low in the cascade — a card or
   tile that carries its own ink ground inside a cream band states its own
   colours further down the sheet and wins on source order. */

.mo-light { color: var(--mo-ink); }

.mo-light h1,
.mo-light h2,
.mo-light h3,
.mo-light h4,
.mo-light h5,
.mo-light h6 { color: var(--mo-ink); }

.mo-light p,
.mo-light li,
.mo-light dt,
.mo-light dd,
.mo-light blockquote,
.mo-light figcaption { color: var(--mo-grey); }

.panel-grid .mo-light .mo-eyebrow,
/* The ground token rather than the cream value directly: a gold band is also
   .mo-light, and #79643b on gold is 2.06:1. */
.mo-light .mo-eyebrow { color: var(--mo-gold-fg); }

/* The design has two light grounds. Cream is the common one; white carries the
   bands whose content is itself cream — the cards under "What to Expect", for
   one, which disappear on anything but white. !important, because each band
   kind paints its own cream ground further down the sheet. */
.mo-light.mo-ground-white { background: #fff !important; }

/* Gold is the third light ground: the brand gold sits at about the same
   luminance as cream, so it reads as a light band and takes ink copy, but
   calling it cream loses the strips the design puts on it. */
.mo-dark  { --mo-gold-fg: var(--mo-gold); }
.mo-light { --mo-gold-fg: var(--mo-gold-on-cream); }
.mo-light.mo-ground-gold,
.mo-cta-band.mo-gold { --mo-gold-fg: var(--mo-ink); }

.mo-light.mo-ground-gold { background: var(--mo-gold) !important; }
.mo-light.mo-ground-gold {
  --mn-strong: var(--mo-ink);
  --mn-muted: rgba(13, 13, 11, 0.72);
  --mn-accent: var(--mo-ink);
  --mn-accent2: var(--mo-ink);
}

/* Body copy on a gold band was still taking --mo-grey from the light
   baseline: #555 on #b8975a is 2.7:1. The CTA band already had its own value;
   this is the same treatment for every other gold band. */
.mo-light.mo-ground-gold p,
.mo-light.mo-ground-gold li { color: rgba(13, 13, 11, 0.78) !important; }

/* A component that paints an ink ground of its own has to re-arm the gold
   token for it. Inside a light band it otherwise inherits that band's gold —
   #79643b, which is 5:1 on cream but 3.43:1 on ink — so a post CTA or a
   finance panel dropped into a cream band came out with unreadable lettering.

   Bands are not listed here: they carry .mo-dark and are covered by it. These
   are the components that set a ground regardless of the band they land in,
   listed together for the same reason the band grounds below are. */
/* A full-bleed hero is ink by construction — it paints --mo-ink and lays a
   photograph over it — so a light tone on the row means nothing to it. Two
   heroes are tagged cream by the ground detection and both read their copy
   off ink regardless. */
.mo-hero-fullbleed,
.mo-finance,
.mo-tc-video,
.mo-contact-hero,
.mo-contact-panel-row,
.monaco-bay-cta,
.mo-prose-band:has(.home-locations-grid),
body.mo-blog .mo-feature,
body.mo-blog .mo-cards-foot,
body.mo-blog.single-post .mo-post-cta { --mo-gold-fg: var(--mo-gold); }

/* Each band kind paints its own ground; the tone classes only carry the copy
   colours. A new band that forgets this renders white on white, which is how
   these four were introduced — so they are listed together rather than left to
   be remembered one at a time. */
.mo-staff-band.mo-dark,
.mo-review-band.mo-dark,
.mo-note-band.mo-dark,
.mo-pair-band.mo-dark,
.mo-linkcards-band.mo-dark,
.mo-methods-band.mo-dark { background: var(--mo-ink); }

.mo-staff-band.mo-light,
.mo-review-band.mo-light,
.mo-note-band.mo-light,
.mo-pair-band.mo-light,
.mo-linkcards-band.mo-light,
.mo-methods-band.mo-light { background: var(--mo-cream); }

.mo-light a { color: var(--mo-gold-on-cream) !important; }
.mo-light a:hover,
.mo-light a:focus-visible { color: var(--mo-ink) !important; }


[class*="mo-section"],
.mo-hero-fullbleed,
.mo-hero-compact,
.mo-prose-band,
.mo-cta-band,
.mo-split-media,
.mo-card-grid,
.mo-gallery,
.mo-faq,
.mo-video-panel {
  font-family: var(--mo-sans);
  font-size: var(--mo-fs-body);
  line-height: 1.7;
  box-sizing: border-box;
}

/* SiteOrigin rows are already padded by the theme; these sections own their
   own rhythm, so neutralise the row padding and apply ours. */
/* Vertical rhythm only. The horizontal padding is set separately, under
   "Content width", because it also does the centring — a `padding` shorthand
   here would overwrite it. */
.mo-hero-compact,
.mo-prose-band,
.mo-cta-band,
.mo-split-media,
.mo-card-grid,
.mo-gallery,
.mo-faq,
.mo-video-panel,
.mo-video-grid,
.mo-reviews,
.mo-social,
.mo-why-band,
.mo-feature,
.mo-finance {
  padding-block: clamp(64px, 10vw, 100px) !important;
}

.mo-hero-fullbleed .panel-grid-cell,
.mo-hero-compact .panel-grid-cell,
.mo-prose-band .panel-grid-cell,
.mo-cta-band .panel-grid-cell,
.mo-split-media .panel-grid-cell,
.mo-card-grid .panel-grid-cell,
.mo-gallery .panel-grid-cell,
.mo-faq .panel-grid-cell,
.mo-video-panel .panel-grid-cell {
  padding: 0;
}

/* Headings inside these sections use the display serif. The parent theme sets
   'GT Alpina' with !important, so this must match that weight of specificity. */
.mo-hero-fullbleed h1, .mo-hero-fullbleed h2,
.mo-hero-compact h1,  .mo-hero-compact h2,
.mo-prose-band h2,    .mo-prose-band h3,
.mo-cta-band h2,
.mo-split-media h2,   .mo-split-media h3,
.mo-card-grid h2,     .mo-card-grid h3,
.mo-gallery h2,
.mo-faq h2,
.mo-video-panel h2,   .mo-video-panel h3 {
  font-family: var(--mo-serif) !important;
  font-weight: 400;
  line-height: 1.15 !important;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

/* salonguru.css sets `main h1, main h1 span { font-size: 34px !important }`
   and equivalents for h2/h3, so these sizes must carry !important to apply
   inside a section. Spans are included because the child sheet targets them
   directly and inline <span> wrappers are common in the migrated copy. */
.mo-hero-fullbleed h1, .mo-hero-fullbleed h1 span,
.mo-hero-compact h1,  .mo-hero-compact h1 span { font-size: var(--mo-fs-display) !important; }

.mo-prose-band h2, .mo-cta-band h2, .mo-split-media h2,
.mo-card-grid h2, .mo-gallery h2, .mo-faq h2,
.mo-video-panel h2,
.mo-prose-band h2 span, .mo-cta-band h2 span, .mo-split-media h2 span,
.mo-card-grid h2 span, .mo-gallery h2 span, .mo-faq h2 span,
.mo-video-panel h2 span { font-size: var(--mo-fs-h2) !important; }

.mo-prose-band h3, .mo-split-media h3, .mo-card-grid h3,
.mo-video-panel h3,
.mo-prose-band h3 span, .mo-split-media h3 span, .mo-card-grid h3 span,
.mo-video-panel h3 span { font-size: var(--mo-fs-h3) !important; }

/* The card grid's h3 is a fixed 22px rather than the fluid h3 scale. */
.mo-card-grid .mo-card h3,
.mo-card-grid .mo-card h3 span { font-size: 22px !important; }

/* The eyebrow / kicker: small, spaced, uppercase, gold. Recurring across
   heroes, CTA bands and card grids. Add .mo-eyebrow to an Editor widget or
   wrap the line in <span class="mo-eyebrow">. */
/* The eyebrow is usually a <p>. `article .panel-grid p` is !important AND
   more specific than a single class, so the selector below carries two
   classes plus the element to outrank it — !important alone is not enough. */
.panel-grid p.mo-eyebrow,
.panel-grid span.mo-eyebrow,
.mo-eyebrow {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: var(--mo-fs-eyebrow) !important;
  font-weight: 600;
  letter-spacing: var(--mo-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  margin: 0 0 1em;
}

/* Buttons — outlined gold on dark, solid on light. Applies to SiteOrigin
   Button widgets placed inside a section. */
/* SiteOrigin's button markup differs by version: the current bundle renders
   a.sowb-button, older ones a.ow-button-base. Both are matched, and the
   declarations carry !important because the theme styles .sowb-button too. */
.mo-cta-band .so-widget-sow-button a.sowb-button,
.mo-cta-band .so-widget-sow-button a.ow-button-base,
.mo-hero-fullbleed .so-widget-sow-button a.sowb-button,
.mo-hero-fullbleed .so-widget-sow-button a.ow-button-base,
.mo-hero-compact .so-widget-sow-button a.sowb-button,
.mo-hero-compact .so-widget-sow-button a.ow-button-base,
a.mo-button {
  display: inline-block;
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 16px 34px !important;
  border: 1px solid var(--mo-gold) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mo-gold-fg) !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.mo-cta-band .so-widget-sow-button a.sowb-button:hover,
.mo-cta-band .so-widget-sow-button a.ow-button-base:hover,
.mo-hero-fullbleed .so-widget-sow-button a.sowb-button:hover,
.mo-hero-fullbleed .so-widget-sow-button a.ow-button-base:hover,
.mo-hero-compact .so-widget-sow-button a.sowb-button:hover,
.mo-hero-compact .so-widget-sow-button a.ow-button-base:hover,
a.mo-button:hover {
  background: var(--mo-gold);
  color: var(--mo-ink);
}

/* --------------------------------------------------------------------------
   4. hero-fullbleed — opens 53 of the 93 published pages
   Full-bleed image behind a gradient scrim; eyebrow, serif headline,
   standfirst. Row background image is set in SiteOrigin Row Styles; this
   supplies the scrim, the height and the type.
   -------------------------------------------------------------------------- */

.mo-hero-fullbleed {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* The handoff's heroes are `height: 100vh; min-height: 640px` — that pairing
     appears 110 times in its stylesheet, so a full-viewport hero is the design,
     not an exception. Capping at 760px left every hero on the site short of it.
     min-height rather than height, so a hero with more copy than fits grows
     instead of clipping; svh so a phone's address bar does not overshoot. */
  min-height: max(640px, 100vh);
  min-height: max(640px, 100svh);
  padding: clamp(48px, 8vw, 96px) clamp(24px, 6vw, 80px) clamp(56px, 8vw, 88px) !important;
  background-color: var(--mo-ink);
  background-size: cover !important;
  background-position: center !important;
  color: var(--mo-on-ink);
  overflow: hidden;
}

/* Gradient scrim so the headline stays legible over any photograph.
   The stops are the reference's, read off its own hero: it reaches solid ink
   at the foot of the band rather than stopping at 85%, which is what left the
   photograph showing through behind the buttons and the lead. Its heroes each
   angle this differently — to the right, at 135 degrees, to the top — so one
   bottom-up scrim stands for all of them. */
.mo-hero-fullbleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(13, 13, 11) 0%,
    rgba(13, 13, 11, 0.92) 15%,
    rgba(13, 13, 11, 0.55) 40%,
    rgba(13, 13, 11, 0.10) 75%,
    rgba(13, 13, 11, 0.15) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.mo-hero-fullbleed .panel-grid-cell {
  position: relative;
  z-index: 2;
}

/* -- hero copy layout ------------------------------------------------------
   The reference sets a hero's copy against the bottom-left of the band, in one
   column about 580px wide, with the calls to action wrapping as a row beneath
   it. Four things were wrong here:

   - the band ran its copy from the top, because SiteOrigin's row rule sets
     align-items on the row and beat the stylesheet;
   - the heading and the lead had different widths, so the column had no edge;
   - the buttons were centred, from the Button widget's own align class, while
     the copy beside them was left;
   - each button took a full row 30px apart, rather than wrapping as one row.
   ---------------------------------------------------------------------- */

.mo-hero-fullbleed { align-items: flex-end !important; }

/* One measure for the whole column — set on the cell, so the copy and the
   buttons under it share the same edge and the buttons wrap within it rather
   than running on past the text.

   The reference sets this per hero: measured across the site it runs from 480
   to 680, with the headline scaled to match. Chasing all eighty individually
   would be a page of hacks, so the default below is the middle of that range
   and the measure is a token — a hero that needs its own only has to set it,
   which is what the extensions guide does for its three-button row. */
.mo-hero-fullbleed { --mo-hero-measure: 580px; }

.mo-hero-fullbleed > .panel-grid-cell { max-width: var(--mo-hero-measure); }

/* -- hero kicker and credential badge --------------------------------------
   Two heroes (the extensions guide and the Follea page) set their category
   line inside the h1 as a first span, with the headline in a second. Rendered
   inline they run together — "Hair Extensions in Tampa, FloridaLonger." — so
   both spans become blocks and the first takes the kicker's own scale.

   The single-span heroes are not touched: in every one of those the span is
   preceded by a <br>, so it is never :first-child.
   ---------------------------------------------------------------------- */
.mo-hero-fullbleed h1 > span:first-child:not(:only-child),
.mo-hero-fullbleed h1 > span:first-child:not(:only-child) ~ span {
  display: block;
}

/* !important because line 405 sets the display size on every hero h1 span, to
   get out from under salonguru.css's own `main h1 span { 34px !important }`. */
.mo-hero-fullbleed h1 > span:first-child:not(:only-child) {
  font-size: clamp(16px, 1.25vw, 22px) !important;
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: rgba(245, 240, 232, 0.58);
  margin-bottom: 8px;
}

.mo-light .mo-hero-fullbleed h1 > span:first-child:not(:only-child) {
  color: rgba(13, 13, 11, 0.62);
}

/* The lockup: logo mark, then the accreditation line. Sits on its own ink
   panel because it overlaps the photograph on narrow viewports. */
.mo-hero-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  margin: 0 0 24px !important;
  padding: 12px 18px 12px 6px;
  border: 1px solid rgba(184, 151, 90, 0.38);
  border-radius: 2px;
  background: rgba(13, 13, 11, 0.82);
  backdrop-filter: blur(2px);
}

.mo-hero-badge .mo-hero-badge-mark {
  width: 112px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}

.mo-hero-badge .mo-hero-badge-text {
  font-family: var(--mo-sans);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-gold-bright);
}

/* SGv6 centres headings. The hero's kicker and lead are left, so a centred
   headline between them broke the column — its lines started at 116, 336 and
   404 where everything around them started at 80. */
.mo-hero-fullbleed h1,
.mo-hero-fullbleed h2,
.mo-hero-compact h1,
.mo-hero-compact h2 { text-align: left; }

/* The italic second line of a hero heading is gold in most of the reference's
   heroes, and salonguru.css colours every <em> under main dark grey. */
.mo-hero-fullbleed h1 em { color: var(--mo-gold-fg) !important; font-style: italic; }

.mo-hero-fullbleed .siteorigin-widget-tinymce > *,
.mo-hero-fullbleed h1,
.mo-hero-fullbleed .mo-eyebrow,
.mo-hero-fullbleed .siteorigin-widget-tinymce p { max-width: 100%; }

/* The lead runs at a tighter measure than the headline above it — the
   reference sets its copy to 600 where the heading gets the column's full
   width. Below 600 the two are the same, so the default heroes are unchanged
   and only a hero with a wider measure sees any difference. */
.mo-hero-fullbleed .siteorigin-widget-tinymce p:not(.mo-hero-badge) {
  max-width: min(100%, 600px);
}

/* The calls to action wrap as one row under the copy. */
.mo-hero-fullbleed .so-panel:has(.so-widget-sow-button) {
  display: inline-block;
  width: auto;
  margin: 0 16px 16px 0 !important;
  vertical-align: top;
}

/* The trailing gap counts toward the measure, so a row that fits its three
   buttons exactly was wrapping the last one onto a line of its own. */
.mo-hero-fullbleed .so-panel:has(.so-widget-sow-button):last-child {
  margin-right: 0 !important;
}

.mo-hero-fullbleed .ow-button-align-center { text-align: left; }

/* The hero's calls to action are not one style: the reference fills the first
   in gold with ink lettering and outlines the rest in white at 30%. They were
   all coming out as the same gold outline.

   The first button is the panel straight after the copy, which is how the
   composer emits them — editor, then one panel per link. */
.mo-hero-fullbleed .so-widget-sow-button a.sowb-button,
.mo-hero-fullbleed .so-widget-sow-button a.ow-button-base {
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  padding: 16px 36px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.mo-hero-fullbleed .so-panel:has(.siteorigin-widget-tinymce) + .so-panel a.sowb-button,
.mo-hero-fullbleed .so-panel:has(.siteorigin-widget-tinymce) + .so-panel a.ow-button-base {
  background: var(--mo-gold) !important;
  border-color: var(--mo-gold) !important;
  color: var(--mo-ink) !important;
  font-weight: 600 !important;
}

.mo-hero-fullbleed .so-widget-sow-button a.sowb-button:hover,
.mo-hero-fullbleed .so-widget-sow-button a.ow-button-base:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--mo-ink) !important;
}
.mo-hero-fullbleed .so-panel:has(.siteorigin-widget-tinymce) + .so-panel a.sowb-button:hover,
.mo-hero-fullbleed .so-panel:has(.siteorigin-widget-tinymce) + .so-panel a.ow-button-base:hover {
  background: var(--mo-gold) !important;
  border-color: var(--mo-gold) !important;
  color: var(--mo-ink) !important;
  opacity: 0.88;
}

.mo-hero-fullbleed h1 { color: var(--mo-white) !important; max-width: 16ch; }
.mo-hero-fullbleed p  { color: var(--mo-on-ink-muted); max-width: var(--mo-measure); font-size: var(--mo-fs-body); }
.mo-hero-fullbleed .mo-eyebrow { color: var(--mo-gold-bright); }

/* Breadcrumb strip used on the blog heroes. */
.mo-hero-fullbleed .mo-crumbs {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mo-on-ink-muted);
  margin-bottom: 1.5em;
}
.mo-hero-fullbleed .mo-crumbs a { color: var(--mo-gold-fg); text-decoration: none; }

/* --------------------------------------------------------------------------
   4b. hero-split

   Matched to the reference build (127.0.0.1:8317), whose declarations are in
   the handoff theme's sections.css. The hero uses a warmer palette than the
   rest of the design — #211917 rather than the --mo-ink used elsewhere — so
   those values are set here rather than pulled from the global tokens.

       .hero-split  { display:flex; flex:1; min-height: calc(100vh - header) }
       .hero-left   { flex: 0 0 55%; justify-content:center;
                      padding: 100px 64px 80px 80px; background:#211917;
                      border-left: 3px solid #49372B }
       .hero-right  { flex: 0 0 45%; overflow:hidden; background:#111110 }
       video        { inset:0; object-fit:cover; object-position:center top }
       h1           { clamp(43px, 4.2vw, 108px); #F5F0E8; em -> #C6A76A }
   -------------------------------------------------------------------------- */

.mo-hero-split {
  --mo-hero-ink:    #211917;   /* left panel + hero ground        */
  --mo-hero-right:  #111110;   /* behind the video                */
  --mo-hero-cream:  #f5f0e8;   /* headline + outlined button      */
  --mo-hero-muted:  #ded3c4;   /* eyebrow, standfirst, text link  */
  --mo-hero-gold:   var(--mo-champagne);  /* emphasis + primary action */
  --mo-hero-gold-h: #d4b87f;   /* its hover                       */
  --mo-hero-edge:   #49372b;   /* the 3px rule down the left      */

  /* The sticky header is 62px and sits above this row in flow. */
  --mo-hero-h: calc(100vh - 62px);

  position: relative;
  align-items: stretch;
  min-height: var(--mo-hero-h);
  gap: 0;
  background: var(--mo-hero-ink);
  padding: 0 !important;
  overflow: hidden;
}

/* 55 / 45, as the reference splits it. */
.mo-hero-split > .panel-grid-cell:first-child { flex: 0 0 55%; max-width: 55%; }
.mo-hero-split > .panel-grid-cell:last-child  { flex: 0 0 45%; max-width: 45%; }

.mo-hero-split .panel-grid-cell:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* The left gutter grows with the viewport above 1440, as the reference does:
     at 1737 this resolves to the 109.7px it measures. */
  padding: 100px 64px 80px clamp(80px, calc(80px + (100vw - 1440px) * 0.10), 190px);
  background: var(--mo-hero-ink);
  border-left: 3px solid var(--mo-hero-edge);
}

.mo-hero-split .panel-grid-cell:last-child {
  padding: 0;
  position: relative;
  overflow: hidden;
  align-items: stretch;
  height: var(--mo-hero-h);
  background: var(--mo-hero-right);
}

/* These wrappers sit between the cell and the video. They are flex items whose
   only content is the absolutely-positioned video, so without an explicit size
   their content box collapses to 0 and the video inherits a 0x0 box — it keeps
   playing but paints nothing. */
.mo-hero-split .panel-grid-cell:last-child > .so-panel,
.mo-hero-split .panel-grid-cell:last-child .so-widget-sow-editor,
.mo-hero-split .panel-grid-cell:last-child .siteorigin-widget-tinymce {
  position: static;
  margin: 0;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}

.mo-hero-split .mo-hero-video,
.mo-hero-split video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  /* !important because a fitVids-style script writes the size straight onto
     the element — style="width:782px; height:1390.22px" — computed from the
     clip's 9:16 ratio. An inline style beats any stylesheet rule. */
  width: 100% !important;
  height: var(--mo-hero-h) !important;
  object-fit: cover;
  object-position: center top;
  background: var(--mo-hero-right);
}

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

.mo-hero-split .mo-eyebrow,
.mo-hero-split .panel-grid-cell:first-child p:first-of-type {
  /* flex so the rule and the words sit on one baseline */
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mo-sans);
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mo-hero-muted);
  margin: 0 0 21px;
}

/* The 32x1px gold rule that precedes the kicker. In the source this is an
   empty <div>, which clean_html strips as layout scaffolding — correctly, it
   carries no copy. It is decoration, so it belongs here rather than in the
   converted content. */
.mo-hero-split .mo-eyebrow::before,
.mo-hero-split .panel-grid-cell:first-child p:first-of-type::before {
  content: "";
  flex: 0 0 32px;
  height: 1px;
  background: var(--mo-hero-gold);
}

.mo-hero-split h1 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(43px, 4.2vw, 108px) !important;
  font-weight: 600;
  line-height: 1.06 !important;
  letter-spacing: normal;
  color: var(--mo-hero-cream) !important;
  margin: 0 0 10px;
  max-width: none;
}
.mo-hero-split h1 em { color: var(--mo-hero-gold); font-style: italic; }

/* The theme centres headings inside article; the hero is left-aligned. */
.mo-hero-split .panel-grid-cell,
.mo-hero-split .panel-grid-cell h1,
.mo-hero-split .panel-grid-cell h2,
.mo-hero-split .panel-grid-cell p { text-align: left !important; }

/* Two classes, to outrank salonguru.css's `article .panel-grid p { 18px
   !important }` — that selector is (0,1,2), so !important alone is not enough
   and the standfirst kept rendering at 18px instead of 16.5px. */
.mo-hero-split .panel-grid-cell p {
  font-size: 16.5px !important;
  line-height: 1.8;
  color: var(--mo-hero-muted);
  margin: 0 0 20px;
  /* The copy measure widens with the panel, matching the reference. */
  max-width: clamp(470px, calc(470px + (100vw - 1440px) * 0.14), 620px);
}
/* The kicker is not body copy, so the standfirst measure must not reach it.
   Two classes plus the element, to outrank `.mo-hero-split .panel-grid-cell p`. */
.mo-hero-split .panel-grid-cell p.mo-eyebrow { max-width: none; }

/* ---- the fades ----
   Three gradients soften the composition, all in the hero's own ink:
     - the copy panel fades out over its last 120px
     - a 22% wash across the video's left edge hides the seam between panels
     - the video fades out over its last 100px
   ::after is used throughout because it paints above the video; ::before
   would sit underneath it. None of them take pointer events. */

.mo-hero-split .panel-grid-cell:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to top, var(--mo-hero-ink) 0%, rgba(33, 25, 23, 0) 100%);
  pointer-events: none;
}

.mo-hero-split .panel-grid-cell:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  background: linear-gradient(
    to right,
    rgb(33, 25, 23) 0%,
    rgba(33, 25, 23, 0.92) 18%,
    rgba(33, 25, 23, 0.72) 38%,
    rgba(33, 25, 23, 0.42) 60%,
    rgba(33, 25, 23, 0.16) 80%,
    rgba(33, 25, 23, 0) 100%
  );
  pointer-events: none;
}

.mo-hero-split::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45%;
  height: 100px;
  background: linear-gradient(to top, var(--mo-hero-ink), rgba(33, 25, 23, 0));
  pointer-events: none;
}

/* ---- the three actions ----
   A filled champagne primary, a cream outline, then a plain text link. The
   reference sets no text-transform on any of them. */

.mo-hero-split .panel-grid-cell:first-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mo-sans);
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(1) {
  color: var(--mo-hero-ink) !important;
  background: var(--mo-hero-gold);
  border: 1px solid var(--mo-hero-gold);
  font-size: 15px;
  letter-spacing: 0.1em;
  padding: 17px 38px;
  /* 20px below the standfirst (which already carries 20px of its own) to make
     the reference's 40px, and 20px from the button beside it. */
  margin: 20px 20px 0 0;
}
.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(1):hover,
.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(1):focus-visible {
  background: var(--mo-hero-gold-h);
  border-color: var(--mo-hero-gold-h);
  color: var(--mo-hero-ink) !important;
}

.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(2) {
  color: var(--mo-hero-cream) !important;
  background: transparent;
  border: 1px solid var(--mo-hero-cream);
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 16px 34px;
  margin: 20px 0 0;
}
.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(2):hover,
.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(2):focus-visible {
  background: var(--mo-hero-cream);
  color: var(--mo-hero-ink) !important;
}

.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(3) {
  color: var(--mo-hero-muted) !important;
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0.1em;
  /* display:flex makes it block-level so it always starts a new line, as the
     reference has it — there the wrap happens by arithmetic (the three items
     total 790px against a 779px panel), which is too fragile to rely on. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
}

/* Its own 16x1px rule, in the muted tone rather than gold. Another empty
   <span> in the source, stripped by clean_html for the same reason as the
   kicker's. */
.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(3)::before {
  content: "";
  flex: 0 0 16px;
  height: 1px;
  background: var(--mo-hero-muted);
}
.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(3):hover,
.mo-hero-split .panel-grid-cell:first-child a:nth-of-type(3):focus-visible {
  color: var(--mo-hero-cream) !important;
}

/* 768-1023: the reference stacks the panels and puts the video first. */
@media (min-width: 768px) and (max-width: 1023px) {
  .mo-hero-split { flex-direction: column; min-height: 0; }
  .mo-hero-split > .panel-grid-cell:first-child { flex: none; max-width: 100%; width: 100%; order: 2; padding: 48px 24px 56px; }
  .mo-hero-split > .panel-grid-cell:last-child  { flex: none; max-width: 100%; width: 100%; order: 1; height: 90vw; }
  .mo-hero-split { --mo-hero-h: 90vw; }
}

@media (max-width: 780px) {
  /* The reference stacks the panels; the video keeps a workable height. */
  .mo-hero-split { --mo-hero-h: 56vh; min-height: 0; flex-direction: column; }
  .mo-hero-split > .panel-grid-cell:first-child,
  .mo-hero-split > .panel-grid-cell:last-child { flex: none; max-width: 100%; width: 100%; }
  .mo-hero-split .panel-grid-cell:first-child { padding: 56px 24px 48px; }
}

/* --------------------------------------------------------------------------
   5. hero-compact — opens the other 39 pages
   In-flow hero sized by padding rather than viewport height, for pages that
   open on text rather than a photograph.
   -------------------------------------------------------------------------- */

.mo-hero-compact {
  text-align: center;
  padding: clamp(72px, 10vw, 128px) clamp(24px, 6vw, 80px) !important;
}
.mo-hero-compact.mo-dark {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
}
.mo-hero-compact.mo-light { background: var(--mo-cream); color: var(--mo-ink); }
.mo-hero-compact h1 { color: var(--mo-white) !important; margin-inline: auto; max-width: 20ch; }
.mo-hero-compact p  { color: var(--mo-on-ink-muted); margin-inline: auto; max-width: var(--mo-measure); }
.mo-hero-compact .so-widget-sow-button { margin-top: 1.5em; }

/* Light variant, for pages that open on the cream ground. */
.mo-hero-compact.mo-light {
  background: var(--mo-cream);
  color: var(--mo-ink);
}
.mo-hero-compact.mo-light h1 { color: var(--mo-ink) !important; }
.mo-hero-compact.mo-light p  { color: var(--mo-grey); }

/* --------------------------------------------------------------------------
   6. prose-band — the workhorse: 301 instances across 65 pages
   A headed band of body copy on the cream ground. In SiteOrigin this is a
   single Editor widget in a one-column row.
   -------------------------------------------------------------------------- */

.mo-prose-band {
  background: var(--mo-cream);
  color: var(--mo-ink);
}

.mo-prose-band h2 { color: var(--mo-ink) !important; }
.mo-prose-band p,
.mo-prose-band li {
  color: var(--mo-grey);
  font-size: var(--mo-fs-body);
  line-height: 1.8;
  max-width: var(--mo-measure);
}
.mo-prose-band a { color: var(--mo-gold-fg); text-underline-offset: 3px; }

/* Variants: white ground, and dark ground for emphasis bands. */
.mo-prose-band.mo-white { background: var(--mo-white); }
.mo-prose-band.mo-dark  { background: var(--mo-ink); }
.mo-prose-band.mo-dark h2 { color: var(--mo-white) !important; }
.mo-prose-band.mo-dark p,
.mo-prose-band.mo-dark li { color: var(--mo-on-ink-muted); }

/* Centred variant, used where the band is a statement rather than an article. */
.mo-prose-band.mo-centre { text-align: center; }
.mo-prose-band.mo-centre p { margin-inline: auto; }


/* --------------------------------------------------------------------------
   6b. Service card grids  ("Choose the Right Hair Solution")

   A cream section holding a centred header and two four-up card grids — the
   first on the dark ground, the second on the cream — separated by a hairline.
   Matched to the reference:

       grid   { 4 x 1fr; gap 0; dark #0d0d0b / cream #f5f0e8 }
       card   { <a>, flex column, padding 52px 40px 44px }
       kicker { 12px, .14em, uppercase }
       title  { Cormorant 30px/36px, 600 }
       copy   { 13px/23.4px, 300 }
       cta    { 16px/27.2px, 40px above }

   The converted content keeps the source's .service-cards-grid-4 wrapper and
   the cards' <span> call to action, so this styles the real markup. Scoped
   with :has() so the centred header treatment cannot leak to other prose
   bands.
   -------------------------------------------------------------------------- */

/* This band runs at the wide measure, not the prose one — the reference caps
   its inner wrapper at 1200px, which is what gives 300px cards. */
.mo-prose-band:has(.service-cards-grid-4) {
  --mo-band: var(--mo-container-wide);
  text-align: center;
}

/* section kicker */
.mo-prose-band:has(.service-cards-grid-4) .siteorigin-widget-tinymce > p:first-of-type {
  font-family: var(--mo-sans);
  font-size: 13px !important;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #7b653c;
  margin: 0 0 16px;
  max-width: none;
  text-align: center !important;
}

.mo-prose-band:has(.service-cards-grid-4) .siteorigin-widget-tinymce > h2 {
  font-size: 46px !important;
  font-weight: 600;
  line-height: 1.15 !important;
  color: var(--mo-ink) !important;
  margin: 0;
  text-align: center !important;
}

/* each block's sub-heading */
.mo-prose-band:has(.service-cards-grid-4) .siteorigin-widget-tinymce > h3 {
  font-family: var(--mo-serif) !important;
  font-size: 28px !important;
  font-weight: 600;
  line-height: 1.2 !important;
  color: var(--mo-ink) !important;
  margin: 72px 0 18px;
  text-align: center !important;
}

/* its description, then the small location caption */
.mo-prose-band:has(.service-cards-grid-4) .siteorigin-widget-tinymce > h3 + p {
  font-size: 13px !important;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(30, 28, 20, 0.65);
  max-width: 620px;
  margin: 0 auto 8px;
  text-align: center !important;
}
.mo-prose-band:has(.service-cards-grid-4) .siteorigin-widget-tinymce > h3 + p + p {
  font-family: var(--mo-sans);
  font-size: 12px !important;
  letter-spacing: 0.1em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #7b653c;
  margin: 0 0 32px;
  max-width: none;
  text-align: center !important;
}

/* the hairline between the two blocks — an empty div in the source, so it is
   rebuilt as a border on the second sub-heading. */
.mo-prose-band:has(.service-cards-grid-4) .siteorigin-widget-tinymce > h3:nth-of-type(2) {
  border-top: 1px solid rgba(13, 13, 11, 0.12);
  padding-top: 65px;
  margin-top: 64px;
}

/* ---- the grids ---- */

.mo-prose-band .service-cards-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  text-align: left;
  /* the frame around the whole block */
  border: 1px solid rgba(201, 168, 76, 0.34);
}

/* Cards are separated by an inset hairline on every card but the first —
   that is how the reference draws the dividers, not with borders. */
.mo-prose-band .service-cards-grid-4 > a + a {
  box-shadow: inset 1px 0 0 0 rgba(28, 22, 12, 0.14);
}

/* --- the sheen: a band of light that crosses the card on hover ---------
   Invisible at rest, parked to the left, and swept across on hover. The dark
   group's light is white-based; on the ivory ground a white sheen would be
   invisible, so that group's is champagne. */
.mo-prose-band .service-cards-grid-4 > a::before {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-72%);
  transition: transform 1150ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 280ms ease;
}
.mo-prose-band .service-cards-grid-4 > a:hover::before,
.mo-prose-band .service-cards-grid-4 > a:focus-visible::before {
  opacity: 1;
  transform: translateX(72%);
}

/* --- the top edge draws itself in --------------------------------------- */
.mo-prose-band .service-cards-grid-4 > a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 540ms cubic-bezier(0.22, 0.61, 0.36, 1);
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.9) 0%, rgba(201, 168, 76, 0.12) 100%);
}
.mo-prose-band .service-cards-grid-4 > a:hover::after,
.mo-prose-band .service-cards-grid-4 > a:focus-visible::after { transform: scaleX(1); }

.mo-prose-band .service-cards-grid-4 > a > * { position: relative; z-index: 1; }

.mo-prose-band .service-cards-grid-4 > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 52px 40px 44px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: background-color 220ms ease;
}

.mo-prose-band .service-cards-grid-4 > a > p:first-child {
  font-family: var(--mo-sans);
  font-size: 12px !important;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  margin: 0 0 20px;
  max-width: none;
}

/* The 26x1px rule above each card's kicker — an empty element in the source.
   currentColor picks up whichever accent the card variant sets. */
.mo-prose-band .service-cards-grid-4 > a > p:first-child::before {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  margin: 0 0 14px;
  background: currentColor;
  transform-origin: left center;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease;
}
.mo-prose-band .service-cards-grid-4 > a:hover > p:first-child::before,
.mo-prose-band .service-cards-grid-4 > a:focus-visible > p:first-child::before {
  transform: scaleX(1.85);
  opacity: 0.95;
}

.mo-prose-band .service-cards-grid-4 > a > h3 {
  font-family: var(--mo-serif) !important;
  font-size: 30px !important;
  font-weight: 600;
  line-height: 1.2 !important;
  text-align: left;
  margin: 0 0 20px;
  border: 0;
  padding: 0;
}

.mo-prose-band .service-cards-grid-4 > a > p:nth-of-type(2) {
  font-size: 13px !important;
  font-weight: 300;
  line-height: 1.8;
  /* the reference puts 40px above the call to action; same result */
  margin: 0 0 40px;
  max-width: none;
}

/* The call to action. The label carries a 34x1px rule above it and the circled
   arrow after it; the source's own arrow <span> is decorative, so it is
   replaced rather than laid out separately — the two spans are siblings in a
   flex column here and would otherwise stack. */
.mo-prose-band .service-cards-grid-4 > a > span:nth-last-child(2) {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-top: 15px;
  font-family: var(--mo-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
}
.mo-prose-band .service-cards-grid-4 > a > span:nth-last-child(2)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  transform-origin: left center;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 320ms ease;
}
.mo-prose-band .service-cards-grid-4 > a:hover > span:nth-last-child(2)::before,
.mo-prose-band .service-cards-grid-4 > a:focus-visible > span:nth-last-child(2)::before {
  transform: scaleX(2.15);
  opacity: 0.7;
}
.mo-prose-band .service-cards-grid-4 > a > span:nth-last-child(2)::after {
  content: "\2192";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 12px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  opacity: 0.85;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 260ms ease, color 260ms ease, border-color 260ms ease, opacity 260ms ease;
}
.mo-prose-band .service-cards-grid-4 > a:hover > span:nth-last-child(2)::after,
.mo-prose-band .service-cards-grid-4 > a:focus-visible > span:nth-last-child(2)::after {
  transform: translateX(3px);
  opacity: 1;
}
.mo-prose-band .service-cards-grid-4 > a > span:last-child { display: none; }

/* dark block */
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) {
  background:
    linear-gradient(158deg, rgba(201, 168, 76, 0.11) 0%, rgba(201, 168, 76, 0.035) 44%, rgba(201, 168, 76, 0) 78%),
    var(--mo-ink);
}
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a > p:first-child { color: var(--mo-gold-fg); }
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a > h3 { color: #fff !important; }
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a > p:nth-of-type(2) { color: rgba(255, 255, 255, 0.72); }
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a > span { color: #d8bd85; }

/* On the charcoal group the travelling light is white-based, with a champagne
   core; the surface lifts with a champagne wash. */
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a::before {
  background: linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.055) 46%,
    rgba(201, 168, 76, 0.20) 50%,
    rgba(255, 255, 255, 0.055) 54%,
    rgba(255, 255, 255, 0) 62%
  );
}
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a:hover,
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a:focus-visible {
  background-color: rgba(201, 168, 76, 0.075);
}
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a:hover > span:nth-last-child(2)::after,
.mo-prose-band div.service-cards-grid-4:nth-of-type(1) > a:focus-visible > span:nth-last-child(2)::after {
  background-color: #d8bd85;
  border-color: #d8bd85;
  color: #0d0d0b;
}

/* cream block */
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) {
  background:
    linear-gradient(158deg, rgba(201, 168, 76, 0.13) 0%, rgba(201, 168, 76, 0.045) 46%, rgba(201, 168, 76, 0) 80%),
    var(--mo-cream);
}
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a > p:first-child { color: #6b5730; }
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a > h3 { color: var(--mo-ink) !important; }
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a > p:nth-of-type(2) { color: rgba(13, 13, 11, 0.61); }
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a > span { color: #6b5730; }

/* A white sheen is invisible on ivory, so this group's light is champagne. */
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a::before {
  background: linear-gradient(
    104deg,
    rgba(201, 168, 76, 0) 38%,
    rgba(201, 168, 76, 0.10) 47%,
    rgba(201, 168, 76, 0.22) 50%,
    rgba(201, 168, 76, 0.10) 53%,
    rgba(201, 168, 76, 0) 62%
  );
}
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a:hover,
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a:focus-visible {
  background-color: rgba(255, 255, 255, 0.62);
}
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a:hover > span:nth-last-child(2)::after,
.mo-prose-band div.service-cards-grid-4:nth-of-type(2) > a:focus-visible > span:nth-last-child(2)::after {
  background-color: #6b5730;
  border-color: #6b5730;
  color: var(--mo-cream);
}

/* The reference disables all of this when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
  .mo-prose-band .service-cards-grid-4 > a,
  .mo-prose-band .service-cards-grid-4 > a::before,
  .mo-prose-band .service-cards-grid-4 > a::after,
  .mo-prose-band .service-cards-grid-4 > a > p:first-child::before,
  .mo-prose-band .service-cards-grid-4 > a > span:nth-last-child(2)::before,
  .mo-prose-band .service-cards-grid-4 > a > span:nth-last-child(2)::after {
    transition: none;
  }
  .mo-prose-band .service-cards-grid-4 > a:hover > span:nth-last-child(2)::after,
  .mo-prose-band .service-cards-grid-4 > a:focus-visible > span:nth-last-child(2)::after {
    transform: none;
  }
}

@media (max-width: 1023px) {
  .mo-prose-band .service-cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mo-prose-band .service-cards-grid-4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6c. Home locations grid  ("Two South Tampa salons…")

   A dark band holding a centred standfirst and two location cards side by
   side. Each card is a light head panel — name, address, phone — sitting on a
   darkened photo with a gold edge and an overlay that bottom-aligns a label,
   the services list and a filled call to action.

   Every value below is transcribed from the reference's own declarations in
   monaco/assets/css/sections.css rather than eyeballed:

       grid    { 1fr 1fr; gap 2px }           card  { flex column }
       head    { 20px clamp(16px,2vw,28px) 16px; #f5f0e8; 1px bottom hairline }
       media   { relative; overflow hidden; flex 1 }
       img     { 100%; 4/3; cover; brightness(.55) }
       bar     { absolute top; 3px; #b8975a }
       overlay { absolute inset 0; flex column; end; clamp(20px,3vw,36px) }

   The reference declares transitions on the photo and the links but defines
   no :hover rules for any of them — confirmed by walking its CSSOM — so the
   transitions are reproduced and no hover state is invented.

   One value cannot match: the reference loads Karla, this stack loads only
   Karla Light, so the call to action measures 229px against the reference's
   233px. Forcing `Karla` here would fall through to the system sans and be
   further out, so the house token stands.

   extract.py preserves the wrapper <div>s inside .home-locations-grid (see
   PRESERVE_STRUCTURE_IN) because this layout is nested, not flat. The gold
   bar was an empty <div> and was stripped, so it is rebuilt as a ::before.
   -------------------------------------------------------------------------- */

.mo-prose-band:has(.home-locations-grid) {
  --mo-band: var(--mo-container-wide);
  background: var(--mo-ink);
  color: var(--mo-on-ink);
  padding-block: 100px 120px !important;
}

/* The standfirst. Its wrapper in the reference caps at 760 and centres; here
   the copy is a bare <p> in the Editor widget, so it carries that itself. */
.mo-prose-band:has(.home-locations-grid) .siteorigin-widget-tinymce > p:first-child {
  font-family: var(--mo-serif) !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}

.mo-prose-band .home-locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* card */
.mo-prose-band .home-locations-grid > div {
  display: flex;
  flex-direction: column;
}

/* head panel */
.mo-prose-band .home-locations-grid > div > div:first-child {
  padding: 20px clamp(16px, 2vw, 28px) 16px;
  background: var(--mo-cream);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.mo-prose-band .home-locations-grid > div > div:first-child > p {
  font-family: var(--mo-serif) !important;
  font-size: clamp(14px, 1.4vw, 17px) !important;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mo-ink);
  margin: 0 0 4px;
  max-width: none;
}

/* address */
.mo-prose-band .home-locations-grid > div > div:first-child > a:first-of-type {
  display: block;
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  color: var(--mo-ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 4px;
  transition: color 0.2s;
}

/* telephone */
.mo-prose-band .home-locations-grid > div > div:first-child > a + a {
  display: inline;
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.02em;
  color: #666 !important;
  text-decoration: none;
  margin-bottom: 0;
  transition: color 0.2s;
}

/* media well */
.mo-prose-band .home-locations-grid > div > div:last-child {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  flex: 1 1 0%;
}

/* the 3px gold edge — an empty <div> in the reference, stripped on import */
.mo-prose-band .home-locations-grid > div > div:last-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mo-gold);
  z-index: 2;
}

/* The reference's <figure> is display:contents, so the photo is the media
   well's own layout child. Reproduce that rather than let the figure box. */
.mo-prose-band .home-locations-grid figure {
  display: contents;
  margin: 0;
}

.mo-prose-band .home-locations-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  filter: brightness(0.55);
  transition: filter 0.4s;
}

/* overlay */
.mo-prose-band .home-locations-grid > div > div:last-child > div {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(20px, 3vw, 36px);
}

/* label */
.mo-prose-band .home-locations-grid > div > div:last-child > div > p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--mo-gold-fg);
  margin: 0 0 8px;
  max-width: none;
}

/* services line */
.mo-prose-band .home-locations-grid > div > div:last-child > div > p + p {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 16px;
  max-width: none;
}

.mo-prose-band .home-locations-grid > div > div:last-child > div > p + p a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}

/* the "·" between services */
.mo-prose-band .home-locations-grid > div > div:last-child > div > p + p span span {
  margin: 0 5px;
}

/* call to action */
.mo-prose-band .home-locations-grid > div > div:last-child > div > a {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--mo-ink) !important;
  background: var(--mo-gold);
  padding: 10px 22px;
  text-decoration: none;
  transition: opacity 0.2s;
}

/* The reference keeps both cards side by side right down to 767px and only
   stacks them below 480px. */
@media (max-width: 767px) {
  .mo-prose-band:has(.home-locations-grid) {
    padding-block: 64px !important;
  }
}

@media (max-width: 480px) {
  .mo-prose-band .home-locations-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6d. two-col  — the reusable service band

   The reference's workhorse: a full-bleed photograph on one side, a column of
   copy on the other, repeated down the homepage for extensions, colour,
   smoothing and bridal. It alternates cream and ink grounds, and every part
   of the copy has a light and a dark form, so the whole band is written once
   here and switched by .mo-light / .mo-dark (resolved by extract.py from the
   handoff's own stylesheet).

   Transcribed from monaco/assets/css/sections.css:

       grid     { repeat(auto-fit, minmax(min(100%, 380px), 1fr)); min-height }
       copy     { clamp(48px,8vw,100px) clamp(24px,6vw,96px); flex; centred }
       kicker   { Karla 13px / .2em / uppercase / 18px below }
       h2       { Cormorant clamp(36px,4vw,56px) / 600 / 1.06 / -.01em }
       rule     { 44 x 1px gold, 32px below }
       body     { Karla 15px / 300 / 1.9 }
       list     { flex column, gap 10px }  item { 12px gold dash + 15px/1.7 }
       button   { 13px / .12em / 1px border / 13px 28px / transparent }
       footnote { Karla 12px / 1.6 / 16px above }

   The 44px rule and each list item's 12px dash are empty <div>s in the
   source, which clean_html drops, so both are rebuilt as ::before.
   -------------------------------------------------------------------------- */

/* The band is its own grid; SiteOrigin's cell and the editor wrapper must not
   re-impose a measure or padding on it. */
body article .panel-grid > div.mo-two-col {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0 !important;
  display: block;
}

.mo-two-col .panel-grid-cell,
.mo-two-col .so-panel,
.mo-two-col .siteorigin-widget-tinymce {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.mo-two-col.mo-light { background: var(--mo-cream); border-top: 1px solid rgba(13, 13, 11, 0.08); }
.mo-two-col.mo-dark  { background: var(--mo-ink);   border-top: 1px solid rgba(184, 151, 90, 0.3); }

.mo-two-col .home-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  min-height: 640px;
}

/* Media column. The photograph fills its half and bleeds to the page edge. */
.mo-two-col .home-two-col > div:has(> figure) {
  position: relative;
  overflow: hidden;
}

.mo-two-col .home-two-col figure { display: contents; margin: 0; }

.mo-two-col .home-two-col figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  max-width: none;
}

/* Image first puts the photograph on the left; the default puts it on the
   right. Source order already differs between the two, so this only has to
   hold the copy column's asymmetric padding — wider on the side that meets
   the photograph. */
.mo-two-col .home-two-col > div:not(:has(> figure)) {
  padding: clamp(48px, 8vw, 100px) clamp(24px, 6vw, 80px) clamp(48px, 8vw, 100px) clamp(24px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mo-two-col .home-two-col-img-first > div:not(:has(> figure)) {
  padding: clamp(48px, 8vw, 100px) clamp(24px, 6vw, 96px) clamp(48px, 8vw, 100px) clamp(24px, 6vw, 80px);
}

/* -- copy ---------------------------------------------------------------- */

/* kicker */
.mo-two-col .home-two-col > div > p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  margin: 0 0 18px;
  max-width: none;
}
.mo-two-col.mo-light .home-two-col > div > p:first-child { color: #826a3a; }
.mo-two-col.mo-dark  .home-two-col > div > p:first-child { color: var(--mo-gold-fg); }

/* headline */
.mo-two-col .home-two-col h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 600;
  line-height: 1.06 !important;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: none;
}
.mo-two-col.mo-light .home-two-col h2 { color: var(--mo-ink) !important; }
.mo-two-col.mo-dark  .home-two-col h2 { color: #fff !important; }

.mo-two-col .home-two-col h2 em { font-style: italic; font-weight: 400; }

/* The 44px rule under the headline — an empty <div> in the source. */
.mo-two-col .home-two-col h2::after {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--mo-gold);
  margin: 16px 0 32px;
}

/* standfirst — the one band that has a serif lead paragraph */
.mo-two-col .home-two-col > div > h2 + p:has(+ p) {
  font-family: var(--mo-serif) !important;
  font-size: 21px !important;
  font-weight: 500;
  line-height: 1.5 !important;
  margin: 0 0 20px;
  max-width: none;
}
.mo-two-col.mo-light .home-two-col > div > h2 + p:has(+ p) { color: var(--mo-ink); }
.mo-two-col.mo-dark  .home-two-col > div > h2 + p:has(+ p) { color: #fff; }

/* body copy */
.mo-two-col .home-two-col > div > p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300;
  line-height: 1.9 !important;
  margin: 0 0 32px;
  max-width: none;
}
.mo-two-col.mo-light .home-two-col > div > p { color: #3a3530; }
.mo-two-col.mo-dark  .home-two-col > div > p { color: rgba(255, 255, 255, 0.88); }

/* inline links in the copy */
.mo-two-col .home-two-col > div > p a,
.mo-two-col .home-two-col span a {
  text-decoration: none;
  transition: border-color 0.2s;
}
.mo-two-col.mo-light .home-two-col > div > p a,
.mo-two-col.mo-light .home-two-col span a {
  color: var(--mo-ink) !important;
  border-bottom: 1px solid rgba(13, 13, 11, 0.7);
}
.mo-two-col.mo-dark .home-two-col > div > p a,
.mo-two-col.mo-dark .home-two-col span a {
  color: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

/* -- the service list ---------------------------------------------------- */

.mo-two-col .home-two-col > div > div:not(:has(figure)) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.mo-two-col .home-two-col > div > div > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Each item's 12px gold dash — an empty <div> in the source. */
.mo-two-col .home-two-col > div > div > div::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--mo-gold);
  flex-shrink: 0;
  margin-top: 11px;
}

.mo-two-col .home-two-col > div > div > div > span {
  font-family: var(--mo-sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7 !important;
}
.mo-two-col.mo-light .home-two-col > div > div > div > span { color: #3a3530; }
.mo-two-col.mo-dark  .home-two-col > div > div > div > span { color: rgba(255, 255, 255, 0.85); }

/* the muted note that trails some items */
.mo-two-col .home-two-col span span { color: #6b6560; }
.mo-two-col.mo-dark .home-two-col span span { color: rgba(255, 255, 255, 0.55); }

/* -- outlined call to action --------------------------------------------- */

.mo-two-col .home-two-col > div > a {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mo-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.7 !important;
  padding: 13px 28px;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.mo-two-col.mo-light .home-two-col > div > a {
  color: var(--mo-ink) !important;
  border: 1px solid var(--mo-ink);
}
.mo-two-col.mo-dark .home-two-col > div > a {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.92);
}
.mo-two-col.mo-light .home-two-col > div > a:hover,
.mo-two-col.mo-light .home-two-col > div > a:focus-visible {
  background: var(--mo-ink);
  color: var(--mo-cream) !important;
}
.mo-two-col.mo-dark .home-two-col > div > a:hover,
.mo-two-col.mo-dark .home-two-col > div > a:focus-visible {
  background: #fff;
  color: var(--mo-ink) !important;
}

/* -- footnote ------------------------------------------------------------ */

.mo-two-col .home-two-col > div > a + p {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin: 16px 0 0;
  max-width: none;
}
.mo-two-col.mo-light .home-two-col > div > a + p { color: #6b6560; }
.mo-two-col.mo-dark  .home-two-col > div > a + p { color: rgba(255, 255, 255, 0.78); }

.mo-two-col .home-two-col > div > a + p a { font-weight: 500; text-decoration: none; }
.mo-two-col.mo-light .home-two-col > div > a + p a {
  color: var(--mo-ink) !important;
  border-bottom: 1px solid var(--mo-gold);
}
.mo-two-col.mo-dark .home-two-col > div > a + p a {
  color: rgba(255, 255, 255, 0.8) !important;
  border-bottom: 1px solid rgba(184, 151, 90, 0.5);
}

/* -- the "Monaco Result" badge over the photograph ----------------------- */

.mo-two-col .home-two-col > div:has(> figure) > div {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(13, 13, 11, 0.72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(184, 151, 90, 0.5);
  padding: 7px 14px;
  pointer-events: none;
}

.mo-two-col .home-two-col > div:has(> figure) > div > span {
  font-family: var(--mo-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--mo-gold-fg);
  text-transform: uppercase;
}

/* A second photograph in the media column is the brand mark laid over the
   corner, not another picture — it is sized and knocked out to white. */
.mo-two-col .home-two-col > div:has(> figure) > div:has(figure) {
  inset: auto auto 28px 28px;
  background: none;
  border: 0;
  padding: 0;
  backdrop-filter: none;
}

.mo-two-col .home-two-col > div:has(> figure) > div:has(figure) img {
  height: 28px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  display: block;
  object-fit: contain;
}

@media (max-width: 767px) {
  .mo-two-col .home-two-col { grid-template-columns: 1fr !important; min-height: 0 !important; }
  /* Below the fold the photograph always leads, whichever side it sits on. */
  .mo-two-col .home-two-col > div:has(> figure) { order: 1; min-height: 320px; }
  .mo-two-col .home-two-col > div:not(:has(> figure)) { order: 2; padding: 64px 24px !important; }
}


/* -- the film variant ----------------------------------------------------- */
/* One band puts a portrait film where the others put a photograph. It is not
   edge to edge: the reference centres a 1200 measure, gives the two columns a
   gap and aligns them on their middles. The reference's scripted play and mute
   buttons are replaced by the browser's own controls. */

body article .panel-grid > div.mo-two-col.mo-media-video {
  padding: clamp(64px, 8vw, 120px) clamp(24px, 6vw, 80px) !important;
}

.mo-two-col.mo-media-video .home-two-col {
  max-width: var(--mo-container-wide);
  margin: 0 auto;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  min-height: 0;
}

.mo-two-col.mo-media-video .home-two-col > div:not(.mo-tc-video) {
  padding: 0;
  justify-content: center;
}

/* The film column is a grid cell in its own right; the framed film sits
   inside it and is centred. */
.mo-two-col.mo-media-video .home-two-col > .mo-tc-video {
  padding: 0;
  display: block;
}

.mo-two-col.mo-media-video .home-two-col > div > p {
  max-width: 580px;
}

.mo-tc-video {
  position: relative;
  overflow: hidden;
  background: var(--mo-ink);
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  max-height: 680px;
  border-radius: 6px;
  margin: 0 auto;
  box-shadow:
    rgba(201, 168, 76, 0.55) 0 0 0 1px,
    rgba(201, 168, 76, 0.055) 0 0 0 7px,
    rgba(201, 168, 76, 0.17) 0 0 46px 4px,
    rgba(0, 0, 0, 0.65) 0 26px 60px -28px;
  transition: box-shadow 240ms;
}

.mo-tc-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* The caption sits on the film's gradient, clear of the controls. */
.mo-tc-caption {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 40px 28px 28px;
  background: linear-gradient(to top, rgba(13, 13, 11, 0.88) 0%, rgba(13, 13, 11, 0.4) 60%, transparent 100%);
  pointer-events: none;
}

.mo-tc-caption p:first-child {
  font-family: var(--mo-serif) !important;
  font-size: clamp(13px, 1.3vw, 16px) !important;
  font-style: italic;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 8px;
  max-width: none;
}

.mo-tc-caption p + p {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  margin: 0;
  max-width: none;
}

@media (max-width: 767px) {
  .mo-two-col.mo-media-video .home-two-col { grid-template-columns: 1fr; }
  .mo-two-col.mo-media-video .home-two-col > .mo-tc-video { order: 1; }
  .mo-two-col.mo-media-video .home-two-col > div:not(.mo-tc-video) { order: 2; padding: 0 !important; }
}

/* --------------------------------------------------------------------------
   6e. cta-box  — the bordered consultation panel  (homepage row 6)

   A centred panel on the cream ground, outlined in gold. The source keeps its
   .home-cta-box wrapper, so this styles the real markup; the 36px rule under
   the headline was an empty <div> and is rebuilt as ::after.
   -------------------------------------------------------------------------- */

.mo-cta-band.mo-light {
  background: var(--mo-cream);
  border-top: 1px solid rgba(13, 13, 11, 0.08);
  border-bottom: 0;
  color: var(--mo-ink);
  padding-block: 120px !important;
}

.mo-cta-band .home-cta-box {
  max-width: 660px;
  margin: 0 auto;
  border: 1px solid rgba(184, 151, 90, 0.3);
  padding: 64px 72px;
}
.mo-cta-band .home-cta-box,
.mo-cta-band .home-cta-box p,
.mo-cta-band .home-cta-box h2 { text-align: center !important; }

.mo-cta-band .home-cta-box > p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #826a3a;
  margin: 0 0 18px;
  max-width: none;
}

.mo-cta-band .home-cta-box h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  font-weight: 600;
  line-height: 1.06 !important;
  letter-spacing: -0.01em;
  color: var(--mo-ink) !important;
  margin: 0 0 16px;
}
.mo-cta-band .home-cta-box h2 em { font-style: italic; font-weight: 400; }

/* the 36px centred rule */
.mo-cta-band .home-cta-box h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--mo-gold);
  margin: 16px auto 28px;
}

.mo-cta-band .home-cta-box h2 + p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300;
  line-height: 1.9 !important;
  color: #3a3530;
  margin: 0 0 32px;
  max-width: none;
}

.mo-cta-band .home-cta-box h2 + p a {
  color: var(--mo-ink) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 13, 11, 0.7);
  transition: border-color 0.2s;
}

/* the italic closing line */
.mo-cta-band .home-cta-box h2 + p + p {
  font-family: var(--mo-serif) !important;
  font-size: 22px !important;
  font-style: italic;
  line-height: 1.5 !important;
  color: var(--mo-ink);
  margin: 0 0 36px;
  max-width: none;
}

.mo-cta-band .home-cta-box a[href^="tel:"],
.mo-cta-band .home-cta-box a[href^="sms:"] {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 40px;
  margin: 0 6px;
  background: transparent;
  color: var(--mo-ink) !important;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.mo-cta-band .home-cta-box a[href^="tel:"] { border: 1px solid var(--mo-ink); }
.mo-cta-band .home-cta-box a[href^="sms:"] { border: 1px solid rgba(13, 13, 11, 0.3); }

.mo-cta-band .home-cta-box a[href^="tel:"]:hover,
.mo-cta-band .home-cta-box a[href^="sms:"]:hover {
  background: var(--mo-ink);
  color: var(--mo-cream) !important;
}


/* --------------------------------------------------------------------------
   6f. finance  — paired payment-plan cards  (homepage row 7)

   A centred header on the ink ground over two outlined cards. The first card
   is the gold one, the second the plain one; the chips are the <span>s and the
   apply link closes each card.
   -------------------------------------------------------------------------- */

.mo-finance {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
  padding-block: clamp(48px, 6vw, 80px) !important;
}

.mo-finance .mo-fin-head {
  max-width: 1080px;
  margin: 0 auto clamp(32px, 4vw, 52px);
}
.mo-finance .mo-fin-head,
.mo-finance .mo-fin-head p,
.mo-finance .mo-fin-head h3 { text-align: center !important; }

.mo-finance .mo-fin-head > p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  margin: 0 0 16px;
  max-width: none;
}

.mo-finance .mo-fin-head h3 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(28px, 3.2vw, 44px) !important;
  font-weight: 600;
  line-height: 1.15 !important;
  color: #fff !important;
  margin: 0;
}
.mo-finance .mo-fin-head h3 em { font-style: italic; font-weight: 400; }

.mo-finance .mo-fin-head h3 + p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 16px auto 0;
}

.mo-finance .mo-fin-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 24px;
}

.mo-finance .mo-fin-card {
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mo-finance .mo-fin-card:first-child { border: 1px solid rgba(184, 151, 90, 0.35); }
.mo-finance .mo-fin-card + .mo-fin-card { border: 1px solid rgba(255, 255, 255, 0.12); }

/* the location label */
.mo-finance .mo-fin-card > p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 10px;
  max-width: none;
}
.mo-finance .mo-fin-card:first-child > p:first-child { color: var(--mo-gold-fg); }
.mo-finance .mo-fin-card + .mo-fin-card > p:first-child { color: rgba(255, 255, 255, 0.8); }

.mo-finance .mo-fin-card h4 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 600;
  line-height: 1.2 !important;
  color: #fff !important;
  margin: 0;
}

.mo-finance .mo-fin-card h4 + p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: none;
}

/* The chips share one line; the composer gathers the run into this wrapper. */
.mo-finance .mo-fin-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.mo-finance .mo-fin-card span {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  margin: 0;
}
.mo-finance .mo-fin-card:first-child span {
  color: var(--mo-gold-fg);
  border: 1px solid rgba(184, 151, 90, 0.45);
}
.mo-finance .mo-fin-card + .mo-fin-card span {
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.mo-finance .mo-fin-card a {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--mo-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 14px 32px;
  margin-top: 4px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.mo-finance .mo-fin-card:first-child a {
  color: var(--mo-ink) !important;
  background: var(--mo-gold);
}
.mo-finance .mo-fin-card + .mo-fin-card a {
  color: #fff !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.mo-finance .mo-fin-card a:hover { opacity: 0.85; }


/* --------------------------------------------------------------------------
   6g. why-band  — the reasons grid  (homepage row 11)

   A centred header over a grid of cards, each opened by a 2px gold rule.
   -------------------------------------------------------------------------- */

.mo-why-band.mo-light {
  background: var(--mo-cream);
  border-top: 1px solid rgba(13, 13, 11, 0.08);
  color: var(--mo-ink);
}
.mo-why-band.mo-dark { background: var(--mo-ink); color: var(--mo-on-ink); }
.mo-why-band { --mo-band: 1100px; padding-block: clamp(64px, 10vw, 100px) !important; }

.mo-why-band .mo-why-head,
.mo-why-band .mo-why-head > div,
.mo-why-band .mo-why-head p,
.mo-why-band .mo-why-head h2 { text-align: center !important; }
.mo-why-band .mo-why-head { margin-bottom: 64px; }

.mo-why-band .mo-why-head p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #826a3a;
  margin: 0 0 18px;
  max-width: none;
}
.mo-why-band.mo-dark .mo-why-head p:first-child { color: var(--mo-gold-fg); }

.mo-why-band .mo-why-head h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(30px, 3.8vw, 50px) !important;
  font-weight: 600;
  line-height: 1.7 !important;
  margin: 0 0 16px;
}
.mo-why-band.mo-light .mo-why-head h2 { color: var(--mo-ink) !important; }
.mo-why-band.mo-dark  .mo-why-head h2 { color: #fff !important; }
.mo-why-band .mo-why-head h2 em { font-style: italic; font-weight: 400; }

.mo-why-band .mo-why-head h2 + p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300;
  line-height: 1.8 !important;
  color: var(--mo-grey);
  max-width: 600px;
  margin: 0 auto;
}
.mo-why-band.mo-dark .mo-why-head h2 + p { color: rgba(255, 255, 255, 0.85); }

.mo-why-band .mo-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
}

.mo-why-band .mo-why-card {
  border-top: 2px solid var(--mo-gold);
  padding-top: 24px;
  text-align: left;
}
.mo-why-band .mo-why-card h3,
.mo-why-band .mo-why-card p { text-align: left !important; }

.mo-why-band .mo-why-card h3 {
  font-family: var(--mo-serif) !important;
  font-size: 21px !important;
  font-weight: 600;
  line-height: 1.7 !important;
  margin: 0 0 12px;
}
.mo-why-band.mo-light .mo-why-card h3 { color: var(--mo-ink) !important; }
.mo-why-band.mo-dark  .mo-why-card h3 { color: #fff !important; }

.mo-why-band .mo-why-card p {
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 300;
  line-height: 1.8 !important;
  color: var(--mo-grey);
  margin: 0;
  max-width: none;
}
.mo-why-band.mo-dark .mo-why-card p { color: rgba(255, 255, 255, 0.8); }


/* --------------------------------------------------------------------------
   6h. video-grid  — the testimonial films  (homepage row 12)

   Three 9:16 cards on the ink ground. In the reference these are poster
   buttons that mount a video through the theme's own script; here the poster
   is the <video>'s poster and the browser's controls play it, so the films
   work without carrying that script across. The pairing of poster to film
   lives in the handoff's theme, not its content — see mo_click_to_play().
   -------------------------------------------------------------------------- */

.mo-video-grid {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
  border-top: 1px solid rgba(184, 151, 90, 0.3);
  --mo-band: var(--mo-container-wide);
  padding-block: clamp(80px, 10vw, 120px) !important;
}

.mo-video-grid .mo-video-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mo-video-grid .mo-vcard {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #111;
}

.mo-video-grid .mo-vcard-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.mo-video-grid .mo-vcard-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 151, 90, 0.3);
  padding: 4px 10px;
  pointer-events: none;
}

.mo-video-grid .mo-vcard-badge span {
  font-family: var(--mo-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(184, 151, 90, 0.95);
}

/* The caption sits over the film's own gradient, clear of the controls. */
.mo-video-grid .mo-vcard-caption {
  position: absolute;
  bottom: 52px;
  left: 20px;
  right: 20px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 35%, rgba(0, 0, 0, 0.1) 65%, transparent 100%);
}

.mo-video-grid .mo-vcard-caption p:first-child {
  font-family: var(--mo-serif) !important;
  font-size: 15px !important;
  font-style: italic;
  line-height: 1.4 !important;
  color: #fff;
  margin: 0 0 8px;
  max-width: none;
}

.mo-video-grid .mo-vcard-caption p + p {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  margin: 0;
  max-width: none;
}

.mo-video-grid .mo-video-cards-note {
  text-align: center;
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 40px;
  max-width: none;
}

@media (max-width: 767px) {
  .mo-video-grid .mo-video-cards { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   6i. reviews  — the live reviews embed  (homepage row 13)

   The reference freezes a copy of its Google reviews into the page. Here the
   heading is kept and the grid replaced by the house reviews plugin, so the
   salon's reviews stay current without another copy to maintain.
   -------------------------------------------------------------------------- */

.mo-reviews {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
  --mo-band: var(--mo-container-wide);
  padding-block: clamp(80px, 10vw, 120px) !important;
}

.mo-reviews > .panel-grid-cell .siteorigin-widget-tinymce > p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  margin: 0 0 18px;
  max-width: none;
}

.mo-reviews .siteorigin-widget-tinymce > p,
.mo-reviews h2 { text-align: center !important; }

.mo-reviews h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(30px, 3.8vw, 50px) !important;
  font-weight: 600;
  color: #fff !important;
  margin: 0 0 48px;
}

.mo-reviews-embed { text-align: left; }


/* --------------------------------------------------------------------------
   6j. social  — the Instagram wall  (homepage row 15)

   Channel links beside the heading, then a six-up strip of 3:4 photographs.

   The reference declares a dark overlay and a caption on each tile at
   opacity 0 with a transition, but ships no rule that ever reveals them, so
   on the reference they never appear. That is reproduced here rather than
   invented: the tiles are plain, and the captions stay hidden.
   -------------------------------------------------------------------------- */

.mo-social {
  --mo-band: var(--mo-container-wide);
  padding-block: clamp(64px, 8vw, 100px) !important;
}
.mo-social.mo-dark {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
}
.mo-social.mo-light { background: var(--mo-cream); color: var(--mo-ink); }

.mo-social .mo-social-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.mo-social .mo-social-head p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mo-gold-on-cream);
  margin: 0 0 10px;
  max-width: none;
}

.mo-social .mo-social-head h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(30px, 3.2vw, 46px) !important;
  font-weight: 600;
  line-height: 1.08 !important;
  color: var(--mo-ink) !important;
  margin: 0;
}
.mo-social.mo-dark .mo-social-head p:first-child { color: var(--mo-gold-fg); }
.mo-social.mo-dark .mo-social-head h2 { color: #fff !important; }
.mo-social .mo-social-head h2 em { font-style: italic; font-weight: 400; }

.mo-social .mo-social-channels { display: flex; gap: 24px; }

.mo-social .mo-social-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: rgba(13, 13, 11, 0.75) !important;
  transition: color 0.2s;
}
.mo-social .mo-social-channel span {
  font-family: var(--mo-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mo-social .mo-social-channel:hover { color: #fff !important; }

/* The ink band is the common case but one social grid stands on cream. */
.mo-social.mo-dark .mo-social-channel { color: rgba(255, 255, 255, 0.8) !important; }
.mo-social.mo-dark .mo-social-foot p { color: rgba(255, 255, 255, 0.82); }
.mo-social.mo-dark .mo-social-cta { color: rgba(255, 255, 255, 0.92) !important; }
.mo-social.mo-dark .mo-social-tag { color: #fff; }

.mo-social .mo-social-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}

.mo-social .mo-social-tile {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
}

.mo-social .mo-social-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  max-width: none;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* The closing strip: services line beside the follow button. */
.mo-social .mo-social-foot {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.mo-social .mo-social-foot p {
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--mo-grey);
  margin: 0;
  max-width: none;
}

.mo-social .mo-social-cta {
  font-family: var(--mo-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mo-ink) !important;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 11px 24px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.mo-social .mo-social-cta:hover {
  background: #fff;
  color: var(--mo-ink) !important;
  border-color: #fff;
}

/* Declared by the reference, never revealed by it. Kept for parity. */
.mo-social .mo-social-tag {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-ink);
  background: rgba(13, 13, 11, 0.72);
  padding: 4px 8px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

@media (max-width: 767px) {
  .mo-social .mo-social-grid { grid-template-columns: repeat(3, 1fr); }
  .mo-social .mo-social-head { flex-direction: column; align-items: flex-start; }
}

/* The FAQ band sits on the cream ground with a hairline above it, and closes
   with an outlined link to the full FAQ page. */
.mo-faq.mo-light {
  background: var(--mo-cream);
  border-top: 1px solid rgba(13, 13, 11, 0.1);
  padding-block: 120px !important;
}

.mo-faq .mo-faq-foot {
  border-top: 1px solid rgba(13, 13, 11, 0.1);
  padding-top: 32px;
  margin-top: 48px;
  text-align: center;
}

.mo-faq .mo-faq-foot a {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  padding: 13px 28px;
  color: var(--mo-ink) !important;
  border: 1px solid var(--mo-ink);
  background: transparent;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.mo-faq .mo-faq-foot a:hover {
  background: var(--mo-ink);
  color: var(--mo-cream) !important;
}



/* SGv6's salonguru.css colours every <main> <em> #333. In this design the
   italic half of a headline is part of the headline and must take its colour,
   which on the ink bands is white. */
.mo-two-col h2 em,
.mo-cta-band h2 em,
.mo-finance h3 em,
.mo-finance h4 em,
.mo-why-band h2 em,
.mo-social h2 em,
.mo-reviews h2 em,
.mo-video-grid em,
.mo-faq h2 em { color: inherit !important; }

/* --------------------------------------------------------------------------
   6k. The two house widgets inside these bands

   The FAQ accordion (sg_faq_widget) and the reviews embed
   (YourSalon-Reviews) bring their own markup and their own light-ground
   styling. Both are dressed here to the reference's design rather than
   replaced, so the FAQ keeps its FAQPage schema and the reviews stay live.
   -------------------------------------------------------------------------- */

/* -- FAQ accordion -------------------------------------------------------- */

/* The group label that opens each division of the accordion. Underlined in
   gold and inline, so the rule is only as wide as the words. */
.mo-faq .mo-faq-group {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-on-cream) !important;
  border-bottom: 1px solid var(--mo-gold-on-cream);
  padding-bottom: 8px;
  margin: 0 0 8px !important;
  display: inline-block;
  max-width: none;
  text-align: left !important;
}

/* SiteOrigin gives every widget a bottom margin. The reference spaces this
   band by group instead: each division is flush, with 40px between divisions. */
.mo-faq .so-panel { margin-bottom: 0 !important; }
.mo-faq .so-panel:has(.mo-faq-group) { margin-top: 40px !important; }
.mo-faq .so-panel:first-child:has(.mo-faq-group) { margin-top: 0 !important; }
.mo-faq .so-panel:has(.mo-faq-foot) { margin-top: 0 !important; }

/* The band's header, then the accordion. */
.mo-faq .siteorigin-widget-tinymce > .mo-eyebrow {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: #826a3a !important;
  margin: 0 0 18px !important;
  max-width: none;
}

.mo-faq h2 {
  font-family: var(--mo-serif) !important;
  /* The reference sets its FAQ heading larger than a section heading — 52px
     against 46-48 — so this has a cap of its own rather than the h2 scale. */
  font-size: clamp(30px, 3.6vw, 52px) !important;
  font-weight: 600;
  line-height: 1.15 !important;
  color: var(--mo-ink) !important;
  margin: 0 !important;
}

/* The gap between the header and the first division. */
.mo-faq .so-panel:first-child { margin-bottom: 64px !important; }

.mo-faq .faq-accordion-wrapper,
.mo-faq .faq-questions { background: none; border: 0; padding: 0; margin: 0; }

.mo-faq .question {
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(13, 13, 11, 0.12) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  text-align: left;
}

.mo-faq .question h3 {
  font-family: var(--mo-serif) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--mo-ink) !important;
  margin: 0 !important;
  transition: color 0.2s;
  text-align: left !important;
}

.mo-faq .question:hover h3 { color: var(--mo-ink) !important; }

/* The widget's own glyph, restyled as the reference's gold "+". */
.mo-faq .question > span {
  font-family: var(--mo-serif) !important;
  font-size: 0 !important;
  color: var(--mo-gold-fg) !important;
  flex-shrink: 0;
  margin-left: 20px;
  line-height: 1 !important;
}

.mo-faq .question > span::before {
  content: '+';
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.18s;
  transform-origin: 50% 50%;
}

/* The widget marks an open row with .open, which is what turns the + into an
   x — the same 45 degrees the reference turns it. */
.mo-faq .question.open > span::before { transform: rotate(45deg); }

/* The widget draws a gold gradient underline of its own. The reference uses a
   plain hairline, which .question already carries, so the gradient is off in
   this band only — the widget keeps it everywhere else on the site. */
.mo-faq .question::after { display: none !important; }

.mo-faq .answer {
  background: none !important;
  border: 0 !important;
  padding: 0 0 22px !important;
  margin: 0 !important;
}

.mo-faq .answer p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.9 !important;
  color: #5a5550 !important;
  margin: 0 0 14px !important;
  max-width: none;
  text-align: left !important;
}

.mo-faq .answer a {
  font-family: var(--mo-sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--mo-gold-on-cream) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--mo-gold-on-cream);
}
.mo-faq.mo-dark .answer a {
  color: var(--mo-gold-fg) !important;
  border-bottom-color: var(--mo-gold);
}

/* -- reviews embed -------------------------------------------------------- */

.mo-reviews-embed .ysre-reviews-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mo-reviews-embed .review_item {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mo-reviews-embed .review_item_inner {
  background: none !important;
  border: 1px solid rgba(184, 151, 90, 0.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 32px 28px !important;
  height: 100%;
}

.mo-reviews-embed .ysre_avatar img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  margin-bottom: 14px;
}

.mo-reviews .mo-reviews-embed .ysre-reviewer-name {
  font-family: var(--mo-serif) !important;
  font-size: 19px !important;
  font-weight: 600;
  color: #fff !important;
  display: block;
  margin-bottom: 4px;
}

.mo-reviews-embed .ysre-rating-stars { color: var(--mo-gold-fg) !important; letter-spacing: 2px; }

/* The plugin styles itself for a light ground, and SGv6 pins the review body
   black for this page specifically:
   
       salonguru.css   .home .ysre-ui-stream-message { color: #000 !important }
   
   which is invisible on the ink. That selector is (0,2,0) and also !important,
   so these have to out-rank it, not merely repeat it — hence the .mo-reviews
   prefix and the named class on the message. Everything in the embed is turned
   white by default so anything the plugin adds later is legible too; only the
   stars and links keep a colour of their own. */
.mo-reviews .mo-reviews-embed,
.mo-reviews .mo-reviews-embed * { color: #fff !important; }

.mo-reviews .mo-reviews-embed .ysre-rating-stars,
.mo-reviews .mo-reviews-embed .ysre-rating-stars * { color: var(--mo-gold-fg) !important; }

.mo-reviews .mo-reviews-embed .ysre-ui-stream-message,
.mo-reviews .mo-reviews-embed .review_item_inner p {
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  max-width: none;
  text-align: left !important;
  margin: 14px 0 0 !important;
}

/* A review's own links stay gold so they read as links on the dark ground. */
.mo-reviews .mo-reviews-embed a,
.mo-reviews .mo-reviews-embed a * { color: var(--mo-gold-fg) !important; }

.mo-reviews-embed .ysre-clear { display: none; }

/* The closing line, with a link to each salon's Google review page. */
.mo-reviews .mo-reviews-note {
  text-align: center !important;
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 56px 0 0 !important;
  max-width: none;
}

/*
 * The two links carry a fix the handoff documents in its own closeout notes,
 * and it is worth keeping. As plain inline links the pair wraps across lines,
 * and an inline box that wraps has ONE rectangle spanning both lines — so the
 * two rectangles overlapped by 226x17px at 390px wide, and a tap in that band
 * could open the other salon's review page. inline-flex gives each link a
 * single rectangle that is never split, min-height gives it the 44px a finger
 * needs, and the gold rule becomes an underline rather than a border so it
 * stays against the words instead of dropping to the bottom of a 44px box.
 */
.mo-reviews .mo-reviews-note a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 100%;
  vertical-align: middle;
  color: var(--mo-gold-fg) !important;
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 0.2s;
}

.mo-reviews .mo-reviews-note a:hover,
.mo-reviews .mo-reviews-note a:focus-visible { color: #d4b87f !important; }

@media (max-width: 900px) {
  .mo-reviews-embed .ysre-reviews-wrapper { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   17. The Hair & Beauty News archive

   category-hair-beauty-news.php renders the blog hub page's own SiteOrigin
   layout at /hair-beauty-news/. Two things in SGv6 stand in the way of that,
   and both are undone here for this one archive only.

   1. Archive entries are excerpt cards: parent.css gives `.archive article` a
      grey ground, a radius, centred text, `max-height: 500px; overflow:
      hidden` and a white fade ::after. Applied to the hub that clipped the
      whole page to its first 500px.
   2. `<main>` is capped at 1200 and centred by a selector carrying several
      :not() classes, which out-weighs an ordinary body-class override — so
      these carry !important rather than chase its specificity.
   -------------------------------------------------------------------------- */

body.category-hair-beauty-news main.site-main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.category-hair-beauty-news .monaco-hub {
  max-height: none;
  max-width: none;
  overflow: visible;
  background: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  text-align: left;
}

/* The fade that covers the bottom of a clipped excerpt card. */
body.category-hair-beauty-news .monaco-hub::after { content: none; }

body.category-hair-beauty-news .monaco-hub > .entry-content {
  max-width: none;
  margin: 0;
  padding: 0;
}


/* -- the topic filter bar ------------------------------------------------- */
/* A 60px cream strip of uppercase links under the hero. extract.py reads it as
   a link-cluster, which is a padded band elsewhere; here it is a single row. */

body.mo-blog .mo-links {
  background: var(--mo-cream) !important;
  border: 0;
  border-bottom: 1px solid rgba(13, 13, 11, 0.1);
  padding-block: 0 !important;
}

body.mo-blog .mo-links .siteorigin-widget-tinymce > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body.mo-blog .mo-links a {
  display: block;
  font-family: var(--mo-sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(13, 13, 11, 0.61) !important;
  padding: 20px 28px;
  transition: color 0.2s;
}

body.mo-blog .mo-links a:first-child { color: var(--mo-ink) !important; }
body.mo-blog .mo-links a:hover { color: var(--mo-ink) !important; }

/* The "… Hub" links close the row on the right. */
body.mo-blog .mo-links a:nth-child(5) { margin-left: auto; }
body.mo-blog .mo-links a:nth-child(n+5) { padding: 20px 14px; }


/* -- the two card sections' header row ------------------------------------ */
/*
 * Heading on the left, a hairline across the gap, a count on the right — the
 * same device the featured post uses above it.
 *
 * ref: flex, gap 20, baseline, 48px below; h2 Cormorant 40/68;
 *      rule 1px rgba(184,151,90,.25) on ink, rgba(13,13,11,.12) on cream;
 *      label 9px / .22em / uppercase
 *
 * The source gives only the heading and the label, so the rule is the
 * container's own ::after. A pseudo-element on a flex container is a flex item
 * but always sits last, so `order` puts it back between the two.
 */

body.mo-blog .mo-cards-head > div {
  display: contents;
}

body.mo-blog .mo-cards-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 48px;
}

body.mo-blog .mo-cards-head h2 { order: 1; }
body.mo-blog .mo-cards-head > span:first-child { order: 1; }

body.mo-blog .mo-cards-head::after {
  content: '';
  order: 2;
  flex: 1 1 auto;
  height: 1px;
  align-self: center;
}

body.mo-blog .mo-card-grid.mo-dark .mo-cards-head::after {
  background: rgba(184, 151, 90, 0.25);
}
body.mo-blog .mo-card-grid.mo-light .mo-cards-head::after {
  background: rgba(13, 13, 11, 0.12);
}

body.mo-blog .mo-cards-head > span {
  order: 3;
  font-family: var(--mo-sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
  white-space: nowrap;
}

body.mo-blog .mo-card-grid.mo-dark .mo-cards-head > span {
  color: var(--mo-gold-fg);
}
body.mo-blog .mo-card-grid.mo-light .mo-cards-head > span {
  color: rgba(13, 13, 11, 0.7);
}

/* The heading shrinks to its words so the rule can take the rest. */
body.mo-blog .mo-card-grid h2 { width: auto; white-space: nowrap; }

/* -- Featured Guides: two large, then three ------------------------------- */
/*
 * The reference lays this set out as two grids — 599/599 for the first pair,
 * then 398.664 x 3 — which is a six-column field with the first two cards
 * spanning three columns and the rest two. One grid does both.
 */

body.mo-blog .mo-card-grid.mo-dark .mo-cards {
  grid-template-columns: repeat(6, 1fr);
}

body.mo-blog .mo-card-grid.mo-dark .mo-card:nth-child(-n+2) { grid-column: span 3; }
body.mo-blog .mo-card-grid.mo-dark .mo-card:nth-child(n+3)  { grid-column: span 2; }

@media (max-width: 900px) {
  body.mo-blog .mo-card-grid.mo-dark .mo-cards { grid-template-columns: repeat(2, 1fr); }
  body.mo-blog .mo-card-grid.mo-dark .mo-card:nth-child(-n+2),
  body.mo-blog .mo-card-grid.mo-dark .mo-card:nth-child(n+3) { grid-column: auto; }
}

/* -- the article cards ---------------------------------------------------- */
/* Three up, hairline gutters, a 4:3 photograph over a padded body. The whole
   card is the link, as it is in the reference. */

body.mo-blog .mo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

body.mo-blog .mo-card {
  display: block;
  background: var(--mo-cream);
  text-decoration: none;
  color: var(--mo-ink) !important;
  overflow: hidden;
}

body.mo-blog .mo-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center top;
  display: block;
  max-width: none;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

body.mo-blog .mo-card-body { padding: 28px 28px 32px; }

body.mo-blog .mo-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px !important;
  line-height: 1.7 !important;
  margin: 0 0 12px !important;
  max-width: none;
}

body.mo-blog .mo-card-kicker {
  font-family: var(--mo-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #79643b;
}

body.mo-blog .mo-card-dot {
  width: 1px;
  height: 11px;
  background: rgba(184, 151, 90, 0.4);
  display: inline-block;
}

body.mo-blog .mo-card-time {
  font-family: var(--mo-sans);
  font-size: 11px;
  line-height: 1.7;
  color: rgba(13, 13, 11, 0.7);
}

/* The reference holds its title to three lines and its standfirst to three,
   which is what keeps every card the same height in a shared grid row. The
   copy here is longer, so the same limit is applied rather than letting one
   long title set the height of the whole row. */
body.mo-blog .mo-card h3 {
  font-family: var(--mo-serif) !important;
  font-size: 22px !important;
  font-weight: 400;
  line-height: 1.25 !important;
  letter-spacing: normal;
  color: var(--mo-ink) !important;
  margin: 0 0 10px !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

body.mo-blog .mo-card-body > p:not(.mo-card-meta):not(.mo-card-foot) {
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 1.65 !important;
  color: rgba(13, 13, 11, 0.8) !important;
  margin: 0 0 20px !important;
  max-width: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Cards share a grid row, so the body fills it and the call to action sits at
   the foot of every card rather than floating under short copy. */
body.mo-blog .mo-card {
  display: flex;
  flex-direction: column;
}
body.mo-blog .mo-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.mo-blog .mo-card-foot { margin-top: auto !important; }

/* The foot: the date on one side, the prompt on the other. */
body.mo-blog .mo-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  max-width: none;
}

body.mo-blog .mo-card-date {
  font-family: var(--mo-sans);
  font-size: 11px;
  line-height: 1.7;
  color: rgba(13, 13, 11, 0.7);
}

body.mo-blog .mo-card-cta {
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #79643b;
  white-space: nowrap;
}

body.mo-blog .mo-card:hover > img { transform: scale(1.04); }

@media (max-width: 900px) {
  body.mo-blog .mo-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body.mo-blog .mo-cards { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   9b. card-grid tones

   The card grid alternates grounds like every other band. Only the cream form
   existed, so a row resolved as dark still came out cream — on the blog hub
   that put the "Featured Guides" row on the wrong ground and left its heading
   nearly unreadable.
   -------------------------------------------------------------------------- */

.mo-card-grid.mo-light { background: var(--mo-cream); color: var(--mo-ink); }
.mo-card-grid.mo-dark  { background: var(--mo-ink);   color: var(--mo-on-ink); }

.mo-card-grid.mo-light h2 { color: var(--mo-ink) !important; }
.mo-card-grid.mo-dark  h2 { color: #fff !important; }

/* The reference sets these section headings at 40px on the body's 1.7. */
.mo-card-grid h2 {
  font-family: var(--mo-serif) !important;
  font-size: 40px !important;
  font-weight: 400;
  line-height: 1.7 !important;
  letter-spacing: normal;
  margin: 0 !important;
}

/* The cards keep their cream ground on both bands — only the section around
   them changes. Their copy stays ink throughout. */
.mo-card-grid .mo-card { background: var(--mo-cream); }


/* -- the hub's own hero --------------------------------------------------- */
/* Not the centred hero-compact the rest of the site opens on: the blog hub
   ranges left with a much larger display line.
   ref: section 140px 80px 100px; kicker 10px/.28em/17px, 20px below;
        h1 Cormorant 80px/80px, 24px below; standfirst 15px/26.25px at 540. */

body.mo-blog .mo-hero-compact {
  /* .mo-hero-compact sets its own padding with the shorthand, which overwrites
     the shared centring rule — so the inline half is restated here as well. */
  padding-block: 140px 100px !important;
  padding-inline: max(
    clamp(24px, 6vw, 80px),
    calc((100% - var(--mo-container-wide)) / 2)
  ) !important;
}

body.mo-blog .mo-hero-compact,
body.mo-blog .mo-hero-compact p,
body.mo-blog .mo-hero-compact h1 { text-align: left !important; }

body.mo-blog .mo-hero-compact .monaco-hero > p:first-of-type,
body.mo-blog .mo-hero-compact .mo-eyebrow {
  font-family: var(--mo-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.28em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 20px !important;
  max-width: none;
}

body.mo-blog .mo-hero-compact h1 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(44px, 5vw, 80px) !important;
  font-weight: 400;
  line-height: 1 !important;
  letter-spacing: normal;
  color: #fff !important;
  margin: 0 0 24px !important;
  max-width: none;
  margin-inline: 0;
}

/* The italic half of the line is part of the line — salonguru.css would
   otherwise colour it #333 through `main em`. */
body.mo-blog .mo-hero-compact h1 em { color: inherit !important; }

/* The standfirst only needs a gap under it where something follows — on the
   hub it is the last thing in the hero. */
body.mo-blog .mo-hero-compact .monaco-hero > p:nth-of-type(2):not(:last-child) {
  margin-bottom: 36px !important;
}

body.mo-blog .mo-hero-compact .monaco-hero > p:nth-of-type(2),
body.mo-blog .mo-hero-compact .mo-eyebrow ~ p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  max-width: 540px;
  margin: 0 !important;
  margin-inline: 0;
}

/* -- the filter bar ------------------------------------------------------- */
/*
 * Two groups on one line: four topic links on the left, four outlined "hub"
 * chips on the right.
 *
 * ref:  topic link   10px / .18em / 20px 28px / 2px transparent bottom rule
 *       active       ink, 700, the bottom rule in gold
 *       hub chip      9px / .126em /  6px 10px / 1px rgba(13,13,11,.12) box
 *       chips sit 6px apart and are centred on the bar
 *
 * The reference pushes the chips right with an empty 311px spacer <div>. That
 * is layout scaffolding with nothing in it, so clean_html drops it and the
 * eight links arrive as flat siblings — the fifth takes `margin-left: auto`
 * instead, which does the same job at any width.
 */

body.mo-blog .mo-links a {
  margin: 0 !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  /* Reserve the rule on every topic link so the active one does not shift. */
  border-bottom: 2px solid transparent;
}

body.mo-blog .mo-links a:first-child {
  font-weight: 700 !important;
  color: var(--mo-ink) !important;
  border-bottom-color: var(--mo-gold);
}

/* The hub chips. */
body.mo-blog .mo-links a:nth-child(n+5) {
  align-self: center;
  font-size: 9px !important;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  border: 1px solid rgba(13, 13, 11, 0.12);
  margin-left: 6px !important;
  transition: border-color 0.2s, color 0.2s;
}

body.mo-blog .mo-links a:nth-child(5) { margin-left: auto !important; }

body.mo-blog .mo-links a:nth-child(n+5):hover {
  border-color: rgba(13, 13, 11, 0.4);
  color: var(--mo-ink) !important;
}

/* -- the featured post ---------------------------------------------------- */
/*
 * A labelled rule, then one panel: photograph on the left, copy on the right.
 *
 * ref:  section   ink, 0 80px; inner 1200 with 72px above
 *       head row  flex, gap 20, baseline; 9px labels either side of a 1px
 *                 rgba(184,151,90,.25) rule; 32px below
 *       card      grid 600/600, bg rgba(255,255,255,.04), 750 tall
 *       chip      absolute 20/20, gold ground, 9px/600/.18em, 6px 14px
 *       copy      flex column centred, 56px 48px
 *       kicker    9px / .22em / gold / 20px below
 *       h2        Cormorant 44px/50.6 / 20px below
 *       body      15px/27 / 300 / rgba(255,255,255,.84) / 32px below
 *       cta       10px / .18em / gold, gold rule under the words, then an arrow
 */

body.mo-blog .mo-feature {
  background: var(--mo-ink);
  padding-block: 72px 2px !important;
}

body.mo-blog .mo-feature-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 32px;
}

body.mo-blog .mo-feature-head > span {
  font-family: var(--mo-sans);
  font-size: 9px;
  line-height: 1.7;
  text-transform: uppercase;
  white-space: nowrap;
}

body.mo-blog .mo-feature-head > span:first-child {
  letter-spacing: 0.28em;
  color: var(--mo-gold-fg);
}

body.mo-blog .mo-feature-head > span:last-child {
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.49);
}

body.mo-blog .mo-feature-rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(184, 151, 90, 0.25);
  align-self: center;
}

body.mo-blog .mo-feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
  color: inherit !important;
}

body.mo-blog .mo-feature-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

body.mo-blog .mo-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  max-width: none;
}

body.mo-blog .mo-feature-chip {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: var(--mo-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--mo-ink);
  background: var(--mo-gold);
  padding: 6px 14px;
}

body.mo-blog .mo-feature-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 48px;
}

body.mo-blog .mo-feature-kicker {
  font-family: var(--mo-sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  margin-bottom: 20px;
}

body.mo-blog .mo-feature-copy h2 {
  font-family: var(--mo-serif) !important;
  font-size: 44px !important;
  font-weight: 400;
  line-height: 1.15 !important;
  letter-spacing: normal;
  color: #fff !important;
  margin: 0 0 20px !important;
}

body.mo-blog .mo-feature-copy p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.84) !important;
  margin: 0 0 32px !important;
  max-width: none;
}

body.mo-blog .mo-feature-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--mo-gold-fg);
}

body.mo-blog .mo-feature-cta > span:first-child {
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--mo-gold);
}

body.mo-blog .mo-feature-cta > span:last-child {
  font-size: 14px;
  line-height: 1.7;
  transition: transform 0.25s;
}

body.mo-blog .mo-feature-card:hover .mo-feature-cta > span:last-child {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  body.mo-blog .mo-feature-card { grid-template-columns: 1fr; }
  body.mo-blog .mo-feature-copy { padding: 36px 24px 48px; }
}

/* -- the two card sections ------------------------------------------------ */
/* The reference pads these to the page gutter, and closes the set with a
   deeper foot on the last one. */

body.mo-blog .mo-card-grid.mo-dark { padding-block: 80px 0 !important; }
body.mo-blog .mo-card-grid.mo-light { padding-block: 80px 120px !important; }


/* -- the guide indexes ---------------------------------------------------- */
/*
 * The per-topic index pages (/hair-beauty-news/hair-extensions/ and friends)
 * run the same hero and card grid as the hub, with their own measure: wider
 * gutters between cards, a white card rather than cream, and a slightly
 * smaller standfirst. They are single posts, so <main> needs the same release
 * from SGv6's cap that the archive template gets.
 *
 * ref: grid 3 x 373.33, gap 40; card 373x579 on #fff; img 4:3
 *      kicker 9px / .22em / rgb(131,107,64) / 10px below
 *      h2     22px / 27.5 / 12px below
 *      copy   13px / 22.1 / rgba(13,13,11,.65) / 20px below
 *      date   11px rgba(13,13,11,.6)   cta 10px / .14em / rgb(131,107,64)
 */

body.mo-blog.single-post main.site-main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.mo-blog.single-post article,
body.mo-blog.single-post .entry-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.mo-blog.single-post .mo-cards { gap: 40px; }

body.mo-blog.single-post .mo-card { background: #fff; }

body.mo-blog.single-post .mo-card-meta { margin: 0 0 10px !important; }
body.mo-blog.single-post .mo-card-kicker,
body.mo-blog.single-post .mo-card-cta { color: #836b40; }
body.mo-blog.single-post .mo-card h3 { margin: 0 0 12px !important; }

body.mo-blog.single-post .mo-card-body > p:not(.mo-card-meta):not(.mo-card-foot) {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: rgba(13, 13, 11, 0.65) !important;
}

body.mo-blog.single-post .mo-card-date { color: rgba(13, 13, 11, 0.6); }

/* These indexes carry a longer standfirst than the hub's cards; the reference
   lets it run to four lines. */
body.mo-blog.single-post .mo-card-body > p:not(.mo-card-meta):not(.mo-card-foot) {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* The index hero sets its headline a little smaller than the hub's. */
body.mo-blog.single-post .mo-hero-compact h1 {
  font-size: clamp(40px, 4.5vw, 72px) !important;
  line-height: 1.05 !important;
}

/* The breadcrumb above the headline. */
body.mo-blog .mo-hero-compact nav {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.7 !important;
  margin-bottom: 28px;
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

body.mo-blog .mo-hero-compact nav a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  transition: color 0.2s;
}
body.mo-blog .mo-hero-compact nav a:hover { color: #fff !important; }


/* -- the closing panel on a guide index ----------------------------------- */
/*
 * The indexes sign off with an ink panel under the cards: a kicker and a
 * question on the left, two calls to action on the right.
 *
 * ref: flex, space-between, centred; ink; padding 60px 56px; 80px above
 *      kicker 9px / .28em / gold;  h2 40px/44 white
 *      first action  ink on gold, 10px / .22em, padding 16px 32px
 *      second        white, outlined, same metrics
 */

body.mo-blog .mo-cards-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  background: var(--mo-ink);
  padding: 60px 56px;
  margin-top: 80px;
}

body.mo-blog .mo-foot-actions { display: flex; align-items: center; }

body.mo-blog .mo-cards-foot p {
  font-family: var(--mo-sans) !important;
  font-size: 9px !important;
  letter-spacing: 0.28em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 12px !important;
  max-width: none;
}

body.mo-blog .mo-cards-foot h2 {
  font-family: var(--mo-serif) !important;
  font-size: 40px !important;
  font-weight: 400;
  line-height: 1.1 !important;
  letter-spacing: normal;
  color: #fff !important;
  margin: 0 !important;
  white-space: normal;
}

body.mo-blog .mo-cards-foot a {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 32px;
  margin-left: 12px;
  transition: background 0.25s, color 0.25s;
}

body.mo-blog .mo-cards-foot a:first-of-type {
  color: var(--mo-ink) !important;
  background: var(--mo-gold);
}

body.mo-blog .mo-cards-foot a + a {
  color: #fff !important;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
body.mo-blog .mo-cards-foot a + a:hover {
  background: #fff;
  color: var(--mo-ink) !important;
}

/* The guide indexes set the head a little further from the grid. */
body.mo-blog.single-post .mo-cards-head { margin-bottom: 56px; }

@media (max-width: 767px) {
  body.mo-blog .mo-cards-foot { flex-direction: column; align-items: flex-start; padding: 40px 24px; }
  body.mo-blog .mo-cards-foot a { margin: 0 12px 0 0; }
}


/* The hero's call to action: a filled gold button, not a text link.
   ref: inline-block, 10px / .22em / uppercase, ink on gold, padding 14px 28px */
body.mo-blog .mo-hero-compact .monaco-hero > a { text-decoration: none; }

body.mo-blog .mo-hero-compact .monaco-hero > a > span,
body.mo-blog .mo-hero-compact .monaco-hero > a:not(:has(span)) {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--mo-ink) !important;
  background: var(--mo-gold);
  padding: 14px 28px;
  transition: background 0.25s;
}

body.mo-blog .mo-hero-compact .monaco-hero > a:hover > span { background: #d4b87f; }

/* -- a blog article ------------------------------------------------------- */
/*
 * The posts under /hair-beauty-news/ are the third blog surface: a full-bleed
 * photographic hero with the title over it, a narrow reading column, a dark
 * FAQ band and a set of related cards. They share the mo-blog class with the
 * hub and the topic indexes, and are told apart by their own row kinds — an
 * index opens on .mo-hero-compact and has no reading column.
 *
 * ref: hero    1737x903, image behind, copy 680 wide at the foot
 *              h1 60px/66, 20px below; breadcrumb and meta 10-11px
 *      body    cream, 80px 80px 60px, column capped at 760
 *              lead 24px/38.4 with a rule at its left, 52px below
 *              h2   34px/40.8, 20px below
 *      faq     ink, 80px 80px 100px, column 760, each row 26px 0
 */

/*
 * The photograph and the two washes over it.
 *
 * ref: object-position 50% 30% — the frame is a 1624x2029 portrait, and
 *      centring it cuts the face; 30% holds the subject in view.
 *      wash 1, over the whole hero: linear-gradient(to right,
 *        rgba(13,13,11,.88) 40%, rgba(13,13,11,.45) 70%, rgba(13,13,11,.2))
 *        — darkest at the left so the title reads, clearing to the right.
 *      wash 2, the last 140px: linear-gradient(to top, #f5f0e8, transparent)
 *        — carries the image into the cream band beneath it.
 *
 * The generic hero-fullbleed washes bottom-to-top, which is the wrong axis
 * here and left the title sitting on open photograph.
 */
body.mo-blog.single-post .mo-hero-fullbleed:has(h1) {
  background-position: 50% 30% !important;
}

body.mo-blog.single-post .mo-hero-fullbleed:has(h1)::after {
  background: linear-gradient(
    to right,
    rgba(13, 13, 11, 0.88) 40%,
    rgba(13, 13, 11, 0.45) 70%,
    rgba(13, 13, 11, 0.2) 100%
  ) !important;
}

/*
 * The fade into the cream band sits ABOVE the dark wash, not under it — the
 * reference paints it after, and with it underneath the ink simply covered it
 * and the join stayed visible. It also carries the cream further up than a
 * plain two-stop ramp, so the image dissolves rather than stopping.
 *
 * z-index: the wash is 1, this is 2, and the copy cell is lifted to 3.
 */
body.mo-blog.single-post .mo-hero-fullbleed:has(h1)::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* 150px is exactly the copy's clearance, so the fade can run at full
     strength without touching the date line above it. */
  height: 150px;
  z-index: 2;
  background: linear-gradient(
    to top,
    var(--mo-cream) 0%,
    rgba(245, 240, 232, 0.99) 22%,
    rgba(245, 240, 232, 0.9) 46%,
    rgba(245, 240, 232, 0.6) 70%,
    rgba(245, 240, 232, 0) 100%
  );
  pointer-events: none;
}

body.mo-blog.single-post .mo-hero-fullbleed:has(h1) > .panel-grid-cell {
  position: relative;
  z-index: 3;
}

/* The copy sits 150px off the foot of the image, not hard against it. */
body.mo-blog.single-post .mo-hero-fullbleed:has(h1) {
  min-height: 903px;
  display: flex;
  align-items: flex-end;
  padding: 0 clamp(24px, 6vw, 80px) 150px !important;
  text-align: left;
}

body.mo-blog.single-post .mo-hero-fullbleed > .panel-grid-cell {
  align-self: flex-end;
  width: 100%;
}

body.mo-blog.single-post .mo-hero-fullbleed .siteorigin-widget-tinymce { max-width: 680px; }

body.mo-blog.single-post .mo-hero-fullbleed h1 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(34px, 3.6vw, 60px) !important;
  font-weight: 400;
  line-height: 1.1 !important;
  letter-spacing: normal;
  color: #fff !important;
  margin: 0 0 20px !important;
  max-width: none;
  text-align: left !important;
}

/* The breadcrumb above the title, then the date and reading time below it. */
body.mo-blog.single-post .mo-hero-fullbleed .siteorigin-widget-tinymce > a,
body.mo-blog.single-post .mo-hero-fullbleed .siteorigin-widget-tinymce > a ~ span {
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
}

body.mo-blog.single-post .mo-hero-fullbleed .siteorigin-widget-tinymce > a {
  color: rgba(255, 255, 255, 0.7) !important;
  margin-right: 8px;
}
body.mo-blog.single-post .mo-hero-fullbleed .siteorigin-widget-tinymce > a ~ span {
  color: var(--mo-gold-fg);
  margin-right: 8px;
}

body.mo-blog.single-post .mo-hero-fullbleed h1 ~ span {
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 16px;
}

/* -- the reading column --------------------------------------------------- */

body.mo-blog.single-post .mo-prose-band {
  --mo-band: 760px;
  padding-block: 80px 60px !important;
}

/* The reference groups each heading with its paragraphs in a div carrying
   52px below it. This markup is flat, so the rhythm is carried by the heading
   instead: its predecessor's 18px plus 52 gives the same 70px break. */
body.mo-blog.single-post .mo-prose-band h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 400;
  line-height: 1.2 !important;
  letter-spacing: normal;
  color: var(--mo-ink) !important;
  margin: 52px 0 20px !important;
}

body.mo-blog.single-post .mo-prose-band .siteorigin-widget-tinymce > h2:first-child {
  margin-top: 0 !important;
}

body.mo-blog.single-post .mo-prose-band h3 {
  font-family: var(--mo-serif) !important;
  font-size: 24px !important;
  font-weight: 400;
  line-height: 1.3 !important;
  color: var(--mo-ink) !important;
  margin: 32px 0 12px !important;
}

/* The standfirst: larger, with a gold rule down its left edge. */
body.mo-blog.single-post .mo-prose-band .siteorigin-widget-tinymce > p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
  color: var(--mo-ink) !important;
  padding-left: 28px;
  border-left: 2px solid var(--mo-gold);
  margin: 0 0 52px !important;
  max-width: none;
}

body.mo-blog.single-post .mo-prose-band p {
  font-family: var(--mo-sans) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  color: rgba(13, 13, 11, 0.82) !important;
  margin: 0 0 18px !important;
  max-width: none;
}

body.mo-blog.single-post .mo-prose-band a {
  color: var(--mo-ink) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--mo-gold);
}

/* The ink panel an article closes on.
   ref: bg ink; 60px above; padding 48px
        label 10px / .22em / gold / 12px below
        line  30px/39 white / 24px below
        button ink on gold, 10px / .18em / 600, padding 16px 44px */

body.mo-blog.single-post .mo-post-cta {
  background: var(--mo-ink);
  padding: 48px;
  margin: 60px 0 0;
}

body.mo-blog.single-post .mo-post-cta p:first-child {
  font-family: var(--mo-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 12px !important;
}

body.mo-blog.single-post .mo-post-cta p + p {
  font-family: var(--mo-serif) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #fff !important;
  margin: 0 0 24px !important;
}

body.mo-blog.single-post .mo-post-cta a {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--mo-ink) !important;
  background: var(--mo-gold);
  border: 0;
  padding: 16px 44px;
  text-decoration: none;
  transition: background 0.25s;
}
body.mo-blog.single-post .mo-post-cta a:hover { background: #d4b87f; }


/* -- the dark FAQ band ---------------------------------------------------- */
/* .mo-faq had only a white ground and a cream one; a post's FAQ sits on ink. */

.mo-faq.mo-dark {
  background: var(--mo-ink);
  border-top: 1px solid rgba(184, 151, 90, 0.3);
  color: var(--mo-on-ink);
}

.mo-faq.mo-dark .siteorigin-widget-tinymce > .mo-eyebrow { color: var(--mo-gold-fg) !important; }
.mo-faq.mo-dark h2 { color: #fff !important; }
.mo-faq.mo-dark .question { border-bottom-color: rgba(255, 255, 255, 0.14) !important; }
.mo-faq.mo-dark .question h3 { color: rgba(255, 255, 255, 0.92) !important; }
.mo-faq.mo-dark .question:hover h3 { color: #fff !important; }
.mo-faq.mo-dark .answer p { color: rgba(255, 255, 255, 0.78) !important; }
.mo-faq.mo-dark .mo-faq-group { color: var(--mo-gold-fg) !important; }
.mo-faq.mo-dark .mo-faq-foot { border-top-color: rgba(255, 255, 255, 0.14); }
.mo-faq.mo-dark .mo-faq-foot a {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5);
}
.mo-faq.mo-dark .mo-faq-foot a:hover {
  background: #fff;
  color: var(--mo-ink) !important;
}

body.mo-blog.single-post .mo-faq { padding-block: 80px 100px !important; }
body.mo-blog.single-post .mo-faq .question { padding: 26px 0 !important; }

/* Related guides close the article on the cream ground. */
body.mo-blog.single-post .mo-card-grid.mo-light { padding-block: 80px 100px !important; }


/* --------------------------------------------------------------------------
   18. contact strip — the location's details, read from the contact record

   A dark band under a contact page's hero: phone, address, hours and parking.
   The values come from Salon Guru's contact shortcodes rather than being
   frozen into the page, so editing the record updates every place it appears.

   ref: band #111110, padding 22px 96px; inner 1200, flex
        label 9px / .22em / uppercase / gold / 5px below
        value 13px / 22.1 / white

   The reference prints a one-line summary for hours ("Mon–Sat 9am – 9pm").
   The shortcode returns the real thing, a row per day with Closed marked, so
   this band is taller than the reference's and cannot go stale.
   -------------------------------------------------------------------------- */

/* -- carded why-grid on a white ground ------------------------------------
   The handoff gives each of its why-grids its own grid, so the rebuild uses
   one treatment for all of them. The exception is a band on white: there the
   points are cream tiles under a gold rule, butted together, and that only
   reads because the band behind them is white.

   ref: grid 4 x 299, gap 2; tile cream, 3px gold above, padding 40px 32px
        h3 Cormorant 22px/600 ink, 12px below; p Karla 14px/300 at #666
   ---------------------------------------------------------------------- */

.mo-why-band.mo-ground-white .mo-why-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2px;
}

.mo-why-band.mo-ground-white .mo-why-card {
  background: var(--mo-cream);
  border-top: 3px solid var(--mo-gold);
  padding: 40px 32px;
}

.mo-why-band.mo-ground-white .mo-why-card h3 {
  font-family: var(--mo-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--mo-ink) !important;
  margin: 0 0 12px !important;
}

.mo-why-band.mo-ground-white .mo-why-card p {
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: #666 !important;
  margin: 0 !important;
}


/* -- "what to expect": the visit, then what it involves --------------------
   ref: band 100px 60px; row 1100, grid 510/510, gap 80
        left: kicker 10px gold; h2 clamp to 52px; lead 14px/300 at 55%, 32 below;
              call to action 11px on its own line
        right: a point per row, 24px 0, gold rule 1px x 44px, 20px gap
   ---------------------------------------------------------------------- */

.mo-cta-band.mo-visit-band { text-align: left; }

.mo-visit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1100px;
  margin-inline: auto;
  align-items: start;
}

.mo-visit-copy { text-align: left; }

.mo-visit .mo-eyebrow {
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: 0.22em;
  margin: 0 0 14px !important;
}

.mo-visit h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(32px, 3.6vw, 52px) !important;
  font-weight: 400;
  line-height: 1.05 !important;
  margin: 0 0 20px !important;
  text-align: left;
  max-width: none;
}
.mo-visit h2 em { font-style: italic; }

.mo-visit .mo-visit-lead,
.mo-visit .mo-visit-lead p {
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  margin: 0 !important;
  max-width: none;
  text-align: left;
}
.mo-visit .mo-visit-lead { margin-bottom: 32px !important; }

.mo-visit-cta {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 32px;
  border: 1px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

/* -- the points ---------------------------------------------------------- */

.mo-visit-item {
  position: relative;
  padding: 24px 0 24px 20px;
}

/* The 1px gold rule beside each point was an empty element, dropped by
   clean_html; it is drawn back here. */
.mo-visit-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 1px;
  height: 44px;
  background: var(--mo-gold);
}

.mo-visit-item h3 {
  font-family: var(--mo-serif) !important;
  font-size: 20px !important;
  font-weight: 400;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
  text-align: left;
}

.mo-visit .mo-visit-item p {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  max-width: none;
  text-align: left;
}

.mo-dark .mo-visit-lead,
.mo-dark .mo-visit-lead p,
.mo-dark .mo-visit-item p { color: rgba(255, 255, 255, 0.55) !important; }
.mo-dark .mo-visit-item h3 { color: #fff !important; }
.mo-dark .mo-visit-cta {
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.22);
}
.mo-dark .mo-visit-cta:hover { background: #fff; color: var(--mo-ink) !important; border-color: #fff; }

.mo-light .mo-visit-lead,
.mo-light .mo-visit-lead p,
.mo-light .mo-visit-item p { color: var(--mo-grey) !important; }
.mo-light .mo-visit-item h3 { color: var(--mo-ink) !important; }
.mo-light .mo-visit-cta {
  color: var(--mo-ink) !important;
  border-color: rgba(13, 13, 11, 0.28);
}
.mo-light .mo-visit-cta:hover { background: var(--mo-ink); color: #fff !important; border-color: var(--mo-ink); }

@media (max-width: 860px) {
  .mo-visit { grid-template-columns: 1fr; gap: 40px; }
}


/* -- the cross-link band ---------------------------------------------------
   One location pointing at the other, or a service at its sibling. A slim row:
   kicker, destination, detail line on the left, one outlined link on the right.

   ref: band 60px block, ruled top and bottom at 6%; row max 1100, gap 24
        kicker 10px/.18em gold, 10px below
        h3 Cormorant, white; detail 13px/300 at 55%
        link 11px/.15em, 14px 32px, 1px border at 22%, no wrap
   ---------------------------------------------------------------------- */

.mo-cta-band.mo-xlink-band {
  padding-block: 60px !important;
  text-align: left;
}
.mo-cta-band.mo-xlink-band.mo-dark {
  background: #111110;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mo-xlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 1100px;
  margin-inline: auto;
}

.mo-xlink-copy { text-align: left; }

.mo-xlink .mo-eyebrow {
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0 0 10px !important;
}

.mo-xlink h3 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 400;
  line-height: 1.15 !important;
  margin: 0 !important;
  text-align: left;
}

.mo-xlink p.mo-xlink-meta {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  margin: 6px 0 0 !important;
  max-width: none;
  text-align: left;
}

.mo-xlink-cta {
  flex-shrink: 0;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 14px 32px;
  border: 1px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.mo-dark .mo-xlink-meta { color: rgba(255, 255, 255, 0.55) !important; }
.mo-dark .mo-xlink-cta {
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.22);
}
.mo-dark .mo-xlink-cta:hover { background: #fff; color: var(--mo-ink) !important; border-color: #fff; }

.mo-light .mo-xlink-meta { color: var(--mo-grey) !important; }
.mo-light .mo-xlink-cta {
  color: var(--mo-ink) !important;
  border-color: rgba(13, 13, 11, 0.28);
}
.mo-light .mo-xlink-cta:hover { background: var(--mo-ink); color: #fff !important; border-color: var(--mo-ink); }

@media (max-width: 700px) {
  .mo-xlink { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   Handoff components
   --------------------------------------------------------------------------
   clean_html strips the generated ms… hash classes, where the handoff kept its
   layout, but it keeps the names the handoff gave its components — and those
   names recur across the site. Styling them by name fixes every page that uses
   one, rather than one page at a time.

   These are ports, not copies: the handoff's values are expressed in the
   rebuild's tokens so a band's tone still carries.
   ========================================================================== */

/* -- the handoff's own token bridge ---------------------------------------
   The handoff carries a second token set — --mn-strong, --mn-muted,
   --mn-accent, --mn-accent2 — which its components read for copy colour. It
   sets them by repeating every band's generated class in four enormous
   selector lists, one per ground.

   The rebuild already knows a band's ground: it is on the row as .mo-dark or
   .mo-light. Defining the tokens there instead means every component that
   reads them picks up the right values from the band it is in, and none of
   those lists has to come across.
   ---------------------------------------------------------------------- */

.mo-dark {
  --mn-strong: #fff;
  --mn-muted: rgba(255, 255, 255, 0.49);
  --mn-accent: var(--mo-gold);
  --mn-accent2: var(--mo-gold-bright);
}

.mo-light {
  --mn-strong: var(--mo-ink);
  --mn-muted: rgba(13, 13, 11, 0.61);
  --mn-accent: var(--mo-gold-on-cream);
  --mn-accent2: #79652e;
}

/* The handoff lightens the accents very slightly on white rather than cream. */
.mo-light.mo-ground-white {
  --mn-muted: rgba(13, 13, 11, 0.6);
  --mn-accent: #836b40;
  --mn-accent2: #816c31;
}

/* -- monaco-quick-answer: the answer card — 22 pages ----------------------
   The widest-reach component on the site. A cream card with a gold left edge
   carrying a label, the question and the answer; .monaco-answer-on-ink is the
   handoff's dark variant.

   ref: card max 820, padding 32px 40px, 4px gold left border
        label 10px/.22em; question Cormorant clamp(20,2.2vw,26)
        answer 15px/300/1.8; helper 14px
   ---------------------------------------------------------------------- */

.monaco-quick-answer {
  max-width: 820px;
  margin: 0 auto;
  background: #f7f3eb;
  border-left: 4px solid var(--mo-gold);
  padding: 32px 40px;
  text-align: left;
}

.panel-grid .monaco-answer-label {
  font-family: var(--mo-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-on-cream) !important;
  margin: 0 0 12px !important;
  max-width: none;
}

.panel-grid .monaco-answer-question {
  font-family: var(--mo-serif) !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--mo-ink) !important;
  margin: 0 0 16px !important;
  text-align: left;
}

.panel-grid .monaco-answer-text,
.panel-grid .monaco-answer-helper {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: rgba(13, 13, 11, 0.85) !important;
  margin: 0 0 12px !important;
  max-width: none;
}
.panel-grid .monaco-answer-helper { font-size: 14px !important; margin: 12px 0 0 !important; }
.panel-grid .monaco-answer-text:last-child { margin-bottom: 0 !important; }

/* The handoff's dark variant, and the same treatment for an answer that kept
   no card of its own and sits directly on an ink band. */
.monaco-answer-on-ink .monaco-answer-label,
.mo-dark .monaco-answer-label { color: var(--mn-accent) !important; }
.monaco-answer-on-ink .monaco-answer-question,
.mo-dark .monaco-answer-question { color: var(--mn-strong) !important; }
.monaco-answer-on-ink .monaco-answer-text,
.monaco-answer-on-ink .monaco-answer-helper,
.mo-dark .monaco-answer-text,
.mo-dark .monaco-answer-helper { color: rgba(255, 255, 255, 0.86) !important; }

/* …but a quick-answer card keeps its cream ground on any band, so inside one
   the light colours stand. */
.mo-dark .monaco-quick-answer .monaco-answer-label { color: var(--mo-gold-on-cream) !important; }
.mo-dark .monaco-quick-answer .monaco-answer-question { color: var(--mo-ink) !important; }
.mo-dark .monaco-quick-answer .monaco-answer-text,
.mo-dark .monaco-quick-answer .monaco-answer-helper { color: rgba(13, 13, 11, 0.85) !important; }

.monaco-answer-strip { text-align: left; }

/* The intro paragraphs the handoff marks up for voice search underline their
   links in gold rather than taking the band's link colour. */
.panel-grid [class*="speakable-"] a,
.panel-grid [class*="aio-answer"] a {
  color: var(--mn-accent2) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--mn-accent2) 55%, transparent);
}


/* -- monaco-fin: the financing panel — 12 pages ---------------------------
   The wrapper survived clean_html on some pages and not others, so every leaf
   rule stands on its own and the card appears wherever the wrapper is left.
   ref: 720px card, cream, gold hairline with a 4px gold left edge
        eyebrow .7rem/.2em; heading Cormorant clamp(1.35,2.4vw,1.75rem)
        copy .95rem/1.65; CTA min-height 48, .85rem 1.75rem; terms .78rem
   ---------------------------------------------------------------------- */

.monaco-fin {
  max-width: 720px;
  margin: clamp(2rem, 5vw, 3.5rem) auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: #faf7f1;
  border: 1px solid rgba(184, 151, 90, 0.35);
  border-left: 4px solid var(--mo-gold);
  text-align: left;
}

.panel-grid p.monaco-fin-eyebrow {
  font-family: var(--mo-sans) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: #9a7c44 !important;
  margin: 0 0 0.6rem !important;
  max-width: none;
}

.panel-grid .monaco-fin-h {
  font-family: var(--mo-serif) !important;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--mo-ink) !important;
  margin: 0 0 0.6rem !important;
  text-align: left;
}

.panel-grid p.monaco-fin-d {
  font-family: var(--mo-sans) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: rgba(13, 13, 11, 0.82) !important;
  margin: 0 0 1.15rem !important;
  max-width: none;
}

.panel-grid .monaco-fin-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.75rem;
  font-family: var(--mo-sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--mo-gold);
  border: 1px solid var(--mo-gold);
  color: var(--mo-ink) !important;
  transition: background 0.2s, border-color 0.2s;
}
.panel-grid .monaco-fin-cta:hover,
.panel-grid .monaco-fin-cta:focus-visible {
  background: var(--mo-gold-bright);
  border-color: var(--mo-gold-bright);
}

.panel-grid p.monaco-fin-terms {
  font-family: var(--mo-sans) !important;
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  color: rgba(13, 13, 11, 0.68) !important;
  margin: 0.9rem 0 0 !important;
  max-width: none;
}

/* The financing panel comes in two forms, and which one a page uses decides
   the copy colour — the band underneath does not.
 
   Most pages wrap it in a .monaco-fin card, which paints its own #faf7f1 on
   any band and therefore keeps ink copy. The extensions guide has no card:
   there the panel's parts sit straight on the section, which is ink, and the
   reference colours them white (0.49 for the terms line, measured from it).
 
   Keying this on the row's tone alone got it backwards on the four carded
   pages — white lettering on a cream card — so the tone rule below is
   immediately taken back inside a card, the same way the quick answer above
   handles it. The heading was already wrong there before, from the .mo-dark
   heading baseline; this fixes that too. */
.mo-dark .monaco-fin-h      { color: var(--mo-on-ink) !important; }
.mo-dark p.monaco-fin-d     { color: var(--mo-on-ink) !important; }
.mo-dark p.monaco-fin-terms { color: rgba(255, 255, 255, 0.49) !important; }

.mo-dark .monaco-fin .monaco-fin-h      { color: var(--mo-ink) !important; }
.mo-dark .monaco-fin p.monaco-fin-d     { color: rgba(13, 13, 11, 0.82) !important; }
.mo-dark .monaco-fin p.monaco-fin-terms { color: rgba(13, 13, 11, 0.68) !important; }

.panel-grid .monaco-fin-offer {
  font-family: var(--mo-serif) !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--mo-gold-bright) !important;
  margin: 0 0 0.75rem !important;
}

/* The panel keeps its cream card on an ink band, so it states its own colours
   rather than inheriting the band's. */
.mo-dark .monaco-fin p,
.mo-dark .monaco-fin h2,
.mo-dark .monaco-fin h3 { color: var(--mo-ink); }


/* -- per-page hero framing -------------------------------------------------
   The reference does not frame every hero the same way. Most are full bleed
   with a focal point of their own; the extensions hub is a split — copy on the
   left, the photograph filling the right half from 869px across.

   The rebuild draws all heroes full bleed, so the split is expressed as a
   focal point instead: anchoring the image right keeps its subject in the
   right half, clear of the copy, which is what the split was for.

   Scoped by the .mw-<route> class sgv6_child_wrapper_body_class() puts on the
   body — the same hook the handoff uses for its own per-page rules.
   ---------------------------------------------------------------------- */

/* -- the extensions guide's hero: photograph in the right half -------------
   The reference does not run this photograph across the band. It pins an
   <img> into the right half — inset 868.5px from the left, object-fit cover,
   object-position 48% 50% — over a flat ink section, with the copy on the
   ink beside it.

   A row background cannot be made to do that. Shifting it right does nothing
   visible: at this band's proportions `cover` leaves 107px of horizontal
   overflow, so `background-position: right` moves the image by 6% of one
   column. And no combination of background-size and background-position
   confines it to half the band, because background-position percentages
   resolve against the overflow rather than the band, and the length form that
   would work needs a number that changes with the viewport.

   So the photograph moves to a pseudo-element that is genuinely half the band
   wide, and takes the reference's own crop. It inherits the row's
   background-image — the URL SiteOrigin writes inline — and the row itself is
   left holding an image it paints at zero size.
   ---------------------------------------------------------------------- */
.mw-hair-extensions-info-tampa .mo-hero-fullbleed {
  /* Reference: h1 and the button row share a 680 measure, which is what lets
     its three calls to action sit on one line instead of wrapping to two. */
  --mo-hero-measure: 680px;
  /* 88px against that measure is what breaks the headline after "Fuller.",
     the two-line setting the reference has; the site default caps at 80,
     where it fits on one line. Same shape as that default so it still scales
     down — a flat 88px left the headline at 88px on a 375px phone. */
  --mo-fs-display: clamp(38px, 5.1vw, 88px);
  background-color: var(--mo-ink) !important;
}

/* Narrow viewports stack, as the reference's do: the photograph takes a band
   across the top and the copy sits on flat ink below it, rather than being
   read off the picture itself. Same two pseudo-elements, turned through
   ninety degrees. */
@media (max-width: 860px) {

  .mw-hair-extensions-info-tampa .mo-hero-fullbleed {
    padding-top: 420px !important;
  }

  .mw-hair-extensions-info-tampa .mo-hero-fullbleed::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 380px;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 48% 22%;
    z-index: 0;
  }

  .mw-hair-extensions-info-tampa .mo-hero-fullbleed::after {
    background: linear-gradient(
      to bottom,
      rgba(13, 13, 11, 0) 0 340px,
      var(--mo-ink) 380px
    );
  }
}

/* Wide viewports only. Below this the hero falls back to what every other one
   does — photograph across the band, copy over the standard scrim — because
   there is no room to stand the two side by side. */
@media (min-width: 861px) {

  .mw-hair-extensions-info-tampa .mo-hero-fullbleed::before {
    content: "";
    position: absolute;
    inset: 0 0 0 50%;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 48% 50%;
    z-index: 0;
  }

  /* The row still paints its own full-bleed copy of the photograph
     underneath — it has to, because ::before inherits the image from it and
     an image the row does not paint cannot be inherited. Suppressing it with
     `background-size: 0` made the whole band rasterise white, so the left
     half is covered instead.

     The stop is hard, as the reference's is: its overlay element measures
     0x0 and paints nothing, so the photograph meets the ink at an edge. */
  .mw-hair-extensions-info-tampa .mo-hero-fullbleed::after {
    background: linear-gradient(
      to right,
      var(--mo-ink) 0 50%,
      rgba(13, 13, 11, 0) 50%
    );
  }
}

/* -- the method chooser: a tabbed set --------------------------------------
   ref: tablist a row of buttons under the heading; one panel visible, laid out
        as two columns of 526 with a 48px gap
   ---------------------------------------------------------------------- */

.mo-methods-band { padding-block: clamp(72px, 10vw, 122px) !important; }
.mo-methods { max-width: 1100px; margin-inline: auto; }

.mo-methods .mo-eyebrow {
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0 0 10px !important;
}

.mo-methods h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(30px, 3.6vw, 52px) !important;
  font-weight: 400;
  line-height: 1.1 !important;
  margin: 0 0 24px !important;
  text-align: left;
}

.panel-grid .mo-methods-lead {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: var(--mn-muted) !important;
  margin: 0 0 24px !important;
  max-width: 640px;
}

.mo-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 40px;
  border-bottom: 1px solid color-mix(in srgb, var(--mn-muted) 28%, transparent);
}

.mo-tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 22px;
  font-family: var(--mo-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mn-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.mo-tab:hover { color: var(--mn-strong); }
.mo-tab[aria-selected="true"] {
  color: var(--mn-accent);
  border-bottom-color: var(--mn-accent);
}
.mo-tab:focus-visible { outline: 2px solid var(--mn-accent); outline-offset: -2px; }

/* One panel at a time. [hidden] alone loses to the display the panel would
   otherwise take, so it is stated. */
.mo-tabpanel[hidden] { display: none; }

.mo-tabpanel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.mo-tabpanel figure { margin: 0; }
.mo-tabpanel img {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}

.mo-tabpanel h3 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 400;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  text-align: left;
}

.panel-grid .mo-tabpanel p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: var(--mn-muted) !important;
  margin: 0 0 14px !important;
  max-width: none;
}

.mo-tabpanel .cp-method-more {
  display: inline-block;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mn-accent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--mn-accent) 45%, transparent);
  padding-bottom: 3px;
}
.mo-tabpanel .cp-method-more:hover { color: var(--mn-strong) !important; }

@media (max-width: 860px) {
  .mo-tabpanel { grid-template-columns: 1fr; gap: 24px; }
}

/* -- the stat strip — 7 pages ---------------------------------------------
   ref: band 19px block; row flex, space-between; figure 22px, label 11px
   ---------------------------------------------------------------------- */

/* The band's own padding is set further down by a rule written for the older
   proof-strip markup, which carries its padding on the cells. A composed strip
   does not, so it asks for the block padding here — and out-weighs that rule,
   which is three elements and two classes deep. */
body article .panel-grid > div.mo-stat-band:has(.mo-stats) {
  padding-block: 20px !important;
}

.mo-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
}

.mo-stat { flex: 1 1 auto; min-width: 160px; }

.mo-stat-value {
  font-family: var(--mo-serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  color: var(--mn-strong);
}

.mo-stat-label {
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--mn-muted);
  margin-top: 4px;
}

.mo-stat-note {
  font-family: var(--mo-sans);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mn-muted);
  margin-top: 4px;
}

/* A strip of three or four short pairs reads better spread out; a longer set
   with a line of detail each wants columns. */
.mo-stats:has(.mo-stat-note) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px 40px;
}

/* -- the related-pages grid — 8 bands on 7 pages --------------------------
   ref: four columns of 225, 20px gaps, cards padded 28
   ---------------------------------------------------------------------- */

.mo-linkcards-band { padding-block: clamp(64px, 8vw, 80px) clamp(72px, 9vw, 100px) !important; }
.mo-linkcards { max-width: 960px; margin-inline: auto; }

.mo-linkcards-head { margin-bottom: 36px; }
.mo-linkcards-head .mo-eyebrow {
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: 0.2em;
  margin: 0 0 10px !important;
}
.mo-linkcards-head h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 400;
  line-height: 1.15 !important;
  margin: 0 !important;
  text-align: left;
}

.mo-linkcards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

.mo-linkcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--mn-muted) 22%, transparent);
  transition: border-color 0.2s, background 0.2s;
}
.mo-linkcard:hover { border-color: var(--mn-accent); }

.mo-linkcard-kicker {
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mn-accent) !important;
}

.mo-linkcard-title {
  font-family: var(--mo-serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--mn-strong) !important;
}

.mo-linkcard-note {
  font-family: var(--mo-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--mn-muted) !important;
}

/* -- hest-gallery-*: the results mosaic -----------------------------------
   One tall photograph beside a two-by-two block of smaller ones. The markup
   survived the conversion whole, so this is only the grid it was written for.

   ref: outer two columns of 547, 6px gaps, 684 tall; the quad nests 271s
   ---------------------------------------------------------------------- */

.hest-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.hest-gallery-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.hest-gallery-hero,
.hest-gallery-quad-item {
  position: relative;
  overflow: hidden;
  background: #111110;
}

.hest-gallery-hero { aspect-ratio: 547 / 684; }
.hest-gallery-quad-item { aspect-ratio: 1; }

.hest-gallery-grid figure { margin: 0; height: 100%; }

.hest-gallery-grid img,
.hest-gallery-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

@media (max-width: 700px) {
  .hest-gallery-grid { grid-template-columns: 1fr; }
}

/* -- monaco-review-*: review attribution — 8 pages ------------------------ */

.monaco-quote-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.monaco-review-attrib {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.monaco-review-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
  text-align: right;
}

.panel-grid .monaco-review-source-label {
  font-family: var(--mo-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  line-height: 1.6 !important;
  margin: 0 !important;
  white-space: nowrap;
  color: var(--mn-strong) !important;
  max-width: none;
}
.panel-grid .monaco-review-source a { color: var(--mn-strong) !important; }

/* -- mn-price-* / mn-invest-*: the price and investment lists — 6 pages ----
   Written against white on ink throughout; expressed here in --mn-* so the
   same list reads correctly on a cream band too.
   ---------------------------------------------------------------------- */

.mn-price-list,
.mn-invest-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mn-invest-list { margin: 0 auto 28px; max-width: 640px; text-align: left; }

.mn-price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mn-muted) 22%, transparent);
}

.mn-invest-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--mn-muted) 30%, transparent);
}
.mn-invest-row:last-child { border-bottom: 0; }

.panel-grid .mn-price-service,
.panel-grid .mn-invest-service {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.4 !important;
  color: var(--mn-strong) !important;
  max-width: none;
}

.panel-grid .mn-price-from,
.panel-grid .mn-invest-from {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--mn-accent) !important;
  white-space: nowrap;
  text-align: right;
}

.panel-grid .mn-price-word,
.panel-grid .mn-invest-word {
  font-size: 10px !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mn-muted) !important;
  margin-right: 6px;
}

.panel-grid .mn-price-range,
.panel-grid .mn-invest-note,
.panel-grid .mn-invest-stamp,
.panel-grid .mn-price-updated,
.panel-grid .mn-price-investment {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: var(--mn-muted) !important;
  max-width: 640px;
}
.panel-grid .mn-price-range { grid-column: 1 / -1; margin-top: 4px !important; }
.panel-grid .mn-invest-note { font-size: 14px !important; margin: 0 auto 18px !important; }
.panel-grid .mn-invest-stamp { margin: 0 auto 32px !important; }
.panel-grid .mn-price-investment strong,
.panel-grid .mn-price-updated strong { color: var(--mn-strong); font-weight: 500; }

/* A <details> the handoff opens to reveal the full table. */
.mn-price-summary {
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mn-accent);
  cursor: pointer;
  padding: 12px 0;
  list-style: none;
}
.mn-price-summary::-webkit-details-marker { display: none; }

/* The price tables the <details> reveals: the handoff hides the header row and
   labels each cell from a data attribute, so a row reads as service / level /
   price on one line. */
.panel-grid .mn-price-caption {
  caption-side: top;
  font-family: var(--mo-sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mn-accent) !important;
  text-align: left;
  padding: 0 0 10px;
}

.mn-price-table { width: 100%; border-collapse: collapse; }
.mn-price-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mn-price-table tr { border-bottom: 1px solid color-mix(in srgb, var(--mn-muted) 20%, transparent); }
.mn-price-table th[scope="row"] { text-align: left; color: var(--mn-strong); }
.panel-grid .mn-price-table td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  color: var(--mn-accent) !important;
  border: 0;
}
.mn-price-table td::before {
  content: attr(data-level);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mn-muted);
  text-align: left;
  flex: 1 1 auto;
}
.mn-price-summary::after { content: " +"; font-size: 13px; }
.mn-price-details[open] .mn-price-summary::after { content: " \2212"; }

/* -- mn-cc-*: the colour-correction pricing note — 2 pages ---------------- */

.panel-grid .mn-cc-eyebrow {
  font-family: var(--mo-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mn-accent) !important;
  margin: 0 0 0.8rem !important;
  max-width: none;
}

.panel-grid .mn-cc-copy {
  font-family: var(--mo-sans) !important;
  font-size: 1rem !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: var(--mn-muted) !important;
  max-width: 62ch;
  margin: 0 !important;
}
.panel-grid .mn-cc-copy a { color: var(--mn-strong) !important; text-decoration: underline; text-underline-offset: 3px; }

.mn-fit-plain { margin-bottom: 2rem; }

.mn-medical-scope {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--mn-muted) 30%, transparent);
  color: var(--mn-muted);
}


/* -- the review grid ------------------------------------------------------
   Thirty-six bands are a grid of Google reviews.

   ref: band 120px 80px; content 1200; head kicker 11px + h2 46px, 87 tall
        three columns, 1px gaps, cards padded 36px 32px
        source 10px/.16em gold; stars 13px gold; quote 14px/1.8
        name 12px; location 11px muted
   ---------------------------------------------------------------------- */

.mo-review-band { padding-block: clamp(72px, 10vw, 120px) !important; }

.mo-reviews-head { margin-bottom: 72px; }

.mo-reviews-head .mo-eyebrow {
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0 0 10px !important;
}

.mo-reviews-head h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  font-weight: 400;
  line-height: 1.1 !important;
  margin: 0 !important;
  text-align: left;
}

.mo-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
}

.mo-review {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 36px 32px;
}

.mo-review-band.mo-dark .mo-review { background: rgba(255, 255, 255, 0.03); }
.mo-review-band.mo-light .mo-review { background: #fff; }

/* The reference sets these larger than a caption: the source and the rating
   both at body size, the quote a step above it. */
.mo-review p.mo-review-source {
  font-family: var(--mo-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em;
  line-height: 1.7 !important;
  margin: 0 0 14px !important;
  max-width: none;
}

.mo-review p.mo-review-stars {
  font-size: 16px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.06em;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 16px !important;
  max-width: none;
}

.mo-review blockquote.mo-review-quote {
  font-family: var(--mo-sans) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  margin: 0 0 24px !important;
  padding: 0;
  border: 0;
  quotes: none;
}

.mo-review figcaption.mo-review-by {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mo-review .mo-review-name {
  font-family: var(--mo-sans);
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1.7;
}

.mo-review .mo-review-where {
  font-family: var(--mo-sans);
  font-size: 13px;
  line-height: 1.7;
}

.mo-review-band.mo-dark .mo-review-source { color: var(--mo-gold-fg) !important; }
.mo-review-band.mo-dark .mo-review-quote { color: rgba(255, 255, 255, 0.82) !important; }
.mo-review-band.mo-dark .mo-review-name { color: #fff; }
.mo-review-band.mo-dark .mo-review-where { color: rgba(255, 255, 255, 0.49); }

.mo-review-band.mo-light .mo-review-source { color: var(--mo-gold-on-cream) !important; }
.mo-review-band.mo-light .mo-review-quote { color: rgb(58, 53, 48) !important; }
.mo-review-band.mo-light .mo-review-name { color: var(--mo-ink); }
.mo-review-band.mo-light .mo-review-where { color: #6b6560; }

/* Where to read the rest of them, under the grid. */
.mo-review-band p.mo-review-foot {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  margin: 56px 0 0 !important;
  max-width: none;
}
.mo-review-band.mo-dark .mo-review-foot { color: rgba(255, 255, 255, 0.55) !important; }
.mo-review-band.mo-light .mo-review-foot { color: var(--mo-grey) !important; }

@media (max-width: 1000px) {
  .mo-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mo-review-grid { grid-template-columns: minmax(0, 1fr); }
}


/* -- a lead line, then a pair of cards -------------------------------------
   ref: band 60px 80px; lead 800 wide, 15px, centred
        grid two columns of 399, gap 2, cards padded 36px 32px
        kicker 10px/.18em gold; h2 22px; list 14px/1.75
   ---------------------------------------------------------------------- */

.mo-pair-band { padding-block: 60px !important; }

.mo-pair { max-width: 800px; margin-inline: auto; }

/* The lead is centred over the pair and sits close above them. */
.mo-pair p.mo-pair-lead {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  text-align: center;
  margin: 0 0 16px !important;
  max-width: none;
}

.mo-pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.mo-pair-card { padding: 36px 32px; }

.mo-pair-band.mo-dark .mo-pair-card { background: rgba(255, 255, 255, 0.04); }
.mo-pair-band.mo-light .mo-pair-card { background: #fff; }

.mo-pair-card p.mo-pair-kicker {
  font-family: var(--mo-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  margin: 0 0 10px !important;
  max-width: none;
}

.mo-pair-card h2 {
  font-family: var(--mo-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  margin: 0 0 12px !important;
  text-align: left;
}

.mo-pair-card p.mo-pair-list {
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  margin: 0 !important;
  max-width: none;
}

.mo-pair-band.mo-dark .mo-pair-kicker { color: var(--mo-gold-fg) !important; }
.mo-pair-band.mo-dark .mo-pair-card h2 { color: #fff !important; }
.mo-pair-band.mo-dark .mo-pair-list { color: rgba(255, 255, 255, 0.7) !important; }

.mo-pair-band.mo-light .mo-pair-kicker { color: var(--mo-gold-on-cream) !important; }
.mo-pair-band.mo-light .mo-pair-card h2 { color: var(--mo-ink) !important; }
.mo-pair-band.mo-light .mo-pair-list { color: var(--mo-grey) !important; }

@media (max-width: 700px) {
  .mo-pair-grid { grid-template-columns: minmax(0, 1fr); }
}


/* -- a note beside its heading --------------------------------------------
   ref: heading column and note column side by side; 510/510 at 80px for the
        education band, 420/420 at 60px for the manager
   ---------------------------------------------------------------------- */

.mo-note-band { padding-block: clamp(64px, 8vw, 100px) !important; }

/* Two sizes of note. The one headed by an h3 — a person rather than a policy —
   is the smaller: a narrower pair of columns, closer together, in a shallower
   band. */
.mo-note-band:has(.mo-note-head h3) { padding-block: 80px !important; }
.mo-note:has(.mo-note-head h3) { max-width: 900px; gap: 60px; }

.mo-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 80px);
  max-width: 1100px;
  margin-inline: auto;
  align-items: start;
}

.mo-note-head .mo-eyebrow {
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0 0 10px !important;
}

.mo-note-head h2,
.mo-note-head h3 {
  font-family: var(--mo-serif) !important;
  font-weight: 400;
  line-height: 1.12 !important;
  margin: 0 !important;
  text-align: left;
}
.mo-note-head h2 { font-size: clamp(30px, 3.6vw, 52px) !important; }
.mo-note-head h3 { font-size: clamp(22px, 2.4vw, 28px) !important; }

/* The 36px gold rule under the heading was an empty element. */
.mo-note-head:not(:has(.mo-note-sub))::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--mo-gold);
  margin-top: 24px;
}

.mo-note-head p.mo-note-sub {
  font-family: var(--mo-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  margin: 10px 0 0 !important;
  max-width: none;
}

.mo-note .mo-note-body p {
  font-family: var(--mo-sans) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.85 !important;
  margin: 0 0 1em !important;
  max-width: none;
}
.mo-note .mo-note-body p:last-child { margin-bottom: 0 !important; }

.mo-note-band.mo-dark .mo-note-sub { color: var(--mo-gold-fg) !important; }
.mo-note-band.mo-light .mo-note-sub { color: var(--mo-gold-on-cream) !important; }

@media (max-width: 800px) {
  .mo-note { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}


/* -- the stylist grid -----------------------------------------------------
   The team page's two bands, one per salon. The cards are rendered from the
   staff records by [mo_staff_grid]; this dresses them.

   ref: band 100px 80px; content 1200
        head kicker 11px gold, h2 52px, 36x1 gold rule under, 106 tall
        grid five columns, 3px gaps, cards on white
        photo 238x317 cover; copy padded 28px 24px 32px
        level 10px/.18em gold; name Cormorant 22px ink
        bio 13px/1.8 at #555; specialities 12px, its label gold
        handle 11px/.1em gold
   ---------------------------------------------------------------------- */

.mo-staff-band { padding-block: clamp(64px, 10vw, 100px) !important; }

.mo-staff-head { margin-bottom: 60px; }

.mo-staff-head .mo-eyebrow {
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0.18em;
  margin: 0 0 10px !important;
}

.mo-staff-head h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 400;
  line-height: 1.08 !important;
  margin: 0 !important;
  text-align: left;
}

/* The rule under the heading was an empty element in the handoff. */
.mo-staff-head::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  background: var(--mo-gold);
  margin-top: 24px;
}

/* minmax(0, 1fr), not 1fr: a handle like @wally_quevedo_tampa_florida is one
   unbroken word, and a plain 1fr track will not shrink below its content, so
   one column stole width from the rest. */
.mo-staff-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  align-items: stretch;
}

/* The card is white whichever tone the band is, so it states its own copy
   colour rather than inheriting the band's — otherwise anything inside it that
   has no rule of its own comes out white on white. */
.mo-staff-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--mo-ink);
}

/* An inherited colour never beats a rule that matches the element itself, so
   `.mo-dark p` still reached the card's paragraphs. This states it for them.
   The card's own rules carry !important and are unaffected. */
.mo-staff-card p,
.mo-staff-card h3,
.mo-staff-card span { color: var(--mo-ink); }

.mo-staff-photo {
  aspect-ratio: 238 / 317;
  overflow: hidden;
  background: #efeae1;
}

.mo-staff-photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.mo-staff-copy { padding: 28px 24px 32px; }

/* salonguru.css sets `article .panel-grid p { font-size: 18px !important }`,
   which is two classes and a type — so every one of these carries the card
   class as well, or the whole card renders at body size. */

.mo-staff-copy p.mo-staff-level {
  font-family: var(--mo-sans) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: rgb(131, 107, 64) !important;
  margin: 0 0 6px !important;
  max-width: none;
}

.mo-staff-copy h3.mo-staff-name {
  font-family: var(--mo-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--mo-ink) !important;
  margin: 0 0 12px !important;
  text-align: left;
}

.mo-staff-copy p.mo-staff-bio {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: rgb(58, 53, 48) !important;
  margin: 0 0 14px !important;
  max-width: none;
}

.mo-staff-copy p.mo-staff-specialties {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: rgb(107, 101, 96) !important;
  margin: 0 0 14px !important;
  max-width: none;
}
.mo-staff-copy p.mo-staff-specialties span { color: rgb(131, 107, 64); }

.mo-staff-copy p.mo-staff-links {
  font-size: 11px !important;
  line-height: 1.7 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: auto 0 0 !important;
  max-width: none;
}

.mo-staff-copy .mo-staff-insta,
.mo-staff-copy .mo-staff-more {
  display: inline-block;
  overflow-wrap: anywhere;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: rgb(131, 107, 64) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.mo-staff-copy .mo-staff-insta:hover,
.mo-staff-copy .mo-staff-more:hover { border-bottom-color: rgb(131, 107, 64); }
.mo-staff-copy .mo-staff-more { text-transform: uppercase; letter-spacing: 0.14em; }

/* On the ink band the cards keep their white ground, so only the head flips. */
.mo-staff-band.mo-dark .mo-staff-head h2 { color: #fff !important; }
.mo-staff-band.mo-dark .mo-staff-head .mo-eyebrow { color: var(--mo-gold-fg) !important; }

@media (max-width: 1100px) {
  .mo-staff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .mo-staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-staff-copy { padding: 20px 16px 24px; }
}


/* -- the numbered service index -------------------------------------------
   Closes both contact pages: what this location does, one row per service.

   ref: band padding 100px 0; head and list both 1040 wide inside 1200
        head flex, align-end; kicker 9px/.22em gold 14px below;
        h2 clamp to 44px; Book Now gold, ink, 13px 28px, 10px/.18em
        row grid 48px / 1fr / auto, gap clamp(16,3vw,40),
        padding clamp(20,2.5vw,28) clamp(16,3vw,32), rule under at 8%
        number Cormorant 13px at 22%; kicker 9px/.2em gold;
        title Cormorant 26px white; line 13px/1.75 at 55%, max 560
        View 11px/.14em at 30%, slides right on hover
   ---------------------------------------------------------------------- */

.mo-prose-band.mo-svc-band { padding-block: clamp(64px, 10vw, 100px) !important; }

.mo-svc { max-width: 1040px; margin-inline: auto; }

.mo-svc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 48px;
}

.mo-svc-head .mo-eyebrow {
  font-size: 9px !important;
  font-weight: 400;
  letter-spacing: 0.22em;
  margin: 0 0 14px !important;
}

.mo-svc-head h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(30px, 3.4vw, 44px) !important;
  font-weight: 400;
  line-height: 1.1 !important;
  margin: 0 !important;
  text-align: left;
}
.mo-svc-head h2 em { font-style: italic; }

/* Two classes deep, so it outweighs the tone baseline's `.mo-dark a` — this
   button carries its own gold ground and its label is ink on both tones. */
.mo-svc-head .mo-svc-book {
  flex-shrink: 0;
  font-family: var(--mo-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 28px;
  background: var(--mo-gold);
  color: var(--mo-ink) !important;
  transition: opacity 0.2s;
}
.mo-svc-head .mo-svc-book:hover { opacity: 0.88; }

/* -- the rows ------------------------------------------------------------ */

.mo-svc-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: clamp(20px, 2.5vw, 28px) clamp(16px, 3vw, 32px);
  text-decoration: none;
  transition: background 0.2s;
}

.mo-svc-num,
.mo-svc-body,
.mo-svc-view,
.mo-svc-kicker,
.mo-svc-title,
.mo-svc-desc { display: block; }

.mo-svc-num {
  font-family: var(--mo-serif);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.mo-svc-kicker {
  font-family: var(--mo-sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mo-svc-title {
  font-family: var(--mo-serif);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  margin-bottom: 6px;
}

.mo-svc-desc {
  font-family: var(--mo-sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  max-width: 560px;
}

.mo-svc-view {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  transition: color 0.2s, transform 0.2s;
}
.mo-svc-row:hover .mo-svc-view { transform: translateX(4px); }

/* -- on ink -------------------------------------------------------------- */

.mo-dark .mo-svc-row { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.mo-dark .mo-svc-list { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.mo-dark .mo-svc-num { color: rgba(255, 255, 255, 0.61); }
.mo-dark .mo-svc-kicker { color: var(--mo-gold-fg); }
.mo-dark .mo-svc-title { color: #fff; }
.mo-dark .mo-svc-desc { color: rgba(255, 255, 255, 0.55); }
.mo-dark .mo-svc-view { color: rgba(255, 255, 255, 0.3); }
.mo-dark .mo-svc-row:hover { background: rgba(255, 255, 255, 0.03); }
.mo-dark .mo-svc-row:hover .mo-svc-num { color: var(--mo-gold-fg); }
.mo-dark .mo-svc-row:hover .mo-svc-view { color: var(--mo-gold-fg); }

/* -- on cream ------------------------------------------------------------ */

.mo-light .mo-svc-row { border-bottom: 1px solid rgba(13, 13, 11, 0.1); }
.mo-light .mo-svc-list { border-top: 1px solid rgba(13, 13, 11, 0.1); }
/* 0.61, not the 0.3 this was guessed at: measured off the reference's own
   service index, where 0.3 is reserved for the "View" prompt beside it. */
.mo-light .mo-svc-num { color: rgba(13, 13, 11, 0.61); }
.mo-light .mo-svc-kicker { color: var(--mo-gold-on-cream); }
.mo-light .mo-svc-title { color: var(--mo-ink); }
.mo-light .mo-svc-desc { color: var(--mo-grey); }
.mo-light .mo-svc-view { color: rgba(13, 13, 11, 0.5); }
.mo-light .mo-svc-row:hover { background: rgba(13, 13, 11, 0.03); }
.mo-light .mo-svc-row:hover .mo-svc-num,
.mo-light .mo-svc-row:hover .mo-svc-view { color: var(--mo-gold-on-cream); }

@media (max-width: 700px) {
  .mo-svc-row { grid-template-columns: 32px 1fr; }
  .mo-svc-view { grid-column: 2; margin-top: 10px; }
}


/* -- the contact hero ------------------------------------------------------ */
/*
 * The photograph fills the band and everything else is drawn over it: two
 * badges top right, the copy bottom left, the location card bottom right.
 * The card's address is the contact record's, so it cannot drift from the
 * strip below it.
 *
 * ref: band min-height clamp(560px, 75vh, 860px)
 *      image object-position center 20%
 *      scrim to top, .92 / .55 at 45% / .15
 *      badges top clamp(80,10vw,120) right clamp(24,6vw,80), gap 10
 *      body absolute bottom, padding clamp(40,6vw,80) clamp(24,6vw,96)
 *      copy max 760; eyebrow 11px/.26em gold; h1 clamp(44,6.5vw,84)/600/1
 *      rule 44x1 gold, 20px under; lead max 540, 1.8, 32px under
 *      card 178 wide at bottom clamp(40,6vw,80) right clamp(24,6vw,96)
 */

body article .panel-grid > div.mo-contact-hero-row {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.mo-contact-hero-row { padding: 0 !important; }

.mo-contact-hero {
  position: relative;
  min-height: clamp(560px, 75vh, 860px);
  overflow: hidden;
  background: var(--mo-ink);
  /* The copy sits at the foot of the band, where the scrim is at its darkest.
     A column that justifies to the end puts it there at the reference's size
     and still grows the band when the copy needs more room — which it does on
     a phone, where absolute positioning would strand it over the bright top
     of the photograph. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mo-contact-hero .mo-ch-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  max-width: none;
}

.mo-contact-hero .mo-ch-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 11, 0.92) 0%,
    rgba(13, 13, 11, 0.55) 45%,
    rgba(13, 13, 11, 0.15) 100%
  );
}

/* -- the pair of badges, top right --------------------------------------- */

.mo-contact-hero .mo-ch-badges {
  position: absolute;
  top: clamp(80px, 10vw, 120px);
  right: clamp(24px, 6vw, 80px);
  display: flex;
  gap: 10px;
  z-index: 2;
}

.mo-contact-hero .mo-ch-badge {
  font-family: var(--mo-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 18px;
  background: var(--mo-gold);
  /* Ink on gold, not white: the reference's own sheet asks for white and its
     contrast pass flips it, because white on gold does not carry. */
  color: var(--mo-ink) !important;
}

/* SGv6 colours links under main dark grey, which disappears on a photograph. */
.mo-contact-hero .mo-ch-badge-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: color 0.2s, border-color 0.2s;
}
.mo-contact-hero .mo-ch-badge-ghost:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6);
}

/* -- the copy, bottom left ------------------------------------------------ */

.mo-contact-hero .mo-ch-body {
  position: relative;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 96px);
  z-index: 2;
}

.mo-contact-hero .mo-ch-inner { max-width: 760px; text-align: left; }

.mo-contact-hero .mo-ch-eyebrow {
  font-family: var(--mo-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.26em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 16px !important;
  max-width: none;
}

.mo-contact-hero .mo-ch-title {
  font-family: var(--mo-serif) !important;
  font-size: clamp(44px, 6.5vw, 84px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em;
  color: #fff !important;
  margin: 0 0 20px !important;
  max-width: none;
  text-transform: none;
  /* SGv6 centres headings; this hero sets its copy against the left edge. */
  text-align: left;
}

/* salonguru.css colours every <em> under main dark grey, which is right for
   body copy and wrong for the second line of a display heading. */
.mo-contact-hero .mo-ch-title em {
  color: inherit !important;
  font-style: italic;
  font-weight: 400;
}

/* The extension lounge names what it does on a serif line under the heading,
   where the other location draws the gold rule. */
.mo-contact-hero .mo-ch-tagline {
  font-family: var(--mo-serif) !important;
  font-size: clamp(18px, 2.2vw, 26px) !important;
  font-weight: 300 !important;
  font-style: italic;
  line-height: 1.3 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  max-width: 600px;
  margin: 0 0 24px !important;
}

.mo-contact-hero .mo-ch-rule {
  width: 44px;
  height: 1px;
  background: var(--mo-gold);
  margin-bottom: 20px;
}

.mo-contact-hero .mo-ch-lead {
  font-family: var(--mo-sans) !important;
  font-size: clamp(14px, 1.5vw, 16px) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  max-width: 540px;
  margin: 0 0 32px !important;
}

.mo-contact-hero .mo-ch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mo-contact-hero .mo-ch-actions a {
  font-family: var(--mo-sans);
  font-size: 11px;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 32px;
}

.mo-contact-hero .mo-ch-book {
  background: var(--mo-gold);
  color: var(--mo-ink) !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  transition: opacity 0.2s;
}
.mo-contact-hero .mo-ch-book:hover { opacity: 0.88; }

.mo-contact-hero .mo-ch-call {
  color: #fff !important;
  letter-spacing: 0.15em;
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: background 0.25s, color 0.25s;
}
.mo-contact-hero .mo-ch-call:hover { background: #fff; color: var(--mo-ink) !important; }

/* -- the location card, bottom right -------------------------------------- */

.mo-contact-hero .mo-ch-card {
  position: absolute;
  bottom: clamp(40px, 6vw, 80px);
  right: clamp(24px, 6vw, 96px);
  background: rgba(13, 13, 11, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 151, 90, 0.45);
  padding: 16px 22px;
  z-index: 2;
}

.mo-contact-hero .mo-ch-card-label {
  font-family: var(--mo-sans) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 6px !important;
  max-width: none;
}

.mo-contact-hero .mo-ch-card-street {
  font-family: var(--mo-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #fff !important;
  margin: 0 0 4px !important;
  max-width: none;
}

/* Where the page writes the address on one line, it stays on one line. */
.mo-contact-hero .mo-ch-card-oneline {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  margin: 0 !important;
  white-space: nowrap;
}

.mo-contact-hero .mo-ch-card-town {
  font-family: var(--mo-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin: 0 !important;
  max-width: none;
}

/* Narrow enough and the card would sit on top of the buttons, so it leaves the
   corner and follows the copy, as the reference does at the same width. */
@media (max-width: 900px) {
  .mo-contact-hero .mo-ch-card {
    position: static;
    margin: 0 clamp(24px, 6vw, 96px) clamp(40px, 6vw, 80px);
  }
  /* The badges stay in their corner, so the copy starts below them. */
  .mo-contact-hero .mo-ch-body {
    padding-top: clamp(120px, 34vw, 200px);
    padding-bottom: 24px;
  }
  .mo-contact-hero .mo-ch-badges { top: 24px; right: 24px; }
  .mo-contact-hero .mo-ch-card-oneline { white-space: normal; }
}


body article .panel-grid > div.mo-contact-strip {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.mo-contact-strip {
  background: #111110;
  border-top: 1px solid rgba(184, 151, 90, 0.25);
  border-bottom: 1px solid rgba(184, 151, 90, 0.25);
  padding: 22px max(clamp(24px, 6vw, 96px), calc((100% - var(--mo-container-wide)) / 2)) !important;
}

.mo-contact-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: space-between;
  align-items: center;
}

.mo-contact-details .mo-cd-item {
  flex: 1 1 auto;
  min-width: 160px;
  padding: 8px 24px;
  /* The cell's own strut, which sets the line box an inline value sits in. */
  line-height: 1.7;
}

.mo-contact-details .mo-cd-item + .mo-cd-item {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* A linked value (phone, address) is inline in the reference, so it takes the
   cell's 27.2px line box rather than its own 22.1px one, and those two cells
   stand a little taller than the plain-text ones. Same cause here. */
.mo-contact-details .mo-cd-value:has(> a) { display: inline; }

.mo-contact-details .mo-cd-label {
  font-family: var(--mo-sans) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 5px !important;
  max-width: none;
}

.mo-contact-details .mo-cd-value,
.mo-contact-details .mo-cd-value a,
.mo-contact-details .mo-cd-value .times {
  font-family: var(--mo-sans) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #fff !important;
}

.mo-contact-details .mo-cd-value a {
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 151, 90, 0.4);
  transition: border-color 0.2s;
}
.mo-contact-details .mo-cd-value a:hover { border-bottom-color: var(--mo-gold); }

/* getContactHoursNoTable returns .theHours > .times, one row per day. */
.mo-contact-details .theHours { display: block; }

.mo-contact-details .theHours .times {
  /* The shortcode emits "Monday 9<span class=dash>-</span>9" — one text run
     with a span inside it, so it has to flow inline, not be spaced apart. */
  display: block;
  white-space: nowrap;
}

.mo-contact-details .theHours .dash { padding: 0 2px; }

.mo-contact-details .theHours .closed {
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  .mo-contact-details { gap: 20px 0; }
  .mo-contact-details .mo-cd-item { flex: 1 1 100%; padding-inline: 0; }
  .mo-contact-details .mo-cd-item + .mo-cd-item { border-left: 0; }
}


/* -- the full location panel --------------------------------------------- */
/*
 * Two columns on the ink ground, further down a contact page: the week's
 * hours and the social channels on the left, the address, phone and booking
 * actions on the right. Hours, address and phone come from the contact record.
 *
 * ref: section ink, no padding; grid 1400 centred, two 700px columns
 *      column padding 100px 96px
 *      label 10px / .26em / uppercase / gold
 *      hours row padding 14px 0, day left, time right; block 56px below
 *      street 42px/50.4 white; town 30px/51 rgba(255,255,255,.5)
 *      phone  52px/54.6 white; note 12px/20.4 rgba(255,255,255,.49)
 *      actions 11px / .18em, 22px 28px; first on gold, second on #111110
 */

body article .panel-grid > div.mo-contact-panel-row {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.mo-contact-panel-row {
  background: var(--mo-ink);
  padding: 0 !important;
}

.mo-contact-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1400px;
  margin: 0 auto;
}

.mo-contact-panel .mo-cp-col { padding: clamp(64px, 8vw, 100px) clamp(24px, 6vw, 96px); }
.mo-contact-panel .mo-cp-col:first-child { border-right: 1px solid rgba(255, 255, 255, 0.06); }

.mo-contact-panel .mo-cp-label {
  font-family: var(--mo-sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.26em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 20px !important;
  max-width: none;
}

.mo-contact-panel .mo-cp-hours { margin-bottom: 56px; }
.mo-contact-panel .mo-cp-col > .mo-cp-label:first-child { margin-bottom: 28px !important; }

/* getContactHours returns table.opening — tr.<day> > td.day + td + td, with
   a closed day collapsed into one td.closed. */
.mo-contact-panel .opening {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
}

.mo-contact-panel .opening tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* The two time cells read as one range, so nothing separates them but the
     dash below; the day cell grows and pushes them to the right edge. */
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mo-contact-panel .opening td {
  border: 0;
  padding: 0;
  font-family: var(--mo-sans) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.45);
  background: none;
}

.mo-contact-panel .opening td.day {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.04em;
}

/* The current day is the one a visitor is checking. It reads full white and
   carries the badge the theme filter adds. */
.mo-contact-panel .opening tr.is-today td { color: #fff; }

.mo-contact-panel .opening .mo-today {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--mo-ink);
  background: var(--mo-gold);
  padding: 2px 8px;
}

.mo-contact-panel .opening td + td { white-space: nowrap; }
.mo-contact-panel .opening td + td + td::before {
  content: '\2013';
  margin: 0 5px;
}

.mo-contact-panel .opening td.closed {
  color: rgba(255, 255, 255, 0.49);
  text-align: right;
}
.mo-contact-panel .opening td.closed::before { content: none; }

.mo-contact-panel .mo-cp-socials { display: flex; flex-wrap: wrap; gap: 24px; }

.mo-contact-panel .mo-cp-socials a {
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.49) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.mo-contact-panel .mo-cp-socials a:hover {
  color: #fff !important;
  border-bottom-color: var(--mo-gold);
}

/* -- right column -------------------------------------------------------- */

.mo-contact-panel .mo-cp-find { margin-bottom: 48px; }

.mo-contact-panel .mo-cp-street {
  font-family: var(--mo-serif) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #fff !important;
  margin: 0 0 6px !important;
  max-width: none;
}

.mo-contact-panel .mo-cp-town {
  font-family: var(--mo-serif) !important;
  font-size: clamp(20px, 2.2vw, 30px) !important;
  font-weight: 300 !important;
  font-style: italic;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin: 0 0 24px !important;
  max-width: none;
}

.mo-contact-panel .mo-cp-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.mo-contact-panel .mo-cp-links a {
  font-family: var(--mo-sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 10px 22px;
  transition: background 0.25s, color 0.25s;
}
.mo-contact-panel .mo-cp-links a:hover { background: #fff; color: var(--mo-ink) !important; }

.mo-contact-panel .mo-cp-links span {
  font-family: var(--mo-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.49);
}

.mo-contact-panel .mo-cp-phone {
  padding-top: 40px;
  margin-bottom: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mo-contact-panel .mo-cp-phone .mo-cp-label { margin-bottom: 16px !important; }

.mo-contact-panel .mo-cp-number a,
.mo-contact-panel .mo-cp-number {
  font-family: var(--mo-serif) !important;
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 1.05 !important;
  color: #fff !important;
  text-decoration: none;
}
.mo-contact-panel .mo-cp-number a { display: block; }

.mo-contact-panel .mo-cp-note {
  font-family: var(--mo-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.49) !important;
  margin: 8px 0 0 !important;
  max-width: none;
}

.mo-contact-panel .mo-cp-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mo-contact-panel .mo-cp-actions a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding: 22px 28px;
  transition: opacity 0.2s;
}

.mo-contact-panel .mo-cp-actions a:first-child {
  background: var(--mo-gold);
  color: var(--mo-ink) !important;
  font-weight: 600;
}
.mo-contact-panel .mo-cp-actions a + a {
  background: #111110;
  color: rgba(255, 255, 255, 0.75) !important;
}
.mo-contact-panel .mo-cp-actions a:hover { opacity: 0.88; }
.mo-contact-panel .mo-cp-actions a span:last-child { font-size: 20px; }

@media (max-width: 900px) {
  .mo-contact-panel { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. cta-band
   Dark booking band: eyebrow, serif headline, supporting line, outlined
   buttons. Booking destinations are widget data, not styling — Booknetic and
   Zenoti links are both carried through unchanged.
   -------------------------------------------------------------------------- */

.mo-cta-band {
  text-align: center;
}
/* 30 of the 77 CTA bands stand on cream, so the ground and the copy that goes
   with it sit behind the tone class; the light form is the baseline's. */
.mo-cta-band.mo-dark {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
  border-top: 1px solid var(--mo-hairline);
  border-bottom: 1px solid var(--mo-hairline);
}
.mo-cta-band h2 { margin-inline: auto; max-width: 18ch; }
.mo-cta-band p  { margin-inline: auto; max-width: 56ch; }
.mo-cta-band.mo-dark h2 { color: var(--mo-white) !important; }
.mo-cta-band.mo-dark p  { color: var(--mo-on-ink-muted); }
.mo-cta-band .so-widget-sow-button { display: inline-block; margin: 1.5em 8px 0; }

/* Gold-ground variant for the higher-emphasis booking bands. */
.mo-cta-band.mo-gold {
  background: var(--mo-gold);
  color: var(--mo-ink);
  border-color: transparent;
}
.mo-cta-band.mo-gold h2 { color: var(--mo-ink) !important; }
.mo-cta-band.mo-gold p  { color: rgba(13, 13, 11, 0.75); }
.mo-cta-band.mo-gold .so-widget-sow-button a.sowb-button,
.mo-cta-band.mo-gold .so-widget-sow-button a.ow-button-base {
  border-color: var(--mo-ink);
  color: var(--mo-ink);
}
.mo-cta-band.mo-gold .so-widget-sow-button a.sowb-button:hover,
.mo-cta-band.mo-gold .so-widget-sow-button a.ow-button-base:hover {
  background: var(--mo-ink);
  color: var(--mo-gold-fg);
}

/* --------------------------------------------------------------------------
   8. split-media
   Two-column band pairing imagery with copy; collapses to one column on
   mobile. SiteOrigin two-column row — the stacking is SiteOrigin's own.
   -------------------------------------------------------------------------- */

.mo-split-media {
  background: var(--mo-white);
  color: var(--mo-ink);
}
.mo-split-media {
  align-items: center;
  gap: var(--mo-gap);
}
.mo-split-media img {
  display: block;
  width: 100%;
  height: auto;
}
.mo-split-media h2, .mo-split-media h3 { color: var(--mo-ink) !important; }
.mo-split-media p { color: var(--mo-grey); max-width: 52ch; }
.mo-split-media a:not(.ow-button-base) { color: var(--mo-gold-fg); }

.mo-split-media.mo-cream { background: var(--mo-cream); }
.mo-split-media.mo-dark  { background: var(--mo-ink); }
.mo-split-media.mo-dark h2,
.mo-split-media.mo-dark h3 { color: var(--mo-white) !important; }
.mo-split-media.mo-dark p  { color: var(--mo-on-ink-muted); }

/* --------------------------------------------------------------------------
   9. service-card-grid
   Three-up grid of image-led service cards. Each card is an Image widget plus
   an Editor widget inside a SiteOrigin column, or a single Editor widget
   containing .mo-card markup.
   -------------------------------------------------------------------------- */

.mo-card-grid {
  background: var(--mo-cream);
  color: var(--mo-ink);
}
.mo-card-grid {
  gap: var(--mo-gap);
}

.mo-card-grid .mo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--mo-gap);
  margin-top: 2em;
}

.mo-card-grid .mo-card {
  background: var(--mo-white);
  border: 1px solid var(--mo-hairline-ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mo-card-grid .mo-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.mo-card-grid .mo-card-body { padding: clamp(20px, 3vw, 32px); }
.mo-card-grid .mo-card h3 {
  font-size: 22px;
  margin: 0 0 0.4em;
  color: var(--mo-ink) !important;
}
.mo-card-grid .mo-card p {
  color: var(--mo-grey);
  font-size: var(--mo-fs-small);
  margin: 0 0 1.2em;
}
.mo-card-grid .mo-card a.mo-card-link {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--mo-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  text-decoration: none;
}
.mo-card-grid .mo-card a.mo-card-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   10. gallery — auto-fitting result gallery, minimum 420px per cell
   Pairs with SiteOrigin's Image Grid widget or NextGen, whichever the page
   already uses.
   -------------------------------------------------------------------------- */

.mo-gallery.mo-dark {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
}

/* -- the captioned "studio" gallery --------------------------------------
   Eight gallery bands caption each photograph. The handoff gives every one of
   them its own grid — three columns at 420px on one page, four at 380px on
   another, gaps from 2px to 32px — so this is one treatment shaped by the
   number of tiles rather than eight transcriptions.

   ref: head row flex, space-between, align-items flex-end, 40px below
        kicker 10px/.22em gold, 10px below; h2 Cormorant clamp(32,4vw,52)/1.05
        links 11px/.12em, rule under in gold at 40%
        five tiles: 1.55fr 1fr at 420px, then three at 300px, 12px gaps
        caption chip bottom 20 left 20, ink at 72%, blurred, 10px 16px
   ---------------------------------------------------------------------- */

.mo-gallery .mo-studio-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.mo-gallery .mo-studio-head .mo-eyebrow {
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: 0.22em;
  margin: 0 0 10px !important;
}

.mo-gallery .mo-studio-head h2 {
  font-family: var(--mo-serif) !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 400;
  line-height: 1.05 !important;
  margin: 0 !important;
  text-align: left;
}
.mo-gallery .mo-studio-head h2 em { font-style: italic; }

.mo-gallery .mo-studio-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.mo-gallery .mo-studio-links a {
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(184, 151, 90, 0.4);
  transition: color 0.2s, border-color 0.2s;
}
.mo-gallery.mo-dark .mo-studio-links a { color: rgba(255, 255, 255, 0.55) !important; }
.mo-gallery.mo-dark .mo-studio-links a:hover { color: #fff !important; border-bottom-color: var(--mo-gold); }

/* -- the tiles ---------------------------------------------------------- */

.mo-gallery .mo-studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.mo-gallery .mo-studio-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #111110;
  aspect-ratio: 4 / 3;
}

/* Galleries shot portrait get a portrait tile, so the crop keeps the subject. */
.mo-gallery .mo-studio-grid[data-orient="portrait"] .mo-studio-tile {
  aspect-ratio: 3 / 4;
}

.mo-gallery .mo-studio-tile img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 60%;
  display: block;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.mo-gallery .mo-studio-tile:hover img { transform: scale(1.04); }

.mo-gallery .mo-studio-cap {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: var(--mo-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13, 13, 11, 0.72);
  backdrop-filter: blur(8px);
  padding: 10px 16px;
}

/* Tile counts the handoff actually uses. Five is the contact pages' shape:
   two large, then three. */
.mo-gallery .mo-studio-grid[data-tiles="2"] { grid-template-columns: 1fr 1fr; }
.mo-gallery .mo-studio-grid[data-tiles="4"] { grid-template-columns: 1fr 1fr; }
.mo-gallery .mo-studio-grid[data-tiles="3"],
.mo-gallery .mo-studio-grid[data-tiles="6"] { grid-template-columns: repeat(3, 1fr); }
.mo-gallery .mo-studio-grid[data-tiles="8"] { grid-template-columns: repeat(4, 1fr); }

.mo-gallery .mo-studio-grid[data-tiles="5"] > :nth-child(-n+2) { aspect-ratio: auto; height: 420px; }
.mo-gallery .mo-studio-grid[data-tiles="5"] > :nth-child(n+3)  { aspect-ratio: auto; height: 300px; }

/* The first row is two tiles at 1.55:1; the second is three equal ones. Those
   two track sets have no common divisor in six columns, so the grid is twelve:
   7 + 5, then 4 + 4 + 4. */
.mo-gallery .mo-studio-grid[data-tiles="5"] {
  grid-template-columns: repeat(12, 1fr);
}
.mo-gallery .mo-studio-grid[data-tiles="5"] > :nth-child(1) { grid-column: span 7; }
.mo-gallery .mo-studio-grid[data-tiles="5"] > :nth-child(2) { grid-column: span 5; }
.mo-gallery .mo-studio-grid[data-tiles="5"] > :nth-child(n+3) { grid-column: span 4; }

@media (max-width: 860px) {
  .mo-gallery .mo-studio-grid,
  .mo-gallery .mo-studio-grid[data-tiles="3"],
  .mo-gallery .mo-studio-grid[data-tiles="4"],
  .mo-gallery .mo-studio-grid[data-tiles="5"],
  .mo-gallery .mo-studio-grid[data-tiles="6"],
  .mo-gallery .mo-studio-grid[data-tiles="8"] { grid-template-columns: 1fr 1fr; }
  .mo-gallery .mo-studio-grid[data-tiles="5"] > * { grid-column: auto; height: 240px; }
}
.mo-gallery h2 { text-align: left; }
.mo-gallery.mo-dark h2 { color: var(--mo-white) !important; }

.mo-gallery .mo-grid,
.mo-gallery .sow-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 2px;
  margin-top: 2em;
}
.mo-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

.mo-gallery.mo-cream { background: var(--mo-cream); }
.mo-gallery.mo-cream h2 { color: var(--mo-ink) !important; }

/* --------------------------------------------------------------------------
   11. faq-accordion
   Styles the existing sg_faq_widget output rather than replacing it, so the
   138 sg_faq CPT entries and the plugin's FAQPage schema keep working.
   -------------------------------------------------------------------------- */

.mo-faq {
  background: var(--mo-white);
  color: var(--mo-ink);
}

.mo-faq h2 { color: var(--mo-ink) !important; text-align: left; margin-bottom: 1.2em; }

.mo-faq .sg-faq-item,
.mo-faq .faq-item {
  border-bottom: 1px solid var(--mo-hairline-ink);
}
.mo-faq .sg-faq-question,
.mo-faq .faq-question {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--mo-sans) !important;
  font-size: 18px;
  font-weight: 600;
  color: var(--mo-ink);
  background: none;
  border: 0;
  padding: 24px 48px 24px 0;
  cursor: pointer;
}
/* The +/- disclosure control from the published design. */
.mo-faq .sg-faq-question::after,
.mo-faq .faq-question::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  color: var(--mo-gold-fg);
  transition: transform 0.2s ease;
}
.mo-faq .sg-faq-item.is-open .sg-faq-question::after,
.mo-faq .faq-item.is-open .faq-question::after,
.mo-faq details[open] > summary::after { content: "–"; }

.mo-faq .sg-faq-answer,
.mo-faq .faq-answer {
  padding: 0 48px 24px 0;
  color: var(--mo-grey);
  line-height: 1.8;
}

.mo-faq.mo-cream { background: var(--mo-cream); }

/* --------------------------------------------------------------------------
   12. video-panel
   Autoplaying muted looping video beside copy. Playback attributes belong to
   the markup, not to CSS — autoplay/muted/loop/playsinline are preserved by
   the converter, and an explicit control is required on the wigs video.
   -------------------------------------------------------------------------- */

.mo-video-panel.mo-dark {
  background: var(--mo-ink);
  color: var(--mo-on-ink);
}
.mo-video-panel.mo-light { background: var(--mo-cream); color: var(--mo-ink); }
.mo-video-panel {
  align-items: center;
  gap: var(--mo-gap);
}
.mo-video-panel.mo-dark h2,
.mo-video-panel.mo-dark h3 { color: var(--mo-white) !important; }
.mo-video-panel p { max-width: 52ch; }
.mo-video-panel.mo-dark p { color: var(--mo-on-ink-muted); }

.mo-video-panel video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.mo-video-panel.mo-cream { background: var(--mo-cream); }
.mo-video-panel.mo-cream h2,
.mo-video-panel.mo-cream h3 { color: var(--mo-ink) !important; }
.mo-video-panel.mo-cream p  { color: var(--mo-grey); }

/* --------------------------------------------------------------------------
   13. stat-band

   Matched to the reference: a 70px strip of three equal columns, each with a
   24x1px gold rule above small uppercase copy, divided by hairlines.

       section  { background:#1b1412; padding:0 60px;
                  border-top/bottom: 1px solid rgba(198,167,106,.16) }
       grid     { display:grid; 3 x 1fr; max-width:1280px }
       cell     { column, centred; padding:20px 24px;
                  border-right: 1px solid rgba(184,151,90,.12) }
       rule     { 24x1px #C6A76A; margin-bottom:10px }
       text     { 12px/1.4, 500, .09em, uppercase, rgba(255,255,255,.9) }

   The converted content keeps the source's own .monaco-proof-strip-grid
   wrapper, so this targets it the way the reference does. Each column is a
   <p> here rather than a wrapper div, so the rule is a ::before on it.
   -------------------------------------------------------------------------- */

.mo-stat-band {
  border-top: 1px solid rgba(198, 167, 106, 0.16);
  border-bottom: 1px solid rgba(198, 167, 106, 0.16);
  text-align: center;
}
.mo-stat-band.mo-dark  { background: #1b1412; }
.mo-stat-band.mo-light { background: var(--mo-cream); color: var(--mo-ink); }

/* Beats both the shared band padding and SGv6's row width cap. */
body article .panel-grid > div.mo-stat-band {
  padding: 0 60px !important;
}

.mo-stat-band .monaco-proof-strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
}

.mo-stat-band .monaco-proof-strip-grid > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  margin: 0;
  border-right: 1px solid rgba(184, 151, 90, 0.12);
  font-family: var(--mo-sans);
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}
.mo-stat-band .monaco-proof-strip-grid > p:last-child { border-right: 0; }

/* The 24x1px gold rule above each figure — an empty <span> in the source,
   stripped by clean_html, so it is rebuilt here. */
.mo-stat-band .monaco-proof-strip-grid > p::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--mo-champagne);
  margin: 0 0 10px;
}

/* A leading figure in the line reads as the emphasis. */
.mo-stat-band strong,
.mo-stat-band b {
  display: block;
  font-family: var(--mo-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  color: var(--mo-gold-fg);
  letter-spacing: 0;
  margin-bottom: 0.15em;
}

@media (max-width: 767px) {
  .mo-stat-band .monaco-proof-strip-grid { grid-template-columns: 1fr; }
  .mo-stat-band .monaco-proof-strip-grid > p {
    border-right: 0;
    border-bottom: 1px solid rgba(184, 151, 90, 0.12);
  }
  .mo-stat-band .monaco-proof-strip-grid > p:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   14. link-cluster — a cta-band variant
   The "Explore More → Hair Color Hub → Balayage Tampa" navigation rows, 37 of
   them. Same band as a CTA, but the links sit as a wrapped row rather than as
   buttons.
   -------------------------------------------------------------------------- */

.mo-cta-band.mo-links p { margin-bottom: 0; }

.mo-cta-band.mo-links a {
  display: inline-block;
  margin: 0.4em 1.1em;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mo-gold-fg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.mo-cta-band.mo-links a:hover {
  border-bottom-color: var(--mo-gold);
}

/* --------------------------------------------------------------------------
   15. Mobile
   The handoff shipped a fallback stylesheet that added 28px of block padding
   to phones — the one part of the composition its own brief said not to
   touch. That bug is not reproduced here: no rule below adds block padding
   to the heroes under 768px.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .mo-hero-fullbleed {
    min-height: min(78vh, 560px);
  }
  .mo-hero-fullbleed h1,
  .mo-hero-compact h1 { max-width: none; }

  .mo-card-grid .mo-cards { grid-template-columns: 1fr; }
  .mo-card-grid .mo-card img { height: 200px; }

  .mo-gallery .mo-grid,
  .mo-gallery .sow-image-grid { grid-template-columns: 1fr; }

  .mo-split-media,
  .mo-video-panel { gap: 24px; }

  .mo-stat-band p { display: block; margin: 0.6em 0; }
  .mo-faq .sg-faq-question,
  .mo-faq .faq-question { font-size: 16px; padding-right: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-cta-band .so-widget-sow-button a.sowb-button,
  a.mo-button,
  .mo-faq .sg-faq-question::after,
  .mo-faq .faq-question::after { transition: none; }
}

/* ==========================================================================
   16. Site chrome — header, drawer, footer
   Replaces the SGv6 header/footer with the handoff design. Navigation comes
   from WordPress menus (header.php / footer.php), so the markup stays thin and
   everything here is presentation only.
   ========================================================================== */

.mo-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mo-gold);
  color: var(--mo-ink);
  padding: 12px 20px;
  z-index: 200;
}
.mo-skip:focus { left: 0; }

/* ---- header ----
   Values below are taken from the handoff's own chrome.css (the sticky bar,
   the dropdown geometry, the CTA) so the rebuilt header matches the approved
   design rather than approximating it. Its breakpoints are 900/768/480; 900 is
   the one that matters here. */

.mo-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(13, 13, 11);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: rgba(0, 0, 0, 0.45) 0 2px 24px;
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
  font-family: var(--mo-sans);
}

/* 1fr auto 1fr puts the logo dead centre whatever the menus weigh. */
.mo-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 62px;
  padding: 0 24px;
  max-width: none;
  margin: 0;
}

/* The menus hug the outer edges rather than crowding the logo. */
.mo-nav { min-width: 0; }
.mo-nav .mo-menu {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mo-nav-left  .mo-menu { justify-content: flex-start; }
.mo-nav-right .mo-menu { justify-content: flex-end; }

.mo-nav .mo-menu > li { position: relative; }

.mo-nav .mo-menu > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  /* The menu labels are already uppercase; the transform keeps them that way
     if someone retypes one in sentence case. */
  text-transform: uppercase;
  /* The reference sets the nav on the body's 1.7, which is what gives each
     item its 18.7px line and the drop-down rows their 45.7px height. SGv6's
     1.2 made every link and panel row ~5px short. */
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.mo-nav .mo-menu > li > a:hover,
.mo-nav .mo-menu > li > a:focus-visible,
.mo-nav .mo-menu > li.current-menu-item > a { color: #fff; }

/* Caret on anything with a submenu, rotating when the panel opens. */
.mo-nav .menu-item-has-children > a::after {
  content: "\25BC";
  font-size: 8px;
  opacity: 0.6;
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.2s;
}
.mo-nav .menu-item-has-children:hover > a::after,
.mo-nav .menu-item-has-children:focus-within > a::after { transform: rotate(180deg); }

/* The panel sits 12px below the bar, so an invisible bridge keeps hover alive
   while the pointer crosses the gap. */
.mo-nav .menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.mo-nav .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  min-width: 180px;
  background: rgba(13, 13, 11, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s, transform 0.18s;
  z-index: 101;
}
.mo-nav .mo-menu > li:hover > .sub-menu,
.mo-nav .mo-menu > li:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* The last two right-hand groups align to their right edge so they stay on
   screen beside the CTA. */
.mo-nav-right .mo-menu > li:nth-last-child(-n+2) > .sub-menu {
  left: auto;
  right: 0;
  transform: translateY(-6px);
}
.mo-nav-right .mo-menu > li:nth-last-child(-n+2):hover > .sub-menu,
.mo-nav-right .mo-menu > li:nth-last-child(-n+2):focus-within > .sub-menu {
  transform: translateY(0);
}

.mo-nav .sub-menu a {
  display: block;
  padding: 13px 22px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.15s, background 0.15s;
}
.mo-nav .sub-menu li:last-child > a { border-bottom: none; }

/* Drop-down rows and the Book Now button take the same line as the top row. */
.mo-nav .sub-menu a,
.mo-header .mo-book { line-height: 1.7 !important; }
.mo-nav .sub-menu a:hover,
.mo-nav .sub-menu a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.mo-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.mo-brand-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  /* The supplied wordmark is dark artwork; the published header knocks it out
     to white with this filter rather than shipping a second asset. */
  filter: brightness(0) invert(1);
}
.mo-brand-name {
  font-family: var(--mo-serif);
  font-size: 22px;
  letter-spacing: 0.16em;
  color: var(--mo-gold-fg);
  text-transform: uppercase;
}
.mo-brand-sub {
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--mo-on-ink-muted);
  text-transform: uppercase;
  margin-top: 3px;
}

.mo-header-right-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  min-width: 0;
}

/* Outlined white CTA, not gold — this is the published treatment. */
.mo-book {
  display: inline-block;
  flex: none;
  padding: 13px 28px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: transparent;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s;
}
.mo-book:hover,
.mo-book:focus-visible { background: #fff; color: rgb(13, 13, 11); }

/* ---- mobile drawer ---- */
.mo-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 11px;
  background: none;
  border: 0;
  cursor: pointer;
}
.mo-nav-toggle-bar {
  display: block;
  height: 2px;
  width: 22px;
  background: #fff;
}

.mo-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgb(13, 13, 11);
  padding: 80px 24px 40px;
  overflow-y: auto;
}
.mo-drawer[hidden] { display: none; }
.mo-drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.mo-menu-drawer,
.mo-menu-drawer .sub-menu { list-style: none; margin: 0; padding: 0; }
.mo-menu-drawer > li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mo-menu-drawer a {
  display: block;
  padding: 14px 0;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mo-menu-drawer .sub-menu a {
  padding: 11px 0 11px 16px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.7);
}
.mo-book-drawer { margin-bottom: 24px; }

/* The published build switches to the drawer at 900px. */
@media (max-width: 900px) {
  .mo-nav { display: none !important; }
  .mo-nav-toggle { display: flex; }
  .mo-header .mo-book { display: none; }
  .mo-header-inner {
    display: flex;
    justify-content: space-between;
    height: 56px;
    background: rgba(13, 13, 11, 0.97);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow: none;
  }
  .mo-header { box-shadow: none; }
  .mo-brand { flex: 0 0 auto; margin-inline: auto; }
  .mo-nav-toggle { order: -1; }
  .mo-header-right-group { flex: 0 0 44px; }
}

/* ---- footer ----
   The footer is a Page Builder layout in the 'Monaco Footer' widget area, so
   its columns are SiteOrigin rows and cells rather than markup in footer.php.
   tools/build-footer.php composes it; these rules dress it.

   ref: ink ground, 80px above and 40px below; content 1200
        five columns 288/192/192/192/192, 36px gutter
        heading 11px/.18em gold; location name Cormorant 15px/500 white
        address and phone 13px at 90%; hours 13px at 82%
        "Also serving" label 8px/.14em at 49%, its links 9px at 50%
        bottom bar 12px at 65%, ruled above
   ---------------------------------------------------------------------- */

.mo-footer {
  background: var(--mo-ink);
  color: var(--mo-on-ink-muted);
  font-family: var(--mo-sans);
  font-size: var(--mo-fs-small);
  line-height: 1.7;
}

/* Each row is full-bleed with its content centred, the same way the page
   bands work. */
.mo-footer .mo-footer-main,
.mo-footer .mo-footer-serving-row,
.mo-footer .mo-footer-bar {
  padding-inline: max(
    clamp(20px, 5vw, 40px),
    calc((100% - var(--mo-container-wide)) / 2)
  ) !important;
}

.mo-footer .mo-footer-main { padding-block: clamp(56px, 7vw, 80px) 0 !important; }
.mo-footer .mo-footer-serving-row { padding-block: 14px 0 !important; }

.mo-footer .panel-grid { margin-bottom: 0 !important; }
.mo-footer .so-panel { margin-bottom: 0 !important; }

.mo-footer a { color: var(--mo-on-ink-muted); text-decoration: none; }
.mo-footer a:hover,
.mo-footer a:focus-visible { color: var(--mo-gold-fg); }

/* -- column one ---------------------------------------------------------- */

.mo-footer-brand {
  display: inline-block;
  margin-bottom: 22px;
}

/* Sized by height rather than width: the wordmark is 1338x190, so 30px tall
   draws it about 211px wide — smaller than the header's 32px, which is the
   right order for a footer. The supplied artwork is dark, and the header knocks
   it out to white with this filter rather than shipping a second asset; the
   footer stands on the same ink, so it does the same. */
.mo-footer-logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* Only when no site logo is set: the text wordmark stacks, as the header's does. */
.mo-footer-brand .mo-brand-name,
.mo-footer-brand .mo-brand-sub { display: block; }

/* The handoff sets the footer's body copy at 90% white, which puts the blurb
   and the addresses at almost the same weight as the location names above
   them. Dropped to the muted body value so the names and the gold phone
   numbers carry the emphasis and the prose sits behind them. */
.mo-footer-blurb {
  font-size: 15px !important;
  font-weight: 300;
  line-height: 1.85 !important;
  color: var(--mo-on-ink-muted) !important;
  margin: 0 0 20px !important;
  max-width: none;
}

.mo-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

/* A 36px outlined square with a 16px icon centred in it. The icon is drawn in
   currentColor, so the link's colour carries it. */
.mo-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.82) !important;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.mo-social-icon svg { display: block; }

/* The reference brightens the rule and takes the icon to full white; it does
   not fill. A gold fill here would make three small squares the loudest thing
   in the footer. */
.mo-social-icon:hover,
.mo-social-icon:focus-visible {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5);
}

/* The play triangle is a hole in the badge, so it takes the ground behind it
   rather than a colour of its own. Only YouTube has one, which the footer does
   not currently carry. */
.mo-social-icon svg polygon { fill: var(--mo-ink); }

/* -- the two location columns -------------------------------------------- */

.mo-footer .mo-eyebrow,
.mo-footer .widget-title {
  display: block;
  font-family: var(--mo-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: var(--mo-gold-fg) !important;
  margin: 0 0 18px !important;
  max-width: none;
}

.mo-footer-locname {
  font-family: var(--mo-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--mo-white) !important;
  margin: 0 0 10px !important;
  max-width: none;
}
.mo-footer-locname a { color: var(--mo-white) !important; }

.mo-footer-addr,
.mo-footer-contact {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--mo-on-ink-muted) !important;
  margin: 0 0 10px !important;
  max-width: none;
}

.mo-footer-contact a { color: var(--mo-gold-fg) !important; }

.mo-footer-hours {
  font-size: 13px;
  line-height: 1.9;
  color: var(--mo-on-ink-muted);
}

/* -- the two menu columns ------------------------------------------------ */

.mo-footer .menu,
.mo-footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mo-footer .menu li,
.mo-footer-menu li { margin: 0 0 8px; }
.mo-footer .menu a { font-size: 13px; }

/* -- the areas also served ----------------------------------------------- */

.mo-footer-serving-label {
  font-size: 8px !important;
  letter-spacing: 0.14em;
  line-height: 1.7 !important;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.49) !important;
  margin: 0 0 6px !important;
  max-width: none;
}

.mo-footer-serving-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.mo-footer-serving-list a {
  font-size: 9px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* The dot between each area was a separate element in the handoff; it is one
   rule here instead of twenty spans. */
.mo-footer-serving-list a:not(:last-child)::after {
  content: "·";
  color: rgba(255, 255, 255, 0.32);
  margin: 0 6px;
}

/* -- the bar along the bottom -------------------------------------------- */

.mo-footer .mo-footer-bar {
  border-top: 1px solid var(--mo-hairline);
  margin-top: 14px;
  padding-block: 22px 40px !important;
}

.mo-footer .mo-footer-bar .panel-grid-cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.mo-footer-copy,
.mo-footer-legal {
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 0 !important;
  max-width: none;
}
.mo-footer-copy { letter-spacing: 0.04em; }

@media (max-width: 860px) {
  .mo-footer .mo-footer-main > .panel-grid-cell { flex: 1 1 100%; margin-bottom: 32px; }
  .mo-footer .mo-footer-bar .panel-grid-cell { justify-content: flex-start; }
}

/* The reference takes the icons to a comfortable touch target on a phone. */
@media (max-width: 767px) {
  .mo-footer-social { gap: 12px; }
  .mo-social-icon { width: 44px; height: 44px; }
}

/* -- the Bay to Bay CTA ----------------------------------------------------
   The band the handoff appends through a the_content filter, rebuilt as a
   Page Builder widget (see inc/bay-cta.php for why).

   ref @1737: section ink, padding 72px 48px, centred; title Cormorant 44/50.6
        on #f5f0e8; lead 16/25.6 at 0.82, measure 736, 28px beneath;
        actions flex, 12px gap, centred; buttons 13.6/24 padding, 12.48px,
        0.13em, 600, square — first filled gold with ink lettering, the rest
        outlined in cream at 45%.
   ---------------------------------------------------------------------- */

/* The section paints its own ground and padding, so the row carries neither
   and the band is not inset twice. */
.mo-bay-cta.panel-row-style,
.mo-bay-cta > .panel-grid-cell,
.mo-bay-cta .so-panel { padding: 0 !important; margin-bottom: 0 !important; }

.monaco-bay-cta {
  background: var(--mo-ink);
  padding: clamp(48px, 6vw, 72px) clamp(24px, 3vw, 48px);
  text-align: center;
}

.monaco-bay-cta .monaco-bay-cta-title {
  /* !important because salonguru.css sets the heading family on `main h2`
     with one of its own, which outranks a two-class selector. */
  font-family: var(--mo-serif) !important;
  font-size: clamp(30px, 2.6vw, 44px) !important;
  line-height: 1.15 !important;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--mo-cream) !important;
  margin: 0 0 12px !important;
  text-align: center;
  max-width: none;
}

.monaco-bay-cta .monaco-bay-cta-lead {
  font-family: var(--mo-sans);
  font-size: 16px !important;
  line-height: 1.6;
  color: rgba(245, 240, 232, 0.82) !important;
  max-width: 736px;
  margin: 0 auto 28px !important;
}

.monaco-bay-cta .monaco-bay-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0;
}

.monaco-bay-cta .monaco-appt-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13.6px 24px;
  font-family: var(--mo-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

/* Whichever action comes first is the filled one: a page with no booking
   destination leads with CALL rather than a row of outlines and no primary. */
.monaco-bay-cta .monaco-appt-action--primary {
  background: var(--mo-gold);
  border: 1px solid var(--mo-gold);
  color: var(--mo-ink) !important;
}

.monaco-bay-cta .monaco-appt-action--ghost {
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.45);
  color: var(--mo-cream) !important;
}

.monaco-bay-cta .monaco-appt-action--primary:hover,
.monaco-bay-cta .monaco-appt-action--primary:focus-visible {
  background: var(--mo-gold-bright);
  border-color: var(--mo-gold-bright);
}

.monaco-bay-cta .monaco-appt-action--ghost:hover,
.monaco-bay-cta .monaco-appt-action--ghost:focus-visible {
  border-color: var(--mo-cream);
}