/* =========================================================
ALONE AT THE ALTAR

CONTACT PAGE

Author: Bradley Hobbs

========================================================= */

:root {

--navy:
    #102033;
--navy-deep:
    #081421;
--gold:
    #a97932;
--gold-light:
    #d0a966;
--cream:
    #f7f3ea;
--ivory:
    #fffdf8;
--ink:
    #243344;
--muted:
    #6e6b66;
--line:
    rgba(16, 32, 51, 0.14);

}

* {
    box-sizing:
    border-box;

}

html {

scroll-behavior:
    smooth;

}

body {

margin:
    0;
background:
    var(--ivory);
color:
    var(--ink);
font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

}

a {

color:
    inherit;
text-decoration:
    none;

}

button,
input,
textarea {

font:
    inherit;

}

.section-shell {

width:
    min(1400px, calc(100% - 48px));
margin:
    0 auto;

}

.eyebrow {

display:
    block;
margin-bottom:
    18px;
color:
    var(--gold);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.68rem;
font-weight:
    700;
letter-spacing:
    0.22em;
text-transform:
    uppercase;

}

/* =========================================================
HEADER
========================================================= */

.site-header {

position:
    sticky;
top:
    0;
z-index:
    1000;
background:
    rgba(255, 253, 248, 0.97);
border-bottom:
    1px solid
    rgba(16, 32, 51, 0.08);
backdrop-filter:
    blur(12px);

}

.header-inner {

width:
    min(1500px, calc(100% - 48px));
min-height:
    88px;
margin:
    0 auto;
display:
    flex;
align-items:
    center;
gap:
    28px;

}

.site-brand {

display:
    flex;
flex-direction:
    column;
flex-shrink:
    0;

}

.brand-title {

color:
    var(--navy);
font-family:
    "Playfair Display",
    serif;
font-size:
    1.7rem;
font-weight:
    600;
line-height:
    1;

}

.brand-title small {

font-family:
    "Cormorant Garamond",
    serif;
font-size:
    0.9rem;

}

.brand-title strong {

color:
    var(--gold);

}

.brand-subtitle {

margin-top:
    5px;
color:
    var(--muted);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.44rem;
font-weight:
    700;
letter-spacing:
    0.13em;
text-transform:
    uppercase;

}

.site-navigation {

display:
    flex;
gap:
    24px;
margin-left:
    auto;

}

.site-navigation a {

position:
    relative;
padding:
    8px 0;
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.78rem;

}

.site-navigation a::after {

position:
    absolute;
right:
    0;
bottom:
    0;
left:
    0;
height:
    1px;
background:
    var(--gold);
content:
    "";
transform:
    scaleX(0);
transition:
    transform 0.25s ease;

}

.site-navigation a.active::after,
.site-navigation a:hover::after {

transform:
    scaleX(1);

}

.header-button {

padding:
    13px 22px;
background:
    var(--gold);
color:
    #ffffff;
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.7rem;
font-weight:
    700;

}

.mobile-menu-button {

display:
    none;

}

/* =========================================================
CONTACT HERO
========================================================= */

.contact-hero {

padding:
    155px 24px 145px;
background:
    linear-gradient(
        135deg,
        #eee4d5,
        #fffdf8 55%,
        #e9ddcc
    );
text-align:
    center;

}

.contact-hero-inner {

width:
    min(900px, 100%);
margin:
    0 auto;

}

.contact-hero h1 {

margin:
    0;
color:
    var(--navy);
font-family:
    "Playfair Display",
    serif;
font-size:
    clamp(4.5rem, 10vw, 9rem);
font-weight:
    500;
line-height:
    0.86;

}

.hero-divider {

display:
    flex;
justify-content:
    center;
margin:
    38px 0;

}

.hero-divider span {

display:
    block;
width:
    110px;
height:
    1px;
background:
    var(--gold);

}

.contact-hero-subtitle {

max-width:
    680px;
margin:
    0 auto;
color:
    var(--ink);
font-size:
    clamp(1.5rem, 3vw, 2.3rem);
font-style:
    italic;
line-height:
    1.35;

}

/* =========================================================
CONTACT INTRODUCTION
========================================================= */

