/*
 * lupusfreedom.com — theme
 * =========================================================================
 * The redesign layer. Loads last, after site.css (Webflow's generated
 * output) and custom.css (layout corrections), so it can restyle without
 * either of those being touched. Remove the one <link> and the site falls
 * back to the previous look intact.
 *
 * Direction: warm and unhurried, built on purple — the lupus awareness
 * colour, which was already sitting in the stylesheet unused. Red has been
 * retired entirely — calls to action and the wordmark are plum too, so the
 * palette runs on one family. The script wordmark is still the signature.
 *
 * The audience is women managing a chronic illness. The page should feel
 * calm and easy to read, not loud.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  /* colour */
  --lf-plum:      #4e042f;   /* deepest — footer, headings */
  --lf-purple:    #87225c;   /* primary accent */
  --lf-purple-lt: #95326b;   /* hover, secondary */
  --lf-purple-wash:#f4ecf1;  /* tinted bands */
  /* The script face and the wordmark share the button colour, so the
     brand voice and the thing you click read as one. */
  --lf-accent:    #87225c;   /* script titles, wordmark */
  --lf-accent-hv: #4e042f;

  /* Buttons get their own tone so they lift off a page where plum is
     already doing the footer, the bands and the card captions. */
  --lf-cta:       #87225c;   /* purple */
  --lf-cta-hv:    #4e042f;   /* settles to plum on hover */

  /* Webflow's own variable, used in 15 places in site.css. Redefining it
     here re-points every one of those without editing that file. */
  --freedom-red:  #87225c;
  --lf-cream:     #faf7f5;   /* page ground */
  --lf-cream-dp:  #f3ece8;   /* alternate band */
  --lf-ink:       #23201f;   /* body copy */
  --lf-ink-soft:  #5b5451;   /* secondary copy */
  --lf-line:      #e7ded9;   /* hairlines */
  --lf-white:     #ffffff;

  /* type — fluid, roughly a 1.25 scale */
  --lf-t--1: 0.8125rem;
  --lf-t-0:  1.0625rem;
  --lf-t-1:  clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --lf-t-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --lf-t-3:  clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  --lf-t-4:  clamp(2rem, 1.6rem + 1.8vw, 3rem);

  /* spacing */
  --lf-s-1: 8px;
  --lf-s-2: 16px;
  --lf-s-3: 24px;
  --lf-s-4: 36px;
  --lf-s-5: 56px;
  --lf-s-6: 84px;
  --lf-s-7: 120px;

  --lf-radius: 10px;
  --lf-shadow: 0 2px 4px rgba(78, 4, 47, .04), 0 12px 28px rgba(78, 4, 47, .07);
  --lf-shadow-lift: 0 4px 8px rgba(78, 4, 47, .06), 0 20px 44px rgba(78, 4, 47, .12);
  --lf-ease: cubic-bezier(.2, .6, .3, 1);
}

