/* ===========================================================================
   Contact (page-id 69)
   The hero comes from the shared page-header.css; only page-specific rules
   belong here.
   =========================================================================== */

/* --------------------------------------------------------------- page ---- */
/* theme default is .site-content{padding-top:40px} - drop it so the hero
   starts flush against the header */
body.sts-page-69 .site-content {
    padding-top: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------- page heading -------- */
/* There is no hero on this page, so the H1, intro and breadcrumbs open the
   form section instead - centred, above the two columns. */
.sts-69 .sts-page-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 860px;
    margin: 0 auto 60px;
    text-align: center;
}

.sts-69 .sts-page-intro__title {
    color: #ffffff;
    font-family: var(--heading-font);
    font-size: clamp(38px, 5.4vw, 88px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -.01em;
}

.sts-69 .sts-page-intro__text {
    margin: 0;
    max-width: 640px;
    color: #FFFFFFB3;
    font-size: 18px;
    line-height: 1.6;
}

/* the crumbs are inline here rather than pinned over a hero image */
.sts-69 .sts-crumbs {
    margin: 0;
    color: #FFFFFF99;
    font-size: 15px;
    letter-spacing: .01em;
}

.sts-69 .sts-crumbs ol { gap: 12px; justify-content: center; }
.sts-69 .sts-crumbs a { color: #ffffff; }
.sts-69 .sts-crumbs .states-side-svg-icon svg { width: 16px; height: 16px; }

/* ------------------------------------------------- section backdrop ------ */
/* The photo the removed hero used, kept here so the page holds its original
   look. The scrim sits above it and below the content, since the cards are
   only semi-opaque and would otherwise be hard to read over the image. */
.sts-69 .sts-element.sts-element-ct-form:not(.sts-motion-effects-element-type-background),
.sts-69 .sts-element.sts-element-ct-form > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-image: url("../images/inner-bg.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}

.sts-69 .sts-element.sts-element-ct-form { position: relative; }

.sts-69 .sts-element.sts-element-ct-form::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .72);
    pointer-events: none;
    z-index: 0;
}

.sts-69 .sts-element.sts-element-ct-form > .e-con-inner {
    position: relative;
    z-index: 1;
}

/* the first section now opens the page, so it needs the header's clearance */
.sts-69 .sts-element.sts-element-ct-form { --padding-top: 90px; }

/* ===========================================================================
   Shared section furniture
   =========================================================================== */
.sts-69 .sts-element .states-side-heading:is(h2),
.sts-69 h2.states-side-heading {
    font-size: clamp(30px, 4.2vw, 66px);
    line-height: 1.04;
    text-align: center;
    text-transform: capitalize;
    white-space: normal;
}

.sts-69 .sts-element.sts-element-ct-form,
.sts-69 .sts-element.sts-element-ct-next,
.sts-69 .sts-element.sts-element-ct-faq {
    --display: flex;
    --flex-direction: column;
    --gap: 26px 26px;
    --row-gap: 26px;
    --column-gap: 26px;
    --overflow: hidden;
    --padding-top: 110px;
    --padding-bottom: 110px;
}

/* ---------------------------------------------------------- two columns -- */
.sts-69 .sts-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 60px;
    width: 100%;
}

/* the heading sits beside the form, so it reads left-aligned in its column */
.sts-69 .sts-split .sts-element-ct-form-h .states-side-heading,
.sts-69 .sts-split .sts-element-ct-form-b .states-side-heading {
    text-align: start;
    white-space: normal;
}

.sts-69 .sts-contact-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ===========================================================================
   Contact details (.sts-contact-list)
   =========================================================================== */
.sts-69 .sts-contact-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.sts-69 .sts-contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background-color: rgba(26, 26, 26, .7);
    border: 1px solid #FFFFFF29;
    border-radius: 14px;
    transition: background-color .35s ease, border-color .35s ease;
}

.sts-69 .sts-contact-item:hover {
    background-color: rgba(33, 33, 33, .82);
    border-color: #FFFFFF3D;
}

.sts-69 .sts-contact-item__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-primary, #f25b09);
}

.sts-69 .sts-contact-item__icon svg { width: 26px; height: 26px; }

