:root {
    --nav: #E1D0CD;
    --oxam: #D83590;
    --golden: #DEC109;
    --charcoal: #323232;
    --white: #FDFCFC;
    --cream: #FBF6F1;
    --pink-tint: #F7E9EC;
    --placeholder: #E4E1E0;
    --placeholder-icon: #B9B4B2;
    --footer-bg: #E9DAD6;
    --border: #E7DEDC;

    /* Spacing & sizing (desktop) */
    --page-padding: 4rem;
    --section-padding-lg: 7rem;
    --section-padding-md: 5rem;
    --section-padding-sm: 3rem;
    --link: #7C7A3B;

    /* Figma Styles of your File */
    /* Colors */
    /* Fonts */
    --heading-h1-font-family: Fraunces-Bold, sans-serif;
    --heading-h1-font-size: 56px;
    --heading-h1-line-height: 120%;
    --heading-h1-font-weight: 700;
    --heading-h1-font-style: normal;
    --heading-h2-font-family: Fraunces-Bold, sans-serif;
    --heading-h2-font-size: 48px;
    --heading-h2-line-height: 120%;
    --heading-h2-font-weight: 700;
    --heading-h2-font-style: normal;
    --heading-h3-font-family: Fraunces-Bold, sans-serif;
    --heading-h3-font-size: 40px;
    --heading-h3-line-height: 120%;
    --heading-h3-font-weight: 700;
    --heading-h3-font-style: normal;
    --heading-h4-font-family: Fraunces-Bold, sans-serif;
    --heading-h4-font-size: 32px;
    --heading-h4-line-height: 130%;
    --heading-h4-font-weight: 700;
    --heading-h4-font-style: normal;
    --heading-h5-font-family: Fraunces-Bold, sans-serif;
    --heading-h5-font-size: 24px;
    --heading-h5-line-height: 140%;
    --heading-h5-font-weight: 700;
    --heading-h5-font-style: normal;
    --heading-h6-font-family: Fraunces-Bold, sans-serif;
    --heading-h6-font-size: 20px;
    --heading-h6-line-height: 140%;
    --heading-h6-font-weight: 700;
    --heading-h6-font-style: normal;
    --heading-tagline-font-family: Fraunces-SemiBold, sans-serif;
    --heading-tagline-font-size: 16px;
    --heading-tagline-line-height: 150%;
    --heading-tagline-font-weight: 600;
    --heading-tagline-font-style: normal;
    --text-large-light-font-family: Inter-Light, sans-serif;
    --text-large-light-font-size: 20px;
    --text-large-light-line-height: 150%;
    --text-large-light-font-weight: 300;
    --text-large-light-font-style: normal;
    --text-large-normal-font-family: Inter-Regular, sans-serif;
    --text-large-normal-font-size: 20px;
    --text-large-normal-line-height: 150%;
    --text-large-normal-font-weight: 400;
    --text-large-normal-font-style: normal;
    --text-large-medium-font-family: Inter-Medium, sans-serif;
    --text-large-medium-font-size: 20px;
    --text-large-medium-line-height: 150%;
    --text-large-medium-font-weight: 500;
    --text-large-medium-font-style: normal;
    --text-large-semi-bold-font-family: Inter-SemiBold, sans-serif;
    --text-large-semi-bold-font-size: 20px;
    --text-large-semi-bold-line-height: 150%;
    --text-large-semi-bold-font-weight: 600;
    --text-large-semi-bold-font-style: normal;
    --text-large-bold-font-family: Inter-Bold, sans-serif;
    --text-large-bold-font-size: 20px;
    --text-large-bold-line-height: 150%;
    --text-large-bold-font-weight: 700;
    --text-large-bold-font-style: normal;
    --text-large-extra-bold-font-family: Inter-ExtraBold, sans-serif;
    --text-large-extra-bold-font-size: 20px;
    --text-large-extra-bold-line-height: 150%;
    --text-large-extra-bold-font-weight: 800;
    --text-large-extra-bold-font-style: normal;
    --text-large-link-font-family: Inter-Regular, sans-serif;
    --text-large-link-font-size: 20px;
    --text-large-link-line-height: 150%;
    --text-large-link-font-weight: 400;
    --text-large-link-font-style: normal;
    --text-medium-light-font-family: Inter-Light, sans-serif;
    --text-medium-light-font-size: 18px;
    --text-medium-light-line-height: 150%;
    --text-medium-light-font-weight: 300;
    --text-medium-light-font-style: normal;
    --text-medium-normal-font-family: Inter-Regular, sans-serif;
    --text-medium-normal-font-size: 18px;
    --text-medium-normal-line-height: 150%;
    --text-medium-normal-font-weight: 400;
    --text-medium-normal-font-style: normal;
    --text-medium-medium-font-family: Inter-Medium, sans-serif;
    --text-medium-medium-font-size: 18px;
    --text-medium-medium-line-height: 150%;
    --text-medium-medium-font-weight: 500;
    --text-medium-medium-font-style: normal;
    --text-medium-semi-bold-font-family: Inter-SemiBold, sans-serif;
    --text-medium-semi-bold-font-size: 18px;
    --text-medium-semi-bold-line-height: 150%;
    --text-medium-semi-bold-font-weight: 600;
    --text-medium-semi-bold-font-style: normal;
    --text-medium-bold-font-family: Inter-Bold, sans-serif;
    --text-medium-bold-font-size: 18px;
    --text-medium-bold-line-height: 150%;
    --text-medium-bold-font-weight: 700;
    --text-medium-bold-font-style: normal;
    --text-medium-extra-bold-font-family: Inter-ExtraBold, sans-serif;
    --text-medium-extra-bold-font-size: 18px;
    --text-medium-extra-bold-line-height: 150%;
    --text-medium-extra-bold-font-weight: 800;
    --text-medium-extra-bold-font-style: normal;
    --text-medium-link-font-family: Inter-Regular, sans-serif;
    --text-medium-link-font-size: 18px;
    --text-medium-link-line-height: 150%;
    --text-medium-link-font-weight: 400;
    --text-medium-link-font-style: normal;
    --text-regular-light-font-family: Inter-Light, sans-serif;
    --text-regular-light-font-size: 16px;
    --text-regular-light-line-height: 150%;
    --text-regular-light-font-weight: 300;
    --text-regular-light-font-style: normal;
    --text-regular-normal-font-family: Inter-Regular, sans-serif;
    --text-regular-normal-font-size: 16px;
    --text-regular-normal-line-height: 150%;
    --text-regular-normal-font-weight: 400;
    --text-regular-normal-font-style: normal;
    --text-regular-medium-font-family: Inter-Medium, sans-serif;
    --text-regular-medium-font-size: 16px;
    --text-regular-medium-line-height: 150%;
    --text-regular-medium-font-weight: 500;
    --text-regular-medium-font-style: normal;
    --text-regular-semi-bold-font-family: Inter-SemiBold, sans-serif;
    --text-regular-semi-bold-font-size: 16px;
    --text-regular-semi-bold-line-height: 150%;
    --text-regular-semi-bold-font-weight: 600;
    --text-regular-semi-bold-font-style: normal;
    --text-regular-bold-font-family: Inter-Bold, sans-serif;
    --text-regular-bold-font-size: 16px;
    --text-regular-bold-line-height: 150%;
    --text-regular-bold-font-weight: 700;
    --text-regular-bold-font-style: normal;
    --text-regular-extra-bold-font-family: Inter-ExtraBold, sans-serif;
    --text-regular-extra-bold-font-size: 16px;
    --text-regular-extra-bold-line-height: 150%;
    --text-regular-extra-bold-font-weight: 800;
    --text-regular-extra-bold-font-style: normal;
    --text-regular-link-font-family: Inter-Regular, sans-serif;
    --text-regular-link-font-size: 16px;
    --text-regular-link-line-height: 150%;
    --text-regular-link-font-weight: 400;
    --text-regular-link-font-style: normal;
    --text-small-light-font-family: Roboto-Light, sans-serif;
    --text-small-light-font-size: 14px;
    --text-small-light-line-height: 150%;
    --text-small-light-font-weight: 300;
    --text-small-light-font-style: normal;
    --text-small-normal-font-family: Roboto-Regular, sans-serif;
    --text-small-normal-font-size: 14px;
    --text-small-normal-line-height: 150%;
    --text-small-normal-font-weight: 400;
    --text-small-normal-font-style: normal;
    --text-small-medium-font-family: Inter-Medium, sans-serif;
    --text-small-medium-font-size: 14px;
    --text-small-medium-line-height: 150%;
    --text-small-medium-font-weight: 500;
    --text-small-medium-font-style: normal;
    --text-small-semi-bold-font-family: Inter-SemiBold, sans-serif;
    --text-small-semi-bold-font-size: 14px;
    --text-small-semi-bold-line-height: 150%;
    --text-small-semi-bold-font-weight: 600;
    --text-small-semi-bold-font-style: normal;
    --text-small-bold-font-family: Inter-Bold, sans-serif;
    --text-small-bold-font-size: 14px;
    --text-small-bold-line-height: 150%;
    --text-small-bold-font-weight: 700;
    --text-small-bold-font-style: normal;
    --text-small-extra-bold-font-family: Inter-ExtraBold, sans-serif;
    --text-small-extra-bold-font-size: 14px;
    --text-small-extra-bold-line-height: 150%;
    --text-small-extra-bold-font-weight: 800;
    --text-small-extra-bold-font-style: normal;
    --text-small-link-font-family: Inter-Regular, sans-serif;
    --text-small-link-font-size: 14px;
    --text-small-link-line-height: 150%;
    --text-small-link-font-weight: 400;
    --text-small-link-font-style: normal;
    --text-tiny-light-font-family: Inter-Light, sans-serif;
    --text-tiny-light-font-size: 12px;
    --text-tiny-light-line-height: 150%;
    --text-tiny-light-font-weight: 300;
    --text-tiny-light-font-style: normal;
    --text-tiny-normal-font-family: Inter-Regular, sans-serif;
    --text-tiny-normal-font-size: 12px;
    --text-tiny-normal-line-height: 150%;
    --text-tiny-normal-font-weight: 400;
    --text-tiny-normal-font-style: normal;
    --text-tiny-medium-font-family: Inter-Medium, sans-serif;
    --text-tiny-medium-font-size: 12px;
    --text-tiny-medium-line-height: 150%;
    --text-tiny-medium-font-weight: 500;
    --text-tiny-medium-font-style: normal;
    --text-tiny-semi-bold-font-family: Inter-SemiBold, sans-serif;
    --text-tiny-semi-bold-font-size: 12px;
    --text-tiny-semi-bold-line-height: 150%;
    --text-tiny-semi-bold-font-weight: 600;
    --text-tiny-semi-bold-font-style: normal;
    --text-tiny-bold-font-family: Inter-Bold, sans-serif;
    --text-tiny-bold-font-size: 12px;
    --text-tiny-bold-line-height: 150%;
    --text-tiny-bold-font-weight: 700;
    --text-tiny-bold-font-style: normal;
    --text-tiny-extra-bold-font-family: Inter-ExtraBold, sans-serif;
    --text-tiny-extra-bold-font-size: 12px;
    --text-tiny-extra-bold-line-height: 150%;
    --text-tiny-extra-bold-font-weight: 800;
    --text-tiny-extra-bold-font-style: normal;
    --text-tiny-link-font-family: Inter-Regular, sans-serif;
    --text-tiny-link-font-size: 12px;
    --text-tiny-link-line-height: 150%;
    --text-tiny-link-font-weight: 400;
    --text-tiny-link-font-style: normal;
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: "Inter", sans-serif;
    margin: 0;
    color: var(--charcoal);
    width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

h1 {
    font-family: "Fraunces", serif;
    font-weight: bold;
    font-size: 3.5rem;
    line-height: 120%;
    letter-spacing: 0%;
    margin: 0;
}

h2 {
    font-family: "Fraunces", serif;
    font-weight: bold;
    font-size: 3rem;
    line-height: 120%;
    letter-spacing: 0%;
    margin: 0;
}

h3 {
    font-family: "Fraunces", serif;
    font-weight: bold;
    font-size: 2.5rem;
    line-height: 120%;
    letter-spacing: 0%;
    margin: 0;
}

h4 {
    font-family: "Fraunces", serif;
    font-weight: bold;
    font-size: 2rem;
    line-height: 130%;
    letter-spacing: 0%;
    margin: 0;
}

h5 {
    font-family: "Fraunces", serif;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 140%;
    letter-spacing: 0%;
    margin: 0;
}

h6 {
    font-family: "Fraunces", serif;
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 140%;
    letter-spacing: 0%;
    margin: 0;
}

p {
    margin: 0;
}

.tagline {
    font-family: "Fraunces", serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: 0%;
}

.text-lg-extra-bold {
    font-family: "Inter", sans-serif;
}

/* ==========================================================================
   Shared utilities
   ========================================================================== */

.wrap {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--page-padding);
    position: relative;
}

