/* ==========================================================================
   Contact v2 — new sections for contact-2.html, built from Figma
   (file CR70V8ZRQR9Qg7LWefymrS, desktop frame 1775:16911, mobile 1775:17059).
   Loaded only by contact-2.html, after contact.css, so contact.html is
   provably untouched. The page reuses contact.css's components almost
   wholesale (.audience / .contact-card / .enquiry / .routing / .enquiry-form
   / .offices / .office-row); only the deltas between the old design and the
   new one live here, each behind a --v2 modifier.
   ========================================================================== */

/* ---------- Hero ----------
   Figma 1775:16912: 800px tall, #1a2c45 ground (= --color-deep-blue), the
   volume render bleeding off the top, content bottom-aligned in a 711px
   column with 76px between the breadcrumb and the title block. .hero's own
   defaults already carry the 711/76/32 geometry, so only ground, height and
   the artwork's placement need saying. */
.hero--v2 { background-color: var(--color-deep-blue); min-height: 800px; isolation: isolate; }
/* hero-volume.png is baked on an OPAQUE forest ground (#163a2b) — it was cut
   for the forest-branded pages. Grayscaling it and stretching the levels so
   the ground clips to black (its luma is 46/255; brightness 0.92 + contrast
   1.5 maps that to 0 and the brightest line to 1) turns it into a pure
   light-on-black map, which "screen" then lays over the navy ground with no
   visible plate edge. `isolation` keeps the blend inside this section. */
.hero--v2 .hero__bg {
  top: 0;
  left: 0;
  width: 1440px;
  filter: grayscale(1) brightness(0.88) contrast(1.8);
  mix-blend-mode: screen;
}
/* the legibility gradient in home.css is forest-tinted (it was written for
   the homepage hero); re-tint it to the navy ground */
.hero--v2::after {
  background: linear-gradient(180deg, transparent 34%, rgba(25, 44, 69, 0.72) 78%);
}

/* Distance from the container's outer edge to the viewport edge: zero until
   the viewport passes --container-max, then half the surplus. A plain
   --container-pad only reaches the container, so bands using it stopped
   short of the screen past 1440. 100vw counts the scrollbar, so the
   sections using it clip the few px of overshoot. */
.audience,
.enquiry,
.offices {
  --page-bleed: calc((100vw - min(100vw, var(--container-max))) / 2);
  --bleed-x: calc(var(--container-pad) + var(--page-bleed));
  overflow-x: clip;
}

/* ---------- Who to Contact ----------
   Figma 1775:16921. Same .audience shell as contact.html (almost-white,
   120/120, 80px between head and cards) but the head loses its paragraph
   and the six-card 3-up grid becomes four cards in a 2-up grid that sits in
   the 8-column content track — shifted 16px left of it so the cards' 16px
   inner padding puts the text back on the 469px column line. */
.audience--v2 .audience__main h2 { max-width: none; }
.audience--v2 .audience__grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  /* 12 cols / 32px gutters: 4-col label block = 437.33, content track starts
     at 469.33; minus the card's own 16px padding = 453.33 */
  margin-left: calc((100% - 352px) / 3 + 112px);
}
/* Figma pads the card vertically only — the body and the link each carry the
   16px inset themselves, so the maze artwork bleeds to the card's left edge */
/* no bottom padding: the link's foot is flush with the card's edge, so no
   strip of card shows under it */
.audience--v2 .contact-card { padding: 16px 0 0; justify-content: space-between; }
.audience--v2 .contact-card__body { padding: 0 0 0 16px; gap: 8px; }
.audience--v2 .contact-card__desc { line-height: 20px; }
/* the artwork is a 708px square; the global `img { max-width: 100% }` was
   clamping it to the card's width while the height stayed 708, and
   card-maze.svg carries preserveAspectRatio="none", so it stretched to fill
   instead of overflowing the card */
.audience--v2 .contact-card__graphic { max-width: none; }
/* the link sits on the same opaque foot the Principles cards use for their
   numbers — the card's own colour, covering the artwork behind it */
.contact-card__link {
  position: relative;
  z-index: 1;
  margin-top: auto;
  background: var(--color-blue-5);
  border-top: 1px solid var(--color-blue-10);
  padding: 4px 8px 4px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-night);
}
.contact-card__link:hover { text-decoration: underline; text-underline-position: from-font; }

/* ---------- Contact form ----------
   Figma 1775:16967. Night ground, 120/120, and — unlike every other section
   — no right page padding: the 939px form column runs from the 469px column
   line to the viewport edge, 32px past the container. */
.enquiry--v2 .enquiry__form { gap: var(--sp-80); }
/* The controls stay on the container and only the rule reaches the screen
   edge, so the line cannot be the control's own border — each row draws it
   as a pseudo-element that bleeds past the gutter instead. */
