/* ==========================================================================
   Plymouth Dance Centre — index.css
   Homepage sections: tide-cropped hero, serif intro strip, hen-party grid,
   navy classes panel, first-dance split, made-for-Plymouth strip, enquiry.
   ========================================================================== */

/* --- Hero --- */
.hero {
    min-height: 670px;
    position: relative;
    background: var(--navy-deep);
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
}

.hero__photo {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: url('../images/hen-party-dance-class-plymouth.webp') center/cover;
}

.hero__shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(6, 24, 36, 0.94), rgba(6, 24, 36, 0.75) 41%, rgba(6, 24, 36, 0.13) 78%),
        linear-gradient(0deg, rgba(6, 24, 36, 0.45), transparent 45%);
}

.hero__copy {
    width: min(740px, 100%);
    margin-left: clamp(24px, 11vw, 176px);
    padding: 90px 20px 130px 0;
    color: #fff;
}

.hero__copy h1 {
    font-size: clamp(46px, 5.6vw, 80px);
    line-height: 0.9;
    margin-bottom: 31px;
}

/* "& Dance Classes in Plymouth" — secondary keyword as a Signal Coral chip */
.hero__amp {
    display: inline-block;
    background: var(--coral);
    color: #fff;
    font-family: var(--serif);
    font-size: clamp(19px, 2.2vw, 29px);
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding: 7px 15px 9px;
    margin-top: 20px;
}

.hero__intro {
    max-width: 500px;
    font-size: 16px;
    line-height: 1.78;
    color: #eef4f3;
    background: rgba(6, 24, 36, 0.58);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-left: 2px solid var(--coral);
    padding: 18px 22px;
}

.hero__actions {
    margin-top: 35px;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.hero__note {
    position: absolute;
    right: clamp(25px, 5vw, 83px);
    bottom: 108px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 11px;
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    padding-left: 13px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.12em;
}

.hero__note b {
    color: var(--coral);
    font-size: 18px;
}

/* Tide curve into the page */
.hero__tide {
    position: absolute;
    z-index: -1;
    background: var(--paper);
    height: 73px;
    width: 115%;
    bottom: -35px;
    left: -8%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* --- Serif statement strip --- */
.intro-strip {
    padding: 88px clamp(24px, 10vw, 158px) 78px;
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: baseline;
    border-bottom: 1px solid var(--line);
}

.intro-strip p {
    font-family: var(--serif);
    font-size: clamp(29px, 3.3vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0;
    color: var(--ink);
    max-width: 670px;
}

.intro-strip span {
    text-transform: uppercase;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.13em;
    line-height: 1.6;
    color: #4f6169;
    max-width: 185px;
}

/* --- Hen party grid --- */
.hen-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 15px;
    max-width: var(--container);
    margin: 0 auto 29px;
}

.hen-card {
    background: var(--sand);
    padding: 27px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), background 0.25s ease;
}

.hen-card:hover {
    transform: translateY(-5px);
    background: #ece8dd;
}

.hen-card h3 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--ink);
    font-size: 30px;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 8px 0;
}

.hen-card p {
    font-size: 13px;
    color: #52626a;
    line-height: 1.55;
    max-width: 296px;
    margin: 0;
}

.hen-card__topline {
    display: flex;
    justify-content: space-between;
    color: #4a5c63;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hen-card__topline span:first-child {
    color: var(--coral-ink);
}

.hen-card--featured .hen-card__topline span:first-child {
    color: var(--coral);
}

.hen-card__link {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 11px;
}

.hen-card__link span {
    color: var(--coral);
    font-size: 16px;
}

.hen-card--featured {
    background: var(--navy);
    color: #fff;
    grid-row: span 2;
    padding: 34px;
}

.hen-card--featured:hover {
    background: var(--navy-deep);
}

.hen-card--featured h3 {
    color: #fff;
    font-size: 44px;
}

.hen-card--featured p {
    color: #cedbdd;
}

.hen-card--featured .hen-card__link {
    color: #fff;
}

.hen-card--photo {
    overflow: hidden;
    grid-column: 2 / span 2;
    position: relative;
    border-radius: 120px 0 0 0;
    min-height: 250px;
    padding: 0;
    background: var(--navy-deep);
}

