/*
 * Contacto (page-contacto.php, coc-contacto.js). The ways to reach us on the left (sticky on desktop), the form on
 * the right as a letter on the desk: grained paper with a second sheet under it, lit by a candle that follows the
 * pointer and the field being written, the house seal waiting on its corner; the message is written on ruled lines.
 * Light by default, the night panel under body.dark-mode (there the grain only shows inside the candle's light).
 * Labels always visible, errors under their field (Contact Form 7 validates as you leave it). Sent: the letter folds
 * into an envelope, the flap closes and the seal is pressed on it. Reduced motion: it all just appears.
 */
.coc-ct-page {
    --ct-ink: #141417;
    --ct-text: rgba(20, 20, 23, .86);
    --ct-muted: rgba(20, 20, 23, .64);
    --ct-line: rgba(20, 20, 23, .12);
    --ct-edge: rgba(20, 20, 23, .58);  /* field borders: 3:1 on the panel, also under the candle */
    --ct-panel: #f6f4ef;
    --ct-sheet: #ebe6dc;               /* the sheet under the letter */
    --ct-field: rgba(255, 255, 255, .8);
    --ct-rule: rgba(20, 20, 23, .1);   /* the ruled lines of the message */
    --ct-amber: #8f5410;               /* amber as text */
    --ct-glow: #d08a1e;                /* amber as colour */
    --ct-candle: rgba(255, 176, 80, .3);
    --ct-r: clamp(220px, 30vw, 420px); /* the candle's reach (a radial-gradient circle takes no percentage) */
    --ct-err: #b42318;
    --ct-on-ink: #fff;
    --ct-shine: rgba(255, 255, 255, .32);
    --ct-arrow: var(--ct-arrow-light);
    --ct-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ct-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23141417' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.dark-mode.coc-ct-page {
    --ct-ink: #fff;
    --ct-text: rgba(255, 255, 255, .86);
    --ct-muted: rgba(255, 255, 255, .62);
    --ct-line: rgba(255, 255, 255, .1);
    --ct-edge: rgba(255, 255, 255, .4);
    --ct-panel: #121215;
    --ct-sheet: #19191d;
    --ct-field: rgba(255, 255, 255, .04);
    --ct-rule: rgba(255, 255, 255, .09);
    --ct-amber: #f2b45a;
    --ct-glow: #f2b45a;
    --ct-candle: rgba(242, 180, 90, .15);
    --ct-err: #ff9b8f;
    --ct-on-ink: #141417;
    --ct-shine: rgba(208, 138, 30, .45);
    --ct-arrow: var(--ct-arrow-dark);
}
/* Where the candle stands, as a share of the letter (coc-contacto.js moves it); registered so it can glide. */
@property --ct-lx { syntax: '<percentage>'; inherits: true; initial-value: 24%; }
@property --ct-ly { syntax: '<percentage>'; inherits: true; initial-value: 7%; }

.coc-ct {
    display: grid;
    gap: clamp(2.2rem, 5vw, 4rem);
    padding-top: 0;
    padding-bottom: clamp(3.5rem, 9vw, 7rem);
    color: var(--ct-text);
}
@media (min-width: 992px) {
    .coc-ct { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(3rem, 6vw, 6rem); }
    .coc-ct__aside { position: sticky; top: calc(var(--coc-nav-live, var(--coc-nav-h)) + 2rem); }
}