/* ------------------------------------------------------------- the page */
body {
  background-color: var(--lf-cream);
  color: var(--lf-ink);
  font-size: var(--lf-t-0);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Webflow paints several wrappers white; let the warm ground show. */
.section,
.container,
.section.cc-store-home-wrap {
  background-color: transparent;
}

/* ------------------------------------------------------------ headings */
h1, h2, h3, h4, h5, h6,
.about-heading,
.credentials-title,
.heading-8, .heading-12, .heading-13 {
  color: var(--lf-plum);
  line-height: 1.22;
  letter-spacing: -0.005em;
}

/* The script wordmark headings stay script — just warmer and roomier. */
.page-title {
  color: var(--lf-accent);
  font-size: var(--lf-t-4);
  line-height: 1.05;
  margin-bottom: var(--lf-s-3);
}

.about-heading,
.credentials-title {
  font-size: var(--lf-t--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lf-purple);
  margin-bottom: var(--lf-s-2);
}

/* Section eyebrow rules were hard black hairlines. */
.horizontalrule,
.horizontal-rule-colored,
.horizontalrule.horizindell {
  background-color: var(--lf-line);
  border: 0;
  height: 1px;
}
.horizontal-rule-colored { background-color: var(--lf-purple); opacity: .5; }

/* --------------------------------------------------------- body copy */
.about-paragraph,
.text-block-19,
.paragraph-light,
.blog-paragraph,
.rich-text p,
.text-block-31 {
  color: var(--lf-ink);
  font-size: var(--lf-t-0);
  line-height: 1.75;
}

/* Comfortable measure. Long lines are the single biggest readability cost
   on a text-heavy site. */
.about-paragraph,
.rich-text.blog-paragraph p,
.rich-text.blog-paragraph li {
  max-width: 68ch;
}

/* ------------------------------------------------------------- links */
a { color: var(--lf-purple); }
a:hover { color: var(--lf-accent); }

.about-paragraph a,
.rich-text a,
.text-block-31 a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(135, 34, 92, .4);
  transition: text-decoration-color .2s var(--lf-ease), color .2s var(--lf-ease);
}
.about-paragraph a:hover,
.rich-text a:hover,
.text-block-31 a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------- navigation */
.navigation {
  background-color: rgba(250, 247, 245, .92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--lf-line);
}
.navigation-item,
.nav-link-2 {
  color: var(--lf-ink-soft);
  font-size: var(--lf-t--1);
  letter-spacing: .1em;
  transition: color .2s var(--lf-ease);
}
.navigation-item:hover,
.nav-link-2:hover { color: var(--lf-purple); }
.navigation-item.w--current,
.nav-link-2.w--current { color: var(--lf-plum); }

.logo-tagline,
.text-block-8-copy-copy {
  color: var(--lf-ink-soft);
  letter-spacing: .16em;
}
.div-block-39 { background-color: var(--lf-plum); }

/* ------------------------------------------------------------ buttons */
.w-button,
.button,
input[type="submit"].w-button,
.nichelle-nav-cto,
.button-2 {
  border-radius: var(--lf-radius);
  border: 1px solid transparent;
  font-size: var(--lf-t--1);
  letter-spacing: .1em;
  padding: 14px 26px;
  transition: background-color .22s var(--lf-ease),
              color .22s var(--lf-ease),
              border-color .22s var(--lf-ease),
              transform .22s var(--lf-ease),
              box-shadow .22s var(--lf-ease);
}

/* Primary action. Purple rather than plum: plum already carries the
   footer, the CTA band and the card captions, so a button in it recedes. */
.nichelle-nav-cto,
.button-2,
input[type="submit"].w-button {
  background-color: var(--lf-cta);
  border-color: var(--lf-cta);
  color: var(--lf-white);
}
.nichelle-nav-cto:hover,
.button-2:hover,
input[type="submit"].w-button:hover {
  background-color: var(--lf-cta-hv);
  border-color: var(--lf-cta-hv);
  color: var(--lf-white);
  transform: translateY(-1px);
  box-shadow: var(--lf-shadow);
}

/* Controls sitting on the dark bands invert so they stay legible. */
.nichelle-cta-section input[type="submit"],
.nichelle-cta-section .w-button,
.cc-subscribe-form input[type="submit"],
.cc-subscribe-form .w-button,
.cc-subscribe-form .button {
  background-color: var(--lf-white);
  border-color: var(--lf-white);
  color: var(--lf-plum);
}
.nichelle-cta-section input[type="submit"]:hover,
.nichelle-cta-section .w-button:hover,
.cc-subscribe-form input[type="submit"]:hover,
.cc-subscribe-form .w-button:hover,
.cc-subscribe-form .button:hover {
  background-color: var(--lf-cream-dp);
  border-color: var(--lf-cream-dp);
  color: var(--lf-plum);
}

