/* ═══════════════════════════════════════════════════════
   CONTACT PAGE — Page-Specific Styles
   ═══════════════════════════════════════════════════════ */

/* .ct-squiggle and .ct-careers* now live in styles.css (shared
   cross-page components) since contact.html, locations.html and
   people.html all reuse the copper Careers CTA band. */

/* ── 1. Hero ───────────────────────────────────────── */
.ct-hero {
  position: relative;
  height: 60vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ct-hero__bg {
  position: absolute;
  inset: 0;
}

.ct-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 30 Sept: this used to carry `transform: scale(2.19)` with a shifted origin to
     reproduce the mockup's tight crop. That is a 2.19x magnification of an image
     that object-fit had already sized to the band, so better than half the detail
     was invented — which is the blur Victor reported, and no amount of source
     resolution would have fixed it (2.19x would need a ~4400px original).

     object-position does the same framing job by choosing which part of the photo
     to keep, without magnifying anything. Biased below centre so the band still
     favours the lit bulbs the original crop was chasing. The image now renders at
     roughly 1:1 on a full-width band. */
  object-position: 50% 62%;
}

.ct-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 16, 12, 0.55) 0%, rgba(20, 16, 12, 0.15) 55%, rgba(20, 16, 12, 0.05) 100%);
}

.ct-hero__content {
  position: relative;
  z-index: 1;
  /* .ct-hero is a flex row, so without this the .container shrinks to the
     title and its auto margins centre it on the page. */
  width: 100%;
}

/* 16 Sept: matched to Contact us Page.png: HELLO. / LETS / TALK. in capitals, lines centred on each other, the
   block sitting in the left third (centre ~x314 of 1366). */
.ct-hero__title {
  display: inline-block;
  margin-left: 9.8vw;
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 3.37vw, 3.6rem);
  font-weight: 400;
  line-height: 1.37;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

/* 16 Sept: matched to Contact us Page.png: this page's form heading is set in capitals over two lines. */
.contact__heading {
  text-transform: uppercase;
  max-width: 10em;
}

/* ── 4. Locations ──────────────────────────────────── */
.ct-locations {
  background: var(--color-surface-light);   /* 16 Sept: matched to Contact us Page.png: light, not sand */
}

.ct-map {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto clamp(3rem, 4.92vw, 3.69rem);
}

.ct-map__img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0);    /* 16 Sept: matched to Contact us Page.png: dark dots, not pale grey */
  opacity: 0.85;
}

.ct-map__pin {
  position: absolute;
  /* 21 Sept: the mockup's teardrop pin with a cream centre, 22 x 35
     (was a 20px rotated square). */
  width: 22px;
  height: 35px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 35'%3E%3Cpath d='M11 0C4.9 0 0 4.9 0 11c0 8.2 11 24 11 24s11-15.8 11-24c0-6.1-4.9-11-11-11z' fill='%23B45B38'/%3E%3Ccircle cx='11' cy='11' r='4.4' fill='%23E7E6DE'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform: translate(-50%, -100%);
}

/* ── Office columns ───────────────────────────────── */
/* 16 Sept: matched to Contact us Page.png: office cards — solid copper pin, bold copper city, plain country,
   a short copper rule, larger tightly-set address, bold directions link. */
.ct-offices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.ct-office {
  padding: 0 clamp(1.25rem, 2.5vw, 2.2rem);
  border-left: 1px solid var(--color-border);
}

.ct-office:first-child {
  border-left: none;
  padding-left: 0;
}

.ct-office__pin {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 0 0.5rem -11px;     /* the pin sits inset in its 24-unit viewBox */
  fill: var(--color-copper);
  stroke: none;
}

.ct-office__pin circle { fill: var(--color-surface-light); }

.ct-office__city {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 1.54vw, 1.55rem);
  font-weight: 600;
  color: var(--color-copper);
  margin-bottom: 0.1rem;
}
.ct-office__country {
  font-size: 1.2rem;
  font-style: normal;
  color: var(--color-text);
  margin-bottom: 0;
}
.ct-office__country::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--color-copper);
  margin: 1.5rem 0 1.6rem;
}
.ct-office__address,
.ct-office__contact {
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 1.3rem;
}
.ct-office__contact a {
  color: var(--color-text);
  transition: color 0.3s ease;
}

.ct-office__contact a:hover { color: var(--color-copper); }

.ct-office__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-copper);
  transition: gap 0.3s ease;
}

.ct-office__directions::before { content: '\2192'; }

.ct-office__directions:hover { gap: 0.75rem; }

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .ct-offices { grid-template-columns: repeat(2, 1fr); }
  .ct-office:nth-child(3) { border-left: none; padding-left: 0; }
  .ct-office:nth-child(3),
  .ct-office:nth-child(4) { border-top: 1px solid var(--color-border); }
}

@media (max-width: 768px) {
  .ct-hero {
    height: 45vh;
    min-height: 320px;
  }

  .ct-offices { grid-template-columns: 1fr; }

  .ct-office {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .ct-office:first-child { border-top: none; }
}

/* 25 Sept: "Get directions" was 27px tall on a phone — under the 44px
   minimum for a touch target. */
@media (max-width: 768px) {
  .ct-office__directions {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}