.contacts-page { background: var(--milk); }
.contacts-hero { min-height: calc(100svh - 112px); display: grid; grid-template-columns: minmax(0,1fr) minmax(440px,.82fr); align-items: center; gap: clamp(45px,7vw,110px); padding-block: 75px 95px; }
.contacts-hero h1 { margin: 22px 0; font: 700 clamp(51px,6.4vw,92px)/1.02 var(--display); letter-spacing: -.065em; }
.contacts-hero h1 em { color: var(--leaf-dark); font-style: normal; }
.contacts-hero__copy > p { max-width: 700px; color: var(--muted); font-size: 19px; }
.contacts-number { position: relative; aspect-ratio: 1; display: grid; place-items: center; align-content: center; overflow: hidden; border: 3px solid var(--bark); border-radius: 50% 45% 48% 18%; background: var(--sun); box-shadow: 13px 15px 0 var(--bark); transform: rotate(2deg); transition: transform .28s ease, box-shadow .28s ease; }
.contacts-number::before { position: absolute; top: 50%; left: 50%; width: 78%; aspect-ratio: 1; border: 2px dashed rgba(61,39,16,.3); border-radius: 50%; content: ""; animation: contacts-ring 18s linear infinite; }
.contacts-number:hover { box-shadow: 17px 20px 0 var(--bark); transform: translate(-4px,-5px) rotate(-1deg); }
.contacts-number > * { position: relative; z-index: 1; }
.contacts-number > span { margin-bottom: 20px; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.contacts-number small { font: 800 clamp(24px,3vw,40px) var(--accent); }
.contacts-number strong { padding: 0 15px; border: 3px solid var(--bark); border-radius: 17px; background: var(--white); font: 800 clamp(52px,7vw,91px)/1.05 var(--accent); letter-spacing: .04em; }
.contacts-number i { margin-top: 20px; font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.contacts-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; padding-block: 115px; }
.contacts-steps article { min-height: 290px; display: flex; flex-direction: column; padding: 27px; border: 2px solid var(--bark); border-radius: 28px 28px 28px 9px; background: var(--leaf); box-shadow: 6px 7px 0 var(--bark); }
.contacts-steps article:nth-child(2) { background: var(--sky); transform: translateY(25px) rotate(1deg); }
.contacts-steps article:nth-child(3) { background: var(--coral); transform: rotate(-1deg); }
.contacts-steps span { font: 800 11px var(--accent); }
.contacts-steps h2 { margin: auto 0 11px; font: 700 clamp(25px,3vw,38px) var(--display); }
.contacts-steps p { margin: 0; color: var(--bark-2); }
.contacts-map-section { display: grid; grid-template-columns: .48fr 1fr; align-items: center; gap: clamp(40px,6vw,90px); padding-block: 115px 145px; }
.contacts-map-heading > span { color: var(--leaf-deep); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.contacts-map-heading h2 { margin: 18px 0; font: 700 clamp(39px,4.8vw,67px)/1.06 var(--display); letter-spacing: -.055em; }
.contacts-map-heading p { color: var(--muted); font-size: 17px; }
.contacts-map-heading a { display: inline-block; margin-top: 17px; padding-bottom: 8px; border-bottom: 2px solid var(--bark); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.contacts-map { position: relative; min-height: 650px; overflow: hidden; border: 3px solid var(--bark); border-radius: 38px 38px 38px 12px; background: var(--leaf-soft); box-shadow: 12px 14px 0 var(--bark); }
.contacts-map iframe { width: 100%; height: 650px; display: block; border: 0; }
.contacts-map-pin { position: absolute; z-index: 2; top: 50%; left: 50%; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border: 2px solid var(--bark); border-radius: 20px 20px 20px 6px; background: var(--sun); box-shadow: 5px 6px 0 var(--bark); pointer-events: none; transform: translate(-50%,-115%) rotate(-2deg); animation: contacts-pin 3s ease-in-out infinite; }
.contacts-map-pin img { width: 38px; height: 38px; }
.contacts-map-pin span { display: grid; font: 700 13px var(--display); }
.contacts-map-pin small { color: var(--muted); font: 900 8px var(--font); text-transform: uppercase; }
.contacts-note { padding-block: 105px; background: var(--leaf-dark); color: var(--white); }
.contacts-note .shell { display: grid; grid-template-columns: .35fr 1fr auto; align-items: center; gap: 40px; }
.contacts-note span { color: var(--leaf); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.contacts-note h2 { margin: 0; font: 700 clamp(30px,3.8vw,53px)/1.12 var(--display); }
.contacts-note a { display: grid; justify-items: center; padding: 20px 28px; border: 2px solid var(--bark); border-radius: 22px 22px 22px 7px; background: var(--sun); color: var(--bark); box-shadow: 6px 7px 0 var(--white); }
.contacts-note a small { font: 800 13px var(--accent); }
.contacts-note a strong { font: 800 31px var(--accent); letter-spacing: .05em; }
@keyframes contacts-ring {
  from { transform: translate(-50%,-50%) rotate(0); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes contacts-pin { 50% { transform: translate(-50%,-125%) rotate(3deg); } }
@media (max-width: 1000px) {
  .contacts-hero, .contacts-map-section { grid-template-columns: 1fr; }
  .contacts-number { width: min(570px,100%); justify-self: center; }
  .contacts-map-heading { max-width: 720px; }
  .contacts-note .shell { grid-template-columns: 1fr; }
  .contacts-note a { justify-self: start; }
}
@media (max-width: 720px) {
  .contacts-hero { min-height: auto; padding-block: 62px 80px; }
  .contacts-hero h1 { font-size: clamp(43px,13vw,60px); }
  .contacts-hero__copy > p { font-size: 16px; }
  .contacts-number { aspect-ratio: auto; min-height: 360px; border-radius: 34px 34px 34px 10px; }
  .contacts-number strong { font-size: clamp(48px,16vw,71px); }
  .contacts-steps { grid-template-columns: 1fr; padding-block: 85px; }
  .contacts-steps article { min-height: 220px; }
  .contacts-steps article:nth-child(2), .contacts-steps article:nth-child(3) { transform: none; }
  .contacts-map-section { padding-block: 85px 110px; }
  .contacts-map, .contacts-map iframe { min-height: 480px; height: 480px; }
  .contacts-note { padding-block: 80px; }
}