/*
 * Edit/Build by: Bruce
 * Date: 2026-06-26 14:12
 *
 * Contact page styles — v3
 * Covers both English (page-contact.php) and Japanese (page-contact-jp.php) templates.
 *
 * Scoping strategy:
 *   .contact-v3                     — shared styles (EN + JP)
 *   .contact-v3:not(.contact-v3--jp) — EN-only (pill-style radios)
 *   .contact-v3--jp                 — JP-only (list radios, form-notice, privacy checkbox)
 *
 * All sizes use px. page.css sets html { font-size: 62.5% } so rem would need
 * manual accounting — px avoids that dependency entirely.
 */

/* ── Design tokens ───────────────────────────────────────────────────────── */
.contact-v3 {
    --green:           #069A44;
    --green-60:        #38B86A;
    --green-a:         #047A35;
    --green-ring:      rgba(6, 154, 68, 0.10);
    --surface:         #FAF9F5;
    --surface-card:    #FFFFFF;
    --ink:             #141413;
    --muted:           #5A6370;
    --border:          #8A9199;
    --border-light:    #E2E1DD;
    --error:           #D92D20;
    --error-ring:      rgba(217, 45, 32, 0.08);
    --notice-bg:       #F0F6F3;
    --notice-border:   #C8DFCF;
    --ease:            cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:        150ms;
    --dur-base:        250ms;
    --radius-sm:       4px;
    --radius-md:       6px;
    --max-w:           1280px;
    --gutter:          clamp(16px, 4vw, 40px);
    --section:         96px;
}

/* ── Accessibility ───────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -60px;
    left: 16px;
    background: #141413;
    color: #FAF9F5;
    padding: 10px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    z-index: 9999;
    transition: top 150ms cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
}
.skip-link:focus-visible { top: 16px; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Page banner ─────────────────────────────────────────────────────────── */
.page-banner {
    background: #069A44;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 640px) {
    .page-banner { height: 295px; }
}
.page-banner h1 {
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 700;
    color: #FAF9F5;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-align: center;
    padding: 0 clamp(16px, 4vw, 40px);
}
@media (min-width: 640px) {
    .page-banner h1 { font-size: clamp(24px, 3vw, 30px); }
}
.contact-v3--jp .page-banner h1 { letter-spacing: 0.02em; }

/* ── Contact body ────────────────────────────────────────────────────────── */
.contact-v3 .contact-body {
    padding: 48px 0 96px;
    animation: contact-bodyIn 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes contact-bodyIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .contact-v3 .contact-body { animation: none; }
}

/* ── Container ───────────────────────────────────────────────────────────── */
.contact-v3 .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

/* ── Line-break rules ────────────────────────────────────────────────────── */
/* EN + shared: wrap only at word boundaries; fall back to mid-word only when
   a single token exceeds the container (URLs, long model numbers, etc.) */
.contact-v3 p,
.contact-v3 li,
.contact-v3 label { overflow-wrap: break-word; }

/* JP: never break at arbitrary character boundaries — words span multiple
   characters so mid-character breaks produce unreadable fragments */
.contact-v3--jp p,
.contact-v3--jp li,
.contact-v3--jp h2,
.contact-v3--jp h3,
.contact-v3--jp label { word-break: keep-all; }

/* ══════════════════════════════════════════════════════════════════════════
   INQUIRY FORM
══════════════════════════════════════════════════════════════════════════ */

