/* ==========================================================================
   UBM — /contact
   Only what sections.css and base.css do not already provide: the intent
   chooser, the urgent-call note, the sent state and the privacy-first map
   plate. Tokens and logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intent chooser
   <fieldset class="intent"><label class="intent__opt">…
   -------------------------------------------------------------------------- */
.intent { border: 0; padding: 0; margin: 0 0 var(--sp-7); display: grid; gap: var(--sp-3); }
.intent legend { margin-block-end: var(--sp-4); padding: 0; }

.intent__opt {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-5);
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-base) var(--e-out),
              background-color var(--d-base) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.intent__opt:hover { transform: translateY(-2px); border-color: var(--line-strong); }

/* The radio itself is the accessible control; the card is its visual. */
.intent__opt input {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  opacity: 0; margin: 0;
  pointer-events: none;
}
.intent__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.intent__opt:has(input:checked) {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--c-gold-500) 7%, var(--surface-raised));
}

.intent__index {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--e-out);
}
.intent__opt:has(input:checked) .intent__index { color: var(--gold); }

.intent__text { display: grid; gap: var(--sp-2); }
.intent__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-base); color: var(--text-strong); }
.intent__desc { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Urgent-call note  <aside class="urgent">
   -------------------------------------------------------------------------- */
.urgent {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-inline-start: 2px solid var(--c-domain-security);
  background: var(--surface-sunken);
  border-radius: var(--r-sm);
}
.urgent__label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--c-domain-security);
}
/* The number always reads LTR. It is a grid item, so it is blockified: pin the
   base direction and give the RTL page back its start edge (cf. .apply__phone). */
.urgent__tel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
[dir="rtl"] .urgent__tel { text-align: end; }
.urgent__tel:hover { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   Form chrome
   -------------------------------------------------------------------------- */
.contact-form { margin-block-start: var(--sp-6); }

/* Honeypot — hidden from people, reachable by bots. */
.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.form-alert {
  margin-block: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-danger);
  background: color-mix(in srgb, var(--c-danger) 8%, transparent);
  border: var(--bw) solid color-mix(in srgb, var(--c-danger) 35%, transparent);
  border-radius: var(--r-sm);
}
.form-alert[hidden] { display: none; }

/* Fields that belong to one intent only. JS toggles [hidden]; without JS every
   field stays visible and the server ignores what it does not need. */
.contact-form [data-when][hidden] { display: none; }

/* Success state */
.sent {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  padding: var(--sp-8);
  border: var(--bw) solid var(--line-gold);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-gold-500) 5%, var(--surface-raised));
}

/* --------------------------------------------------------------------------
   Map plate  <figure class="mapplate" data-map data-world="deep">
   A drawn schematic of the office location. No third-party request until the
   visitor asks for one, so this is the only "map" most visitors will see and
   it has to carry its own weight.

   The figure sets data-world="deep" in the markup, so every role below
   resolves against the deep surfaces no matter which world the band around it
   is on. The map palette itself is derived from those roles plus the raw
   navy/signal/gold ramps, never a literal colour.
   -------------------------------------------------------------------------- */
.mapplate {
  --map-land:   var(--surface-sunken);
  --map-block:  color-mix(in srgb, var(--c-signal-400) 6%, var(--c-ink-850));
  --map-water:  color-mix(in srgb, var(--c-signal-500) 16%, var(--c-ink-950));
  --map-edge:   color-mix(in srgb, var(--c-silver-300) 10%, transparent);
  --map-street: color-mix(in srgb, var(--c-silver-300) 20%, transparent);
  --map-artery: color-mix(in srgb, var(--c-silver-300) 38%, transparent);
  --map-coast:  color-mix(in srgb, var(--c-signal-400) 40%, transparent);

  margin: 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-raised);
}

.mapplate__art { inline-size: 100%; block-size: auto; display: block; background: var(--map-land); }

.mapplate__land   { fill: var(--map-land); }
.mapplate__blocks { fill: var(--map-block); stroke: var(--map-edge); stroke-width: 1; }
.mapplate__water  { fill: var(--map-water); }
.mapplate__coast  { fill: none; stroke: var(--map-coast); stroke-width: 1.25; }

.mapplate__street { fill: none; stroke: var(--map-street); stroke-width: 1; }
.mapplate__street--major { stroke: var(--map-artery); stroke-width: 2.5; }

/* Gold is punctuation: on this plate it buys exactly two things, the approach
   route and the marker sitting at the end of it. */
.mapplate__route {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mapplate__halo { fill: color-mix(in srgb, var(--c-gold-500) 16%, transparent); }
.mapplate__ring { fill: none; stroke: var(--gold); stroke-width: 1.25; }
.mapplate__pin  { fill: var(--gold); }

.mapplate__name,
.mapplate__city,
.mapplate__compass,
.mapplate__note {
  font-family: var(--font-sans);
  letter-spacing: var(--tr-eyebrow);
  stroke: none;
}
.mapplate__name    { font-size: 10px; font-weight: 600; fill: var(--gold); }
.mapplate__city    { font-size: 9px;  fill: var(--text-muted); }
.mapplate__compass { font-size: 8px;  fill: var(--text-faint); }
.mapplate__note    { font-size: 8px;  fill: var(--text-faint); }
.mapplate__needle  { fill: var(--map-artery); }

.mapplate__cap {
  display: grid;
  gap: var(--sp-3);
  justify-items: start;
  padding: var(--sp-5);
  border-block-start: var(--bw) solid var(--line);
}
.mapplate__links { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

/* `[hidden]` is a UA rule at the lowest possible specificity and .btn sets
   `display: inline-flex`, so contact.js setting `mapLoad.hidden = true` left
   the disclosure button on screen next to the links it had just revealed.
   One rule inside the plate restores the intent for both. */
.mapplate__cap [hidden] { display: none; }

/* Without scripting the disclosure never runs, so the map links would be
   unreachable (BUILD-SPEC §11: content must still be usable with JS off).
   Show them outright instead and drop the button that cannot do anything.
   Nothing is requested from a third party either way: these are ordinary
   links the visitor still has to choose to follow. */
.no-js .mapplate__cap [data-map-links] { display: flex; }
.no-js .mapplate__cap [data-map-load],
.no-js .mapplate__cap [data-map-copy] { display: none; }

/* RTL. Everything around the plate mirrors for free: .mapplate__cap is a grid
   with justify-items:start and .mapplate__links is a flex row, so the caption,
   the button and the map links all flip with the reading direction.

   The drawing itself does NOT mirror, for the same reason rtl.css §5 pins the
   scroll illustrations: this depicts a real place, and a coastline that runs
   the other way is simply wrong. Pinning the base direction keeps text-anchor
   on its designed side (the marker labels are anchored middle, so they need no
   side at all), and unicode-bidi:plaintext lets each label resolve its own
   direction from its content, so the Arabic strings still read correctly
   inside an LTR-anchored drawing. */
[dir="rtl"] .mapplate__art { direction: ltr; }
[dir="rtl"] .mapplate__art text { unicode-bidi: plaintext; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 61.99rem) {
  .intent { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .intent legend { grid-column: 1 / -1; }
}

/* On a phone the plate is about 320px wide against a 480-unit viewBox, so the
   drawing scales to roughly two thirds and the labels would land under 7px.
   Sizes inside an SVG are viewBox units, not pixels, so they have to be scaled
   back up by hand rather than left to the fluid type scale. */
@media (max-width: 30rem) {
  .mapplate__name    { font-size: 15px; }
  .mapplate__city    { font-size: 13px; }
  .mapplate__compass { font-size: 11px; }
  .mapplate__note    { font-size: 11px; }
}