/* Contact: dark hero with the wall band, three-step lead form, "what happens next" panel.
   Form states: .is-stepper (JS on), .is-invalid on a field, [hidden] steps and buttons. */

/* ---------- Hero ---------- */
.ramah-contact-hero { position: relative; isolation: isolate; overflow: hidden; background: #1d1d1f; color: #dedbd2; }
.ramah-contact-hero::before, .ramah-contact-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ramah-contact-hero::before { background: url("../../images/contact/texture.webp") center / cover; opacity: 0.18; }
.ramah-contact-hero::after { background: url("../../images/contact/mountains.webp") center bottom / cover no-repeat; mix-blend-mode: multiply; opacity: 0.77; }
.ramah-contact-hero__pattern { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: -1; block-size: 605px; background: url("../../images/contact/pattern.svg") center top / 100% auto no-repeat; opacity: 0.9; pointer-events: none; }
.ramah-contact-hero__inner { display: flex; align-items: center; justify-content: center; min-block-size: 463px; padding-block: 0; } /* Figma 320:5171: hero 595px incl. the 132px wall band */
.ramah-contact-hero__body { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ramah-contact-hero__title { max-inline-size: 640px; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); line-height: 1.23; color: #dedbd2; }
.ramah-contact-hero__text { max-inline-size: 576px; font-size: 1.0625rem; font-weight: 300; line-height: 1.4; color: #a3a096; }
.ramah-contact-hero__band { position: relative; z-index: 1; }
.ramah-contact-hero__teeth { display: block; block-size: 20px; background: repeating-linear-gradient(90deg, #b8b2a3 0 24.75px, #1d1d1f 24.75px 38.25px); }
.ramah-contact-hero__wall { position: relative; display: block; block-size: 112px; background: #e0dad4; overflow: hidden; }
.ramah-contact-hero__wall::before { content: ""; position: absolute; inset: 0; background: url("../../images/contact/wall.svg") repeat center / 100px 100px; opacity: 0.6; }

/* ---------- Form section ---------- */
.ramah-contact-form { position: relative; padding-block: 0; background: #ebe7e1; }
.ramah-contact-form::before { content: ""; display: block; block-size: 32px; background: #1a1a1c; border-block-end: 1px solid #8c181b; }
.ramah-contact-form__inner { display: flex; align-items: stretch; max-inline-size: 1440px; margin-inline: auto; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.ramah-contact-form__panel { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; padding-block: 40px 0; background: #ebe7e1; border-inline-start: 1px solid #ded8ce; }

.ramah-form { display: flex; flex-direction: column; flex: 1 1 auto; }
.ramah-form__progress { margin-block: 0 4px; padding-inline: clamp(24px, 5.7vw, 82px); font-size: 0.875rem; color: #737373; }
.ramah-form__progress[hidden] { display: none; }
.ramah-form__alert { margin-inline: clamp(24px, 5.7vw, 82px); margin-block-end: 24px; padding: 12px 16px; border-inline-start: 3px solid #8c181b; background: #f6e3e3; color: #6e1217; font-size: 0.9375rem; line-height: 1.6; }
.ramah-form__step { display: flex; flex-direction: column; gap: 12px; padding-inline: clamp(24px, 5.7vw, 82px); padding-block-end: 40px; }
.ramah-form__step[hidden] { display: none; }
.ramah-form__title { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); line-height: 1.1; color: #171717; }
.ramah-form__title:focus { outline: none; }
.ramah-form__title:focus-visible { outline: 2px solid #8c181b; outline-offset: 4px; }
.ramah-form__text { font-size: 1.25rem; font-weight: 300; line-height: 1.4; color: #525252; }
.ramah-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; max-inline-size: 1024px; margin-block-start: 16px; }
.ramah-form__fieldset { min-inline-size: 0; margin: 16px 0 0; padding: 0; border: 0; }
.ramah-form__radios { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-block-start: 8px; }
.ramah-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: #262626; cursor: pointer; }
.ramah-radio input { inline-size: 18px; block-size: 18px; margin: 0; accent-color: #8c181b; }

.ramah-field { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; }
.ramah-field__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 1rem; font-weight: 600; line-height: 1.5; color: #262626; }
.ramah-field__req { font-size: 0.875rem; font-weight: 400; color: #737373; }
.ramah-field__input { inline-size: 100%; min-block-size: 56px; padding: 0 16px; border: 1px solid #3b3a36; border-radius: 0; background: linear-gradient(#8c181b, #8c181b) center bottom / 0% 2px no-repeat, #fbf9f6; color: #171717; font-size: 1rem; transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s ease; }
.ramah-field__input:focus { outline: none; border-color: #8c181b; background-size: 100% 2px, auto; }
.ramah-field__input::placeholder { color: #a3a3a3; }
.ramah-field__select { appearance: auto; }
.ramah-field__textarea { min-block-size: 140px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.ramah-field__error { min-block-size: 16px; margin: 0; font-size: 0.875rem; line-height: 1.5; color: #8c181b; }
.ramah-field__error[hidden] { display: none; }
.ramah-field.is-invalid .ramah-field__input { border-color: #8c181b; background: #fff7f6; }

.ramah-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: auto; padding: 32px clamp(24px, 5.7vw, 82px); border-block-start: 1px solid #dfd9ce; }
.ramah-form__actions [hidden] { display: none !important; }
.ramah-form .ramah-btn--solid { min-block-size: 48px; min-inline-size: 144px; border-radius: 4px; font-size: 1.125rem; }
.ramah-form .ramah-form__prev { min-block-size: 48px; margin-inline-start: 8px; }

/* Success state replaces the steps after a redirect. */
.ramah-contact-success { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px clamp(24px, 5.7vw, 82px) 56px; }
.ramah-contact-success:focus { outline: none; }
.ramah-contact-success__title { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); color: #8c181b; }
.ramah-contact-success__text { max-inline-size: 520px; font-size: 1.25rem; line-height: 1.7; color: #262626; }

/* ---------- Aside: what happens next ---------- */
.ramah-contact-aside { display: flex; flex-direction: column; flex: 0 0 458px; max-inline-size: 100%; padding: 40px; background: #1f1f21; color: #f5f5f5; }
.ramah-contact-aside__title { font-size: 1.875rem; font-weight: 700; line-height: 1.3; color: #f5f5f5; }
.ramah-contact-aside__steps { display: flex; flex-direction: column; gap: 36px; margin-block-start: 40px; }
.ramah-contact-aside__step { display: flex; align-items: flex-start; gap: 16px; }
.ramah-contact-aside__badge { display: inline-grid; flex: none; place-items: center; inline-size: 36px; block-size: 36px; margin-block-start: 0; border-radius: 2px; background: #8c181b; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); transform: rotate(45deg); }
.ramah-contact-aside__badge > span { transform: rotate(-45deg); font-size: 1rem; font-weight: 700; line-height: 1; color: #fff; }
.ramah-contact-aside__copy { display: flex; flex-direction: column; gap: 6px; padding-block-start: 4px; text-align: start; }
.ramah-contact-aside__name { font-size: 1.125rem; font-weight: 700; line-height: 1.5; color: #fff; }
.ramah-contact-aside__desc { font-size: 0.875rem; font-weight: 300; line-height: 1.6; color: #d4d4d4; }

/* Step progress bar: fills with the stepper (contact.js sets --ramah-step). */
.ramah-form__bar { display: none; position: relative; block-size: 3px; margin-inline: clamp(24px, 5.7vw, 82px); margin-block-end: 28px; background: #dcd6cc; overflow: hidden; }
.is-stepper .ramah-form__bar { display: block; }
.ramah-form__bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--ramah-step, 0%); background: #8c181b; transition: inline-size 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Success: a target is hit by an arrow, rings pulse out from the centre. */
.ramah-contact-success__target { display: block; inline-size: 120px; block-size: 120px; margin-block-end: 8px; }
.ramah-contact-success__target svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.ramah-contact-success__ring { fill: none; stroke: #8c181b; stroke-width: 2; opacity: 0.35; transform-box: fill-box; transform-origin: center; animation: ramah-target-ripple 1.6s ease-out 0.6s both; }
.ramah-contact-success__ring--mid { animation-delay: 0.75s; }
.ramah-contact-success__ring--core { fill: #8c181b; stroke: none; opacity: 1; animation: ramah-target-hit 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.3s both; }
.ramah-contact-success__arrow { fill: none; stroke: #8c181b; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: center bottom; animation: ramah-target-arrow 0.7s cubic-bezier(0.3, 0.8, 0.3, 1) both; }
@keyframes ramah-target-arrow { from { transform: translateY(-60px); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@keyframes ramah-target-hit { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ramah-target-ripple { from { transform: scale(0.6); opacity: 0.6; } to { transform: scale(1.12); opacity: 0.1; } }

/* ---------- Narrow screens ---------- */
@media (max-width: 1023px) {
	.ramah-contact-form__inner { flex-direction: column; box-shadow: none; }
	.ramah-contact-form__panel { border-inline-start: 0; }
	.ramah-contact-aside { flex-basis: auto; padding: 40px clamp(24px, 5.7vw, 40px); }
}
@media (max-width: 639px) {
	.ramah-contact-hero__inner { min-block-size: 0; padding-block: calc(var(--ramah-header-h) + 40px) 72px; }
	.ramah-form__grid { grid-template-columns: 1fr; }
	.ramah-form__actions .ramah-btn--solid { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.ramah-contact-success__ring, .ramah-contact-success__ring--core, .ramah-contact-success__arrow { animation: none; }
	.ramah-form__bar-fill, .ramah-field__input { transition: none; }
}