/* NDM Sample Request Form — v1.0.0 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --ndm-coal:    #07111f;
  --ndm-ink:     #111827;
  --ndm-navy:    #1a3d6e;
  --ndm-mid:     #2563a8;
  --ndm-sky:     #4a9de0;
  --ndm-pale:    #eef4fb;
  --ndm-offwhite:#f5f7fb;
  --ndm-white:   #ffffff;
  --ndm-gold:    #c8922a;
  --ndm-glt:     #e8b84b;
  --ndm-terra:   #c86040;
  --ndm-sage:    #3a7a58;
  --ndm-muted:   #5a6a82;
  --ndm-border:  rgba(26,61,110,0.13);
  --ndm-r:       10px;
  --ndm-rl:      16px;
}

.ndm-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.ndm-wrap { font-family: 'Outfit', sans-serif; background: var(--ndm-offwhite); color: var(--ndm-ink); display: grid; grid-template-columns: 380px 1fr; min-height: 100vh; width: 100%; }

/* LEFT PANEL */
.ndm-side { background: var(--ndm-coal); padding: 48px 40px; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.ndm-side::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.016) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.016) 1px,transparent 1px); background-size: 44px 44px; pointer-events: none; }
.ndm-side::after { content: ''; position: absolute; bottom: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle,rgba(37,99,168,0.18) 0%,transparent 70%); pointer-events: none; }
.ndm-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; position: relative; z-index: 1; }
.ndm-brand img { height: 44px; width: auto; display: block; }
.ndm-brand-name { font-size: 13px; font-weight: 600; color: white; line-height: 1.2; }
.ndm-brand-sub { font-size: 9px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.3); }
.ndm-side-heading { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px,3vw,38px); font-weight: 700; line-height: 1.12; color: white; margin-bottom: 12px; position: relative; z-index: 1; }
.ndm-side-heading em { font-style: italic; color: var(--ndm-sky); }
.ndm-side-sub { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.45); margin-bottom: 36px; position: relative; z-index: 1; }
.ndm-steps { display: flex; flex-direction: column; gap: 0; position: relative; z-index: 1; flex: 1; }
.ndm-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; position: relative; }
.ndm-step:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 44px; bottom: 0; width: 1px; background: rgba(255,255,255,0.08); }
.ndm-sn { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: all .3s; }
.ndm-sn.done { background: var(--ndm-sage); color: white; }
.ndm-sn.active { background: var(--ndm-gold); color: var(--ndm-coal); }
.ndm-sn.pending { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.3); }
.ndm-sl { font-size: 13.5px; font-weight: 600; line-height: 1.2; margin-bottom: 2px; }
.ndm-sl.active-text { color: white; }
.ndm-sl.done-text { color: rgba(255,255,255,0.55); }
.ndm-sl.pending-text { color: rgba(255,255,255,0.25); }
.ndm-step-detail { font-size: 11.5px; color: rgba(255,255,255,0.3); }
.ndm-trust { display: flex; flex-direction: column; gap: 10px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.06); position: relative; z-index: 1; }
.ndm-trust-item { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,0.4); }
.ndm-trust-icon { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255,255,255,0.6); }