.contact-v3 .form-col h2 {
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.contact-v3--jp .form-col h2 {
    letter-spacing: 0.02em;
    margin-bottom: 20px;
}

.contact-v3 .form-col-sub {
    font-size: 15px;
    color: var(--muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.contact-v3 .form-required-note {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 24px;
}
.contact-v3 .form-required-note abbr {
    text-decoration: none;
    color: var(--error);
    font-weight: 700;
}

/* ── JP: Pre-form notice ─────────────────────────────────────────────────── */
.contact-v3--jp .form-notice {
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin-bottom: 28px;
    display: flex;
    gap: 12px;
}
.contact-v3--jp .form-notice__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--green-a);
}
.contact-v3--jp .form-notice__body {
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
}
.contact-v3--jp .form-notice__body p + p { margin-top: 10px; }
.contact-v3--jp .form-notice__body strong { font-weight: 700; color: var(--ink); }
.contact-v3--jp .form-notice__body a {
    color: var(--green-a);
    font-weight: 600;
    text-decoration: underline;
}
.contact-v3--jp .form-notice__body a:hover { color: var(--green); }

/* ── EN: Privacy note ────────────────────────────────────────────────────── */
.contact-v3:not(.contact-v3--jp) .privacy-note {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: #f2f7f4;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 8px;
}
.contact-v3:not(.contact-v3--jp) .privacy-note .privacy-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--green-a);
}
.contact-v3:not(.contact-v3--jp) .privacy-note strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

/* ── Form grid ───────────────────────────────────────────────────────────── */
.contact-v3 .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* Fallback for CF7 default <p> wrappers */
.contact-v3 .wpcf7-form > p { margin: 0; }

.contact-v3 .form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 480px) {
    .contact-v3 .form-row.form-row--2col {
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
        row-gap: 18px;
    }
}
.contact-v3 .form-row--submit .btn-primary { width: 100%; justify-content: center; }

/* ── Form group ──────────────────────────────────────────────────────────── */
.contact-v3 .form-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.contact-v3 .form-group label,
.contact-v3 .form-group .field-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 20px;
}
.contact-v3--jp .form-group label,
.contact-v3--jp .form-group .field-label { line-height: 1.5; }
.contact-v3 .form-group label .req,
.contact-v3 .form-group .field-label .req {
    color: var(--error);
    margin-left: 3px;
    font-weight: 700;
    font-size: 13px;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.contact-v3 .wpcf7-form-control.wpcf7-text,
.contact-v3 .wpcf7-form-control.wpcf7-email,
.contact-v3 .wpcf7-form-control.wpcf7-tel {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color var(--dur-fast) var(--ease),
        box-shadow   var(--dur-fast) var(--ease);
}
.contact-v3--jp .wpcf7-form-control.wpcf7-text,
.contact-v3--jp .wpcf7-form-control.wpcf7-email { font-family: 'Noto Sans JP', sans-serif; }
.contact-v3 .wpcf7-form-control.wpcf7-text:hover,
.contact-v3 .wpcf7-form-control.wpcf7-email:hover,
.contact-v3 .wpcf7-form-control.wpcf7-tel:hover { border-color: var(--muted); }
.contact-v3 .wpcf7-form-control.wpcf7-text:focus,
.contact-v3 .wpcf7-form-control.wpcf7-email:focus,
.contact-v3 .wpcf7-form-control.wpcf7-tel:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-ring);
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.contact-v3 .wpcf7-form-control.wpcf7-textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 160px;
    padding: 11px 13px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    resize: vertical;
    outline: none;
    transition:
        border-color var(--dur-fast) var(--ease),
        box-shadow   var(--dur-fast) var(--ease);
}
.contact-v3--jp .wpcf7-form-control.wpcf7-textarea {
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.7;
}
.contact-v3 .wpcf7-form-control.wpcf7-textarea:hover { border-color: var(--muted); }
.contact-v3 .wpcf7-form-control.wpcf7-textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-ring);
}

.contact-v3 .wpcf7-form-control-wrap { display: block; }
.contact-v3 .field-helper { font-size: 12px; color: var(--muted); margin-top: 4px; }
/* CF7 autop converts newlines after inline elements into <br> tags at render time.
   Suppress them inside form groups and the privacy note. */
.contact-v3 .form-group br,
.contact-v3 .privacy-note br { display: none; }

.contact-v3 .wpcf7-form-control::placeholder {
    color: var(--muted);
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
}
.contact-v3--jp .wpcf7-form-control::placeholder {
    font-family: 'Noto Sans JP', sans-serif;
}

