/* ==========================================================================
   Contact form — cloned from https://www.nyk.com/scripts/contact_oth_en/index.asp
   Loaded on template-contact.php / template-contact-EN.php
   ========================================================================== */

.nykeoc-contact-form {
    --form-accent: #d70c18;
    --form-main: #333;
    --form-head-bg: #f3f5f7;
    --form-border: #ddd;
    --form-border-strong: #a1a1a1;
    --form-input-border: #767676;
    --form-text: #333;
    --form-muted: #717171;

    padding-top: 35px;
    color: var(--form-text);
    font-size: 16px;
    line-height: 1.6;
    border-top: 2px solid var(--form-accent);
}

.nykeoc-contact-form *,
.nykeoc-contact-form *::before,
.nykeoc-contact-form *::after {
    box-sizing: border-box;
}

.nykeoc-contact-form .js-contact-form {
    margin-top: 54px;
}

.nykeoc-contact-form section {
    background: none;
}

@media print, screen and (min-width: 768.9999px) {
    .nykeoc-contact-form [data-col-pc]:not([data-col-pc="1"]) {
        display: flex;
        flex-flow: row wrap;
    }

    .nykeoc-contact-form [data-col-pc]:not([data-col-pc="auto"]):not([data-col-pc="1"]) {
        width: 100%;
    }

    .nykeoc-contact-form [data-col-pc]:not([data-col-pc="auto"]) > * {
        margin-top: 1.25em;
        margin-left: 36px;
    }

    .nykeoc-contact-form [data-col-pc="1"] > :nth-child(-n + 1) {
        margin-top: 0 !important;
    }

    .nykeoc-contact-form [data-col-pc="1"] > :nth-child(1n + 1) {
        margin-left: 0 !important;
    }

    .nykeoc-contact-form [data-col-pc="1"] > * {
        width: 100%;
    }

    .nykeoc-contact-form [data-col-pc="2"] > :nth-child(-n + 2) {
        margin-top: 0 !important;
    }

    .nykeoc-contact-form [data-col-pc="2"] > :nth-child(odd) {
        margin-left: 0 !important;
    }

    .nykeoc-contact-form [data-col-pc="2"] > * {
        width: calc((100% - 36px) / 2 - 0.1px);
    }

    .nykeoc-contact-form [data-col-pc="3"] > :nth-child(-n + 3) {
        margin-top: 0 !important;
    }

    .nykeoc-contact-form [data-col-pc="3"] > :nth-child(3n + 1) {
        margin-left: 0 !important;
    }

    .nykeoc-contact-form [data-col-pc="3"] > * {
        width: calc((100% - 72px) / 3 - 0.1px);
    }

    .nykeoc-contact-form [data-col-pc="auto"] {
        margin-right: -36px;
        margin-bottom: -1em;
    }

    .nykeoc-contact-form [data-col-pc="auto"] > * {
        margin-top: 0 !important;
        margin-right: 36px;
        margin-bottom: 1em;
        margin-left: 0;
    }

    .nykeoc-contact-form .note-list[data-col-pc] > li,
    .nykeoc-contact-form .unorder-list[data-col-pc] > li,
    .nykeoc-contact-form .link-list[data-col-pc] > li {
        margin-top: 0.6em;
    }

    .nykeoc-contact-form .note-list[data-col-pc] > li:first-child,
    .nykeoc-contact-form .unorder-list[data-col-pc] > li:first-child,
    .nykeoc-contact-form .link-list[data-col-pc] > li:first-child {
        margin-top: 0;
    }

    .nykeoc-contact-form .note-list[data-col-pc="auto"] > li,
    .nykeoc-contact-form .unorder-list[data-col-pc="auto"] > li,
    .nykeoc-contact-form .link-list[data-col-pc="auto"] > li {
        margin: 0 36px 0.6em 0;
    }

    .nykeoc-contact-form [data-size-pc="32per"] {
        width: 32% !important;
    }

    .nykeoc-contact-form [data-size-pc="32per"] > * {
        width: 100%;
    }

    /* The consent label's span must stay shrink-to-fit so it centres. */
    .nykeoc-contact-form [data-size-pc] > .form-agree-check__label__inner {
        width: auto;
    }
}

@media screen and (max-width: 768.9998px) {
    .nykeoc-contact-form [data-col-sp]:not([data-col-sp="1"]) {
        display: flex;
        flex-flow: row wrap;
    }

    .nykeoc-contact-form [data-col-sp]:not([data-col-sp="auto"]):not([data-col-sp="1"]) {
        width: 100%;
    }

    .nykeoc-contact-form [data-col-sp]:not([data-col-sp="auto"]) > * {
        margin-top: 1em;
        margin-left: 15px;
    }

    .nykeoc-contact-form [data-col-sp="1"] > :nth-child(-n + 1) {
        margin-top: 0 !important;
    }

    .nykeoc-contact-form [data-col-sp="1"] > :nth-child(1n + 1) {
        margin-left: 0 !important;
    }

    .nykeoc-contact-form [data-col-sp="1"] > * {
        width: 100%;
    }

    .nykeoc-contact-form [data-col-sp="auto"] {
        margin-right: -15px;
        margin-bottom: -0.5em;
    }

    .nykeoc-contact-form [data-col-sp="auto"] > * {
        margin-top: 0 !important;
        margin-right: 15px;
        margin-bottom: 0.5em;
        margin-left: 0;
    }

    .nykeoc-contact-form .note-list[data-col-sp] > li,
    .nykeoc-contact-form .unorder-list[data-col-sp] > li,
    .nykeoc-contact-form .link-list[data-col-sp] > li {
        margin-top: 0.6em;
    }

    .nykeoc-contact-form .note-list[data-col-sp] > li:first-child,
    .nykeoc-contact-form .unorder-list[data-col-sp] > li:first-child,
    .nykeoc-contact-form .link-list[data-col-sp] > li:first-child {
        margin-top: 0;
    }

    .nykeoc-contact-form [data-size-sp="1col"],
    .nykeoc-contact-form [data-size-sp="1col"] > * {
        width: 100%;
    }
}

