.contact-page { background: var(--page-light); }
.contact-hero { min-height: 790px; padding: 175px 0 105px; position: relative; overflow: hidden; background: radial-gradient(circle at 78% 44%,rgba(145,185,76,.12),transparent 31%),linear-gradient(145deg,#050808,#0c120d); }
.contact-hero-grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg,transparent,#000 58%,transparent); }
.contact-hero-layout { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 76px; }
.contact-hero-copy h1 { max-width: 710px; color: #f4f7f4; font-size: clamp(50px,5.3vw,80px); line-height: .99; }
.contact-hero-copy > p:not(.eyebrow) { max-width: 600px; margin: 27px 0 29px; color: #aab3ac; font-size: 17px; line-height: 1.75; }
.contact-scroll-link { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-bright); font-size: 11px; font-weight: 800; text-decoration: none; }.contact-scroll-link span { width: 27px; height: 27px; display: grid; place-items: center; background: rgba(145,185,76,.1); border: 1px solid rgba(145,185,76,.22); border-radius: 50%; }
.routing-visual { min-width: 0; color: var(--text-light); background: rgba(11,16,12,.94); border: 1px solid #2a332b; border-radius: 24px; box-shadow: 0 38px 90px rgba(0,0,0,.38); transition: transform 180ms ease-out; overflow: hidden; }
.routing-visual > header { min-height: 58px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; color: #69756b; background: #090c0a; border-bottom: 1px solid var(--border-dark); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.routing-visual > header strong { display: flex; align-items: center; gap: 7px; color: #a8b2aa; }.routing-visual > header i { width: 6px; height: 6px; background: var(--brand-bright); border-radius: 50%; box-shadow: 0 0 8px var(--brand-bright); animation: contact-pulse 1.8s ease-in-out infinite; }
.routing-stage { min-height: 390px; padding: 38px 26px; display: grid; grid-template-columns: 1fr .24fr .8fr .24fr 1fr; align-items: center; gap: 9px; background-image: linear-gradient(rgba(255,255,255,.019) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.019) 1px,transparent 1px); background-size: 28px 28px; }
.routing-source { min-height: 73px; padding: 11px; display: flex; align-items: center; gap: 10px; background: #151a16; border: 1px solid #2d362e; border-radius: 12px; }.routing-source > i { width: 41px; height: 41px; display: grid; place-items: center; color: #b3bdb5; background: #252e27; border-radius: 10px; font-size: 7px; font-style: normal; font-weight: 800; }.routing-source strong,.routing-source small { display: block; }.routing-source strong { color: #dfe5e0; font-size: 9px; }.routing-source small { margin-top: 3px; color: #6d786f; font-size: 6px; }
.routing-core { min-height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(circle at 40% 28%,#2c3b25,#111711); border: 1px solid rgba(145,185,76,.45); border-radius: 29px; box-shadow: 0 0 0 10px rgba(145,185,76,.035),0 25px 45px rgba(0,0,0,.24); }.routing-core > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 11px; font-size: 16px; font-weight: 800; }.routing-core strong { margin-top: 8px; color: #eff3f0; font-size: 11px; }.routing-core small { color: #748077; font-size: 5px; }
.routing-path { height: 1px; position: relative; background: rgba(145,185,76,.23); }.routing-path i { width: 30px; height: 1px; position: absolute; background: linear-gradient(90deg,transparent,var(--brand-bright),transparent); animation: contact-data 1.6s linear infinite; }.routing-path:nth-of-type(4) i { animation-delay: -.8s; }
.routing-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.routing-options article { min-height: 68px; padding: 9px; display: flex; align-items: center; gap: 8px; background: #151a16; border: 1px solid #2d362e; border-radius: 10px; }.routing-options article > i { width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 8px; font-size: 6px; font-style: normal; font-weight: 800; }.routing-options article > span { color: #ced6d0; font-size: 7px; font-weight: 700; }
.routing-visual > footer { min-height: 58px; padding: 0 22px; display: flex; align-items: center; justify-content: center; gap: 13px; color: #6d786f; background: #090c0a; border-top: 1px solid var(--border-dark); font-size: 7px; font-weight: 700; }.routing-visual > footer b { color: var(--brand); }
.contact-form-section { padding: 115px 0 130px; }.enquiry-selector { margin-bottom: 38px; display: grid; grid-template-columns: repeat(6,1fr); background: #fff; border: 1px solid var(--border-light); border-radius: 17px; box-shadow: 0 15px 45px rgba(38,51,32,.07); overflow: hidden; }.enquiry-selector button { min-height: 104px; padding: 15px; display: flex; align-items: center; gap: 10px; color: #657166; background: transparent; border: 0; border-right: 1px solid var(--border-light); cursor: pointer; text-align: left; transition: color 220ms,background 220ms; }.enquiry-selector button:last-child { border-right: 0; }.enquiry-selector button:hover { color: #1b251b; background: #f7f9f5; }.enquiry-selector button.is-active { color: #192219; background: linear-gradient(180deg,rgba(145,185,76,.14),rgba(145,185,76,.025)); box-shadow: inset 0 -3px var(--brand); }.enquiry-selector button > i { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; color: #68746a; background: #edf1e9; border-radius: 9px; font-size: 7px; font-style: normal; font-weight: 800; }.enquiry-selector button.is-active > i { color: var(--ink); background: var(--brand-bright); }.enquiry-selector strong,.enquiry-selector small { display: block; }.enquiry-selector strong { font-size: 8px; }.enquiry-selector small { margin-top: 3px; color: #89938b; font-size: 5px; }
.contact-workspace { display: grid; grid-template-columns: minmax(0,1fr) 320px; align-items: start; gap: 32px; }.contact-form { min-width: 0; padding: 45px; background: #fff; border: 1px solid var(--border-light); border-radius: 20px; box-shadow: 0 20px 60px rgba(38,51,32,.08); }.form-heading { margin-bottom: 34px; padding-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; border-bottom: 1px solid var(--border-light); }.form-heading span { color: var(--brand-dark); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }.form-heading h3 { margin: 6px 0 0; font-size: 27px; }.form-heading > small { color: #838e85; font-size: 7px; }.form-heading i,.form-field label > i,.privacy-field label i { color: #a66d19; font-style: normal; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px 18px; }.form-field { min-width: 0; }.form-field-wide { grid-column: 1 / -1; }.form-field label,.conditional-fields legend { display: block; margin-bottom: 8px; color: #435043; font-size: 8px; font-weight: 800; }.form-field input:not([type="checkbox"]),.form-field select,.form-field textarea { width: 100%; min-height: 51px; padding: 13px 14px; color: #1d281d; background: #f8faf7; border: 1px solid #dce3d9; border-radius: 9px; outline: 0; font: inherit; font-size: 10px; transition: background 200ms,border-color 200ms,box-shadow 200ms; }.form-field textarea { min-height: 165px; resize: vertical; line-height: 1.65; }.form-field input::placeholder,.form-field textarea::placeholder { color: #98a299; }.form-field input:focus,.form-field select:focus,.form-field textarea:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(145,185,76,.11); }.form-field input[aria-invalid="true"],.form-field select[aria-invalid="true"],.form-field textarea[aria-invalid="true"] { border-color: #b56c43; background: #fff9f6; box-shadow: 0 0 0 3px rgba(181,108,67,.08); }.field-error { min-height: 15px; margin-top: 5px; display: block; color: #9b4d29; font-size: 7px; }.conditional-fields { margin: 31px 0 0; padding: 26px; border: 1px solid #e0e6dd; border-radius: 13px; background: #f8faf7; }.conditional-fields[hidden] { display: none; }.conditional-fields legend { padding: 0 8px; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .08em; }.conditional-fields .form-field input,.conditional-fields .form-field select { background: #fff; }.support-notice { margin-bottom: 20px; padding: 17px; display: grid; grid-template-columns: auto 1fr; gap: 12px; color: #7e7048; background: #fffaf0; border: 1px solid #e9d7a7; border-radius: 10px; }.support-notice > i { width: 31px; height: 31px; display: grid; place-items: center; color: #473807; background: #efd47a; border-radius: 8px; font-size: 10px; font-style: normal; font-weight: 800; }.support-notice strong { font-size: 9px; }.support-notice p { margin: 4px 0 7px; font-size: 7px; line-height: 1.5; }.support-notice a { color: #68520f; font-size: 7px; font-weight: 800; text-decoration: none; }
.message-field { margin-top: 28px; }.label-row { display: flex; align-items: center; justify-content: space-between; }.label-row > span { color: #89938b; font-size: 7px; }.label-row b { color: var(--brand-dark); }.field-hint { margin-top: 6px; display: block; color: #89938b; font-size: 7px; }.privacy-field { margin-top: 22px; }.privacy-field > label { margin: 0; padding: 15px; display: flex; align-items: flex-start; gap: 10px; background: #f6f8f4; border: 1px solid #dfe5dc; border-radius: 10px; cursor: pointer; font-weight: 600; line-height: 1.6; }.privacy-field input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--brand); }.privacy-field input[aria-invalid="true"] { outline: 2px solid #b56c43; outline-offset: 2px; }
.form-error-summary { margin-bottom: 25px; padding: 17px 19px; color: #7b321c; background: #fff6f2; border: 1px solid #e6b7a4; border-radius: 11px; }.form-error-summary[hidden] { display: none; }.form-error-summary strong { font-size: 9px; }.form-error-summary ul { margin: 8px 0 0; padding-left: 17px; }.form-error-summary li { margin-top: 4px; font-size: 7px; }.form-error-summary a { color: inherit; }
.form-submit-row { margin-top: 25px; padding-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--border-light); }.form-submit-row > p { max-width: 410px; margin: 0; display: flex; align-items: flex-start; gap: 7px; color: #89938b; font-size: 7px; line-height: 1.55; }.form-submit-row > p i { width: 6px; height: 6px; margin-top: 2px; flex: 0 0 auto; background: #e7c765; border-radius: 50%; }.form-status { margin-top: 24px; padding: 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; color: #546054; background: #f3f8ed; border: 1px solid #cfe0bd; border-radius: 11px; }.form-status[hidden] { display: none; }.form-status > i { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 9px; font-style: normal; font-weight: 900; }.form-status strong,.form-status p { display: block; }.form-status strong { color: #273627; font-size: 9px; }.form-status p { margin: 4px 0 0; font-size: 7px; }.form-status button { padding: 8px 10px; color: var(--brand-dark); background: #fff; border: 1px solid #d6e3c9; border-radius: 8px; cursor: pointer; font: inherit; font-size: 7px; font-weight: 800; }
.contact-summary { position: sticky; top: 110px; overflow: hidden; color: #a8b2aa; background: linear-gradient(145deg,#0d120e,#151c15); border: 1px solid var(--border-dark); border-radius: 18px; }.summary-status,.summary-guidance,.summary-boundary { padding: 25px; }.summary-status { border-bottom: 1px solid var(--border-dark); }.summary-status > span,.summary-guidance > span { color: var(--brand-bright); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.summary-status strong { margin-top: 12px; display: block; color: #eff3f0; font-size: 20px; }.summary-status p { margin: 9px 0 0; font-size: 9px; line-height: 1.65; }.summary-guidance { border-bottom: 1px solid var(--border-dark); }.summary-guidance ul { margin: 15px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; }.summary-guidance li { display: flex; align-items: center; gap: 8px; color: #bac3bc; font-size: 8px; }.summary-guidance li::before { content: "✓"; color: var(--brand-bright); font-weight: 900; }.summary-boundary { display: grid; grid-template-columns: auto 1fr; gap: 10px; }.summary-boundary > i { width: 29px; height: 29px; display: grid; place-items: center; color: #332904; background: #e7c765; border-radius: 8px; font-size: 9px; font-style: normal; font-weight: 800; }.summary-boundary p { margin: 0; font-size: 8px; line-height: 1.6; }.contact-summary > a { min-height: 53px; padding: 0 25px; display: flex; align-items: center; justify-content: space-between; color: var(--brand-bright); background: #090c0a; border-top: 1px solid var(--border-dark); font-size: 8px; font-weight: 800; text-decoration: none; }
.contact-next { padding: 115px 0 125px; }.contact-next-track { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; }.contact-next-track li { min-height: 270px; padding: 25px; display: flex; flex-direction: column; background: linear-gradient(145deg,#111612,#171d17); border: 1px solid var(--border-dark); border-right: 0; }.contact-next-track li:first-child { border-radius: 15px 0 0 15px; }.contact-next-track li:last-child { border-right: 1px solid var(--border-dark); border-radius: 0 15px 15px 0; }.contact-next-track li > span { color: #59645b; font-size: 8px; font-weight: 800; }.contact-next-track li > i { width: 43px; height: 43px; margin-top: 32px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 10px; font-size: 8px; font-style: normal; font-weight: 800; }.contact-next-track h3 { margin: auto 0 10px; color: #edf2ee; font-size: 19px; }.contact-next-track p { margin: 0; color: #7f8b81; font-size: 9px; line-height: 1.6; }
.contact-paths { padding: 115px 0 125px; }.contact-path-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }.contact-path-grid > a { min-height: 360px; padding: 28px; display: flex; flex-direction: column; color: #1f291f; background: #fff; border: 1px solid var(--border-light); border-radius: 18px; box-shadow: 0 14px 42px rgba(38,51,32,.06); text-decoration: none; transition: transform 250ms,border-color 250ms; }.contact-path-grid > a:hover { transform: translateY(-4px); border-color: rgba(145,185,76,.55); }.contact-path-grid > a > span { color: var(--brand-dark); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.contact-path-grid > a > i { width: 45px; height: 45px; margin-top: 30px; display: grid; place-items: center; color: var(--brand-dark); background: rgba(145,185,76,.12); border-radius: 11px; font-size: 8px; font-style: normal; font-weight: 800; }.contact-path-grid h3 { margin: auto 0 10px; font-size: 24px; }.contact-path-grid p { margin: 0 0 20px; color: #727e74; font-size: 10px; line-height: 1.65; }.contact-path-grid strong { color: var(--brand-dark); font-size: 8px; }.contact-path-grid .contact-demo-card { color: #edf2ee; background: linear-gradient(145deg,#0e130f,#171e17); border-color: var(--border-dark); }.contact-path-grid .contact-demo-card > span,.contact-path-grid .contact-demo-card strong { color: var(--brand-bright); }.contact-path-grid .contact-demo-card > i { color: var(--ink); background: var(--brand-bright); }.contact-path-grid .contact-demo-card h3 { color: #f0f4f1; }.contact-path-grid .contact-demo-card p { color: #7f8b81; }
.contact-reassurance { padding: 110px 0; }.reassurance-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 100px; }.reassurance-copy h2 { color: #f0f4f1; }.reassurance-copy > p:not(.eyebrow) { max-width: 570px; font-size: 15px; line-height: 1.8; }.reassurance-list { display: grid; gap: 11px; }.reassurance-list > span { min-height: 84px; padding: 15px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; background: #111612; border: 1px solid var(--border-dark); border-radius: 12px; }.reassurance-list i { width: 37px; height: 37px; grid-row: 1 / 3; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 9px; font-size: 7px; font-style: normal; font-weight: 800; }.reassurance-list strong { align-self: end; color: #dce3dd; font-size: 10px; }.reassurance-list small { align-self: start; color: #707c72; font-size: 7px; }
@keyframes contact-pulse { 50% { opacity: .4; transform: scale(.75); } }
@keyframes contact-data { from { left: -30px; opacity: 0; } 20%,80% { opacity: 1; } to { left: 100%; opacity: 0; } }
@media (max-width:1160px) { .contact-hero-layout { grid-template-columns: 1fr; }.contact-hero-copy { max-width: 800px; }.routing-visual { max-width: 820px; }.enquiry-selector { grid-template-columns: repeat(3,1fr); }.enquiry-selector button { border-bottom: 1px solid var(--border-light); }.contact-workspace { grid-template-columns: minmax(0,1fr) 280px; }.contact-path-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:760px) { .contact-hero { min-height: auto; padding: 130px 0 75px; }.contact-hero-copy h1 { font-size: clamp(42px,13vw,61px); }.contact-hero-copy > p:not(.eyebrow) { font-size: 15px; }.routing-stage { padding: 25px 18px; grid-template-columns: 1fr; gap: 15px; }.routing-path { width: 1px; height: 24px; margin: auto; }.routing-path i { display: none; }.routing-core { min-height: 135px; }.routing-visual > footer { display: none; }.enquiry-selector { grid-template-columns: 1fr 1fr; }.contact-workspace { grid-template-columns: 1fr; }.contact-form { padding: 29px 20px; }.form-heading { align-items: flex-start; flex-direction: column; }.form-grid { grid-template-columns: 1fr; }.form-field-wide { grid-column: auto; }.form-submit-row { align-items: flex-start; flex-direction: column; }.form-status { grid-template-columns: auto 1fr; }.form-status button { grid-column: 1 / -1; }.contact-summary { position: static; }.contact-next-track { grid-template-columns: 1fr 1fr; gap: 10px; }.contact-next-track li,.contact-next-track li:first-child,.contact-next-track li:last-child { min-height: 230px; border: 1px solid var(--border-dark); border-radius: 12px; }.contact-path-grid { grid-template-columns: 1fr; }.reassurance-layout { grid-template-columns: 1fr; gap: 50px; } }
@media (prefers-reduced-motion:reduce) { .routing-visual > header i,.routing-path i { animation: none; } }