/**
 * 7 Stages redesign — mirrors 7stages.drbrucehoffman.com
 * Webflow HTML/SEO structure unchanged; visual layer only.
 */

:root {
  --color-bg: #fdfaf6;
  --color-bg-alt: #f5f0e8;
  --color-bg-dark: #1a1a2e;
  --color-text: #2d2d2d;
  --color-text-light: #5a5a5a;
  --color-text-white: #ffffff;
  --color-accent: #6b4c3b;
  --color-accent-hover: #5a3d2f;
  --color-border: #e0d5c7;
  --color-cta: #2563eb;
  --color-cta-hover: #1d4ed8;
  --font-heading: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Instrument Sans", "Work Sans", system-ui, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);

  --accent: #6b4c3b;
  --jwelshgrey: #fdfaf6;
  --jwelshbg: #f5f0e8;
  --black: #2d2d2d;
}

html {
  scroll-behavior: smooth;
}

html[data-theme="7stages"],
html[data-theme="7stages"] body,
html[data-theme="7stages"] .body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Hide decorative Webflow bg watermark */
html[data-theme="7stages"] .bgimage {
  display: none;
}

/* ===== TYPOGRAPHY ===== */

html[data-theme="7stages"] h1,
html[data-theme="7stages"] h2,
html[data-theme="7stages"] h3,
html[data-theme="7stages"] h4,
html[data-theme="7stages"] .hero-display,
html[data-theme="7stages"] .hero-display-2,
html[data-theme="7stages"] .hero-display-3,
html[data-theme="7stages"] .hero-display-4,
html[data-theme="7stages"] .hero__heading,
html[data-theme="7stages"] .services__heading,
html[data-theme="7stages"] .about__heading,
html[data-theme="7stages"] .blog__heading,
html[data-theme="7stages"] .blogheading,
html[data-theme="7stages"] .singleblog__heading,
html[data-theme="7stages"] .treatmentspagespec__heading,
html[data-theme="7stages"] .treatmentssubheading,
html[data-theme="7stages"] .treatmentheading,
html[data-theme="7stages"] .bloggridcontent__heading,
html[data-theme="7stages"] .blogfeed__title,
html[data-theme="7stages"] .sectionheading,
html[data-theme="7stages"] .consultheading,
html[data-theme="7stages"] .welcome__heading,
html[data-theme="7stages"] .w-richtext h1,
html[data-theme="7stages"] .w-richtext h2,
html[data-theme="7stages"] .w-richtext h3 {
  font-family: var(--font-heading);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

html[data-theme="7stages"] .hero-display-2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.12;
}

html[data-theme="7stages"] .italic-text,
html[data-theme="7stages"] .display-variation em {
  font-family: var(--font-heading);
  font-style: italic;
}

html[data-theme="7stages"] p,
html[data-theme="7stages"] .text-base,
html[data-theme="7stages"] .text-base-2,
html[data-theme="7stages"] .text-base-3,
html[data-theme="7stages"] .hero_text-description,
html[data-theme="7stages"] .services__text,
html[data-theme="7stages"] .treatmentspagespec__desc,
html[data-theme="7stages"] .paragraph,
html[data-theme="7stages"] .blogdesc,
html[data-theme="7stages"] .singleblog__richtext,
html[data-theme="7stages"] .w-richtext p {
  font-family: var(--font-body);
  color: var(--color-text-light);
  line-height: 1.65;
}

html[data-theme="7stages"] .about__subheading,
html[data-theme="7stages"] .blogsubheading {
  font-family: var(--font-body);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 600;
}

html[data-theme="7stages"] .w-richtext a {
  color: var(--color-cta);
}

html[data-theme="7stages"] .text-span {
  color: var(--color-accent);
}

/* ===== NAV ===== */

html[data-theme="7stages"] .nav.nav--light {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  padding-top: 8px;
  padding-bottom: 8px;
}

html[data-theme="7stages"] .headernav__item,
html[data-theme="7stages"] .headernav__item.headernav__item--light,
html[data-theme="7stages"] .headernav__item.headernav__item--light.fontsize-16 {
  font-family: var(--font-body);
  color: var(--color-text);
  letter-spacing: 0;
  font-weight: 500;
  font-size: 15px;
  border-bottom: 2px solid transparent;
}

html[data-theme="7stages"] .headernav__item.headernav__item--light:hover,
html[data-theme="7stages"] .headernav__item.headernav__item--light.fontsize-16:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

