/*
Theme Name: Connextus Theme
Theme URI: https://connextus.com.au
Author: Connextus
Description: Multi-brand theme for Connextus (strategic advisory) and its styling venture, Lara's Wardrobe. Every colour, font pairing, logo, hero and contact detail is editable from Theme Settings → Customize — no page builder, no database schema. Every section of the Connextus homepage and the Lara's Wardrobe page is editable, re-orderable and show/hide-able from wp-admin → Site Settings → Pages, no code required.
Version: 2.7.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cnx-theme
*/

/* =========================================================================
   This file only carries the STATIC fallback design tokens (used if the
   Customizer has never been saved / for editors that read style.css).
   The tokens that actually render on the front end are generated live by
   inc/customizer.php -> cnx_customizer_css_vars() and injected as an
   inline stylesheet after this file, so Customizer changes always win.
   ========================================================================= */

:root {
  /* Connextus / Lara's Wardrobe shared brand palette */
  --color-merlot: #520120; /* primary — headings, nav */
  --color-power-suit: #fa262a; /* accent — CTAs only */
  --color-serenity: #b4dbe1; /* soft accent, dark-bg text */
  --color-silk: #fbf7f7; /* background */
  --color-ink: #000d1c; /* dark sections, body text */
  --color-greige: #d7d4d4; /* borders / rules */
  --color-slate: #697278; /* muted text */

  --font-heading: "Lato", system-ui, -apple-system, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, sans-serif;
  --font-heading-lw: "EB Garamond", serif;
  --heading-weight: 800;

  --radius-none: 0px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --measure: 65ch;
  --max-width: 1280px;

  /* Motion timing shared by hero entrances, scroll reveals and the marquee —
     kept as tokens so the "feel" stays consistent everywhere it's used. */
  --cnx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cnx-reveal-y: 24px;
}

/* Anchor targets (FAQ, packages, contact, etc.) shouldn't hide behind the
   fixed header when a nav link or "skip to" jump scrolls to them. */
[id] {
  scroll-margin-top: 6rem;
}

/* Respect visitors who've asked for less motion: collapse every animation/
   transition to effectively instant rather than removing them outright, so
   layout and stagger timing stay correct without any extra CSS branches. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Elegant serif treatment for Lara's Wardrobe, when enabled from the
   Customizer (Typography → "Always use the elegant serif style…").
   Applied at the BODY level (cnx_body_classes() in functions.php adds
   .cnx-wardrobe-page there) so it covers the header and footer chrome
   too, not just the page content — previously this only wrapped the
   content between get_header()/get_footer(), so the nav and footer kept
   the site-wide font even on this page. The content wrapper div in
   page-laras-wardrobe.php still carries .cnx-elegant as a harmless
   belt-and-suspenders duplicate of the same rule. */
.cnx-elegant,
body.cnx-wardrobe-page {
  --font-heading: var(--font-heading-lw);
  --font-body: "Lato", system-ui, -apple-system, sans-serif;
  --heading-weight: 700;
}

/* ---------- Reset-lite ---------- */
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--color-silk);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* No image is ever taller than 90% of the screen, at any screen size.
   (Content images below also use width:auto so the cap shrinks them
   proportionally, and they're centred when narrower than their column.) */
img {
  max-width: 100%;
  max-height: 90vh;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--color-power-suit);
  outline-offset: 3px;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  color: var(--color-merlot);
  margin: 0 0 0.6em;
  line-height: 1.1;
}
h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}
h2 {
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  max-width: var(--measure);
}
h3 {
  font-size: 1.4rem;
}
p {
  max-width: var(--measure);
  color: var(--color-slate);
}
.cnx-lede {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.cnx-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-slate);
  margin-bottom: 1rem;
}

.cnx-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.cnx-container--narrow {
  max-width: 800px;
}

.cnx-section {
  padding: 5.5rem 0;
}
.cnx-section--tight {
  padding: 3.5rem 0;
}
.cnx-section-alt {
  background: color-mix(in srgb, var(--color-serenity) 35%, transparent);
  /* border-top: 1px solid var(--color-greige);
  border-bottom: 1px solid var(--color-greige); */
}
.cnx-section-dark {
  background: var(--color-ink);
  color: var(--color-silk);
}
.cnx-section-dark p {
  color: var(--color-silk);
}
.cnx-section-dark h1,
.cnx-section-dark h2,
.cnx-section-dark h3 {
  color: var(--color-serenity);
}
.cnx-section-merlot {
  background: var(--color-merlot);
  color: var(--color-silk);
}
.cnx-section-merlot p {
  color: var(--color-silk);
}
.cnx-section-merlot h1,
.cnx-section-merlot h2,
.cnx-section-merlot h3 {
  color: var(--color-serenity);
}

.bg-merlot {
  background-color: var(--color-merlot);
  color: var(--color-silk);
}
.bg-silk {
  background-color: var(--color-silk);
  color: var(--color-ink);
}
.bg-accent {
  background-color: var(--color-power-suit);
  color: var(--color-silk);
}
.bg-ink {
  background-color: var(--color-ink);
  color: var(--color-silk);
}
.bg-serenity {
  background-color: var(--color-serenity);
  color: var(--color-ink);
}
.bg-slate {
  background-color: var(--color-slate);
  color: var(--color-silk);
}
.bg-greige {
  background-color: var(--color-greige);
  color: var(--color-ink);
}
.col-merlot {
  color: var(--color-merlot);
}
.col-silk {
  color: var(--color-silk);
}
.col-accent {
  color: var(--color-power-suit);
}
.col-ink {
  color: var(--color-ink);
}
.col-serenity {
  color: var(--color-serenity);
}
.col-slate {
  color: var(--color-slate);
}
.col-greige {
  color: var(--color-greige);
}

/* ---------- Buttons ---------- */
.cnx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius-none);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.125em; /* more breathing room between the capitals */
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    background 0.2s var(--cnx-ease);
  white-space: nowrap;
  text-transform: uppercase;
  /* Same look whether it's a link or a <button> (buttons don't inherit
     the page font or line height by default). */
  font-family: var(--font-body);
  line-height: 1.2;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}
/* .cnx-btn:hover {
  transform: translateY(-2px);
}
.cnx-btn:active {
  transform: translateY(0) scale(0.97);
} */
.cnx-btn-primary,
.cnx-btn-primary a {
  background: var(--color-merlot);
  background-color: var(--color-merlot);
  color: var(--color-silk);
}
.cnx-btn-primary:hover,
.cnx-btn-primary a:hover {
  background: var(--color-serenity);
  background-color: var(--color-serenity);
  color: var(--color-ink);
}
.cnx-btn-secondary,
.cnx-btn-secndary a {
  background: var(--color-merlot);
  background-color: var(--color-merlot);
  color: var(--color-silk);
}
.cnx-btn-secondary:hover,
.cnx-btn-secondary a:hover {
  background: var(--color-serenity);
  background-color: var(--color-serenity);
  color: var(--color-ink);
}
.cnx-btn-power,
.cnx-btn-power a {
  background: var(--color-power-suit);
  background-color: var(--color-power-suit);
  color: var(--color-silk);
}
.cnx-btn-power:hover,
.cnx-btn-power a:hover {
  background: var(--color-merlot);
  background-color: var(--color-merlot);
  color: var(--color-silk);
}
.cnx-btn-merlot,
.cnx-btn-merlot a {
  background: var(--color-merlot);
  background-color: var(--color-merlot);
  color: var(--color-silk);
}
.cnx-btn-merlot:hover,
.cnx-btn-merlot a:hover {
  background: var(--color-power-suit);
  background-color: var(--color-power-suit);
  color: var(--color-silk);
}

.cnx-btn-ink a,
.cnx-btn-ink {
  background: var(--color-ink);
  background-color: var(--color-ink);
  color: var(--color-silk);
}
.cnx-btn-ink a:hover,
.cnx-btn-ink:hover {
  background: var(--color-serenity);
  background-color: var(--color-serenity);
  color: var(--color-ink);
}

