/* =============================================================================
   SDEIRA - FORMS
   =============================================================================

   C13 .form-block, and nothing else. Separate from sdeira-sections.css because
   the forms sit on twelve pages and the other two dozen should not download
   this. It is still ONE implementation - separate file, not second definition.

   DERIVED FROM WHAT IS LIVE, NOT FROM THE ONE EXISTING FORM. The site's only
   form, .news-form, is [hidden], wired to nothing, and its submit is a
   <button type="button"> that posts nowhere. Exactly one thing is taken from
   it: the diagonal fill-wipe on the submit button, which is the sanctioned
   button motion. The field set is authored fresh against the token control
   height.

   THE CONTROL HEIGHT IS 46px AND THAT IS NOT A STYLE CHOICE. It is the .btn
   floor already measured in sdeira-subpage.css: WCAG 2.5.8 puts the AAA target
   at 44px, and every other control on the site - nav CTA, search field, both
   dropdowns - is sized by that same variable. A form field two pixels off would
   be the only control on the site that disagreed.

   NO .sweep ON A FORM, EVER. Its resting state is clip-path: inset(0 0 0 100%),
   so if the script does not run the content stays invisible with no error. On
   a form that is the difference between a visitor filing an enquiry and a
   visitor seeing an empty box.
   ========================================================================== */

.form-block {
  display: grid;
  gap: clamp(16px, 1.8vw, 22px);
  max-width: 720px;
}

/* The platform-wide enquiry composition: a raised form panel paired with the
   existing split-media treatment, so the form never leaves a decorative half
   of its section empty. Used only with a paired figure - .form-layout's own
   `.form-block { max-width: none; }` is what actually removes the 720px cap
   above, so this variant does not repeat it. This absorbed the former
   .form-block--service-figure, which was the identical composition under a
   second name; landbank/aryam/square carried it and are now `["panel"]`. */
.form-block--panel {
  padding: var(--sec-head-gap);
  border-radius: var(--r);
  background: var(--surface-raised);
}

.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);
}

/* The fieldset exists only to make an endpoint-less form safe without
   JavaScript. It contributes no second surface or spacing layer. */
.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;
}

/* THE FORM AND A PHOTOGRAPH, because a 720px form in a 1240px wrap left a
   third of the section empty and the emptiness read as an unfinished page
   rather than as space.
   The panel is .split-media, the site's existing media column - same radius,
   same cover crop, same identity watermark at the on-photo tone - and not a
   second media definition owned by this file.
   STRETCH, NOT A RATIO. Every other slot on the site fixes an aspect-ratio and
   lets object-fit crop the 16:9 master into it. Here the height that matters is
   the form's, which nothing can know in advance, so the panel takes the row's
   height and the master is cropped to that. A portrait slot would have been a
   sixth --media-* ratio, which is a design-system decision and not one to make
   in a stylesheet. */
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(28px, 3.4vw, 56px);
  align-items: stretch;
}

/* Inside the layout the form fills its own column: the 720px cap above is for
   a form standing alone in the wrap, and applying it here would put the empty
   space back inside the column instead of beside it. */
.form-layout .form-block { max-width: none; }

.form-layout .split-media {
  aspect-ratio: auto;
  block-size: 100%;
  min-block-size: 320px;
}

/* A FIELD'S ERROR MAY NOT MOVE ANY OTHER FIELD. This is the whole reason for
   the two alignment declarations below and for the reserved line further down,
   and it was a real, visible fault: a grid item stretches to its row by
   default, so the moment "Your CV" grew an error message the row grew with it
   and "Years of experience" NEXT TO IT stretched its input to match. One
   field's failure silently resized a field the visitor had not touched, and
   the two columns stopped agreeing at every row where only one side failed.

   `align-items: start` is the fix for the coupling, and `align-content: start`
   inside the field stops the control from absorbing whatever slack is left. A
   field is now exactly as tall as its own contents, and its neighbour never
   hears about it. */
.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;
}

