/* The contact section that closes most pages ("The bands open"): parts/cta.html, assets/js/contact-section.js.
   A dark scene: the graphite portrait of the home hero, crossed by three bands drawn in one canvas. The
   widest band opens downwards into the ember ground of the form. Without the canvas (no scripts, no
   WebGL, reduced motion on a browser without it) two plain bands and a flat ember ground stand in.
   Every value the script moves is a custom property that rests at its finished state, so the section is
   complete wherever the script is absent, asleep or still. */

.od-cta {
	--od-bg: var(--od-cta-night); --od-fg: var(--od-white); --od-fg-soft: #f6d3c7; --od-fg-mute: var(--od-cta-hint); --od-line: var(--od-cta-rule);
	/* Fields on the ember ground: hint text 4.5:1 or more, lines 3:1 or more, errors in white with a mark
	   (red cannot be read here), small links in white. */
	--od-field-line: var(--od-cta-rule); --od-field-hint: var(--od-cta-hint); --od-error-text: var(--od-white); --od-brand-text: var(--od-white);
	--od-cta-inset: clamp(20px, -17.143px + 9.5238vw, 120px);
	--od-cta-night: #05070a;
	--od-cta-ember-1: #862200;   /* the opened band under its upper edge */
	--od-cta-ember-2: #481100;   /* and at its foot */
	--od-cta-hint: #f0b8a6;
	--od-cta-rule: #e59378;
	--od-cta-gap: clamp(12px, 2.5vh, 26px);
	/* Width of the headline on one line, in em, per language (measured width times 1.07, so the line ends
	   a little before the inset): the type follows the window. */
	--od-cta-len: 10.9;
	--od-cta-hold: 0px;
	position: relative; display: flow-root; background: var(--od-cta-night); color: var(--od-white);
	/* A link to the section, or the keyboard, lands where the band stands open: the end of the hold. */
	scroll-margin-top: calc(-1 * var(--od-cta-hold));
	clip-path: none !important;
}
.od-cta:lang(fr) { --od-cta-len: 9; }
.od-cta:lang(es) { --od-cta-len: 11.35; }
.od-cta:lang(de) { --od-cta-len: 13.55; }
.od-cta:lang(it) { --od-cta-len: 12.15; }
.od-cta:lang(pt) { --od-cta-len: 11.3; }

/* The hold: with a mouse, in a window of 1000 x 560 px or more, the stage stays while the band opens.
   The script lets go of it (od-cta-loose) where the scene does not fit the window or cannot be drawn. */
.od-cta__track::after { content: ""; display: block; height: var(--od-cta-hold); }
.od-cta__stage { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--od-cta-night); }
/* From 1000 px the inset is never narrower than the column kept free at the lower right (the live chat and
   the back-to-top button: 56 px wide, 24 px from the edge), so nothing of the form's last row stands under it. */
@media (min-width: 1000px) { .od-cta { --od-cta-inset: clamp(84px, -17.143px + 9.5238vw, 120px); } }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
	html.od-js .od-cta:not(.od-cta-loose) { --od-cta-hold: clamp(540px, 85vh, 860px); }
	html.od-js .od-cta:not(.od-cta-loose) .od-cta__stage { position: sticky; top: 0; }
}

