/* ============================================
   Element 79 Reserve — Clone Stylesheet
   Exact computed values from live site, in rem
   ============================================ */

/* --- :root Custom Properties (exact from live computed values) --- */
:root {
    /* Colors */
    --gold: #f1a208;
    --navy: #333333;
    --light-bg: #edf2f4;
    --off-white: #edf2f4;
    --white: #ffffff;
    --black: #000000;
    --footer-link: #d94068;
    --footer-text: #eff1fe;
    --footer-icon: #d94068;
    --form-border: #69727d;

    /* Fonts */
    --font-heading: 'Montserrat', system-ui, sans-serif;
    --font-body: 'Lato', system-ui, sans-serif;
    --font-nav: 'Montserrat', sans-serif;
    --font-form: 'Lato', sans-serif;

    /* Text sizes (exact from computed, converted to rem) */
    --text-h1: 3.25rem;       /* 52px */
    --text-h1-lh: 3.9rem;     /* 62.4px */
    --text-h2: 2.6rem;        /* 41.6px */
    --text-h2-lh: 3.12rem;    /* 49.92px */
    --text-h3: 2.08rem;       /* 33.28px */
    --text-h3-lh: 2.496rem;   /* 39.936px */
    --text-h4: 1.625rem;      /* 26px */
    --text-h4-lh: 1.95rem;    /* 31.2px */
    --text-body: 1.125rem;     /* 18px */
    --text-body-lh: 2.025rem;  /* 32.4px */
    --text-nav: 1.3rem;        /* 20.8px */
    --text-nav-lh: 1.69rem;   /* 27.04px */
    --text-btn: 1.25rem;       /* 20px */
    --text-btn-lh: 1.875rem;   /* 30px */
    --text-ti: 0.875rem;       /* 14px */
    --text-ti-lh: 1.225rem;    /* 19.6px */
    --text-ti-name: 0.9375rem; /* 15px */
    --text-ti-name-lh: 1.3125rem; /* 21px */
    --text-ti-text: 0.9375rem; /* 15px */
    --text-ti-text-lh: 1.359375rem; /* 21.75px */
    --text-ti-stars-lh: 1.0625rem; /* 17px */
    --text-form: 1.125rem;     /* 18px */
    --text-form-lh: 1.575rem;  /* 25.2px */
    --text-footer-link: 1rem;  /* 16px */
    --text-footer-link-lh: 1.5rem; /* 24px */
    --text-status: 1rem;       /* 16px */

    /* Spacing — u-space utilities (margin-bottom), in rem */
    --space-sm: 0.85rem;   /* 13.6px */
    --space-md: 1.18rem;   /* 18.88px */
    --space-lg: 1.7rem;    /* 27.2px */
    --space-2xl: 3.3rem;   /* 52.8px */

    /* Section padding, in rem */
    --section-sm: 3.3rem;  /* 52.8px */
    --section-md: 4.45rem; /* 71.2px */
    --section-lg: 8rem; /* 128px */
    --section-bottom: 4rem; /* 64px */

    /* Gaps, in rem */
    --gap-md: 1.7rem;      /* 27.2px */
    --gap-lg: 2.35rem;     /* 37.6px */

    /* Buttons */
    --btn-sm-radius: 0.5rem;  /* 8px */
    --btn-lg-radius: 1rem;    /* 16px */
    --btn-sm-padding: 0.61rem 0.94rem; /* 9.76px 15.04px */
    --btn-lg-padding: 1.18rem 1.83rem; /* 18.88px 29.28px */
    --btn-font-weight: 700;

    /* Card */
    --card-radius: 0.75rem;  /* 12px */
    --card-shadow: 0 0.625rem 2.5rem -0.25rem rgba(0, 0, 0, 0.11);

    /* About image */
    --about-img-radius: 1rem; /* 16px */
    --about-img-shadow: 0 0.625rem 2.5rem -0.25rem rgba(0, 0, 0, 0.11);

    /* Trustindex shadow */
    --ti-shadow: 1px 4px 10px 0px rgba(0, 0, 0, 0.1), 0px 0px 2px 0px rgba(0, 0, 0, 0.05);

    /* Z-index scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-toast: 500;

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: var(--duration-fast) var(--ease-standard);

    /* Focus ring */
    --shadow-focus: 0 0 0 2px var(--gold);
}

/* --- Body --- */
body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--navy);
    background-color: var(--white);
}

/* --- Typography Utility Classes --- */
.text-h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: var(--text-h1-lh);
}

.text-h2 {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: var(--text-h2-lh);
}

.text-h3 {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: var(--text-h3-lh);
}

.text-h4 {
    font-family: var(--font-body);
    font-size: var(--text-h4);
    font-weight: 700;
    line-height: var(--text-h4-lh);
}

.text-body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--text-body-lh);
}

.e-heading-base {
    /* heading base — matches Elementor e-heading-base */
}

/* --- Spacing Utilities --- */
.u-space-sm { margin-bottom: var(--space-sm); }
.u-space-md { margin-bottom: var(--space-md); }
.u-space-lg { margin-bottom: var(--space-lg); }
.u-space-2xl { margin-bottom: var(--space-2xl); }

