/* ==========================================================================
   Africa Brand | page-contact.css | Contact page only (spec 4.11, 4.15, 5.6)
   Loaded after main.css. Token colours only; every two-layer background
   follows Rule B1; no blur filters are added (main.css blur budget: hero
   Africa glow 1, first silk ribbon 1, ambient halo on the map card 1).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Compact hero with the three quick-action tiles
   -------------------------------------------------------------------------- */
.hero--contact h1 { font-size: var(--fs-h1); }
.hero--contact .hero__grid { grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero--contact .hero__lead { margin-bottom: 0; }
/* Thread box: from 768 up the hero gets 48px of extra bottom padding and the SVG is anchored to that padding band
   (bottom: 0, height = padding), so the box always starts at the grid's bottom edge, below the last line of the lead and
   below the tiles, whatever the copy wraps to. Phones keep the 70/30 box of the mobile raster block (tiles stack under the copy). */
@media (min-width: 768px) {
  .hero--contact .hero__inner { padding-bottom: calc(var(--section-y) + 48px); }
  .hero--contact .hero__inner .thread { top: auto; bottom: 0; height: calc(var(--section-y) + 48px); }
}

.quick { display: grid; gap: .85rem; margin: 0; }
.quick__tile { --bevel-angle: 210deg; position: relative; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem 1rem 1rem; border-radius: var(--r-lg); border: 1px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.08); color: var(--text-on-dark); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, --bevel-angle 1s var(--ease); }
.quick__tile:hover { --bevel-angle: 570deg; transform: translateY(-3px); box-shadow: var(--shadow-2), 0 0 40px -16px rgba(242,154,60,.55); }
.quick__icon { --bevel-angle: 210deg; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(var(--oxblood-2), var(--oxblood-2)) padding-box, var(--chrome-bevel) border-box; color: var(--amber); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); transition: color .3s, box-shadow .3s; }
.quick__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick__icon svg.fill { fill: currentColor; stroke: none; }
.quick__tile:hover .quick__icon { color: var(--ember); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 20px -4px rgba(232,99,43,.6); }
.quick__text { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; }
.quick__label { font: 700 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.quick__value { font: 700 1.05rem/1.25 var(--font-display); letter-spacing: -.01em; color: var(--text-on-dark); overflow-wrap: anywhere; }
.quick__arrow { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text-on-dark-3); transition: transform .3s var(--ease), color .3s; }
.quick__tile:hover .quick__arrow { transform: translateX(4px); color: var(--cream); }

/* --------------------------------------------------------------------------
   2. Light section: form card (7/12) beside the details column (5/12)
   -------------------------------------------------------------------------- */
/* The details column (right 5/12, top 65 percent of the section) has no card behind its text, so from 1024 up the three ribbon
   groups are shifted down by the same 360 viewBox units (percentages of each group's own fill box) to sweep through the empty
   lower-right quadrant under the column. The individual translate property composes with the silk keyframe transforms. */
@media (min-width: 1024px) {
  .silk--contact .silk__a { translate: 0 50%; }
  .silk--contact .silk__b { translate: 0 84%; }
  .silk--contact .silk__c { translate: 0 53%; }
}
.contact-layout { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.contact-layout > * { min-width: 0; }
.contact-layout .sec-head { margin-bottom: 1.75rem; }
.contact-layout .sec-head .lead { margin-top: 0; }

.card--form { --bevel-angle: 200deg; position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-xl); border: 1px solid transparent; background: linear-gradient(var(--chrome-100), var(--chrome-100)) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light); color: var(--ink); }

/* Fields (4.11): label above, 48px controls, paper fill, amber focus ring, scarlet error border */
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > legend, .field__label { font: 600 .85rem/1.3 var(--font-body); color: var(--ink); padding: 0; }
.field > legend { float: left; width: 100%; margin-bottom: .4rem; }
.field__req { color: var(--crimson); font-weight: 800; }
.field__control { width: 100%; min-height: 48px; margin: 0; padding: .7rem .95rem; border: 1px solid var(--paper-line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); font: 500 .95rem/1.4 var(--font-body); -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field__control::placeholder { color: var(--ink-3); opacity: 1; }
textarea.field__control { min-height: 160px; resize: vertical; line-height: 1.5; }
.field__control:focus, .field__control:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(242,154,60,.25); background: var(--chrome-100); }
.select { position: relative; }
.select .field__control { padding-right: 2.6rem; cursor: pointer; }
.select::after { content: ""; position: absolute; right: 1.05rem; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field.is-invalid .field__control { border-color: var(--scarlet); }
.field.is-invalid .field__control:focus { box-shadow: 0 0 0 3px rgba(212,33,43,.18); }
.field__error { margin: 0; font: 600 .8rem/1.4 var(--font-body); color: var(--crimson); }
.field__error[hidden] { display: none; }

/* Preferred contact method: three pill radios */
.radios { display: flex; flex-wrap: wrap; gap: .5rem; clear: both; }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.pill span { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1.05rem .55rem .9rem; border-radius: var(--r-pill); border: 1px solid rgba(74,10,18,.18); background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box; font: 600 .88rem/1 var(--font-body); color: var(--ink-2); cursor: pointer; transition: color .25s, box-shadow .3s; }
.pill span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--chrome-500); background: var(--chrome-100); transition: background-color .2s, border-color .2s, box-shadow .2s; }
.pill:hover span { color: var(--ink); box-shadow: 0 6px 16px -10px rgba(74,10,18,.4); }
.pill input:checked + span { border-color: transparent; background: linear-gradient(var(--chrome-100), var(--chrome-100)) padding-box, var(--chrome-bevel-soft) border-box; color: var(--ink); box-shadow: var(--shadow-light); }
.pill input:checked + span::before { background: var(--scarlet); border-color: var(--scarlet); box-shadow: 0 0 10px 1px rgba(242,154,60,.55); }
.pill input:focus-visible + span { outline: 3px solid var(--crimson); outline-offset: 3px; }