.cnx-btn-silk,
.cnx-btn-silk a {
  background: var(--color-silk);
  background-color: var(--color-silk);
  color: var(--color-ink);
}
.cnx-btn-silk:hover,
.cnx-btn-silk a:hover {
  background: var(--color-power-suit);
  background-color: var(--color-power-suit);
  color: var(--color-silk);
}
.cnx-btn-serenity,
.cnx-btn-serenity a {
  background: var(--color-serenity);
  background-color: var(--color-serenity);
  color: var(--color-ink);
}
.cnx-btn-serenity a:hover,
.cnx-btn-serenity:hover {
  background: var(--color-ink);
  background-color: var(--color-ink);
  color: var(--color-silk);
}

/* Outline buttons: consistent rule for every colour — border + text in
   that colour, transparent background; hover fills with the colour and
   switches text to whichever of silk/ink actually contrasts against it.
   .cnx-btn-outline alone (no colour modifier) defaults to silk, for use
   on dark backgrounds — hover stays a subtle highlight rather than
   inverting to a filled block, since a full silk fill would leave silk
   text unreadable against it. */
.cnx-btn-outline {
  border-color: var(--color-silk);
  color: var(--color-silk);
  background: transparent;
}
.cnx-btn-outline:hover {
  border-color: var(--color-silk);
  color: var(--color-ink);
  background: var(--color-silk);
}
.cnx-btn-ink.cnx-btn-outline,
.cnx-btn-primary.cnx-btn-outline,
.cnx-btn-merlot.cnx-btn-outline,
.cnx-btn-secondary.cnx-btn-outline,
.cnx-btn-power.cnx-btn-outline {
  background: transparent;
}
.cnx-btn-ink.cnx-btn-outline {
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.cnx-btn-ink.cnx-btn-outline:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-silk);
}
.cnx-btn-primary.cnx-btn-outline,
.cnx-btn-merlot.cnx-btn-outline,
.cnx-btn-secondary.cnx-btn-outline {
  border-color: var(--color-merlot);
  color: var(--color-merlot);
}
.cnx-btn-primary.cnx-btn-outline:hover,
.cnx-btn-merlot.cnx-btn-outline:hover,
.cnx-btn-secondary.cnx-btn-outline:hover {
  background: var(--color-merlot);
  border-color: var(--color-merlot);
  color: var(--color-silk);
}
.cnx-btn-power.cnx-btn-outline {
  border-color: var(--color-power-suit);
  color: var(--color-power-suit);
}
.cnx-btn-power.cnx-btn-outline:hover {
  background: var(--color-power-suit);
  border-color: var(--color-power-suit);
  color: var(--color-silk);
}

.cnx-btn-silk.cnx-btn-outline {
  border-color: var(--color-silk);
  color: var(--color-silk);
  background: transparent;
}
.cnx-btn-serenity.cnx-btn-outline {
  border-color: var(--color-serenity);
  color: var(--color-serenity);
  background: transparent;
}

.cnx-btn-silk.cnx-btn-outline:hover {
  background: var(--color-silk);
  border-color: var(--color-silk);
  color: var(--color-ink);
}
.cnx-btn-serenity.cnx-btn-outline:hover {
  background: var(--color-serenity);
  border-color: var(--color-serenity);
  color: var(--color-ink);
}

/* ---------- Icons (assets/icons/*.svg, inlined by cnx_icon()) ----------
   Sized to the surrounding text and coloured with currentColor. */
.cnx-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* A trailing arrow that nudges forward on hover/focus, e.g.
   <a class="cnx-btn ..."><span>Read more</span> <span class="cnx-arrow"><?php echo cnx_icon('arrow-forward'); ?></span></a>
   or inline within body copy, e.g. cnx-link-arrow below. */
.cnx-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s var(--cnx-ease);
  color: currentColor;
}
a:hover .cnx-arrow,
a:focus-visible .cnx-arrow,
.cnx-btn:hover .cnx-arrow {
  transform: translateX(5px);
}
.cnx-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--color-power-suit);
  transition: gap 0.25s var(--cnx-ease);
}
.cnx-link-arrow:hover {
  gap: 0.85rem;
}
.cnx-section-dark .cnx-btn-outline,
.cnx-section-merlot .cnx-btn-outline {
  border-color: var(--color-serenity);
  color: var(--color-serenity);
}
.cnx-section-dark .cnx-btn-outline:hover,
.cnx-section-merlot .cnx-btn-outline:hover {
  background: var(--color-serenity);
  color: var(--color-ink);
}
.cnx-btn-block {
  width: 100%;
  justify-content: center;
}

/* ---------- Site header ---------- */
.cnx-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition: all 0.25s ease;
  background: transparent;
}
/* The scrolled background + blur sit on a pseudo-element, NOT on the
   header itself: backdrop-filter on .cnx-header would make it the
   containing block for the fixed-position mobile menu inside it, which
   then got squashed into the header bar and cut off once the page was
   scrolled. */
.cnx-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-silk) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.cnx-header.is-scrolled::before {
  opacity: 1;
}
.cnx-header.is-scrolled {
  padding: 0.75rem 0;
}
.cnx-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cnx-logo {
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}
.cnx-logo:hover {
  opacity: 0.85;
}
.cnx-logo img {
  height: 2.25rem;
  width: auto;
  object-fit: contain;
}
.cnx-logo-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-merlot);
  transition: color 0.25s ease;
}
.cnx-logo-img,
.cnx-logo .custom-logo {
  transition: filter 0.25s ease;
}
.cnx-logo-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
/* Lara's Wardrobe gets a larger mark than the Connextus header logo. */
.cnx-logo-group .cnx-logo img {
  height: 2.75rem;
}
@media (min-width: 768px) {
  .cnx-logo-group .cnx-logo img {
    height: 3.5rem;
  }
}
/* Small "back to Connextus" logo beside the contact button in the Lara's
   Wardrobe header — sized to roughly the button's text height. */
.cnx-logo-secondary {
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}
.cnx-logo-secondary:hover {
  opacity: 0.75;
}
.cnx-logo-secondary img {
  height: 1rem;
  width: auto;
  object-fit: contain;
}
.cnx-logo-secondary .cnx-logo-img-light {
  display: none;
}
.cnx-logo-secondary .cnx-logo-text {
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}
/* Connextus pages: the Lara's Wardrobe logo in the same spot. Over the
   dark homepage hero it goes light like the main logo (the uploaded light
   version if there is one, otherwise an automatic white filter). */
.cnx-logo-secondary--wardrobe img {
  height: 1.35rem;
}
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo-secondary:not(.cnx-logo-has-light)
  .cnx-logo-img {
  filter: brightness(0) invert(1);
}
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo-secondary
  .cnx-logo-text {
  color: var(--color-silk);
}
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo-secondary.cnx-logo-has-light
  .cnx-logo-img-default {
  display: none;
}
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo-secondary.cnx-logo-has-light
  .cnx-logo-img-light {
  display: inline-block;
}

/* ---------- Logo colour-change on scroll ----------
   Enabled/disabled from Theme Settings → Customize → Header (adds/removes the
   "cnx-logo-scroll-color" body class). The header is transparent and
   floats over the dark home hero (.cnx-hero-home) until it scrolls and
   picks up a solid background (.cnx-header.is-scrolled, toggled by
   assets/js/theme.js) — so the logo needs to be light in the first state
   and dark again in the second. Every other page's hero has no dark
   background, so nothing changes there except after scrolling, same as
   the header itself.

   Two ways to get the light state — and these are mutually exclusive by
   construction (the filter rule explicitly excludes .cnx-logo-has-light
   via :not()), so there's no specificity contest between them:
   1. A dedicated "light variant" logo was uploaded (Site Content →
      Header & Footer) — .cnx-logo-has-light is present, and we swap
      to that actual image. No filter is ever applied to it.
   2. No light variant uploaded — an auto filter forces the existing
      logo (image or text) to render light instead. */
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo-text {
  color: var(--color-silk);
}
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo:not(.cnx-logo-has-light)
  .cnx-logo-img,
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo:not(.cnx-logo-has-light)
  .custom-logo {
  filter: brightness(0) invert(1);
}