/* ---------- The scene: portrait, shade, bands ---------- */
.od-cta__scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.od-cta__pic {
	position: absolute; top: 0; left: 50%; width: var(--od-cta-pw, max(108vw, 1100px)); max-width: none; height: auto;
	transform: translate3d(calc(-50% + var(--od-cta-px, 0px)), calc(var(--od-cta-py, -10vw) + var(--od-cta-pdy, 0px)), 0); transform-origin: 50% 32%;
	filter: brightness(0.6) contrast(1.12) saturate(0.8);
}
.od-cta__shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(to bottom, rgba(5, 7, 10, 0.5) 0, rgba(5, 7, 10, 0) 150px),
		radial-gradient(115% 85% at 50% 22%, rgba(5, 7, 10, 0) 34%, rgba(5, 7, 10, 0.78) 100%),
		linear-gradient(to bottom, rgba(5, 7, 10, 0) calc(var(--od-cta-yt, 48vh) - 90px), rgba(5, 7, 10, 0.9) calc(var(--od-cta-yt, 48vh) + 150px), #05070a calc(var(--od-cta-yt, 48vh) + 300px));
}
.od-cta__gl { position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; }
.od-cta-gl .od-cta__gl { display: block; }
/* Without the canvas: two plain bands on the portrait, and the form on a flat ember ground */
.od-cta__still { position: absolute; inset: 0; }
.od-cta-gl .od-cta__still { display: none; }
.od-cta__still i { position: absolute; display: block; transform: rotate(-2.8deg); filter: blur(2px); }
.od-cta__still i:first-child { top: var(--od-cta-s1, calc(max(18.83vw, 191.8px) - 10vw - max(2.7vw, 22px))); left: 24%; right: -6%; height: var(--od-cta-s1h, max(5.4vw, 44px)); background: linear-gradient(90deg, rgba(255, 69, 0, 0), #ff4500 16%, #ff3a08 100%); }
.od-cta__still i:last-child { top: var(--od-cta-s2, calc(max(18.83vw, 191.8px) - 10vw - max(8.6vw, 76px))); left: -6%; right: 50%; height: var(--od-cta-s2h, max(2vw, 16px)); background: linear-gradient(90deg, #ff3a08, #ff4500 70%, rgba(255, 69, 0, 0)); }
.od-cta__band::before { content: ""; position: absolute; z-index: -1; inset: 0 0 22px; background: linear-gradient(to bottom, var(--od-brand) 0, var(--od-cta-ember-1) 26px, var(--od-cta-ember-2) 100%); }
.od-cta-gl .od-cta__band::before { display: none; }

/* ---------- Label, lead and headline across the portrait ---------- */
.od-cta__top {
	position: relative; z-index: 2; flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25em); align-content: end; align-items: end; gap: clamp(8px, 1.8vh, 20px) 40px;
	min-height: clamp(190px, 36vh, 560px); padding: clamp(26px, 6vh, 96px) var(--od-cta-inset) clamp(16px, 3.4vh, 38px);
}
.od-cta__label { grid-column: 1; justify-self: start; color: var(--od-white); }
.od-cta__lead { grid-column: 2; font-size: clamp(15px, 13.9px + 0.3vw, 18px); line-height: 1.5; font-weight: 500; letter-spacing: -0.02em; color: var(--od-white); text-wrap: pretty; text-shadow: 0 0 18px rgba(5, 7, 10, 0.55); }
.od-cta__title {
	grid-column: 1 / -1; font-size: min(calc((100vw - 2 * var(--od-cta-inset)) / var(--od-cta-len)), 15vh, 172px);
	font-weight: 600; line-height: 1; letter-spacing: var(--od-track-display); white-space: nowrap; color: var(--od-white);
}
/* The words of the headline (wrapped by the script) rise one after the other as the section arrives */
.od-cta__w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.05em 0.16em 0; margin: -0.06em -0.05em -0.16em 0; }
.od-cta__w > span { display: inline-block; transform: translate3d(0, calc((1 - var(--od-cta-t, 1)) * 112%), 0); }
.od-cta__label, .od-cta__lead { opacity: var(--od-cta-t, 1); transform: translate3d(0, calc((1 - var(--od-cta-t, 1)) * 16px), 0); }

/* ---------- The opened band: the form ---------- */
.od-cta__band { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6.4vh, 64px) var(--od-cta-inset) clamp(38px, 6.2vh, 62px); }
.od-cta__band > .wpcf7, .od-cta__done { min-height: var(--od-cta-form-h, 0px); }
.od-cta__band > .wpcf7 { display: flex; flex-direction: column; justify-content: center; }
.od-cta__band [hidden] { display: none !important; }
.od-cta .od-cta-fields { gap: var(--od-cta-gap); }
.od-cta .od-form__extra { position: absolute; }
.od-cta-fields__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--od-cta-gap) clamp(20px, 2.4vw, 36px); }
.od-cta-fields__mid { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: var(--od-cta-gap) clamp(28px, 4vw, 64px); align-items: start; }
.od-cta-fields__need { min-width: 0; }
.od-cta-fields__side { display: flex; flex-direction: column; gap: var(--od-cta-gap); min-width: 0; }
.od-cta-fields__foot { display: grid; grid-template-columns: minmax(0, 6fr) auto minmax(0, 3.3fr); gap: 14px clamp(28px, 4vw, 64px); align-items: center; }

