/**
 * CONTACT US PAGE
 * =========================================================================
 * Figma: node 530:37 (1440 x 3445). Self-contained .a3-ct2-* namespace,
 * loaded only on page-contact.php.
 *
 * .a3-ct2- rather than .a3-ct-: that prefix is already the Core Team page's.
 */

.a3-contact-page {
  --a3-ct2-ink: #030303;
  --a3-ct2-head: #18181b;
  --a3-ct2-muted: #52525b;
  --a3-ct2-line: #e4e4e7;
  --a3-ct2-brand: #ff6900;
}

/* =========================================================================
 * CONTACT FORM - node 530:219 (1440 x 949)
 * ========================================================================= */

/* Figma's band is 949 with a fixed 929 card. The real CF7 form is longer than
 * the mock's, so the card - and the band - grow past it. min-height holds the
 * design's floor without capping real content. */
.a3-ct2-form {
  min-height: 949px;
  padding: 10px;
  background: #ffffff;
}

/* Figma: a 1420 container, 48px side padding, two columns 96 apart. */
.a3-ct2-form__inner {
  display: grid;
  grid-template-columns: 516.8px 731.2px;
  gap: 96px;
  align-items: start;
  /* 1420 is the container's own width in the frame; the section's 10px
   * padding already accounts for the gap to the 1440 edge, so subtracting it
   * again here made this 1400. */
  width: min(100%, 1420px);
  margin-inline: auto;
  padding: 0 48px;
}

/* Inter 400, 48/55.2 (115%). No max-width: the node is 516.8 because it hugs
 * its longest line, and capping there makes the browser wrap early - the trap
 * recorded in CONTACT-PAGE.md. The column already constrains it. */
.a3-ct2-form__heading {
  margin: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 55.2px;
  letter-spacing: -0.02em;
  color: var(--a3-ct2-ink);
}

/* The 96 x 4 brand bar under the heading: 24 below it, 32 above the copy. */
.a3-ct2-form__rule {
  display: block;
  width: 96px;
  height: 4px;
  margin: 24px 0 32px;
  background: var(--a3-ct2-brand);
}

/* Inter 400 18/29.25 (162.5%), #52525B */
.a3-ct2-form__intro {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 29.25px;
  letter-spacing: normal;
  color: var(--a3-ct2-muted);
}

/* Figma: 517 x 547, sitting 20px under the copy. */
.a3-ct2-form__image {
  display: block;
  width: 100%;
  height: 547px;
  margin-top: 20px;
  object-fit: cover;
}

/* The form card: 731.2 wide, 48 padding all round, white on a soft shadow. */
.a3-ct2-form__card {
  padding: 48px;
  background: #ffffff;
  /* No border - the shadow alone lifts the card, same as the office cards.
   * The shadow is the real value off the card's "Overlay+Shadow" layer: a
   * wide, very soft lift tinted with the border colour rather than black. A
   * generic rgba(0,0,0,.1) reads far darker and tighter than the design. */
  box-shadow: 0 25px 50px -12px rgba(228, 228, 231, 0.5);
}

.a3-ct2-form__card-heading {
  margin: 0 0 40px; /* the card's itemSpacing */
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.02em;
  color: var(--a3-ct2-head);
}

/* CF7 renders each field in its own <p>. Restating the metrics because
 * global.css styles `p` directly and a direct rule beats inheritance. */
.a3-ct2-form__card .wpcf7 p {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.5;
}

/* Field metrics are the home page's, not this node's: the same CF7 form is on
 * both pages and it should not change size between them. service.css:1063
 * is the source of these numbers. */
.a3-ct2-form__card input[type="text"],
.a3-ct2-form__card input[type="email"],
.a3-ct2-form__card input[type="tel"],
.a3-ct2-form__card textarea,
.a3-ct2-form__card select {
  width: 100%;
  padding: 14px 0 14.5px;
  /* Not the 1.5 the wrapping <p> passes down, which would make every field
   * taller than the same field on the home page. These are that page's
   * computed values, read off the rendered form rather than guessed. */
  line-height: 19px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  font-size: 16px;
  color: #71717a;
  box-shadow: none;
}

/* intl-tel-input reserves room for the flag and dial code with a left pad.
 * service.css pins it at 105 !important, which at 16px leaves "Contact Number"
 * almost touching "+91" - the home page ends up at 120, so match that. The
 * !important is to answer that rule, not to win an argument with the cascade. */
.a3-ct2-form__card .iti__tel-input,
.a3-ct2-form__card .a3-phone-group .form-control,
.a3-ct2-form__card input[type="tel"] {
  padding-left: 120px !important;
  font-size: 16px;
}

/* CF7's rows="10" otherwise leaves a box three times this tall. 70 is what the
 * same textarea computes to on the home page. */
.a3-ct2-form__card textarea {
  height: 70px;
}

