/* ===========================
   Home Page Styles – HomeCare Unlocked
   =========================== */

:root {
  /* Brand palette */
  --cyan-bright:  #4ECADB;  /* large section headings */
  --cyan-medium:  #2DB4C6;
  --teal-primary: #0F7C86;
  --teal-dark:    #0A6B74;

  --navy-deep:    #1A3E47;  /* hero + big CTA strips */
  --navy-darker:  #0F2A31;  /* pattern cards */

  --gold-light:   #D4B896;
  --gold-medium:  #C7A672;
  --gold-primary: #B8954D;

  --page-bg:      #F3F5F9;  /* light cool grey, matches mock */
  --card-bg:      #FFFFFF;

  --text-main:    #172228;
  --text-muted:   #5A646A;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont,
               "SF Pro Text", system-ui, Helvetica, Arial, sans-serif;
}

/* Reset-ish */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body.site {
  font-family: var(--font-sans);
  background-color: var(--page-bg);
  color: var(--text-main);
  line-height: 1.6;
}

/* Layout helpers */

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

.container-narrow {
  max-width: 820px;
}

.section {
  padding: 3.5rem 0;
}

.section--tight {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Typography helpers */

.body-copy,
.body-copy p {
  font-size: 0.98rem;
  color: var(--text-muted);
}

.body-copy p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.body-copy ul {
  margin: 0 0 1.2rem 1.2rem;
  padding: 0;
}

.body-copy li {
  margin-bottom: 0.45rem;
}

/* Top nav */

.top-bar {
  background-color: var(--card-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.75rem;
}

.brand-logo {
  height: 96px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.9rem;
  font-size: 0.9rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--teal-dark);
}

/* HERO */

.hero {
  background-color: var(--navy-deep);
  color: #ffffff;
  padding: 3.5rem 0;
  text-align: center;
}

.hero-inner {
  padding: 1rem 0;
}

.hero h1 {
  margin: 0 0 0.9rem;
  font-size: clamp(2.2rem, 2.8vw + 2rem, 3rem);
  letter-spacing: 0.06em;      /* a bit tighter than before */
  text-transform: uppercase;
  font-weight: 900;            /* heavier like the mock */
  color: var(--cyan-bright);   /* <<< cyan instead of white */
}


.hero-subtitle {
  margin: 0;
  font-size: 1.05rem;
}

/* INTRO SECTION (big cyan headline) */

.section-intro {
  background-color: var(--page-bg);
}

.section-title {
  margin: 0 0 1.8rem;
  font-size: 1.9rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--cyan-bright);
}

.section-title span {
  display: block;
}

/* Two CTA cards */

.cta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.3rem;
}

.cta-card {
  background-color: var(--navy-deep);
  color: #ffffff;
  padding: 2rem 2rem 1.8rem;
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.cta-card h3 {
  margin: 0 0 1.35rem;
  font-size: 1.15rem;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.6rem;           /* bigger pill */
  border-radius: 999px;
  border: none;
  text-decoration: none;
  font-weight: 700;                  /* a bit bolder */
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s ease,
              box-shadow 0.08s ease,
              background-color 0.15s ease;
}

.btn--primary {
  background-color: var(--teal-primary);   /* darker teal */
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.btn--primary:hover {
  background-color: var(--teal-primary);     /* even darker on hover */
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}


/* “Growth breaks…” */

.section-growth {
  background-color: var(--page-bg);
}

.section-growth-heading {
  margin: 0 0 1.5rem;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cyan-bright);
}

/* Divider before “The Four Patterns” */

.divider {
  border: none;
  border-top: 2px solid var(--teal-primary);
  margin: 2.4rem 0 1.8rem;
}

/* “The Four Patterns” */

.section-patterns {
  background-color: var(--page-bg);
  padding-top: 0;
}

.section-heading-bar {
  text-align: center;
  margin: 0 0 1.8rem;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--cyan-bright);
}

/* Pattern cards */

.pattern-card {
  background-color: var(--navy-deep);
  color: #f5fbfc;
  padding: 1.7rem 1.8rem 1.6rem;
  border-radius: 14px;
  margin-bottom: 1.3rem;
}

.pattern-title {
  margin: 0 0 0.85rem;
  font-size: 1.15rem;
  color: var(--gold-primary);
}

