/* Contact page: centred intro over two cards (enquiry form + direct contact).
   Palette and type come from the page's :root tokens; only the surfaces that
   exist on this page are defined here. Linked before depth.css, which must
   stay last. */

.contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 72px 0 104px;
}

/* Backdrop: a faint ledger grid fading out from the top centre and one soft
   green light behind the cards. Decorative only. */
.contact-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.contact-backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(11, 38, 24, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 38, 24, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 18%, #000 18%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 62% at 50% 18%, #000 18%, transparent 78%);
}
.contact-backdrop::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -120px;
    width: 1100px;
    height: 760px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(26, 92, 58, 0.09), rgba(26, 92, 58, 0));
}

/* Intro ------------------------------------------------------------------- */
.contact-head {
    max-width: 780px;
    margin: 0 auto 64px;
    text-align: center;
}
.contact-eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-deep-forest-green);
}
/* Same glowing LED as the home page tagline. The label is all caps, so the dot
   centres on the cap height (0.708em below the line top in DM Sans at
   line-height 1.6), not on the line box, which sits ~1px lower. */
.contact-eyebrow-dot {
    width: 8px;
    height: 8px;
    margin-top: calc(0.708em - 4px);
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 35% 32%, #DFFFEA 0%, #6EE7A0 24%, #25A862 58%, #1A5C3A 100%);
    box-shadow: 0 0 4px rgba(46, 204, 113, 0.85), 0 0 11px rgba(46, 204, 113, 0.45);
    animation: contact-pulse 2.4s ease-in-out infinite;
}
@keyframes contact-pulse {
    0%, 100% { box-shadow: 0 0 3px rgba(46, 204, 113, 0.70), 0 0 7px rgba(46, 204, 113, 0.30); }
    50%      { box-shadow: 0 0 5px rgba(46, 204, 113, 0.95), 0 0 14px rgba(46, 204, 113, 0.55), 0 0 22px rgba(46, 204, 113, 0.22); }
}
.contact-head h1 {
    max-width: 13em;
    margin: 0 auto 20px;
    font-size: clamp(36px, 5.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.contact-lead {
    max-width: 610px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.6;
    color: #5A605B;
    text-wrap: pretty;
}

/* Two cards ---------------------------------------------------------------- */
.contact-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1060px;
    margin: 0 auto;
}
/* Thin ring behind the cards; only its top arc and the gap show. */
.contact-ring {
    position: absolute;
    left: 50%;
    top: -84px;
    z-index: -1;
    width: 620px;
    height: 620px;
    transform: translateX(-50%);
    border: 1px solid rgba(26, 92, 58, 0.18);
    border-radius: 50%;
    pointer-events: none;
}
.contact-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-linen);
    border-radius: 20px;
    box-shadow:
        0 1px 2px rgba(11, 38, 24, 0.04),
        0 28px 56px -28px rgba(11, 38, 24, 0.20);
}

/* Form --------------------------------------------------------------------- */
.contact-form {
    padding: 34px;
}
.contact-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}
.contact-field-full {
    grid-column: 1 / -1;
}
.contact-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6B716C;
}
.contact-field input,
.contact-field select,
.contact-field textarea,
.contact-field .select-trigger {
    display: block;
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-family);
    font-size: 15px;
    line-height: 1.4;
    color: var(--color-obsidian);
    background-color: #FAFAF8;
    border: 1px solid #DEDAD2;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #9EA39F;
}
.contact-field input:hover,
.contact-field select:hover,
.contact-field textarea:hover,
.contact-field .select-trigger:hover {
    border-color: #C9C4B9;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus,
.contact-field .select-trigger:focus,
.select-field.is-open .select-trigger {
    background-color: var(--color-white);
    border-color: #1A5C3A;
    box-shadow: 0 0 0 3px rgba(26, 92, 58, 0.14);
}
.contact-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
}
/* Enhanced select (site.js). The native control stays in the form, hidden;
   `display: block` above would otherwise override the hidden attribute. */
.contact-field select[hidden] {
    display: none;
}
.select-field {
    position: relative;
}
.contact-field .select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #6B716C;
    transition: transform 0.2s ease, color 0.2s ease;
}
.select-field.is-open .select-chevron {
    transform: rotate(180deg);
    color: #1A5C3A;
}
.select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 290px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-linen);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(11, 38, 24, 0.05),
        0 22px 44px -18px rgba(11, 38, 24, 0.30);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.18s;
}
.select-field.is-open .select-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-obsidian);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.select-option + .select-option {
    margin-top: 2px;
}
.select-option.is-active {
    background: #F2F1EC;
}
.select-option[aria-selected="true"] {
    font-weight: 600;
    color: #1A5C3A;
}
.select-check {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #1A5C3A;
    opacity: 0;
}
.select-option[aria-selected="true"] .select-check {
    opacity: 1;
}
.contact-field textarea {
    min-height: 132px;
    resize: vertical;
    line-height: 1.5;
}
.contact-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: -8px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #1A5C3A;
}
.contact-hint svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.contact-form .form-consent {
    margin: 22px 0 0;
    font-size: 13.5px;
}
.contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}
.contact-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 12px 20px;
    border-radius: 10px;
}
.contact-actions .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.contact-actions .btn-primary svg {
    transition: transform 0.2s ease;
}
.contact-actions .btn-primary:hover svg {
    transform: translateX(3px);
}
.contact-fineprint {
    margin: 16px 0 0;
    font-size: 12.5px;
    text-align: center;
    color: #7A807B;
}

/* Direct contact ----------------------------------------------------------- */
.contact-direct {
    padding: 30px 28px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F7F4 100%);
}
.contact-direct h2 {
    margin: 0 0 24px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.contact-list {
    display: grid;
    gap: 22px;
    list-style: none;
}
.contact-list li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #1A5C3A;
    background: var(--color-white);
    border: 1px solid var(--color-linen);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(11, 38, 24, 0.05);
}
.contact-icon svg {
    width: 17px;
    height: 17px;
}
.contact-label {
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #858B86;
}
.contact-value {
    display: block;
    font-size: 15px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.5;
    color: var(--color-obsidian);
}
a.contact-value:hover {
    color: #1A5C3A;
}
.contact-value-soft {
    font-size: 14.5px;
    font-weight: 500;
    color: #424843;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 960px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: 640px;
    }
}
@media (max-width: 560px) {
    .contact-hero {
        padding: 40px 0 64px;
    }
    .contact-head {
        margin-bottom: 40px;
    }
    .contact-lead {
        font-size: 16px;
    }
    .contact-ring {
        top: -48px;
        width: 420px;
        height: 420px;
    }
    .contact-form,
    .contact-direct {
        padding: 22px 20px;
    }
    .contact-fields,
    .contact-actions {
        grid-template-columns: minmax(0, 1fr);
    }
    .contact-hint {
        margin-top: -10px;
    }
    /* Keep the small caps labels at a legible size on phones. */
    .contact-field label,
    .contact-label {
        font-size: 12px;
    }
    /* 16px stops iOS Safari zooming the page when a field takes focus. */
    .contact-field input,
    .contact-field select,
    .contact-field textarea,
    .contact-field .select-trigger {
        font-size: 16px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .contact-eyebrow-dot {
        animation: none;
    }
    .select-menu,
    .select-chevron {
        transition: none;
    }
}