.cnx-logo-has-light .cnx-logo-img-light {
  display: none;
}
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo-has-light
  .cnx-logo-img-default {
  display: none;
}
body.cnx-logo-scroll-color.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-logo-has-light
  .cnx-logo-img-light {
  display: inline-block;
}

.cnx-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
}
/* The child combinator (>) is deliberate: it matches only the plain
   text nav links, which are direct children of <nav class="cnx-nav">.
   The CTA button sits inside .cnx-nav-actions (a grandchild), so a
   descendant selector here would also catch it — it doesn't need any
   of this (font size/weight, the underline, the padding tweak below);
   it's a .cnx-btn and already fully styled as one. */
.cnx-nav > a {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-slate);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
/* Unscrolled, on the homepage only: the header floats transparently over
   the dark hero (.cnx-hero-home), so nav text needs to be light there —
   exactly the same case the logo already handles just above. Every other
   page's hero is light, so nav text stays readable (--color-slate) by
   default regardless of scroll state. */
body.cnx-header-over-dark .cnx-header:not(.is-scrolled) .cnx-nav > a {
  color: var(--color-silk);
}
/* Header icons (cart, menu toggle) follow the same rule: silk over a dark
   hero at the top of the page, back to the normal ink/merlot once the
   header scrolls onto its light background. */
body.cnx-header-over-dark .cnx-header:not(.is-scrolled) .cnx-menu-toggle,
body.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-header-mobile-actions
  .cnx-cart-link,
body.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-nav-actions
  .cnx-cart-link {
  color: var(--color-silk);
}
body.cnx-header-over-dark .cnx-header:not(.is-scrolled) .cnx-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}
body.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-header-mobile-actions
  .cnx-cart-link:hover,
body.cnx-header-over-dark
  .cnx-header:not(.is-scrolled)
  .cnx-nav-actions
  .cnx-cart-link:hover {
  color: var(--color-serenity);
}
/* The cart badge keeps its merlot fill; give it a light ring over the photo. */
body.cnx-header-over-dark .cnx-header:not(.is-scrolled) .cnx-cart-count {
  box-shadow: 0 0 0 1.5px var(--color-silk);
}
.cnx-nav > a:hover,
.cnx-nav > a.is-active {
  color: var(--color-merlot);
}
.cnx-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-merlot);
  transition: width 0.3s var(--cnx-ease);
}
.cnx-nav > a:hover::after,
.cnx-nav > a.is-active::after {
  width: 100%;
}
.cnx-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cnx-nav-link-secondary {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.75;
}

.cnx-menu-toggle {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-none);
  cursor: pointer;
  color: var(--color-ink);
  transition:
    background 0.2s ease,
    transform 0.2s var(--cnx-ease),
    color 0.25s ease;
}
.cnx-menu-toggle:hover {
  background: color-mix(in srgb, var(--color-ink) 6%, transparent);
}
.cnx-menu-toggle:active {
  transform: scale(0.92);
}
.cnx-menu-toggle svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s var(--cnx-ease);
}
.cnx-menu-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Rendered in the DOM at all times on mobile (so it can transition) and
   only visually hidden via opacity/transform + visibility — never
   display:none — which is what lets the open/close react to a CSS
   transition instead of popping in and out instantly. Desktop still hard-
   hides it with display:none!important, see the breakpoint below. */
.cnx-mobile-nav {
  position: fixed;
  top: var(--cnx-header-h, 64px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-silk);
  z-index: 99;
  overflow-y: auto;
  padding: 2rem var(--gutter);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition:
    opacity 0.25s var(--cnx-ease),
    transform 0.25s var(--cnx-ease),
    visibility 0s linear 0.25s;
}
.cnx-mobile-nav.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.25s var(--cnx-ease),
    transform 0.25s var(--cnx-ease),
    visibility 0s linear 0s;
}
.cnx-mobile-nav-links {
  display: grid;
}
.cnx-mobile-nav-link,
.cnx-mobile-nav-footer {
  transition:
    color 0.2s ease,
    opacity 0.35s var(--cnx-ease),
    transform 0.35s var(--cnx-ease);
  opacity: 0;
  transform: translateX(-12px);
}
.cnx-mobile-nav-link {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-ink);
  padding: 0.9rem 0;
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-greige) 60%, transparent);
}
.cnx-mobile-nav.is-open .cnx-mobile-nav-link,
.cnx-mobile-nav.is-open .cnx-mobile-nav-footer {
  opacity: 1;
  transform: translateX(0);
}
/* Stagger each link in slightly after the panel starts opening, so the
   menu reads as a list settling into place rather than a flat swap. */
.cnx-mobile-nav-link:nth-child(1) {
  transition-delay: 0.05s;
}
.cnx-mobile-nav-link:nth-child(2) {
  transition-delay: 0.1s;
}
.cnx-mobile-nav-link:nth-child(3) {
  transition-delay: 0.15s;
}
.cnx-mobile-nav-link:nth-child(4) {
  transition-delay: 0.2s;
}
.cnx-mobile-nav-link:nth-child(5) {
  transition-delay: 0.25s;
}
.cnx-mobile-nav-link:nth-child(n + 6) {
  transition-delay: 0.3s;
}
.cnx-mobile-nav.is-open .cnx-mobile-nav-footer {
  transition-delay: 0.3s;
}
.cnx-mobile-nav-link:hover,
.cnx-mobile-nav-link.is-active {
  color: var(--color-merlot);
}
/* Under the links: the other brand's logo, then the header button. */
.cnx-mobile-nav-footer {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.cnx-mobile-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-weight: 800;
  color: var(--color-ink);
}
.cnx-mobile-nav-brand img {
  height: 2.25rem;
  width: auto;
}
.cnx-mobile-nav-brand--wardrobe img {
  height: 3rem;
}
.cnx-mobile-nav-brand .cnx-logo-img-light {
  display: none;
}
.cnx-mobile-nav-brand .cnx-logo-text {
  display: none; /* the label beside it already names it */
}

/* Phones and tablets: cart + menu button in the bar. */
.cnx-header-mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .cnx-nav {
    display: flex;
    align-items: center;
  }
  .cnx-menu-toggle,
  .cnx-mobile-nav,
  .cnx-header-mobile-actions {
    display: none !important;
  }
}

/* ---------- Hero ---------- */
/* Every hero (home + inner pages share .cnx-hero) plays a short, staggered
   entrance the moment the page loads — mirroring the initial/animate
   fade-up used across the brand's React sites. Pure CSS + animation-delay,
   so it needs no JS and never leaves content stuck invisible if a script
   fails to run. */
@keyframes cnx-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--cnx-reveal-y));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes cnx-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.cnx-hero .cnx-eyebrow,
.cnx-hero h1,
.cnx-hero .cnx-lede,
.cnx-hero > .cnx-container > p,
.cnx-hero-actions {
  animation: cnx-fade-up 0.7s var(--cnx-ease) both;
}
.cnx-hero .cnx-eyebrow {
  animation-delay: 0.05s;
}
.cnx-hero h1 {
  animation-delay: 0.15s;
}
.cnx-hero .cnx-lede,
.cnx-hero > .cnx-container > p {
  animation-delay: 0.28s;
}
.cnx-hero-actions {
  animation-delay: 0.4s;
}
.cnx-hero-image {
  animation: cnx-scale-in 0.8s var(--cnx-ease) 0.2s both;
  overflow: hidden;
}
.cnx-hero-image img {
  transition: transform 0.6s var(--cnx-ease);
}
.cnx-hero-image:hover img {
  transform: scale(1.04);
}

.cnx-hero {
  padding: 9rem 0 5rem;
  position: relative;
}
.cnx-hero-home {
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-merlot) 55%, var(--color-ink)) 0%,
    var(--color-ink) 60%
  );
  color: var(--color-silk);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.cnx-hero-home .cnx-eyebrow {
  color: var(--color-serenity);
}
.cnx-hero-home h1 {
  color: var(--color-silk);
  max-width: 42rem;
}
.cnx-hero-home p {
  color: var(--color-serenity);
  font-weight: 700;
  max-width: 34rem;
}
.cnx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.cnx-hero-image {
  border-radius: var(--radius-none);
  overflow: hidden;
}
.cnx-rule {
  border: none;
  border-top: 2px solid var(--color-serenity);
  width: 8rem;
  margin: 1.5rem 0;
}