/* -------------------------------------------------------------- forms */
.text-field,
.cc-contact-field,
.cc-subscribe-text-field,
.get-in-touch-form input,
.get-in-touch-form textarea {
  background-color: var(--lf-white);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  color: var(--lf-ink);
  font-size: var(--lf-t-0);
  padding: 13px 15px;
  transition: border-color .2s var(--lf-ease), box-shadow .2s var(--lf-ease);
}
.text-field:focus,
.cc-contact-field:focus,
.cc-subscribe-text-field:focus,
.get-in-touch-form input:focus,
.get-in-touch-form textarea:focus {
  border-color: var(--lf-purple);
  box-shadow: 0 0 0 3px rgba(135, 34, 92, .16);
  outline: none;
}
.nichelle-ctanform-label,
.field-label,
.label {
  color: var(--lf-ink-soft);
  font-size: var(--lf-t--1);
  letter-spacing: .12em;
}

/* Form state messages, restyled from Webflow's grey/red defaults. */
.status-message.cc-success-message { background-color: #1f7a5c; }
.status-message.cc-error-message   { background-color: var(--lf-accent); }
.status-message { border-radius: var(--lf-radius); }

/* ------------------------------------------------------------- bands */
/* The full-width call-to-action band: plum instead of cold charcoal. */
.section.nichelle-cta-section {
  background-color: var(--lf-plum);
  color: var(--lf-white);
}
.nichelle-cta-section .page-title,
.nichelle-cta-section h1,
.nichelle-cta-section h2 { color: var(--lf-white); }
.nichelle-cta-section .paragraph-light,
.nichelle-cta-section .text-block-19 { color: rgba(255, 255, 255, .86); }

/* The newsletter strip: a lighter purple so two dark bands do not stack. */
.section.cc-subscribe-form { background-color: var(--lf-purple); }
.cc-subscribe-form .heading-jumbo-small,
.cc-subscribe-form h2 { color: var(--lf-white); }
.cc-subscribe-form .paragraph-light,
.cc-subscribe-form .cc-subscribe-paragraph { color: rgba(255, 255, 255, .88); }

/* ------------------------------------------------------------- footer */
.section.nichelle-footer {
  background-color: var(--lf-plum);
  color: rgba(255, 255, 255, .78);
}
.nichelle-footer .label {
  color: var(--lf-white);
  letter-spacing: .16em;
  font-size: var(--lf-t--1);
}
.footer-link,
.footer-specialization-link {
  color: rgba(255, 255, 255, .74);
  transition: color .2s var(--lf-ease);
}
.footer-link:hover,
.footer-specialization-link:hover { color: var(--lf-white); }
.nichelle-footer .image-5 {
  opacity: .8;
  transition: opacity .2s var(--lf-ease), transform .2s var(--lf-ease);
}
.nichelle-footer .image-5:hover { opacity: 1; transform: translateY(-2px); }

/* -------------------------------------------------------------- cards */
/* Service cards and article cards: lifted, rounded, quietly interactive. */
.collection-item-2 .link-block,
.collection-item-4 .link-block-8,
.link-block-3 {
  border-radius: var(--lf-radius);
  overflow: hidden;
  box-shadow: var(--lf-shadow);
  transition: transform .28s var(--lf-ease), box-shadow .28s var(--lf-ease);
}
.collection-item-2 .link-block:hover,
.collection-item-4 .link-block-8:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-shadow-lift);
}
.nichelle-specialty-bottom {
  background-color: var(--lf-plum);
}
.nichelle-specialty-name { letter-spacing: .06em; }
.nichelle-specialty-tagline { opacity: .72; }

/* Article meta */
.cc-blog-date, .blog-label { color: var(--lf-purple); letter-spacing: .1em; }