.a3-ct2-form__card ::placeholder {
  color: #71717a;
  opacity: 1;
}

/* global.css floors every button at min-height 56 and forces border-radius 0
 * with !important; service.css forces the submit's background. All restated. */
.a3-ct2-form__card input.wpcf7-submit,
.a3-ct2-form__card .wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 0;
  height: 56px;
  padding: 0 40px;
  background: var(--a3-ct2-brand) !important;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
}

.a3-ct2-form__card .wpcf7-spinner {
  position: absolute;
}

/* =========================================================================
 * RESPONSIVE - no mobile frame in the file, so this is judgement, at the
 * breakpoints the rest of the theme uses.
 * ========================================================================= */

@media (max-width: 1399.98px) {
  .a3-ct2-form__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 48px;
    padding: 0 24px;
  }
}

@media (max-width: 991.98px) {
  /* One column: the form card needs its width more than the copy does. */
  .a3-ct2-form__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .a3-ct2-form__heading {
    font-size: 38px;
    line-height: 1.15;
  }

  .a3-ct2-form__image {
    height: 380px;
  }
}

@media (max-width: 767.98px) {
  .a3-ct2-form {
    padding: 48px 0;
  }

  .a3-ct2-form__inner {
    width: calc(100% - 32px);
    padding: 0;
  }

  .a3-ct2-form__heading {
    font-size: 30px;
  }

  .a3-ct2-form__card {
    padding: 24px;
  }

  .a3-ct2-form__image {
    height: 260px;
  }
}

/* =========================================================================
 * OUR GLOBAL OFFICES - node 539:329 (1440 x 981)
 *
 * Centred header, then three 405-wide cards in a 1280 row (80 side gutters,
 * 32 between). Each card is a 256-tall photo above a 33px-padded address
 * block, split by a rule under the city.
 * ========================================================================= */
.a3-ct2-offices {
  padding: 97px 0 148px;
  background: #ffffff;
}

.a3-ct2-offices__inner {
  width: min(100% - 32px, 1280px);
  margin-inline: auto;
}

.a3-ct2-offices__header {
  text-align: center;
}

.a3-ct2-offices__eyebrow {
  display: block;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20.02px;
  /* The PNG export renders this uppercase and tracked out; the dump only
   * carries the source string "Global Presence", so neither is visible there.
   * Left as sentence case in the field so the editor types it normally. */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #4b5563;
}

.a3-ct2-offices__heading {
  margin: 16px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 55.2px;
  color: #030303;
}

/* 16px/26 - not global.css's blanket p{font-size:16px}/1.5, which would give
 * 24 and lose a line of the two-line intro. */
.a3-ct2-offices__intro {
  /* 609 is a real constraint here, not the usual hugged-width trap: this node
   * wraps in the design, so its width is what makes it two lines rather than
   * the length of its longest line. */
  max-width: 609px;
  margin: 27px auto 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #27272a;
}

.a3-ct2-offices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 68px 0 0;
  padding: 0;
  list-style: none;
}

.a3-ct2-office {
  display: flex;
  flex-direction: column;
  min-height: 505px;
  overflow: hidden;
  background: #ffffff;
  /* No border - the shadow alone lifts the card. Two stacked drop shadows off
   * the card's "Overlay+Shadow" layer, which the node dump only surfaces under
   * `effects`; the tree view shows that layer as a transparent white rectangle
   * and nothing else. */
  box-shadow:
    0 1px 2px -1px rgba(0, 0, 0, 0.1),
    0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.a3-ct2-office__media {
  height: 256px;
  overflow: hidden;
}

.a3-ct2-office__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.a3-ct2-office__body {
  padding: 32px 33px 26px;
}

/* A rule between the city and the contact rows. The Figma dump reports this
 * frame's stroke as w=0.0 - which normally means "draws nothing", and has been
 * a false positive here before - but the PNG export shows the line clearly, so
 * the export wins. */
.a3-ct2-office__place {
  padding-bottom: 25px;
  border-bottom: 1px solid #c9ccd1;
}

.a3-ct2-office__country {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  color: #030303;
}

.a3-ct2-office__city {
  margin: 4px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  color: #4b5563;
}

/* Icon and text on one row, the icon holding its 20px so a two-line address
 * stays aligned to the same left edge as a one-line one. */
.a3-ct2-office__row {
  display: flex;
  gap: 16px;
  margin: 33px 0 0;
  font-size: 16px;
  line-height: 23.2px;
}

.a3-ct2-office__row + .a3-ct2-office__row {
  margin-top: 17px;
}

.a3-ct2-office__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  line-height: 0;
}

.a3-ct2-office__text {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 23.2px;
  color: #030303;
}

.a3-ct2-office__phone,
.a3-ct2-office__email {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20.02px;
  color: #030303;
  text-decoration: none;
}

