/* ==========================================================================
   Contact page — Figma frame 2569:7050
   Relies on tokens.css + base.css. Sizes/spacing per ../../FST-DESIGN.md.
   2026-10-15 premium tune: depth (gradients + glows from palette colours only), dark
   "talk to us" panel, kickers, photo grade, hairlines. No new colours.
   2026-10-15 review pass: copy restored (no added kicker words), hero photo opened up,
   link rule matches .link-underline, phone FAQ gutter.
   2026-10-15 fix pass: scrim behind the hero copy only; "talk to us" panel no longer sticky,
   runs the full form height and contains its own glow; map shown whole again (approved crop,
   OSM credit visible) with the one photo grade + a brand pin over the baked marker; FAQ band
   gets depth, straight hairlines inside the container, rounded open row; in-page jump lands
   below the glass header; phone hero back to 440px.
   2026-10-15 fix 2: tablet grids reverted to the approved single column (rule: no grid change);
   panel hugs its content + sticks beside the form (no navy void); office kicker = yellow rule;
   map toned to the navy band (grayscale + navy multiply wash, zoom buttons cropped off, credit
   corner kept); light-band glows use primary blue at low alpha; hero photo graded + opened up.
   ========================================================================== */

/* ---- Shared label style (caption-strong) ---- */
.c-label { color: var(--color-text-muted); }   /* type = base .kicker */
.c-label--light { color: var(--color-on-dark-faint); }

/* ---- 1. Hero — photo open at the edges; a soft scrim sits only behind the copy ---- */
.c-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;   /* height + padding = shared inner-hero rule (polish.css) */
  background: var(--gradient-hero-flat);
  color: var(--color-white);
}
.c-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  filter: var(--photo-grade);
}
/* scrim + grade = shared --overlay-hero (polish.css) */
.c-hero::after { content: ""; position: absolute; inset: 0; }
.c-hero::before {
  /* hairline foot so the band reads as a cut edge, not a bleed */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
  background: var(--hairline-dark);
}
.c-hero__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-head-intro);
  text-align: center;
  text-shadow: 0 2px 24px rgba(2, 6, 21, 0.45);
}
.c-hero__title { max-width: 100%; overflow-wrap: break-word; text-wrap: balance; }
.c-hero__text { max-width: var(--measure-intro); text-wrap: balance; }   /* size + colour = shared hero subtitle */

/* ---- 2. Enquiry — light band with a soft primary-blue light at the top; white form card + dark "talk to us" panel ---- */
.c-enquiry {
  position: relative; padding-block: var(--section-pad-y);
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(35, 136, 255, 0.07) 0%, rgba(35, 136, 255, 0) 70%),
    linear-gradient(180deg, var(--color-neutral-100) 0%, var(--color-white) 100%);
}
.c-enquiry__grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: stretch;   /* form card and panel share one height */
}
/* "Ask a question" jumps here: land below the glass header with the card's top edge in view */
#enquiry-title { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.c-card {
  min-width: 0; padding: var(--card-pad);   /* fill/line/radius: base.css .card--white; shadow: shared soft shadow */
}
.c-card__head { display: flex; flex-direction: column; gap: var(--space-3); }
.c-card__note { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); text-wrap: pretty; }

.c-form { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-hairline); }
.c-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.c-form .field__input { height: var(--btn-h); border-radius: var(--radius-sm); font-size: var(--fs-body); }
.c-form .field__textarea { height: 176px; }
/* empty select reads like the other placeholders; a 2px stroked chevron like the FAQ icons */
.c-form .field__select:invalid { color: var(--color-placeholder); }
.c-form .field__select option { color: var(--color-text); }
.c-form .field__select {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 1px), var(--color-blue-700) calc(50% - 1px), var(--color-blue-700) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--color-blue-700) calc(50% - 1px), var(--color-blue-700) calc(50% + 1px), transparent calc(50% + 1px));
}
/* one hairline in the card (under the head); the submit row follows the fields on the form rhythm */
.c-form__actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.c-form__submit { min-height: var(--btn-h); padding-inline: var(--btn-pad-x-lg); }
.c-form__status:empty { display: none; }
.c-form__status { font-weight: 600; color: var(--color-blue-700); }

/* dark glass panel: navy gradient + blue glow top, faint yellow glow bottom-right.
   position: relative at every width = containing block for the ::after glow, so overflow + radius clip it. */
.c-direct {
  position: relative;
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); min-width: 0;
  padding: var(--card-pad);
  border-radius: var(--radius-lg); border: 1px solid var(--hairline-dark);
  background: var(--glow-yellow), var(--gradient-dark-glow);
  color: var(--color-on-dark); box-shadow: var(--shadow-rest);
}
.c-direct::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--glow-blue-corner); opacity: .6;
}
.c-direct h2 { color: var(--color-on-dark); }
.c-direct__list { display: flex; flex-direction: column; gap: var(--space-5); }
.c-direct__items { display: flex; flex-direction: column; gap: 0; margin: 0; }
.c-direct__item { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-4); border-top: 1px solid var(--hairline-dark); }
.c-direct__item:last-child { border-bottom: 1px solid var(--hairline-dark); }
.c-direct .c-label { color: var(--color-on-dark-faint); }
.c-direct__item dd { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-on-dark); overflow-wrap: anywhere; }
.c-direct__item a {
  position: relative; display: inline-block; min-height: 44px; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3));
  color: var(--color-on-dark); font-weight: 500; transition: color var(--dur-mid) var(--ease);
}
/* same pattern as base .link-underline: full brand-yellow rule at rest, shrinks on hover */
.c-direct__item a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--space-3) + 2px); height: 2px; border-radius: 2px;
  background: var(--color-yellow-400); transform: scaleX(1); transform-origin: left;
  transition: transform var(--dur-mid) var(--ease);
}
.c-direct__item a:hover { color: var(--color-yellow-400); }
.c-direct__item a:hover::after { transform: scaleX(.6); }
/* socials sit on the panel's bottom edge (panel is as tall as the form card) */
.c-direct__social { display: flex; flex-direction: column; gap: var(--space-3); margin-top: 0; }
.c-social { display: flex; gap: var(--space-3); }
/* icon buttons on the dark panel (base .c-social a is the light look) */
.c-direct .c-social a { box-shadow: inset 0 0 0 1px var(--hairline-dark-strong); }
.c-direct .c-social a:hover { background: var(--color-hover-on-dark); box-shadow: inset 0 0 0 1px var(--color-ring-on-dark), var(--shadow-btn-white); transform: translateY(var(--btn-lift)); }
.c-direct .c-social img { filter: brightness(0) invert(1); }