/* A field that needs the full width: a message, or a long single answer. */
.field--wide { grid-column: 1 / -1; }

.form-grid > .field:not(.field--wide):not(.field--consent):nth-child(odd):last-child {
  grid-column: 1 / -1;
}
.form-grid > .field:not(.field--wide):not(.field--consent):nth-child(odd):has(+ .field--wide),
.form-grid > .field:not(.field--wide):not(.field--consent):nth-child(odd):has(+ .field--consent) {
  grid-column: 1 / -1;
}

.field > label {
  color: var(--label);
  font-size: var(--type-meta);
  font-weight: 700;
}

/* The required mark is part of the label, not a colour change: colour alone is
   not an accessible way to say "required", and the accent is already doing
   other work on this page. */
.field-required {
  color: var(--figure);
  margin-inline-start: 2px;
}

/* NO FRAME. A field is a sunken surface on the page's ground - the same tonal
   ladder every other container here uses - and the step down is what says
   "type into this". A 1px rule around it was the only outlined box left on the
   site and it made the form look like it came from somewhere else. */
.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);
}

/* C13 international telephone. The native select remains the form value;
   JavaScript only supplies the searchable picker around it. */
.phone-field { display: grid; grid-template-columns: minmax(var(--phone-country-min), auto) minmax(0, 1fr); }
.phone-field > select { min-inline-size: 0; }
.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; text-align: start; }
.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; }
/* The flag is a real per-country mark, drawn from the regional-indicator pair
   the country code already carries, so it can never disagree with the code. */
.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-strong); }
.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); }
/* Custom properties cannot participate in media queries. --phone-field-collapse
   documents this shared threshold in the token source. */
@media (max-width: 620px) { .phone-field { grid-template-columns: minmax(0, 1fr); } }

/* Typed-into controls only. The checkbox is a 22px box with its own ground and
   the file field's hover surface is the .file-drop box rather than the
   transparent input inside it, so both are excluded here and answered by their
   own rules further down. */
/* .field :is(input:not([type="checkbox"], [type="file"]), select, textarea):hover {
  background: var(--surface-sunken-strong);
} */

/* The two controls the browser draws for itself, and the only two places a
   line was still appearing on this page: a <select> and a file input both ship
   with a UA border that no rule of ours had touched. appearance: none takes
   the chrome off the select and the caret is drawn back on as an inline SVG in
   the token accent, matching the caret the site's own dropdowns already use.
   The SVG is a data URI rather than a file so it cannot become another path
   that has to be right at four directory depths. */
/* THE CLOSED SELECT IS OURS. THE OPEN ONE WAS NOT, AND THAT WAS THE PROBLEM.
   appearance:none and a drawn caret style the button; the list a native
   <select> opens is painted by the operating system - its own font, its own
   blue highlight, its own corners - and no rule here reaches inside it. So the
   control looked like this system until the moment it was used, and then
   looked like Windows. The caret vanished with it, because the UA hides it
   while the popup is up.

   The list below replaces it, and it is not a new component: the news index
   already answered this exact question with a button plus a real listbox, and
   these are its measured values. That the two carry different class names is an
   outstanding promotion, recorded rather than hidden - see the design system's
   own note. What matters here is that there is one BEHAVIOUR, not that there is
   one selector.

   THE REAL <select> IS STILL THE CONTROL. It stays in the DOM holding the
   value, taking part in validation and submitting with the form; it is only
   taken out of the visual and tab order once the script has built the listbox
   that stands in front of it. With no JavaScript the native select is what the
   visitor gets, styled as before, which is a worse list but a working form. */
.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; }

/* Once enhanced, the native control is hidden from sight and from Tab, but is
   still submitted. Not display:none - a control the browser cannot render is a
   control it will not report as invalid either. */
.field select[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);
}

/* Open takes the same tone as hover and the same tone as the menu below it.
   Without this the open control is a pale button under a warm list, which reads
   as two unrelated panels. */
/* .select-toggle:hover,
.select-toggle[aria-expanded="true"] { background: var(--surface-sunken-strong); } */