.contact-introduction {

padding:
    130px 24px;
background:
    var(--ivory);

}

.contact-introduction-grid {

display:
    grid;
grid-template-columns:
    minmax(320px, 0.85fr)
    minmax(420px, 1.15fr);
align-items:
    start;
gap:
    clamp(70px, 10vw, 170px);

}

.contact-introduction-title h2 {

margin:
    0;
color:
    var(--navy);
font-size:
    clamp(3.2rem, 6vw, 6.5rem);
font-weight:
    500;
line-height:
    0.9;

}

.contact-introduction-content {

max-width:
    700px;
padding-top:
    35px;

}

.contact-introduction-content p {

margin:
    0 0 28px;
color:
    var(--ink);
font-size:
    1.4rem;
line-height:
    1.6;

}

.contact-introduction-content strong {

color:
    var(--navy);
font-style:
    italic;

}

/* =========================================================
CONTACT SECTION
========================================================= */

.contact-section {

padding:
    140px 24px;
background:
    var(--cream);

}

.contact-grid {

display:
    grid;
grid-template-columns:
    minmax(320px, 0.85fr)
    minmax(500px, 1.15fr);
gap:
    clamp(70px, 10vw, 170px);
align-items:
    start;

}

.contact-information h2 {

margin:
    0;
color:
    var(--navy);
font-size:
    clamp(3.5rem, 7vw, 6.8rem);
font-weight:
    500;
line-height:
    0.9;

}

.contact-information > p {

max-width:
    500px;
margin:
    32px 0 0;
color:
    var(--ink);
font-size:
    1.4rem;
line-height:
    1.55;

}

.contact-note {

margin-top:
    55px;
padding-top:
    28px;
border-top:
    1px solid var(--line);

}

.contact-note span {

display:
    block;
margin-bottom:
    14px;
color:
    var(--gold);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.68rem;
font-weight:
    700;
letter-spacing:
    0.18em;
text-transform:
    uppercase;

}

.contact-note p {

max-width:
    440px;
margin:
    0;
color:
    var(--muted);
font-size:
    1.15rem;
line-height:
    1.5;

}

/* =========================================================
CONTACT FORM
========================================================= */

.contact-form-wrap {

padding:
    clamp(30px, 5vw, 65px);
background:
    rgba(255, 255, 255, 0.58);
border:
    1px solid
    rgba(16, 32, 51, 0.08);

}

.contact-form {

width:
    100%;

}

.form-row {

display:
    grid;
grid-template-columns:
    1fr
    1fr;
gap:
    22px;

}

.form-group {

display:
    flex;
flex-direction:
    column;
margin-bottom:
    28px;

}

.form-group label {

margin-bottom:
    10px;
color:
    var(--navy);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.68rem;
font-weight:
    700;
letter-spacing:
    0.08em;
text-transform:
    uppercase;

}

.form-group input,
.form-group textarea {

width:
    100%;
padding:
    16px 0;
border:
    0;
border-bottom:
    1px solid
    rgba(16, 32, 51, 0.2);
border-radius:
    0;
outline:
    none;
background:
    transparent;
color:
    var(--ink);
font-family:
    "Cormorant Garamond",
    Georgia,
    serif;
font-size:
    1.25rem;
transition:
    border-color 0.25s ease;

}

.form-group input:focus,
.form-group textarea:focus {

border-bottom-color:
    var(--gold);

}

.form-group textarea {

min-height:
    180px;
resize:
    vertical;

}

.contact-form .button {

margin-top:
    10px;
border:
    0;
cursor:
    pointer;

}

/* =========================================================
CONVERSATION SECTION
========================================================= */

.conversation-section {

position:
    relative;
min-height:
    620px;
display:
    flex;
align-items:
    center;
justify-content:
    center;
background:
    var(--navy);
color:
    #ffffff;

}

.conversation-overlay {

width:
    100%;
padding:
    140px 24px;
background:
    linear-gradient(
        135deg,
        rgba(8, 20, 33, 0.96),
        rgba(16, 32, 51, 0.9)
    );

}

.conversation-inner {

width:
    min(900px, 100%);
margin:
    0 auto;
text-align:
    center;

}