/* ---------- Columns / cards / grid ---------- */
.cnx-columns {
  display: grid;
  gap: 3rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .cnx-columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .cnx-columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cnx-split {
  display: grid;
  gap: 3rem;
  align-items: center;
}
/* Side by side from tablet width up (stacked only on phones). */
@media (min-width: 768px) {
  .cnx-split {
    grid-template-columns: 1fr 1fr;
  }
}

.cnx-card {
  border: 2px solid var(--color-greige);
  background: color-mix(in srgb, var(--color-silk) 97%, white);
  padding: 2.25rem;
  border-radius: var(--radius-none);
  transition:
    transform 0.3s var(--cnx-ease),
    box-shadow 0.3s var(--cnx-ease),
    border-color 0.3s ease;
}
.cnx-card:hover {
  transform: translateY(-6px);
}
.cnx-card-number {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--color-power-suit);
  transition: transform 0.3s var(--cnx-ease);
}
.cnx-card:hover .cnx-card-number {
  transform: translateX(3px);
}

.cnx-values-grid {
  display: grid;
  gap: 3rem;
  margin-top: 3rem;
}
@media (min-width: 640px) {
  .cnx-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cnx-values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.cnx-value {
  border-top: 2px solid var(--color-merlot);
  padding-top: 1.5rem;
  transition:
    border-color 0.3s ease,
    transform 0.3s var(--cnx-ease);
}
.cnx-value:hover {
  transform: translateY(-4px);
}

/* ---------- Packages (Lara's Wardrobe) ---------- */
.cnx-packages {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 2.5rem;
}
/* 2 per row on tablets, 3 on wide screens (never wider than needed when
   there are only 1–2 packages). */
@media (min-width: 700px) {
  .cnx-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cnx-packages--count-1 {
    grid-template-columns: minmax(0, 26rem);
  }
  .cnx-packages--count-2 {
    max-width: 56rem;
  }
}
@media (min-width: 1080px) {
  .cnx-packages--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.cnx-package {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem;
  border: 2px solid var(--color-greige);
  border-radius: var(--radius-none);
  background: var(--color-silk);
  transition:
    transform 0.3s var(--cnx-ease),
    box-shadow 0.3s var(--cnx-ease),
    border-color 0.3s ease;
}
.cnx-package:hover {
  transform: translateY(-4px);
  border-color: var(--color-merlot);
  box-shadow: 0 18px 30px -20px rgba(0, 13, 28, 0.22);
}
.cnx-package-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-serenity);
  transition: color 0.3s ease;
}
.cnx-package:hover .cnx-package-num {
  color: var(--color-power-suit);
}
.cnx-package-price {
  font-weight: 800;
  color: var(--color-merlot);
  margin-top: 0.25rem;
}
.cnx-package-note {
  font-size: 0.8rem;
  color: var(--color-slate);
}
.cnx-package-steps {
  margin: 0.75rem 0 0;
}
.cnx-package-steps li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--color-slate);
  margin-bottom: 0.3rem;
}
.cnx-package-steps li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-power-suit);
}
/* Clamped description + "Read more" (classes added by theme.js only when
   the text is actually longer than the clamp). */
.cnx-package.is-collapsible {
  cursor: pointer;
}
.cnx-package.is-collapsible .cnx-package-desc {
  overflow: hidden;
  transition: max-height 0.4s var(--cnx-ease);
}
.cnx-package.is-collapsible:not(.is-open) .cnx-package-desc {
  max-height: 9.5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.cnx-package-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-merlot);
}
.cnx-package-more[hidden] {
  display: none;
}
.cnx-package-more:hover,
.cnx-package-more:focus-visible {
  color: var(--color-power-suit);
}
.cnx-package-more-icon {
  width: 1.25em;
  height: 1.25em;
  transition: transform 0.3s var(--cnx-ease);
}
.cnx-package.is-open .cnx-package-more-icon {
  transform: rotate(180deg);
}
.cnx-sec.cnx-bg-dark .cnx-package-more {
  color: var(--color-silk);
}
@media (prefers-reduced-motion: reduce) {
  .cnx-package.is-collapsible .cnx-package-desc,
  .cnx-package-more-icon {
    transition: none;
  }
}

/* ---------- Why list ---------- */
.cnx-why-list {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .cnx-why-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.cnx-why-list li {
  position: relative;
  padding-left: 1.75rem;
  font-weight: 600;
  color: var(--color-ink);
}
.cnx-why-list .cnx-why-check {
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.2em;
  height: 1.2em;
  color: var(--color-power-suit);
  transition: transform 0.25s var(--cnx-ease);
}
.cnx-why-list li:hover .cnx-why-check {
  transform: scale(1.25);
}

/* ---------- FAQ accordion ---------- */
.cnx-faq {
  margin-top: 2.5rem;
  border-top: 2px solid var(--color-greige);
}
.cnx-faq-item {
  border-bottom: 2px solid var(--color-greige);
}
/* More than 6 FAQs: two columns on desktop. The narrow container is
   widened so each column keeps a comfortable line length. */
@media (min-width: 1024px) {
  .cnx-container--narrow:has(.cnx-faq--split) {
    max-width: var(--max-width);
  }
  .cnx-faq--split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    column-gap: 3rem;
    border-top: none;
  }
  .cnx-faq--split .cnx-faq-col {
    border-top: 2px solid var(--color-greige);
  }
}
.cnx-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-merlot);
  transition: color 0.2s ease;
}
.cnx-faq-item.is-open .cnx-faq-q,
.cnx-faq-q:hover {
  color: var(--color-merlot);
}
.cnx-faq-icon {
  display: inline-flex;
  flex-shrink: 0;
  transition:
    transform 0.3s var(--cnx-ease),
    color 0.2s ease;
  font-size: 1.25rem;
  color: var(--color-slate);
}
.cnx-faq-item.is-open .cnx-faq-icon {
  transform: rotate(45deg);
}
.cnx-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--cnx-ease);
}
.cnx-faq-item.is-open .cnx-faq-a {
  max-height: 40em;
}
.cnx-faq-a p {
  padding-bottom: 1.5rem;
  margin: 0;
}

/* ---------- Forms ---------- */
.cnx-form {
  border-radius: var(--radius-none);
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.cnx-field {
  display: grid;
  gap: 0.4rem;
}
.cnx-field label {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink);
}
.cnx-field input,
.cnx-field select,
.cnx-field textarea {
  border: 2px solid var(--color-greige);
  border-radius: var(--radius-none);
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-silk);
  color: var(--color-ink);
}
.cnx-field--check label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.cnx-field--check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  padding: 0;
  accent-color: var(--color-merlot);
}
.cnx-field input:focus,
.cnx-field select:focus,
.cnx-field textarea:focus {
  outline: 2px solid var(--color-power-suit);
  outline-offset: 1px;
}
.cnx-notice {
  padding: 1.25rem;
  border-radius: var(--radius-none);
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.cnx-notice-success {
  background: color-mix(in srgb, var(--color-serenity) 40%, white);
  color: var(--color-merlot);
}
.cnx-notice-error {
  background: #fdeceb;
  color: var(--color-power-suit);
}

/* ---------- Footer ---------- */
.cnx-footer {
  background: var(--color-ink);
  color: var(--color-silk);
  padding: 5rem 0 2.5rem;
}
.cnx-footer-grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .cnx-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.cnx-footer h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-serenity);
  margin-bottom: 1.1rem;
}
.cnx-footer p {
  color: var(--color-serenity);
}
.cnx-footer a {
  font-weight: 700;
}
.cnx-footer-link-secondary {
  font-weight: 400;
  opacity: 0.75;
  font-size: 0.9em;
}
.cnx-footer a:hover {
  color: var(--color-serenity);
}
.cnx-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--color-slate);
}
.cnx-footer-logo img {
  height: 2.75rem;
  width: auto;
  object-fit: contain;
  margin-bottom: 1.25rem;
}
/* .cnx-footer-logo-auto-invert {
  filter: brightness(0) invert(1);
} */
/* .cnx-footer-logo .custom-logo {
  filter: brightness(0) invert(1);
} */
.cnx-social-links {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cnx-social-links a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--color-silk);
}
.cnx-social-links a:hover {
  color: var(--color-serenity);
}
.cnx-social-icon {
  height: 1.25rem;
  width: 1.25rem;
  object-fit: contain;
}
.cnx-social-icon svg {
  height: 100%;
  width: 100%;
  display: block;
  fill: currentColor;
}