.sts-69 .sts-contact-item__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sts-69 .sts-contact-item__label {
    color: #FFFFFF80;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
}

.sts-69 .sts-contact-item__value {
    color: #ffffff;
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
    transition: color .25s ease;
}

a.sts-contact-item__value:hover { color: var(--color-primary, #f25b09); }

/* ===========================================================================
   Contact form
   The .sts-form markup is the theme's own, so it inherits the panel styling.
   Only the card around it is page-specific.
   =========================================================================== */
.sts-69 .sts-contact-form {
    padding: 32px 30px 28px;
    background-color: rgba(26, 26, 26, .7);
    border: 1px solid #FFFFFF29;
    border-radius: 20px;
}

/* Compact fields. The theme drives every field off --input-* variables, so
   redefining them here resizes inputs, textarea and select together without
   overriding a single rule - and anything the theme adds later still follows.
   Defaults are 17px/20px padding; this trims that without touching the
   font size, so the fields stay readable. */
.sts-69 .sts-contact-form .sts-form {
    --input-padding-top: 14px;
    --input-padding-bottom: 14px;
    --input-padding-left: 18px;
    --input-padding-right: 18px;
}

/* the label sits above its field; 16px of clearance is more than a compact
   field needs */
.sts-69 .sts-contact-form .sts-form label .sts-form__control { margin-top: 12px; }
.sts-69 .sts-contact-form .sts-form p { margin-bottom: 22px; }

/* The theme's base input rule already covers textarea - it is in the same
   selector list as the inputs and picks up every --input-* variable. Only the
   things that rule cannot know are set here. */
.sts-69 .sts-contact-form .sts-form textarea {
    width: 100%;
    min-height: 118px;
    resize: vertical;
}

.sts-69 .sts-contact-form .sts-form p:last-child { margin-bottom: 0; }

/* ===========================================================================
   Social
   The theme's own social-icons widget, as used in the footer. There it sits
   small and right-aligned; here it is the section, so the icons are scaled up
   and centred.
   =========================================================================== */
.sts-69 .sts-element.sts-element-ct-social {
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --content-width: 100%;
}

.sts-69 .sts-social-cta {
    position: relative;
    width: 100%;
    padding: 120px 24px 126px;
    overflow: hidden;
}

/* 30% taller than the band so ScrollTrigger can slide it without exposing an
   edge (see the parallax block in scripts.html) */
.sts-69 .sts-social-cta__bg {
    position: absolute;
    top: -15%;
    left: 0;
    width: 100%;
    height: 130%;
    background-image: url("../images/cta-bg.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
    z-index: 0;
}

/* scrim above the moving layer, below the content */
.sts-69 .sts-social-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .58);
    pointer-events: none;
    z-index: 1;
}

.sts-69 .sts-social-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .sts-69 .sts-social-cta__bg { top: 0; height: 100%; transform: none !important; }
}

.sts-69 .sts-element.sts-element-ct-social-b .states-side-heading {
    text-align: center;
    max-width: 560px;
    margin-inline: auto;
}

.sts-69 .sts-element.sts-element-ct-social-i { width: 100%; margin-top: 10px; }

.sts-69 .sts-social-icons-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.sts-69 .sts-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: rgba(26, 26, 26, .7);
    border: 1px solid #FFFFFF29;
    color: #ffffff;
    transition: background-color .3s ease, border-color .3s ease,
        color .3s ease, transform .3s ease;
}

