/* Talk to us (talk/). Section grammar (14 Oct 2026): the heading and lede on paper, then one orange tray (the call to
   act) holding the two-step form as a white card, with "Good to know" as small white cards and a photo beside it; then
   Keep exploring. The form itself (fields, names, chips, steps, validation, script) is unchanged: only its frame moved. */
body{background:var(--white)}
.dm{position:relative;padding:184px 0 0}
.dm-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:end;margin-bottom:40px}
.dm-intro h1{font:600 72px/1.02 var(--sans);letter-spacing:-.035em;max-width:13ch;text-wrap:balance}
.dm-intro .lead{max-width:460px;font-size:18px;line-height:27px;color:var(--muted)}
.dm-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
.dm-left{position:relative;min-width:0;align-self:start;background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.dm-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.dm-know{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dm-know li.card{display:block;padding:18px 22px;font:400 15px/22px var(--sans);color:var(--ink)}
.dm-know a{color:var(--ink);border-bottom:1px solid var(--brand)}
.dm-pic{flex:1;padding:12px}
.dm-pic .frame{margin:0;flex:1;display:flex}
.dm-pic .ph{flex:1;min-height:200px;border-radius:0}
.dm-pic .frame>img{display:block;flex:1;width:100%;min-height:200px;object-fit:cover;border-radius:0}
.dm-form{padding:32px}
.dm-form .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}
.f{display:flex;flex-direction:column}
.f label{font:500 14px/14px var(--sans);margin-bottom:12px}
.f label em{color:#B21A3F;font-style:normal;margin-left:2px}
.f input,.f select{height:56px;border:1px solid #E0DEDC;border-radius:12px;background:#F8F7F5;padding:12px 17.6px;font:400 16px/24px var(--sans);color:#1D1D1D;width:100%}
.f select{appearance:none;-webkit-appearance:none;background:#F8F7F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer}
.f input::placeholder{color:#9A968E}
.f input:focus,.f select:focus{outline:2px solid var(--blue);outline-offset:0;background-color:#fff}
.f [aria-invalid="true"]{border-color:#B21A3F}
.f .err{min-height:33px;padding-top:6px;font:400 14px/18.2px var(--sans);color:#B21A3F}
.steps{display:flex;gap:6px;margin-bottom:24px}
.steps i{height:4px;flex:1;border-radius:2px;background:#E6E3DC}
.steps i.on{background:#1D1D1D}
.dm-form .acts{display:flex;gap:8px;margin-top:0}
.dm-form .back{width:64px;height:48px;border:1px solid #E0DEDC;border-radius:12px;background:var(--oat);display:grid;place-items:center;cursor:pointer}
.dm-form .back:disabled{opacity:.5;cursor:default}
.dm-form .next{height:48px;padding:0 32px;border:0;border-radius:12px;background:var(--ink);color:var(--white);font:500 16px/24px var(--sans);cursor:pointer}
.dm-done{padding:32px}
.dm-done .tick{width:56px;height:56px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.dm-done h2{font:600 32px/36px var(--sans);letter-spacing:-.8px;margin-top:20px}
.dm-done p{margin-top:12px;font-size:18px;line-height:26px;color:rgba(27,26,24,.75);max-width:420px}
@media (max-width:1000px){.dm-grid{grid-template-columns:minmax(0,1fr)}.dm-pic{display:none}}
@media (max-width:900px){.dm{padding-top:136px}.dm-intro{grid-template-columns:minmax(0,1fr);gap:20px;margin-bottom:28px}.dm-intro h1{font-size:46px}}
@media (max-width:640px){
  .dm-form,.dm-done{padding:28px 20px}
  .dm-intro h1{font-size:40px}
  .dm-intro .lead{font-size:16px;line-height:24px}
  .dm-know li.card{padding:16px 18px}
  .dm-form .grid{grid-template-columns:1fr}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dm-form fieldset[hidden]{display:none}

/* colour with meaning (14 Oct 2026): the form stays calm (ink, oat, white); each topic chip carries the REKA division
   of the service or product it names, and shows it only when hovered or chosen: automation kinetik, reporting and
   decisions heuristik, PLExyz spaces harmonik, products, partnerships and Managed AI orange. "Something else" stays ink.
   The progress line takes the chosen topic's colour. Focus rings stay blue. */
.dm-form .rchip[data-tone]:hover input:not(:checked)+.c{background:var(--t-bg)}
.dm-form .rchip[data-tone] input:checked+.c{background:var(--t-btn);color:var(--t-btn-fg)}
.dm-form .opts .rchip .c{transition:background .2s,color .2s,transform .3s var(--ease)}
.dm-form .rchip input:checked+.c{transform:translateY(-1px)}
.steps i{transition:background .35s}
.dm-form:has(.rchip[data-tone=orange] input:checked) .steps i.on{background:var(--brand)}
.dm-form:has(.rchip[data-tone=kinetik] input:checked) .steps i.on{background:var(--kinetik)}
.dm-form:has(.rchip[data-tone=heuristik] input:checked) .steps i.on{background:var(--heuristik)}
.dm-form:has(.rchip[data-tone=harmonik] input:checked) .steps i.on{background:var(--harmonik)}
.dm-form:has(.rchip[data-tone=esoterik] input:checked) .steps i.on{background:var(--esoterik-ink)}
@media (prefers-reduced-motion:reduce){.dm-form .rchip input:checked+.c{transform:none}}
/* Phones (14 Oct 2026): the photo beside the form shows on narrow screens too, full width at 16:9, straight after the
   form and before "Good to know", so the page has a picture before Keep exploring. */
@media (max-width:1000px){.dm-pic{display:flex;order:-1}.dm-pic .ph,.dm-pic .frame>img{min-height:0;aspect-ratio:16/9}}