/* =====================================================================
   contact.html only. Shared rules live in assets/css/styles.css.
   Tokens only: no new colours, radii, shadows or type sizes.
   ===================================================================== */

/* ---------- 1. Hero ----------------------------------------------- */
/* The stock photo puts its subject right of centre, so the 4/3 crop is
   pulled that way rather than centred. */
.contact-hero .page-hero__media img{object-position:68% center}

.contact-hero__facts{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--line);
}
.contact-hero__fact{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm);color:var(--text-muted);line-height:1.45}
.contact-hero__fact svg{width:18px;height:18px;color:var(--saffron-700);flex:none;margin-top:1px}
.contact-hero__fact b{display:block;color:var(--ink-800);font-weight:600}

.contact-hero__chip{
  position:absolute;left:clamp(-4px,-1vw,0px);bottom:clamp(14px,3vw,26px);z-index:3;
}
.contact-hero__media{position:relative}

/* ---------- 2. People and desks ----------------------------------- */
.person-card{display:flex;flex-direction:column;gap:var(--sp-4);height:100%}
/* "Business Development Manager" wraps to two lines while the other two roles do
   not, so the head gets a floor height and the three card bodies start level. */
.person-card__head{display:flex;gap:var(--sp-3);align-items:center}
@media (min-width:768px){ .person-card__head{min-height:66px} }
.person-card__name{font-size:var(--fs-h4);margin:0;line-height:1.25}
.person-card__role{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--saffron-700);margin:4px 0 0}
.person-card__role--green{color:var(--forest-600)}
.person-card__body{font-size:var(--fs-sm);color:var(--text-muted);margin:0;line-height:1.6}
.person-card__lines{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.person-card__lines li{margin:0}
.person-card__line{
  display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--ink-800);
  text-decoration:none;word-break:break-word;
}
.person-card__line svg{width:18px;height:18px;color:var(--forest-500);flex:none}
.person-card__line:hover{color:var(--saffron-800)}
.person-card__actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.person-card__actions .btn{flex:1 1 auto}
.person-card__foot{font-size:var(--fs-xs);color:var(--text-subtle);margin:0}

.desk-grid{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){ .desk-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .desk-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
.desk-tile{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-4);box-shadow:var(--sh-xs);
  transition:transform var(--dur-fast) var(--ease-hover),box-shadow var(--dur-fast) var(--ease-hover),border-color var(--dur-fast);
}
.desk-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--saffron-200)}
.desk-tile__icon{
  width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--saffron-50);color:var(--saffron-700);
}
.desk-tile:nth-child(even) .desk-tile__icon{background:var(--forest-50);color:var(--forest-600)}
.desk-tile__icon svg{width:18px;height:18px}
.desk-tile__name{font-family:var(--font-head);font-weight:600;font-size:15px;color:var(--heading);line-height:1.3;
  min-height:39px}  /* two lines, so "Institutes & agencies" does not shunt its own sub copy down */
.desk-tile__sub{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.5;margin:0}
.desk-tile__subject{
  font-size:var(--fs-2xs);color:var(--text-subtle);margin:0;
  display:inline-flex;align-items:center;gap:5px;
}
.desk-tile__subject b{font-weight:600;color:var(--ink-700)}

/* ---------- 3. Enquiry form --------------------------------------- */
.enq-layout{display:grid;gap:clamp(24px,3vw,44px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){ .enq-layout{grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr)} }

.enq-card{padding:clamp(20px,2.6vw,36px)}

.purpose{border:0;padding:0;margin:0 0 var(--sp-6);min-width:0}
.purpose__legend{
  padding:0;margin:0 0 var(--sp-3);font-family:var(--font-body);font-size:var(--fs-sm);
  font-weight:600;color:var(--ink-800);
}
.purpose__grid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){ .purpose__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .purpose__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.purpose__opt{
  position:relative;display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;
  padding:12px 13px;transition:all var(--dur-fast) var(--ease-hover);
}
.purpose__opt:hover{border-color:var(--saffron-300);background:var(--saffron-50)}
.purpose__opt input{
  appearance:none;width:20px;height:20px;flex:none;margin-top:1px;border:2px solid var(--line-strong);
  border-radius:50%;background:#fff;display:grid;place-items:center;cursor:pointer;transition:all var(--dur-fast);
}
.purpose__opt input:checked{background:var(--forest-600);border-color:var(--forest-600)}
.purpose__opt input:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.purpose__opt input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.purpose__opt:has(input:checked){border-color:var(--forest-400);background:var(--forest-50);box-shadow:var(--sh-xs)}
.purpose__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.purpose__name{font-size:14.5px;font-weight:600;color:var(--ink-800);line-height:1.3}
.purpose__hint{font-size:12.5px;color:var(--text-muted);line-height:1.45}

.enq-note{
  display:flex;gap:10px;align-items:flex-start;margin:0 0 var(--sp-5);padding:12px 14px;
  border-radius:var(--r-md);border:1px solid var(--forest-200);background:var(--forest-50);
  font-size:13.5px;color:var(--ink-700);line-height:1.55;
}
.enq-note svg{width:17px;height:17px;color:var(--forest-600);flex:none;margin-top:2px}
.enq-note b{color:var(--forest-800)}

.enq-extra{
  grid-column:1/-1;display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr));
  padding:var(--sp-4);border:1px dashed var(--line-strong);border-radius:var(--r-md);background:var(--surface-warm);
}
.enq-extra[hidden]{display:none}
.enq-extra__head{grid-column:1/-1;font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--saffron-800);margin:0}
@media (max-width:599.98px){ .enq-extra{grid-template-columns:minmax(0,1fr)} }