/* ---------- Block background colours (Site Content) ---------- */
/* Applied via cnx_block_classes() in inc/content.php — a specific
   .cnx-bg-* class sets the background, and .cnx-bg-dark (added
   alongside it for the four darker brand colours) forces light text,
   links, and outline buttons, mirroring the existing
   .cnx-section-dark / .cnx-section-merlot treatment above. */
.cnx-block-filled {
  padding: 2.25rem;
  border-radius: var(--radius-none);
}
.cnx-bg-merlot {
  background-color: var(--color-merlot);
  color: var(--color-silk);
}
.cnx-bg-power-suit {
  background-color: var(--color-power-suit);
  color: var(--color-silk);
}
.cnx-bg-serenity {
  background-color: var(--color-serenity);
  color: var(--color-ink);
}
.cnx-bg-silk {
  background-color: var(--color-silk);
  color: var(--color-ink);
}
.cnx-bg-ink {
  background-color: var(--color-ink);
  color: var(--color-silk);
}
.cnx-bg-greige {
  background-color: var(--color-greige);
  color: var(--color-ink);
}
.cnx-bg-slate {
  background-color: var(--color-slate);
  color: var(--color-ink);
}

.cnx-bg-dark,
.cnx-bg-dark p {
  color: var(--color-silk) !important;
}
.cnx-bg-dark h1,
.cnx-bg-dark h2,
.cnx-bg-dark h3,
.cnx-bg-dark h4 {
  color: var(--color-silk) !important;
}
.cnx-bg-dark a:not(.cnx-btn) {
  color: var(--color-serenity);
}
.cnx-bg-dark .cnx-btn-outline {
  border-color: var(--color-silk);
  color: var(--color-silk) !important;
}
.cnx-bg-dark .cnx-btn-outline:hover {
  background: var(--color-silk);
  color: var(--color-ink) !important;
}
.cnx-bg-dark .cnx-card-number {
  color: var(--color-serenity);
}

/* ---------- Block images (Site Content "Image / icon" field) ---------- */
.cnx-block-media {
  display: block;
  margin-bottom: 1rem;
}
.cnx-block-media img {
  height: 100%;
  width: auto;
  object-fit: contain;
  margin-left: auto; /* centred when narrower than the card/column */
  margin-right: auto;
}
/* Auto-recolour the image light when it lands on a dark block
   background — either the Site Content colour picker (.cnx-bg-dark) or
   the theme's existing hardcoded dark sections/cards (.cnx-section-dark,
   .cnx-section-merlot). One image only — no separate light-mode upload. */
.cnx-bg-dark .cnx-block-media img,
.cnx-section-dark .cnx-block-media img,
.cnx-section-merlot .cnx-block-media img {
  filter: brightness(0) invert(1);
}

/* ---------- Newsletter (footer) ---------- */
/* ---------- Newsletter ---------- */
/* A self-contained "band" component — carries its own background so it
   looks right wherever it's placed (the footer, which is already dark,
   or a plain section on the homepage), rather than assuming a dark
   parent context the way the previous version did. */
.cnx-newsletter {
  background: var(--color-serenity);
  padding: 5.5rem 0;
}
.cnx-footer .cnx-newsletter {
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 2rem;
  margin-bottom: 3rem;
}
.cnx-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .cnx-newsletter-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
  }
}
.cnx-newsletter-copy h3 {
  color: var(--color-ink);
  margin-bottom: 0.4rem;
  font-size: 1.4rem;
}
.cnx-newsletter-copy p {
  color: var(--color-ink);
  opacity: 0.75;
  margin: 0;
}
.cnx-footer .cnx-newsletter-copy h3 {
  color: var(--color-silk);
}
.cnx-footer .cnx-newsletter-copy p {
  color: var(--color-slate);
  opacity: 1;
}
.cnx-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.cnx-newsletter-form input[type="email"] {
  flex: 1 1 14rem;
  border: 2px solid var(--color-slate);
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  background: var(--color-silk);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
}
.cnx-footer .cnx-newsletter-form input[type="email"] {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-silk);
}
.cnx-newsletter-form input[type="email"]::placeholder {
  color: var(--color-slate);
}
.cnx-newsletter-form-col .cnx-notice {
  margin: 0;
}
.cnx-newsletter-form-col {
  max-width: 30rem;
}
@media (min-width: 768px) {
  .cnx-newsletter-form-col {
    justify-self: end;
    width: 100%;
  }
}

/* ---------- Utility ---------- */
.cnx-text-center {
  text-align: center;
}
.cnx-mt-lg {
  margin-top: 3rem;
}
.cnx-cta-section {
  text-align: center;
  padding: 6rem 0;
}
.cnx-cta-section p {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Scroll reveal ----------
   The class itself is only ever added by assets/js/theme.js (see
   "Scroll reveal" there) — never printed in markup — so if JavaScript is
   disabled or fails, every element below simply keeps its default,
   fully-visible state instead of getting stuck hidden. --cnx-reveal-delay
   is set inline per-element by that script for the staggered effect,
   then cleared once the transition finishes so later hover transitions
   (card lift, etc.) aren't delayed by the same amount. */
/* Note: this intentionally re-declares the `transition` shorthand for
   .cnx-card / .cnx-value / .cnx-package (rather than only touching
   opacity/transform), since a single `transition` declaration on an
   element always wins outright over an earlier one, never merges with
   it. Consolidating the hover-lift properties here too means those
   cards' own hover transitions keep working correctly once this class
   is added, instead of silently losing them to this later rule. */
.cnx-reveal {
  opacity: 0;
  transform: translateY(var(--cnx-reveal-y));
  transition:
    opacity 0.7s var(--cnx-ease),
    transform 0.45s var(--cnx-ease),
    box-shadow 0.3s var(--cnx-ease),
    border-color 0.3s ease,
    color 0.2s ease;
  transition-delay: var(--cnx-reveal-delay, 0s);
}
.cnx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Marquee (Lara's Wardrobe value ticker) ---------- */
.cnx-marquee {
  overflow: hidden;
  padding: 2.5rem 0;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
}
.cnx-marquee-track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: cnx-marquee-scroll 32s linear infinite;
}
.cnx-marquee:hover .cnx-marquee-track {
  animation-play-state: paused;
}
.cnx-marquee-item {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-silk);
  white-space: nowrap;
}
.cnx-marquee-item::after {
  content: "•";
  color: var(--color-serenity);
  font-style: normal;
}
@keyframes cnx-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* Track is duplicated once in the markup, so shifting exactly half its
       total width loops seamlessly back to an identical frame. */
    transform: translateX(-50%);
  }
}

/* =========================================================================
   Page builder sections (Site Settings → Pages) — see inc/page-builder.php.
   Every section is a <section class="cnx-sec cnx-sec--{type}">; a chosen
   background colour adds .cnx-sec-bg + .cnx-bg-{colour} (+ .cnx-bg-dark
   for the darker brand colours, which flips text to light).
   ========================================================================= */