.enquiry--v2 .enquiry-form .field__control { border-bottom: none; }
.enquiry--v2 .enquiry-form > .row2,
.enquiry--v2 .enquiry-form > .field { position: relative; }
.enquiry--v2 .enquiry-form > .row2::after,
.enquiry--v2 .enquiry-form > .field::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(-1 * var(--bleed-x));
  bottom: 0;
  height: 1px;
  background: var(--color-gray-40);
}

/* Routing rail: a 201px column with a full-height hairline, of which the
   first 82px are drawn bright to mark the active step; steps 2 and 3 sit at
   10% so the rail reads as progress rather than a list. */
.routing--v2 {
  position: relative;
  width: 201px;
  gap: 32px;
  padding: 16px 0 16px 32px;
  border-left-color: var(--color-gray-50);
}
.routing--v2::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 82px;
  background: var(--color-almost-white);
}
/* the step captions overhang the 169px text column in Figma rather than
   wrapping inside it, which is what keeps each step exactly two lines tall */
.routing--v2 .routing__item h4 { font-size: 28px; line-height: 1; letter-spacing: -0.28px; white-space: nowrap; }
.routing--v2 .routing__item p { margin-top: 0; line-height: 20px; color: var(--color-almost-white); white-space: nowrap; }
.routing--v2 .routing__item + .routing__item { opacity: 0.1; }

/* The intro's second line is display type, not body copy: 40px Newsreader at
   50% on the same leading as the heading above it, with no gap between them. */
.enquiry--v2 .enquiry__intro p {
  margin-top: 0;
  max-width: 831px;
  font-family: var(--font-heading);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-gray-40);
}

/* paired fields are 455 / rest, not 50-50 */
.enquiry--v2 .enquiry-form .row2 { grid-template-columns: minmax(0, 455px) 1fr; }
/* two consent checkboxes side by side under the message field */
.consent-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.enquiry--v2 .enquiry-form .consent { gap: 8px; padding: 0 16px 10px 0; }
/* Figma draws a plain 16px square — no radius — that fills almost-white when
   checked and carries a night tick; the native control renders a rounded box
   with the UA's own glyph, so it is replaced outright. */
