/* DNDB lead modal, shared by the funnel pages.
   =====================================================================
   One popup, three states, in this order and never skipped:

     1. minimum lead form   (context field + the Contact Us required set)
     2. thank-you           (the lead is already sent; nothing below is required)
     3. optional brief      (the six extra questions the main form asks)

   The markup is built by assets/js/lead-modal.js. This file only styles it,
   from the site's own tokens (--t1, --m1, --m4, --m6, --c3, --sys, --bg),
   which index.html and preview.css define identically. Nothing here depends
   on a page class, so the same pair of files serves the Website Redesign
   page today and the Website Design and Development page when it exists.

   Buttons carry `lm-btn` for a self-contained base AND the page's `.btn`
   classes, so where the shine button exists it takes over unchanged.
   ===================================================================== */

.lm-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
    justify-content:center; padding:16px; background:rgba(20,22,34,0.42);
    opacity:0; transition:opacity .22s ease; }
.lm-overlay.is-open { opacity:1; }
.lm-overlay[hidden] { display:none; }

.lm-dialog { position:relative; width:min(640px, 100%); max-height:calc(100dvh - 32px);
    overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:rgba(255,255,255,0.97); color:var(--t1, #222331); border-radius:20px;
    padding:36px 40px 32px;
    box-shadow:0 30px 80px rgba(28,43,74,0.22), 0 4px 18px rgba(28,43,74,0.08);
    transform:translateY(12px); transition:transform .22s ease; }
.lm-overlay.is-open .lm-dialog { transform:none; }

.lm-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border:0;
    border-radius:10px; background:transparent; cursor:pointer; color:var(--m1, #6A6D7C);
    display:flex; align-items:center; justify-content:center; }
.lm-close:hover { background:rgba(181,193,232,0.18); color:var(--t1, #222331); }
.lm-close:focus-visible, .lm-btn:focus-visible, .lm-link:focus-visible, .lm-pill:focus-visible {
    outline:2px solid var(--m6, #B5C1E8); outline-offset:3px; }
.lm-close svg { width:14px; height:14px; }

.lm-eyebrow { display:inline-block; font-family:var(--sys); font-weight:600; font-size:12px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--m3, #60638A); }
.lm-h:focus { outline:none; }
.lm-h { font-family:var(--sys); font-weight:800; font-size:30px; line-height:1.05;
    letter-spacing:-0.03em; color:var(--t1, #222331); margin:10px 0 0; text-wrap:balance; }
.lm-sub { font-family:'Roboto', sans-serif; font-size:14px; line-height:22px;
    color:var(--m1, #6A6D7C); margin:12px 0 0; text-wrap:pretty; }

/* The person who reads the request: photo, name and role on one line, what
   happens to the request under it. Also used as static markup in the
   closing panel of the Redesign page, so the two say the same thing. */
.lm-person { display:flex; gap:12px; align-items:flex-start; margin:16px 0 0; text-align:left; }
.lm-person-photo { width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.lm-person-t { min-width:0; }
.lm-person-who { margin:0; font-family:var(--sys); font-size:14px; line-height:20px; color:var(--t1, #222331); }
.lm-person-name { font-weight:600; }
.lm-person-role { font-family:'Roboto', sans-serif; font-size:12px; color:var(--m4, #9EA1AD); margin-left:8px; }
.lm-person-line { margin:3px 0 0; font-family:'Roboto', sans-serif; font-size:13px; line-height:20px; color:var(--m1, #6A6D7C); }
.lm-form { margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.lm-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.lm-fw { display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; }
/* `display:flex` above beats the browser's own [hidden] rule, so the
   conditional WhatsApp field stayed on screen with hidden set on it. */
.lm-fw[hidden] { display:none; }
.lm-label { font-family:var(--sys); font-size:12px; font-weight:600; color:var(--m1, #6A6D7C); }
.lm-label .lm-opt { font-weight:400; color:var(--m4, #9EA1AD); }

/* The text field recipe from .contacts-input / .field: gradient fill, hairline,
   two-layer shadow, radius 10, Roboto. */
.lm-field { width:100%; height:44px; padding:0 14px; border-radius:10px;
    background:linear-gradient(190.57deg, rgba(255,255,255,0.9) 19.25%, rgba(255,255,255,0.71) 54.39%, rgba(255,255,255,0.87) 90.02%);
    border:1px solid #E6E5EC;
    box-shadow:0px 12px 32px rgba(12,12,32,0.05), 0px 3px 8px rgba(12,12,32,0.03);
    font-family:'Roboto', sans-serif; font-size:14px; color:var(--t1, #222331); outline:none;
    appearance:none; -webkit-appearance:none; }
/* The hint is smaller than the answer. A placeholder is a prompt and it
   competes with real content at the same size, which reads as if the field
   were already filled in; the value the visitor types stays at 14px. */
.lm-field::placeholder { color:var(--m1, #6A6D7C); opacity:1; font-size:12.5px; }
textarea.lm-field::placeholder { font-size:12.5px; line-height:19px; }
select.lm-field.is-empty { font-size:12.5px; }
select.lm-field { font-size:14px; }
.lm-field:focus { border-color:var(--m6, #B5C1E8); }
textarea.lm-field { height:auto; min-height:104px; padding:12px 14px; resize:vertical; line-height:20px; }
select.lm-field { padding-right:38px; cursor:pointer;
    background-image:linear-gradient(190.57deg, rgba(255,255,255,0.9) 19.25%, rgba(255,255,255,0.71) 54.39%, rgba(255,255,255,0.87) 90.02%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 7L11 1' stroke='%2360638A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat, no-repeat; background-position:0 0, right 14px center; background-size:100% 100%, 12px 8px; }
select.lm-field:invalid, select.lm-field.is-empty { color:var(--m1, #6A6D7C); }
/* Desktop: the native select stays in the form (name, value, change) and a
   styled trigger + listbox draws over it, the home page's .contacts-select-ui
   recipe. Phones keep the bare native select and the OS picker. */
.lm-fw.is-enhanced select.lm-field { position:absolute; inset:0; opacity:0; pointer-events:none; }
.lm-fw.is-enhanced { position:relative; }
.lm-select-ui { display:flex; align-items:center; text-align:left; cursor:pointer; padding-right:38px;
    font-size:14px; color:var(--t1, #222331); }
.lm-select-ui.is-empty { color:var(--m1, #6A6D7C); font-size:12.5px; }
.lm-select-ui:focus-visible { outline:2px solid var(--m6, #B5C1E8); outline-offset:2px; }
.lm-fw.is-open .lm-select-ui { border-color:var(--m6, #B5C1E8); }
.lm-select-list { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30;
    margin:0; padding:8px; list-style:none; border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 100%);
    backdrop-filter:blur(36px) saturate(140%); -webkit-backdrop-filter:blur(36px) saturate(140%);
    box-shadow:0 -1px 0 rgba(120,130,160,0.18) inset, 1px 0 0 rgba(255,255,255,0.4) inset,
        0 10px 44px rgba(28,43,74,0.14), 0 2px 10px rgba(28,43,74,0.06);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .18s, transform .18s, visibility .18s; }
.lm-fw.is-open .lm-select-list { opacity:1; visibility:visible; transform:none; }
.lm-fw.is-open { z-index:5; }
.lm-select-list li { display:flex; align-items:center; min-height:38px; padding:9px 14px; border-radius:10px;
    cursor:pointer; font-family:var(--sys); font-weight:400; font-size:15px; letter-spacing:-0.01em;
    font-variant:all-small-caps; color:var(--t1, #222331); transition:background .2s, color .2s; }
.lm-select-list li:hover, .lm-select-list li.is-focused { background:rgba(181,193,232,0.18); }
.lm-select-list li[aria-selected="true"] { background:rgba(181,193,232,0.18); font-weight:600; }
.lm-field.is-error { border-color:#D90808; }
.lm-err { position:absolute; right:12px; top:12px; font-family:'Roboto', sans-serif; font-size:12px;
    color:#D90808; pointer-events:none; }
textarea.lm-field.is-error + .lm-err { top:10px; }

/* Honeypot: off screen, out of the tab order. */
.lm-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }

.lm-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:8px; }
.lm-btn { display:inline-flex; align-items:center; justify-content:center; height:44px;
    padding:0 26px; border:0; border-radius:10px; background:#0d0d16; color:#fff;
    font-family:var(--sys); font-size:14px; font-weight:400; cursor:pointer; white-space:nowrap; }
.lm-btn:disabled { opacity:.6; cursor:default; }
.lm-btn.btn { height:44px; }
.lm-link { background:none; border:0; padding:0; cursor:pointer; font-family:'Roboto', sans-serif;
    font-size:13px; color:var(--m1, #6A6D7C); text-decoration:underline; text-underline-offset:3px; }
.lm-link:hover { color:var(--t1, #222331); }
.lm-note { font-family:'Roboto', sans-serif; font-size:12px; line-height:18px; color:var(--m4, #9EA1AD); margin:0; }
.lm-note a { color:inherit; }
.lm-alert { margin:0; font-family:'Roboto', sans-serif; font-size:13px; line-height:1.45; color:#D90808; }
.lm-alert a { color:inherit; }

/* Thank-you state */
.lm-done { text-align:left; }
.lm-done .lm-h { font-size:34px; }
.lm-tick { width:44px; height:44px; border-radius:12px; background:rgba(93,143,162,0.14);
    display:flex; align-items:center; justify-content:center; color:#5D8FA2; margin-bottom:16px; }
.lm-tick svg { width:20px; height:20px; }
.lm-divider { border:0; border-top:1px solid var(--c3, #D6DDE4); margin:26px 0 20px; }
/* Final state, after step 2 (Viktor, 2026-09-22): one centred block, the
   site's tick on the accent tile, heading, one line, and Close. Nothing else. */
.lm-final { display:flex; flex-direction:column; align-items:center; text-align:center; padding:12px 0 4px; }
.lm-final .lm-tick { width:64px; height:64px; border-radius:20px; margin:0 0 18px;
    background:linear-gradient(135deg, rgba(113,181,201,0.28) 0%, rgba(93,143,162,0.16) 100%);
    box-shadow:inset 0 0 0 1px rgba(93,143,162,0.35), 0 12px 32px rgba(12,12,32,0.06); }
.lm-final .lm-tick svg { width:28px; height:28px; }
.lm-final .lm-h { font-size:30px; margin:0; }
.lm-final .lm-sub { margin:10px 0 0; max-width:34ch; }
.lm-final .lm-actions { margin-top:24px; width:100%; justify-content:center; }
.lm-final .lm-btn { min-width:200px; }

/* Optional brief: pills for the multi-choice questions. */
/* Three equal columns, not a wrapping flex row: 3 x 1fr plus two 8px gaps
   is exactly the width of the column, so the options line up with the field
   beside them instead of ending wherever their labels happen to end. */
.lm-pills { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.lm-pill { height:34px; padding:0 8px; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:10px; border:1px solid #E6E5EC;
    background:rgba(255,255,255,0.8); font-family:var(--sys); font-size:13px; color:var(--t1, #222331);
    cursor:pointer; }
.lm-pill:hover { background:rgba(181,193,232,0.16); }
.lm-pill[aria-pressed="true"] { background:#0d0d16; border-color:#0d0d16; color:#fff; }

/* A question above its field rather than inside it. The long ones could not
   fit a placeholder in a half-width column, and the browser clipped the last
   letters of "What country are you currently based in?" rather than wrapping,
   because a placeholder never wraps. As a label it wraps, and it stays on
   screen once the field has an answer in it. */
.lm-qlabel { font-family:var(--sys); font-size:12px; font-weight:600; line-height:16px;
    color:var(--m1, #6A6D7C); }

/* Checkboxes: a 20px box with a 44px tap target around the whole row. */
.lm-checks { display:flex; flex-direction:column; gap:10px; margin:2px 0 4px; }
.lm-check { display:flex; align-items:center; gap:10px; min-height:34px; }
.lm-check input { appearance:none; -webkit-appearance:none; flex:0 0 auto;
    width:20px; height:20px; margin:0; border:1px solid #D8D7E0; border-radius:6px;
    background:#fff; cursor:pointer; position:relative; transition:background .15s, border-color .15s; }
.lm-check input:checked { background:#0d0d16; border-color:#0d0d16; }
.lm-check input:checked::after { content:''; position:absolute; left:6px; top:2px;
    width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.lm-check input:focus-visible { outline:2px solid var(--m6, #B5C1E8); outline-offset:3px; }
.lm-check label { font-family:'Roboto', sans-serif; font-size:14px; line-height:20px;
    color:var(--t1, #222331); cursor:pointer; padding:7px 0; }

/* Step 2 header: the tick and "Thank you." on the left, the one line that
   explains the step on the right, on the same two-column grid as the fields
   under it. It used to be a stacked block plus a horizontal rule, which is
   three elements' worth of height spent saying the step is optional. */
.lm-done-row { display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
    gap:10px 28px; align-items:center; }
.lm-done-row .lm-tick { margin-bottom:10px; }
.lm-done-row .lm-h { margin:0; }
.lm-done-r { margin:0; max-width:38ch; }

/* Both checkboxes on one line where there is room for them. */
.lm-checks-row { flex-direction:row; flex-wrap:wrap; gap:10px 28px; align-items:center; }

/* Primary and secondary side by side. The secondary is still secondary:
   no fill, no border, quieter colour, and it does not stretch. */
.lm-actions-pair { display:flex; flex-direction:row; align-items:center;
    justify-content:flex-start; gap:8px; flex-wrap:wrap; margin-top:20px; }
.lm-actions-pair .lm-skip { margin-top:0; }

/* Step 2 actions: centred, and the secondary one given room. It was sitting
   directly under the primary, close enough to be mistaken for part of it. */
.lm-actions-center { flex-direction:column; align-items:center; gap:0; margin-top:18px; }
.lm-actions-center .lm-btn { min-width:280px; }
.lm-skip { margin-top:24px; background:none; border:0; padding:12px 20px; cursor:pointer;
    font-family:'Roboto', sans-serif; font-size:13px; color:var(--m4, #9EA1AD);
    text-decoration:none; border-radius:8px; transition:color .15s, background .15s; }
.lm-skip:hover { color:var(--t1, #222331); background:rgba(181,193,232,0.16); }
.lm-skip:focus-visible { outline:2px solid var(--m6, #B5C1E8); outline-offset:3px; }

@media (prefers-reduced-motion: reduce) {
    .lm-overlay, .lm-dialog { transition:none; }
}

/* Phone: a sheet that fills the viewport and scrolls inside itself. */
@media (max-width: 640px) {
    .lm-overlay { padding:0; align-items:stretch; }
    .lm-dialog { width:100%; max-width:100%; max-height:100dvh; height:100dvh; border-radius:0;
        padding:max(18px, env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom)); }
    .lm-close { top:max(8px, env(safe-area-inset-top)); right:8px; width:40px; height:40px; }
    /* 16px in every field: iOS Safari zooms the page on focus for anything
       smaller and does not zoom back out when the sheet closes, which is what
       left the page enlarged after Close (Viktor, 2026-09-22). The hint stays
       one step smaller, a placeholder does not trigger the zoom. */
    .lm-field, select.lm-field, select.lm-field.is-empty, textarea.lm-field { font-size:16px; }
    .lm-field::placeholder, textarea.lm-field::placeholder { font-size:15px; }
    .lm-field { height:46px; }
    textarea.lm-field { min-height:88px; }
    .lm-h { font-size:24px; margin-top:8px; }
    .lm-sub { margin-top:8px; font-size:14px; line-height:20px; }
    .lm-form { margin-top:14px; gap:10px; }
    .lm-fw { gap:5px; }
    .lm-qlabel, .lm-label { font-size:12px; line-height:14px; }
    .lm-done .lm-h { font-size:24px; }
    .lm-done-row .lm-tick { width:36px; height:36px; margin-bottom:0; border-radius:10px; }
    .lm-done-row .lm-tick svg { width:16px; height:16px; }
    .lm-done-row { grid-template-columns:auto minmax(0,1fr); gap:0 12px; align-items:center; }
    .lm-done-row .lm-h { grid-column:2; }
    .lm-done-r { grid-column:1 / -1; margin-top:6px; max-width:none; }
    .lm-pill { height:40px; font-size:14px; }
    .lm-actions-pair { margin-top:12px; }
    .lm-actions-pair .lm-skip { margin-top:8px; padding:12px 20px; }
    .lm-final { padding:8vh 0 0; }
    .lm-final .lm-h { font-size:26px; }
    .lm-row { grid-template-columns:minmax(0,1fr); }
    .lm-actions { flex-direction:column; align-items:stretch; }
    .lm-btn { width:100%; }
    .lm-actions-center { align-items:stretch; }
    .lm-actions-center .lm-btn { min-width:0; width:100%; }
    /* The pair stacks on the phone: two buttons of that length do not share
       375px, and the secondary keeps its own height rather than a button's. */
    .lm-actions-pair { flex-direction:column; align-items:stretch; gap:0; }
    .lm-actions-pair .lm-btn { width:100%; }
    .lm-actions-pair .lm-skip { margin-top:16px; align-self:center; }
    .lm-checks-row { flex-direction:column; align-items:stretch; gap:0; margin:0; }
    /* The label wraps to two lines on a narrow phone; 44px would cut it. */
    .lm-actions-center .lm-btn.btn { height:auto; min-height:48px; padding:12px 20px;
        white-space:normal; line-height:1.25; }
    .lm-skip { margin-top:22px; align-self:center; padding:14px 20px; }
    /* Tap targets first: the checkbox row is a full line to hit, not a 20px
       square, and the field height matches the rest of the form. */
    .lm-check { min-height:44px; }
    .lm-check label { padding:10px 0; font-size:15px; }
}