/*==================================================
  Rebecca Bean Consulting
  Warm Professional Design System
==================================================*/


/*=========================
  BRAND VARIABLES
=========================*/

:root {

    --navy: #004AAD;
    --orange: #FF940E;
    --gold: #FEB803;
    --cream: #FFEBD2;

    --warm-bg: #FFF9F2;
    --light-bg: #F7F9FC;

    --dark: #222222;
    --gray: #666666;
    --white: #FFFFFF;

    --border: #E8E8E8;

    --radius: 14px;

    --shadow:
        0 10px 30px rgba(0,0,0,0.08);

}


/*=========================
  RESET
=========================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: "Open Sans", Arial, sans-serif;

    color: var(--dark);

    line-height: 1.7;

    background: var(--white);

}


img {

    max-width:100%;

    display:block;

}


a {

    text-decoration:none;

}



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


h1,
h2,
h3 {

    font-family:"Poppins", Arial, sans-serif;

    color:var(--navy);

    line-height:1.2;

}


h1 {

    font-size:3.5rem;

    margin-bottom:25px;

}


h2 {

    font-size:2.4rem;

    margin-bottom:20px;

}


h3 {

    font-size:1.25rem;

    margin-bottom:12px;

}


p {

    margin-bottom:20px;

}


.eyebrow {

    color:var(--orange);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:1.1rem;

    font-weight:700;

    margin-bottom:18px;

}



/*=========================
  CONTAINER
=========================*/


.container {

    width:min(1120px, 92%);

    margin:auto;

}



/*=========================
  BUTTONS
=========================*/


.btn {

    display:inline-block;

    padding:15px 30px;

    border-radius:var(--radius);

    font-weight:700;

    transition:.3s ease;

}


.btn-primary {

    background:var(--orange);

    color:white;

}


.btn-primary:hover {

    transform:translateY(-3px);

}


.btn-secondary {

    border:2px solid var(--navy);

    color:var(--navy);

    background:white;

}


.btn-secondary:hover {

    background:var(--navy);

    color:white;

}



/*=========================
  HEADER
=========================*/


.site-header {

    background:white;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:1000;

}


.nav-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}



.logo {
    position: relative;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    text-decoration: none;
}

.logo-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;

    opacity: 0;

    animation: logo-rise 0.9s ease-out forwards;
}

.logo-text {
    display: block;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--navy);
}

.logo-text small {
    display: block;
    margin-top: 3px;

    font-family: "Open Sans", Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--gray);
}

@keyframes logo-rise {

    0% {
        opacity: 0;
        transform: translate(-25px, 35px);
    }

    55% {
        opacity: 1;
        transform: translate(5px, -8px);
    }

    75% {
        transform: translate(0, 3px);
    }

    90% {
        transform: translate(0, -2px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }

}



.main-nav {

    display:flex;

    gap:28px;

}



.main-nav a {

    color:var(--dark);

    font-weight:600;

}



.main-nav a:hover {

    color:var(--orange);

}



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


.hero {

    background:

    linear-gradient(
        180deg,
        white,
        var(--warm-bg)
    );

    padding:100px 0;

}



.hero-grid {

    display:grid;

    grid-template-columns:1.7fr 1fr;

    gap:70px;

    align-items:center;

}



.hero-text {

    font-size:1.15rem;

    color:var(--gray);

}



.hero-buttons {

    margin-top:35px;

}



.hero-buttons .btn {

    margin-right:15px;

}



.hero-highlight {

    background:white;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border-top:5px solid var(--orange);

}



.hero-highlight ul {

    list-style:none;

}



.hero-highlight li {

    margin-bottom:12px;

}



/*=========================
  FRAMEWORK
=========================*/


.framework {

    background:var(--warm-bg);

    padding:90px 0;

}



.section-heading {

    text-align:center;

    max-width:750px;

    margin:auto;

}



.framework-circles {

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:25px;

    margin-top:60px;

}



.framework-step {

    text-align:center;

}



.circle {

    width:80px;

    height:80px;

    border-radius:50%;

    background:var(--navy);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    font-weight:bold;

    margin:0 auto 20px;

}



.framework-step p {

    color:var(--gray);

    font-size:.95rem;

}



/*=========================
  CARDS
=========================*/


.challenges {

    padding:90px 0;

}



.card-grid,
.service-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:40px;

}



.card,
.service-card {

    background:white;

    padding:35px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border:1px solid #f0f0f0;

}



.card p,
.service-card p {

    color:var(--gray);

}

.featured-service {

    border-top:5px solid var(--orange);

    transform:translateY(-10px);

}

.contact-form {

    display:flex;

    flex-direction:column;

    gap:12px;

}


.contact-form label {

    font-weight:700;

    color:var(--navy);

}


.contact-form input,
.contact-form textarea {

    width:100%;

    padding:14px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    font-family:inherit;

    font-size:1rem;

}


.contact-form textarea {

    resize:vertical;

}


.contact-form button {

    border:none;

    cursor:pointer;

    width:max-content;

}

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


.services-preview {

    background:var(--light-bg);

    padding:90px 0;

}



/*=========================
 ABOUT
=========================*/


.about-preview {

    padding:90px 0;

    max-width:850px;

}



.about-preview p {

    font-size:1.1rem;

    color:var(--gray);

}



/*=========================
 CTA
=========================*/


.cta {

    background:var(--navy);

    color:white;

    text-align:center;

    padding:80px 0;

}



.cta h2 {

    color:white;

}



.cta p {

    color:white;

}



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