.select-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--surface-sunken-strong);
}

.select-value {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The caret stays visible while the list is open - it is the one thing the
   native control took away - and turns over to say so. */
.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); }

/* Still no shadow - that rule holds - but the tonal step alone is too close to
   its own ground to draw an edge: sunken against the page is a 1.10 luminance
   ratio, against a white card 1.20, both close enough to read as one surface.
   The hairline in --line is what actually separates the panel, the same token
   every divider on the site already uses; the fill still matches the open
   toggle and gives the rows something to step off of. See the matching note on
   .news-dropdown-menu in sdeira-subpage.css, where this was found. */
.select-menu {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  inset-block-start: calc(100% + 6px);
  /* Sized to its own longest option, not to a field that can be narrower than
     one - the field column can be 46% of a two-up grid row, well under some
     option labels. */
  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(--card);
  border: 1px solid var(--line);
  max-block-size: 280px;
  overflow-y: auto;
}

.select-menu[hidden] { display: none; }

.select-option {
  padding: 10px 14px;
  border-radius: var(--r);
  color: var(--brand-jais);
  font-size: var(--type-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Steps to sunken-strong, not sunken: the menu is already sunken, so the row
   would not highlight at all. Brand Black on that step measures 7.11:1. */
.select-option:is(:hover, :focus-visible) {
  background: var(--surface-sunken-strong);
  color: var(--brand-black);
  outline: 0;
}

.select-option[aria-selected="true"] {
  background: var(--accent-fill);
  color: var(--brand-white);
}

/* THE NUMBER SPINNER IS THE BROWSER'S, SO IT GOES - and ours takes its place.
   The UA draws two grey chevrons at its own size and colour, which is a control
   from another design system sitting in the middle of this one. It is still
   removed. What replaced it is a pair of real buttons at the end of the field,
   carrying the icon set's own glyphs at the control size, so a number can be
   nudged with the pointer without the field needing a sentence of explanation.

   They are <button type="button">, not clickable spans: they take focus, they
   are named for a screen reader, and type="button" is what keeps a click inside
   a form from submitting it. */
.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; }

/* The field keeps its own padding and gains room for the two buttons, so the
   digits never run under them. */
.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;
}

/* At the min or the max the button is genuinely disabled, not merely dimmed:
   the browser stops the click and the assistive label says so. */
.number-step[disabled] { opacity: .4; cursor: default; }
.number-step[disabled]:hover { background: var(--surface-raised); color: var(--ink); }

/* THE FILE FIELD IS OURS, NOT THE OPERATING SYSTEM'S.
   ::file-selector-button styles the button and leaves the rest: the "No file
   selected." beside it is drawn by the browser, in the BROWSER's language, at
   the browser's size. On an Arabic page with an English browser that string is
   English, and there is no CSS that reaches it.
   So the real <input type="file"> is still the control - it holds the file, it
   takes focus, it validates, it submits - but it is transparent and covers the
   whole box, and everything visible is ours: our button, and a filename line
   the script fills in from input.files. Clicking anywhere in the box opens the
   picker, because the input IS the box. */
.field .file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  /* The same height as a typed field, derived the same way rather than typed
     as a number: a text input is its 46px floor or one body line plus its
     20px of vertical padding, whichever is larger, and at the current type
     scale that is 48. Sitting at the bare 46 floor made this the only control
     in the row two pixels short of the ones beside it. */
  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-strong);
}

.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);
}

/* One line, ellipsised. A long filename must not be allowed to widen the field
   and take the second column with it. */
.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); }

/* The focus ring belongs to the box the visitor sees, not to the transparent
   input inside it. Its ground stays on the same rung as pointer hover. */
.field .file-drop:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--surface-sunken-strong);
}

/* Same rule as the typed controls below, for the same reason: not while the
   field has focus. */
.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); }