.conversation-section .eyebrow {

color:
    var(--gold-light);

}

.conversation-section h2 {

margin:
    0;
color:
    #ffffff;
font-size:
    clamp(3.8rem, 8vw, 7.5rem);
font-weight:
    500;
line-height:
    0.88;

}

.conversation-section p {

max-width:
    680px;
margin:
    40px auto 0;
color:
    rgba(255, 255, 255, 0.78);
font-size:
    1.45rem;
font-style:
    italic;
line-height:
    1.55;

}

/* =========================================================
READING SECTION
========================================================= */

.contact-reading {

padding:
    150px 24px;
background:
    linear-gradient(
        135deg,
        #eee4d5,
        #fffdf8 55%,
        #e9ddcc
    );
text-align:
    center;

}

.contact-reading-inner {

width:
    min(900px, 100%);
margin:
    0 auto;

}

.contact-reading h2 {

margin:
    0;
color:
    var(--navy);
font-size:
    clamp(3.8rem, 8vw, 7.5rem);
font-weight:
    500;
line-height:
    0.88;

}

.contact-reading p {

max-width:
    700px;
margin:
    35px auto 0;
color:
    var(--ink);
font-size:
    1.4rem;
line-height:
    1.55;

}

.contact-reading-actions {

display:
    flex;
justify-content:
    center;
flex-wrap:
    wrap;
gap:
    14px;
margin-top:
    45px;

}

/* =========================================================
BUTTONS
========================================================= */

.button {

display:
    inline-flex;
align-items:
    center;
justify-content:
    center;
min-height:
    54px;
padding:
    0 30px;
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.75rem;
font-weight:
    700;
transition:
    transform 0.25s ease,
    background 0.25s ease;

}

.button:hover {

transform:
    translateY(-3px);

}

.button-gold {

background:
    var(--gold);
color:
    #ffffff;

}

.button-outline {

border:
    1px solid
    rgba(16, 32, 51, 0.2);
color:
    var(--navy);

}

.button-outline:hover {

background:
    var(--cream);

}

/* =========================================================
FOOTER
========================================================= */

.site-footer {

background:
    var(--navy-deep);
color:
    #ffffff;

}

.footer-main {

display:
    grid;
grid-template-columns:
    1fr
    auto
    1fr;
align-items:
    center;
gap:
    40px;
padding-top:
    52px;
padding-bottom:
    52px;

}

.footer-title {

display:
    block;
font-family:
    "Playfair Display",
    serif;
font-size:
    2rem;

}

.footer-title small {

font-size:
    1rem;

}

.footer-brand p {

margin:
    8px 0 0;
color:
    rgba(255, 255, 255, 0.6);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.58rem;
letter-spacing:
    0.12em;
text-transform:
    uppercase;

}

.footer-navigation {

display:
    flex;
flex-wrap:
    wrap;
justify-content:
    center;
gap:
    18px;

}

.footer-navigation a {

color:
    rgba(255, 255, 255, 0.78);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.72rem;

}

.footer-scripture {

text-align:
    right;

}

.footer-scripture p {

margin:
    0;
color:
    rgba(255, 255, 255, 0.8);
font-style:
    italic;

}

.footer-scripture span {

color:
    var(--gold-light);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.65rem;

}

.footer-bottom {

border-top:
    1px solid
    rgba(255, 255, 255, 0.1);

}

.footer-bottom-inner {

display:
    flex;
align-items:
    center;
justify-content:
    space-between;
gap:
    20px;
min-height:
    68px;

}

.footer-bottom p,
.legal-links a {

color:
    rgba(255, 255, 255, 0.58);
font-family:
    "DM Sans",
    sans-serif;
font-size:
    0.65rem;

}