/* ------------------------------------------------------- section rhythm */
/* One vertical rhythm instead of margins ranging from 30px to 90px. */
@media screen and (min-width: 992px) {
  .section:not(.nichelle-cta-section):not(.cc-subscribe-form):not(.nichelle-footer):not(.nichelle-hero) {
    margin-top: var(--lf-s-6);
    margin-bottom: var(--lf-s-6);
  }
  .section.nichelle-cta-section { padding: var(--lf-s-6) var(--lf-s-3); }
}
@media screen and (max-width: 991px) {
  .section:not(.nichelle-cta-section):not(.cc-subscribe-form):not(.nichelle-footer):not(.nichelle-hero) {
    margin-top: var(--lf-s-5);
    margin-bottom: var(--lf-s-5);
  }
}

/* --------------------------------------------------------------- hero */
/* Give the photograph room and let the wordmark breathe. */
.section.nichelle-hero { margin-bottom: 0; }
.div-block-37 { background-color: transparent; }
.button-2 { margin-left: 0; margin-right: 0; }

/* The pull quote under the hero reads as a quote, not body copy. */
.text-block-32 {
  color: var(--lf-plum);
  font-size: var(--lf-t-2);
  line-height: 1.5;
  font-style: italic;
}
.text-block-34 { color: var(--lf-ink-soft); letter-spacing: .1em; }

/* ------------------------------------------------------------ images */
.collection-item-2 img,
.collection-item-4 img,
.blog-header-image { border-radius: 0; }
img { border-radius: 2px; }