/* The one line in this file, and it is an outline rather than a border: a
   keyboard user has to be able to see where they are. Accessibility
   affordance, not decoration.

   FOCUS KEEPS THE HOVER GROUND AND ADDS THE ACCENT RING. The old raised-white
   focus ground made one field step through three surfaces: rest, hover, then
   white while typing. Moving the pointer away changed it again before blur.
   One active ground removes that flicker: --surface-sunken-strong during both
   hover and focus. The Sweihan outline says where keyboard focus is; the Liwa
   error wash below is still only shown after focus leaves, so the states do
   not compete. On an inverse ground both roles take their dark-surface tokens. */
.field :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  /* background: var(--surface-sunken-strong); */
}

/* The invalid state is announced by aria-invalid, not inferred from :invalid -
   :invalid matches an empty required field the moment the page loads, so every
   form would open already marked wrong. */
/* The invalid state is a tonal wash in Liwa plus the message below it - never
   a red outline, and never colour alone. */
/* AND NEVER WHILE THE FIELD IS FOCUSED. The focus rule above and this one carry
   the same specificity, so source order decided it and this one is later: a
   field the visitor had just clicked into sat in the Liwa wash, which is the
   colour this system uses to say something is wrong. Red under a cursor that is
   about to type is a wrong statement - the visitor is answering the field, not
   failing it - and the accent ring already says where they are.
   `:not(:focus-visible)` rather than moving the rule, so the two states stay
   next to each other and the reason is readable at the point it applies. */
.field :is(input, select, textarea)[aria-invalid="true"]:not(:focus-visible) {
  background: color-mix(in srgb, var(--brand-liwa) 8%, var(--surface-raised));
}

/* RESERVED, NOT TOGGLED. The token file's "reserve, do not clamp" rule is about
   a card's subtitle, but the reason behind it is this one: a box whose height
   depends on its content moves everything around it when the content arrives.
   Here it arrived on blur, so the form jumped under the visitor's cursor every
   time they left a field, and it jumped again for every field on submit.
   One line is always reserved, so an error appears in space that was already
   there and nothing below it moves. */
.field-error {
  min-block-size: 1lh;
  color: var(--brand-liwa);
  font-size: var(--type-meta);
}

/* The UA sheet's `display: none` for [hidden] is what has to be overridden -
   that is exactly the collapse this reserve exists to prevent. `visibility:
   hidden` keeps the line's height and still removes it from the accessibility
   tree, so the attribute keeps meaning what it says. */
.field-error[hidden] {
  display: block;
  visibility: hidden;
}

/* The consent row. Always present, never pre-ticked. */
.field--consent {
  grid-column: 1 / -1;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

/* THE BOX IS DRAWN HERE, NOT BY THE OPERATING SYSTEM. `accent-color` only
   recolours the platform checkbox: its shape, its corner radius, its tick and
   its focus treatment stay macOS's or Windows's, which is the one control on
   the page that visibly came from somewhere else. `appearance: none` gives us
   an empty box to draw, and the tick is an inline SVG in the same data-URI
   form the select's caret already uses - one mechanism for both, and no fourth
   path into assets/ to keep correct at four directory depths.
   The real <input type="checkbox"> is still the control. Nothing here is a
   <div> pretending: it takes focus, it toggles with Space, it is required, and
   it submits. */
.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;
}

/* The consent row is the one field laid out in two columns, so its message has
   to be told to span them or it would sit under the box instead of under the
   sentence it belongs to. */
.field--consent .field-error { grid-column: 1 / -1; }

/* Consent is already a compact two-part row. Its hidden validation message
   must not reserve a second line beneath the sentence before validation. */
.field--consent .field-error[hidden] {
  min-block-size: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* The form's own status line. It carries the whole outcome now - there is no
   /thank-you page to redirect to - so it has three states, not two. aria-live
   so it is announced rather than only seen.

   The confirmation is a colour step, not a badge or a tick: the system separates
   by tone, and a status line that grows a box on success is a second component
   nobody asked for. Razeen is the on-light accent that is not the error red. */
.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;
}