.u-gap-lg { gap: var(--gap-lg); }
.u-gap-md { gap: var(--gap-md); }

/* --- Color utilities --- */
.heading--dark { color: var(--navy); }
.heading--light { color: var(--white); }
.heading--gold { color: var(--gold); }
.text--light { color: var(--off-white); }
.text--dark { color: var(--navy); }

/* --- Section backgrounds --- */
.section--light { background-color: var(--light-bg); }
.section--black { background-color: var(--black); }
.section--transparent { background-color: transparent; }

/* --- Layout: Container --- */
.container {
    width: 100%;
    margin: 0 auto;
}

/* --- Header --- */
.site-header {
    width: 100%;
    background-color: var(--black);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-bottom: 1px solid rgba(241, 162, 8, 0.15);
}

.site-header__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-lg);
    padding: 0.625rem 2rem;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    background-color: var(--black);
}

.site-header__logo {
    max-width: 48px;
    height: auto;
    object-fit: contain;
}

.site-header__logo img {
    width: 48px;
    height: auto;
}

/* --- Navigation --- */
.site-nav {
    display: flex;
    flex-direction: row;
}

.site-nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
}

.site-nav li {
    flex-grow: 1;
}

.site-nav a {
    display: flex;
    align-items: center;
    font-family: var(--font-nav);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gold);
    padding: 0.75rem 1rem;
    position: relative;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.site-nav a:hover {
    color: var(--white);
}

/* --- Phone Button (Header) --- */
.btn-phone {
    display: inline-flex;
    align-items: center;
    background-color: var(--gold);
    color: var(--off-white);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 0.625rem 1rem;
    min-height: 44px;
    border-radius: 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.btn-phone:hover {
    background-color: #d8910a;
}

/* --- Mobile menu toggle --- */
.menu-toggle {
    display: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 0;
}

.menu-toggle__icon {
    width: 33px;
    height: 33px;
}

.menu-toggle__icon--close {
    display: none;
}

/* --- Hero --- */
.hero {
    position: relative;
    background-color: #222222;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/hero-gold.webp');
    background-size: auto, cover;
    background-position: 0% 0%, 50% 50%;
    background-repeat: repeat, no-repeat;
    background-blend-mode: normal, normal;
    min-height: 36rem;
}

.hero__content {
    width: 100%;
    max-width: 48rem;
    padding: var(--section-lg) 1.5rem var(--section-bottom);
}

.hero__title {
    color: var(--white);
    text-align: start;
}

.hero__subtitle {
    color: var(--off-white);
    text-align: start;
}

/* Estate intro paragraph inside hero — must be light on dark background */
.hero .estate-intro {
    color: var(--off-white);
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    background-color: var(--gold);
    color: var(--off-white);
    font-family: var(--font-heading);
    font-size: var(--text-btn);
    font-weight: var(--btn-font-weight);
    line-height: var(--text-btn-lh);
    text-align: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
    background-color: #d8910a;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(241, 162, 8, 0.4);
}

.btn--sm {
    padding: var(--btn-sm-padding);
    border-radius: var(--btn-sm-radius);
}

.btn--lg {
    padding: var(--btn-lg-padding);
    border-radius: var(--btn-lg-radius);
}

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

.btn--outline:hover {
    background: var(--white);
    color: var(--dark);
}

/* --- Sections --- */
.section {
    width: 100%;
    max-width: 100%;
    position: relative;
}

.section--sm { padding: var(--section-sm) 1.5rem; }
.section--md { padding: var(--section-md) 1.5rem; }

/* --- Services Section --- */
.services-section {
    background-color: var(--white);
    padding: var(--section-md) 1.5rem;
    text-align: center;
}

.services-heading {
    text-align: center;
}

.services-grid {
    display: flex;
    flex-direction: row;
    gap: var(--gap-md);
    width: 100%;
}

/* --- Card (Service & Coin) --- */
.card {
    background-color: var(--black);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    position: relative;
    text-align: center;
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.25rem 3.5rem -0.5rem rgba(0, 0, 0, 0.18);
}

.card__image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
    margin-bottom: var(--space-sm);
}

.card__content {
    padding: 0 1.5rem;
    text-align: center;
}

.card__title {
    color: var(--white);
}

.card__text {
    color: var(--off-white);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--text-body-lh);
    margin-bottom: var(--space-sm);
}

.card .btn--sm {
    margin-bottom: 0;
}

.card {
    padding-bottom: 1.5rem;
}

/* --- About Section --- */
.about-section {
    display: flex;
    flex-direction: row;
    gap: var(--gap-lg);
    padding: var(--section-md) 2rem;
    text-align: center;
    background-color: #222222;
}

.about-section__text {
    flex: 1 1 0;
    min-width: 0;
    max-width: 65ch;
    text-align: start;
}

.about-section__text h2 {
    text-align: center;
}