.sts-69 .sts-social-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.sts-69 .sts-social-icon:hover {
    background-color: var(--color-primary, #f25b09);
    border-color: var(--color-primary, #f25b09);
    color: #ffffff;
    transform: translateY(-4px);
}

.sts-69 .sts-social-icon:focus-visible {
    outline: 2px solid var(--color-primary, #f25b09);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sts-69 .sts-social-icon:hover { transform: none; }
}

/* ===========================================================================
   What happens next (.sts-nexts)
   The About page's belief-card treatment: a dark rounded card with a white
   pill header floating on top, carrying an orange numbered badge and the
   step title.
   =========================================================================== */
.sts-69 .sts-nexts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    width: 100%;
    margin-top: 12px;
}

.sts-69 .sts-next {
    display: flex;
    flex-direction: column;
    /* pill sits flush to the top and side edges */
    padding: 0 0 30px;
    border-radius: 46px;
    background-color: #1a1a1a;
    border: 1px solid #FFFFFF29;
    transition: background-color .35s ease, border-color .35s ease;
}

.sts-69 .sts-next:hover {
    background-color: #212121;
    border-color: #FFFFFF3D;
}

/* white pill: badge + title. Uses the theme's own primary-button shadow so it
   reads as the same raised surface as the buttons elsewhere on the site. */
.sts-69 .sts-next__header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 38px 14px 14px;
    border-radius: 999px;
    background-color: var(--color-snow-white, #ffffff);
    box-shadow: -5px -5px 5px 0px #62260052 inset, 8px -1px 14px 0px #FFFFFF3D inset;
}

.sts-69 .sts-next__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: var(--color-primary, #f25b09);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.sts-69 .sts-next__title {
    color: #000000;
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
}

/* the card has no side padding, so the copy carries the full inset */
.sts-69 .sts-next__text {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.65;
    padding: 26px 30px 0;
}

/* ------------------------------------------------------------------ faq -- */
.sts-69 .sts-element.sts-element-ct-faq:not(.sts-motion-effects-element-type-background),
.sts-69 .sts-element.sts-element-ct-faq > .sts-motion-effects-container > .sts-motion-effects-layer {
    background-color: #FFFFFF;
}

.sts-69 .sts-element.sts-element-ct-faq-h .states-side-heading { color: #000000; }

/* matches the home page FAQ section's --content-width */
.sts-69 .sts-element.sts-element-ct-faq-a {
    width: 100%;
    max-width: 856px;
    margin-inline: auto;
}

.sts-69 .sts-element.sts-element-ct-faq .states-side-accordion__item { border-color: #0000001F; }
.sts-69 .sts-element.sts-element-ct-faq .states-side-accordion__title { color: #000000; }
.sts-69 .sts-element.sts-element-ct-faq .states-side-accordion__content p { color: #00000099; }

.sts-69 .states-side-accordion__item.open .states-side-accordion__title,
.sts-69 .states-side-accordion__item.open .states-side-accordion__content p { color: #ffffff; }

/* ------------------------------------------------------------- tablet ---- */
@media (max-width: 1024px) {
    .sts-69 .sts-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .sts-69 .sts-nexts { grid-template-columns: minmax(0, 1fr); }

    .sts-69 .sts-element.sts-element-ct-form,
        .sts-69 .sts-element.sts-element-ct-next,
    .sts-69 .sts-element.sts-element-ct-faq {
        --padding-top: 80px;
        --padding-bottom: 80px;
    }
    .sts-69 .sts-element.sts-element-ct-form { --padding-top: 70px; }
}

/* ------------------------------------------------------------- mobile ---- */
@media (max-width: 767px) {
    .sts-69 .sts-contact-item { padding: 16px 18px; gap: 14px; }
    .sts-69 .sts-contact-form { padding: 26px 20px 22px; }
    .sts-69 .sts-social-cta { padding: 80px 20px 86px; }
    .sts-69 .sts-social-icon { width: 58px; height: 58px; }
    .sts-69 .sts-social-icons-wrapper { gap: 14px; }
    .sts-69 .sts-next { padding: 0 0 26px; border-radius: 28px; }
    .sts-69 .sts-next__header { gap: 16px; padding: 12px 28px 12px 12px; }
    .sts-69 .sts-next__num { width: 50px; height: 50px; font-size: 20px; }
    .sts-69 .sts-next__text { padding: 22px 24px 0; }

    .sts-69 .sts-element.sts-element-ct-form,
        .sts-69 .sts-element.sts-element-ct-next,
    .sts-69 .sts-element.sts-element-ct-faq {
        --padding-top: 60px;
        --padding-bottom: 60px;
    }
    .sts-69 .sts-element.sts-element-ct-form { --padding-top: 52px; }
    .sts-69 .sts-page-intro { gap: 14px; margin-bottom: 38px; }
    .sts-69 .sts-page-intro__text { font-size: 16px; }
    .sts-69 .sts-page-intro__text { font-size: 16px; }
}