/* Text fields. The line of a field is drawn in from the side as the band reaches it (--od-cta-t, set on the
   label); with the focus it turns white and grows to three pixels, the site's doubling made plainer for
   this ground; a field to put right keeps two white pixels and a mark beside its message. */
.od-cta .od-field input[type], .od-cta .od-field select, .od-cta .od-field textarea {
	padding: clamp(7px, 1.35vh, 12px) 0; font-size: clamp(16px, 15.1px + 0.24vw, 19px); color: var(--od-white); caret-color: var(--od-white);
	border-bottom-color: transparent;
	background: linear-gradient(var(--od-field-line), var(--od-field-line)) left bottom / calc(var(--od-cta-t, 1) * 100%) 1px no-repeat border-box;
	opacity: clamp(0, calc(var(--od-cta-t, 1) * 2 - 0.8), 1); transform: translate3d(calc((1 - var(--od-cta-t, 1)) * -22px), 0, 0);
}
.od-cta .od-field textarea { min-height: 0; height: calc(2 * 1.6em + 2 * clamp(7px, 1.35vh, 12px) + 1px); overflow: auto; }
.od-cta .od-field select {
	padding-right: 28px; cursor: pointer;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23f0b8a6' stroke-width='1.6'/%3E%3C/svg%3E") right center / 22px no-repeat,
		linear-gradient(var(--od-field-line), var(--od-field-line)) left bottom / calc(var(--od-cta-t, 1) * 100%) 1px no-repeat border-box;
}
.od-cta .od-field select:has(option[value=""]:checked) { color: var(--od-field-hint); }
.od-cta .od-field select option { color: #000; background: #fff; }
.od-cta .od-field input[type]:focus, .od-cta .od-field select:focus, .od-cta .od-field textarea:focus { border-bottom-color: var(--od-white); box-shadow: 0 2px 0 var(--od-white); }
.od-cta .od-field .wpcf7-not-valid.wpcf7-not-valid, .od-cta .od-field [aria-invalid="true"][aria-invalid] { border-bottom-color: var(--od-white); box-shadow: 0 1px 0 var(--od-white); }
.od-cta .od-field .wpcf7-not-valid.wpcf7-not-valid:focus, .od-cta .od-field [aria-invalid="true"][aria-invalid]:focus { box-shadow: 0 2px 0 var(--od-white); }
.od-cta .od-field > .od-sr { top: -7px; color: var(--od-fg-soft); }
/* A field the browser has filled keeps the ground and the white of the others (the browser would paint it
   pale and drop the drawn line: the long transition holds its colour back, the border stands in for the line) */
.od-cta .od-field input:-webkit-autofill, .od-cta .od-field input:autofill { -webkit-text-fill-color: var(--od-white); border-bottom-color: var(--od-field-line); transition: background-color 100000s 0s, border-color 0.2s, box-shadow 0.2s; }
.od-cta .od-field input:-webkit-autofill:focus, .od-cta .od-field input:autofill:focus { border-bottom-color: var(--od-white); }
/* Where the system sets the colours, a field is marked by a plain border */
@media (forced-colors: active) { .od-cta .od-field input[type], .od-cta .od-field select, .od-cta .od-field textarea { border-bottom-color: CanvasText; } }
.od-cta .wpcf7-not-valid-tip { display: flex; align-items: flex-start; gap: 7px; margin-top: 6px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--od-white); }
.od-cta .wpcf7-not-valid-tip::before { content: "!"; content: "!" / ""; flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px; font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0; color: #6d1b00; background: var(--od-white); }

/* What do you need: the services as squared chips that fill like a streak (several can be chosen) */
.od-cta-fields__need-label { margin-bottom: clamp(6px, 1.2vh, 10px); font-size: var(--od-fs-b4); font-weight: 500; line-height: 1.5; color: var(--od-white); opacity: var(--od-cta-t, 1); transform: translate3d(0, calc((1 - var(--od-cta-t, 1)) * 12px), 0); }
.od-cta .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: clamp(6px, 1vh, 8px) 8px; }
.od-cta .wpcf7-checkbox .wpcf7-list-item { --od-cta-ct: clamp(0, calc(var(--od-cta-t, 1) * 3.2 - var(--od-cta-i, 0) * 0.2), 1); position: relative; display: inline-flex; margin: 0; opacity: var(--od-cta-ct); transform: translate3d(calc((1 - var(--od-cta-ct)) * -14px), 0, 0); }
.od-cta .wpcf7-checkbox label { position: relative; display: inline-flex; cursor: pointer; }
.od-cta .wpcf7-checkbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.od-cta .wpcf7-checkbox .wpcf7-list-item-label {
	display: inline-flex; align-items: center; min-height: clamp(30px, 4.5vh, 38px); padding: 4px 12px; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em;
	color: var(--od-white); border: 1px solid var(--od-field-line);
	background: linear-gradient(var(--od-brand), var(--od-brand)) 0 0 / 0% 100% no-repeat;
	transition: background-size 0.45s var(--od-ease), color 0.12s 0.2s, border-color 0.2s;
}
.od-cta .wpcf7-checkbox label:hover .wpcf7-list-item-label { border-color: var(--od-white); }
.od-cta .wpcf7-checkbox input:checked + .wpcf7-list-item-label { color: #000; border-color: var(--od-brand); background-size: 100% 100%; }
.od-cta .wpcf7-checkbox input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--od-white); outline-offset: 2px; }