.a3-ct2-office__email:hover,
.a3-ct2-office__email:focus {
  color: #ff6900;
  text-decoration: underline;
}

/* ---- phones ----
 * One card per row. The 505 floor is a desktop measurement; on a narrow card
 * the address wraps further and the card is taller than that anyway. */
@media (max-width: 767.98px) {
  .a3-ct2-offices {
    padding: 56px 0 64px;
  }

  .a3-ct2-offices__heading {
    font-size: 32px;
    line-height: 38px;
  }

  .a3-ct2-offices__grid {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

  .a3-ct2-office {
    min-height: 0;
  }
}

/* =========================================================================
 * Our Global Offices - slider
 *
 * With four offices the three-column grid orphans the fourth card on its own
 * row. contact.js hands the row to Slick when there are four or more, so
 * everything here is scoped to .slick-initialized: the rules can only apply
 * when Slick is actually driving the element, and a page with three offices
 * renders exactly as it did before.
 * ========================================================================= */

/* Grid on its own; Slick builds its own track and needs a plain block, or the
 * cards get laid out twice. */
.a3-ct2-offices__grid.slick-initialized {
  display: block;
}

/* Slick sets each slide's width, so the 32px grid gap no longer applies. The
 * slide IS the card here (Slick puts .slick-slide straight onto the <li>), so
 * the gutter is a symmetric 16px margin rather than padding - padding would
 * push the card's own border outward.
 *
 * Symmetric, not margin-right only: a one-sided gutter makes .slick-list wider
 * than the frame on one edge, which showed a 32px sliver of the fourth card
 * poking out on the right. */
.a3-ct2-offices__grid.slick-initialized .a3-ct2-office {
  height: auto;          /* slick-track stretches slides; let content decide */
  margin: 0 16px;
}

/* Equal-height cards: slick-track is flex, so the slides can be stretched to
 * the tallest one. Without this the UK card - which has no address - sits
 * shorter than its neighbours and the row looks ragged. */
.a3-ct2-offices__grid.slick-initialized .slick-track {
  display: flex;
  align-items: stretch;
}

.a3-ct2-offices__grid.slick-initialized .slick-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

/* Pull the list out by the same 16px each side so the first and last cards sit
 * flush with the section's edges rather than inset by their own gutter.
 *
 * The vertical padding is what makes the card edges visible again: the cards
 * carry no border, only a drop shadow, and .slick-list clips to the track's
 * exact height - so the shadow along the bottom edge was being cut off and the
 * cards read as though their outline had vanished. The negative margin keeps
 * the extra space from pushing the dots down. */
.a3-ct2-offices__grid.slick-initialized .slick-list {
  margin: -6px -16px -10px;
  padding: 6px 0 10px;
}

/* ---- chevron nav, above the row ----------------------------------------- */

/* Slick fills this via appendArrows. Empty means the slider never started (3
 * or fewer offices), and then it must not reserve space. */
.a3-ct2-offices__nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 40px 0 -28px;   /* sits in the gap the grid's own top margin opens */
}

.a3-ct2-offices__nav:empty {
  display: none;
}

.a3-ct2-offices__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;

  color: #FF6900;
  background: #fff;
  border: 1px solid #E4E4E7;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.a3-ct2-offices__arrow:hover {
  background: #FFF7ED;
  border-color: #FF6900;
}

.a3-ct2-offices__arrow:focus-visible {
  outline: 2px solid #FF6900;
  outline-offset: 2px;
}

/* Slick adds .slick-disabled at each end of a non-infinite slider. */
.a3-ct2-offices__arrow.slick-disabled {
  color: #A1A1AA;
  cursor: default;
  opacity: .55;
}

.a3-ct2-offices__arrow.slick-disabled:hover {
  background: #fff;
  border-color: #E4E4E7;
}

/* ---- dots --------------------------------------------------------------- */

/* In flow rather than Slick's absolute default. The arrows moved above the
   row, so the dots no longer have to clear them. */
.a3-ct2-offices__grid.slick-initialized .slick-dots {
  position: static;
  margin: 30px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.a3-ct2-offices__grid.slick-initialized .slick-dots li,
.a3-ct2-offices__grid.slick-initialized .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
}

.a3-ct2-offices__grid.slick-initialized .slick-dots li button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D4D4D8;
  opacity: 1;
  transition: background-color .2s ease;
}

.a3-ct2-offices__grid.slick-initialized .slick-dots li.slick-active button::before {
  background: #FF6900;
}



@media (max-width: 991px) {
  .a3-ct2-offices__nav {
    margin: 28px 0 -20px;
  }

  .a3-ct2-offices__grid.slick-initialized .slick-dots {
    margin-top: 24px;
  }

  .a3-ct2-offices__grid.slick-initialized .a3-ct2-office {
    margin: 0 8px;
  }

  .a3-ct2-offices__grid.slick-initialized .slick-list {
    margin: 0 -8px;
  }
}