.about-section__text .btn--sm {
    display: block;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

.about-section__image {
    flex: 1 1 0;
    min-width: 0;
    background-image: url('../images/hero-silver.webp');
    background-size: cover;
    background-position: 0% 0%;
    border-radius: var(--about-img-radius);
    box-shadow: var(--about-img-shadow);
    min-height: 28rem;
    max-height: 32rem;
}

/* --- Coin Sections (Gold & Silver) --- */
.coins-section {
    background-color: var(--light-bg);
    padding: var(--section-md) 1.5rem;
    text-align: center;
}

/* Alternate coins sections so gold and silver have visual separation */
.coins-section + .coins-section {
    background-color: var(--white);
}

.coins-grid {
    display: flex;
    flex-direction: row;
    gap: var(--gap-md);
    width: 100%;
}

.coins-grid + .coins-grid {
    margin-top: var(--gap-md);
}

/* --- FAQ Section --- */
.faq-section {
    padding: var(--section-sm) 1.5rem;
    background-color: var(--light-bg);
}

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

.faq-section__heading {
    text-align: center;
    margin-bottom: 2.5rem;
}

.faq-list {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid rgba(51, 51, 51, 0.12);
    border-radius: 0.75rem;
    background: var(--white);
    overflow: hidden;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.faq-item:hover {
    border-color: rgba(241, 162, 8, 0.4);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
}

.faq-item[open] {
    border-color: var(--gold);
    box-shadow: 0 4px 12px -4px rgba(241, 162, 8, 0.15);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    list-style: none;
    color: var(--navy);
    transition: color var(--transition-fast);
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__question h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

.faq-item__icon {
    flex-shrink: 0;
    color: var(--gold);
    transition: transform var(--transition-normal);
}

.faq-item[open] .faq-item__icon {
    transform: rotate(180deg);
}

.faq-item__body {
    padding: 0 1.5rem 1.25rem;
}

.faq-item__body p {
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 65ch;
}

.hero .btn--lg {
    margin-bottom: var(--space-lg);
}

/* --- CTA Section --- */
.cta-section {
    background-color: var(--black);
    padding: 4rem 2rem;
}

.cta-section__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 72rem;
    margin: 0 auto;
    align-items: start;
}

.cta-section__content {
    padding-block: 1rem;
}

.cta-section__heading {
    color: var(--white);
    text-align: start;
    font-size: var(--text-h2);
    line-height: var(--text-h2-lh);
    margin-bottom: 1.5rem;
}

.cta-section__text {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    text-align: start;
    margin-bottom: 2rem;
    max-width: 36ch;
}

.cta-section__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.cta-section__list-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
}

.cta-section__list-item svg {
    flex-shrink: 0;
    color: var(--gold);
}

/* --- Form --- */
.contact-form {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 2rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.form-input,
.form-textarea {
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    padding: 0.875rem 1.125rem;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--white);
    transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-input:focus-visible,
.form-textarea:focus-visible {
    outline: none;
    border-color: var(--gold);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(241, 162, 8, 0.2);
}

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

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-submit {
    display: block;
    width: 100%;
    background-color: var(--gold);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    border: none;
    border-radius: var(--btn-lg-radius);
    padding: 0.75rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.form-submit:hover {
    background-color: #d8910a;
    transform: translateY(-1px);
}

.form-submit:active {
    transform: translateY(0);
}

.form-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(241, 162, 8, 0.4);
}

#form-status {
    text-align: center;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    border-radius: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    display: none;
}

#form-status.success {
    display: block;
    background: rgba(76, 175, 80, 0.12);
    color: #66bb6a;
    border: 1px solid rgba(76, 175, 80, 0.25);
}

#form-status.error {
    display: block;
    background: rgba(244, 67, 54, 0.12);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.25);
}

/* --- Footer --- */
.site-footer {
    background-color: var(--black);
    border-top: 1px solid rgba(241, 162, 8, 0.15);
}

.site-footer__inner {
    display: flex;
    flex-direction: row;
    gap: var(--gap-lg);
    padding: 3.5rem 2rem 1.5rem;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    background-color: transparent;
}

.footer-col {
    flex: 1;
}

.footer-col__heading {
    color: var(--gold);
    margin-bottom: var(--space-sm);
}

.footer-col__text {
    color: var(--footer-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--text-body-lh);
}

.footer-col ul {
    list-style: none;
    padding-block: 0;
}

.footer-col li {
    margin-bottom: 0;
}

.footer-col a {
    display: flex;
    align-items: center;
    font-family: var(--font-form);
    font-size: var(--text-footer-link);
    font-weight: 400;
    line-height: var(--text-footer-link-lh);
    color: var(--white);
    text-decoration: none;
    padding: 0;
    min-height: 44px;
    box-sizing: border-box;
    margin-bottom: 0;
    transition: color var(--transition-fast);
}


.footer-social {
    display: flex;
    gap: 1rem;
    padding-top: 0.5rem;
}

.footer-social__link {
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 44px;
    border-radius: 50%;
    transition: color var(--transition-fast);
}

.footer-social__link:hover {
    color: var(--gold);
}

.footer-col a:hover {
    color: var(--gold);
}