.section {
    width: 100%;
    padding: var(--section-padding-md) var(--page-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-tag {
    color: var(--oxam);
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 150%;
    margin-bottom: 1rem;
    display: block;
}

.section-intro {
    width: 100%;
    max-width: 90rem;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.section-intro-heading {
    max-width: 34rem;
}

.section-intro-text {
    max-width: 26rem;
    color: var(--charcoal);
    font-size: 1.125rem;
    line-height: 150%;
}

.btn {
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 150%;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    background: var(--oxam);
    color: var(--white);
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary:hover {
    background: #ECA0C8;
    color: var(--charcoal);
}

.btn-outline,
.btn-outline-gold {
    background: var(--golden);
    color: var(--charcoal);
    border-color: var(--golden);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-outline:hover,
.btn-outline-gold:hover {
    background: var(--white);
    color: var(--charcoal);
    border-color: var(--golden);
}

.btn-outline-white {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

.button-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.img-placeholder {
    background: var(--placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--placeholder-icon);
    flex-shrink: 0;
}

.img-placeholder svg {
    width: 2.5rem;
    height: 2.5rem;
}

/* ==========================================================================
   Top promo banner
   ========================================================================== */

.banner {
    background: var(--golden);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner-inner {
    padding: 0.75rem var(--page-padding);
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 90rem;
}

.banner-content {
    padding-left: 3rem;
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.banner-logo-group {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.banner-logo {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    flex-shrink: 0;
}

.banner-text-group {
    display: flex;
    flex-direction: column;
}

.banner-heading {
    color: var(--charcoal);
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 1rem;
    line-height: 150%;
    font-weight: 600;
}

.banner-text {
    color: var(--charcoal);
    font-family: "Roboto-Regular", sans-serif;
    font-size: 0.875rem;
    line-height: 150%;
    font-weight: 400;
}

.banner-close {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    align-self: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-close img {
    width: 1.25rem;
    height: 1.25rem;
}

/* ==========================================================================
   Nav
   ========================================================================== */

.navbar {
    background: var(--nav);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-inner {
    padding: 1rem var(--page-padding);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 90rem;
}

.nav-logo {
    width: 5.44rem;
    height: 4.75rem;
    object-fit: cover;
    flex-shrink: 0;
}

.nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    margin-left: auto;
}

.nav-toggle-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--charcoal);
}

.nav-toggle-icon.icon-close {
    display: none;
}

.navbar.menu-open .nav-toggle-icon.icon-menu {
    display: none;
}

.navbar.menu-open .nav-toggle-icon.icon-close {
    display: block;
}

.nav-links {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    color: var(--charcoal);
    font-family: "Inter-SemiBold", sans-serif;
    font-size: 1.125rem;
    line-height: 150%;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    margin: -0.5rem -0.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    transition: background 0.15s ease;
}

.nav-link:hover {
    background: var(--golden);
}

.nav-chevron {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 0.15s ease;
}

.nav-item {
    position: relative;
}

.nav-item.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 1rem);
    left: 0;
    min-width: 12rem;
    background: var(--nav);
    box-shadow: 0 12px 24px rgba(50, 50, 50, 0.15);
    padding: 0.5rem 0;
    z-index: 50;
}

.nav-item.open .nav-dropdown {
    display: flex;
    flex-direction: column;
}

.nav-dropdown-link {
    color: var(--charcoal);
    font-family: "Inter", sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.75rem 1.25rem 0.75rem 1.75rem;
    margin: 0 0.5rem;
    border-radius: 0.375rem;
}

.nav-dropdown-link:hover {
    background: var(--golden);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    width: 100%;
    min-height: 28rem;
    background-image: url(../img/5.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(50, 50, 50, 0.4);
}

.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 90rem;
    padding: var(--section-padding-sm) var(--page-padding);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
}

.hero-heading-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 45rem;
}

.hero-heading {
    color: var(--white);
}

.hero-subheading {
    color: var(--white);
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 140%;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    max-width: 46rem;
}

.hero-text {
    color: var(--white);
    font-family: "Inter-Regular", sans-serif;
    font-size: 1.125rem;
    line-height: 150%;
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
    background: var(--white);
}

.about-inner {
    width: 100%;
    max-width: 90rem;
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: center;
}

.about-inner.reverse {
    flex-direction: row-reverse;
}

/* ==========================================================================
   Testimonials hero (testimonials.html)
   ========================================================================== */

.testimonials-hero {
    width: 100%;
    min-height: 28rem;
    background: url(../img/Header/50.png) center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: flex-end;
}

.testimonials-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.4);
}

.testimonials-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: var(--section-padding-sm) var(--page-padding);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.testimonials-hero-heading {
    color: var(--white);
    max-width: 46rem;
}

.testimonials-hero-text {
    color: var(--white);
    font-size: 1.125rem;
    line-height: 150%;
    max-width: 46rem;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Error hero (404.html)
   ========================================================================== */

.error-hero {
    width: 100%;
    background: url(../img/Layout/184.png) center/cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 20, 0.2);
}

.error-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 40rem;
    padding: var(--section-padding-lg) var(--page-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.error-logo {
    width: 3.5rem;
    height: auto;
    margin-bottom: 0.5rem;
    object-fit: contain;
}

.error-hero-heading {
    color: var(--white);
}

.error-hero-text {
    color: var(--white);
    font-size: 1.125rem;
    line-height: 150%;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Feedback form (testimonials.html)
   ========================================================================== */

.feedback {
    background: var(--white);
}

.feedback-inner {
    width: 100%;
    max-width: 90rem;
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: flex-start;
}

.feedback-content {
    flex: 1;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-text {
    font-size: 1.125rem;
    line-height: 150%;
}

.feedback-form {
    flex: 1;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
}

.form-row .form-field {
    flex: 1;
}

.form-label {
    font-size: 1rem;
    font-weight: 600;
}

.form-input,
.form-textarea {
    width: 100%;
    border: 1px solid var(--charcoal);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    background: var(--white);
    color: var(--charcoal);
}

.form-textarea {
    resize: vertical;
    min-height: 8rem;
}

.form-checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.form-checkbox-row input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    cursor: pointer;
}

.form-checkbox-row label {
    font-size: 1rem;
}

.form-checkbox-row a {
    color: var(--charcoal);
    text-decoration: underline;
}

/* ==========================================================================
   FAQ (faq.html)
   ========================================================================== */

.faq {
    background: var(--white);
}

.faq-inner {
    width: 100%;
    max-width: 90rem;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: flex-start;
}

.faq-content {
    flex: 1;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.faq-text {
    font-size: 1.125rem;
    line-height: 150%;
}

.faq-list {
    flex: 1;
    max-width: 32rem;
    width: 100%;
    border-top: 1px solid var(--oxam);
    display: flex;
    flex-direction: column;
}

.faq-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--oxam);
}

.faq-question {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: none;
    border: none;
    padding: 0.5rem 0;
    cursor: pointer;
    text-align: left;
}

.faq-question-text {
    color: var(--oxam);
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 140%;
}

.faq-chevron {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--oxam);
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.faq-item.open .faq-chevron {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    margin-top: 1rem;
    background: var(--oxam);
    color: var(--white);
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    line-height: 150%;
}

.faq-item.open .faq-answer {
    display: block;
}

/* ==========================================================================
   Mission & values
   ========================================================================== */

.mission-content {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.mission-content > .section-tag {
    margin-bottom: -0.5rem;
}

.mission-text {
    font-size: 1.125rem;
    line-height: 150%;
}

/* ==========================================================================
   Badge logo + text link (education / beyond the clinic)
   ========================================================================== */

.badge-logo {
    height: 2.5rem;
    width: auto;
    max-width: 8rem;
    object-fit: contain;
    object-position: left center;
}

.badge-logo.img-placeholder {
    border-radius: 50%;
}

.badge-logo.img-placeholder svg {
    width: 1.25rem;
    height: 1.25rem;
}

.text-link {
    color: var(--link, #7C7A3B);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.text-link svg {
    width: 1rem;
    height: 1rem;
}

.about-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.about-content > .section-tag {
    margin-bottom: -0.5rem;
}

.about-heading {
    max-width: 100%;
}

.about-text {
    font-size: 1.125rem;
    line-height: 150%;
}

.about-columns {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    width: 100%;
}

.about-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.about-column-text {
    font-size: 1rem;
    line-height: 150%;
}

.about-image,
.location-image {
    flex: 1;
    max-width: 26rem;
    aspect-ratio: 4/5;
    border-radius: 0.5rem;
    object-fit: cover;
}

/* ==========================================================================
   Services
   ========================================================================== */

.services {
    background: var(--cream);
}

.services .button-row {
    align-self: flex-start;
}

.services .section-intro {
    flex-direction: column;
    align-items: flex-start;
}

.services .section-intro-heading,
.services .section-intro-text {
    max-width: 100%;
}

.testimonials .section-intro {
    flex-direction: column;
    align-items: flex-start;
}

.testimonials .section-intro-heading,
.testimonials .section-intro-text {
    max-width: 100%;
}

.testimonials > .btn {
    align-self: flex-start;
}

.service-grid {
    width: 100%;
    max-width: 90rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem 2rem;
    margin-bottom: 3rem;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-icon {
    width: 2rem;
    height: 2rem;
    color: var(--oxam);
}

.service-title {
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 140%;
}

.service-text {
    font-size: 1rem;
    line-height: 150%;
    color: var(--charcoal);
}

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

.cta {
    position: relative;
    width: 100%;
    background: var(--pink-tint) url(../img/Header/47.png) center/cover no-repeat;
    padding: var(--page-padding);
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(255, 255, 255, 0.5) 100%);
}

.cta-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 90rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.cta-content {
    max-width: 26rem;
}

.cta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 32rem;
    /* padding-top: 0.5rem; */
}

.cta-text {
    font-size: 1.125rem;
    line-height: 150%;
    text-align: left;
}

/* ==========================================================================
   Location / mobile massage
   ========================================================================== */

.location {
    background: var(--white);
}

.location-inner {
    width: 100%;
    max-width: 90rem;
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: center;
}

.location-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

.location-content > .section-tag {
    margin-bottom: -0.5rem;
}

.location-heading {
    max-width: 30rem;
}

.location-text {
    font-size: 1.125rem;
    line-height: 150%;
}

.location-list-label {
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.location-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.location-list li {
    font-size: 1.125rem;
    line-height: 150%;
    padding-left: 1.25rem;
    position: relative;
}

.location-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--oxam);
}


/* ==========================================================================
   Referrals
   ========================================================================== */

.referrals {
    background: var(--cream);
}

.referrals .section-intro {
    flex-direction: column;
    align-items: flex-start;
}

.referrals .section-intro-heading,
.referrals .section-intro-text {
    max-width: 100%;
}

.referral-grid {
    width: 100%;
    max-width: 90rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
    margin-bottom: 3rem;
}

.referral-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.375rem;
}

.referral-photo {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.75rem;
}

.referral-name {
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 1.25rem;
}

.referral-practice {
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 1rem;
}

.referral-area {
    color: var(--oxam);
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.referral-bio {
    font-size: 0.875rem;
    line-height: 150%;
    color: var(--charcoal);
    max-width: 22rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
    white-space: pre-line;
}

.referral-bio.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.referral-read-more {
    background: none;
    border: none;
    padding: 0;
    color: var(--link, #7C7A3B);
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    margin-bottom: 0.75rem;
}

.referral-card .btn {
    width: 100%;
    max-width: 22rem;
}

.card-grid {
    width: 100%;
    max-width: 90rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 0.5rem;
}

.card-title {
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 140%;
}

.card-text {
    font-size: 1rem;
    line-height: 150%;
    color: var(--charcoal);
}

.card .btn {
    align-self: flex-start;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
    background: var(--cream);
}

.testimonial-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


.stars {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

.stars svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--golden);
}

.testimonial-quote {
    font-size: 1rem;
    line-height: 150%;
}

.testimonial-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--placeholder);
    flex-shrink: 0;
}

.testimonial-name {
    font-weight: 600;
    font-size: 1rem;
}

.testimonial-role {
    font-size: 0.875rem;
    color: var(--charcoal);
    opacity: 0.7;
}

.testimonial-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 90rem;
    margin-top: 2.5rem;
}

.testimonial-arrows {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.testimonial-arrow {
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    color: var(--oxam);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.testimonial-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

.testimonial-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.testimonial-dots span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--charcoal);
    opacity: 0.25;
}

.testimonial-dots span.active {
    background-color: var(--oxam);
    opacity: 1;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter {
    background: var(--pink-tint);
}

.newsletter-inner {
    width: 100%;
    max-width: 90rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.newsletter-content {
    max-width: 44rem;
}

.newsletter-text {
    font-size: 1rem;
    line-height: 150%;
    margin-top: 0.75rem;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 28rem;
}

.newsletter-form-row {
    display: flex;
    flex-direction: row;
    border: 1px solid var(--oxam);
    border-radius: 0.625rem;
    overflow: hidden;
}

.newsletter-input {
    flex: 1;
    border: none;
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    background: var(--white);
}

.newsletter-form-row .btn {
    border-radius: 0;
    flex-shrink: 0;
}

.newsletter-disclaimer {
    font-size: 0.75rem;
    color: var(--charcoal);
    opacity: 0.7;
}

.newsletter-disclaimer a {
    color: var(--charcoal);
}

.newsletter-success {
    color: var(--oxam);
    font-weight: 600;
    font-size: 1.125rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    position: relative;
    background: var(--footer-bg);
    width: 100%;
    min-height: 53.375rem;
    padding: var(--section-padding-lg) var(--page-padding);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    overflow: hidden;
}

.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url(../img/Header/50.png) center bottom / cover no-repeat;
}

.footer-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 90rem;
}

.footer-card {
    background: var(--cream);
    border-radius: 1rem;
    padding: 2.5rem 3rem;
}

.footer-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2rem;
}