html[data-theme="7stages"] .headernav__item.headernavnew__item--cta,
html[data-theme="7stages"] .headernav__item.headernav__item--cta {
  background-color: var(--color-cta);
  color: var(--color-text-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

html[data-theme="7stages"] .headernav__item.headernavnew__item--cta:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-text-white);
  transform: translateY(-1px);
}

html[data-theme="7stages"] .sub-nav_wrap,
html[data-theme="7stages"] .w-dropdown-list {
  background: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

html[data-theme="7stages"] .header_sub-nav_item,
html[data-theme="7stages"] .w-dropdown-link {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* ===== PRIMARY CTAs (explicit classes only — NOT all .w-button) ===== */

html[data-theme="7stages"] .aboutcta--primary,
html[data-theme="7stages"] .herocta--primary,
html[data-theme="7stages"] .button1,
html[data-theme="7stages"] .primary-button,
html[data-theme="7stages"] .primary-button.border-on-hover,
html[data-theme="7stages"] .blogcta,
html[data-theme="7stages"] .blogcta__button,
html[data-theme="7stages"] .consultcta__button,
html[data-theme="7stages"] .signupcta__button,
html[data-theme="7stages"] .form__submit,
html[data-theme="7stages"] .w-form-form input[type="submit"],
html[data-theme="7stages"] .servicescta__wrap > .w-button,
html[data-theme="7stages"] .button_wrapper > .w-button,
html[data-theme="7stages"] .herocta__wrap > .w-button,
html[data-theme="7stages"] .about .herocta__wrap .w-button {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  background-color: var(--color-cta);
  color: var(--color-text-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  transition: background-color 0.25s, transform 0.2s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

html[data-theme="7stages"] .aboutcta--primary:hover,
html[data-theme="7stages"] .herocta--primary:hover,
html[data-theme="7stages"] .button1:hover,
html[data-theme="7stages"] .primary-button:hover,
html[data-theme="7stages"] .blogcta:hover,
html[data-theme="7stages"] .button_wrapper > .w-button:hover,
html[data-theme="7stages"] .servicescta__wrap > .w-button:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-text-white);
  transform: translateY(-2px);
}

html[data-theme="7stages"] .herocta--secondary,
html[data-theme="7stages"] .aboutcta--outline,
html[data-theme="7stages"] .button1.is-white,
html[data-theme="7stages"] .button1.is-secondary {
  font-family: var(--font-body);
  text-transform: none;
  background-color: var(--color-text-white);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font-weight: 600;
}

html[data-theme="7stages"] .herocta--secondary:hover,
html[data-theme="7stages"] .aboutcta--outline:hover,
html[data-theme="7stages"] .button1.is-white:hover {
  background-color: var(--color-bg-alt);
  border-color: var(--color-text);
}

/* ===== HERO ===== */

html[data-theme="7stages"] .section_hero {
  background-color: var(--color-bg-alt);
  margin-top: 0;
  padding: 72px 0 56px;
}

html[data-theme="7stages"] .section_hero .hero_img-wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5;
  max-height: 540px;
}

html[data-theme="7stages"] .section_hero .hero_img-wrapper .image,
html[data-theme="7stages"] .section_hero .hero_img-wrapper .homepage-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Portrait crop: head higher in frame, more torso visible below. */
  object-position: 50% 42%;
  display: block;
}

html[data-theme="7stages"] .section_hero .hero_content {
  align-items: center;
}

/* ===== SPECIALISATION CARDS (7 Stages pillar style) ===== */

html[data-theme="7stages"] .section.section--light {
  background-color: var(--color-bg);
}

html[data-theme="7stages"] .treatmentspagespec__wrap {
  padding: 80px 24px 72px;
  gap: 48px;
}

html[data-theme="7stages"] .treatmentspagespec__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  max-width: 640px;
  margin: 0 auto;
}

html[data-theme="7stages"] .treatmentspagespec__desc {
  font-size: 1.05rem;
  max-width: 720px;
  margin: 0 auto;
}

html[data-theme="7stages"] .treatmentspgspeccard__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

html[data-theme="7stages"] .treatpagespec__card {
  background-color: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-bottom-width: 1px;
  border-radius: var(--radius-lg);
  padding: 40px 28px 36px;
  box-shadow: var(--shadow-card);
  gap: 20px;
  transition: box-shadow 0.2s, transform 0.2s;
}

html[data-theme="7stages"] .treatpagespec__card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}