.hen-card--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hen-card--photo:hover img {
    transform: scale(1.04);
}

.hen-card__caption {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 17px 21px;
    background: var(--coral);
    color: #fff;
    font-family: var(--serif);
    font-size: 24px;
    line-height: 0.95;
}

/* Theme ticker: small-caps index of more themes */
.theme-ticker {
    max-width: var(--container);
    margin: 0 auto 33px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 8px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a5c63;
}

.theme-ticker a {
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}

.theme-ticker a:hover {
    color: var(--ink);
    border-color: var(--coral);
}

.theme-ticker b {
    color: var(--coral);
    font-size: 13px;
    line-height: 0;
}

/* Flat-price signal bar */
.price-signal {
    max-width: var(--container);
    margin: 0 auto 39px;
}

.hen-section__actions {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

/* --- Weekly classes (navy panel) --- */
.classes-section {
    background: var(--navy-deep);
    color: #fff;
    padding: 0 clamp(24px, 7vw, 112px);
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    min-height: 770px;
}

.classes-art {
    background: var(--coral);
    margin-left: calc(clamp(24px, 7vw, 112px) * -1);
    display: flex;
    padding: 63px 38px;
    position: relative;
    overflow: hidden;
    align-items: end;
}

.classes-art__circle {
    width: min(26vw, 356px);
    aspect-ratio: 1;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.66);
    border-radius: 50%;
    top: 91px;
    left: 27%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.12), 0 0 0 70px rgba(255, 255, 255, 0.08);
}

.classes-art > span {
    position: relative;
    font-family: var(--serif);
    font-size: clamp(38px, 4vw, 62px);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: #fff;
}

.classes-art__marks {
    position: absolute;
    left: 38px;
    top: 44px;
    color: var(--navy-deep);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.6;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.classes-main {
    padding: 107px 0 92px clamp(35px, 8vw, 130px);
}

.classes-main h2 {
    font-size: clamp(46px, 5.4vw, 76px);
}

.classes-lead {
    color: #c2d2d5;
    max-width: 443px;
    font-size: 15px;
    line-height: 1.75;
    margin: 28px 0 39px;
}

.class-list {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    max-width: 596px;
    margin-bottom: 29px;
}

.class-row {
    padding: 18px 0;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: padding 0.2s ease, color 0.2s ease;
}

.class-row:hover {
    padding-left: 9px;
    color: var(--coral);
}

.class-row__number {
    color: var(--coral);
    width: 27px;
    font-size: 10px;
    font-weight: 800;
}

.class-row__name {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1;
    flex: 1;
}

.class-row__name small {
    display: block;
    font-family: var(--sans);
    color: #b3c7cb;
    font-size: 11px;
    line-height: 1.5;
    margin-top: 7px;
    max-width: 385px;
}

.class-row__arrow {
    color: var(--coral);
    font-size: 19px;
}

/* --- First dance --- */
.first-dance-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #e9eae4;
}

.first-dance__photo {
    min-height: 670px;
    position: relative;
    overflow: hidden;
    border-radius: 0 135px 0 0;
}

.first-dance__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}

.first-dance__copy {
    padding: 105px clamp(29px, 8vw, 128px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.first-dance__copy h2 {
    font-size: clamp(46px, 5.4vw, 76px);
}

.first-dance__copy p:not(.eyebrow) {
    color: #4f5f66;
    font-size: 15px;
    line-height: 1.75;
    margin: 29px 0 23px;
    max-width: 430px;
}

.feature-list {
    margin: 0 0 32px;
}

.feature-list li {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #263d47;
    font-size: 13px;
    margin: 14px 0;
}

.feature-list li span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: #d7e3e2;
    color: var(--navy);
    border-radius: 50%;
    font-weight: 800;
    flex-shrink: 0;
}

/* --- Made for Plymouth --- */
.visit-section {
    background: var(--mist);
    padding: 102px clamp(24px, 9vw, 150px);
    color: var(--ink);
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 93px;
    position: relative;
    overflow: hidden;
}

.visit-section::before {
    content: "";
    position: absolute;
    width: 42vw;
    height: 42vw;
    max-width: 520px;
    max-height: 520px;
    border: 1px solid rgba(7, 28, 44, 0.11);
    border-radius: 50%;
    right: -19vw;
    top: -27vw;
    box-shadow: 0 0 0 29px rgba(255, 255, 255, 0.17), 0 0 0 58px rgba(255, 255, 255, 0.11);
}

.visit-copy,
.visit-details {
    position: relative;
    z-index: 1;
}

.visit-copy h2 {
    font-size: clamp(46px, 5.4vw, 76px);
    margin-bottom: 29px;
}

.visit-copy p:not(.eyebrow) {
    max-width: 440px;
    line-height: 1.8;
    color: #516269;
}

.visit-copy .signal-bar {
    margin-top: 33px;
    max-width: 440px;
}

.visit-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: end;
}