/* --- Footer Contact Icon List --- */
.footer-contact-list {
    list-style: none;
}

.footer-contact-list__item {
    display: flex;
    align-items: center;
    font-family: var(--font-form);
    font-size: var(--text-footer-link);
    font-weight: 400;
    line-height: var(--text-footer-link-lh);
    margin: 0;
    padding: 0;
}

.footer-contact-list__item a {
    display: flex;
    align-items: center;
    color: var(--white);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-contact-list__item a:hover {
    color: var(--gold);
}

.footer-contact-list__icon {
    display: flex;
    align-items: center;
    margin-right: 3.5px;
}

.footer-contact-list__icon svg {
    width: 16px;
    height: 16px;
    fill: var(--gold);
    display: block;
}

.footer-contact-list__text {
    padding-left: 5px;
    color: #ffffff;
    font-family: var(--font-form);
    font-size: var(--text-footer-link);
    font-weight: 400;
    line-height: var(--text-footer-link-lh);
}

.footer-contact-list__item a .footer-contact-list__text {
    color: #ffffff;
}

.footer-contact-list__item a .footer-contact-list__icon svg {
    fill: var(--gold);
}

.footer-contact-list__item--no-link .footer-contact-list__icon svg {
    fill: var(--gold);
}

/* --- Footer Bottom Bar --- */
.site-footer__bottom {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.site-footer__bottom p {
    color: rgba(239, 241, 254, 0.6);
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- Chaty Floating Button --- */
.chaty-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gold);
    cursor: pointer;
    z-index: var(--z-toast);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.25);
}

.chaty-fab:hover {
    background-color: #d8910a;
    transform: scale(1.08);
}

.chaty-fab svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--white);
}

/* --- Google Reviews Testimonial Section --- */
.reviews-section {
    background-color: var(--light-bg);
    padding: 3.5rem 1.5rem 3rem;
}

.reviews-section__header {
    max-width: 48rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.reviews-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 100px;
    background: var(--white);
    padding: 0.5rem 1.125rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.reviews-badge__logo {
    width: 1.375rem;
    height: 1.375rem;
}

.reviews-section__stars {
    color: #fbbc04;
    font-size: 2rem;
    letter-spacing: 0.2rem;
    margin-top: 0.875rem;
    line-height: 1;
}

.reviews-section__title {
    color: var(--navy);
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: var(--text-h3-lh);
    margin-top: 0.5rem;
    text-align: center;
}

.reviews-section__link {
    display: inline;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

.reviews-section__link:hover {
    color: var(--navy);
}

/* --- Review Carousel --- */
.reviews-carousel {
    position: relative;
    overflow: hidden;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.reviews-carousel__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4rem;
    z-index: 2;
    pointer-events: none;
}

.reviews-carousel__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--light-bg), transparent);
}

.reviews-carousel__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--light-bg), transparent);
}

.reviews-carousel__track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    padding-bottom: 0;
    animation: reviews-slide 40s linear infinite;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.reviews-carousel__track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.reviews-carousel__track:hover {
    animation-play-state: paused;
}

@keyframes reviews-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 0.625rem)); }
}

/* --- Review Card --- */
.review-card {
    flex: 0 0 min(82vw, 22rem);
    width: min(82vw, 22rem);
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 1rem;
    padding: 1.25rem;
    color: var(--navy);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.05);
}

.review-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.review-card__stars {
    color: #fbbc04;
    font-size: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1;
}

.review-card__verified {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-top: 0.25rem;
}

.review-card__google-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 100px;
    border: 1px solid rgba(0,0,0,0.08);
    background: var(--white);
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--navy);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.review-card__google-icon {
    width: 1rem;
    height: 1rem;
}

.review-card__quote {
    flex: 1;
    margin-top: 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--navy);
}

.review-card__author {
    margin-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    padding-top: 0.75rem;
    font-size: 0.875rem;
}

.review-card__name {
    font-weight: 800;
    color: var(--navy);
}

.review-card__source {
    color: #6b7280;
}

/* --- Divider (horizontal rule in about section) --- */
hr {
    border: none;
    border-top: 1px solid rgba(51, 51, 51, 0.1);
    margin: var(--space-lg) 0;
}

/* ============================================
   Estate Coin Collections Page
   ============================================ */

/* --- Estate Hero --- */
.hero--estate {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/hero-gold.webp');
    background-size: auto, cover;
    background-position: 0% 0%, 50% 50%;
    background-repeat: repeat, no-repeat;
}

.hero--silver {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('../images/hero-silver.webp');
    background-size: auto, cover;
    background-position: 0% 0%, 50% 50%;
    background-repeat: repeat, no-repeat;
}

.hero--coin {
    min-height: 20rem;
    background-color: #222222;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/hero-rare.webp');
    background-size: auto, cover;
    background-position: 0% 0%, 50% 50%;
    background-repeat: repeat, no-repeat;
}

/* --- Estate Text Section (light, two-column) --- */
.estate-section--text {
    background-color: var(--white);
    padding: var(--section-md) 2rem;
}

.estate-section--text .estate-section__inner {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
}

