/* Adapted from the existing Starglaze homepage contact component. */
.contact { position: relative; overflow: hidden; isolation: isolate; min-height: 100svh; background: rgb(49, 83, 181); color: rgb(245, 247, 234); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(130px, 13vw, 245px) clamp(26px, 8vw, 155px) 37px; }
.contact::before { content: ""; position: absolute; inset: 0px; z-index: -2; background: linear-gradient(148deg, rgb(41, 69, 159), rgb(73, 105, 202) 47%, rgb(31, 64, 154)); }
.contact-reflection { position: absolute; right: -4%; top: -25%; height: 120%; width: 47%; pointer-events: none; opacity: 0.8; z-index: -1; transform: rotate(-22deg); }
.contact-disc { position: absolute; inset: 8% 0%; border: clamp(20px, 5.5vw, 92px) solid rgba(236, 244, 230, 0.23); border-radius: 27%; box-shadow: rgba(236, 253, 255, 0.145) 24px 15px 20px inset, rgba(24, 56, 132, 0.26) 12px 40px 58px; transform: rotate(27deg); }
.contact-shadow { position: absolute; inset: 20% -15% 5% 0px; background: linear-gradient(92deg, transparent, rgba(252, 227, 170, 0.15), rgba(228, 240, 232, 0.063), transparent); filter: blur(19px); }
.contact-inner { max-width: 1500px; width: 100%; margin: auto; position: relative; }
.contact h2 { font-size: clamp(95px, 11.9vw, 207px); font-weight: 590; letter-spacing: -0.083em; line-height: 0.88; }
.contact h2 em { font-family: Fraunces, Georgia, serif; font-weight: 400; font-size: 1.03em; color: rgb(255, 228, 162); letter-spacing: -0.065em; }
.contact p { font-size: clamp(21px, 2.25vw, 32px); max-width: 780px; line-height: 1.4; font-weight: 510; letter-spacing: -0.023em; margin-top: 43px; margin-bottom: 46px; }
.contact-cta { background: rgb(249, 230, 183); color: rgb(36, 63, 114); text-decoration: none; display: inline-flex; justify-content: space-between; align-items: center; gap: 45px; padding: 21px 27px; font-size: 20px; font-weight: 760; min-width: 300px; box-shadow: rgba(26, 52, 132, 0.35) 8px 12px 28px; transition: transform 0.2s, background 0.2s; }
.contact-cta:hover { transform: translateY(-4px); background: rgb(255, 243, 210); }
.contact-floor { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid rgba(231, 239, 242, 0.376); padding-top: 20px; font-size: 11px; letter-spacing: 0.1em; font-weight: 780; color: rgb(222, 236, 250); }
@media (max-width: 980px) {
.contact h2 { font-size: clamp(85px, 11vw, 140px); }
}
@media (max-width: 650px) {
.contact { padding: 120px 26px 30px; min-height: 790px; }
.contact-inner { margin: auto 0px; }
.contact h2 { font-size: clamp(68px, 14vw, 100px); letter-spacing: -0.077em; }
.contact p { font-size: 19px; margin: 33px 0px; }
.contact-cta { font-size: 15px; padding: 16px 18px; min-width: 0px; gap: 24px; }
.contact-floor { font-size: 9px; }
.contact-floor span:last-child { display: none; }
.contact-reflection { width: 85%; right: -39%; opacity: 0.5; }
}
@media (max-width: 365px) {
.contact h2 { font-size: 65px; }
}
.contact-cta { position: relative; overflow: hidden; }
.contact-cta::after { content: ""; position: absolute; pointer-events: none; inset: -30% auto -30% -40%; width: 24%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.608), transparent); transform: skew(-20deg); transition: transform 0.75s cubic-bezier(0.18, 0.9, 0.2, 1); }
.contact-cta:hover::after { transform: translate(700%) skew(-20deg); }
@media (prefers-reduced-motion: reduce) {
.contact-cta::after { display: none !important; }
}
body.motion-paused .contact-cta::after { display: none !important; }
.contact { min-height: 760px; padding: clamp(105px, 11vw, 162px) clamp(22px, 6.4vw, 120px) 31px; scroll-margin-top: 0px; }
.contact-reflection { right: 5%; top: -32%; width: 58%; opacity: 0.4; }
.contact-inner { display: grid; grid-template-columns: minmax(0px, 0.95fr) minmax(0px, 1fr); gap: clamp(35px, 5.8vw, 100px); align-items: center; max-width: 1520px; margin: auto; position: relative; }
.contact-copy { min-width: 0px; }
.contact .contact-copy h2 { font-size: clamp(68px, 7.8vw, 142px); line-height: 0.9; letter-spacing: -0.065em; font-weight: 570; }
.contact .contact-copy h2 em { font-family: Fraunces, Georgia, serif; color: rgb(255, 229, 183); letter-spacing: -0.055em; font-size: 1em; }
.contact .contact-copy > p { font-size: clamp(19px, 1.8vw, 27px); line-height: 1.45; color: rgb(240, 244, 255); max-width: 560px; margin: 35px 0px 0px; }
.contact-expectations { display: flex; flex-wrap: wrap; gap: 9px 16px; color: rgb(215, 225, 252); font-size: 13px; line-height: 1.5; margin-top: 25px; }
.contact-expectations span + span::before { content: "/"; color: rgb(168, 184, 235); margin-right: 16px; }
.contact-view-pricing { display: inline-flex; gap: 23px; align-items: center; text-decoration: underline; text-underline-offset: 5px; margin-top: 34px; font-size: 14px; font-weight: 720; color: rgb(248, 232, 187); }
.contact-view-pricing:hover { color: rgb(255, 255, 255); }
.contact-enquiry { min-width: 0px; }
.contact-form { padding: clamp(24px, 3.1vw, 48px); background: rgb(244, 246, 243); color: rgb(27, 53, 69); border-radius: 14px; box-shadow: rgba(11, 34, 84, 0.353) 13px 24px 48px; display: grid; gap: 20px; position: relative; }
.contact-form .form-topline { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgb(188, 206, 208); padding-bottom: 16px; font-size: 10px; font-weight: 780; letter-spacing: 0.14em; color: rgb(71, 111, 124); }
.contact-form h3 { font-size: clamp(29px, 2.65vw, 47px); line-height: 1.1; letter-spacing: -0.028em; font-weight: 660; color: rgb(22, 55, 75); }
.contact-form h3 em { font-weight: 400; font-family: Fraunces, Georgia, serif; color: rgb(52, 124, 145); }
.contact-form fieldset { border: 0px; padding: 0px; margin: 0px; min-width: 0px; }
.contact-form legend, .contact-form .form-field > label { display: block; padding: 0px; font-size: 13px; font-weight: 730; color: rgb(29, 68, 84); margin-bottom: 9px; }
.form-type-options { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 7px; }
.form-type-options label { position: relative; cursor: pointer; min-width: 0px; }
.form-type-options input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.form-type-options label > span { display: flex; justify-content: center; align-items: center; text-align: center; min-height: 47px; padding: 10px 9px; border: 1px solid rgb(171, 198, 203); border-radius: 7px; background: transparent; color: rgb(42, 83, 98); font-size: 13px; font-weight: 650; transition: background 0.18s, color 0.18s, border-color 0.18s; }
.form-type-options input:checked + span { background: rgb(21, 62, 84); color: rgb(255, 255, 255); border-color: rgb(21, 62, 84); }
.form-type-options input:focus-visible + span { outline: rgb(195, 135, 64) solid 3px; outline-offset: 3px; }
.form-type-options label:hover > span { border-color: rgb(26, 99, 123); }
.form-two-col { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; }
.contact-form .form-field { min-width: 0px; }
.contact-form .form-field input, .contact-form .form-field textarea, .contact-form .form-field select { width: 100%; min-width: 0px; display: block; background: rgb(255, 255, 255); color: rgb(23, 56, 74); border: 1px solid rgb(169, 190, 195); border-radius: 6px; padding: 12px 14px; font-family: Instrument, Arial, sans-serif; font-size: 16px; font-weight: 500; transition: border-color 0.18s, box-shadow 0.18s; }
.contact-form .form-field input, .contact-form .form-field select { min-height: 48px; }
.contact-form .form-field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.contact-form .form-field :is(input, textarea, select):focus-visible { outline: rgb(37, 110, 134) solid 2px; outline-offset: 1px; box-shadow: rgba(175, 219, 228, 0.384) 0px 0px 0px 4px; }
.contact-form .form-field :is(input, textarea)::placeholder { color: rgb(103, 124, 134); opacity: 1; }
.form-more { border-top: 1px solid rgb(211, 223, 223); padding-top: 10px; }
.form-more summary { display: flex; justify-content: space-between; align-items: center; gap: 14px; cursor: pointer; list-style: none; color: rgb(36, 79, 97); font-size: 14px; font-weight: 660; padding: 5px 0px; }
.form-more summary::-webkit-details-marker { display: none; }
.form-more summary > span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgb(84, 116, 131); font-weight: 560; }
.form-more[open] summary svg { transform: rotate(180deg); }
.form-more .form-two-col { margin-top: 16px; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .form-privacy { font-size: 12px; line-height: 1.6; color: rgb(81, 103, 114); margin: 0px; }
.contact-form .form-privacy a { color: rgb(38, 91, 119); font-weight: 750; text-underline-offset: 3px; }
.contact-submit { min-height: 55px; padding: 15px 19px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 0px; border-radius: 6px; background: rgb(16, 47, 70); color: rgb(245, 249, 247); cursor: pointer; font-size: 16px; font-weight: 750; letter-spacing: -0.01em; transition: background 0.2s, transform 0.2s; }
.contact-submit:hover { background: rgb(38, 93, 119); transform: translateY(-1px); }
.contact-submit:disabled { opacity: 0.65; cursor: wait; transform: none; }
.contact-form .form-status { margin: 0px; font-size: 13px; line-height: 1.5; color: rgb(22, 59, 78); }
.contact-form .form-status:empty { display: none; }
.contact-form .form-status[data-state="error"] { color: rgb(142, 53, 45); }
.contact-form .form-status[data-state="success"] { color: rgb(37, 107, 69); font-weight: 760; }
.contact-form .form-fallback { margin: 0px; font-size: 12px; line-height: 1.55; color: rgb(73, 104, 121); }
.contact-form .form-fallback[hidden] { display: none; }
.contact-form .form-fallback a { font-weight: 730; text-underline-offset: 3px; color: rgb(23, 92, 128); }
.contact-form [aria-invalid="true"] { border-color: rgb(176, 68, 64) !important; }
@media (min-width: 851px) and (max-width: 1100px) {
.contact-inner { gap: 30px; }
.contact .contact-copy h2 { font-size: clamp(60px, 7.5vw, 110px); }
}
@media (max-width: 850px) {
.contact-inner { grid-template-columns: 1fr; gap: 46px; }
.contact .contact-copy h2 { font-size: clamp(68px, 10.5vw, 108px); }
.contact .contact-copy > p { max-width: 710px; }
.contact { padding: 115px 6vw 31px; }
.contact-reflection { right: -12%; width: 70%; top: -25%; }
}
@media (max-width: 650px) {
.contact { padding: 113px 18px 28px; min-height: 0px; }
.contact-inner { gap: 37px; }
.contact .contact-copy h2 { font-size: clamp(67px, 13vw, 99px); }
.contact .contact-copy > p { font-size: 18px; margin-top: 22px; }
.contact-expectations { font-size: 12px; gap: 6px 11px; }
.contact-expectations span + span::before { margin-right: 11px; }
.contact-view-pricing { margin-top: 22px; }
.contact-form { padding: 24px 19px; gap: 18px; }
.contact-form h3 { font-size: 34px; }
.form-two-col { grid-template-columns: 1fr; gap: 17px; }
.form-type-options label > span { font-size: 12px; min-height: 44px; padding: 9px 5px; }
.contact-form .form-field input, .contact-form .form-field textarea, .contact-form .form-field select { font-size: 16px; }
.contact-reflection { width: 88%; right: -42%; opacity: 0.35; }
.contact .contact-copy h2 { letter-spacing: -0.055em; }
}
@media (max-width: 365px) {
.contact .contact-copy h2 { font-size: 63px; }
.contact-form { padding: 20px 15px; }
.form-type-options { gap: 5px; }
.form-type-options label > span { font-size: 11px; }
}
body.motion-paused .contact-cta::after { display: none !important; }

/* CGI-specific text and states. The primary contact design is from the main Starglaze page. */
.contact { scroll-margin-top: 0; }
.contact-form .cgi-optional { color:#557383; font-size:12px; font-weight:550; }
.contact-form .cgi-form-noscript { margin:0; font-size:13px; line-height:1.55; color:#496879; }
.contact-form .cgi-form-noscript a { color:#175c80; font-weight:730; text-underline-offset:3px; }
.contact-form .form-status:focus { outline:0; }
@media(max-width:650px) { .contact-form .form-topline { letter-spacing:.09em; } }