/* ================= Form pages (*-form.php) — the enquiry form is presented on a clinic clipboard =================
   Loaded only by the standalone form pages, after style.css, so pages that embed a form inline keep their look. */

section.form{
    --fp-navy: #0f2758;
    --fp-blue: #173c87;
    --fp-sky: #35bcf3;
    --fp-sky-soft: #e4f4fd;
    --fp-ice: #f3f6fb;
    --fp-line: rgba(23,60,135,.10);
    position: relative;
    overflow: hidden;
    background: var(--fp-ice);
    background-image: none;
    text-align: left;
}
/* two soft circles in the corners — decorative only */
section.form::before,
section.form::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
section.form::before{
    width: 520px; height: 520px; left: -220px; top: -200px;
    background: radial-gradient(circle, rgba(53,188,243,.16), rgba(53,188,243,0) 68%);
}
section.form::after{
    width: 420px; height: 420px; right: -160px; bottom: -180px;
    border: 64px solid rgba(23,60,135,.04);
}
section.form > .container{ position: relative; z-index: 1; }

/* the clipboard */
section.form .services-form{
    position: relative;
    max-width: 880px;
    margin: 34px auto 0;
    padding: clamp(46px, 4.4vw, 64px) clamp(20px, 3.4vw, 56px) clamp(24px, 2.6vw, 40px);
    background: #fff;
    border: 1px solid var(--fp-line);
    border-radius: 30px;
    box-shadow: 0 30px 70px rgba(15,39,88,.10), 0 2px 0 rgba(15,39,88,.03);
}
/* clip: navy plate with a sky rivet, overlapping the top edge */
section.form .services-form::before{
    content: "";
    position: absolute;
    left: 50%; top: -22px;
    width: 148px; height: 44px;
    transform: translateX(-50%);
    border-radius: 14px 14px 20px 20px;
    background: linear-gradient(180deg, var(--fp-blue), var(--fp-navy));
    box-shadow: 0 10px 22px rgba(15,39,88,.22);
}
section.form .services-form::after{
    content: "";
    position: absolute;
    left: 50%; top: -12px;
    width: 34px; height: 12px;
    transform: translateX(-50%);
    border-radius: 12px;
    background: var(--fp-sky);
    box-shadow: inset 0 -2px 0 rgba(15,39,88,.25);
}

section.form .services-form h4{
    font-family: "Poppins", "Inter", sans-serif;
    font-size: clamp(26px, 2.2vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--fp-blue);
    text-align: center;
    text-transform: none;
    margin: 0 auto 0 !important;
    padding-bottom: clamp(18px, 1.8vw, 26px);
    border-bottom: 1px solid var(--fp-line);
}
/* the embedded form paints its own pale grey; round it so it reads as the sheet on the clipboard */
section.form .services-form iframe{
    display: block;
    width: 100%;
    min-height: 320px;
    margin-top: clamp(16px, 1.6vw, 24px);
    border-radius: 18px !important;
}

/* back link: quiet outlined pill in the card's corner */
section.form .services-form > .btn.btn-primary{
    position: absolute;
    left: clamp(16px, 2vw, 28px);
    top: clamp(16px, 2vw, 26px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    padding: 8px 18px 8px 14px;
    border-radius: 40px;
    border: 1px solid #d9e1ee;
    background: #fff;
    color: var(--fp-blue);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
    transition: background .2s ease, border-color .2s ease;
}
section.form .services-form > .btn.btn-primary svg{ width: 18px; height: 18px; }
section.form .services-form > .btn.btn-primary:hover{ background: var(--fp-sky-soft); border-color: var(--fp-sky); color: var(--fp-blue); }
section.form .services-form > .btn.btn-primary:focus-visible{ outline: 3px solid var(--fp-sky); outline-offset: 2px; }
/* leave room for the back link beside the heading */
section.form .services-form > .btn.btn-primary + h4{ padding-top: 34px; }

@media (max-width: 767px){
    section.form .services-form{ border-radius: 22px; margin-top: 26px; padding: 44px 14px 18px; }
    section.form .services-form::before{ width: 116px; height: 36px; top: -18px; }
    section.form .services-form::after{ top: -9px; width: 28px; height: 10px; }
    section.form .services-form h4{ padding-left: 6px; padding-right: 6px; }
    section.form::before{ width: 340px; height: 340px; }
    section.form::after{ display: none; }
}
@media (prefers-reduced-motion: reduce){
    section.form .services-form > .btn.btn-primary{ transition: none; }
}