.cnx-bg-serenity-soft {
  background-color: color-mix(
    in srgb,
    var(--color-serenity) 35%,
    var(--color-silk)
  );
  color: var(--color-ink);
}
.cnx-bg-greige-soft {
  background-color: color-mix(
    in srgb,
    var(--color-greige) 35%,
    var(--color-silk)
  );
  color: var(--color-ink);
}
/* Rich text (bold / italic / links from the editor) */
.cnx-rich p {
  margin: 0 0 1em;
}
.cnx-rich p:last-child {
  margin-bottom: 0;
}
.cnx-rich a {
  color: var(--color-merlot);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cnx-sec-title {
  margin-bottom: 0.75rem;
}
.cnx-sec-desc {
  margin-top: 1rem;
}
.cnx-sec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.cnx-sec .cnx-text-center p,
.cnx-sec .cnx-text-center h2,
.cnx-sec .cnx-text-center .cnx-sec-actions {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.cnx-columns-1 {
  grid-template-columns: 1fr;
}

/* Split layouts */
.cnx-split--top {
  align-items: start;
}
.cnx-sec-image {
  margin: 0;
}
.cnx-sec-image img {
  display: block;
  /* Natural size up to the column width; the 90vh cap then shrinks it
     proportionally, and anything narrower than the column is centred. */
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
/* Side-by-side on desktop: theme.js ("Photo beside text") sizes the
   photo to the height of the text next to it and lets its WIDTH follow
   from its own proportions — never cropped. It adds .cnx-split--fit once
   it has measured; without JS the photo simply shows at full column
   width. Logos are left at their natural size. */
@media (min-width: 768px) {
  .cnx-split.cnx-split--fit {
    display: flex;
    align-items: center;
    gap: 3rem;
  }
  .cnx-split--fit > .cnx-sec-text {
    flex: 1 1 0;
    min-width: 0;
    --measure: 80ch; /* use the room a narrow portrait leaves */
  }
  .cnx-split--fit > .cnx-sec-media {
    flex: 0 0 auto;
  }
  .cnx-split--fit > .cnx-sec-media .cnx-sec-image img {
    width: auto;
    max-width: none;
  }
}

/* Single-column text sections: same width as the other sections so the
   left edges line up, with a slightly longer comfortable line length. */
.cnx-sec-single {
  --measure: 80ch;
}
.cnx-sec-media--logo .cnx-sec-image img {
  width: auto;
  max-width: min(100%, 22rem);
}

/* About — quote */
.cnx-quote {
  margin: 2rem 0 0;
  padding-left: 1rem;
  border-left: 4px solid var(--color-power-suit);
}
.cnx-quote .cnx-rich p {
  color: var(--color-merlot);
  font-weight: 800;
}
.cnx-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: italic;
  color: var(--color-slate);
}

/* Call to action (centred, no image) */
.cnx-sec-cta-center .cnx-sec-actions {
  justify-content: center;
}

/* Hero */
.cnx-sec-bg.cnx-hero-home {
  background-image: none;
}
.cnx-hero-home.cnx-sec-bg:not(.cnx-bg-dark):not(.cnx-hero--image) h1 {
  color: var(--color-merlot);
}
.cnx-hero-home.cnx-sec-bg:not(.cnx-bg-dark):not(.cnx-hero--image) p,
.cnx-hero-home.cnx-sec-bg:not(.cnx-bg-dark):not(.cnx-hero--image) .cnx-eyebrow {
  color: var(--color-ink);
}
.cnx-hero.cnx-hero--image {
  /* Phone-sized copy below 769px, larger copy above — set per hero by
     cnx_hero_bg_style() in inc/template-tags.php. */
  background-image: var(--cnx-hero-sm);
  background-size: cover;
  background-position: center;
}
@media (min-width: 769px) {
  .cnx-hero.cnx-hero--image {
    background-image: var(--cnx-hero-lg);
  }
}
/* Hero images on other pages (Page Settings → Hero background image):
   tall enough for the photo to read, text sitting at the bottom. */
.cnx-hero--image:not(.cnx-hero-home) {
  min-height: 55vh;
  display: flex;
  align-items: flex-end;
}
.cnx-hero--image:not(.cnx-hero-home) > .cnx-container {
  width: 100%;
}
.cnx-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 13, 28, 0.72) 0%,
    rgba(0, 13, 28, 0.45) 100%
  );
}
.cnx-hero--image > .cnx-container {
  position: relative;
  z-index: 1;
}
.cnx-hero--image h1,
.cnx-hero--image p,
.cnx-hero--image .cnx-eyebrow {
  color: var(--color-silk) !important;
}
.cnx-hero .cnx-sec-actions {
  margin-top: 1.5rem;
}

/* Homepage hero with a light background: keep the floating header dark. */
body.home.cnx-home-hero-light .cnx-header:not(.is-scrolled) .cnx-nav > a {
  color: var(--color-slate);
}
body.cnx-logo-scroll-color.home.cnx-home-hero-light
  .cnx-header:not(.is-scrolled)
  .cnx-logo-text {
  color: var(--color-merlot);
}
body.cnx-logo-scroll-color.home.cnx-home-hero-light
  .cnx-header:not(.is-scrolled)
  .cnx-logo:not(.cnx-logo-has-light)
  .cnx-logo-img,
body.cnx-logo-scroll-color.home.cnx-home-hero-light
  .cnx-header:not(.is-scrolled)
  .cnx-logo:not(.cnx-logo-has-light)
  .custom-logo {
  filter: none;
}
body.cnx-logo-scroll-color.home.cnx-home-hero-light
  .cnx-header:not(.is-scrolled)
  .cnx-logo-has-light
  .cnx-logo-img-default {
  display: inline-block;
}
body.cnx-logo-scroll-color.home.cnx-home-hero-light
  .cnx-header:not(.is-scrolled)
  .cnx-logo-has-light
  .cnx-logo-img-light {
  display: none;
}

/* Cards / packages */
.cnx-card .cnx-rich,
.cnx-value .cnx-rich,
.cnx-package .cnx-rich {
  margin-top: 0.5rem;
}
.cnx-card .cnx-sec-actions,
.cnx-value .cnx-sec-actions {
  margin-top: 1.25rem;
}
.cnx-package-cta {
  margin-top: auto; /* buttons line up along the bottom of each row */
  padding-top: 0.5rem;
}
.cnx-sec-result {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--color-serenity);
  max-width: 100%;
}
.cnx-sec-result .cnx-rich p {
  max-width: 100%;
}

/* FAQ answers written in the rich editor */
.cnx-faq-a .cnx-rich {
  padding-bottom: 1.5rem;
}
.cnx-faq-a .cnx-rich p {
  padding-bottom: 0;
  margin: 0 0 0.75rem;
}
.cnx-faq-a .cnx-rich p:last-child {
  margin-bottom: 0;
}

/* Testimonials */
.cnx-testimonial {
  margin: 0;
  padding: 2rem;
  border: 2px solid var(--color-greige);
  background: color-mix(in srgb, var(--color-silk) 97%, white);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cnx-testimonial-image {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
}
.cnx-testimonial blockquote {
  margin: 0;
}
.cnx-testimonial blockquote p {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-ink);
}
.cnx-testimonial figcaption {
  margin-top: auto;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-merlot);
}

/* Newsletter as a page section */
.cnx-sec--newsletter.cnx-newsletter {
  padding: 4rem 0;
}
.cnx-sec--newsletter .cnx-sec-desc {
  margin-top: 0.4rem;
}