/* Consent, send, the way to the Contact page */
.od-cta .od-form__consent { min-width: 0; font-size: var(--od-fs-b5); line-height: 1.5; letter-spacing: -0.01em; color: var(--od-fg-mute); opacity: var(--od-cta-t, 1); transform: translate3d(0, calc((1 - var(--od-cta-t, 1)) * 12px), 0); }
.od-cta .od-form__consent a { color: var(--od-white); text-decoration: underline; text-underline-offset: 2px; }
.od-cta .od-form__consent a:hover { color: var(--od-white); text-decoration-thickness: 2px; }
.od-cta-form .wpcf7-acceptance input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.od-cta-form .wpcf7-acceptance input[aria-invalid="true"] { border-color: var(--od-white); border-width: 2px; }
.od-cta-form .wpcf7-acceptance input:focus-visible, .od-cta .od-form__consent a:focus-visible, .od-cta__more a:focus-visible { outline: 2px solid var(--od-white); outline-offset: 3px; }
/* Send: a bright streak of the band, its ends combed like the band's own */
.od-cta-fields__send { position: relative; display: inline-flex; opacity: var(--od-cta-t, 1); transform: translate3d(calc((1 - var(--od-cta-t, 1)) * -26px), 0, 0); }
.od-cta-send {
	position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: clamp(44px, 6.2vh, 56px); padding: 0 26px 0 20px;
	font-size: var(--od-fs-btn); font-weight: 600; line-height: 1.6; white-space: nowrap; color: #000; background: var(--od-brand);
}
.od-cta-send::before { content: ""; flex: none; width: 1.2em; height: 1.2em; background: #000; -webkit-mask: url(../icons/arrow-turn.svg) center / contain no-repeat; mask: url(../icons/arrow-turn.svg) center / contain no-repeat; transition: transform 0.3s var(--od-ease); }
.od-cta-send:hover::before { transform: translateX(4px); }
.od-cta-send:focus-visible { outline: 2px solid var(--od-white); outline-offset: 4px; }
/* A pair of slip brackets holds the button and opens a little under the pointer or the focus. */
.od-cta-fields__send::before, .od-cta-fields__send::after {
	content: ""; position: absolute; top: 12%; bottom: 12%; width: 9px; pointer-events: none;
	color: var(--od-white); background: var(--od-sb); transition: transform 0.5s var(--od-ease);
}
.od-cta-fields__send::before { right: calc(100% + 10px); }
.od-cta-fields__send::after { left: calc(100% + 10px); transform: scaleX(-1); }
.od-cta-fields__send:hover::before, .od-cta-fields__send:focus-within::before { transform: translateX(-5px); }
.od-cta-fields__send:hover::after, .od-cta-fields__send:focus-within::after { transform: translateX(5px) scaleX(-1); }
.od-cta form.submitting .od-cta-send { cursor: progress; }
.od-cta__more { justify-self: end; text-align: right; text-wrap: balance; font-size: var(--od-fs-b4); line-height: 1.5; color: var(--od-fg-soft); opacity: var(--od-cta-t, 1); transform: translate3d(0, calc((1 - var(--od-cta-t, 1)) * 12px), 0); }
.od-cta__more a { font-weight: 500; white-space: nowrap; color: var(--od-white); }
.od-cta__more a::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 4px; vertical-align: -0.14em; background: var(--od-white); -webkit-mask: url(../icons/arrow-up-right.svg) center / contain no-repeat; mask: url(../icons/arrow-up-right.svg) center / contain no-repeat; transition: transform 0.3s var(--od-ease); }
.od-cta__more a:hover::after { transform: translate(2px, -2px); }
/* What the form answers under itself (a refused send, a failure): a white rule and plain words */
.od-cta .wpcf7 form[data-status] .wpcf7-response-output { margin-top: clamp(10px, 2vh, 20px); padding-top: 10px; border-top-color: var(--od-white); color: var(--od-white); }
/* Nothing to say: a form at rest, a message sent (the sent state says it), and messages all put right */
.od-cta .wpcf7 form[data-status="init"] .wpcf7-response-output, .od-cta .wpcf7 form[data-status="sent"] .wpcf7-response-output, .od-cta .wpcf7 form[data-status="resetting"] .wpcf7-response-output,
.od-cta .wpcf7 form[data-status="validating"]:not(:has(.wpcf7-not-valid-tip)) .wpcf7-response-output { display: none; }

