/* CARIBASOL V2-mix — T-CONTACT (giro 13, D-068 template) and the pages in arrival. Tokens, type and page gradient: css/base.css (= T-RESULTS);
   header / footer: css/shell.css. Same system as the rest of V2-mix: Archivo Expanded titles, Inter text, paper surfaces, 12 / 20 / 24 radii, brand blue.
   Little motion: colour / opacity / a 6 px rise on the confirmation (ease-out ≤ 220 ms); prefers-reduced-motion = no movement (css/base.css). */

.ct { padding: calc(18px * var(--ui)) var(--gx) calc(72px * var(--ui) * var(--sp)); }
@media (min-width: 1024px) { .ct { padding-top: calc(var(--shell-h) + calc(36px * var(--ui))); } }

/* ---- intro ---- */
.ct-intro { max-width: 760px; }
.ct-intro h1 { margin: calc(8px * var(--ui)) 0 0; font-size: clamp(calc(24px * var(--ui)), calc(3.75vw * var(--ui)), calc(39px * var(--ui))); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.ct-intro p { margin: calc(11px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.6; color: var(--muted); max-width: 760px; text-wrap: pretty; }

/* ---- layout (giro 15, D-142): the form is the first thing after the intro.
   phones = intro · direct channels (three compact buttons) · form · office (hours, languages) · map; desktop = the form on the left, "Contact us" (channels + office + map) on the right,
   both columns starting at the same height ---- */
.ct-grid { display: grid; gap: calc(24px * var(--ui)); margin-top: calc(21px * var(--ui)); }
.ct-side { display: contents; }
.ct-channels { order: 1; } .ct-formwrap { order: 2; } .ct-office { order: 3; } .ct-map { order: 4; }
@media (min-width: 1024px) {
  .ct-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: calc(42px * var(--ui)); align-items: start; margin-top: calc(27px * var(--ui)); }
  .ct-formwrap { grid-column: 1; grid-row: 1; }
  .ct-side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: calc(30px * var(--ui)); }
}
/* the form follows the page only where it fits the viewport (critique A: ≈ 1000 px tall — sticky on a 900 px screen would clip it) */
@media (min-width: 1024px) and (min-height: 1120px) { .ct-formwrap { position: sticky; top: calc(var(--sticky-top) + calc(6px * var(--ui))); } }
.ct-h2 { margin: 0 0 calc(12px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-family: var(--font); }

/* ---- direct channels: WhatsApp · phone · email (no dividers between the items) ---- */
.ct-ch { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(8px * var(--ui)); }
.ct-ch a, .ct-ch .ct-ch__row { display: flex; align-items: center; gap: calc(12px * var(--ui)); min-height: calc(48px * var(--ui)); padding: calc(8px * var(--ui)) calc(12px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)); border-radius: calc(12px * var(--ui)); color: var(--ink);
  background: rgba(255, 255, 255, .72); box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 1px 4px 10px -2px rgba(14, 34, 64, .07); }
