/* ==========================================================================
   Book an In-Person Appointment — page styling.

   Matched to the site: navy #0a3d62, square corners, Source Serif headings,
   Libre Franklin for labels, Cabin for buttons. The booking wizard is
   re-skinned through its own custom properties rather than overridden rule
   by rule, so it inherits this palette wholesale.
   ========================================================================== */

/* The theme prints a page-title banner AND a second page title above the
   content, each with its own <h1>. With the hero's heading that is three H1s
   and the same headline three times, so both are suppressed on this page only.
   Delete these rules to bring the banner and breadcrumb back. */
body.ipb-booking-page .wrap_ova_header,
body.ipb-booking-page .breadcrumb,
body.ipb-booking-page .main > .page-title { display: none !important; }

/* The header template ends with a 1px-tall section carrying a 110px bottom
   margin — spacing meant for the title banner that is hidden above, so on this
   page it was just a white band between the menu and the hero. Zeroed here
   only; every other page keeps it. The selector avoids the template's own id,
   which changes if the header is rebuilt. */
body.ipb-booking-page .ova-wrapp > .elementor:first-of-type > .elementor-section:last-child {
    margin-bottom: 0 !important;
}

.ipb-page {
    --fa-navy: #0a3d62;
    --fa-navy-dark: #072c48;
    --fa-blue: #245897;
    --fa-link: #0067da;
    --fa-ground: #f5f6f8;
    --fa-line: #dfe3e9;
    --fa-ink: #1a1a1a;
    --fa-muted: #56606d;

    color: var(--fa-ink);
    font-family: "Source Serif Pro", Georgia, "Times New Roman", serif;
}

.ipb-page * { box-sizing: border-box; }

.ipb-page-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}

.ipb-page-section { padding: 54px 20px; }

.ipb-page h2 {
    font-family: "Source Serif Pro", Georgia, serif;
    font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
    line-height: 1.22;
    color: var(--fa-navy);
    margin: 0 0 10px;
    font-weight: 700;
}

.ipb-page h3 {
    font-family: "Source Serif Pro", Georgia, serif;
    font-size: 1.06rem;
    color: var(--fa-navy);
    margin: 0 0 6px;
    font-weight: 700;
}

.ipb-page-sub {
    margin: 0 0 26px;
    color: var(--fa-muted);
    font-size: 1rem;
    max-width: 68ch;
}

.ipb-eyebrow {
    font-family: "Libre Franklin", sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9db6cf;
    margin: 0 0 12px;
}

/* ------------------------------------------------------------- hero ---- */

