/* ═══════════════════════════════════════════════════════════════════════════
   Contact (page--contact).
   Set piece: three ways to reach us arrive from three sides and settle round the mark. The mark
   stands where the three fields meet, and each field takes the colour of the petal that points at
   it: sage and gold above, blue below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A short hero: the heading, one sentence, and the three ways begin in the same screen. */
.page--contact .contact-hero {
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem) calc(clamp(1.25rem, .9rem + 1.6vw, 2.25rem) + var(--seam-h));
}
.page--contact .contact-hero h1 { max-inline-size: 15em; }
.page--contact .contact-hero .lead { max-inline-size: 34em; }
/* Three large quiet petals rise behind the seam on the end side: the upper half of a bloom. */
.page--contact .contact-hero__petals {
  --l: clamp(9rem, 5rem + 14vw, 17.5rem);                /* the top petal stays inside the hero: its tip is never cut */
  position: absolute;
  inset-block-end: calc(var(--seam-h) * .2);
  inset-inline-end: clamp(1rem, 12vw, 13rem);
  inline-size: 1px;
  block-size: 1px;
  pointer-events: none;
}
.page--contact .contact-hero__spoke {
  position: absolute;
  inset-block-end: calc(var(--l) * .3);
  inset-inline-start: calc(var(--l) * -.2288);
  inline-size: calc(var(--l) * .4576);
  block-size: var(--l);
  transform-origin: 50% calc(100% + var(--l) * .3);
  rotate: calc(var(--a) * var(--dir));
}
.page--contact .contact-hero__petal { display: block; inline-size: 100%; block-size: 100%; background: var(--white-a40); -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat; mask: var(--petal-mask) center / 100% 100% no-repeat; }
@media (max-width: 55.99rem) {
  .page--contact .contact-hero__petals { inset-inline-end: 4.5rem; inset-block-end: 0; --l: 9rem; }
  .page--contact .contact-hero { padding-block-end: calc(var(--seam-h) + 6.5rem); }
}