/* Artwork upload: dashed chrome drop zone with the file input stretched over it */
.dropzone { position: relative; display: flex; align-items: center; gap: .9rem; min-height: 76px; padding: .85rem 1rem; border: 1.5px dashed var(--chrome-500); border-radius: var(--r-md); background: var(--paper); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.dropzone:hover, .dropzone:focus-within, .dropzone.is-over { border-color: var(--amber); background: var(--chrome-100); }
.dropzone:focus-within { box-shadow: 0 0 0 3px rgba(242,154,60,.25); }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.dropzone__icon { --bevel-angle: 200deg; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(var(--chrome-100), var(--chrome-100)) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: inset 0 1px 0 var(--chrome-100), 0 4px 10px -6px rgba(74,10,18,.35); color: var(--crimson); }
.dropzone__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dropzone__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.dropzone__hint { margin: 0; font: 500 .85rem/1.45 var(--font-body); color: var(--ink-2); }
.dropzone__file { margin: 0; font: 700 .85rem/1.4 var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.dropzone__file[hidden] { display: none; }

/* Live-region summary above the submit, and the submit row */
.form__status { margin-top: 1.25rem; }
.form__status:empty { display: none; }
.form__msg { margin: 0; padding: .85rem 1rem; border-radius: var(--r-md); border: 1px solid rgba(74,10,18,.18); background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box; font: 600 .9rem/1.45 var(--font-body); color: var(--ink); }
.form__msg--error { color: var(--crimson); }
.form__submit { margin-top: 1.5rem; }
.form__submit .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.form__note { font-size: var(--fs-small); color: var(--ink-3); }

/* Confirmation state (the form is hidden, the message replaces it inside the same card) */
.form__done { padding: .5rem 0 0; }
.form__done:focus { outline: none; }
.form__done[hidden] { display: none; }
.done__icon { --bevel-angle: 200deg; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid transparent; background: linear-gradient(var(--chrome-100), var(--chrome-100)) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: var(--shadow-light), 0 0 30px -8px rgba(242,154,60,.8); color: var(--crimson); margin-bottom: 1.25rem; }
.done__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.form__done p { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 48ch; margin-bottom: 1.5rem; }

/* Details column */
/* Not sticky: the column has no card behind its text, and the ribbons are placed under its natural position (see above);
   a sticky column would travel down over that band while the form scrolls. */
.details { position: relative; }
.details__list { display: grid; gap: .9rem; margin: 0 0 1.5rem; }
.details__list li { display: grid; grid-template-columns: 42px 1fr; gap: .9rem; align-items: start; }
.details__icon { --bevel-angle: 200deg; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid transparent; background: linear-gradient(var(--chrome-100), var(--chrome-100)) padding-box, var(--chrome-bevel-soft) border-box; box-shadow: inset 0 1px 0 var(--chrome-100), 0 4px 10px -6px rgba(74,10,18,.35); color: var(--crimson); }
.details__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.details__k { display: block; font: 700 var(--fs-eyebrow)/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--crimson); margin: .2rem 0 .25rem; }
.details__v { display: block; font: 600 1rem/1.45 var(--font-body); color: var(--ink); }
.details__v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--paper-3); transition: color .2s, border-color .2s; }
.details__v a:hover { color: var(--crimson); border-color: var(--crimson); }
.details .actions { margin-bottom: 2rem; }
/* WhatsApp Prompt: the quote block fills the column and the lead phrase is chrome-ink */
.details .quote { max-width: none; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin-bottom: 1.4rem; }