/* Notice box + intro copy ------------------------------------------------ */

.nykeoc-contact-form .box {
    margin: 2.4em 0 0;
    border: 1px solid var(--form-muted);
    background-color: #fff;
}

.nykeoc-contact-form .box:first-child {
    margin-top: 0;
}

.nykeoc-contact-form .box__head {
    margin: 0 0 0.8em;
    padding: 1.6em 1.8em 0;
}

.nykeoc-contact-form .box__body {
    padding: 1.6em 1.8em;
}

.nykeoc-contact-form .box__head + .box__body {
    padding-top: 0;
}

.nykeoc-contact-form .box__title {
    color: var(--form-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.nykeoc-contact-form .form-required--inline {
    padding: 5px 11px;
    background: var(--form-accent);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    vertical-align: 1px;
    font-family: "Noto Sans JP", sans-serif;
}

@media screen and (max-width: 768.9998px) {
    .nykeoc-contact-form .box {
        margin-top: 1.4em;
    }

    .nykeoc-contact-form .box__head {
        padding: 1.2em 1.4em 0;
    }

    .nykeoc-contact-form .box__body {
        padding: 1.2em 1.4em 1em;
    }

    .nykeoc-contact-form .box__title {
        font-size: 15px;
    }

    .nykeoc-contact-form .form-required--inline {
        padding: 3px 12px 4px;
        font-size: 10px;
        vertical-align: 0;
    }
}

/* Step indicator --------------------------------------------------------- */

.nykeoc-contact-form .form-step {
    margin: 0 0 32px;
}

.nykeoc-contact-form .form-step__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nykeoc-contact-form .form-step__name {
    align-items: baseline;
    justify-content: center;
    line-height: 1.4;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
}

.nykeoc-contact-form .form-step__name__phase > em {
    font-size: 22px;
    font-style: normal;
}

@media print, screen and (min-width: 768.9999px) {
    .nykeoc-contact-form .form-step__list {
        display: flex;
        flex-flow: row nowrap;
        overflow: hidden;
        border: 1px solid var(--form-main);
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li:first-child,
    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li:last-child {
        width: calc((100% - 24px) / 3 + 0.9px);
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li:not(:first-child):not(:last-child) {
        width: calc((100% - ((100% - 24px) / 3 - 0.1px) * 2 - 48px) / 1 + 1px);
    }

    .nykeoc-contact-form .form-step__list > li {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        background: var(--form-head-bg);
        color: var(--form-main);
        font-weight: 700;
    }

    .nykeoc-contact-form .form-step__list > li:first-child,
    .nykeoc-contact-form .form-step__list > li:last-child {
        padding: 11px 20px 16px;
    }

    .nykeoc-contact-form .form-step__list > li:not(:first-child):not(:last-child) {
        padding: 11px 40px 16px 20px;
    }

    .nykeoc-contact-form .form-step__list > li:not(:first-child) {
        margin-left: 24px;
    }

    /* Fills the gap the margin above opens up between the arrow heads. */
    .nykeoc-contact-form .form-step__list > li:not(:first-child)::before {
        display: block;
        position: absolute;
        top: 0;
        right: 100%;
        width: 24px;
        height: 100%;
        background: var(--form-head-bg);
        content: "";
    }

    /* Two stacked chevrons, 1px apart, give the arrow its outline. */
    .nykeoc-contact-form .form-step__list > li:not(:first-child) .form-step__name::before,
    .nykeoc-contact-form .form-step__list > li:not(:first-child) .form-step__name::after {
        display: block;
        position: absolute;
        top: -2px;
        width: 25px;
        height: calc(100% + 4px);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        content: "";
    }

    .nykeoc-contact-form .form-step__list > li:not(:first-child) .form-step__name::before {
        right: 100%;
        background: var(--form-main);
    }

    .nykeoc-contact-form .form-step__list > li:not(:first-child) .form-step__name::after {
        right: calc(100% + 1px);
        background: var(--form-head-bg);
    }

    .nykeoc-contact-form .form-step__list > li.is-current {
        color: #fff;
    }

    .nykeoc-contact-form .form-step__list > li.is-current,
    .nykeoc-contact-form .form-step__list > li.is-current:not(:first-child)::before,
    .nykeoc-contact-form .form-step__list > li.is-current + li .form-step__name::before,
    .nykeoc-contact-form .form-step__list > li.is-current + li .form-step__name::after {
        background: var(--form-main);
    }

    .nykeoc-contact-form .form-step__pie {
        display: none;
    }

    .nykeoc-contact-form .form-step__name {
        display: inline-flex;
        flex-flow: row wrap;
        font-size: 18px;
    }

    .nykeoc-contact-form .form-step__name__phase {
        margin-inline-end: 8px;
    }
}

@media screen and (max-width: 768.9998px) {
    .nykeoc-contact-form .form-step {
        margin: 0 0 26px;
    }

    .nykeoc-contact-form .form-step__list {
        position: relative;
    }

    /* Only the current step is shown, as a progress pie. */
    .nykeoc-contact-form .form-step__list > li:not(.is-current) .form-step__pie,
    .nykeoc-contact-form .form-step__list > li:not(.is-current) .form-step__name {
        display: none;
    }

    .nykeoc-contact-form .form-step__list > li.is-current {
        display: flex;
        align-items: center;
        font-weight: 700;
    }

    .nykeoc-contact-form .form-step__list > li::before {
        display: block;
        z-index: 1;
        position: absolute;
        top: 50%;
        left: 0;
        width: 79px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        translate: 0 -50%;
        content: "";
    }

    /* The white spoke that closes the pie at the current step's angle. */
    .nykeoc-contact-form .form-step__list > li::after {
        display: block;
        z-index: 2;
        position: absolute;
        bottom: 50%;
        left: 39.5px;
        width: 3px;
        height: 40.5px;
        background: #fff;
        translate: -1.5px 0;
        content: "";
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li:first-of-type::after {
        transform-origin: bottom;
        rotate: 120deg;
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li.is-current:first-of-type::before {
        background-image: conic-gradient(var(--form-main) 33.33333%, var(--form-head-bg) 33.33333% 100%);
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li:nth-of-type(2)::after {
        transform-origin: bottom;
        rotate: 240deg;
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li.is-current:nth-of-type(2)::before {
        background-image: conic-gradient(var(--form-main) 66.66667%, var(--form-head-bg) 66.66667% 100%);
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li:nth-of-type(3)::after {
        transform-origin: bottom;
        rotate: 1turn;
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li.is-current:nth-of-type(3)::before {
        background-color: var(--form-main);
        background-image: none;
    }

    .nykeoc-contact-form [data-step-length="3"] .form-step__list > li.is-current .form-step__pie__count em::after {
        content: "/3";
    }

    .nykeoc-contact-form .form-step__pie {
        flex-shrink: 0;
        width: 79px;
        margin-right: 25px;
    }

    .nykeoc-contact-form .form-step__pie,
    .nykeoc-contact-form .form-step__pie__count {
        display: flex;
        z-index: 3;
        position: relative;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
    }

    .nykeoc-contact-form .form-step__pie__count {
        width: calc(100% - 18px);
        padding-bottom: 2px;
        background: #fff;
        text-align: center;
    }

    .nykeoc-contact-form .form-step__pie__count em {
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
    }

    .nykeoc-contact-form .form-step__pie__count em::after {
        font-size: 14px;
    }

    .nykeoc-contact-form .form-step__name {
        display: flex;
        position: relative;
        width: 100%;
        min-height: 50px;
        padding: 8px 10px;
        background-color: var(--form-head-bg);
        color: var(--form-text);
        font-size: 15px;
        font-weight: 700;
    }

    .nykeoc-contact-form .form-step__name::before {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: -12px;
        margin-top: -6px;
        border-top: 6px solid transparent;
        border-right: 12px solid var(--form-head-bg);
        border-bottom: 6px solid transparent;
        border-left: 0 solid transparent;
        content: "";
    }

    .nykeoc-contact-form .form-step__name__phase {
        margin-inline-end: 7px;
    }
}

/* Section heading -------------------------------------------------------- */

.nykeoc-contact-form .heading2-v2__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
}

/* Rows ------------------------------------------------------------------- */

.nykeoc-contact-form .form-component {
    margin: 0;
    border-top: 1px solid var(--form-border);
}

.nykeoc-contact-form .heading2-v2 + * {
    margin-top: 1.6em;
}

.nykeoc-contact-form .form-component__head {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 16px 17px;
    background-color: var(--form-head-bg);
}

.nykeoc-contact-form .form-component__title__label {
    display: inline;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.nykeoc-contact-form .form-component__title__label label {
    cursor: pointer;
}

.nykeoc-contact-form .form-required {
    margin-inline-start: 8px;
    padding: 5px 11px;
    background: var(--form-accent);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    vertical-align: 2px;
    font-family: "Noto Sans JP", sans-serif;
}

.nykeoc-contact-form .form-component__body {
    padding: 16px 16px 54px;
}

.nykeoc-contact-form .form-component__item + * {
    margin-block-start: 50px;
}

/* Helper text ------------------------------------------------------------ */

.nykeoc-contact-form .form-example {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    margin: 0;
    color: var(--form-muted);
    font-size: 15px;
}

.nykeoc-contact-form .form-example__head {
    flex-shrink: 0;
    margin-inline-end: 2px;
}

.nykeoc-contact-form .note-list,
.nykeoc-contact-form .unorder-list,
.nykeoc-contact-form .link-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.nykeoc-contact-form .note-list > li,
.nykeoc-contact-form .unorder-list > li,
.nykeoc-contact-form .link-list > li {
    position: relative;
    font-size: 16px;
    list-style: none;
}

.nykeoc-contact-form .note-list > li {
    padding-left: 1.2em;
}

.nykeoc-contact-form .unorder-list > li {
    padding-left: 1.25em;
}

.nykeoc-contact-form .note-list__mark {
    position: absolute;
    top: -3px;
    left: 0;
    font-size: 22px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

.nykeoc-contact-form .note-list__mark-ja {
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 18px;
    font-weight: 400;
}

.nykeoc-contact-form .unorder-list > li::before {
    display: inline-block;
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--form-accent);
    content: "";
}

.nykeoc-contact-form .unorder-list__nest,
.nykeoc-contact-form .link-list__nest {
    padding-left: 1.2em;
}

.nykeoc-contact-form .link-list > li > [class*="__type"] {
    display: inline-block;
    position: relative;
    padding-left: 28px;
    color: var(--form-main);
    text-decoration: none;
}

.nykeoc-contact-form .link-list > li > [class*="__type"]:hover {
    text-decoration: underline;
}

/* Horizontal arrow bullet, matching NYK's icon.svg#arrow sprite. */
.nykeoc-contact-form .link-list > li > [class*="__type"]::before {
    position: absolute;
    top: 5px;
    left: 0;
    width: 27px;
    height: 11px;
    background-color: var(--form-accent);
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    /* -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 3.4h15.2L12.4 0h1.4L18 4l-4.2 4h-1.4l2.8-3.4H0z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M0 3.4h15.2L12.4 0h1.4L18 4l-4.2 4h-1.4l2.8-3.4H0z'/%3E%3C/svg%3E") no-repeat center / contain; */
}

.nykeoc-contact-form .text {
    margin: 1em 0 0;
    font-size: 16px;
}

.nykeoc-contact-form .text:first-child,
.nykeoc-contact-form .form-component__body > .text:first-child {
    margin-top: 0;
}

@media screen and (max-width: 768.9998px) {
    .nykeoc-contact-form .text,
    .nykeoc-contact-form .note-list > li,
    .nykeoc-contact-form .unorder-list > li,
    .nykeoc-contact-form .link-list > li {
        font-size: 14px;
    }

    .nykeoc-contact-form .unorder-list > li::before {
        width: 9px;
        height: 9px;
    }
}

/* Radio ------------------------------------------------------------------ */

.nykeoc-contact-form .form-radio {
    position: relative;
    margin: 0;
}

.nykeoc-contact-form .form-radio-wrap > .form-radio {
    margin-top: 10px;
}

.nykeoc-contact-form .form-radio-wrap > .form-radio:first-child {
    margin-top: 0;
}

.nykeoc-contact-form .form-radio__input {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.nykeoc-contact-form .form-radio__label {
    display: inline-block;
    cursor: pointer;
}

.nykeoc-contact-form .form-radio__label__inner {
    position: relative;
    padding-inline-start: 30px;
}

.nykeoc-contact-form .form-radio__label__inner::before {
    display: block;
    position: absolute;
    top: 0.1em;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--form-input-border);
    border-radius: 50%;
    background: #fff;
    content: "";
}

.nykeoc-contact-form .form-radio__label__inner::after {
    display: block;
    visibility: hidden;
    position: absolute;
    top: calc(0.1em + 4px);
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--form-accent);
    content: "";
    opacity: 0;
}

.nykeoc-contact-form .form-radio__input:checked + .form-radio__label .form-radio__label__inner::before {
    border-color: var(--form-accent);
}

.nykeoc-contact-form .form-radio__input:checked + .form-radio__label .form-radio__label__inner::after {
    visibility: visible;
    opacity: 1;
}

.nykeoc-contact-form .form-radio__input:focus-visible + .form-radio__label {
    outline: auto;
}

.nykeoc-contact-form .is-error .form-radio__label__inner::before {
    border-color: var(--form-accent);
}

/* Text fields ------------------------------------------------------------ */

.nykeoc-contact-form .form-text-field-wrap {
    margin-block-start: 10px;
}

.nykeoc-contact-form .form-text-field {
    margin: 0;
}

.nykeoc-contact-form .form-text-field[data-size-pc="2/3col"] {
    width: 66.66667%;
}

.nykeoc-contact-form .form-text-field[data-size-pc="5col"] {
    width: 41.66667%;
}

.nykeoc-contact-form .form-text-field__input,
.nykeoc-contact-form .form-text-field__textarea {
    width: 100%;
    border: 1px solid var(--form-input-border);
    outline: none;
    background-color: #fff;
    color: var(--form-text);
    font-family: inherit;
    font-size: 16px;
}

.nykeoc-contact-form .form-text-field__input {
    min-height: 50px;
    padding: 10px 16px;
}

.nykeoc-contact-form .form-text-field__textarea {
    display: block;
    min-height: 200px;
    padding: 10px 16px;
    line-height: 1.7;
    resize: vertical;
}

.nykeoc-contact-form .form-text-field__input:focus,
.nykeoc-contact-form .form-text-field__textarea:focus {
    border-width: 2px;
    border-color: var(--form-main);
}

.nykeoc-contact-form .form-counter {
    margin: 6px 0 0;
    color: var(--form-muted);
    font-size: 13px;
    text-align: right;
}

.nykeoc-contact-form .form-text-field[data-size-pc="2/3col"] + .form-counter {
    text-align: left;
}

/* Select (都道府県 / 年齢, Japanese form only) ---------------------------- */

.nykeoc-contact-form .form-select-wrap,
.nykeoc-contact-form .form-select {
    margin: 0;
}

.nykeoc-contact-form .form-select__inner {
    position: relative;
    border: 1px solid var(--form-input-border);
    background-color: #fff;
}

.nykeoc-contact-form .form-select__inner:has(.form-select__list:focus) {
    border-width: 2px;
    border-color: var(--form-text);
}

.nykeoc-contact-form .form-select__inner::after {
    z-index: 0;
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: solid transparent;
    border-top: solid var(--form-text);
    translate: 0 -50%;
    content: "";
}

.nykeoc-contact-form .form-select__list {
    appearance: none;
    -webkit-appearance: none;
    z-index: 1;
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: none;
    color: var(--form-text);
    font-family: inherit;
    cursor: pointer;
}

.nykeoc-contact-form .is-error .form-select__inner {
    border-color: var(--form-accent);
}

@media print, screen and (min-width: 768.9999px) {
    .nykeoc-contact-form .form-select-wrap {
        margin-block-start: 10px;
    }

    .nykeoc-contact-form .form-select {
        display: inline-block;
        min-width: 206px;
        margin-block-start: 10px;
    }

    .nykeoc-contact-form .form-select__inner {
        display: inline-block;
        width: 100%;
    }

    .nykeoc-contact-form .form-select__inner::after {
        right: 15px;
        border-width: 7px 5px 0;
    }

    .nykeoc-contact-form .form-select__inner:has(.form-select__list:focus)::after {
        right: 14px;
    }

    .nykeoc-contact-form .form-select__list {
        min-height: 48px;
        padding: 10px 16px;
        padding-inline-end: 36px;
        font-size: 16px;
        font-weight: 400;
    }

    .nykeoc-contact-form .form-select__list:focus {
        min-height: 46px;
        padding: 9px 15px;
        padding-inline-end: 34px;
    }
}

@media screen and (max-width: 768.9998px) {
    .nykeoc-contact-form .form-select-wrap,
    .nykeoc-contact-form .form-select {
        margin-block-start: 8.5px;
    }

    .nykeoc-contact-form .form-select__inner {
        display: block;
        width: 100%;
    }

    .nykeoc-contact-form .form-select__inner::after {
        right: 16px;
        border-width: 7px 5.5px 0;
    }

    .nykeoc-contact-form .form-select__inner:has(.form-select__list:focus)::after {
        right: 15px;
    }

    .nykeoc-contact-form .form-select__list {
        min-height: 42px;
        padding: 10px 16px;
        padding-inline-end: 43px;
        font-size: 14px;
        font-weight: 400;
    }

    .nykeoc-contact-form .form-select__list:focus {
        min-height: 40px;
        padding: 9px 15px;
        padding-inline-end: 41px;
    }
}

/* Consent checkbox ------------------------------------------------------- */

.nykeoc-contact-form .form-agree-check-wrap {
    margin-top: 28px;
}

.nykeoc-contact-form .form-agree-check {
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;
}

.nykeoc-contact-form .form-agree-check__input {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.nykeoc-contact-form .form-agree-check__label {
    display: flex;
    position: relative;
    justify-content: center;
    padding: 18px 16px 19px;
    border: 1px solid var(--form-border);
    background-color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.nykeoc-contact-form .form-agree-check__label__inner {
    position: relative;
    padding-inline-start: 33px;
}

.nykeoc-contact-form .form-agree-check__label__inner::before {
    display: block;
    position: absolute;
    top: 0.2em;
    left: 4px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--form-input-border);
    border-radius: 3px;
    background: #fff;
    content: "";
}

.nykeoc-contact-form .form-agree-check__label__inner::after {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 8px;
    left: 7px;
    width: 13px;
    height: 7px;
    border: solid #fff;
    border-width: 0 0 3px 3px;
    rotate: -45deg;
    content: "";
    opacity: 0;
}

.nykeoc-contact-form .form-agree-check__input:checked + .form-agree-check__label .form-agree-check__label__inner::before {
    border-color: var(--form-accent);
    background-color: var(--form-accent);
}

.nykeoc-contact-form .form-agree-check__input:checked + .form-agree-check__label .form-agree-check__label__inner::after {
    visibility: visible;
    opacity: 1;
}

.nykeoc-contact-form .form-agree-check__input:focus-visible + .form-agree-check__label {
    outline: 2px solid var(--form-main);
    outline-offset: 1px;
}

/* Security check (reCAPTCHA v2) ------------------------------------------ */

/* Google renders the widget itself, so all this row needs is the same top
   margin the other controls get. */
.nykeoc-contact-form .g-recaptcha {
    margin-block-start: 10px;
}

/* The widget is a fixed 304x78 iframe and cannot reflow. Below 375px the row
   is narrower than that (100vw - 40px container - 28px body padding), so scale
   it down and shrink the box to match, otherwise the page scrolls sideways.
   0.82 keeps it inside a 320px viewport. The challenge popup is appended to
   <body>, so nothing here clips it. */
@media screen and (max-width: 374.9998px) {
    .nykeoc-contact-form .g-recaptcha {
        height: 64px;
        transform: scale(0.82);
        transform-origin: 0 0;
    }
}

/* Errors ----------------------------------------------------------------- */

/* A row in error tints its whole body and reddens the control inside it. */
.nykeoc-contact-form .form-component.is-error .form-component__body {
    background-color: #fff6f6;
}

.nykeoc-contact-form .is-error > .form-text-field-wrap .form-text-field__input,
.nykeoc-contact-form .is-error > .form-text-field-wrap .form-text-field__textarea {
    border-color: var(--form-accent);
}

.nykeoc-contact-form .is-error > .form-text-field-wrap .form-text-field__input:focus,
.nykeoc-contact-form .is-error > .form-text-field-wrap .form-text-field__textarea:focus {
    border-color: var(--form-main);
}

/* The e-mail rows sit closer together once one of them shows a message. */
.nykeoc-contact-form .form-component__item.is-error + * {
    margin-block-start: 10px;
}

/* The slot under each field: empty and hidden until that field is in error. */
.nykeoc-contact-form .form-error-text-wrap,
.nykeoc-contact-form .form-error-text-wrap--center {
    display: none;
}

.nykeoc-contact-form .is-error > .form-error-text-wrap,
.nykeoc-contact-form .is-error > .form-error-text-wrap--center {
    display: block;
}

/* Sits under the centred consent box: the slot itself is centred, the message
   inside it stays left-aligned. */
.nykeoc-contact-form .form-error-text-wrap--center {
    margin-right: auto;
    margin-left: auto;
}

/* The row reserves its bottom padding for this message, so it tightens once
   the message is actually there. */
.nykeoc-contact-form .form-component__body.is-error,
.nykeoc-contact-form .form-component__body:has(> .form-component__item:last-child.is-error) {
    padding-bottom: 26px;
}

.nykeoc-contact-form .form-error-text {
    position: relative;
    margin-top: 8px;
    padding-left: 28px;
    color: var(--form-accent);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.nykeoc-contact-form .form-error-text + .form-error-text {
    margin-top: 10px;
}

.nykeoc-contact-form .form-error-text::before {
    position: absolute;
    top: 0.15em;
    left: 2px;
    width: 19px;
    height: 19px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.1 38.52'%3E%3Cpath fill='%23d70c18' d='M19.46 1.48.42 34.01c-1.17 2 .27 4.52 2.59 4.52h38.09c2.32 0 3.76-2.52 2.59-4.52L24.64 1.48c-1.16-1.98-4.02-1.98-5.18 0Z'/%3E%3Cpath fill='%23fff' d='M24.3 33.32s-.08.09-.13.13c-2.43 1.81-5.12.05-5.12-2.24 0-1.66 1.36-3.02 3.02-3.02 2.29 0 4.05 2.69 2.23 5.12ZM20.15 26.15l-1.18-15.93c-.02-.29.21-.54.5-.54h5.15c.29 0 .52.25.5.54l-1.18 15.93c-.02.26-.24.46-.5.46h-2.79c-.26 0-.48-.2-.5-.46Z'/%3E%3C/svg%3E") no-repeat 0 0 / contain;
    content: "";
}

/* Buttons ---------------------------------------------------------------- */

.nykeoc-contact-form .form-control-wrap--centering {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
}

/* STEP 2 pairs its buttons in a plain .form-control-wrap, which nyk.com lays
   out row-reverse — the submit comes first in the DOM and renders on the
   right, with Back to its left. */
.nykeoc-contact-form .form-control-wrap {
    display: flex;
    margin-top: 40px;
}

.nykeoc-contact-form .form-control {
    min-width: 240px;
}

.nykeoc-contact-form .form-control__button__type {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 13px 37px 14px 22px;
    border: none;
    background-color: var(--form-main);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nykeoc-contact-form .form-control__button__type::after {
    position: absolute;
    top: calc(50% - 3px);
    right: 2px;
    width: 27px;
    height: 11px;
    margin-top: -5px;
    background-color: currentColor;
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

.nykeoc-contact-form .form-control__button__type:hover {
    background-color: var(--form-accent);
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
}

/* Secondary button — nyk.com's form-control__button-v2. Shrinks to its label
   (the "Back" button sits at the left of the confirm step); the thank-you page
   stretches it to the full column below. */

.nykeoc-contact-form .form-control__button-v2__type {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 0.8em 1em 0.8em 2.5em;
    border: 1px solid var(--form-head-bg);
    border-bottom-color: var(--form-border-strong);
    background-color: var(--form-head-bg);
    color: var(--form-text);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nykeoc-contact-form .form-control__button-v2__type::before {
    position: absolute;
    top: 50%;
    left: 0.6em;
    width: 18px;
    height: 8px;
    margin-top: -4px;
    background-color: var(--form-accent);
    content: "";
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    scale: -1 1;
}

/* Same button, arrow pointing forward — "Go to Home page". */
.nykeoc-contact-form .form-control__button-v2__type--forward {
    padding: 0.8em 2.5em 0.8em 1em;
}

.nykeoc-contact-form .form-control__button-v2__type--forward::before {
    right: 0.6em;
    left: auto;
    scale: 1 1;
}

.nykeoc-contact-form .form-control__button-v2__type:hover {
    border-color: var(--form-accent);
    background-color: var(--form-accent);
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
}

.nykeoc-contact-form .form-control__button-v2__type:hover::before {
    background-color: #fff;
}

.nykeoc-contact-form .form-thanks .form-control__button-v2__type {
    width: 100%;
}

/* Sending state ---------------------------------------------------------- */

/* js/contact-form.js puts .is-submitting on the confirm step while the send is
   in flight and disables both buttons, so the pair reads as busy rather than
   broken and a slow mail server cannot be asked twice. */

.nykeoc-contact-form .form-control__button__type[disabled],
.nykeoc-contact-form .form-control__button-v2__type[disabled] {
    cursor: default;
    opacity: 0.65;
}

.nykeoc-contact-form .form-control__button__type[disabled]:hover {
    background-color: var(--form-main);
    box-shadow: none;
}

.nykeoc-contact-form .form-control__button-v2__type[disabled]:hover {
    border-color: var(--form-head-bg);
    background-color: var(--form-head-bg);
    box-shadow: none;
    color: var(--form-text);
}

.nykeoc-contact-form .form-control__button-v2__type[disabled]:hover::before {
    background-color: var(--form-accent);
}

/* The button that is doing the work stays legible; only the Back button beside
   it fades out to read as unavailable. */
.nykeoc-contact-form .is-submitting .form-control__button__type[disabled],
.nykeoc-contact-form .is-submitting .form-control__button__type[disabled]:hover {
    background-color: var(--form-main);
    cursor: progress;
    opacity: 0.85;
}

/* The arrow's own box becomes the spinner — same ::after, so nothing shifts.
   The second selector covers CF7's [submit], which renders an <input> and
   therefore draws its arrow on the wrapping .form-control__button. */
.nykeoc-contact-form .is-submitting .form-control__button__type::after,
.nykeoc-contact-form .is-submitting .form-control__button:has(> input.form-control__button__type)::after {
    top: 50%;
    right: 8px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    background-color: transparent;
    -webkit-mask: none;
    mask: none;
    animation: nykeoc-contact-spin 0.7s linear infinite;
}

@keyframes nykeoc-contact-spin {
    to {
        rotate: 360deg;
    }
}

@media (prefers-reduced-motion: reduce) {

    .nykeoc-contact-form .is-submitting .form-control__button__type::after,
    .nykeoc-contact-form .is-submitting .form-control__button:has(> input.form-control__button__type)::after {
        animation-duration: 2s;
    }
}

@media print, screen and (min-width: 768.9999px) {
    /* The confirm pair is laid out row-reverse, so [Send, Back] in the DOM
       renders as Back in the first column and Send in the second. */
    .nykeoc-contact-form .form-control-wrap[data-col-pc]:not([data-col-pc="1"]) {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    .nykeoc-contact-form .form-control-wrap[data-col-pc]:not([data-col-pc="auto"]) > * {
        margin-right: 36px;
        margin-left: 0;
    }

    .nykeoc-contact-form .form-control-wrap[data-col-pc] > :first-child {
        margin-right: 0;
    }

    /* Left-aligned inside its column, unlike the full-width submit. */
    .nykeoc-contact-form .form-control-wrap .form-control__button-v2__type {
        margin-right: auto;
    }
}

/* Confirmation view ------------------------------------------------------ */

/* STEP 2 lists the answers as a bordered label/value table per section, under
   the same heading style as STEP 1. js/contact-form.js builds the tables. */

.nykeoc-contact-form .form-summary {
    margin: 30px 0 0;
    font-size: 16px;
}

.nykeoc-contact-form .form-summary .heading2-v2 {
    margin-top: 2.4em;
}

.nykeoc-contact-form .form-summary__table {
    width: 100%;
    margin-top: 1em;
    border-collapse: collapse;
    table-layout: fixed;
}

.nykeoc-contact-form .form-summary__table th,
.nykeoc-contact-form .form-summary__table td {
    padding: 12px 16px;
    border: 1px solid var(--form-border);
    font-size: 16px;
    line-height: 1.6;
    text-align: start;
    vertical-align: top;
    word-break: break-word;
}

.nykeoc-contact-form .form-summary__table th {
    width: 25%;
    background-color: var(--form-head-bg);
    font-weight: 700;
}

.nykeoc-contact-form .form-summary__table td {
    /* Textareas keep their line breaks. */
    white-space: pre-wrap;
}

/* Thank-you -------------------------------------------------------------- */

.nykeoc-contact-form .form-lead {
    margin: 30px 0 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
}

.nykeoc-contact-form .form-thanks {
    text-align: center;
}

.nykeoc-contact-form .form-thanks__text {
    margin: 1.6em 0 0;
}

/* Honeypot --------------------------------------------------------------- */

.nykeoc-contact-form .form-honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* SP --------------------------------------------------------------------- */

@media screen and (max-width: 768.9998px) {
    .nykeoc-contact-form {
        font-size: 15px;
    }

    .nykeoc-contact-form .heading2-v2 {
        margin: 2.6em 0 0;
    }

    .nykeoc-contact-form .heading2-v2__title {
        font-size: 20px;
    }

    .nykeoc-contact-form .form-component__head {
        padding: 14px 15px;
    }

    .nykeoc-contact-form .form-component__title__label {
        font-size: 14px;
    }

    .nykeoc-contact-form .form-required {
        margin-inline-start: 5px;
        padding: 3px 12px 4px;
        font-size: 10px;
    }

    .nykeoc-contact-form .form-component__body {
        padding: 12px 14px 50px;
    }

    .nykeoc-contact-form .form-component__body.is-error,
    .nykeoc-contact-form .form-component__body:has(> .form-component__item:last-child.is-error) {
        padding-bottom: 15px;
    }

    .nykeoc-contact-form .form-component__item.is-error + * {
        margin-block-start: 14px;
    }

    .nykeoc-contact-form .form-error-text {
        margin-top: 11px;
        padding-left: 32px;
        font-size: 14px;
    }

    .nykeoc-contact-form .form-error-text::before {
        top: 0.1em;
        left: 0;
    }

    .nykeoc-contact-form .form-example {
        font-size: 14px;
    }

    .nykeoc-contact-form .form-radio__label__inner {
        padding-inline-start: 24px;
    }

    .nykeoc-contact-form .form-radio__label__inner::before {
        width: 18px;
        height: 18px;
    }

    .nykeoc-contact-form .form-radio__label__inner::after {
        width: 10px;
        height: 10px;
    }

    .nykeoc-contact-form .form-text-field[data-size-pc="2/3col"],
    .nykeoc-contact-form .form-text-field[data-size-pc="5col"] {
        width: 100%;
    }

    .nykeoc-contact-form .form-text-field__input {
        min-height: 45px;
        padding: 6px 8px;
    }

    .nykeoc-contact-form .form-text-field__textarea {
        min-height: 191px;
        padding: 9px 8px;
    }

    .nykeoc-contact-form .form-agree-check-wrap {
        margin-top: 14px;
    }

    .nykeoc-contact-form .form-agree-check__label {
        padding: 16px 14px 18px;
    }

    /* Keeps the label text centred: without this the generic
       [data-size-sp="1col"] > * rule stretches the span to 100%. */
    .nykeoc-contact-form [data-size-sp] > .form-agree-check__label__inner {
        width: auto;
    }

    .nykeoc-contact-form .form-agree-check__label__inner {
        padding-inline-start: calc(18px + 6px);
    }

    .nykeoc-contact-form .form-agree-check__label__inner::before {
        top: 0.2em;
        left: 0;
        width: 18px;
        height: 18px;
        border-radius: 2px;
    }

    .nykeoc-contact-form .form-agree-check__label__inner::after {
        top: 7px;
        left: 3px;
        width: 12px;
        height: 6px;
        rotate: -54deg;
    }

    .nykeoc-contact-form .form-control-wrap--centering {
        flex-direction: column;
        gap: 14px;
        margin-top: 32px;
    }

    /* Submit on top, Back below — the DOM order, as on nyk.com. */
    .nykeoc-contact-form .form-control-wrap {
        flex-direction: column;
        margin-top: 32px;
    }

    .nykeoc-contact-form .form-control {
        min-width: 0;
    }

    .nykeoc-contact-form .form-lead {
        font-size: 17px;
    }

    .nykeoc-contact-form .form-summary {
        font-size: 15px;
    }

    /* Label above value — the two columns are too narrow to sit side by side. */
    .nykeoc-contact-form .form-summary__table,
    .nykeoc-contact-form .form-summary__table tbody,
    .nykeoc-contact-form .form-summary__table tr,
    .nykeoc-contact-form .form-summary__table th,
    .nykeoc-contact-form .form-summary__table td {
        display: block;
        width: 100%;
    }

    .nykeoc-contact-form .form-summary__table th,
    .nykeoc-contact-form .form-summary__table td {
        padding: 10px 14px;
        font-size: 15px;
    }

    .nykeoc-contact-form .form-summary__table th {
        border-bottom: none;
    }

    .nykeoc-contact-form .form-summary__table tr + tr th {
        border-top: none;
    }

    .nykeoc-contact-form .form-control__button-v2__type {
        width: 100%;
        font-size: 15px;
    }

}

/* Contact Form 7 ---------------------------------------------------------- */

/*
 * The form is rendered by Contact Form 7 (see cf7/contact-form-*.txt). CF7 uses
 * its own markup for the consent box and the submit button, so these rules map
 * that markup back onto the design above. Nothing here applies to the plain
 * PHP form, which uses the original class names.
 */

/* CF7 appends its own message to every invalid field. js/contact-form.js moves
   the text into .js-form-check__output, which is where the theme shows it. */
.nykeoc-contact-form .wpcf7-not-valid-tip {
    display: none;
}

/* CF7 wraps every control in this span, which lands between .form-text-field
   and the input. Block keeps the field full width. */
.nykeoc-contact-form .wpcf7-form-control-wrap {
    display: block;
}

/*
 * Consent checkbox. [acceptance] renders
 *   <span class="wpcf7-acceptance"><span class="wpcf7-list-item"><label>
 *     <input class="form-agree-check__input"><span class="wpcf7-list-item-label">
 * so .wpcf7-list-item stands in for .form-agree-check, its <label> for
 * .form-agree-check__label, and .wpcf7-list-item-label for __label__inner.
 * The <input> already carries .form-agree-check__input via the form-tag's
 * class: option, so it is hidden by the rule further up.
 */
.nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item {
    display: flex;
    position: relative;
    justify-content: center;
    margin: 0;
    text-align: center;
}

.nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item > label {
    display: flex;
    position: relative;
    justify-content: center;
    padding: 18px 16px 19px;
    border: 1px solid var(--form-border);
    background-color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item-label {
    position: relative;
    padding-inline-start: 33px;
}

.nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item-label::before {
    display: block;
    position: absolute;
    top: 0.2em;
    left: 4px;
    width: 20px;
    height: 20px;
    border: 1px solid var(--form-input-border);
    border-radius: 3px;
    background: #fff;
    content: "";
}

.nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item-label::after {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 8px;
    left: 7px;
    width: 13px;
    height: 7px;
    border: solid #fff;
    border-width: 0 0 3px 3px;
    rotate: -45deg;
    content: "";
    opacity: 0;
}

.nykeoc-contact-form .form-agree-check__input:checked + .wpcf7-list-item-label::before {
    border-color: var(--form-accent);
    background-color: var(--form-accent);
}

.nykeoc-contact-form .form-agree-check__input:checked + .wpcf7-list-item-label::after {
    visibility: visible;
    opacity: 1;
}

.nykeoc-contact-form .form-agree-check__input:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid var(--form-main);
    outline-offset: 4px;
}

/*
 * [submit] renders an <input>, and ::after never paints on a replaced element,
 * so the arrow from .form-control__button__type::after is lost. Draw it on the
 * wrapper instead — only when the wrapper actually holds a CF7 submit input.
 */
.nykeoc-contact-form .form-control__button:has(> input.form-control__button__type) {
    position: relative;
}

.nykeoc-contact-form .form-control__button:has(> input.form-control__button__type)::after {
    position: absolute;
    top: calc(50% - 3px);
    right: 2px;
    width: 27px;
    height: 11px;
    margin-top: -5px;
    background-color: #fff;
    content: "";
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6H12L9 3' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The Send button already spins while .is-submitting is on, so CF7's own
   spinner next to it would only be a second one saying the same thing. */
.nykeoc-contact-form .wpcf7-spinner {
    display: none;
}

/* Every outcome already has a place on the page: errors go under the field
   they belong to, and a successful send swaps in .form-thanks. CF7's own
   status line would only repeat that.
   Hidden unconditionally rather than per state — CF7 6.x dropped the
   wpcf7-mail-sent-ok / wpcf7-validation-errors / wpcf7-spam-blocked classes
   and now keeps the state on the <form> element, writing plain text in here.
   .screen-reader-response is left alone; it is what announces the result to
   assistive tech. */
.nykeoc-contact-form .wpcf7-response-output {
    display: none;
}

/* A send failure belongs to no field, so js/contact-form.js puts the message
   here and adds this class. It is the one case CF7's own output is shown.
   The extra .wpcf7-form is for weight, not reach: CF7 ships
   `.wpcf7 form.init .wpcf7-response-output { display: none }`, which outranks
   a plain two-class selector and would keep the message hidden. */
.nykeoc-contact-form .wpcf7-form .wpcf7-response-output.is-visible {
    display: block;
    margin: 24px 0 0;
    padding: 16px;
    border: 1px solid var(--form-accent);
    color: var(--form-accent);
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

/*
 * The consent checkbox again, this time keyed off the <input> itself.
 * [acceptance] puts its class: option on the wrapping <span>, never on the
 * control, so .form-agree-check__input never reaches the box — and forcing it
 * would make the rule that hides the input swallow the whole row.
 */
.nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.nykeoc-contact-form .form-agree-check-wrap input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    border-color: var(--form-accent);
    background-color: var(--form-accent);
}

.nykeoc-contact-form .form-agree-check-wrap input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    visibility: visible;
    opacity: 1;
}

.nykeoc-contact-form .form-agree-check-wrap input[type="checkbox"]:focus-visible + .wpcf7-list-item-label {
    outline: 2px solid var(--form-main);
    outline-offset: 4px;
}

@media print, screen and (min-width: 768.9999px) {

    .nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item > label {
        width: 32%;
    }

}

@media screen and (max-width: 768.9998px) {

    .nykeoc-contact-form .form-agree-check-wrap .wpcf7-list-item > label {
        width: 100%;
    }

}