/* ---------- The sweep on send: the texts go under the sheet of fibres and come back behind it ---------- */
.od-cta-sweep .od-cta__top, .od-cta-sweep .od-cta__band { -webkit-mask-image: var(--od-cta-mask); mask-image: var(--od-cta-mask); }

/* ---------- Sent ---------- */
.od-cta__done { display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2vh, 18px); outline: 0; }
.od-cta__done-title { max-width: 13em; font-size: clamp(30px, 4.6vw, 72px); line-height: 1.02; font-weight: 600; letter-spacing: -0.055em; color: var(--od-white); text-wrap: balance; }
.od-cta__done-title::before { content: ""; display: block; width: 26px; height: 26px; margin-bottom: clamp(14px, 2.6vh, 26px); color: var(--od-white); background: var(--od-corner); }
.od-cta__done-note { max-width: 44em; font-size: var(--od-fs-b3); line-height: 1.5; color: var(--od-fg-soft); }
.od-cta__again { margin-top: clamp(4px, 1.4vh, 14px); }
.od-cta__again button { padding: 6px 0; font-size: var(--od-fs-b3); font-weight: 500; color: var(--od-white); border-bottom: 1px solid var(--od-cta-rule); }
.od-cta__again button:hover { border-bottom-color: var(--od-white); }
.od-cta__again button:focus-visible { outline: 2px solid var(--od-white); outline-offset: 4px; }
.od-cta__done > * { opacity: var(--od-cta-dt, 1); transform: translate3d(0, calc((1 - var(--od-cta-dt, 1)) * 18px), 0); transition: opacity 0.7s var(--od-ease), transform 0.9s var(--od-ease); }
.od-cta__done > :nth-child(2) { transition-delay: 0.08s; }
.od-cta__done > :nth-child(3) { transition-delay: 0.16s; }