/* ── Error states ────────────────────────────────────────────────────────── */
.contact-v3 .wpcf7-not-valid .wpcf7-form-control {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 3px var(--error-ring) !important;
}
.contact-v3 .wpcf7-not-valid-tip {
    font-size: 12px;
    color: var(--error);
    margin-top: 2px;
    display: block;
}

/* ── CF7 screen-reader-response ──────────────────────────────────────────── */
/* CF7 6.x inserts a <p class="screen-reader-response"> before the <form> as
   an aria-live region for screen readers. CF7's own stylesheet hides it
   visually, but this standalone theme doesn't load that stylesheet — so we
   apply the same sr-only treatment here. */
.contact-v3 .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── CF7 response output ─────────────────────────────────────────────────── */
.contact-v3 .wpcf7-response-output {
    font-size: 14px;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    padding: 0;
    order: 999; /* push to end if CF7 places it inside the flex form */
}
.contact-v3 .wpcf7-response-output:empty { display: none; }
.contact-v3 .wpcf7-response-output:not(:empty) {
    padding: 12px 16px;
    border: 1.5px solid var(--border-light);
}
/* Validation / server error — red banner */
.contact-v3 .wpcf7-form.invalid .wpcf7-response-output:not(:empty),
.contact-v3 .wpcf7-form.failed  .wpcf7-response-output:not(:empty) {
    color: var(--error);
    border-color: rgba(217, 45, 32, 0.35);
    background: rgba(217, 45, 32, 0.04);
    font-weight: 500;
}
/* CF7 6.x outputs a validation-error <ul> as a direct child of <form>.
   Per-field errors already show inline — hide the redundant summary list. */