/* Lara's Wardrobe pre-footer — sits flush against the footer (no gap). */
.cnx-prefooter {
  padding: 3.5rem 0;
  margin-bottom: 0;
}
.cnx-prefooter + * {
  margin-top: 0;
}
.cnx-prefooter-image {
  margin: 0 auto 1.25rem;
}
.cnx-prefooter-image img {
  display: block;
  max-width: min(100%, 16rem);
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.cnx-prefooter-tagline {
  margin: 0 auto;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}
.cnx-page-layout > .cnx-prefooter:last-child {
  margin-bottom: 0;
}

/* Dark section backgrounds: keep nested cards/packages/FAQ/testimonials
   readable (the .cnx-bg-dark rules force light text). */
.cnx-sec.cnx-bg-dark .cnx-card,
.cnx-sec.cnx-bg-dark .cnx-package,
.cnx-sec.cnx-bg-dark .cnx-testimonial {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.cnx-sec.cnx-bg-dark .cnx-value {
  border-top-color: var(--color-serenity);
}
.cnx-sec.cnx-bg-dark .cnx-faq,
.cnx-sec.cnx-bg-dark .cnx-faq-item {
  border-color: rgba(255, 255, 255, 0.2);
}
.cnx-sec.cnx-bg-dark .cnx-faq-q,
.cnx-sec.cnx-bg-dark .cnx-testimonial figcaption,
.cnx-sec.cnx-bg-dark .cnx-quote cite {
  color: var(--color-silk);
}
.cnx-sec.cnx-bg-dark .cnx-quote .cnx-rich p {
  color: var(--color-silk) !important;
}
.cnx-sec.cnx-bg-dark .cnx-package-num {
  color: var(--color-serenity);
}
.cnx-sec.cnx-bg-dark .cnx-why-list li {
  color: var(--color-silk);
}
.cnx-sec.cnx-bg-dark .cnx-rich a {
  color: var(--color-serenity);
}
.cnx-sec.cnx-bg-dark .cnx-field label {
  color: var(--color-silk);
}

/* Visually hidden, still read by screen readers (used by form labels). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* /about/ tagline box (text comes from the homepage About quote). */
.cnx-about-tagline p {
  color: var(--color-serenity);
}

/* ---------- Cart & checkout (inc/shop.php, shop.php) ---------- */
.cnx-package-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.cnx-add-to-cart {
  margin: 0;
}
.cnx-add-to-cart .cnx-btn {
  width: 100%;
  justify-content: center;
}
.cnx-shop-admin-note {
  font-size: 0.8rem;
  color: var(--color-slate);
  max-width: 16rem;
}
.cnx-cart-link[hidden] {
  display: none;
}
.cnx-cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  text-decoration: none;
  color: inherit;
  transition:
    color 0.2s ease,
    transform 0.2s var(--cnx-ease);
}
.cnx-cart-link:hover,
.cnx-cart-link:focus-visible {
  color: var(--color-power-suit);
}
.cnx-cart-link:active {
  transform: scale(0.92);
}
.cnx-cart-link .cnx-cart-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Item count badge, top-right of the cart icon. */
.cnx-cart-count {
  position: absolute;
  top: 0.1rem;
  right: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--color-merlot);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
.cnx-cart-count:empty {
  display: none;
}
.cnx-shop h1 {
  margin-bottom: 1.5rem;
}
.cnx-shop-intro {
  color: var(--color-slate);
  margin-bottom: 2rem;
}
.cnx-shop-subhead {
  font-size: 1.25rem;
  margin: 2rem 0 1rem;
}
.cnx-shop-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-greige);
  margin-bottom: 1.5rem;
}
.cnx-shop-table th,
.cnx-shop-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-greige);
}
.cnx-shop-table thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-slate);
}
.cnx-shop-table tfoot th {
  font-size: 1.1rem;
  color: var(--color-merlot);
  border-bottom: none;
}
.cnx-shop-table .cnx-shop-num {
  text-align: right;
  white-space: nowrap;
}
.cnx-shop-desc {
  display: block;
  font-size: 0.85rem;
  color: var(--color-slate);
  margin-top: 0.25rem;
}
.cnx-shop-qty input {
  width: 4.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-greige);
  font: inherit;
}
.cnx-shop-remove {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-slate);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
}
.cnx-shop-remove:hover {
  color: var(--color-power-suit);
}
.cnx-shop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.cnx-shop-edit {
  text-align: right;
  font-size: 0.85rem;
  margin: -0.75rem 0 2rem;
}
.cnx-shop-terms {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
}
.cnx-shop-terms input {
  margin-top: 0.2rem;
}
.cnx-shop-test {
  font-size: 0.8rem;
  color: var(--color-slate);
  text-align: center;
  margin: 0;
}
.cnx-shop .cnx-notice:not(.cnx-notice-success):not(.cnx-notice-error) {
  background: color-mix(in srgb, var(--color-greige) 45%, white);
  color: var(--color-ink);
}
@media (max-width: 600px) {
  .cnx-shop-table th,
  .cnx-shop-table td {
    padding: 0.75rem;
  }
  .cnx-shop-actions .cnx-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Cart voucher ---------- */
.cnx-shop-discount td {
  color: var(--color-merlot);
  font-weight: 700;
}
.cnx-shop-voucher {
  margin: 1.5rem 0 0;
}
.cnx-shop-voucher-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.cnx-shop-voucher-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.cnx-shop-voucher-row input {
  flex: 1 1 12rem;
  border: 1px solid var(--color-greige);
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  text-transform: uppercase;
  background: var(--color-silk);
  color: var(--color-ink);
}
.cnx-shop-voucher-applied {
  display: inline-block;
  margin: 0 1rem 0 0;
}

/* ---------- Cart add-ons (shown when a starting package is in the cart) ---------- */
.cnx-shop-addons {
  margin: 2.5rem 0;
}
.cnx-shop-addon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.cnx-shop-addon {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem 1.5rem;
  align-items: center;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--color-greige);
}
.cnx-shop-addon-price {
  font-weight: 800;
  color: var(--color-merlot);
  white-space: nowrap;
}
.cnx-shop-addon form {
  margin: 0;
}
.cnx-shop-addon-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
@media (max-width: 600px) {
  .cnx-shop-addon {
    grid-template-columns: 1fr auto;
  }
  .cnx-shop-addon-text {
    grid-column: 1 / -1;
  }
}

/* ---------- Appointment picker (checkout — inc/booking.php + theme.js) ---------- */
.cnx-booking {
  margin: 0 0 2rem;
  padding: 1.5rem;
  border: 1px solid var(--color-greige);
  background: #fff;
}
.cnx-booking-heading {
  padding: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-merlot);
}
.cnx-booking-intro {
  margin: 0.5rem 0 1.25rem;
  font-size: 0.95rem;
}
.cnx-booking-select {
  width: 100%;
  padding: 0.75rem;
}
.cnx-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.cnx-cal-title {
  margin: 0;
  font-weight: 800;
  color: var(--color-ink);
}
.cnx-cal-nav {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-greige);
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-merlot);
}
.cnx-cal-nav:disabled {
  opacity: 0.3;
  cursor: default;
}
.cnx-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.3rem;
  text-align: center;
}
.cnx-cal-dow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
  padding-bottom: 0.25rem;
}
.cnx-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--color-slate) 55%, transparent);
  border: 1px solid transparent;
  background: none;
}
button.cnx-cal-day.has-slots {
  cursor: pointer;
  font-weight: 800;
  color: var(--color-merlot);
  border-color: var(--color-greige);
  background: color-mix(in srgb, var(--color-serenity) 25%, white);
}
button.cnx-cal-day.has-slots:hover {
  border-color: var(--color-merlot);
}
button.cnx-cal-day.is-selected {
  background: var(--color-merlot);
  border-color: var(--color-merlot);
  color: #fff;
}
.cnx-cal-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.cnx-cal-times-label {
  flex-basis: 100%;
  margin: 0 0 0.25rem;
  font-weight: 700;
  color: var(--color-ink);
}
.cnx-cal-time {
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-merlot);
  background: #fff;
  color: var(--color-merlot);
  font-weight: 700;
  cursor: pointer;
}
.cnx-cal-time:hover {
  background: color-mix(in srgb, var(--color-merlot) 8%, white);
}
.cnx-cal-time.is-selected {
  background: var(--color-merlot);
  color: #fff;
}
.cnx-cal-nav:focus-visible,
.cnx-cal-day:focus-visible,
.cnx-cal-time:focus-visible {
  outline: 2px solid var(--color-power-suit);
  outline-offset: 2px;
}
.cnx-booking-chosen {
  margin: 1rem 0 0;
  font-weight: 700;
  color: var(--color-merlot);
}
.cnx-booking-chosen:empty {
  display: none;
}
.cnx-booking-chosen.is-error {
  color: #b32d2e;
}
.cnx-shop > .cnx-container > .cnx-shop-admin-note {
  max-width: none;
  margin: 1.5rem 0;
}

/* Footer bottom bar: optional links (Site Settings → Footer links →
   "Bottom bar") sit next to the social icons. */
.cnx-footer-bottom-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.cnx-footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cnx-footer-bottom-links a {
  font-weight: 400;
  color: var(--color-serenity);
}
.cnx-shop-test-banner {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: #fff3cd;
  border: 1px solid #dba617;
  color: #664d03;
  font-weight: 700;
  text-align: left;
}

