.form-block { display: grid; gap: clamp(16px, 1.8vw, 22px); max-width: 720px; }  .form-block--panel { padding: var(--sec-head-gap); border-radius: var(--r); background: var(--surface-raised); }  .pad:not(.pad--sunken) .form-block--panel { padding: 0; background: none; } .form-block--service-card { inline-size: min(100%, var(--service-form-max)); max-width: none; padding: var(--sec-head-gap); border-radius: var(--r); background: var(--surface-raised); }  .form-controls { display: grid; gap: clamp(16px, 1.8vw, 22px); min-inline-size: 0; margin: 0; padding: 0; border: 0; } .form-job-context { margin: 0; padding: 12px 14px; border-radius: var(--r); background: var(--surface-sunken); color: var(--label); font-size: var(--type-meta); font-weight: 700; }  .form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(28px, 3.4vw, 56px); align-items: stretch; }  .form-layout .form-block { max-width: none; } .form-layout .split-media { aspect-ratio: auto; block-size: 100%; min-block-size: 320px; }  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 16px); align-items: start; } .field { display: grid; align-content: start; gap: 8px; }  .field--wide { grid-column: 1 / -1; } .field > label { color: var(--label); font-size: var(--type-meta); font-weight: 700; }  .field-required { color: var(--figure); margin-inline-start: 2px; }  .field :is(input, select, textarea) { inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border: 0; border-radius: var(--r); background: var(--surface-sunken); color: var(--ink); font-family: inherit; font-size: var(--type-body); transition: background var(--dur-fast) var(--ease-out); }  .phone-field { display: grid; grid-template-columns: var(--phone-country-min) minmax(0, 1fr); gap: var(--phone-control-gap); } .phone-field > select, .phone-field .phone-country-toggle { border-start-end-radius: 0; border-end-end-radius: 0; } .phone-field > [data-phone-local] { min-inline-size: 0; border-start-start-radius: 0; border-end-start-radius: 0; } .phone-field { border-radius: var(--r); } .phone-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .field .phone-field > [data-phone-local]:focus-visible, .field .phone-field > select:focus-visible, .field .phone-field .phone-country-toggle:focus-visible { outline: none; } .phone-field > select { min-inline-size: 0; }  [dir="rtl"] .phone-field > [data-phone-local] { border-radius: var(--r) 0 0 var(--r); } [dir="ltr"] .phone-field > [data-phone-local] { border-radius: 0 var(--r) var(--r) 0; }  [dir="rtl"] .phone-field > [data-phone-local] { text-align: right; } [dir="ltr"] .phone-field > [data-phone-local] { text-align: left; } .phone-country-picker { position: relative; min-inline-size: 0; } .phone-country-picker > select { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .phone-country-toggle { display: inline-flex; align-items: center; gap: 8px; inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border: 0; border-radius: var(--r); background: var(--surface-sunken); color: var(--ink); font: inherit; cursor: pointer; } .phone-country-toggle > span, [data-phone-local] { direction: ltr; } .phone-country-toggle > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .phone-country-toggle > span:first-child { display: inline-flex; align-items: center; gap: 8px; }  .phone-country-option .phone-flag { flex: none; } .phone-country-toggle i { margin-inline-start: auto; font-size: var(--icon-control); } .phone-country-toggle:is(:hover, :focus-visible), .phone-country-picker[data-open] .phone-country-toggle { background: var(--surface-sunken); } .phone-country-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .phone-country-menu { position: absolute; z-index: 30; inset-inline-start: 0; inset-block-start: calc(100% + var(--phone-field-gap)); inline-size: min(var(--phone-picker-max), calc(100vw - 40px)); padding: var(--phone-field-gap); border-radius: var(--r); outline: 1px solid var(--line); background: var(--surface-raised); } .phone-country-picker[data-up] .phone-country-menu { inset-block-start: auto; inset-block-end: calc(100% + var(--phone-field-gap)); } .phone-country-menu[hidden] { display: none; } .phone-country-search { inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border: 0; border-radius: var(--r); background: var(--surface-sunken); color: var(--ink); font: inherit; } .phone-country-options { max-block-size: var(--phone-picker-list-max); margin: var(--phone-field-gap) 0 0; padding: 0; overflow-y: auto; list-style: none; } .phone-country-option { display: inline-flex; align-items: center; gap: 8px; inline-size: 100%; padding: 10px 14px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; } .phone-country-option:is(:hover, :focus-visible), .phone-country-option[aria-selected="true"] { background: var(--surface-sunken-strong); }   .field :is(input:not([type="checkbox"], [type="file"]), select, textarea):hover { background: var(--surface-sunken); }   .field select { appearance: none; padding-inline-end: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236D6E71' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } [dir="rtl"] .field select { background-position: left 14px center; }  .field :is(select, input[type="date"])[data-enhanced] { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .select-shell { position: relative; } .select-toggle { display: inline-flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 46px; padding: 10px 14px; border: 0; border-radius: var(--r); background: var(--surface-sunken); color: var(--ink); font: inherit; font-size: var(--type-body); text-align: start; cursor: pointer; transition: background var(--dur-fast) var(--ease-out); }  .select-toggle:hover, .select-toggle[aria-expanded="true"] { background: var(--surface-sunken); } .select-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--surface-sunken); } .select-value { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  .select-toggle i.ph { flex: none; font-size: var(--icon-control); line-height: 1; color: var(--icon); transition: transform var(--dur-base) var(--ease-out); } .select-toggle[aria-expanded="true"] i.ph { transform: rotate(180deg); }  .select-menu { position: absolute; z-index: 20; inset-inline-start: 0; inset-block-start: calc(100% + 6px);  inline-size: max-content; min-inline-size: 100%; max-inline-size: min(280px, calc(100vw - 64px)); margin: 0; padding: 4px; list-style: none; border-radius: var(--r); background: var(--surface-raised); border: 1px solid var(--line); max-block-size: 360px; overflow-x: hidden; overflow-y: auto; } .select-menu[hidden] { display: none; } .select-menu.select-menu[data-on-white], .phone-country-menu.phone-country-menu[data-on-white] { background: var(--surface-sunken); }  .select-option { padding: 10px 14px; border-radius: var(--r); color: var(--brand-jais); font-size: var(--type-body); white-space: normal; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }  .select-option:is(:hover, :focus-visible) { background: var(--surface-sunken-strong); color: var(--brand-black); outline: 0; } .select-option.has-note { display: grid; gap: 2px; white-space: normal; } .select-option-title { font-size: var(--type-body); }  .select-option-note { font-size: var(--type-caption); line-height: var(--leading-label); opacity: .78; } .select-option[aria-selected="true"] { background: var(--accent-fill); color: var(--brand-white); }  .select-toggle.is-placeholder .select-value { color: var(--muted); } .date-menu { inline-size: 300px; max-inline-size: calc(100vw - 48px); max-block-size: none; overflow: visible; padding: 12px; } .date-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 8px; } .date-title { flex: 1; text-align: center; font-weight: 700; color: var(--brand-black); } .date-nav, .date-day, .date-link { border: 0; background: transparent; color: var(--brand-jais); font: inherit; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .date-nav { inline-size: 36px; block-size: 36px; border-radius: var(--r); font-size: var(--icon-control); line-height: 1; } .date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; } .date-dow { padding-block: 6px; color: var(--muted); font-size: var(--type-caption); } .date-day { aspect-ratio: 1; border-radius: var(--r); font-size: var(--type-body); } .date-day.is-outside { color: var(--muted); } .date-day.is-today { box-shadow: inset 0 0 0 1px var(--accent); } .date-nav:not(:disabled):is(:hover, :focus-visible), .date-day:not(:disabled):is(:hover, :focus-visible), .date-link:not(:disabled):is(:hover, :focus-visible) { background: var(--surface-sunken-strong); color: var(--brand-black); outline: 0; } .date-day:focus-visible, .date-nav:focus-visible, .date-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .date-day.is-selected, .date-day.is-selected:hover { background: var(--accent-fill); color: var(--brand-white); } .date-day:disabled, .date-nav:disabled, .date-link:disabled { opacity: .35; cursor: default; } .date-foot { display: flex; justify-content: space-between; margin-block-start: 8px; padding-block-start: 8px; border-block-start: 1px solid var(--line); } .date-link { padding: 6px 10px; border-radius: var(--r); color: var(--accent-strong); font-weight: 700; } .date-foot [hidden] { display: none; }  .field input[type="number"] { appearance: textfield; } .field input[type="number"]::-webkit-outer-spin-button, .field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .number-shell { position: relative; }  .number-shell input[type="number"] { padding-inline-end: 76px; } .number-steppers { position: absolute; inset-block: 5px; inset-inline-end: 6px; display: flex; gap: 4px; } .number-step { display: grid; place-items: center; inline-size: 32px; border: 0; border-radius: var(--r); background: var(--surface-raised); color: var(--ink); font-size: var(--icon-control); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .number-step:is(:hover, :focus-visible) { background: var(--accent-fill); color: var(--brand-white); } .number-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }  .number-step[disabled] { opacity: .4; cursor: default; } .number-step[disabled]:hover { background: var(--surface-raised); color: var(--ink); }  .field .file-drop { position: relative; display: flex; align-items: center; gap: 12px;  font-size: var(--type-body); line-height: var(--leading-body); min-block-size: max(46px, calc(1lh + 20px)); padding-inline: 8px; border-radius: var(--r); background: var(--surface-sunken); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .field .file-drop:is(:hover, :focus-within) { background: var(--surface-sunken); } .field .file-drop input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; min-block-size: 0; padding: 0; opacity: 0; cursor: pointer; } .file-drop-button { flex: none; padding: 8px 16px; border-radius: var(--r); background: var(--surface-inverse); color: var(--brand-white); font-size: var(--type-control); font-weight: 700; transition: background var(--dur-fast) var(--ease-out); } .file-drop:is(:hover, :focus-within) .file-drop-button { background: var(--accent-fill); }  .file-drop-name { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--label); font-size: var(--type-meta); } .file-drop-name[data-filled] { color: var(--ink); }  .field .file-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--surface-sunken); }  .field .file-drop:has(input[aria-invalid="true"]):not(:focus-within) { background: color-mix(in srgb, var(--brand-liwa) 8%, var(--surface-raised)); } .field textarea { min-block-size: calc(4 * 1lh + 20px); resize: vertical; line-height: var(--leading-body); } .field :is(input, select, textarea)::placeholder { color: var(--label); }  .field :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--surface-sunken); }    .field :is(input, select, textarea)[aria-invalid="true"]:not(:focus-visible) { background: color-mix(in srgb, var(--brand-liwa) 8%, var(--surface-raised)); }  .field-error { min-block-size: 1lh; color: var(--brand-liwa); font-size: var(--type-meta); }  .field-error[hidden] { display: block; visibility: hidden; }  .field--consent { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }  .field--consent input[type="checkbox"] { appearance: none; flex: none; inline-size: 22px; block-size: 22px; min-block-size: 0; margin-block-start: 2px; padding: 0; border-radius: var(--r); background: var(--surface-sunken); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); } .field--consent input[type="checkbox"]:checked { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; } .field--consent label { color: var(--muted); font-size: var(--type-meta); font-weight: 400; }  .field--consent .field-error { grid-column: 1 / -1; }  .field--consent .field-error[hidden] { min-block-size: 0; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }  .form-status { color: var(--muted); font-size: var(--type-meta); } .form-status[data-state="error"] { color: var(--brand-liwa); } .form-status[data-state="sent"] { color: var(--ink); font-weight: 700; }  .pad--sunken .field :is(input, select, textarea) { background: var(--card); } .pad--sunken .field :is(input:not([type="checkbox"], [type="file"]), select, textarea):hover { background: var(--card-hover); } .pad--sunken .field :is(input, select, textarea):focus-visible { background: var(--card-hover); } .pad--sunken .select-toggle { background: var(--card); } .pad--sunken .select-toggle:hover, .pad--sunken .select-toggle[aria-expanded="true"], .pad--sunken .select-toggle:focus-visible { background: var(--card-hover); }  .pad--sunken .select-menu { background: var(--card); } .pad--sunken .select-option:is(:hover, :focus-visible) { background: var(--card-hover); } .pad--sunken .field .file-drop { background: var(--card); } .pad--sunken .field .file-drop:is(:hover, :focus-within) { background: var(--card-hover); } .pad--sunken .field--consent input[type="checkbox"] { background: var(--card); }  .pad--sunken :is(.form-block--panel, .form-block--service-card) .field :is(input:not([type="checkbox"], [type="file"]), select, textarea) { background: var(--surface-sunken); } .pad--sunken :is(.form-block--panel, .form-block--service-card) .field :is(input:not([type="checkbox"], [type="file"]), select, textarea):hover, .pad--sunken :is(.form-block--panel, .form-block--service-card) .field :is(input, select, textarea):focus-visible { background: var(--surface-sunken); } .pad--sunken :is(.form-block--panel, .form-block--service-card) .select-toggle, .pad--sunken :is(.form-block--panel, .form-block--service-card) .field .file-drop, .pad--sunken :is(.form-block--panel, .form-block--service-card) .field--consent input[type="checkbox"] { background: var(--surface-sunken); }  .pad--sunken :is(.form-block--panel, .form-block--service-card) .field--consent input[type="checkbox"]:checked { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px; } .pad--sunken :is(.form-block--panel, .form-block--service-card) .select-toggle:is(:hover, :focus-visible), .pad--sunken :is(.form-block--panel, .form-block--service-card) .select-toggle[aria-expanded="true"], .pad--sunken :is(.form-block--panel, .form-block--service-card) .field .file-drop:is(:hover, :focus-within) { background: var(--surface-sunken); } .pad--sunken :is(.form-block--panel, .form-block--service-card) .field :is(input:not([type="checkbox"], [type="file"]), select, textarea)[aria-invalid="true"]:not(:focus-visible), .pad--sunken :is(.form-block--panel, .form-block--service-card) .field .file-drop:has(input[aria-invalid="true"]):not(:focus-within) { background: color-mix(in srgb, var(--brand-liwa) 8%, var(--surface-raised)); }   .pad--inverse .field > label { color: var(--label-on-dark); } .pad--inverse .field--consent label { color: var(--muted-on-dark); } .pad--inverse .field :is(input, select, textarea) { background: var(--card-dark); color: var(--brand-white); } .pad--inverse .field :is(input:not([type="checkbox"], [type="file"]), select, textarea):hover { background: var(--card-dark-hover); } .pad--inverse .field :is(input, select, textarea):focus-visible { outline-color: var(--accent-on-dark); background: var(--card-dark-hover); }  .pad--inverse .field .file-drop { background: var(--card-dark); } .pad--inverse .field .file-drop:is(:hover, :focus-within) { background: var(--card-dark-hover); } .pad--inverse .field .file-drop:focus-within { outline-color: var(--accent-on-dark); } .pad--inverse .file-drop-name { color: var(--label-on-dark); } .pad--inverse .file-drop-name[data-filled] { color: var(--brand-white); } .pad--inverse .field--consent input[type="checkbox"] { background: var(--card-dark); } .pad--inverse .field--consent input[type="checkbox"]:checked { background-color: var(--accent); } .pad--inverse .field :is(input, select, textarea)::placeholder { color: var(--label-on-dark); }  .pad--inverse .select-toggle { background: var(--card-dark); color: var(--brand-white); } .pad--inverse .select-toggle:hover, .pad--inverse .select-toggle[aria-expanded="true"] { background: var(--card-dark-hover); } .pad--inverse .select-toggle:focus-visible { outline-color: var(--accent-on-dark); background: var(--card-dark-hover); } .pad--inverse .select-menu { background: var(--card-dark); } .pad--inverse .select-option { color: var(--muted-on-dark); } .pad--inverse .select-option:is(:hover, :focus-visible) { background: var(--card-dark-hover); color: var(--brand-white); } .pad--inverse .number-step { background: var(--card-dark-hover); color: var(--brand-white); } .pad--inverse .number-step:is(:hover, :focus-visible) { background: var(--accent-fill); } .pad--inverse .number-step:focus-visible { outline-color: var(--accent-on-dark); } .pad--inverse .form-status { color: var(--muted-on-dark); }   @media (max-width: 900px) { .form-layout { grid-template-columns: minmax(0, 1fr); } .form-layout .split-media { order: -1; aspect-ratio: var(--media-wide); block-size: auto; min-block-size: 0; } } @media (max-width: 640px) {  .form-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .field :is(input, select, textarea), .field input[type="file"]::file-selector-button { transition: none; } }  .form-layout--portrait .split-media { align-self: start; aspect-ratio: auto; block-size: auto; min-block-size: 0; } .form-layout--portrait .split-media img { block-size: auto; }