.estate-section__two-col {
    display: flex;
    flex-direction: row;
    gap: var(--gap-lg);
    max-width: 72rem;
    margin: 0 auto;
    align-items: center;
}

.estate-section__text-col {
    flex: 1 1 0;
    min-width: 0;
}

.estate-section__text-col .text-body {
    text-align: start;
}

.estate-section__image-col {
    flex: 1 1 0;
    min-width: 0;
    background-image: url('../images/hero-silver.webp');
    background-size: cover;
    background-position: 50% 50%;
    border-radius: var(--about-img-radius);
    box-shadow: var(--about-img-shadow);
    min-height: 28rem;
    max-height: 32rem;
}

/* --- Estate Coins Section (dark) --- */
.estate-section--coins {
    background-color: #222222;
    padding: var(--section-md) 2rem;
}

.estate-section--coins .estate-section__inner {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
}

.estate-section--coins .text-body {
    text-align: start;
    max-width: 65ch;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.estate-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    text-align: start;
}

.estate-list__item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.estate-list__title {
    color: var(--gold);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.estate-list__text {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Estate Rules Section (light) --- */
.estate-section--rules {
    background-color: var(--light-bg);
    padding: var(--section-md) 2rem;
}

.estate-section--rules .estate-section__inner {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
}

.estate-section--rules .text-body {
    text-align: start;
    max-width: 65ch;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
    text-align: start;
}

.rule-card {
    background: var(--white);
    border: 1px solid rgba(51, 51, 51, 0.1);
    border-radius: 0.75rem;
    padding: 1.75rem;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.rule-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0, 0, 0, 0.12);
}

.rule-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gold);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.rule-card__title {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.rule-card__text {
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

.estate-section--process .rule-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.estate-section--process .rule-card:hover {
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0, 0, 0, 0.3);
}

.estate-section--process .rule-card__title {
    color: var(--white);
}

.estate-section--process .rule-card__text {
    color: rgba(255, 255, 255, 0.8);
}

/* --- Estate Process Section (dark) --- */
.estate-section--process {
    background-color: #222222;
    padding: var(--section-md) 2rem;
}

.estate-section--process .estate-section__inner {
    max-width: 72rem;
    margin: 0 auto;
    text-align: center;
}

.estate-section--process h2 {
    color: var(--white);
}

.estate-section--process .text-body {
    color: rgba(255, 255, 255, 0.8);
    text-align: start;
    max-width: 65ch;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.5rem;
    text-align: start;
}

.process-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.75rem;
    position: relative;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0, 0, 0, 0.3);
}

.process-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gold);
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.process-step__title {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.process-step__text {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

.process-step__link {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.process-step__link:hover {
    color: var(--white);
}

/* --- Buying Grid (Sell page) --- */
.buying-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    text-align: start;
    max-width: 48rem;
    margin: 0 auto;
}

.buying-col {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.buying-col .estate-list__title {
    margin-bottom: 1rem;
}

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

.buying-list__item {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    padding-block: 0.375rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.buying-list__item:last-child {
    border-bottom: none;
}

/* --- Why List (Sell page) --- */
.why-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.estate-section--process .why-list__item {
    border-left: 3px solid var(--gold);
    padding-left: 1rem;
}

.estate-section--process .why-list__title {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}

.estate-section--process .why-list__text {
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

.estate-section--text .why-list__item {
    border-left: 3px solid var(--gold);
    padding-left: 1rem;
}

.estate-section--text .why-list__title {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}

.estate-section--text .why-list__text {
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Gold image variant for Why Sell section --- */
.estate-section__image-col--gold {
    background-image: url('../images/hero-rare.webp');
}

/* --- About Portrait (Kevin Mange image) --- */
.about-portrait {
    width: 100%;
    height: auto;
    max-width: 500px;
    border-radius: 1rem;
    display: block;
    margin: 0 auto;
}

/* When the image column contains an actual <img> (portrait), remove background */
.estate-section__image-col--portrait {
    background-image: none;
    box-shadow: none;
    display: flex;
    align-items: center;
}

/* --- Contact Cards --- */
.contact-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
}

.contact-card {
    background: var(--white);
    border: 1px solid rgba(51, 51, 51, 0.1);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0, 0, 0, 0.12);
}

.contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--gold);
    margin: 0 auto 1.25rem;
}

.contact-card__icon svg {
    fill: var(--white);
}

.contact-card__label {
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.contact-card__value {
    display: block;
    color: var(--navy);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 0.375rem;
    transition: color var(--transition-fast);
}

a.contact-card__value:hover {
    color: var(--gold);
}

.contact-card__note {
    color: #6b7280;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* --- Service Area Chips --- */
.service-area-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    max-width: 48rem;
    margin: 0 auto;
}

.service-area-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    min-height: 44px;
    border-radius: 100px;
    background: var(--white);
    border: 1px solid rgba(51, 51, 51, 0.12);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

a.service-area-chip:hover {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}

.service-area__heading {
    text-align: center;
}

.service-area__text {
    text-align: center;
    max-width: 65ch;
    margin-inline: auto;
}

/* ============================================
   Coin Showcase — Grid, Cards, Badges, Filters
   ============================================ */

.coin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 2rem;
    max-width: 80rem;
    margin: 0 auto;
}

/* --- Coin Card --- */
.coin-card {
    background: var(--white);
    border: 1px solid rgba(51, 51, 51, 0.1);
    border-radius: var(--card-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.coin-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem -0.5rem rgba(0, 0, 0, 0.12);
}

/* Sold cards: muted appearance for instant visual distinction */
.coin-card[data-status="sold"] {
    opacity: 0.8;
}

.coin-card[data-status="sold"] .coin-card__image {
    filter: grayscale(0.5);
}

.coin-card[data-status="sold"]:hover {
    opacity: 1;
}

.coin-card[data-status="sold"]:hover .coin-card__image {
    filter: grayscale(0);
}

.coin-card__image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--light-bg);
}

.coin-card__body {
    padding: 1.25rem;
}

.coin-card__name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--navy);
    margin-bottom: 0.5rem;
}