/* ---------- Short windows: the scene still stands in one window ---------- */
@media (min-width: 1000px) and (max-height: 720px) {
	.od-cta__top { min-height: clamp(190px, 33vh, 560px); }
	.od-cta__lead { font-size: 15px; line-height: 1.45; }
	.od-cta__title { font-size: min(calc((100vw - 2 * var(--od-cta-inset)) / var(--od-cta-len)), 13vh); }
	.od-cta .od-form__consent { font-size: 12px; line-height: 1.4; }
	.od-cta__more { font-size: 13px; line-height: 1.4; }
}

/* ---------- Mid widths and phones: no hold, fields stack ---------- */
@media (max-width: 999px) {
	.od-cta__top { grid-template-columns: minmax(0, 1fr); min-height: clamp(380px, 62vh, 620px); }
	.od-cta__label, .od-cta__lead, .od-cta__title { grid-column: 1; }
	.od-cta__lead { order: 3; max-width: 30em; margin-top: 0.5em; }
	.od-cta__title { font-size: min(calc((100vw - 2 * var(--od-cta-inset)) / var(--od-cta-len-narrow, 5.9)), 132px); white-space: normal; max-width: 6.4em; }
	.od-cta-fields__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.od-cta-fields__row > * { grid-column: span 2; }
	.od-cta-fields__row > :nth-child(n+4) { grid-column: span 3; }
	.od-cta-fields__mid, .od-cta-fields__foot { grid-template-columns: minmax(0, 1fr); }
	.od-cta-fields__foot { justify-items: start; gap: 24px; }
	.od-cta__more { justify-self: start; text-align: left; }
	.od-cta__band { padding-top: 64px; padding-bottom: 72px; }
	.od-cta { --od-cta-gap: 26px; }
	.od-cta .od-field input[type], .od-cta .od-field select, .od-cta .od-field textarea { padding: 12px 0; font-size: 17px; }
	.od-cta .od-field textarea { height: calc(3 * 1.6em + 25px); }
	.od-cta .wpcf7-checkbox .wpcf7-list-item-label { min-height: 44px; }
	.od-cta-send { min-height: 56px; }
}
@media (max-width: 600px) {
	.od-cta-fields__row > * { grid-column: span 3; }
	.od-cta-fields__row > :nth-child(3) { grid-column: 1 / -1; }
	.od-cta-fields__foot { gap: 26px; }
	/* The last lines end before the round buttons that float over the lower right corner */
	.od-cta__more { padding-right: 68px; }
}

/* ---------- Still: reduced motion, and every state the script does not move ---------- */
@media (prefers-reduced-motion: reduce) {
	.od-cta .wpcf7-checkbox .wpcf7-list-item-label, .od-cta-fields__send::before, .od-cta-fields__send::after, .od-cta-send::before, .od-cta__more a::after, .od-cta__done > * { transition: none; }
}
@media print { .od-cta__gl { display: none !important; } .od-cta__stage { position: static !important; min-height: 0; } .od-cta__track::after { content: none; } }