.ct-ch a { transition: background-color .18s ease, box-shadow .18s ease; }
@media (hover: hover) and (pointer: fine) { .ct-ch a:hover { background: #FFFFFF; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 2px 10px 24px -6px rgba(14, 34, 64, .16); } }
.ct-ch a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ct-ch__ico { flex: none; width: calc(33px * var(--ui)); height: calc(33px * var(--ui)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-t); color: var(--blue); }
.ct-ch__ico svg { width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); }
.ct-ch__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ct-ch__k { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ct-ch__v { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ct-ch__go { margin-left: auto; color: var(--blue); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1; }
.ct-ch .ct-ch__row { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.ct-missing { font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; color: var(--muted); }
/* phones: WhatsApp · phone · email as three compact buttons side by side (label only; the full number / address is on the button's accessible name and in the office block) */
@media (max-width: 1023px) {
  .ct-channels .ct-h2 { margin-bottom: calc(8px * var(--ui)); }
  .ct-ch { flex-direction: row; gap: calc(6px * var(--ui)); }
  .ct-ch > li { flex: 1 1 0; min-width: 0; display: flex; }
  .ct-ch a, .ct-ch .ct-ch__row { flex: 1 1 auto; flex-direction: column; justify-content: center; gap: calc(5px * var(--ui)); min-height: calc(60px * var(--ui)); padding: calc(8px * var(--ui)) calc(5px * var(--ui)); text-align: center; border-radius: calc(11px * var(--ui)); }
  .ct-ch__ico { width: calc(27px * var(--ui)); height: calc(27px * var(--ui)); }
  .ct-ch__ico svg { width: calc(15px * var(--ui)); height: calc(15px * var(--ui)); }
  .ct-ch__t { align-items: center; }
  .ct-ch__k { font-size: max(12px, calc(12px * var(--ui))); }
  .ct-ch__v, .ct-ch__go { display: none; }
  .ct-ch__k .chip-rv { display: flex; justify-content: center; height: auto; min-height: calc(15px * var(--ui)); margin-top: calc(3px * var(--ui)); padding: 2px calc(5px * var(--ui)); white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; text-align: center; line-height: 1.2; font-size: max(12px, calc(12px * var(--ui))); }   /* review chip inside a compact button */
}

/* review chip ("To verify" only where a fact is missing or two sources disagree; "Temp" on placeholders) */
.chip-rv { display: inline-flex; align-items: center; height: calc(17px * var(--ui)); padding: 0 calc(6px * var(--ui)); border-radius: calc(749px * var(--ui)); font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: var(--ground-2); color: var(--muted); vertical-align: middle; white-space: nowrap; }

/* ---- office: address, hours, languages (no dividers) ---- */
.ct-dl { margin: 0; display: grid; gap: calc(14px * var(--ui)); }
.ct-dl div { display: grid; gap: calc(3px * var(--ui)); }
.ct-dl dt { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ct-dl dd { margin: 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; }
.ct-dl address { font-style: normal; }

/* ---- map: no embed, no third party (D-015) — address links + a static map to produce ---- */
.ct-maplinks { display: flex; flex-wrap: wrap; gap: calc(8px * var(--ui)); margin-bottom: calc(12px * var(--ui)); }
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(6px * var(--ui)); min-height: calc(36px * var(--ui)); padding: 0 calc(14px * var(--ui)); border-radius: var(--r-ctl); border: 1px solid var(--line-2);
  background: #FFFFFF; color: var(--ink); font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; text-decoration: none; transition: background-color .18s ease, border-color .18s ease; }
@media (hover: hover) and (pointer: fine) { .ct-btn:hover { background: #fff; border-color: var(--ink); color: var(--ink); } }
.ct-btn svg { width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); }
.ct-mapph { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-photo); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(12px * var(--ui));
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 12px), linear-gradient(160deg, #dfe6ee, #cfd8e3);
  box-shadow: 1px 2px 3px rgba(14, 34, 64, .12), 3px 8px 14px -4px rgba(14, 34, 64, .16); color: #3e4b5c; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; letter-spacing: .02em; }
.ct-mapph .chip-rv { position: absolute; top: calc(9px * var(--ui)); left: calc(9px * var(--ui)); background: rgba(247, 250, 253, .92); }

/* ---- form panel ---- */
.ct-panel { border-radius: calc(18px * var(--ui)); padding: calc(18px * var(--ui)) calc(14px * var(--ui)) calc(17px * var(--ui)); background: var(--surf-panel); border: 1px solid rgba(14, 34, 64, .06);
  box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 1px 4px 10px -2px rgba(14, 34, 64, .07), 2px 12px 28px -6px rgba(14, 34, 64, .12); }
@media (min-width: 640px) { .ct-panel { padding: calc(27px * var(--ui)) calc(27px * var(--ui)) calc(24px * var(--ui)); } }
.ct-panel h2 { margin: 0; font-size: clamp(calc(18px * var(--ui)), calc(2.25vw * var(--ui)), calc(24px * var(--ui)));   /* giro 22 (D-201): the section-title scale of .pg-h2 (was 23) */ line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.ct-panel .ct-lede { margin: calc(8px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: var(--muted); }
.ct-form { display: grid; gap: calc(15px * var(--ui)); margin-top: calc(18px * var(--ui)); }
.ct-row2 { display: grid; gap: calc(15px * var(--ui)); }
@media (min-width: 640px) { .ct-row2 { grid-template-columns: 1fr 1fr; } }

/* the property reference arriving from an Enquire button (?ref=…) */
.ct-ref { display: flex; align-items: center; gap: calc(8px * var(--ui)); flex-wrap: wrap; margin-top: calc(14px * var(--ui)); padding: calc(8px * var(--ui)) calc(8px * var(--ui)) calc(8px * var(--ui)) calc(11px * var(--ui)); border-radius: calc(11px * var(--ui)); background: var(--blue-t); color: #083A73; font-size: max(12px, calc(12px * var(--ui))); }
.ct-ref strong { font-variant-numeric: tabular-nums; }
.ct-ref a { color: #083A73; text-decoration: underline; text-underline-offset: 3px; }
.ct-ref button { margin-left: auto; min-height: calc(33px * var(--ui)); padding: 0 calc(9px * var(--ui)); border: 0; border-radius: calc(8px * var(--ui)); background: transparent; color: #083A73; font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; }
.ct-ref button:hover { background: rgba(13, 83, 161, .1); }

/* fields: real labels; the error state only after the visitor has interacted (:user-invalid) or after a send attempt ([aria-invalid=true]) */
.fld { display: grid; gap: calc(6px * var(--ui)); }
.ct-form :is(input, textarea, select, fieldset), .ct-summary, .ct-done, #ct-form-h { scroll-margin-top: calc(var(--sticky-top) + calc(18px * var(--ui))); }   /* never under the floating header when focus moves */
.fld > label, .fset > legend { font-size: max(12px, calc(12px * var(--ui))); font-weight: 600; color: var(--ink); padding: 0; }
.fld small, .fset legend small { font-weight: 500; color: var(--muted); font-size: max(12px, calc(12px * var(--ui))); }   /* giro 15b: <small> defaults to 83 % of the label → 10 px: pinned to the 12 px label floor */
.fld input, .fld textarea, .fld select { width: 100%; min-height: calc(39px * var(--ui)); padding: calc(9px * var(--ui)) calc(11px * var(--ui)); border-radius: var(--r-ctl); border: 1px solid #A9B8CB; background: #FFFFFF; color: var(--ink);
  font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.fld textarea { min-height: calc(111px * var(--ui)); resize: vertical; font-family: inherit; }
.fld input::placeholder, .fld textarea::placeholder { color: #5A687B; }
.fld :is(input, textarea, select):hover { border-color: #74839A; }
.fld :is(input, textarea, select):focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 83, 161, .22); background: #fff; }
.fld :is(input, textarea, select):user-invalid, .fld :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--error); background: #fff8f6; }
.fld :is(input, textarea, select):user-invalid:focus-visible, .fld :is(input, textarea, select)[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, .2); }
.fld__err { display: flex; align-items: flex-start; gap: calc(5px * var(--ui)); margin: 0; font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: var(--error); }
.fld__err::before { content: '!'; flex: none; width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); margin-top: 1px; border-radius: 50%; background: var(--error); color: #fff; font-size: max(12px, calc(12px * var(--ui))); font-weight: 700; line-height: calc(18px * var(--ui)); text-align: center; }
.fld__err[hidden] { display: none; }
.fld__help { margin: 0; font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); }

/* choice chips (reason, preferred contact): real radio inputs, visible focus, 44 px targets */
.fset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: calc(8px * var(--ui)); }
.chips { display: flex; flex-wrap: wrap; gap: calc(6px * var(--ui)); }
.chips label { position: relative; display: inline-flex; }
.chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: calc(33px * var(--ui)); padding: 0 calc(12px * var(--ui)); border-radius: calc(749px * var(--ui)); border: 1px solid #A9B8CB; background: #FFFFFF; font-size: max(12px, calc(12px * var(--ui))); font-weight: 500; color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.chips input:hover + span { border-color: #74839A; }
.chips input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.fset[aria-invalid="true"] .chips span { border-color: var(--error); }

/* checkbox rows (callback, consent) */
.check { display: flex; align-items: flex-start; gap: calc(9px * var(--ui)); min-height: calc(33px * var(--ui)); padding-top: calc(8px * var(--ui)); box-sizing: border-box; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.5; cursor: pointer; }   /* 44 px target for the whole label (critique B: the callback row was 23 px) */
.check input { flex: none; width: calc(17px * var(--ui)); height: calc(17px * var(--ui)); margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.check input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.ct-cb__slot { margin: calc(9px * var(--ui)) 0 0 calc(26px * var(--ui)); max-width: calc(210px * var(--ui)); }
.ct-cb__slot[hidden] { display: none; }

/* honeypot: out of sight and out of the tab order; never filled by a person */
.hp { position: absolute !important; left: calc(-7500px * var(--ui)); width: 1px; height: 1px; overflow: hidden; }

/* submit + states */
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(9px * var(--ui)) calc(14px * var(--ui)); }
.ct-send { display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--ui)); min-height: calc(39px * var(--ui)); padding: 0 calc(20px * var(--ui)); border: 0; border-radius: var(--r-ctl); background: var(--blue); color: #fff;
  font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 600; transition: background-color .15s ease; }
.ct-send:hover { background: var(--blue-h); }
.ct-send:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ct-send[aria-busy="true"] { background: var(--blue-a); cursor: progress; }
.ct-send__spin { display: none; width: calc(14px * var(--ui)); height: calc(14px * var(--ui)); border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: ct-spin .7s linear infinite; }
.ct-send[aria-busy="true"] .ct-send__spin { display: none; }   /* giro 27 (point 13): no spinner — the button says "Sending…" while busy */
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-note { margin: 0; font-size: max(12px, calc(12px * var(--ui))); color: var(--muted); }
.ct-summary { margin: 0; padding: calc(9px * var(--ui)) calc(11px * var(--ui)); border-radius: calc(9px * var(--ui)); background: #fff3f0; color: #7a1a12; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); font-weight: 500; }
.ct-summary[hidden] { display: none; }
.ct-summary:focus-visible { outline: 2px solid var(--error); outline-offset: 2px; }

/* demo confirmation (D-020: the enquiry channel is not decided — nothing is sent) */
.ct-done { margin-top: calc(18px * var(--ui)); padding: calc(17px * var(--ui)) calc(17px * var(--ui)) calc(15px * var(--ui)); border-radius: calc(14px * var(--ui)); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.ct-done:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ct-done h3 { margin: calc(8px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.25; font-weight: 600; }
.ct-done p { margin: calc(6px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); line-height: 1.55; color: var(--muted); }
.ct-done button { margin-top: calc(12px * var(--ui)); }
.ct-done:not([hidden]) { animation: ct-in .22s cubic-bezier(.23, 1, .32, 1); }
@keyframes ct-in { from { opacity: 0; transform: translateY(6px); } }

/* ---- pages in arrival (sell, areas, journal, about, legal pages) ---- */
.soon { padding: calc(24px * var(--ui)) var(--gx) calc(90px * var(--ui) * var(--sp)); min-height: 52vh; }
@media (min-width: 1024px) { .soon { padding-top: calc(var(--shell-h) + calc(54px * var(--ui))); } }
.soon h1 { margin: calc(8px * var(--ui)) 0 0; font-size: clamp(calc(24px * var(--ui)), calc(3.75vw * var(--ui)), calc(39px * var(--ui))); line-height: 1.06; font-weight: 600; letter-spacing: -.02em; }
.soon p { margin: calc(14px * var(--ui)) 0 0; font-size: max(var(--fs-body-min), calc(16px * var(--ui))); color: var(--muted); max-width: calc(420px * var(--ui)); }
.soon .ct-btn { margin-top: calc(21px * var(--ui)); }

@media (prefers-reduced-motion: reduce) { .ct-done:not([hidden]) { animation: none; } .ct-send__spin { animation-duration: 1.6s !important; } }

/* giro 27 (point 9): the front of the office (client photograph S-12) above its details */
.ct-photo { margin: 0 0 calc(14px * var(--ui)); aspect-ratio: 4 / 3; max-width: calc(420px * var(--ui)); border-radius: calc(14px * var(--ui)); overflow: hidden; background: var(--c-blue-t, #E8F1FB); }
.ct-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ======================= the forms, modern (27.10.2026, Daniel: "weak and classic") — Sell valuation + Contact ======================= */
.ct-panel { padding: calc(30px * var(--ui)) calc(26px * var(--ui)) calc(28px * var(--ui)); border: 0; border-radius: calc(22px * var(--ui)); background: #fff;
  box-shadow: 0 1px 2px rgba(14, 34, 64, .06), 0 18px 48px -16px rgba(14, 34, 64, .24); }
@media (min-width: 768px) { .ct-panel { padding: calc(36px * var(--ui)) calc(36px * var(--ui)) calc(34px * var(--ui)); } }
.ct-panel h2 { font-family: var(--f-brand); font-size: clamp(calc(24px * var(--ui)), calc(2.4vw * var(--ui)), calc(30px * var(--ui))); }
.ct-form { gap: calc(20px * var(--ui)); margin-top: calc(22px * var(--ui)); }
.ct-row2 { gap: calc(16px * var(--ui)); }
.fld { gap: calc(7px * var(--ui)); }
.fld > label, .fset > legend { font-size: max(13px, calc(14px * var(--ui))); font-weight: 600; color: #0E2240; margin-bottom: 2px; }
.fld small, .fset legend small { font-size: max(12px, calc(13px * var(--ui))); font-weight: 400; color: #6B7A90; }
.fld input, .fld textarea, .fld select { min-height: calc(52px * var(--ui)); padding: calc(13px * var(--ui)) calc(16px * var(--ui)); border: 1px solid #DCE5F0; border-radius: calc(12px * var(--ui));
  background: #F6F9FC; font-size: max(16px, calc(16px * var(--ui))); color: #0E2240; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.fld textarea { min-height: calc(130px * var(--ui)); line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: #8A98AB; }
.fld :is(input, textarea, select):hover { border-color: #B9C7D8; background: #fff; }
.fld :is(input, textarea, select):focus-visible { border-color: var(--c-blue, #0D53A1); background: #fff; box-shadow: 0 0 0 4px rgba(13, 83, 161, .14); }
.fld select { appearance: none; -webkit-appearance: none; padding-right: calc(44px * var(--ui)); cursor: pointer;
  background: #F6F9FC 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='%230D53A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right calc(16px * var(--ui)) center / calc(18px * var(--ui)); }
.fld select:hover, .fld select:focus-visible { background-color: #fff; }
/* choices: rounded tiles, a check mark when chosen */
.fset { gap: calc(10px * var(--ui)); }
.chips { gap: calc(8px * var(--ui)); }
.chips span { gap: calc(8px * var(--ui)); min-height: calc(46px * var(--ui)); padding: 0 calc(18px * var(--ui)); border: 1.5px solid #DCE5F0; border-radius: calc(12px * var(--ui)); background: #fff;
  font-size: max(15px, calc(15px * var(--ui))); font-weight: 500; color: #0E2240; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.chips input:hover + span { border-color: #A9B8CB; }
.chips input:checked + span { background: #EEF4FB; border-color: var(--c-blue, #0D53A1); color: var(--c-blue, #0D53A1); font-weight: 700; }
.chips input:checked + span::before { content: ''; width: calc(16px * var(--ui)); height: calc(16px * var(--ui)); flex: none; border-radius: 50%; background: var(--c-blue, #0D53A1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2.1 2.1 4.3-4.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 75%; }
/* consent: a custom box */
.check { gap: calc(12px * var(--ui)); align-items: center; padding-top: 0; font-size: max(15px, calc(15px * var(--ui))); color: #4A5B73; }
.check input { appearance: none; -webkit-appearance: none; width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); margin: 0; border: 1.5px solid #B9C7D8; border-radius: calc(6px * var(--ui)); background: #fff; display: grid; place-content: center; transition: background-color .15s ease, border-color .15s ease; }
.check input:checked { background: var(--c-blue, #0D53A1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2.1 2.1 4.3-4.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 80%; border-color: var(--c-blue, #0D53A1); }
.check a { color: var(--c-blue, #0D53A1); }
/* send: the main action of the page */
.ct-actions { margin-top: calc(4px * var(--ui)); }
.ct-send { min-height: calc(56px * var(--ui)); padding: 0 calc(28px * var(--ui)); border-radius: calc(14px * var(--ui)); background: var(--c-cta, #0D53A1); font-family: var(--f-brand); font-size: calc(19px * var(--ui)); font-weight: 700;
  box-shadow: 0 10px 24px -10px rgba(13, 83, 161, .7); transition: background-color .15s ease, transform .15s ease; }
.ct-send::after { content: '→'; font-family: var(--f-text); font-weight: 400; transition: transform .15s ease; }
@media (hover: hover) and (pointer: fine) { .ct-send:hover { background: var(--c-cta-h, #0A4589); } .ct-send:hover::after { transform: translateX(3px); } }
@media (max-width: 767px) { .ct-send { width: 100%; } }
.sl-photos { margin: 0; padding: calc(12px * var(--ui)) calc(14px * var(--ui)); border-radius: calc(12px * var(--ui)); background: #F2F6FB; font-size: max(14px, calc(14px * var(--ui))); color: #4A5B73; }
@media (prefers-reduced-motion: reduce) { .fld :is(input, textarea, select), .chips span, .check input, .ct-send, .ct-send::after { transition: none; } }
.fld input, .fld textarea { background: #fff; }   /* every field white with a soft border: the tinted ones read as disabled next to the white selects */
.fld select { background-color: #fff; }