/* Candidate and careers variant of the same conditional block. */
.enq-extra--green{border-color:var(--forest-300);background:var(--surface-2)}
.enq-extra--green .enq-extra__head{color:var(--forest-700)}

/* styles.css sets .field{display:flex}, which beats the UA [hidden] rule, so the
   conditional company field needs this local guard. See sharedRequests. */
.field[hidden]{display:none}

.enq-submit{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-6)}
.enq-submit .btn{flex:0 0 auto}

.enq-success__next{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  text-align:left;font-size:var(--fs-sm);color:var(--ink-700);
}
.enq-success__next li{display:flex;gap:9px;margin:0;line-height:1.55}
.enq-success__next svg{width:17px;height:17px;color:var(--forest-600);flex:none;margin-top:3px}

.enq-rail{display:flex;flex-direction:column;gap:clamp(16px,2vw,20px)}
@media (min-width:1024px){ .enq-rail{position:sticky;top:calc(var(--header-h) + 20px)} }
.enq-rail h3{font-size:16.5px;margin:0 0 var(--sp-3)}
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.checklist li{display:flex;gap:9px;margin:0;font-size:var(--fs-sm);color:var(--ink-700);line-height:1.55}
.checklist svg{width:17px;height:17px;color:var(--forest-500);flex:none;margin-top:3px}

.promise{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.promise li{display:flex;gap:12px;margin:0}
.promise__icon{
  width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;
  background:var(--saffron-50);color:var(--saffron-700);
}
.promise__icon svg{width:18px;height:18px}
.promise b{display:block;font-size:14.5px;color:var(--ink-800);font-weight:600;line-height:1.35}
.promise span{display:block;font-size:13px;color:var(--text-muted);line-height:1.55;margin-top:2px}

/* ---------- 4. Office, map, hours --------------------------------- */
.office-layout{display:grid;gap:clamp(20px,2.6vw,36px);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:1024px){ .office-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }
.office-col{display:flex;flex-direction:column;gap:clamp(16px,2vw,20px)}

.map-card{padding:0;overflow:hidden;position:relative}
.map-stage{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
/* On desktop the address, hours and QR cards stack taller than a 16/11 map, which
   left a ragged white gap under it. The map card stretches and the stage takes up
   the slack instead, so both columns finish level. */
@media (min-width:1024px){
  .office-layout{align-items:stretch}
  .map-card{display:flex;flex-direction:column}
  .map-stage{flex:1 1 auto;aspect-ratio:auto;min-height:420px}
}
.map-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-stage iframe[hidden]{display:none}

.map-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--sp-5)}
.map-ph[hidden]{display:none}
.map-ph__art{position:absolute;inset:0;z-index:0}
.map-ph__grid{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--forest-300) 1.3px,transparent 1.4px);
  background-size:20px 20px;opacity:.45;
}
.map-ph__roads{position:absolute;inset:0;width:100%;height:100%}
.map-ph__body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:34ch}
.map-ph__pin{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--saffron-500);color:var(--ink-900);box-shadow:var(--sh-saffron);
}
.map-ph__pin svg{width:24px;height:24px}
.map-ph__name{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--heading);margin:0}
.map-ph__sub{font-size:13px;color:var(--text-muted);margin:0;line-height:1.5}
.map-card__foot{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);align-items:center;justify-content:space-between;
  padding:12px var(--sp-5);border-top:1px solid var(--line-soft);background:var(--ink-50);
  font-size:var(--fs-xs);color:var(--text-muted);
}

.addr-card{display:flex;gap:14px;align-items:stretch}
.addr-card__body{min-width:0;flex:1}
.addr-card address{font-style:normal;font-size:15px;line-height:1.7;color:var(--ink-700);margin:0 0 var(--sp-4)}
.addr-card address b{display:block;color:var(--heading);font-family:var(--font-head);font-size:var(--fs-h4);margin-bottom:6px;font-weight:700}