.coin-card__specs {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.coin-card__specs span {
    margin-right: 0.5rem;
}

.coin-card__specs span:not(:last-child)::after {
    content: "·";
    margin-left: 0.5rem;
    color: rgba(51, 51, 51, 0.3);
}

.coin-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.coin-card__price {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
}

.coin-card__price--contact {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
}

.coin-card__price--sold {
    color: #6b7280;
    text-decoration: line-through;
}

/* --- Status Badge --- */
.coin-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.coin-badge--available {
    background: rgba(76, 175, 80, 0.12);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.25);
}

.coin-badge--sold {
    background: rgba(107, 114, 128, 0.12);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.25);
}

/* --- Filter Tabs (CSS-only, no-JS) --- */
.coin-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.coin-filter__label {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    min-height: 44px;
    border-radius: 100px;
    background: var(--white);
    border: 1px solid rgba(51, 51, 51, 0.12);
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.coin-filter__label:hover {
    border-color: var(--gold);
}

.coin-filter__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Label highlight when radio is checked (general sibling combinator) */
.coin-filter__radio#filter-all:checked ~ .coin-filter .coin-filter__label[for="filter-all"],
.coin-filter__radio#filter-available:checked ~ .coin-filter .coin-filter__label[for="filter-available"],
.coin-filter__radio#filter-sold:checked ~ .coin-filter .coin-filter__label[for="filter-sold"],
.coin-filter__radio#filter-gold:checked ~ .coin-filter .coin-filter__label[for="filter-gold"],
.coin-filter__radio#filter-silver:checked ~ .coin-filter .coin-filter__label[for="filter-silver"] {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}

/* CSS-only filtering: hide cards that don't match the selected filter */
.coin-filter__radio#filter-all:checked ~ .coin-grid .coin-card { display: block; }
.coin-filter__radio#filter-available:checked ~ .coin-grid .coin-card[data-status="sold"] { display: none; }
.coin-filter__radio#filter-sold:checked ~ .coin-grid .coin-card[data-status="available"] { display: none; }
.coin-filter__radio#filter-gold:checked ~ .coin-grid .coin-card[data-metal="silver"] { display: none; }
.coin-filter__radio#filter-silver:checked ~ .coin-grid .coin-card[data-metal="gold"] { display: none; }

/* --- Coin Detail Page --- */
.coin-detail {
    max-width: 72rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.coin-detail__image {
    width: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: var(--light-bg);
}

.coin-detail__image img {
    width: 100%;
    height: auto;
    display: block;
}

.coin-detail__info {
    padding-block: 1rem;
}

.coin-detail__name {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    font-weight: 700;
    line-height: var(--text-h2-lh);
    color: var(--navy);
    margin-bottom: 0.75rem;
}

.coin-detail__specs {
    margin-bottom: 1.5rem;
}

.coin-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid rgba(51, 51, 51, 0.08);
}

.coin-spec-row__label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.coin-spec-row__value {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
}

.coin-detail__price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.coin-detail__price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy);
}

.coin-detail__price--sold {
    color: #6b7280;
}

.coin-detail__description {
    margin-bottom: 1.5rem;
}

.coin-detail__description p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--navy);
    margin-bottom: 1rem;
    max-width: 65ch;
}

.coin-detail__cta {
    margin-bottom: 2rem;
}

/* --- Related Coins --- */
.related-coins {
    background-color: var(--light-bg);
    padding: var(--section-md) 2rem;
}

.related-coins .coin-grid {
    max-width: 48rem;
}

.related-coins .coin-card__image {
    max-width: 16rem;
    margin: 0 auto;
}

.related-coins__heading {
    text-align: center;
    margin-bottom: 2rem;
}

/* --- Breadcrumb (coin detail pages) --- */
.breadcrumb {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: #6b7280;
}

.breadcrumb a {
    color: var(--gold);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--navy);
}

/* --- Coin showcase section CTA --- */
.coin-showcase__cta {
    text-align: center;
    margin-top: 2rem;
}