/*=========================
  BUSINESS FAMILY FOOTER
=========================*/


.site-footer {

    background:var(--navy);

    color:white;

    padding:70px 0 30px;

}



.footer-grid {

    display:grid;

    grid-template-columns:1.2fr 2fr;

    gap:50px;

    align-items:start;

}



.footer-brand h3 {

    color:white;

    font-size:1.5rem;

    margin-bottom:15px;

}



.footer-brand p {

    color:white;

    opacity:.9;

}



.footer-businesses {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}



.business-link {

    display:block;

    background:white;

    padding:25px;

    border-radius:var(--radius);

    transition:.3s ease;

}



.business-link:hover {

    transform:translateY(-5px);

}



.business-link h4 {

    color:var(--navy);

    margin-bottom:8px;

}



.business-link p {

    color:var(--gray);

    font-size:.9rem;

}



.footer-bottom {

    border-top:1px solid rgba(255,255,255,.3);

    margin-top:50px;

    padding-top:25px;

    text-align:center;

}



.footer-bottom p {

    margin-bottom:8px;

}


@media(max-width:900px){


.footer-grid {

    grid-template-columns:1fr;

}



.footer-businesses {

    grid-template-columns:1fr;

}


}


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


@media(max-width:950px){


    .nav-container {

        flex-direction:column;

        gap:20px;

    }


    .main-nav {

        flex-wrap:wrap;

        justify-content:center;

    }


    .hero-grid {

        grid-template-columns:1fr;

    }


    .framework-circles {

        grid-template-columns:repeat(3,1fr);

    }


    .card-grid,
    .service-grid {

        grid-template-columns:1fr;

    }


}



@media(max-width:600px){


    h1 {

        font-size:2.4rem;

    }


    h2 {

        font-size:2rem;

    }


    .framework-circles {

        grid-template-columns:1fr;

    }


    .hero-buttons .btn {

        display:block;

        margin:15px 0;

        text-align:center;

    }



}
.featured-service {

    transform:none;

}
/*=========================
 EMAIL SIGNUP
=========================*/


.email-signup {

    background:var(--warm-bg);

    padding:90px 0;

}



.signup-box {

    max-width:750px;

    margin:auto;

    background:white;

    padding:50px;

    text-align:center;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border-top:5px solid var(--orange);

}



.signup-form {

    display:flex;

    gap:15px;

    margin-top:30px;

    justify-content:center;

}



.signup-form input {

    flex:1;

    padding:15px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    font-family:inherit;

}



.privacy-note {

    font-size:.85rem;

    color:var(--gray);

    margin-top:20px;

}



@media(max-width:700px){


.signup-form {

    flex-direction:column;

}


.signup-box {

    padding:35px 25px;

}


}


/* ==========================================
   PROOF IN PRACTICE ACCORDION
   ========================================== */

.proof-practice {
  padding: 5rem 1.5rem;
}

.proof-accordion {
  max-width: 900px;
  margin: 2.5rem auto 0;
}

.proof-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.proof-question {
  width: 100%;
  border: none;
  background: transparent;
  padding: 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.proof-question:hover {
  opacity: 0.8;
}

.proof-icon {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.proof-question[aria-expanded="true"] .proof-icon {
  transform: rotate(45deg);
}

.proof-answer {
  padding: 0 2rem 1.5rem 0;
}

.proof-answer p {
  margin: 0;
  line-height: 1.7;
}

.proof-closing {
  max-width: 750px;
  margin: 2.5rem auto 0;
  text-align: center;
  font-style: italic;
}


/* ==========================================
   PROOF IN PRACTICE
   ========================================== */

.proof-practice {
  padding: 5rem 1.5rem;
  background: var(--light-bg);
}

.proof-practice .section-heading {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.proof-accordion {
  max-width: 900px;
  margin: 2.5rem auto 0;
}


/* ==========================================
   ACCORDION ITEMS
   ========================================== */

.proof-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}


/* ==========================================
   QUESTION
   ========================================== */

.proof-question {
  width: 100%;
  border: none;
  background: var(--white);
  color: var(--navy);

  padding: 1.25rem 1.5rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  text-align: left;
  font: inherit;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.proof-question:hover {
  background: var(--cream);
}


/* ==========================================
   OPEN QUESTION
   ========================================== */

.proof-question[aria-expanded="true"] {
  background: var(--cream);
  color: var(--navy);
}


/* ==========================================
   PLUS ICON
   ========================================== */

.proof-icon {
  flex-shrink: 0;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--orange);
  color: var(--white);

  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;

  transition: transform 0.25s ease;
}

.proof-question[aria-expanded="true"] .proof-icon {
  transform: rotate(45deg);
}


/* ==========================================
   ANSWER
   ========================================== */

.proof-answer {
  padding: 0 1.5rem 1.5rem;
  background: var(--cream);
}

.proof-answer p {
  max-width: 800px;
  margin: 0;
  color: var(--gray);
  line-height: 1.7;
}


/* ==========================================
   CLOSING STATEMENT
   ========================================== */

.proof-closing {
  max-width: 750px;
  margin: 2.5rem auto 0;

  text-align: center;

  color: var(--navy);
  font-style: italic;
  line-height: 1.7;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 600px) {

  .proof-practice {
    padding: 4rem 1rem;
  }

  .proof-question {
    padding: 1.1rem 1rem;
    font-size: 0.95rem;
  }

  .proof-answer {
    padding: 0 1rem 1.25rem;
  }

  .proof-icon {
    width: 28px;
    height: 28px;
    font-size: 1.2rem;
  }

}