.contact-v3 .wpcf7-form > ul,
.contact-v3 .wpcf7-list-errors {
    display: none !important;
}
.contact-v3 .wpcf7-response-output ul {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RADIOS — EN: pill style
══════════════════════════════════════════════════════════════════════════ */
.contact-v3:not(.contact-v3--jp) .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item {
    display: block;
    margin: 0;
}
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    min-height: 44px;
    border: 1.5px solid var(--border);
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
    background: var(--surface-card);
    cursor: pointer;
    user-select: none;
    transition:
        border-color var(--dur-fast) var(--ease),
        background   var(--dur-fast) var(--ease),
        color        var(--dur-fast) var(--ease);
}
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item label:hover {
    border-color: var(--green);
    background: var(--notice-bg);
}
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item label:has(input:checked),
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item.is-checked label {
    border-color: var(--green);
    background: var(--notice-bg);
    color: var(--green-a);
    font-weight: 600;
}
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item label:focus-within {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}
.contact-v3:not(.contact-v3--jp) .wpcf7-list-item br { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   RADIOS — JP: list style with custom radio circle
   Pure CSS approach matching the mockup. The label is the clickable row;
   label::before is the circle dot. JS only toggles .is-checked for
   browsers that don't support :has().
   Selectors include .wpcf7-radio to raise specificity above theme base rules
   that otherwise prevent display:flex from being applied to the label.
══════════════════════════════════════════════════════════════════════════ */
.contact-v3--jp .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item {
    display: block;
    margin: 0;
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px;
    margin-bottom: 0;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
    transition:
        border-color var(--dur-fast) var(--ease),
        background   var(--dur-fast) var(--ease);
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item label::before {
    content: '';
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 17px;
    height: 17px;
    margin-top: 2px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    background: var(--surface-card);
    transition:
        border-color  var(--dur-fast) var(--ease),
        border-width  var(--dur-fast) var(--ease),
        background    var(--dur-fast) var(--ease),
        box-shadow    var(--dur-fast) var(--ease);
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item label:hover {
    border-color: var(--notice-border);
    background: var(--notice-bg);
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item label:hover::before { border-color: var(--green-a); }
.contact-v3--jp .wpcf7-radio .wpcf7-list-item label:has(input:checked),
.contact-v3--jp .wpcf7-radio .wpcf7-list-item.is-checked label {
    border-color: var(--notice-border);
    background: var(--notice-bg);
    font-weight: 500;
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item label:has(input:checked)::before,
.contact-v3--jp .wpcf7-radio .wpcf7-list-item.is-checked label::before {
    border-color: var(--green);
    border-width: 5px;
    background: var(--surface-card);
    box-shadow: 0 0 0 2px var(--green-ring);
}
.contact-v3--jp .wpcf7-radio .wpcf7-list-item label:focus-within {
    outline: 2px solid var(--green);
    outline-offset: 1px;
    border-radius: var(--radius-md);
}

/* ══════════════════════════════════════════════════════════════════════════
   JP: Privacy checkbox (acceptance field)
   CF7 acceptance outputs its own <label> — we use label::before for the
   checkbox visual so no extra span is needed in the CF7 form template.
══════════════════════════════════════════════════════════════════════════ */
.contact-v3--jp .privacy-checkbox-wrap {
    padding: 14px 16px;
    background: #f2f7f4;
    border: 1px solid var(--notice-border);
    border-radius: var(--radius-md);
}
.contact-v3--jp .privacy-checkbox-wrap label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink);
    cursor: pointer;
    user-select: none;
    font-weight: 400;
}
/* Checkbox box visual rendered via ::before on the CF7 acceptance label */
.contact-v3--jp .privacy-checkbox-wrap label::before {
    content: '';
    flex-shrink: 0;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    background-color: var(--surface-card);
    background-size: 10px 7px;
    background-repeat: no-repeat;
    background-position: center;
    transition:
        border-color var(--dur-fast) var(--ease),
        background-color var(--dur-fast) var(--ease);
}
/* Checked state — :has() on the wrap + .is-checked class toggled by JS on the label */
.contact-v3--jp .privacy-checkbox-wrap:has(input:checked) label::before,
.contact-v3--jp .privacy-checkbox-wrap label.is-checked::before {
    border-color: var(--green);
    background-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 3.5l2.5 2.5 5.5-5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.contact-v3--jp .privacy-checkbox-wrap:focus-within label::before {
    box-shadow: 0 0 0 3px var(--green-ring);
}
/* Collapse CF7's auto-generated wrap span — label::before provides the visual box */
.contact-v3--jp .privacy-checkbox-wrap .wpcf7-form-control-wrap {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
/* Hide native checkbox rendered by CF7 inside the acceptance label */
.contact-v3--jp .privacy-checkbox-wrap input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
/* Suppress any <br> CF7 autop injects inside the label */
.contact-v3--jp .privacy-checkbox-wrap br { display: none; }
.contact-v3--jp .privacy-checkbox-wrap label a {
    color: var(--green-a);
    font-weight: 600;
    text-decoration: underline;
}
.contact-v3--jp .privacy-checkbox-wrap label a:hover { color: var(--green); }

/* ══════════════════════════════════════════════════════════════════════════
   SUBMIT BUTTON
══════════════════════════════════════════════════════════════════════════ */
.contact-v3 .btn-primary,
.contact-v3 .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    min-height: 48px;
    width: 100%;
    background: var(--green);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition:
        background  var(--dur-fast) var(--ease),
        transform   var(--dur-fast) var(--ease),
        box-shadow  var(--dur-fast) var(--ease);
}
.contact-v3--jp .btn-primary,
.contact-v3--jp .wpcf7-submit { font-family: 'Noto Sans JP', sans-serif; }
.contact-v3 .btn-primary:hover,
.contact-v3 .wpcf7-submit:hover { background: var(--green-a); }
.contact-v3 .btn-primary:focus-visible,
.contact-v3 .wpcf7-submit:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}
.contact-v3 .btn-primary:active,
.contact-v3 .wpcf7-submit:active { transform: scale(0.97); background: #036128; }
.contact-v3 .btn-primary:disabled,
.contact-v3 .wpcf7-submit:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Loading spinner */
.contact-v3 .btn-primary.is-loading,
.contact-v3 .wpcf7-submit.is-loading { opacity: 0.75; cursor: wait; pointer-events: none; }
.contact-v3 .btn-primary.is-loading::after,
.contact-v3 .wpcf7-submit.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: contact-spin 0.75s linear infinite;
    margin-left: 4px;
}
@keyframes contact-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .contact-v3 .btn-primary.is-loading::after,
    .contact-v3 .wpcf7-submit.is-loading::after { animation: none; opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUBMIT SUCCESS BANNER
══════════════════════════════════════════════════════════════════════════ */
.contact-v3 .submit-success {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: rgba(6, 154, 68, 0.06);
    border: 1.5px solid rgba(6, 154, 68, 0.22);
    border-radius: var(--radius-md);
    width: 100%;
    animation: contact-successIn 0.35s var(--ease) both;
}
.contact-v3 .submit-success[hidden] { display: none; }
@keyframes contact-successIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .contact-v3 .submit-success { animation: none; }
}
.contact-v3 .submit-success-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(6, 154, 68, 0.10);
    border: 2px solid rgba(6, 154, 68, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--green-a);
    margin-top: 1px;
}
/* Checkmark drawn in CSS — SVG can't be saved in the CF7 form template */
.contact-v3 .submit-success-icon::after {
    content: '';
    display: block;
    width: 14px;
    height: 9px;
    border-left: 2.5px solid var(--green-a);
    border-bottom: 2.5px solid var(--green-a);
    transform: rotate(-45deg) translate(1px, -1px);
}
.contact-v3 .submit-success-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.3;
}
.contact-v3--jp .submit-success-heading { line-height: 1.4; }
.contact-v3 .submit-success-body { font-size: 13px; color: var(--muted); line-height: 1.6; }
.contact-v3--jp .submit-success-body { line-height: 1.7; }

/* CF7 success state — hide submit row, reveal success banner */
.contact-v3 .wpcf7-form.sent .form-row--submit { display: none; }
.contact-v3 .wpcf7-form.sent .submit-success { display: flex; }
.contact-v3 .wpcf7-form.sent .wpcf7-response-output { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   BRIDGE WASH — gradient connector between form and assurance section
══════════════════════════════════════════════════════════════════════════ */
.contact-v3 .bridge-wash {
    width: 100%;
    height: 80px;
    background: linear-gradient(
        to bottom,
        rgba(6, 154, 68, 0.28) 0%,
        rgba(6, 154, 68, 0.00) 100%
    );
}

/* ══════════════════════════════════════════════════════════════════════════
   WHAT HAPPENS NEXT — ASSURANCE SECTION
══════════════════════════════════════════════════════════════════════════ */
.contact-v3 .what-next {
    margin-top: 0;
    padding-top: 24px;
    animation: contact-bodyIn 250ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 80ms;
}
@media (prefers-reduced-motion: reduce) {
    .contact-v3 .what-next { animation: none; }
    .contact-v3 .track { transition: none; }
}

.contact-v3 .what-next-header {
    max-width: 560px;
    margin-bottom: 48px;
}
.contact-v3 .what-next-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--green-a);
    margin-bottom: 8px;
}
.contact-v3 .what-next-header h2 {
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    text-wrap: balance;
}
.contact-v3--jp .what-next-header h2 { letter-spacing: 0.01em; }
.contact-v3 .what-next-header p { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.6; }
.contact-v3--jp .what-next-header p { line-height: 1.7; }