/* Spam honeypot on public forms (inc/forms.php) — off-screen, never seen. */
.cnx-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- One footer for the whole site, always in the Connextus fonts
   (Lara's Wardrobe pages swap --font-heading to the serif on <body>; the
   footer resets it). ---------- */
.cnx-footer {
  --font-heading: "Lato", system-ui, -apple-system, sans-serif;
  --font-body: "Lato", system-ui, -apple-system, sans-serif;
  --heading-weight: 800;
  font-family: var(--font-body);
}

/* Footer contact column: email/phone with icons, then the social icons. */
.cnx-footer-contact {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.cnx-footer-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-silk);
  word-break: break-word;
}
.cnx-footer-contact a:hover {
  color: var(--color-serenity);
}
.cnx-footer-contact-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-serenity);
}
.cnx-footer-contact-note {
  display: block;
  margin-left: 1.8rem;
  font-size: 0.85rem;
  color: var(--color-slate);
}
.cnx-footer-social {
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
/* Every footer icon — email, phone and the social links — is the same
   size and colour, whether it's a theme icon, pasted SVG or an upload. */
.cnx-footer .cnx-footer-contact-icon,
.cnx-footer .cnx-social-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  color: var(--color-serenity);
  transition: color 0.2s ease;
}
.cnx-footer .cnx-social-icon svg [fill]:not([fill="none"]),
.cnx-footer .cnx-social-icon svg:not([fill]) {
  fill: currentColor;
}
.cnx-footer .cnx-social-icon svg [stroke]:not([stroke="none"]) {
  stroke: currentColor;
}
.cnx-social-icon--mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: var(--cnx-icon) center / contain no-repeat;
  mask: var(--cnx-icon) center / contain no-repeat;
}
.cnx-footer .cnx-footer-contact a:hover .cnx-footer-contact-icon,
.cnx-footer .cnx-social-links a:hover .cnx-social-icon {
  color: var(--color-silk);
}
.cnx-footer .cnx-social-links {
  gap: 1rem;
}

/* Buttons on phones: a little less padding, and long labels may wrap. */
@media (max-width: 600px) {
  .cnx-btn {
    padding: 0.4rem 0.8rem;
    letter-spacing: 0.125em;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
}

/* ---------- Cards in sections ---------- */
/* Icon above a card's title (Values, or any card with an icon picked). */
.cnx-card-icon {
  display: inline-flex;
  align-items: center;
  /* justify-content: center; */
  width: 100%;
  height: 5rem;
  margin-bottom: 1.5rem;
  color: var(--color-merlot);
}
.cnx-card-icon .cnx-icon {
  width: 40%;
  max-width: 6rem;
  height: auto;
}
.cnx-bg-dark .cnx-card-icon,
.cnx-sec.cnx-bg-dark .cnx-card:not(.cnx-card--plain) .cnx-card-icon,
.cnx-sec.cnx-bg-dark .cnx-value .cnx-card-icon {
  color: var(--color-serenity);
}
/* Images/icons in cards: smaller, so the text leads. */
.cnx-card .cnx-block-media,
.cnx-value .cnx-block-media {
  margin-bottom: 1rem;
}
.cnx-card .cnx-block-media img,
.cnx-value .cnx-block-media img {
  max-height: 3.5rem;
  max-width: 45%;
  width: auto;
  height: auto;
}
/* "Plain" card style: no border or hover lift, but always a background
   colour (Silk unless another is picked — see card_bg in page-builder.php). */
.cnx-card--plain,
.cnx-sec.cnx-bg-dark .cnx-card--plain {
  border: 0;
  padding: 2rem;
}
.cnx-card--plain:not([class*="cnx-bg-"]) {
  background: var(--color-silk);
}
/* The chosen colour wins over the dark-section card tint. */
.cnx-card.cnx-card--plain.cnx-bg-merlot,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-merlot {
  background-color: var(--color-merlot);
}
.cnx-card.cnx-card--plain.cnx-bg-power-suit,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-power-suit {
  background-color: var(--color-power-suit);
}
.cnx-card.cnx-card--plain.cnx-bg-serenity,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-serenity {
  background-color: var(--color-serenity);
}
.cnx-card.cnx-card--plain.cnx-bg-serenity-soft,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-serenity-soft {
  background-color: color-mix(
    in srgb,
    var(--color-serenity) 35%,
    var(--color-silk)
  );
}
.cnx-card.cnx-card--plain.cnx-bg-greige-soft,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-greige-soft {
  background-color: color-mix(
    in srgb,
    var(--color-greige) 35%,
    var(--color-silk)
  );
}
.cnx-card.cnx-card--plain.cnx-bg-silk,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-silk {
  background-color: var(--color-silk);
}
.cnx-card.cnx-card--plain.cnx-bg-ink,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-ink {
  background-color: var(--color-ink);
}
.cnx-card.cnx-card--plain.cnx-bg-greige,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-greige {
  background-color: var(--color-greige);
}
.cnx-card.cnx-card--plain.cnx-bg-slate,
.cnx-sec .cnx-card.cnx-card--plain.cnx-bg-slate {
  background-color: var(--color-slate);
}
/* A light item box inside a dark section keeps dark text. */
.cnx-sec.cnx-bg-dark .cnx-card--plain:not(.cnx-bg-dark),
.cnx-sec.cnx-bg-dark
  .cnx-card--plain:not(.cnx-bg-dark)
  :is(h2, h3, h4, p, .cnx-brow, .cnx-card-number),
.cnx-sec.cnx-bg-dark .cnx-card--plain:not(.cnx-bg-dark) .cnx-rich {
  color: var(
    --color-ink
  ) !important; /* beats the !important light text of .cnx-bg-dark */
}
.cnx-sec.cnx-bg-dark .cnx-card--plain:not(.cnx-bg-dark) .cnx-rich {
  color: var(--color-slate) !important;
}
.cnx-sec.cnx-bg-dark .cnx-card--plain:not(.cnx-bg-dark) .cnx-card-icon {
  color: var(--color-merlot);
  background: color-mix(in srgb, var(--color-serenity) 45%, transparent);
}
.cnx-sec.cnx-bg-dark .cnx-card--plain:not(.cnx-bg-dark) .cnx-rich a,
.cnx-sec.cnx-bg-dark .cnx-card--plain:not(.cnx-bg-dark) a:not(.cnx-btn) {
  color: var(--color-merlot);
}
.cnx-card--plain:hover {
  transform: none;
  box-shadow: none;
}
/* One text colour throughout a card: everything in the description
   (paragraphs, plain lines, lists, bold/italic) uses the same muted
   body colour — titles and numbers keep their own. */
.cnx-card .cnx-rich,
.cnx-value .cnx-rich,
.cnx-package .cnx-rich {
  color: var(--color-slate);
}
.cnx-card .cnx-rich :is(p, li, span, strong, b, em, i, div),
.cnx-value .cnx-rich :is(p, li, span, strong, b, em, i, div),
.cnx-package .cnx-rich :is(p, li, span, strong, b, em, i, div) {
  color: inherit;
}
.cnx-card .cnx-rich a,
.cnx-value .cnx-rich a,
.cnx-package .cnx-rich a {
  color: var(--color-merlot);
}
.cnx-sec.cnx-bg-dark .cnx-card .cnx-rich,
.cnx-sec.cnx-bg-dark .cnx-value .cnx-rich,
.cnx-sec.cnx-bg-dark .cnx-package .cnx-rich {
  color: var(--color-silk);
}
.cnx-sec.cnx-bg-dark .cnx-card .cnx-rich a,
.cnx-sec.cnx-bg-dark .cnx-value .cnx-rich a,
.cnx-sec.cnx-bg-dark .cnx-package .cnx-rich a {
  color: var(--color-serenity);
}

/* Hero on Connextus inner pages built in Site Settings (About, Services,
   Contact, added pages): left-aligned like the original templates. */
.cnx-hero-plain h1 {
  max-width: 40rem;
}
.cnx-hero-plain .cnx-lede {
  max-width: 36rem;
}