/* ------------------------------------------------- reduced motion, a11y */
@media (prefers-reduced-motion: reduce) {
  .collection-item-2 .link-block:hover,
  .collection-item-4 .link-block-8:hover,
  .nichelle-nav-cto:hover,
  .button-2:hover { transform: none; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.w-nav-button:focus-visible {
  outline: 3px solid var(--lf-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
 * Corrections
 * -------------------------------------------------------------------------
 * Webflow's generated rules use two-class selectors in places, which
 * outrank the single-class rules above. These match that specificity, plus
 * fixes for contrast problems the new palette exposed.
 * ===================================================================== */

/* Service card caption bars were hard black (.div-block-3.nichelle-specialty-bottom). */
.div-block-3.nichelle-specialty-bottom {
  background-color: var(--lf-plum);
  color: var(--lf-white);
  opacity: 1;
}
.div-block-3.nichelle-specialty-bottom:hover { opacity: 1; }

/* The whole card is one <a>; text-decoration propagates to everything inside.
   Underline the title only. */
.collection-item-2 .link-block { text-decoration: none; }
.collection-item-2 .link-block:hover { transform: none; box-shadow: var(--lf-shadow-lift); }
.collection-item-2 .link-block:hover .nichelle-specialty-name { text-decoration: underline; }
.nichelle-specialty-tagline { text-decoration: none; }

/* --- links on the dark bands ------------------------------------------
 * Body links are purple, which disappears on plum. Inside a dark band they
 * go light. The newsletter blurb had a stock-blue <a> that clashed badly. */
.nichelle-cta-section a,
.cc-subscribe-form a,
.nichelle-footer a {
  color: var(--lf-white);
  text-decoration-color: rgba(255, 255, 255, .45);
}
.nichelle-cta-section a:hover,
.cc-subscribe-form a:hover { color: var(--lf-cream-dp); }
.cc-subscribe-form .text-span,
.cc-subscribe-form strong { color: var(--lf-white); }

/* --- contact panel -----------------------------------------------------
 * Was #f5f5f5 with a 1px #b4b2b2 border and square corners: a cold grey box
 * sitting on a warm ground. Now a soft white card. */
.div-block-23 {
  background-color: var(--lf-white);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
}
@media screen and (min-width: 992px) {
  .div-block-23 { padding: var(--lf-s-6); }
}
/* The "Get in touch!" script heading was 72px, larger than the page title. */
.heading-9 {
  color: var(--lf-accent);
  font-size: var(--lf-t-3);
  margin-bottom: var(--lf-s-3);
}

/* --- footer social icons -----------------------------------------------
 * The icons are dark artwork; on the old near-black footer they were dim,
 * and on plum they still are. Lift them to near-white. */
.nichelle-footer .image-5,
.nichelle-footer .link-block-3 img {
  filter: brightness(0) invert(1);
  opacity: .78;
}
.nichelle-footer .image-5:hover,
.nichelle-footer .link-block-3 img:hover { opacity: 1; }

/* --- the "ARE YOU / DO YOU" block --------------------------------------
 * The labels sat in a half-width column, right-aligned, leaving a wide
 * empty gutter. Pull the two halves together. */
@media screen and (min-width: 992px) {
  .section-4 .columns-5 { display: flex; align-items: flex-start; gap: var(--lf-s-4); }
  .section-4 .columns-5:before,
  .section-4 .columns-5:after { display: none; }
  .section-4 .column-11 { flex: 0 0 auto; width: auto; min-width: 160px; }
}

/* The hero pull quote: plum, and not wider than it needs to be. */
.text-block-32 { max-width: 34ch; margin-left: auto; margin-right: auto; }

/* Success / error messages: match the palette rather than Webflow's stock
   green and pink. Two classes, to outrank site.css. */
.status-message.cc-success-message { background-color: #1f7a5c; color: #fff; }
.status-message.cc-error-message   { background-color: var(--lf-accent); color: #fff; }

/* Fields on a white panel need to read as fields. Tint them and give the
   border enough weight to be seen; on the dark bands they stay white. */
.text-field,
.cc-contact-field,
.get-in-touch-form input,
.get-in-touch-form textarea {
  background-color: #fbf8f6;
  border-color: #9c8379;
}
.nichelle-cta-section .text-field,
.nichelle-cta-section input,
.nichelle-cta-section textarea,
.cc-subscribe-form .text-field,
.cc-subscribe-form .cc-subscribe-text-field {
  background-color: var(--lf-white);
  border-color: var(--lf-white);
}

/* --- privacy policy ----------------------------------------------------
 * This page was built dark (body.privacy-body, #1f1f1f, white text), which
 * made it the one black page in a warm site — and once headings became
 * plum they were all but invisible on it. Bring it onto the same ground as
 * everything else. The .privacy-text rules set white text, so they have to
 * be answered directly. */
body.privacy-body { background-color: var(--lf-cream); }
.privacy-body .privacy-text,
.privacy-body .div-block-25.privacy-text,
.privacy-body .privacy-text p,
.privacy-body .privacy-text li,
.privacy-body .privacy-text span {
  color: var(--lf-ink);
}
.privacy-body .page-title.privacy-text { color: var(--lf-accent); }
.privacy-body .privacy-text h1,
.privacy-body .privacy-text h2,
.privacy-body .privacy-text h3,
.privacy-body .privacy-text h4 { color: var(--lf-plum); }
.privacy-body .privacy-text a { color: var(--lf-purple); }
.privacy-body .horizontal-rule-colored.horiz-rule-priv,
.privacy-body .horizontal-rule-colored.horiz-narrow.horiz-rule-priv {
  border-color: var(--lf-line);
  background-color: var(--lf-line);
}

/* --- contact form fields ------------------------------------------------
 * site.css paints these white with a white border via .text-field
 * .cc-contact-field, and strips the border entirely on the textarea via a
 * three-class selector. That was invisible-but-survivable while the panel
 * behind them was grey; on the white panel the fields disappeared
 * completely. Match the specificity and give them a real edge. */
.text-field.cc-contact-field,
.text-field.cc-textarea.cc-contact-field {
  background-color: #fbf8f6;
  border: 1px solid #9c8379;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--lf-radius);
}
.text-field.cc-contact-field:focus,
.text-field.cc-textarea.cc-contact-field:focus {
  border-color: var(--lf-purple);
  box-shadow: 0 0 0 3px rgba(135, 34, 92, .16);
}