.visit-details > div {
    padding: 22px 0 0 20px;
    border-top: 1px solid rgba(7, 28, 44, 0.26);
    position: relative;
}

.visit-details__number {
    position: absolute;
    color: var(--coral-ink);
    font-size: 11px;
    font-weight: 800;
    left: 0;
    top: 22px;
}

.visit-details__glyph {
    color: var(--ink);
    margin-left: 29px;
    font-size: 20px;
    line-height: 1;
}

.visit-details h3 {
    font-family: var(--serif);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin: 19px 0 12px;
}

.visit-details p {
    color: #4a5c63;
    font-size: 13px;
    line-height: 1.65;
}

/* --- Map --- */
.map-section {
    padding: 102px clamp(24px, 8vw, 128px);
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(35px, 6vw, 90px);
    align-items: center;
    background: var(--paper);
    border-top: 1px solid var(--line);
}

.map-section__copy h2 {
    font-size: clamp(46px, 5.4vw, 76px);
    margin-bottom: 29px;
}

.map-section__copy p:not(.eyebrow) {
    max-width: 440px;
    line-height: 1.8;
    color: #516269;
}

.map-section__copy .signal-bar {
    margin-top: 33px;
    max-width: 440px;
}

.map-section__frame {
    position: relative;
    min-height: 460px;
    border-radius: 0 120px 0 0;
    overflow: hidden;
    background: var(--mist);
}

.map-section__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-section__caption {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 17px 21px;
    background: var(--coral);
    color: #fff;
    font-family: var(--serif);
    font-size: 24px;
    line-height: 0.95;
    pointer-events: none;
}

/* --- FAQ --- */
.faq-section {
    background: var(--sand);
}

.faq-list {
    max-width: 860px;
    margin: 0 auto;
    border-top: 1px solid rgba(7, 28, 44, 0.26);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    transition: color var(--transition);
}

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

.faq-item__number {
    color: var(--coral-ink);
    font-size: 10px;
    font-weight: 800;
    width: 27px;
    flex-shrink: 0;
}

.faq-item__q {
    font-family: var(--serif);
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--ink);
    flex: 1;
    transition: color var(--transition);
}

.faq-item summary:hover .faq-item__q {
    color: var(--coral);
}

.faq-item summary i {
    color: var(--coral);
    font-size: 13px;
    transition: transform var(--transition);
    align-self: center;
}

.faq-item[open] summary i {
    transform: rotate(45deg);
}

.faq-item p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 24px 45px;
    max-width: 640px;
}

/* --- Enquiry --- */
.enquiry-section {
    padding: 115px clamp(24px, 8vw, 128px) 122px;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 9vw;
    background: var(--paper);
    position: relative;
}

.enquiry-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 73px;
    width: clamp(7px, 1.2vw, 16px);
    height: 205px;
    background: var(--coral);
}

.enquiry-title h2 {
    font-size: clamp(46px, 5.4vw, 76px);
}

.enquiry-index {
    color: var(--coral);
    font-family: var(--serif);
    font-size: 47px;
    letter-spacing: -0.06em;
    line-height: 0.75;
    margin-bottom: 30px;
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.enquiry-index span {
    color: #738287;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
    padding-bottom: 2px;
}

.enquiry-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 23px;
    padding-top: 10px;
    border-top: 1px solid var(--ink);
}

.enquiry-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #65747a;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 800;
}

.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea {
    appearance: none;
    border: 0;
    border-bottom: 1px solid #aebabc;
    background: transparent;
    padding: 9px 0;
    border-radius: 0;
    color: var(--ink);
    outline: none;
    font-size: 14px;
    font-family: var(--sans);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    resize: vertical;
}

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
    border-bottom: 2px solid var(--coral);
}