.pattern-card p {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

/* “Which one are you?” strip */

.section-which {
  padding-top: 0.5rem;
  padding-bottom: 3rem;
}

.cta-strip {
  background-color: var(--navy-deep);
  color: #ffffff;
  border-radius: 14px;
  padding: 1.4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.cta-strip-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.cta-strip-buttons .btn {
  min-width: 170px;
}

/* Framework + Outcomes */

.section-framework {
  background-color: var(--page-bg);
  padding-top: 0;
}

.section-framework-heading {
  margin: 0 0 1.2rem;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--cyan-bright);
}

.framework-eyebrow {
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-main);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.step-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.97rem;
  color: var(--text-muted);
}

.step-list li {
  margin-bottom: 0.55rem;
}

/* Outcomes */

.section-outcomes {
  background-color: var(--page-bg);
  padding-top: 0;
}

.outcomes-heading {
  margin: 0 0 1.4rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
}

.outcomes-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.outcome-item {
  margin-bottom: 1.1rem;
}

.outcome-item strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text-main);
}

/* Big CTA: Start Your Transformation */



/* Book section */

.section-book {
  background-color: var(--page-bg);
  padding-top: 1.5rem;
}

.section-book-heading {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cyan-bright);
}

.section-book-subtitle {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-main);
}

.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2.25rem;
  align-items: flex-start;
  margin-top: 2.3rem;
}

.book-cover img {
  max-width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

.book-copy .btn {
  margin-top: 1rem;
}

/* Email / Stay Connected */

.section-email {
  background-color: var(--page-bg);
  padding-top: 2.4rem;
}

.email-heading-main {
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cyan-bright);
}

.email-heading-sub {
  margin: 0 0 1.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-main);
}