/* --------------------------------------------------------------------------
   3. Dark map section: map facade (4.15) beside a project card
   -------------------------------------------------------------------------- */
.map-layout { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.map-layout > * { min-width: 0; }
.map-layout .sec-head { margin-bottom: 2rem; }
.map { --bevel-angle: 210deg; position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid transparent; background: linear-gradient(var(--oxblood), var(--oxblood)) padding-box, var(--chrome-bevel) border-box; box-shadow: var(--shadow-2), 0 0 60px -20px rgba(212,33,43,.45); }
.map__field { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-oxblood); }
.map__field::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px), repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 42px), repeating-linear-gradient(90deg, rgba(242,154,60,.13) 0 1px, transparent 1px 210px), repeating-linear-gradient(0deg, rgba(242,154,60,.13) 0 1px, transparent 1px 210px); }
.map__glow { position: absolute; left: 58%; top: 44%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -56%); background: var(--halo-radial); opacity: .75; }
.map__road { position: absolute; pointer-events: none; }
.map__road--a { left: -15%; right: -15%; top: 44%; height: 3px; background: var(--chrome-line); opacity: .6; transform: rotate(-7deg); }
.map__road--b { left: 58%; top: -20%; bottom: -20%; width: 3px; background: var(--chrome-line-v); opacity: .6; transform: rotate(13deg); }
.map__lbl { position: absolute; font: 700 .62rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--text-on-dark-3); white-space: nowrap; }
.map__lbl--a { left: 6%; top: 44%; transform: translateY(-160%) rotate(-7deg); transform-origin: left bottom; }
.map__lbl--b { left: 58%; top: 70%; transform: translate(.9rem, 0) rotate(-77deg); transform-origin: left top; }
.map__ring { position: absolute; left: 58%; top: 44%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid var(--amber); opacity: .7; animation: mapRing 3.2s ease-out infinite; }
.map__ring--2 { animation-delay: -1.6s; }
@keyframes mapRing { from { transform: scale(1); opacity: .7; } to { transform: scale(7); opacity: 0; } }
.map__dot { position: absolute; left: 58%; top: 44%; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ember); box-shadow: var(--glow-node); }
.map__pin { position: absolute; left: 58%; top: 44%; width: 44px; height: 44px; transform: translate(-50%, -100%); fill: var(--scarlet); stroke: var(--cream); stroke-width: .9; stroke-linejoin: round; }
.map__pin circle { fill: var(--cream); stroke: none; }
.map__info { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: center; padding: 1.25rem 1.5rem 1.4rem; border-top: 1px solid rgba(255,255,255,.08); }
.map__addr { font: 600 .95rem/1.5 var(--font-body); font-style: normal; color: var(--text-on-dark); }
.map__hours { margin-top: .3rem; font-size: .9rem; color: var(--text-on-dark-2); }
.map-layout .proj .glow-frame__media { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--contact .hero__grid { grid-template-columns: 1.1fr .9fr; }
  .form__grid { gap: .9rem 1rem; }
}
@media (max-width: 1279px) {
  .card--form .eyebrow { letter-spacing: .16em; }
  .map__info { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .hero--contact .hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  /* Stacked map layout: the project caption sits in the lower band, so the section thread is off between 768 and 1023 (the hero keeps its pair). */
  #map .thread { display: none; }
  .quick { grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .quick__tile { padding: .9rem; gap: .75rem; }
  .quick__value { font-size: .95rem; }
  .contact-layout, .map-layout { grid-template-columns: 1fr; }
  .card--form { order: 0; }
  .details { order: 1; }
  .map-layout .proj { max-width: 640px; }
}
@media (max-width: 767px) {
  .form__grid { grid-template-columns: 1fr; gap: .9rem; }
  .quick { grid-template-columns: 1fr; gap: .6rem; }
  .quick__tile { padding: .75rem .9rem .75rem .75rem; }
  .quick__icon { width: 40px; height: 40px; }
  .quick__icon svg { width: 20px; height: 20px; }
  .map__field { aspect-ratio: 4 / 3; }
  .map__lbl { display: none; }
}
@media (max-width: 639px) {
  .contact-layout .sec-head, .map-layout .sec-head { margin-bottom: 1.2rem; }
  .card--form { padding: 1.1rem .9rem 1.25rem; border-radius: var(--r-lg); }
  .form__grid { gap: .75rem; }
  .field__control { min-height: 46px; }
  .form__submit { margin-top: 1.1rem; }
  .form__submit .btn { width: 100%; }
  .details .actions .btn { width: auto; }
  .details__list { gap: .6rem; margin-bottom: 1.1rem; }
  .details .actions { margin-bottom: 1.25rem; }
  .details .quote { margin-bottom: 1rem; }
  .map__info { padding: 1rem 1rem 1.1rem; }
  .map__info .btn { width: 100%; }
}