/* Artix — Contact page. Interactive, custom-styled. Loaded on /contact/ only.
   Scoped to .ax-contact-* classes so it never overrides global styles. */

/* ---- Reach-us method cards ---- */
.ax-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.ax-method { display: flex; flex-direction: column; gap: .5rem; background: #fff; border: 1px solid var(--ax-line);
  border-radius: 14px; padding: 1.6rem 1.4rem; text-decoration: none; color: var(--ax-graphite);
  transition: transform .2s var(--ax-ease), box-shadow .2s var(--ax-ease), border-color .2s var(--ax-ease); }
.ax-method:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,22,25,.13); border-color: var(--ax-ember); }
.ax-method .ax-m-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ax-graphite); color: #fff; margin-bottom: .5rem; transition: background .2s var(--ax-ease); }
.ax-method:hover .ax-m-icon { background: var(--ax-ember); color: var(--ax-graphite); }
.ax-method .ax-m-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
.ax-method h3 { font-family: var(--ax-font-display); font-weight: 700; font-size: 1.05rem; margin: 0; color: var(--ax-graphite); }
.ax-method p { margin: 0; color: var(--ax-fog); font-size: .92rem; }
.ax-method .ax-m-val { color: var(--ax-ember-text); font-weight: 600; font-size: .92rem; }
@media (max-width: 900px) { .ax-methods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ax-methods { grid-template-columns: 1fr; } }

/* ---- Split: form + info ---- */
.ax-contact-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .ax-contact-split { grid-template-columns: 1fr; } }

.ax-formcard { background: #fff; border: 1px solid var(--ax-line); border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: 0 20px 50px rgba(20,22,25,.06); }
.ax-infocard { background: var(--ax-graphite); color: #EBE8E0; border-radius: 18px; padding: clamp(1.6rem,3vw,2.4rem); }
.ax-infocard h3 { color: #fff; font-family: var(--ax-font-display); }
.ax-infocard .ax-eyebrow { color: var(--ax-ember); }
.ax-infocard a { color: var(--ax-ember); text-decoration: none; }
.ax-infocard .ax-info-row { display: flex; gap: .8rem; padding: 1rem 0; border-top: 1px solid var(--ax-line-dark); }
.ax-infocard .ax-info-row:first-of-type { border-top: 0; }
.ax-infocard .ax-info-row svg { width: 20px; height: 20px; stroke: var(--ax-ember); fill: none; flex: none; margin-top: 2px; }
.ax-infocard .ax-info-row b { color: #fff; display: block; font-size: .9rem; }
.ax-infocard .ax-info-row span { color: #C9CCD1; font-size: .9rem; }

/* ---- Style the Elementor Pro form ---- */
.ax-form .elementor-field-group > label,
.ax-formcard label { font-family: var(--ax-font-display); font-weight: 600; font-size: .82rem; color: var(--ax-graphite);
  letter-spacing: .01em; margin-bottom: .4rem; }
.ax-form .elementor-field-textual,
.ax-formcard input[type=text], .ax-formcard input[type=email], .ax-formcard input[type=tel],
.ax-formcard textarea, .ax-formcard select {
  width: 100%; background: var(--ax-paper); border: 1px solid var(--ax-line); border-radius: 10px !important;
  padding: .85rem 1rem !important; font-size: 1rem; color: var(--ax-ink); transition: border-color .18s var(--ax-ease), box-shadow .18s var(--ax-ease); }
.ax-form .elementor-field-textual:focus,
.ax-formcard input:focus, .ax-formcard textarea:focus, .ax-formcard select:focus {
  outline: none; border-color: var(--ax-ember-text); box-shadow: 0 0 0 3px rgba(228,101,42,.15); background: #fff; }
.ax-form .elementor-button, .ax-formcard button[type=submit] {
  background: var(--ax-ember) !important; color: var(--ax-graphite) !important; border: 0 !important; border-radius: 10px !important;
  font-family: var(--ax-font-display) !important; font-weight: 700 !important; padding: .95rem 1.8rem !important;
  transition: transform .18s var(--ax-ease), background .18s var(--ax-ease) !important; }
.ax-form .elementor-button:hover, .ax-formcard button[type=submit]:hover { background: var(--ax-ember-deep) !important; color: #fff !important; transform: translateY(-2px); }
.ax-form .elementor-field-group { margin-bottom: 1.1rem; }

/* ---- Selects: fix clipped text + add a chevron ---- */
.ax-formcard select, .ax-form select, .ax-bookform select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  line-height: 1.5; min-height: 52px; height: auto;
  padding: .85rem 2.6rem .85rem 1rem !important;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2714%27%20height%3D%279%27%20viewBox%3D%270%200%2014%209%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%235A6472%27%20stroke-width%3D%272%27%20d%3D%27M1%201l6%206%206-6%27/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px;
}

/* ---- Booking form ---- */
.ax-bookform { max-width: 720px; margin: 0 auto; }
.ax-book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .ax-book-row { grid-template-columns: 1fr; } }
.ax-bookform label { display: block; margin-bottom: 1rem; }
.ax-bookform input, .ax-bookform select, .ax-bookform textarea { width: 100%; margin-top: .35rem; }
.ax-bookform .ax-btn { width: 100%; justify-content: center; margin-top: .5rem; }
.ax-book-note { font-size: .82rem; color: var(--ax-fog); margin-top: 1rem; text-align: center; }
.ax-book-err { background: #F6E7E4; border-left: 3px solid var(--ax-oxblood); color: #5A1F1B; padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.ax-book-success { max-width: 640px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--ax-line); border-radius: 18px; padding: 2.5rem; }
.ax-book-success h3 { font-family: var(--ax-font-display); color: var(--ax-graphite); font-size: 1.6rem; }
.ax-book-success p { color: var(--ax-fog); margin: .8rem 0 1.4rem; }

/* ---- Reassurance note ---- */
.ax-reassure { display: flex; gap: .7rem; align-items: flex-start; background: rgba(228,101,42,.14); border: 1px solid rgba(228,101,42,.4);
  border-radius: 12px; padding: 1rem 1.2rem; margin-top: 1.2rem; }
.ax-reassure svg { width: 20px; height: 20px; stroke: var(--ax-ember-deep); fill: none; flex: none; margin-top: 2px; }
.ax-reassure p { margin: 0; color: var(--ax-fog); font-size: .88rem; }