.enquiry-form ::placeholder {
    color: #97a6aa;
}

.enquiry-form .full-field {
    grid-column: span 2;
}

.enquiry-form .form-button {
    justify-self: start;
    margin-top: 5px;
}

.form-note {
    grid-column: span 2;
    color: #5a6a70;
    font-size: 10px;
    line-height: 1.5;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 860px) {
    .hero {
        min-height: 646px;
    }

    .hero__copy {
        margin-left: clamp(24px, 7vw, 62px);
    }

    .hero__note {
        right: 24px;
    }

    .intro-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .hen-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .hen-card {
        min-height: 245px;
    }

    .hen-card--featured {
        grid-row: span 1;
    }

    .hen-card--photo {
        grid-column: span 2;
        min-height: 285px;
    }

    .classes-section {
        grid-template-columns: 0.38fr 0.62fr;
    }

    .classes-main {
        padding-left: clamp(30px, 6vw, 55px);
    }

    .classes-art {
        padding: 45px 20px;
    }

    .first-dance__copy {
        padding: 80px 45px;
    }

    .visit-section {
        gap: 50px;
    }

    .enquiry-section {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

@media (max-width: 600px) {
    .hero {
        min-height: 660px;
        align-items: flex-end;
    }

    .hero__photo {
        background-position: 63% center;
    }

    .hero__shade {
        background:
            linear-gradient(90deg, rgba(6, 24, 36, 0.90), rgba(6, 24, 36, 0.30)),
            linear-gradient(0deg, rgba(6, 24, 36, 0.85), rgba(6, 24, 36, 0.08) 68%);
    }

    .hero__copy {
        margin: 0;
        padding: 70px 23px 95px;
    }

    .hero__copy h1 {
        font-size: 38px;
    }

    .hero__amp {
        font-size: 17px;
        margin-top: 14px;
    }

    .hero__intro {
        font-size: 14px;
        line-height: 1.7;
    }

    .hero__note {
        display: none;
    }

    .hero__actions {
        gap: 19px;
    }

    .intro-strip {
        padding: 62px 24px;
    }

    .intro-strip p {
        font-size: 33px;
    }

    .section-pad {
        padding: 75px 20px;
    }

    .hen-grid {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .hen-card {
        min-height: 235px;
    }

    .hen-card--featured {
        min-height: 273px;
    }

    .hen-card--featured h3 {
        font-size: 40px;
    }

    .hen-card--photo {
        min-height: 245px;
        border-radius: 75px 0 0 0;
    }

    .classes-section {
        display: block;
        padding: 0;
    }

    .classes-art {
        min-height: 166px;
        margin: 0;
        padding: 32px 24px;
    }

    .classes-art__circle {
        width: 158px;
        top: -40px;
        left: 54%;
    }

    .classes-art__marks {
        left: 15px;
        top: 29px;
    }

    .classes-main {
        padding: 68px 24px 77px;
    }

    .classes-main h2 {
        font-size: 48px;
    }

    .class-row__name {
        font-size: 24px;
    }

    .first-dance-section {
        grid-template-columns: 1fr;
    }

    .first-dance__photo {
        min-height: 360px;
        border-radius: 0 90px 0 0;
    }

    .first-dance__copy {
        padding: 68px 24px 74px;
    }

    .first-dance__copy h2,
    .visit-copy h2,
    .enquiry-title h2 {
        font-size: 48px;
    }

    .visit-section {
        display: block;
        padding: 72px 24px;
    }

    .visit-details {
        margin-top: 53px;
    }

    .map-section {
        display: block;
        padding: 72px 24px;
    }

    .map-section__copy h2 {
        font-size: 48px;
    }

    .map-section__frame {
        min-height: 320px;
        margin-top: 40px;
        border-radius: 0 75px 0 0;
    }

    .faq-item__q {
        font-size: 20px;
    }

    .faq-item p {
        margin-left: 0;
    }

    .enquiry-section {
        padding: 75px 24px;
    }

    .enquiry-section::before {
        top: 50px;
        height: 132px;
    }

    .enquiry-form {
        grid-template-columns: 1fr;
    }

    .enquiry-form .full-field,
    .form-note {
        grid-column: span 1;
    }
}