/* --- Coin detail short description --- */
.coin-detail__short-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
}

/* --- Coin detail badge row (status badge — now in breadcrumb bar) --- */
.coin-detail__badge-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* --- Breadcrumb bar (breadcrumb + status badge side by side) --- */
.breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* --- Breadcrumb section padding override --- */
.breadcrumb-section {
    padding-block: 2rem;
}

/* ============================================
   Responsive — Tablet breakpoint
   Elementor tablet: max-width 1024px (64em)
   ============================================ */

@media (max-width: 64em) {
    :root {
        --text-h1: 40px;
        --text-h1-lh: 48px;
        --text-h2: 32px;
        --text-h2-lh: 38.4px;
        --text-h3: 26px;
        --text-h3-lh: 31.2px;
    }

    .site-header__inner {
        gap: 32px;
        flex-wrap: nowrap;
    }

    /* Show hamburger on tablet too */
    .btn-phone {
        display: none;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 5.5px;
        border-radius: 3px;
        color: var(--gold);
    }

    .menu-toggle__icon {
        fill: var(--gold);
    }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--black);
        flex-direction: column;
        z-index: var(--z-dropdown);
    }

    .site-nav.open {
        display: block;
    }

    .site-nav ul {
        flex-direction: column;
    }

    .site-nav li {
        flex-grow: 0;
    }

    .site-nav a {
        display: block;
        justify-content: flex-start;
    }

    /* Cards stack on tablet */
    .services-grid,
    .coins-grid {
        flex-wrap: wrap;
        gap: 24px;
    }

    .card {
        flex: 1 1 100%;
    }

    .about-section {
        flex-wrap: wrap;
        gap: 32px;
    }

    .about-section__text,
    .about-section__image {
        flex: 1 1 100%;
    }

    .about-section__image {
        min-height: 300px;
    }

    .site-footer__inner {
        flex-direction: column;
        gap: 32px;
        padding: 2.5rem 1.034rem 1rem;
    }

    .footer-col {
        width: 100%;
    }

    .site-footer__bottom {
        padding: 1rem 1.034rem;
    }

    .trustindex-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
    }

    .ti-card {
        flex: 0 0 50%;
    }
}

/* ============================================
   Responsive — Mobile breakpoint
   Elementor mobile: max-width 767px (47.9375em)
   ============================================ */


/* --- Utility Classes --- */
.u-text-center { text-align: center; }
.u-ml { margin-left: 1rem; }
.u-mt-2 { margin-top: 2rem; }
.u-pb-3 { padding-bottom: 3rem; }
.u-gold { color: var(--gold); }
.u-gold-underline { color: var(--gold); text-decoration: underline; }
.btn--outline-gold { border-color: var(--gold); color: var(--gold); }
.coin-detail__cta--flex { display: flex; gap: 1rem; flex-wrap: wrap; }
.coin-detail__note { margin-top: 0.75rem; font-size: 0.9rem; opacity: 0.8; }