/* FORM AREA */
.ndm-form-area { padding: 48px 56px; background: var(--ndm-offwhite); }
.ndm-progress-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.ndm-progress-track { flex: 1; height: 4px; background: rgba(26,61,110,0.1); border-radius: 2px; overflow: hidden; }
.ndm-progress-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--ndm-mid),var(--ndm-sky)); transition: width .5s cubic-bezier(.4,0,.2,1); }
.ndm-progress-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ndm-muted); white-space: nowrap; }
.ndm-section { display: none; animation: ndmFade .35s ease; }
.ndm-section.active { display: block; }
@keyframes ndmFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ndm-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--ndm-mid); margin-bottom: 10px; }
.ndm-tag::before { content: ''; width: 20px; height: 2px; background: var(--ndm-mid); border-radius: 1px; }
.ndm-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px,3vw,34px); font-weight: 700; color: var(--ndm-ink); line-height: 1.1; margin-bottom: 8px; }
.ndm-title em { font-style: italic; color: var(--ndm-mid); }
.ndm-desc { font-size: 14px; color: var(--ndm-muted); line-height: 1.65; margin-bottom: 36px; max-width: 560px; }
.ndm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.ndm-group { display: flex; flex-direction: column; gap: 6px; }
.ndm-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ndm-muted); }
.ndm-label .req { color: var(--ndm-terra); margin-left: 2px; }
.ndm-input, .ndm-select, .ndm-textarea { width: 100%; background: var(--ndm-white); border: 1.5px solid var(--ndm-border); border-radius: var(--ndm-r); padding: 12px 14px; font-size: 14px; color: var(--ndm-ink); font-family: 'Outfit', sans-serif; outline: none; transition: all .22s; -webkit-appearance: none; appearance: none; }
.ndm-input:focus, .ndm-select:focus, .ndm-textarea:focus { border-color: var(--ndm-mid); box-shadow: 0 0 0 3px rgba(37,99,168,0.08); }
.ndm-input::placeholder, .ndm-textarea::placeholder { color: rgba(90,106,130,0.5); }
.ndm-input.error, .ndm-select.error { border-color: var(--ndm-terra); }
.ndm-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a6a82' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; }
.ndm-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.ndm-field-error { font-size: 11.5px; color: var(--ndm-terra); margin-top: 4px; display: none; }
.ndm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ndm-chip-input { display: none; }
.ndm-chip-label { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 100px; border: 1.5px solid var(--ndm-border); font-size: 13px; font-weight: 500; color: var(--ndm-muted); cursor: pointer; transition: all .2s; user-select: none; background: var(--ndm-white); }
.ndm-chip-label svg { width: 14px; height: 14px; flex-shrink: 0; }
.ndm-chip-label:hover { border-color: var(--ndm-mid); color: var(--ndm-ink); }
.ndm-chip-input:checked + .ndm-chip-label { background: var(--ndm-navy); border-color: var(--ndm-navy); color: white; }
.ndm-swatch-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ndm-swatch-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.ndm-swatch-box { width: 44px; height: 44px; border-radius: 8px; border: 2px solid transparent; transition: all .2s; display: flex; align-items: center; justify-content: center; }
.ndm-swatch-box:hover { transform: scale(1.08); }
.ndm-swatch-radio { display: none; }
.ndm-swatch-name { font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--ndm-muted); text-align: center; }
.ndm-range-val { font-size: 13px; font-weight: 700; color: var(--ndm-mid); text-align: center; margin-bottom: 8px; }
.ndm-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--ndm-muted); margin-top: 4px; }
.ndm-range { width: 100%; -webkit-appearance: none; appearance: none; height: 5px; border-radius: 3px; background: linear-gradient(to right,var(--ndm-mid) 0%,var(--ndm-mid) var(--pct,25%),rgba(26,61,110,0.15) var(--pct,25%),rgba(26,61,110,0.15) 100%); outline: none; cursor: pointer; }
.ndm-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ndm-mid); border: 2.5px solid white; box-shadow: 0 2px 8px rgba(37,99,168,0.3); cursor: pointer; transition: transform .15s; }
.ndm-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ndm-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--ndm-mid); border: 2.5px solid white; cursor: pointer; }
.ndm-upload { border: 2px dashed rgba(37,99,168,0.25); border-radius: var(--ndm-rl); background: var(--ndm-white); padding: 32px; text-align: center; cursor: pointer; transition: all .25s; position: relative; }
.ndm-upload:hover { border-color: var(--ndm-mid); background: var(--ndm-pale); }
.ndm-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ndm-upload-icon { width: 40px; height: 40px; color: var(--ndm-muted); margin: 0 auto 10px; display: block; opacity: 0.5; }
.ndm-upload-title { font-size: 14px; font-weight: 600; color: var(--ndm-ink); margin-bottom: 4px; }
.ndm-upload-sub { font-size: 12px; color: var(--ndm-muted); }
.ndm-upload-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; }
.ndm-file-chip { background: var(--ndm-pale); border: 1px solid var(--ndm-border); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 500; color: var(--ndm-mid); display: flex; align-items: center; gap: 6px; }
.ndm-file-rm { cursor: pointer; color: var(--ndm-terra); font-size: 14px; line-height: 1; background: none; border: none; padding: 0; }
.ndm-card { background: var(--ndm-white); border: 1px solid var(--ndm-border); border-radius: var(--ndm-rl); overflow: hidden; margin-bottom: 20px; }
.ndm-card-hd { background: var(--ndm-navy); padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.ndm-card-hd svg { width: 18px; height: 18px; color: rgba(255,255,255,0.6); flex-shrink: 0; }
.ndm-card-hd-title { font-size: 13.5px; font-weight: 700; color: white; }
.ndm-card-body { padding: 16px 20px; }
.ndm-sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ndm-border); font-size: 13.5px; }
.ndm-sum-row:last-child { border-bottom: none; }
.ndm-sum-key { color: var(--ndm-muted); font-weight: 500; }
.ndm-sum-val { color: var(--ndm-ink); font-weight: 600; text-align: right; max-width: 60%; }
.ndm-sum-val.hl { color: var(--ndm-mid); }
.ndm-terms { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--ndm-pale); border-radius: var(--ndm-r); border: 1px solid var(--ndm-border); margin-bottom: 8px; cursor: pointer; }
.ndm-terms-check { width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--ndm-border); flex-shrink: 0; margin-top: 1px; -webkit-appearance: none; appearance: none; cursor: pointer; transition: all .2s; }
.ndm-terms-check:checked { background: var(--ndm-mid); border-color: var(--ndm-mid); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
.ndm-terms-text { font-size: 13px; color: var(--ndm-muted); line-height: 1.6; }
.ndm-terms-text a { color: var(--ndm-mid); text-decoration: none; }
.ndm-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.ndm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px; border-radius: 100px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .28s; font-family: 'Outfit', sans-serif; border: none; line-height: 1; text-decoration: none; }
.ndm-btn svg { width: 16px; height: 16px; }
.ndm-btn-primary { background: var(--ndm-mid); color: white; }
.ndm-btn-primary:hover { background: var(--ndm-navy); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,99,168,0.3); }
.ndm-btn-primary:disabled { background: rgba(37,99,168,0.35); cursor: not-allowed; transform: none; box-shadow: none; }
.ndm-btn-ghost { background: transparent; color: var(--ndm-muted); border: 1.5px solid var(--ndm-border); }
.ndm-btn-ghost:hover { border-color: rgba(37,99,168,0.3); color: var(--ndm-ink); }
.ndm-btn-submit { background: var(--ndm-gold); color: var(--ndm-coal); }
.ndm-btn-submit:hover { background: var(--ndm-glt); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(200,146,42,0.35); }
.ndm-btn-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.ndm-success { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 40px; min-height: 60vh; }
.ndm-success.show { display: flex; }
.ndm-success-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(58,122,88,0.1); border: 2px solid rgba(58,122,88,0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; animation: ndmPop .5s cubic-bezier(.175,.885,.32,1.275); }
.ndm-success-icon svg { width: 40px; height: 40px; color: var(--ndm-sage); }
@keyframes ndmPop { from { transform: scale(0); } to { transform: scale(1); } }
.ndm-success-title { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 700; color: var(--ndm-ink); margin-bottom: 12px; }
.ndm-success-title em { font-style: italic; color: var(--ndm-sage); }
.ndm-ref { background: var(--ndm-pale); border: 1px solid var(--ndm-border); border-radius: var(--ndm-r); padding: 10px 24px; font-size: 20px; font-weight: 700; letter-spacing: 3px; color: var(--ndm-mid); margin: 16px 0 24px; font-family: monospace; }
.ndm-success-desc { font-size: 15px; color: var(--ndm-muted); line-height: 1.75; max-width: 440px; margin-bottom: 32px; }
.ndm-mini-steps { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.ndm-msm { background: var(--ndm-white); border: 1px solid var(--ndm-border); border-radius: var(--ndm-r); padding: 12px 16px; font-size: 12px; font-weight: 600; color: var(--ndm-muted); display: flex; align-items: center; gap: 7px; }
.ndm-msm-num { width: 20px; height: 20px; border-radius: 50%; background: var(--ndm-navy); color: white; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@media(max-width:1000px){ .ndm-wrap { grid-template-columns: 1fr; } .ndm-side { padding: 36px 32px; } .ndm-steps { display: none; } .ndm-form-area { padding: 36px 32px; } }
@media(max-width:600px){ .ndm-form-area { padding: 24px 20px; } .ndm-row { grid-template-columns: 1fr; } .ndm-nav { flex-wrap: wrap; gap: 10px; } }