/* ── Track switcher ──────────────────────────────────────────────────────── */
.contact-v3 .track { transition: opacity 150ms ease-out; }
.contact-v3 .track[hidden] { display: none; }

.contact-v3 .track-type-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 24px; }

/* ── Next-step grid ──────────────────────────────────────────────────────── */
.contact-v3 .next-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    position: relative;
}
@media (min-width: 768px) {
    .contact-v3 .next-steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    /* Horizontal connector line between badges */
    .contact-v3 .next-steps::before {
        content: '';
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
            to right,
            transparent 0%,
            var(--green) 10%,
            rgba(6, 154, 68, 0.55) 45%,
            rgba(6, 154, 68, 0.22) 80%,
            transparent 100%
        );
        z-index: 0;
        pointer-events: none;
    }
}

/* ── Individual step card ────────────────────────────────────────────────── */
.contact-v3 .next-step {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 32px;
    position: relative;
    z-index: 1;
}
@media (min-width: 768px) {
    .contact-v3 .next-step { padding-bottom: 0; }
}
.contact-v3 .next-step:not(:last-child) { border-bottom: 1px solid var(--border-light); }
@media (min-width: 768px) {
    .contact-v3 .next-step:not(:last-child) { border-bottom: none; }
}

.contact-v3 .next-step-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    margin-bottom: 16px;
}
.contact-v3 .next-step-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid rgba(6, 154, 68, 0.22);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Inner dot — WCAG 1.4.1: color alone must not be the only visual indicator */
.contact-v3 .next-step-badge::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    opacity: 0.22;
}
.contact-v3 .next-step:nth-child(1) .next-step-badge { border-color: var(--green); }
.contact-v3 .next-step:nth-child(1) .next-step-badge::before { opacity: 1; }
.contact-v3 .next-step:nth-child(2) .next-step-badge { border-color: rgba(6, 154, 68, 0.55); }
.contact-v3 .next-step:nth-child(2) .next-step-badge::before { opacity: 0.55; }