.enquiry--v2 .enquiry-form .consent input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 4px 0 0;
  border: 1px solid var(--color-gray-40);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.enquiry--v2 .enquiry-form .consent input:checked {
  background: var(--color-almost-white);
  border-color: var(--color-almost-white);
  /* the 11px tick from the design, drawn at the same 1px square-cap stroke */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M1.26042 6.91797L4.125 9.28125L9.73958 1.71875' stroke='%2317223A' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.enquiry--v2 .enquiry-form .consent input:focus-visible { outline: 2px solid var(--color-almost-white); outline-offset: 2px; }
.enquiry--v2 .enquiry-form .btn { width: 203px; }

/* ---------- Offices ----------
   Figma 1775:17010. Light-blue (not light-green), the maze artwork mirrored
   into the empty label column, and the same edge-bleeding 939px content
   track as the form above. The entity name now sits ABOVE the hairline
   rather than below it, so the rule moves from .office-row to its line. */
.offices--v2 { background: var(--color-light-blue); }
.offices--v2 .offices__graphic {
  left: -341px;
  top: 3px;
  width: 818px;
  height: 818px;
  /* square artwork: without this the global img cap squashes it to the
     container width while the height holds, and the SVG's
     preserveAspectRatio="none" stretches rather than crops */
  max-width: none;
  transform: scaleX(-1);
  opacity: 0.5;
}
.offices__label { display: none; }
/* the row rules run out to the screen edge, not just the container's */
.offices--v2 .offices__main { margin-right: calc(-1 * var(--bleed-x)); }
.offices--v2 .offices__main h2 { margin-bottom: var(--sp-80); }
.offices--v2 .office-row { border-top: none; padding: 0; }
.offices--v2 .office-row + .office-row { margin-top: 32px; }
.offices--v2 .office-row__cat { margin-bottom: 4px; }
.offices--v2 .office-row__line {
  border-top: 1px solid var(--color-blue-10);
  padding-top: 16px;
  gap: 0;
  align-items: center;
}
.offices--v2 .office-row__addr {
  width: 417.5px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 16px;
  line-height: 20px;
  color: var(--color-night);
}

/* ---------- Footer ---------- */
.footer-col__contact-lead { font-family: var(--font-body); font-size: 13px; color: var(--color-gray-40); margin-bottom: 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .audience--v2 .audience__grid { margin-left: 0; }
  .offices--v2 .office-row__addr { width: auto; }
}

@media (max-width: 992px) {
  .enquiry--v2 .enquiry__form { margin-right: 0; }
  .offices--v2 .offices__main { margin-right: 0; }
  .routing--v2 { width: 100%; padding: 16px 0 16px 24px; border-left: 1px solid var(--color-gray-50); }
  .offices--v2 .office-row__line { align-items: flex-start; }
}

/* Mobile — Figma 1775:17059 (375). Section targets: hero 683 (+64 header),
   Who to Contact 598, Contact form 1484, Offices 1056. */
@media (max-width: 768px) {
  /* Hero: content bottom-aligned with a 32px foot, the artwork floating in
     the empty upper half. home.css's mobile hero rules centre .hero__inner
     and flatten .hero__content for the homepage's stats hero — this hero has
     neither, so put both back to a plain left-aligned column. */
  .hero--v2 { min-height: 683px; padding: 0 0 32px; }
  /* the artwork is centred and drawn wide enough that its dense band fills
     roughly the top 350px of the hero, as it does in the 375 frame */
  .hero--v2 .hero__bg { top: 0; width: 950px; }
  .hero--v2 .hero__inner { flex-direction: column; align-items: stretch; text-align: left; gap: 0; }
  .hero--v2 .hero__content { display: flex; flex-direction: column; gap: 12px; width: 100%; }
  .hero--v2 .hero__title { line-height: 0.9; }
  .hero--v2 .hero__text { line-height: 20px; }

  /* Who to Contact: 80/80 (the shared --sp-120 collapses to 56 here, which
     is the wrong number for this section), 44px down to the card slider */
  .audience--v2 { padding-top: 80px; padding-bottom: 80px; }
  .audience--v2 .container { gap: 44px; }
  .audience--v2 .audience__head { row-gap: 16px; }
  /* contact.css turns this into an edge-to-edge slider with a negative
     gutter; the desktop track offset above resets margin-left, which was
     also cancelling that and pushing the first card 16px off the container */
  .audience--v2 .audience__grid {
    gap: 24px;
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--bleed-x));
  }
  .audience--v2 .contact-card { flex: 0 0 300px; }

  /* the 375 frame carries the eyebrow above the Offices heading */
  .offices__label { display: block; margin-bottom: 16px; }
  /* 708px square at x=-167, y=-392 in the frame */
  .offices--v2 .offices__graphic { left: -167px; top: -392px; width: 708px; height: 708px; transform: none; }

  /* Contact form: 32 top / 80 bottom, fields edge-to-edge, 44px rhythm */
  .enquiry--v2 { padding-top: 32px; padding-bottom: 80px; }
  .enquiry--v2 .enquiry__inner { row-gap: 64px; }
  .enquiry--v2 .enquiry__form { gap: 44px; }
  .routing--v2 { padding: 16px 0 16px 16px; gap: 32px; }
  .routing--v2::before { height: 62px; }
  .routing--v2 .routing__item h4 { font-size: 22px; line-height: 22px; }
  .routing--v2 .routing__item p { margin-top: 8px; font-size: 12px; line-height: 16px; }
  .enquiry--v2 .enquiry__intro h3 { font-size: 24px; }
  .enquiry--v2 .enquiry__intro p { margin-top: 8px; }
  .enquiry--v2 .enquiry__intro p { font-size: 24px; letter-spacing: -0.24px; }
  .enquiry--v2 .enquiry-form { gap: 44px; }
  .enquiry--v2 .enquiry-form .row2 { grid-template-columns: none; }
  .consent-row { grid-template-columns: 1fr; row-gap: 16px; }
  .enquiry--v2 .enquiry-form .consent { padding-left: var(--container-pad); padding-right: var(--container-pad); }
  .enquiry--v2 .enquiry-form .btn { width: auto; margin: 0 var(--container-pad); }

  /* Offices: the artwork sits above the copy, which starts 300px down */
  /* 336 = Figma's 300px of artwork headroom plus the 36px the hidden
     "Global presence" label would otherwise have occupied */
  .offices--v2 { padding-top: 336px; padding-bottom: 80px; }
  .offices--v2 .offices__graphic { display: block; left: -167px; top: -392px; width: 708px; height: 708px; transform: none; }
  .offices--v2 .offices__inner { row-gap: 16px; }
  .offices--v2 .offices__main h2 { margin-bottom: 52px; }
  .offices--v2 .office-row + .office-row { margin-top: 44px; }
  /* the rule reaches both screen edges here while the city and address stay
     on the container, so the padding gives back what the margin took */
  .offices--v2 .office-row__line {
    flex-direction: column;
    gap: 16px;
    margin-left: calc(-1 * var(--bleed-x));
    margin-right: calc(-1 * var(--bleed-x));
    padding-left: var(--bleed-x);
    padding-right: var(--bleed-x);
  }
  .offices--v2 .office-row__city { font-size: 28px; letter-spacing: -0.28px; }
}

/* the label column is empty on this section (Figma renders "Global presence"
   at opacity 0); it only holds the 4-column offset open on desktop */
@media (max-width: 992px) { .offices__label-slot { display: none; } }