.footer-logo {
    width: 5rem;
    height: 4.375rem;
    object-fit: cover;
}

.footer-links {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links a {
    color: var(--charcoal);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
}

.footer-socials {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.footer-social-link {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.footer-social-link svg {
    width: 1.125rem;
    height: 1.125rem;
}

.footer-divider {
    width: 100%;
    height: 1px;
    background: rgba(50, 50, 50, 0.15);
}

.footer-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    font-size: 0.875rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.footer-bottom-links {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-bottom-links a {
    color: var(--charcoal);
    text-decoration: none;
}

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */

.cookie-banner {
    display: none;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    max-width: 40rem;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(50, 50, 50, 0.18);
    padding: 1.25rem 1.5rem;
    flex-direction: column;
    gap: 1rem;
}

.cookie-banner.visible {
    display: flex;
}

.cookie-banner-text {
    font-size: 0.9375rem;
    line-height: 150%;
    color: var(--charcoal);
}

.cookie-banner-text a {
    color: var(--charcoal);
}

.cookie-banner-actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.cookie-banner-actions .btn {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
}

/* ==========================================================================
   Focus states
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--charcoal);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.hero a:focus-visible,
.hero button:focus-visible,
.testimonials-hero a:focus-visible,
.testimonials-hero button:focus-visible,
.error-hero a:focus-visible,
.error-hero button:focus-visible {
    outline-color: var(--white);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet (500-1024px): page/section padding scales down, layout stays in row */
@media (max-width: 1024px) {
    :root {
        --page-padding: 2.5rem;
        --section-padding-lg: 5rem;
        --section-padding-md: 4rem;
        --section-padding-sm: 2.5rem;
    }

    .service-grid,
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials .card-grid {
        grid-template-columns: 1fr;
    }

    /* Tablet: these two-column sections stack to a single column (image
       trailing after the text, same DOM order as desktop), while inner
       grids like about-columns/service-grid keep their own column counts. */
    .about-inner,
    .location-inner,
    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-right {
        align-items: flex-start;
        max-width: 100%;
        width: 100%;
    }

    .about-image,
    .location-image {
        max-width: 100%;
        width: 100%;
    }

    .about-content,
    .location-content,
    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .button-row {
        width: 100%;
    }

    .button-row .btn {
        flex: 1;
    }

    .section-intro {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-intro > div {
        width: 100%;
    }

    .section-intro-heading,
    .section-intro-text {
        max-width: 100%;
    }
}

/* Mobile (320-500px): page/section padding scales down further, layouts stack, hamburger nav */
@media (max-width: 500px) {
    :root {
        --page-padding: 1.25rem;
        --section-padding-lg: 4rem;
        --section-padding-md: 3rem;
        --section-padding-sm: 2rem;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .button-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .newsletter-form-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        border-radius: 0.625rem;
    }

    .banner-inner {
        position: relative;
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
        padding-right: calc(var(--page-padding) + 2rem);
    }

    .banner-content {
        padding-left: 0;
    }

    .banner-close {
        position: absolute;
        top: 50%;
        right: var(--page-padding);
        transform: translateY(-50%);
    }

    .nav-inner {
        flex-wrap: wrap;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
        flex-basis: 100%;
        width: 100%;
        padding-top: 1.5rem;
    }

    .navbar.menu-open .nav-menu {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        width: 100%;
    }

    .nav-item {
        width: 100%;
    }

    .nav-dropdown {
        position: static;
        box-shadow: none;
        background: none;
        width: 100%;
        padding: 0.75rem 0 0 1rem;
    }

    .nav-dropdown-link {
        padding: 0.5rem 0;
    }

    .nav-menu .btn-primary {
        width: 100%;
        justify-content: center;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    .newsletter-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-content,
    .mission-content,
    .faq-content {
        width: 100%;
        max-width: 100%;
    }

    .about-inner.reverse {
        flex-direction: column;
    }

    .feedback-inner,
    .faq-inner {
        flex-direction: column;
    }

    .feedback-form,
    .faq-list {
        max-width: 100%;
    }

    .form-row {
        flex-direction: column;
    }

    /* Reflow: photo sits between the intro copy and the sections below it,
       instead of trailing after the buttons like it does at desktop width. */
    .about-inner,
    .location-inner {
        gap: 1.5rem;
    }

    .about-content,
    .location-content {
        display: contents;
    }

    .about-image,
    .location-image {
        order: 1;
    }

    .about-columns {
        order: 2;
        flex-direction: column;
    }

    .location-list-wrap {
        order: 2;
    }

    .about-inner .button-row,
    .location-inner .button-row {
        order: 3;
    }

    .service-grid,
    .card-grid,
    .referral-grid {
        grid-template-columns: 1fr;
    }

    /* Services become an accordion on mobile: tap a card to reveal its text. */
    .service-card {
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
    }

    .service-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .service-title::after {
        content: "";
        width: 0.625rem;
        height: 0.625rem;
        border-right: 2px solid var(--charcoal);
        border-bottom: 2px solid var(--charcoal);
        transform: rotate(45deg);
        transition: transform 0.15s ease;
        flex-shrink: 0;
    }

    .service-card.open .service-title::after {
        transform: rotate(-135deg);
    }

    .service-text {
        display: none;
    }

    .service-card.open .service-text {
        display: block;
    }

    .footer {
        min-height: 0;
        gap: 2rem;
    }

    .footer-card {
        padding: 1.75rem;
    }

    .footer-top {
        flex-direction: column;
        justify-content: center;
        gap: 1.5rem;
    }

    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }

    .footer-bottom-links {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}