.contact-v3 .next-step-timing {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--green-a);
    background: rgba(6, 154, 68, 0.08);
    padding: 3px 10px;
    border-radius: 100px;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}
.contact-v3 .next-step-heading { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.contact-v3--jp .next-step-heading { line-height: 1.4; }
.contact-v3 .next-step-body { font-size: 14px; color: var(--muted); line-height: 1.65; max-width: 58ch; }
.contact-v3--jp .next-step-body { line-height: 1.75; }
.contact-v3 .next-step-text { display: flex; flex-direction: column; gap: 10px; }

/* ── Mobile timeline: vertical rail layout (< 768px) ────────────────────── */
@media (max-width: 767px) {
    .contact-v3 .what-next-header { margin-bottom: 28px; }

    .contact-v3 .next-steps {
        display: block;
        position: relative;
    }
    /* Vertical rail */
    .contact-v3 .next-steps::before {
        content: '';
        position: absolute;
        top: -20px;
        bottom: -20px;
        left: 19px;
        width: 2px;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            var(--green) 14%,
            rgba(6, 154, 68, 0.55) 47%,
            rgba(6, 154, 68, 0.22) 80%,
            transparent 100%
        );
        z-index: 0;
        pointer-events: none;
    }

    /* 2-col / 3-row grid per step */
    .contact-v3 .next-step {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 20px;
        row-gap: 8px;
        padding-bottom: 32px;
        border-bottom: none;
        position: relative;
    }
    .contact-v3 .next-step:last-child { padding-bottom: 0; }
    .contact-v3 .next-step:not(:last-child) { border-bottom: none; margin-bottom: 0; }

    /* Unwrap wrapper divs so children become direct grid items */
    .contact-v3 .next-step-node { display: contents; }
    .contact-v3 .next-step-text { display: contents; }

    /* Timing pill — col 2, row 1 */
    .contact-v3 .next-step-timing {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        justify-self: start;
        margin-bottom: 0;
    }
    /* Badge — col 1, row 2 */
    .contact-v3 .next-step-badge {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
        position: relative;
        z-index: 1;
    }
    /* Heading — col 2, row 2 */
    .contact-v3 .next-step-heading {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
    }
    /* Body — col 2, row 3 */
    .contact-v3 .next-step-body {
        grid-column: 2;
        grid-row: 3;
    }
}