.hours{width:100%;font-size:var(--fs-sm);margin:0}
.hours th,.hours td{padding:9px 0;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours th{font-weight:600;color:var(--ink-800)}
.hours td{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}
.hours td.is-closed{color:var(--text-subtle)}

.qr-card{display:flex;gap:var(--sp-4);align-items:center}
.qr{
  width:112px;height:112px;flex:none;padding:8px;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-xs);color:var(--forest-800);
}
.qr svg{width:100%;height:100%;display:block;vertical-align:top}

/* ---------- 5. What happens next ---------------------------------- */
/* .u-mb-12 does not exist in styles.css (u-mb stops at 8), so the stepper sets
   its own clearance over the channel cards. See sharedRequests. */
#expectations .stepper{margin-bottom:clamp(40px,4vw,64px)}

.channel-grid{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .channel-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.channel__head{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-3)}
.channel__head h3{margin:0;font-size:16.5px}
/* "Email and this form" takes two lines in a narrow column; a floor height keeps
   the three reply-time numbers on one line with each other. */
@media (min-width:640px){ .channel__head{min-height:52px;align-items:flex-start} }
.channel__reply{display:flex;align-items:baseline;gap:8px;margin:0 0 var(--sp-2)}
/* Three narrow columns at tablet width shred "One working day" into three lines
   beside its caption, so the caption drops under the number instead. */
@media (min-width:640px) and (max-width:1023.98px){
  .channel__reply{flex-direction:column;align-items:flex-start;gap:2px}
}
.channel__reply b{
  font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--saffron-700);
  letter-spacing:-.02em;line-height:1;
}
.channel__reply span{font-size:var(--fs-xs);color:var(--text-muted)}

/* ---------- 6. WhatsApp band (the one dark section) --------------- */
.wa-band{padding-bottom:clamp(8rem,6rem + 8vw,12rem)}
/* .duo centres its columns; the chat thread is much taller than the button
   stack, which left a dead band above the buttons at 1440. */
.wa-band .duo{align-items:start}
.wa-actions{display:flex;flex-direction:column;gap:10px;max-width:460px}
.wa-actions .btn{justify-content:flex-start;text-align:left;white-space:normal}
.wa-actions .btn svg{margin-right:2px}
.wa-note{font-size:var(--fs-sm);color:var(--text-on-dark-muted);line-height:1.6;margin:var(--sp-5) 0 0}
.wa-note b{color:#fff}

.wa-thread{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.wa-thread .wa-card{max-width:min(340px,100%)}
.wa-thread .wa-card--out{align-self:flex-end;background:var(--forest-50)}
.wa-thread__stamp{font-size:var(--fs-xs);color:var(--text-on-dark-muted);margin:0}

/* ---------- 7. Fraud notice --------------------------------------- */
.fraud-panel{
  border:1px solid var(--saffron-200);background:var(--saffron-50);border-radius:var(--r-2xl);
  padding:clamp(22px,3vw,40px);
}
.fraud-panel__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:var(--sp-5)}
.fraud-panel__icon{
  width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;
  background:var(--saffron-500);color:var(--ink-900);
}
.fraud-panel__icon svg{width:26px;height:26px}
.fraud-panel h2{margin:0 0 var(--sp-2)}
.fraud-list{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr);
}
@media (min-width:768px){ .fraud-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fraud-list li{
  display:flex;gap:10px;margin:0;background:#fff;border:1px solid var(--saffron-100);
  border-radius:var(--r-md);padding:13px 15px;font-size:var(--fs-sm);color:var(--ink-700);line-height:1.55;
}
.fraud-list svg{width:18px;height:18px;color:var(--forest-600);flex:none;margin-top:2px}
.fraud-list b{color:var(--ink-800)}
.fraud-panel__foot{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* ---------- 8. CTA band art --------------------------------------
   .cta-band__ridge and .cta-band__figs are only declared in pages/home.css,
   so on every other page that copies the band from index.html the ridge and
   the climbers render at auto size and disappear behind the sky. These two
   rules are copied verbatim from home.css; they belong in styles.css beside
   the rest of .cta-band. Reported in sharedRequests.
   --ridge-h and --crest are already set on .cta-band in styles.css, so the
   crest and the figures line up at every width with no rectangular seam. */
.cta-band__ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--ridge-h);z-index:-1;display:block}
.cta-band__figs{
  position:absolute;left:50%;translate:-50% 0;
  bottom:calc(var(--ridge-h) * var(--crest));
  width:clamp(158px,23vw,300px);height:auto;z-index:-1;display:block;
}

/* ---------- 9. FAQ ------------------------------------------------- */
.faq-layout{display:grid;gap:clamp(24px,3vw,56px);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){ .faq-layout{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)} }
.faq-aside{position:sticky;top:calc(var(--header-h) + 24px)}
@media (max-width:1023.98px){ .faq-aside{position:static} }