/* THE SUNKEN-STEP ASSUMES A BASE GROUND, AND THREE PAGES DO NOT GIVE IT ONE.
   Every field above steps from the section's ground down to --surface-sunken,
   which reads correctly on a plain .pad section (--surface-base, #FAF4EC) -
   but contact/, business/investments/ and careers/submit-cv/ all put this
   form on a .pad--sunken ground, which is #F6E9D6: the exact same value as
   the field. Not a near-miss, the same custom property resolving to the same
   hex on both the section and the control, so every field, the select
   trigger and its menu, and the file drop all disappeared into their own
   section with zero contrast between them - flagged from a live screenshot
   of contact/, not assumed.

   The fix is the token pair already in sdeira-tokens.css for exactly this -
   a raised surface with a visible hover step, `--card` / `--card-hover` -
   not a new value. It is the same role .pad--raised already gives
   .row-item/.stat-strip/.logo-tile/.faq-item in sdeira-sections.css: a
   component one tone lighter than its usual ground steps the other way when
   the ground itself is already that tone. */
.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); }

/* The menu already carries a --line border for the same reason on a base
   ground (its own comment above: sunken-on-sunken is too close to draw an
   edge from tone alone) - here the ground has moved again, so the same
   border keeps doing the same job rather than being redundant. */
.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); }

/* A panel is raised above a sunken section, so the normal sunken step is again
   the control ground. Without this named component context both resolve to the
   raised white surface and an empty field becomes invisible. */
.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-strong);
} */

.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);
}

/* This selector's own unchecked rule above outranks the base
   .field--consent input[type="checkbox"]:checked rule on specificity alone
   (4 class-level selectors against 3), regardless of :checked and regardless
   of source order - so on every pad--sunken service-card/panel form (every
   "Service Request" section site-wide, landbank included) the box was stuck
   showing its unchecked colour even after a visitor checked it. The control
   still worked - .checked flips, it still submits - it just never looked
   like it had. Repeating the checked treatment at the same specificity here
   fixes it in the one context it was missing from. */
.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-strong);
} */

.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));
}

/* The invalid wash already mixes into --surface-raised (see the base rule
   above), which is --card's own value, so it needs no override here - it was
   already the one thing on this ground that still had contrast. */

/* On the dark ground the field roles invert, exactly as everything else does. */
.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);
}

/* The two controls we draw ourselves invert on the same ladder as the rest -
   the box and the file panel take the dark card surface, and the tick stays
   white on the accent because that pair is the same on either ground. */
.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); }

/* The two controls this file draws itself invert on the same ladder. */
.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); }


/* =============================================================================
   RESPONSIVE
   ========================================================================== */

/* The form column stops being a column before the fields do: at 900px a 0.72fr
   photograph beside six fields squeezes both. Stacked, the panel takes the
   master ratio back, because there is no longer a sibling whose height it can
   borrow. */
@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) {
  /* One column. Two 50% fields at this width leave no room for either label. */
  .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; }
}


.phone-field {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* زر كود الدولة */
.phone-country-picker {
  display: flex;
  position: relative;
  flex-shrink: 0;
}

.phone-country-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  background: var(--surface-sunken, #f5f5f5);
  border: 1px solid var(--line, #d4d4d4);
  border-inline-end: none; /* إزالة الحد المشترك مع حقل الرقم */
  border-start-start-radius: var(--r, 4px);
  border-end-start-radius: var(--r, 4px);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  cursor: pointer;
  color: var(--ink, #414042);
}

/* حقل إدخال رقم الهاتف */
.phone-field input[type="tel"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line, #d4d4d4);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--r, 4px);
  border-end-end-radius: var(--r, 4px);
}
[dir="rtl"] .phone-field input[type="tel"]{
  border-start-start-radius: var(--r, 4px);
border-end-start-radius: var(--r, 4px);

border-start-end-radius: 0;
border-end-end-radius: 0;
}


/* إبقاء حدود التركيز واضحة دون تشوه */
.phone-country-toggle:focus-visible,
.phone-field input[type="tel"]:focus {
  outline: none;
  border-color: var(--accent, #910811);
  z-index: 2;
}