.legal-links {

display:
    flex;
gap:
    18px;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {

.contact-introduction-grid,
.contact-grid {
    grid-template-columns:
        1fr;
    gap:
        70px;
}
.contact-introduction-content {
    max-width:
        850px;
    padding-top:
        0;
}
.contact-information {
    max-width:
        700px;
}
.footer-main {
    grid-template-columns:
        1fr;
    text-align:
        center;
}
.footer-scripture {
    text-align:
        center;
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 800px) {

.section-shell {
    width:
        min(100% - 30px, 1400px);
}
.header-inner {
    width:
        min(100% - 30px, 1500px);
    min-height:
        74px;
}
.header-button {
    display:
        none;
}
.mobile-menu-button {
    display:
        block;
    width:
        44px;
    height:
        44px;
    margin-left:
        auto;
    padding:
        0;
    border:
        0;
    background:
        transparent;
    cursor:
        pointer;
}
.mobile-menu-button span {
    display:
        block;
    width:
        24px;
    height:
        2px;
    margin:
        5px auto;
    background:
        var(--navy);
}
.site-navigation {
    position:
        absolute;
    top:
        100%;
    right:
        0;
    left:
        0;
    display:
        none;
    flex-direction:
        column;
    gap:
        0;
    padding:
        18px;
    background:
        var(--ivory);
    box-shadow:
        0 20px 50px
        rgba(16, 32, 51, 0.15);
}
.site-navigation.open {
    display:
        flex;
}
.site-navigation a {
    padding:
        14px;
}
.site-navigation a::after {
    display:
        none;
}
.contact-hero {
    padding:
        105px 20px 100px;
}
.contact-introduction,
.contact-section {
    padding:
        85px 20px;
}
.conversation-overlay,
.contact-reading {
    padding:
        105px 20px;
}
.form-row {
    grid-template-columns:
        1fr;
    gap:
        0;
}
.contact-form-wrap {
    padding:
        30px 24px;
}
.contact-reading-actions {
    flex-direction:
        column;
    align-items:
        stretch;
}
.contact-reading-actions .button {
    width:
        100%;
}
.footer-bottom-inner {
    flex-direction:
        column;
    justify-content:
        center;
    padding:
        18px 0;
    text-align:
        center;
}

}

/* =========================================================
CONTACT PAGE POLISH
========================================================= */

.contact-signature{color:var(--gold)!important;font-size:1.55rem!important;font-style:italic}
.form-intro{margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.form-intro span{display:block;margin-bottom:7px;color:var(--gold);font-family:"DM Sans",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.form-intro p{margin:0;color:var(--navy);font-size:1.55rem;font-style:italic}
.form-disclaimer{margin:18px 0 0;color:var(--muted);font-family:"DM Sans",sans-serif;font-size:.65rem;line-height:1.5}
.conversation-mark{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:42px}
.conversation-mark span{display:block;width:5px;height:5px;border-radius:50%;background:var(--gold-light)}
.form-group input:hover,.form-group textarea:hover{border-bottom-color:rgba(16,32,51,.42)}
.site-navigation a:focus-visible,.header-button:focus-visible,.mobile-menu-button:focus-visible,.button:focus-visible,.form-group input:focus-visible,.form-group textarea:focus-visible,.footer-navigation a:focus-visible,.legal-links a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media(max-width:800px){.contact-signature{font-size:1.35rem!important}.form-intro{margin-bottom:28px}.form-intro p{font-size:1.35rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}


/* =========================================================
SIMPLIFIED CONTACT PAGE
========================================================= */

.contact-hero {
    padding: 105px 24px 90px;
}

.contact-hero h1 {
    font-size: clamp(3.8rem, 8vw, 7rem);
}

.contact-hero-subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.8rem);
}

.contact-section {
    padding: 100px 24px;
}

.contact-grid {
    grid-template-columns: minmax(280px, .75fr) minmax(380px, 1fr);
    gap: clamp(50px, 8vw, 110px);
    align-items: center;
}

.contact-information h2 {
    font-size: clamp(3rem, 6vw, 5.8rem);
}

.contact-information > p {
    font-size: 1.25rem;
    line-height: 1.55;
}

.contact-note {
    margin-top: 35px;
}

.contact-form-wrap {
    padding: clamp(28px, 4vw, 48px);
}

@media (max-width: 1100px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }
}

@media (max-width: 800px) {
    .contact-hero {
        padding: 80px 20px 70px;
    }

    .contact-section {
        padding: 70px 20px;
    }

    .contact-grid {
        gap: 40px;
    }

    .contact-form-wrap {
        padding: 26px 22px;
    }
}