/* ---- 3. Office — dark band with glow, copy block rhythm on the tokens, crisp map in a soft frame ---- */
.c-office {
  position: relative; padding-block: var(--section-pad-y); color: var(--color-white);
  background: var(--glow-yellow), var(--gradient-dark-glow);
  border-top: 1px solid var(--hairline-dark);
}
.c-office__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-8); align-items: center;
}
.c-office__copy { display: flex; flex-direction: column; gap: var(--gap-head-intro); }
.c-office__text { max-width: var(--measure-intro); text-wrap: pretty; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--color-on-dark-muted); }
.c-office__address {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-5); padding: var(--space-5);
  border-radius: var(--radius-lg); border: 1px solid var(--hairline-dark);
  background: var(--gradient-card-glass);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
}
.c-office__value { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-on-dark); text-wrap: pretty; }
/* The tile is the approved static screenshot. Toned to the navy band: grayscale + a navy/blue multiply
   wash (palette colours only). Scaled 1.12 from the bottom-right corner so the dead +/- zoom buttons
   (top-left) fall outside the frame while the OpenStreetMap credit corner stays in place. */
.c-map { position: relative; aspect-ratio: 843 / 445; }
.c-map img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.82);   /* sits calmer in the navy band */
  transform: scale(1.12); transform-origin: 100% 100%;
}
.c-map::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 61, 137, 0.38) 0%, rgba(2, 6, 21, 0.5) 100%);
  mix-blend-mode: multiply;
}
.c-map::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; border: 1px solid var(--hairline-dark-strong); pointer-events: none; }
/* brand pin over the baked navy marker: source centre 51.06% / 49.84%, after the 1.12 bottom-right
   scale = 100% - (100% - 51.06%) * 1.12 = 45.19% and 100% - (100% - 49.84%) * 1.12 = 43.82% */
.c-map__pin {
  position: absolute; left: 45.19%; top: 43.82%; z-index: 2;
  width: clamp(var(--space-4), 3.4%, var(--space-6)); aspect-ratio: 1;
  border-radius: var(--radius-pill);
  background: var(--color-yellow-400);
  box-shadow: 0 0 0 var(--space-1) rgba(255, 193, 14, 0.28), var(--shadow-btn-yellow);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.c-map__pin::after { content: ""; position: absolute; inset: 32%; border-radius: inherit; background: var(--color-blue-700); }   /* yellow + brand blue, like .btn--yellow */

/* ---- 4. FAQ: shared .faq component (base.css). Only the heading rule + band depth live here ---- */
/* same 24px yellow rule above the band heading as About */
.faq__intro h2 { position: relative; padding-top: var(--space-5); }
.faq__intro h2::before { content: ""; position: absolute; top: 0; left: 0; width: var(--space-5); height: 2px; border-radius: 2px; background: var(--color-yellow-400); }

/* ---- Responsive ---- */
/* Steps follow tokens: 1068 / 734. Below 1069 both grids stack (approved v2 layout). */
@media (min-width: 1069px) {
  /* give the direct lines more presence (lead size, airier rows) */
  .c-direct__list { gap: var(--space-6); }
  .c-direct__item { padding-block: var(--space-5); }
  .c-direct__item dd { font-size: var(--fs-lead); line-height: var(--lh-lead); }
}
@media (max-width: 1068px) {
  .c-enquiry__grid, .c-office__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .c-card, .c-direct { padding: var(--card-pad); }
  .c-form { margin-top: var(--space-6); }
}
@media (min-width: 735px) and (max-width: 1068px) {
  /* panel: contact lines side by side instead of a tall, mostly empty slab */
  .c-direct { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
  .c-direct__list { flex: 1 1 100%; }
  .c-direct__items { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; column-gap: var(--space-5); }
  .c-direct__item { border-bottom: 1px solid var(--hairline-dark); }
  .c-office__address { align-self: flex-start; }
  .c-map { max-width: 840px; }
  /* one-line title ran edge to edge at 768: balance it over two lines (1024 keeps one) */
  .c-hero__title { max-width: calc(100% - 2 * var(--space-8)); }
}
@media (max-width: 734px) {
  .c-enquiry__grid, .c-office__grid { gap: var(--space-6); }
  .c-card, .c-direct { padding: var(--card-pad-sm); }
  .c-form__row { grid-template-columns: 1fr; }
  .c-form__actions { flex-direction: column; align-items: stretch; }
  .c-form__submit { width: 100%; }
  .c-office__address { padding: var(--space-4); }
  /* keep the FAQ tint + dividers inside the 16px gutter; Bebas questions keep the display line-height */
}