html[data-theme="7stages"] .treatpgspeccard__icon {
  max-width: 56px;
  max-height: 56px;
  opacity: 0.85;
}

html[data-theme="7stages"] .treatpgspeccard__title {
  font-family: var(--font-heading);
  color: var(--color-text);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

html[data-theme="7stages"] .treatpgspeccard__link {
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  transition: background-color 0.2s, border-color 0.2s;
}

html[data-theme="7stages"] .treatpgspeccard__link:hover {
  background-color: var(--color-bg-alt);
  border-color: var(--color-text);
  color: var(--color-text);
}

html[data-theme="7stages"] .treatpgspeccard__link .text-block-10,
html[data-theme="7stages"] .treatpgspeccard__link .text-block-11,
html[data-theme="7stages"] .treatpgspeccard__link .text-block-12 {
  color: inherit;
}

/* ===== SERVICES GRID ===== */

html[data-theme="7stages"] .services {
  background-color: var(--color-bg-alt);
}

html[data-theme="7stages"] .services__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--color-text);
}

html[data-theme="7stages"] .services__text {
  color: var(--color-text-light);
}

html[data-theme="7stages"] .service__wrap {
  background-color: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 24px;
}

html[data-theme="7stages"] .service__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

html[data-theme="7stages"] .serviceitem {
  font-family: var(--font-body);
  color: var(--color-text-light);
  font-size: 0.95rem;
}

/* ===== ABOUT + BLOG HOME SECTIONS ===== */

html[data-theme="7stages"] .about {
  background-color: var(--color-bg);
}

html[data-theme="7stages"] .about__heading {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 600;
}

html[data-theme="7stages"] .aboutimage__wrap img {
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

html[data-theme="7stages"] .blog {
  background-color: var(--color-bg);
}

html[data-theme="7stages"] .blog__wrap {
  background-color: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

html[data-theme="7stages"] .blogcategory__badge {
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

html[data-theme="7stages"] .bloggrid__cta {
  color: var(--color-cta);
  font-weight: 600;
  font-family: var(--font-body);
}

html[data-theme="7stages"] .blogdate {
  font-family: var(--font-body);
  color: var(--color-text-light);
  font-size: 0.875rem;
}

/* ===== BLOG LISTING PAGE ===== */

html[data-theme="7stages"] .blogsearch__input {
  background: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

html[data-theme="7stages"] .topicsbadge,
html[data-theme="7stages"] .topictag {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
}

html[data-theme="7stages"] .blog.scollection .blog,
html[data-theme="7stages"] .blogsfeed .blog {
  background: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ===== TREATMENT / INNER PAGES ===== */

html[data-theme="7stages"] .treatpgtreat__card {
  background-color: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

html[data-theme="7stages"] .treatmentcard,
html[data-theme="7stages"] .treatment__card {
  background: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ===== FORMS ===== */

html[data-theme="7stages"] .w-input,
html[data-theme="7stages"] .w-select,
html[data-theme="7stages"] .w-textarea {
  font-family: var(--font-body);
  background: var(--color-text-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

html[data-theme="7stages"] .w-input:focus,
html[data-theme="7stages"] .w-select:focus,
html[data-theme="7stages"] .w-textarea:focus {
  border-color: var(--color-cta);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ===== FOOTER ===== */

html[data-theme="7stages"] .footer {
  background-color: var(--color-bg-dark);
}

html[data-theme="7stages"] .footerlinks,
html[data-theme="7stages"] .footerlinks__heading,
html[data-theme="7stages"] .footercopyright__text {
  font-family: var(--font-body);
}

html[data-theme="7stages"] .divider {
  background-color: rgba(255, 255, 255, 0.12);
}

/* ===== LEGACY COLOR SWEEP ===== */

html[data-theme="7stages"] [class*="treatment"],
html[data-theme="7stages"] .faqquestion,
html[data-theme="7stages"] .accordion__question {
  font-family: var(--font-heading);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991px) {
  html[data-theme="7stages"] .treatmentspgspeccard__wrap {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  html[data-theme="7stages"] .treatpagespec__card {
    padding: 32px 24px;
  }

  html[data-theme="7stages"] .services__grid {
    width: 100%;
  }
}

@media (max-width: 767px) {
  html[data-theme="7stages"] .section_hero {
    padding: 48px 0 40px;
  }

  html[data-theme="7stages"] .hero-display-2 {
    font-size: 1.85rem;
  }
}