.ipb-page-hero {
    background: linear-gradient(160deg, #0a3d62 0%, #072c48 100%);
    color: #fff;
    padding: 58px 20px 52px;
}

.ipb-page-hero h1 {
    font-family: "Source Serif Pro", Georgia, serif;
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
    line-height: 1.12;
    color: #fff;
    margin: 0 0 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.ipb-page-lede {
    font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .87);
    max-width: 60ch;
    margin: 0 0 26px;
}

.ipb-page-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.ipb-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 0;
    border: 2px solid transparent;
    font-family: Cabin, "Libre Franklin", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .2px;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ipb-page-btn svg { width: 18px; height: 18px; flex: none; }

.ipb-page-btn--primary { background: #fff; color: var(--fa-navy) !important; border-color: #fff; }
.ipb-page-btn--primary:hover { background: #e8eef5; border-color: #e8eef5; }

.ipb-page-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .55); }
.ipb-page-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.ipb-page-assurances {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: "Libre Franklin", sans-serif;
    font-size: .86rem;
    color: rgba(255, 255, 255, .84);
}
.ipb-page-assurances li { display: inline-flex; align-items: center; gap: 8px; }
.ipb-page-assurances svg { width: 16px; height: 16px; color: #8fb8dd; flex: none; }

/* ------------------------------------------------------------ grids ---- */

.ipb-page-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

.ipb-page-card {
    background: #fff;
    border: 1px solid var(--fa-line);
    border-top: 3px solid var(--fa-navy);
    padding: 20px 20px 18px;
}
.ipb-page-card p { margin: 0; color: var(--fa-muted); font-size: .93rem; line-height: 1.6; }

.ipb-page-card-ico {
    display: inline-grid;
    place-items: center;
    width: 38px; height: 38px;
    background: #eef3f8;
    color: var(--fa-navy);
    margin-bottom: 12px;
}
.ipb-page-card-ico svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ steps ---- */

.ipb-page-steps { background: var(--fa-ground); padding: 54px 0; border-top: 1px solid var(--fa-line); border-bottom: 1px solid var(--fa-line); }
.ipb-page-grid--steps { list-style: none; margin: 22px 0 0; padding: 0; counter-reset: none; }
.ipb-page-grid--steps li { background: #fff; border: 1px solid var(--fa-line); padding: 22px 20px 20px; }
.ipb-page-grid--steps p { margin: 0; color: var(--fa-muted); font-size: .93rem; line-height: 1.6; }

.ipb-page-step-n {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    background: var(--fa-navy);
    color: #fff;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 13px;
}

/* --------------------------------------------------------- locations --- */

.ipb-page-locations { background: var(--fa-ground); padding: 54px 0; border-top: 1px solid var(--fa-line); }

.ipb-office {
    background: #fff;
    border: 1px solid var(--fa-line);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.ipb-office h3 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 12px; }

.ipb-office-tz {
    font-family: "Libre Franklin", sans-serif;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--fa-muted);
    background: #eef3f8;
    padding: 2px 8px;
}

.ipb-office-addr,
.ipb-office-hours {
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--fa-muted);
}
.ipb-office-addr svg,
.ipb-office-hours svg { width: 17px; height: 17px; flex: none; color: var(--fa-navy); margin-top: 2px; }
.ipb-office-hours em { display: block; font-style: normal; }
.ipb-office-hours small { display: block; margin-top: 3px; font-size: .8rem; color: #8892a0; }

.ipb-office-actions {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--fa-line);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ipb-office-pick {
    appearance: none;
    background: var(--fa-navy);
    color: #fff;
    border: 2px solid var(--fa-navy);
    border-radius: 0;
    padding: 11px 18px;
    min-height: 44px; /* touch target */
    font-family: Cabin, "Libre Franklin", sans-serif;
    font-size: .93rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease;
}
.ipb-office-pick:hover { background: var(--fa-navy-dark); border-color: var(--fa-navy-dark); }

.ipb-office-actions a {
    font-family: "Libre Franklin", sans-serif;
    font-size: .88rem;
    color: var(--fa-link);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* touch target, level with the button beside it */
}
.ipb-office-actions a:hover { text-decoration: underline; }

/* ------------------------------------------------------ mobile service -- */

.ipb-mobile-band {
    background: var(--fa-navy);
    color: #fff;
    padding: 34px 28px;
    border-left: 5px solid var(--fa-blue);
}
.ipb-mobile-band h2 { color: #fff; margin-bottom: 10px; }
.ipb-mobile-band p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, .88);
    line-height: 1.7;
    max-width: 70ch;
}
.ipb-mobile-band .ipb-page-btn--primary { background: #fff; color: var(--fa-navy) !important; border-color: #fff; }
.ipb-mobile-band .ipb-page-btn--primary:hover { background: #e8eef5; border-color: #e8eef5; }

/* ---------------------------------------------------------------- faq -- */

.ipb-page-faq { padding: 54px 0; }

.ipb-faq {
    border-bottom: 1px solid var(--fa-line);
    padding: 4px 0;
}
.ipb-faq:first-of-type { border-top: 1px solid var(--fa-line); }

.ipb-faq summary {
    cursor: pointer;
    padding: 16px 34px 16px 0;
    font-family: "Source Serif Pro", Georgia, serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--fa-navy);
    position: relative;
    list-style: none;
}
.ipb-faq summary::-webkit-details-marker { display: none; }
.ipb-faq summary::after {
    content: "";
    position: absolute;
    right: 6px; top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--fa-navy);
    border-bottom: 2px solid var(--fa-navy);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .18s ease;
}
.ipb-faq[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ipb-faq p { margin: 0 0 18px; color: var(--fa-muted); line-height: 1.7; max-width: 78ch; }

/* --------------------------------------------------------------- help -- */

.ipb-page-help { background: var(--fa-navy); color: #fff; padding: 48px 0; text-align: center; }
.ipb-page-help h2 { color: #fff; }
.ipb-page-help p { color: rgba(255, 255, 255, .85); max-width: 56ch; margin: 0 auto 24px; }
.ipb-page-help .ipb-page-hero-actions { justify-content: center; margin-bottom: 0; }

/* ============================================================ wizard ====
   Re-skin the booking wizard to the site palette by retargeting the custom
   properties it already exposes, rather than fighting its stylesheet.
   ======================================================================== */

.ipb-page .ipb-booking {
    --ipb-navy: #0a3d62;
    --ipb-navy-700: #072c48;
    --ipb-navy-050: #f2f6fb;
    --ipb-navy-100: #dce8f4;
    --ipb-amber: #0a3d62;
    --ipb-amber-600: #072c48;
    --ipb-radius: 0px;
    --ipb-radius-sm: 0px;
    --ipb-shadow: 0 1px 2px rgba(10, 61, 98, .06), 0 10px 28px rgba(10, 61, 98, .09);
    --ipb-ink: #1a1a1a;
    --ipb-muted: #56606d;
    --ipb-line: #dfe3e9;

    margin: 0;
    font-family: "Libre Franklin", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* The wizard's primary button uses the amber token with dark text; on this
   palette it is solid navy, so the label has to flip to white. */
.ipb-page .ipb-btn--primary { color: #fff; }
.ipb-page .ipb-btn--primary.is-busy::after { color: #fff; }

/* The page's own heading colour has the same specificity as the wizard's and
   loads later, which would paint the wizard's masthead navy-on-navy. */
.ipb-page .ipb-booking .ipb-head h2 { color: #fff; }
.ipb-page .ipb-booking .ipb-head p { color: rgba(255, 255, 255, .84); }
.ipb-page .ipb-booking .ipb-done h3 { color: var(--fa-navy); }

.ipb-page .ipb-head h2,
.ipb-page .ipb-panel-title,
.ipb-page .ipb-done h3 { font-family: "Source Serif Pro", Georgia, serif; }

.ipb-page .ipb-btn { font-family: Cabin, "Libre Franklin", sans-serif; }

/* -------------------------------------------------------- breakpoints -- */

/* Tighten the vertical rhythm on phones; 54px bands read as dead space at
   375px, where the whole viewport is only 812px tall. */
@media (max-width: 699px) {
    .ipb-page-section { padding: 40px 20px; }
    .ipb-page-steps,
    .ipb-page-locations,
    .ipb-page-faq { padding: 40px 0; }
    .ipb-page-help { padding: 38px 0; }
    .ipb-page-hero { padding: 44px 20px 40px; }
    .ipb-page-lede { margin-bottom: 22px; }
    .ipb-page-hero-actions { margin-bottom: 24px; }
}

@media (min-width: 700px) {
    .ipb-page-grid--services,
    .ipb-page-grid--bring,
    .ipb-page-grid--steps { grid-template-columns: repeat(3, 1fr); }
    .ipb-page-grid--offices { grid-template-columns: repeat(2, 1fr); }
    .ipb-page-hero { padding: 76px 20px 66px; }
    .ipb-page-section { padding: 64px 20px; }
}

@media (min-width: 1000px) {
    .ipb-page-grid--services { grid-template-columns: repeat(3, 1fr); }
    .ipb-page-grid--offices { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .ipb-page *, .ipb-page *::before, .ipb-page *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}

@media print {
    .ipb-page-hero, .ipb-page-help, .ipb-page-steps { background: none !important; color: #000 !important; }
    .ipb-page-btn, .ipb-office-pick { display: none !important; }
}

/* ---------------------------------------------- already booked band ---- */

.ipb-page .ipb-manage-band { background: #f1f5fa; border-top: 1px solid var(--fa-line); }

.ipb-page .ipb-find { margin-top: 18px; max-width: 560px; }
.ipb-page .ipb-find .ipb-label {
    display: block;
    font-family: "Libre Franklin", sans-serif;
    font-size: .85rem;
    font-weight: 600;
    color: var(--fa-navy);
    margin-bottom: 7px;
}
.ipb-page .ipb-find-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ipb-page .ipb-find .ipb-input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 12px 14px;
    min-height: 48px;
    border: 1px solid var(--fa-line);
    border-radius: 0;
    background: #fff;
    font-family: "Libre Franklin", sans-serif;
    font-size: 16px; /* 16px stops iOS zooming on focus */
    color: var(--fa-ink);
}
.ipb-page .ipb-find .ipb-input:focus {
    outline: 3px solid rgba(10, 61, 98, .3);
    outline-offset: 1px;
    border-color: var(--fa-navy);
}
.ipb-page .ipb-find .ipb-page-btn {
    flex: 0 0 auto;
    min-height: 48px;
    /* Safari paints a native grey button and ignores background/colour on a
       <button> unless the native appearance is switched off. */
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* The primary button is white because it was designed for the navy hero; on
   this pale band it has to be the navy fill instead. */
.ipb-page .ipb-manage-band .ipb-page-btn--primary {
    background: var(--fa-navy);
    color: #fff !important;
    border-color: var(--fa-navy);
}
.ipb-page .ipb-manage-band .ipb-page-btn--primary:hover {
    background: var(--fa-navy-dark);
    border-color: var(--fa-navy-dark);
}
.ipb-page .ipb-find .ipb-page-btn[disabled] { opacity: .6; cursor: default; }

.ipb-page .ipb-find-msg {
    margin: 12px 0 0;
    font-family: "Libre Franklin", sans-serif;
    font-size: .92rem;
    line-height: 1.6;
}
.ipb-page .ipb-find-msg.is-ok { color: #1d6b3f; }
.ipb-page .ipb-find-msg.is-error { color: #8c1d18; }

/* ------------------------------------------------- online-notary band --- */

.ipb-page .ipb-ron-band {
    background: var(--fa-navy);
    color: #fff;
    padding: 18px 0;
}

.ipb-page .ipb-ron-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ipb-page .ipb-ron-text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.ipb-page .ipb-ron-text svg { width: 22px; height: 22px; flex: none; color: #8fb8dd; margin-top: 2px; }
.ipb-page .ipb-ron-text p {
    margin: 0;
    font-family: "Libre Franklin", sans-serif;
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}
.ipb-page .ipb-ron-text strong { color: #fff; display: block; font-size: 1rem; margin-bottom: 2px; }

.ipb-page .ipb-ron-btn { flex: 0 0 auto; }

@media (max-width: 699px) {
    .ipb-page .ipb-ron-band { padding: 16px 0; }
    .ipb-page .ipb-ron-btn { width: 100%; justify-content: center; }
}