/* ---------------------------------------------------------------- Ways to reach us */
.coc-ct__eyebrow {
    margin: 0 0 .7rem;
    padding: 0;
    font: 600 .74rem/1.3 var(--coc-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ct-muted);
}
.coc-ct__aside > .coc-ct__eyebrow:not(:first-child) { margin-top: 2.4rem; }
.coc-ct__mail { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; }
body .coc-ct__mail a,
body.dark-mode .coc-ct__mail a:not(.page-link) {
    font-family: var(--coc-serif);
    font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.1rem);
    line-height: 1.2;
    color: var(--ct-ink);
    text-decoration: underline;
    text-decoration-color: var(--ct-glow);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    overflow-wrap: anywhere;
}
.coc-ct__mail a:hover { text-decoration-thickness: 2px; }
.coc-ct__copy {
    min-height: 44px;
    padding: 0 1.1rem;
    border: 1px solid var(--ct-edge);
    border-radius: 999px;
    background: transparent;
    color: var(--ct-ink);
    font: 600 .82rem/1 var(--coc-sans);
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.coc-ct__copy:hover { border-color: var(--ct-ink); }
.coc-ct__copy.is-done { background: var(--ct-glow); border-color: var(--ct-glow); color: #141417; }
.coc-ct__list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.coc-ct__list li { position: relative; padding-left: 1.5rem; font-size: 1.02rem; color: var(--ct-text); }
.coc-ct__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 1px; background: var(--ct-glow); transform-origin: left; }
.coc-ct__note { margin: 2.4rem 0 0; max-width: 40ch; font-size: .95rem; line-height: 1.6; color: var(--ct-muted); }

/* ---------------------------------------------------------------- The letter */
.coc-ct__panel {
    position: relative;
    isolation: isolate;
    padding: clamp(1.4rem, 4vw, 3rem);
    background: var(--ct-panel);
    border: 1px solid var(--ct-line);
    border-radius: 6px;
    /* A second sheet under the letter: hard edges, no blur. */
    box-shadow: 7px 7px 0 -1px var(--ct-sheet), 7px 7px 0 0 var(--ct-line);
}
.coc-ct__panel::before, .coc-ct__panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}
.coc-ct__panel::before { /* the candle: a warm pool on the paper */
    background: radial-gradient(circle var(--ct-r) at var(--ct-lx) var(--ct-ly), var(--ct-candle), color-mix(in srgb, var(--ct-candle) 35%, transparent) 50%, transparent 100%);
    mix-blend-mode: multiply;
}
.coc-ct__panel::after { /* paper grain */
    opacity: .5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
/* Night: the room is dark and the grain shows only where the candle reaches. */
body.dark-mode .coc-ct__panel::before { mix-blend-mode: normal; }
body.dark-mode .coc-ct__panel::after {
    opacity: .9;
    mix-blend-mode: screen;
    -webkit-mask-image: radial-gradient(circle var(--ct-r) at var(--ct-lx) var(--ct-ly), #000, transparent 85%);
    mask-image: radial-gradient(circle var(--ct-r) at var(--ct-lx) var(--ct-ly), #000, transparent 85%);
}
.coc-ct__form, .coc-ct__done { position: relative; z-index: 1; }

/* The wax seal, waiting on the letter's corner; it leans as the pointer crosses the paper. */
.coc-ct__seal {
    position: absolute;
    z-index: 3;
    top: -32px;
    right: clamp(1.2rem, 4vw, 2.8rem);
    width: 86px;
    height: 86px;
    pointer-events: none;
    transform: rotate(calc(-9deg + var(--ct-tilt, 0deg)));
    filter: drop-shadow(0 8px 10px rgba(70, 40, 5, .32));
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
body.dark-mode .coc-ct__seal { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.coc-ct__wax { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.coc-ct__wax svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.coc-ct__wax img { position: relative; width: 48px; height: 48px; mix-blend-mode: multiply; opacity: .6; border-radius: 50%; }
.coc-ct__wax::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 214, .75) 50%, transparent 65%) -150% 0 / 220% 100% no-repeat; mix-blend-mode: overlay; }

/* Topic chips (radios). */
.coc-ct__topics { margin: 0 0 1.8rem; padding: 0; border: 0; min-width: 0; }
.coc-ct__topics:not([hidden]) { display: flex; flex-wrap: wrap; gap: .5rem; }
.coc-ct__topics legend { float: none; flex-basis: 100%; width: auto; padding-right: 6rem; } /* clear of the seal */
.coc-ct__chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.coc-ct__chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.coc-ct__chip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.05rem;
    border: 1px solid var(--ct-edge);
    border-radius: 999px;
    font: 500 .92rem/1.2 var(--coc-sans);
    color: var(--ct-ink);
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.coc-ct__chip:hover span { border-color: var(--ct-ink); }
.coc-ct__chip input:checked + span { background: var(--ct-glow); border-color: var(--ct-glow); color: #141417; }
.coc-ct__chip input:focus-visible + span { outline: 2px solid var(--ct-ink); outline-offset: 2px; }

/* Fields: Contact Form 7 markup from the templates (.coc-f__*). */
.coc-ct .wpcf7-form { margin: 0; }
.coc-ct .wpcf7-form p, .coc-ct .wpcf7-form .coc-f__check { margin: 0 0 1.35rem; }
.coc-f__row { display: grid; gap: 0 1.2rem; }
@media (min-width: 576px) { .coc-f__row { grid-template-columns: 1fr 1fr; } }
.coc-f__field label {
    display: block;
    margin-bottom: .45rem;
    font: 600 .78rem/1.3 var(--coc-sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ct-ink);
}
.coc-f__hint { margin-left: .4rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ct-muted); }
.coc-ct .wpcf7-form-control-wrap { display: block; }
.coc-ct :is(.wpcf7-text, .wpcf7-email, .wpcf7-textarea) {
    display: block;
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--ct-edge);
    border-radius: 4px;
    /* The underline grows from the left on focus. */
    background: linear-gradient(var(--ct-glow), var(--ct-glow)) left bottom / 0% 2px no-repeat, var(--ct-field);
    color: var(--ct-ink);
    caret-color: var(--ct-amber); /* amber ink */
    font: 400 1.05rem/1.5 var(--coc-sans); /* ≥16px: no zoom on iOS */
    box-shadow: none;
    scroll-margin-top: calc(var(--coc-nav-live, var(--coc-nav-h)) + 1.5rem);
    transition: border-color .2s ease, background-size .35s cubic-bezier(.2, .7, .2, 1);
}
/* The message is the letter itself: serif ink on ruled lines that scroll with the text. */
.coc-ct .wpcf7-textarea {
    min-height: 8lh;
    max-height: 22lh;
    padding-block: .7rem;
    resize: vertical;
    field-sizing: content;
    font: 400 1.14rem/1.65 var(--coc-serif);
    background:
        linear-gradient(var(--ct-glow), var(--ct-glow)) left bottom / 0% 2px no-repeat,
        linear-gradient(transparent calc(100% - 1px), var(--ct-rule) 0) 0 0 / 100% 1lh repeat-y local content-box,
        linear-gradient(var(--ct-field), var(--ct-field));
}
.coc-ct :is(.wpcf7-text, .wpcf7-email, .wpcf7-textarea):hover { border-color: var(--ct-ink); }
.coc-ct :is(.wpcf7-text, .wpcf7-email, .wpcf7-textarea):focus {
    outline: 2px solid transparent;
    border-color: var(--ct-ink);
    background-size: 100% 2px, auto;
    box-shadow: 0 0 0 1px var(--ct-ink);
}
.coc-ct .wpcf7-textarea:focus { background-size: 100% 2px, 100% 1lh, auto; }
.coc-ct .wpcf7-form-control[aria-invalid="true"] { border-color: var(--ct-err); box-shadow: 0 0 0 1px var(--ct-err); }
.coc-ct .wpcf7-not-valid-tip {
    display: block;
    margin-top: .45rem;
    font: 500 .88rem/1.4 var(--coc-sans);
    color: var(--ct-err);
    transition: transform .2s ease;
}
@starting-style { .coc-ct .wpcf7-not-valid-tip { transform: translateY(-4px); } }
.coc-f__count { display: block; min-height: 1.3em; margin-top: .4rem; text-align: right; font-size: .82rem; color: var(--ct-muted); font-variant-numeric: tabular-nums; }
.coc-f__count.is-low { color: var(--ct-err); }

/* Privacy checkbox: the whole line is the target. */
.coc-f__check .wpcf7-list-item { margin: 0; }
.coc-f__check label { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; cursor: pointer; font-size: .98rem; color: var(--ct-text); }
.coc-f__check input[type="checkbox"] { flex: none; width: 1.3rem; height: 1.3rem; margin: .12rem 0 0; accent-color: var(--ct-ink); cursor: pointer; }
.coc-ct .wpcf7-form a { color: var(--ct-ink); text-decoration: underline; text-decoration-color: var(--ct-glow); text-underline-offset: .15em; }
.coc-ct .coc-form__legal { font-size: .8rem; line-height: 1.55; color: var(--ct-muted); }
.coc-ct .coc-form__legal small { font-size: inherit; }
.coc-ct .wpcf7-turnstile { margin: 0 0 1.35rem; }

/* Send: an arrow that leans forward on hover, a slow shimmer while the letter goes out. */
.coc-f__send { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 0 !important; }
.coc-ct .wpcf7-submit {
    min-height: 52px;
    padding: 0 3.3rem 0 2.1rem;
    border: 1px solid var(--ct-ink);
    border-radius: 999px;
    background: var(--ct-arrow) right 1.5rem center / 18px no-repeat var(--ct-ink);
    color: var(--ct-on-ink);
    font: 600 .92rem/1 var(--coc-sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .2s ease, background-position .25s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
@media (max-width: 575.98px) { .coc-ct .wpcf7-submit { width: 100%; padding-inline: 3.3rem; } }
.coc-ct .wpcf7-submit:not(:disabled):hover { --ct-arrow: var(--ct-arrow-dark); background-color: var(--ct-glow); background-position: right 1.2rem center; border-color: var(--ct-glow); color: #141417; }
.coc-ct .wpcf7-submit:not(:disabled):active { transform: scale(.98); }
.coc-ct .wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; } /* until Turnstile has checked the visitor */
.coc-ct .wpcf7-submit:focus-visible, .coc-ct__copy:focus-visible, .coc-ct__again:focus-visible { outline: 2px solid var(--ct-glow); outline-offset: 3px; }
.coc-ct .wpcf7-form.submitting .wpcf7-submit { cursor: progress; }
.coc-ct .wpcf7-spinner { margin: 0; }
.coc-ct .wpcf7 form .wpcf7-response-output {
    margin: 1.4rem 0 0;
    padding: .9rem 1rem;
    border: 1px solid var(--ct-err);
    border-radius: 4px;
    font-size: .95rem;
    color: var(--ct-text);
}
.coc-ct .wpcf7 form.sent .wpcf7-response-output { border-color: var(--ct-glow); }

/* ---------------------------------------------------------------- Received: the envelope */
.coc-ct__done { padding: clamp(1.4rem, 4vw, 2.5rem) 0 clamp(.5rem, 2vw, 1rem); text-align: center; outline: none; }
.coc-ct__envelope { position: relative; width: min(230px, 66%); margin: 0 auto 1.8rem; }
.coc-ct__letter { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 16px rgba(70, 45, 10, .16)); }
.coc-ct__env { fill: #efe6d5; stroke: rgba(90, 60, 20, .32); stroke-width: 1.2; }
.coc-ct__fold { fill: none; stroke: rgba(90, 60, 20, .26); stroke-width: 1.4; }
.coc-ct__flap { fill: #e4d5ba; stroke: rgba(90, 60, 20, .3); stroke-width: 1.2; transform-origin: 110px 26px; transform-box: view-box; }
body.dark-mode .coc-ct__letter { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .55)); }
body.dark-mode .coc-ct__env { fill: #e8dcc7; stroke: none; }
body.dark-mode .coc-ct__flap { fill: #d9c9ad; }
.coc-ct__envelope .coc-ct__seal { top: 61%; right: auto; left: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%) rotate(-8deg); } /* the flap's tip */
.coc-ct__envelope .coc-ct__wax img { width: 34px; height: 34px; }
.coc-ct__done-t { margin: 0 0 .8rem; font-family: var(--coc-serif); font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 500; letter-spacing: -.02em; color: var(--ct-ink); }
.coc-ct__done p { max-width: 38ch; margin: 0 auto 1.8rem; color: var(--ct-text); }
.coc-ct__again {
    min-height: 48px;
    padding: 0 1.5rem;
    border: 1px solid var(--ct-edge);
    border-radius: 999px;
    background: transparent;
    color: var(--ct-ink);
    font: 600 .88rem/1 var(--coc-sans);
    cursor: pointer;
}
.coc-ct__again:hover { border-color: var(--ct-ink); }

/* The send as a View Transition (coc-contacto.js): only the letter and the seal take part, named just for it, so the
   light/dark switch still opens the whole page as one circle. The rest of the page changes at once. */
html.coc-ct-vt .coc-ct__panel { view-transition-name: coc-ct-panel; }
html.coc-ct-vt .coc-ct__seal { view-transition-name: coc-ct-seal; }
html.coc-ct-vt::view-transition-old(root) { animation: none; opacity: 0; }
html.coc-ct-vt::view-transition-new(root) { animation: none; }
/* Sealing: the letter tips back and folds away, the envelope comes up, the seal is lifted and carried onto it. */
html.coc-ct-sealing::view-transition-group(coc-ct-panel) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
html.coc-ct-sealing::view-transition-old(coc-ct-panel) { transform-origin: 50% 0; animation: cocCtFold .6s cubic-bezier(.5, 0, .7, .3) both; }
html.coc-ct-sealing::view-transition-new(coc-ct-panel) { animation: cocCtShow .45s ease .25s both; }
html.coc-ct-sealing::view-transition-group(coc-ct-seal) { animation-duration: .8s; animation-delay: .2s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); animation-fill-mode: both; }
html.coc-ct-sealing::view-transition-old(coc-ct-seal) { animation: none; opacity: 0; }
html.coc-ct-sealing::view-transition-new(coc-ct-seal) { animation: none; }
@keyframes cocCtFold { to { transform: perspective(1600px) rotateX(62deg) scale(.5); opacity: 0; } }
@keyframes cocCtShow { from { opacity: 0; } }

/* ---------------------------------------------------------------- Motion */
@media (prefers-reduced-motion: no-preference) {
    .coc-ct__aside, .coc-ct__panel { animation: cocCtRise .9s cubic-bezier(.2, .7, .2, 1) both; }
    .coc-ct__panel { animation-delay: .12s; transition: --ct-lx .7s cubic-bezier(.2, .7, .2, 1), --ct-ly .7s cubic-bezier(.2, .7, .2, 1); }
    @keyframes cocCtRise { from { transform: translateY(18px); } }
    /* The dashes are drawn one after another. */
    .coc-ct__list li::before { animation: cocCtDash .5s cubic-bezier(.2, .7, .2, 1) .45s both; }
    .coc-ct__list li:nth-child(2)::before { animation-delay: .55s; }
    .coc-ct__list li:nth-child(3)::before { animation-delay: .65s; }
    @keyframes cocCtDash { from { transform: scaleX(0); } }
    /* The candle catches once, then burns steady; the seal lands on the corner and catches the light. */
    .coc-ct__panel::before { animation: cocCtCatch 2.2s linear .35s both; }
    @keyframes cocCtCatch { 0% { opacity: 0; } 16% { opacity: .55; } 22% { opacity: .2; } 38% { opacity: .85; } 46% { opacity: .5; } 64% { opacity: 1; } 72% { opacity: .8; } 100% { opacity: 1; } }
    .coc-ct__panel > .coc-ct__seal > .coc-ct__wax { animation: cocCtLand .7s cubic-bezier(.3, 1.5, .5, 1) .6s both; }
    @keyframes cocCtLand { from { transform: scale(1.7) rotate(-26deg); opacity: 0; } }
    .coc-ct__panel > .coc-ct__seal .coc-ct__wax::after { animation: cocCtGlint 1.4s ease-in-out 1.5s both; }
    @keyframes cocCtGlint { to { background-position: 250% 0; } }
    /* A chip takes the ink like a stamp. */
    .coc-ct__chip input:checked + span { animation: cocCtInk .3s cubic-bezier(.3, 1.5, .5, 1); }
    @keyframes cocCtInk { from { transform: scale(.94); } }
    .coc-ct .wpcf7-text.is-filled { animation: cocCtFill .7s ease both; }
    @keyframes cocCtFill { from { box-shadow: 0 0 0 4px var(--ct-glow); } to { box-shadow: 0 0 0 0 transparent; } }
    /* Sending: a slow shimmer across the button (the spinner is not needed then). */
    .coc-ct .wpcf7-form.submitting .wpcf7-submit {
        background-image: linear-gradient(100deg, transparent 30%, var(--ct-shine) 50%, transparent 70%), var(--ct-arrow);
        background-size: 60% 100%, 18px;
        background-position: -100% 0, right 1.5rem center;
        background-repeat: no-repeat;
        animation: cocCtShimmer 1.1s ease-in-out infinite;
    }
    @keyframes cocCtShimmer { to { background-position: 220% 0, right 1.5rem center; } }
    .coc-ct .wpcf7-form.submitting .wpcf7-spinner { display: none; }
    /* Sealed: the flap closes, the seal (lifted on its way over) is pressed on, then the words. */
    .coc-ct.is-sealed .coc-ct__flap { animation: cocCtFlap .65s cubic-bezier(.5, 0, .2, 1) .3s both; }
    @keyframes cocCtFlap { from { transform: rotateX(180deg); } }
    .coc-ct.is-sealed .coc-ct__envelope .coc-ct__wax { animation: cocCtPress .5s cubic-bezier(.3, 1.5, .5, 1) .95s both; }
    @keyframes cocCtPress { from { transform: scale(1.45) rotate(-22deg); } }
    .coc-ct.is-sealed .coc-ct__done > :is(h2, p, button) { animation: cocCtWord .6s cubic-bezier(.2, .8, .2, 1) 1.15s both; }
    .coc-ct.is-sealed .coc-ct__done > p { animation-delay: 1.25s; }
    .coc-ct.is-sealed .coc-ct__done > button { animation-delay: 1.35s; }
    @keyframes cocCtWord { from { transform: translateY(12px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    .coc-ct :is(.wpcf7-text, .wpcf7-email, .wpcf7-textarea), .coc-ct__chip span, .coc-ct .wpcf7-submit, .coc-ct__seal { transition: none; }
}

/* ---------------------------------------------------------------- Phones */
@media (max-width: 575.98px) {
    .coc-ct__panel { box-shadow: 4px 4px 0 -1px var(--ct-sheet), 4px 4px 0 0 var(--ct-line); }
    .coc-ct__seal { top: -24px; right: 1rem; width: 66px; height: 66px; }
    .coc-ct__wax img { width: 37px; height: 37px; }
    .coc-ct__topics legend { padding-right: 4.6rem; }
}
@media (prefers-contrast: more) {
    .coc-ct__panel::before, .coc-ct__panel::after { display: none; }
}
@media (forced-colors: active) {
    .coc-ct__panel::before, .coc-ct__panel::after { display: none; }
    .coc-ct__seal, .coc-ct__letter { forced-color-adjust: none; }
    .coc-ct :is(.wpcf7-text, .wpcf7-email, .wpcf7-textarea) { background-image: none; }
    .coc-ct .wpcf7-submit { background-image: none; padding-inline: 2.1rem; }
}