.email-strip {
  margin-top: 1.6rem;
  background-color: var(--navy-deep);
  color: #ffffff;
  border-radius: 14px;
  padding: 1.4rem 2.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.email-strip-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.email-strip .btn {
  min-width: 170px;
}

.email-fine-print {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Footer */

.site-footer {
  background-color: var(--navy-deep);
  padding: 2.25rem 0 2.5rem;
  color: #d5e5e8;
  margin-top: 2.5rem;
}

.footer-inner {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.footer-logo-wrap {
  margin-bottom: 1rem;
}

.footer-logo {
  height: 96px;
  width: auto;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.2rem;
  font-size: 0.9rem;
}

.footer-nav a {
  color: #d5e5e8;
  text-decoration: none;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.footer-rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  margin: 0 auto 1rem;
  max-width: 90%;
}

.footer-copy {
  font-size: 0.8rem;
}

/* Responsive tweaks */

@media (max-width: 960px) {
  .two-column {
    grid-template-columns: 1fr;
  }

  .book-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .nav-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .nav-links {
    gap: 1.25rem;
    font-size: 0.82rem;
  }

  .section {
    padding: 2.6rem 0;
  }

  .cta-grid {
    grid-template-columns: 1fr;
  }

  .cta-strip,
  .cta-bar,
  .email-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-strip-buttons .btn,
  .email-strip .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1.1rem;
  }

  .hero {
    padding: 2.75rem 0;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .cta-strip,
  .email-strip {
    padding: 1.2rem 1.3rem;
  }
}
.section-patterns .body-copy {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
/* ===== FRAMEWORK + OUTCOMES section ===== */
.section-framework {
  background: #f4f6f7;            /* light grey like screenshot */
  padding: 72px 0;
}

.container-narrow {
  max-width: 760px;               /* keeps it “narrow” like screenshot */
  margin: 0 auto;
  padding: 0 24px;
}

.section-framework-heading {
  margin: 0 0 18px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  font-weight: 800;
  color: #62cfd7;                 /* teal heading */
  letter-spacing: -0.02em;
}

.body-copy p {
  margin: 0 0 26px;
  font-size: 20px;
  line-height: 1.55;
  color: #1b2b33;
}

/* KEY: make your “two-column” stack like the screenshot */
.two-column {
  display: grid;
  grid-template-columns: 1fr;     /* one column */
  gap: 36px;
}

/* Headings */
.framework-eyebrow,
.outcomes-heading {
  margin: 22px 0 14px;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  color: #1b2b33;
}

/* Lists: remove default bullets/indent and control spacing */
.step-list,
.outcomes-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-list li,
.outcome-item {
  margin: 0 0 22px;
}

.step-list li strong,
.outcome-item strong {
  display: block;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: #1b2b33;
  margin-bottom: 6px;
}

.step-list li p,
.outcome-item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #32444f;
  max-width: 70ch;                /* keeps paragraphs readable */
}

/* Optional: make the final line look more “statement-y” */
.section-framework .body-copy[style] p {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 500;
  color: #1b2b33;
  margin-top: 24px;
}

/* ===== OPTIONAL: if you ever want 2 columns on wide screens, enable this ===== */
/*
@media (min-width: 980px) {
  .two-column {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
}
*/
.body-copy--patterns-summary{
  max-width: 900px;
  margin: 0 auto;   /* centers it */
}
.section-book-intro { margin-bottom: 28px; }

.book-walks{
  font-weight: 600;
  margin: 8px 0 12px;
}

.book-bullets{
  margin: 0 0 20px;
  padding-left: 22px; /* bullet indent */
}

.book-bullets li{
  margin: 0 0 10px;
}

.book-close{
  margin: 0;
}
/* HOMEPAGE: make body-copy match the main paragraph look */
.body-copy{
  color: #172228;     /* same as main text */
  font-size: 1rem;    /* match the main paragraph size */
  line-height: 1.7;   /* Visily-ish spacing */
}

.body-copy p{
  margin: 0 0 1.25rem;
}
/* Make the muted paragraphs match the main paragraph size */
.section-intro .body-copy{
  font-size: inherit;   /* same size as the other paragraphs */
  line-height: inherit;
}

/* If those top paragraphs are 1rem and you want to force it: */
.section-intro{
  font-size: 1rem;
  line-height: 1.7;
}
.container-narrow .body-copy{
  font-size: 1rem;
  line-height: 1.7;
}
/* Fix: make body-copy paragraphs the SAME size as the other paragraphs */
.section-intro .body-copy p{
  font-size: inherit;
  color: inherit;
}
.body-copy p{
  font-size: inherit;
  color: inherit;
}
.section-cta-strip{
  padding: 2.5rem 0;
}

.cta-strip{
  background: #1A3E47;              /* your navy */
  border-radius: 18px;
  padding: 2.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cta-strip__title{
  margin: 0;
  color: #fff;
  font-size: 2.25rem;
  font-weight: 800;
}

.cta-strip__btn{
  background: #0F7C86;              /* teal button */
  color: #fff;
  text-decoration: none;
  padding: 0.85rem 2.25rem;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.cta-strip__btn:hover{
  background: #0A6B74;              /* darker teal */
}

/* responsive */
@media (max-width: 720px){
  .cta-strip{
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-strip__title{
    font-size: 1.8rem;
  }
}
/* --- Responsive containers (fluid + capped) --- */
.container,
.container-wide,
.container-narrow{
  width: min(1280px, calc(100% - 3.5rem));
  margin: 0 auto;
}

.container-narrow{
  width: min(980px, calc(100% - 3.5rem));
}

.container-wide{
  width: min(1280px, calc(100% - 3.5rem));
}
/* Mobile fix: prevent CTA buttons from overflowing cards */
@media (max-width: 768px) {
  .btn {
    width: 100%;
    max-width: 100%;
    white-space: normal;      /* allow wrapping on small screens */
    text-align: center;
    justify-content: center;
    line-height: 1.2;
    padding: 0.85rem 1rem;    /* smaller horizontal padding */
    box-sizing: border-box;
  }

  /* If your CTA cards use a button inside them, this helps center/contain it */
  .cta-card .btn,
  .tool-card .btn,
  .story-cta-card .btn {
    display: flex;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .btn {
    width: 100%;
    max-width: 100%;
    font-size: 0.95rem;
    padding: 0.75rem 0.9rem;
    white-space: nowrap;
  }
}
/* BUSINESS OUTCOMES = bullet points only */
.outcomes-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0;
}

.outcome-item {
  margin: 0 0 12px;
}

.outcome-item strong {
  display: inline;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
  color: #1b2b33;
  margin: 0;
}

.outcome-item p {
  display: none;
}