@media (max-width: 47.9375em) {
    :root {
        /* Mobile text sizes (exact from live computed) */
        --text-h1: 2.125rem;       /* 34px */
        --text-h1-lh: 2.55rem;      /* 40.8px */
        --text-h2: 1.875rem;        /* 30px */
        --text-h2-lh: 2.25rem;      /* 36px */
        --text-h3: 1.5rem;          /* 24px */
        --text-h3-lh: 1.8rem;       /* 28.8px */
        --text-h4: 1.264rem;       /* 20.225px */
        --text-h4-lh: 1.517rem;    /* 24.27px */
        --text-body: 1.0625rem;    /* 17px */
        --text-body-lh: 1.9125rem;  /* 30.6px */

        /* Mobile spacing */
        --space-sm: 0.75rem;   /* 12px */
        --space-md: 1rem;      /* 16px */
        --space-lg: 1.5rem;    /* 24px */
        --space-2xl: 3rem;     /* 48px */

        /* Mobile section padding */
        --section-sm: 3rem;   /* 48px */
        --section-md: 4rem;    /* 64px */

        /* Mobile gaps */
        --gap-md: 1.5rem;     /* 24px */
        --gap-lg: 2rem;       /* 32px */

        /* Mobile button */
        --btn-lg-padding: 1rem 1.5rem; /* 16px 24px */
    }

    /* --- Body --- */
    body {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    /* --- Header --- */
    .site-header__inner {
        gap: 1rem;
        padding: 0.625rem 1.034rem;
        flex-wrap: nowrap;
    }

    .site-header__logo,
    .site-header__logo img {
        width: 40px;
    }

    /* Hide phone button on mobile, show hamburger */
    .btn-phone {
        display: none;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 5.5px;
        border-radius: 3px;
        color: var(--gold);
        font-size: 1.375rem;
        line-height: 2.0625rem;
    }

    .menu-toggle__icon {
        fill: var(--gold);
    }

    /* Nav dropdown */
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--black);
        flex-direction: column;
        padding: 0;
        z-index: var(--z-dropdown);
    }

    .site-nav.open {
        display: block;
    }

    .site-nav ul {
        flex-direction: column;
    }

    .site-nav li {
        flex-grow: 0;
    }

    .site-nav a {
        padding: 0.8125rem 1.25rem;
        display: block;
        justify-content: flex-start;
        font-size: var(--text-nav);
    }

    /* --- Hero --- */
    .hero__content {
        padding: 6.25rem 1.034rem 6rem;
    }

    .hero__title {
        margin-bottom: 12px;
    }

    .hero__subtitle {
        margin-bottom: 24px;
    }

    .hero .btn--lg {
        padding: 16px 24px;
        margin-bottom: 24px;
    }

    .hero .btn--outline {
        margin-left: 0 !important;
        margin-top: 12px;
        width: 100%;
    }

    /* --- Spacer section --- */
    .section--sm {
        padding: var(--section-sm) 16.55px;
    }

    /* --- Reviews Section --- */
    .reviews-section {
        padding: var(--section-sm) 1.034rem;
    }

    .reviews-section__link {
        display: block;
        margin-top: 0.5rem;
    }

    .reviews-carousel__track {
        animation: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        width: auto;
    }

    .review-card {
        flex: 0 0 82vw;
        width: 82vw;
        scroll-snap-align: start;
    }

    /* --- Services Section --- */
    .services-section {
        padding: var(--section-md) 1.034rem;
    }

    .services-heading {
        margin-bottom: 24px;
    }

    .services-grid {
        flex-wrap: wrap;
        gap: 24px;
    }

    /* --- Card --- */
    .card {
        flex: 1 1 100%;
    }

    /* --- About Section --- */
    .about-section {
        flex-direction: row;
        flex-wrap: wrap-reverse;
        gap: 2rem;
        padding: var(--section-md) 1.034rem;
    }

    .about-section__text,
    .about-section__image {
        flex: 1 1 100%;
    }

    .about-section__image {
        min-height: 16rem;
        border-radius: 16px;
    }

    /* --- Coin Sections --- */
    .coins-section {
        padding: var(--section-md) 1.034rem;
    }

    .coins-section .text-h2 {
        margin-bottom: 48px;
    }

    .coins-grid {
        flex-wrap: wrap;
        gap: 24px;
        margin-bottom: 24px;
    }

    .coins-grid:last-child {
        margin-bottom: 0;
    }

    /* --- FAQ Section --- */
    .faq-section {
        padding: var(--section-sm) 1.034rem;
    }

    .faq-section__heading {
        margin-bottom: 1.5rem;
    }

    .faq-list {
        gap: 0.5rem;
    }

    .faq-item__question {
        padding: 1rem 1.25rem;
    }

    .faq-item__question h3 {
        font-size: 1rem;
    }

    .faq-item__body {
        padding: 0 1.25rem 1rem;
    }

    /* --- CTA Section --- */
    .cta-section {
        padding: 2.5rem 1.034rem;
    }

    .cta-section__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cta-section__heading {
        font-size: 1.875rem;
        margin-bottom: 1rem;
    }

    .cta-section__text {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .contact-form {
        padding: 1.5rem;
    }

    /* --- Footer --- */
    .site-footer__inner {
        flex-direction: column;
        gap: 2rem;
        padding: 2.5rem 1.034rem 1rem;
    }

    .site-footer__bottom {
        padding: 1rem 1.034rem;
    }

    .footer-col {
        width: 100%;
    }

    .footer-col a {
        min-height: 44px;
        padding-block: 0.625rem;
    }

    .footer-col__heading {
        margin-bottom: 12px;
    }

    .footer-col__text {
        font-size: 1.0625rem;
        line-height: 1.9125rem;
    }

    /* --- Estate Page Mobile --- */
    .estate-section__two-col {
        flex-direction: column;
        flex-wrap: wrap-reverse;
        gap: 2rem;
    }

    .estate-section__text-col,
    .estate-section__image-col {
        flex: 1 1 100%;
    }

    .estate-section__image-col {
        min-height: 16rem;
    }

    /* --- Coin Grid Mobile --- */
    .coin-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .coin-card__body {
        padding: 1.5rem;
    }

    .coin-card__image {
        max-width: 18rem;
        margin: 0 auto;
    }

    /* --- Coin Detail Mobile --- */
    .coin-detail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .coin-detail__image {
        max-width: 18rem;
        margin: 0 auto;
        justify-self: center;
    }

    .coin-detail__info {
        padding: 0;
    }

    .coin-detail__name {
        font-size: 1.5rem;
    }

    .coin-detail__price {
        font-size: 1.25rem;
    }

    .coin-detail__description p {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    .related-coins {
        padding: 3rem 1.034rem;
    }
}

/* ============================================
   Reviews Carousel — Desktop + Reduced Motion
   ============================================ */

@media (min-width: 64em) {
    .reviews-carousel__track {
        animation: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        width: auto;
    }

    .review-card {
        flex: 0 0 calc((100vw - 10rem) / 3);
        max-width: 22rem;
        min-width: 20rem;
        width: calc((100vw - 10rem) / 3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-carousel__track {
        animation: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        width: auto;
    }
}