/* 2 How to reach us */
.page--contact .contact-details { padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.page--contact .contact-details .section__head { margin-block-end: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.page--contact .reach {
  --reach-gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
  --reach-core: clamp(5.25rem, 3.6rem + 6vw, 9.5rem);
  --reach-pad: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);
  display: grid;
  gap: var(--reach-gap);
}
.page--contact .reach__way {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: .5rem;
  min-inline-size: 0;
  max-inline-size: none;
}
.page--contact .reach__way > * + * { margin-block-start: 0; }
.page--contact .reach__way > .medallion { margin-block-end: .9rem; }
.page--contact .reach__label {
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  letter-spacing: 0em;
}
.page--contact .reach__value { max-inline-size: 100%; }
.page--contact .reach__text {
  color: var(--heading);
  font-family: var(--font-latin);
  font-size: clamp(1.3125rem, .95rem + 1.7vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.page--contact a.reach__text { display: inline-flex; align-items: center; min-block-size: var(--target); text-decoration-line: underline; text-decoration-thickness: .06em; text-underline-offset: .2em; text-decoration-color: transparent; transition: text-decoration-color var(--dur-2) ease; }
.page--contact .reach__value--address > .reach__text { font-family: var(--font-display); font-size: var(--fs-sub); line-height: var(--lh-sub); letter-spacing: var(--tracking-sub); text-wrap: balance; }
.page--contact .reach__where { display: grid; gap: .5rem; }
.page--contact .reach__actions { margin-block-start: 1.1rem; }
.page--contact .reach__note { color: var(--fg); font-weight: var(--fw-medium); }
.page--contact .reach__visit { display: grid; justify-items: start; gap: .9rem; margin-block-start: .9rem; }
@media (hover: hover) and (pointer: fine) {
  .page--contact a.reach__text:hover { text-decoration-color: currentColor; }
}

/* The mark, where the fields meet. It stands on the page's own ground, so it reads as the core they gather round. */
.page--contact .reach__core {
  grid-row: 1;
  grid-column: 1;
  z-index: 1;
  align-self: end;
  justify-self: end;
  inline-size: var(--reach-core);
  block-size: var(--reach-core);
  margin-block-end: calc(var(--reach-core) / -2 - var(--reach-gap) / 2);
  margin-inline-end: clamp(1rem, 6vw, 2.5rem);
  pointer-events: none;
}
.page--contact .reach__disc { display: grid; place-items: center; inline-size: 100%; block-size: 100%; border-radius: 50%; background: var(--bone); }
.page--contact .reach__mark { inline-size: 82%; block-size: auto; }
.page--contact .reach__way--email { grid-row: 1; grid-column: 1; padding-block-end: calc(var(--reach-pad) + var(--reach-core) * .4); border-end-end-radius: clamp(3rem, 2rem + 6vw, 6rem); }
.page--contact .reach__way--phone { grid-row: 2; grid-column: 1; padding-block-start: calc(var(--reach-pad) + var(--reach-core) * .3); }
.page--contact .reach__way--address { grid-row: 3; grid-column: 1; }

@media (min-width: 56rem) {
  .page--contact .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page--contact .reach__core { grid-column: 1 / -1; justify-self: center; margin-inline-end: 0; }
  .page--contact .reach__way--email { grid-column: 1; padding-block-end: calc(var(--reach-pad) + var(--reach-core) * .34); border-end-end-radius: var(--r-panel); border-start-start-radius: clamp(4rem, 9vw, 8rem); }
  .page--contact .reach__way--phone { grid-row: 1; grid-column: 2; padding-block-start: var(--reach-pad); padding-block-end: calc(var(--reach-pad) + var(--reach-core) * .34); border-start-end-radius: clamp(4rem, 9vw, 8rem); }
  .page--contact .reach__way--address {
    grid-row: 2;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
    padding-block-start: calc(var(--reach-core) / 2 + 1.25rem);
    border-end-start-radius: clamp(4rem, 9vw, 8rem);
    border-end-end-radius: clamp(4rem, 9vw, 8rem);
  }
  .page--contact .reach__way--address > .medallion { margin-block-end: 0; }
  .page--contact .reach__visit { margin-block-start: 0; }
}

/* Follow our work: a white field under the three, with one small photograph, its caption and our part in it. */
.page--contact .contact-social {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
  margin-block-start: clamp(.75rem, .5rem + 1vw, 1.25rem);
  padding: clamp(1.25rem, 1rem + 1.6vw, 2.25rem);
  border-radius: var(--r-panel);
  border-end-end-radius: clamp(3rem, 2rem + 6vw, 6rem);
  background: var(--white);
}
.page--contact .contact-social__art { grid-template-columns: clamp(7.5rem, 30vw, 11.5rem) minmax(0, 1fr); align-items: center; gap: clamp(1rem, .8rem + 1vw, 1.5rem); }
.page--contact .contact-social__art > figcaption { max-inline-size: 24em; }
.page--contact .contact-social__caption { display: grid; gap: .5rem; }
.page--contact .contact-social__text { display: grid; justify-items: start; gap: .8rem; }
.page--contact .contact-social__title { font-size: calc(var(--fs-sub) * 1.15); font-weight: var(--fw-display); }
@media (max-width: 39.99rem) {
  .page--contact .contact-social__art { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .page--contact .contact-social__art > .frame { inline-size: min(11rem, 62%); }
}
@media (min-width: 60rem) {
  .page--contact .contact-social { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding-inline-end: clamp(2rem, 5vw, 4.5rem); }
}

/* 3 Send us a message */
.page--contact .contact-write__head { display: grid; gap: 1.1rem; }
@media (min-width: 56rem) {
  .page--contact .contact-write__head { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
}

/* 4 Looking for something specific */
.page--contact .contact-other__title { font-size: var(--fs-section); font-weight: var(--fw-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.page--contact .contact-shortcuts { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.page--contact .contact-shortcut { border-radius: 2.5rem; background: var(--white); }
.page--contact .contact-shortcut .parts-row__title { font-size: var(--fs-lead); font-weight: var(--fw-display); line-height: var(--lh-sub); }