.hero--contact {
    position: relative;
    min-height: 35rem;
}


.contact-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-block: 4rem;

    justify-content: center;

    padding-inline: clamp(1rem, 4vw, 3rem);
}

.detail-card {
    flex: 1 1 18rem;
    background: var(--colour-cream, #f8f7f4);
    padding: 2.5rem 3rem;
    border-radius: var(--card-radius, 1rem);
    text-align: centre;
    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
}

.detail-card h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    margin-block: 1rem 0.5rem;
}

.detail-card .detail-icon {
    font-size: 2.25rem;
    color: var(--colour-gold, #c7a450);
}

.contact-link {
    color: var(--colour-navy, #00528f);
    text-decoration: underline;
}

.opening-hours {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.6;
}

.contact-map {
    flex: 1 1 100%;
}

.contact-map iframe {
    width: 100%;
    height: 320px;
    border: 0;
    border-radius: var(--card-radius, 1rem);
    box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
    margin-block: 2rem 4rem;
}

.newsletter-section {
    background: var(--colour-light-blue, #bfe3fa) right 20% top / 240px repeat no-repeat;
    padding: 4rem max(8vw, 3rem);
    border-radius: 2.25rem;
    box-shadow: 0 4px 12px rgb(0 0 0 / 4%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.newsletter-heading,
.newsletter-tagline {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto;
    color: #00324e;
}

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

.newsletter-form input {
    width: 100%;
    height: 3rem;
    padding-inline: 1.25rem;
    border: none;
    border-radius: 9999px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
}

.newsletter-form input:focus {
    outline: 2px solid var(--colour-gold, #c7a450);
    box-shadow: inset 0 0 0 1px var(--colour-gold, #c7a450);
}

.newsletter-form button {
    height: 3rem;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1rem;
    background: var(--colour-navy, #00528f);
    color: #fff;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.newsletter-form button:hover,
.newsletter-form button:focus {
    transform: translateY(-2px);
}

.privacy-note {
    display: block;
    max-width: 26rem;
    margin: 0.75rem auto 0;
    font-size: 0.8rem;
    color: #00324e;
    opacity: 0.8;
}

@media (max-width: 45em) {
    .newsletter-section {
        padding: 3rem 1.25rem;
    }
}

@media (max-width: 45em) {
    .detail-card {
        text-align: center;
    }

    .detail-card .detail-icon {
        margin: 0 auto 1rem;
        display: block;
    }
}

.contact-page-wrap {
    max-width: 70rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.contact-cards,
.newsletter-section,
.contact-map {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.newsletter-form .field {
  margin-bottom: 1rem;
}

.newsletter-form input.is-invalid {
  border: 2px solid #d32f2f;
}

.newsletter-form .error {
  display: block;
  color: #d32f2f;
  font-size: 0.875rem;
  margin-top: .35rem;
  min-height: 1.1em; 
}