*/ --ct-hero-photo: none; color: var(--ct-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--ct-bg); background-image: radial-gradient(1100px 520px at 12% -10%, rgba(201,162,39,.085), transparent 62%), radial-gradient(1100px 520px at 92% -10%, rgba(31,138,112,.060), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.012), rgba(244,240,232,0) 45%), linear-gradient(180deg, var(--ct-bg) 0%, var(--ct-bg2) 100%); background-repeat: no-repeat; /* Bootstrap bridge (Contact-only) */ --bs-body-bg: var(--ct-bg); --bs-body-color: var(--ct-text); --bs-secondary-color: var(--ct-muted); --bs-border-color: var(--ct-line); --bs-tertiary-bg: rgba(244,240,232,.03); --bs-primary: var(--ct-gold); --bs-link-color: var(--ct-gold2); --bs-link-hover-color: var(--ct-gold2); --bs-border-radius: 1rem; --bs-border-radius-lg: 1.25rem; } @media (min-width: 992px){ body.page-contact{ background-attachment: fixed; } } body.page-contact :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(201,162,39,.18); border-radius: 12px; } @media (prefers-reduced-motion: reduce){ body.page-contact *, body.page-contact *::before, body.page-contact *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Links */ body.page-contact a{ color: var(--ct-gold2); text-decoration-thickness: 1px; text-underline-offset: .18em; } body.page-contact a:hover{ color: var(--ct-gold2); text-decoration-thickness: 2px; } /* Buttons */ body.page-contact .btn{ border-radius: 999px; letter-spacing: .01em; box-shadow: none; transition: transform .16s var(--ct-ease), filter .16s var(--ct-ease), border-color .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact .btn:hover{ transform: translateY(-1px); } body.page-contact .btn:active{ transform: translateY(0); } body.page-contact .btn-primary{ background: radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.30), rgba(201,162,39,.10) 55%, rgba(201,162,39,.06) ), linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.08)); border: 1px solid rgba(201,162,39,.52); color: rgba(244,240,232,.96); } body.page-contact .btn-primary:hover{ border-color: rgba(201,162,39,.70); filter: brightness(1.03); } body.page-contact .btn-secondary{ background: rgba(244,240,232,.04); border: 1px solid rgba(244,240,232,.16); color: rgba(244,240,232,.92); } body.page-contact .btn-secondary:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } body.page-contact .btn-outline{ background: transparent; border: 1px solid rgba(244,240,232,.20); color: rgba(244,240,232,.92); } body.page-contact .btn-outline:hover{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.08); color: rgba(244,240,232,.96); } body.page-contact .btn-ghost{ background: rgba(244,240,232,.03); border: 1px solid rgba(244,240,232,.14); color: rgba(244,240,232,.92); } body.page-contact .btn-ghost:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } /* Wider hero container only */ body.page-contact .contact-hero .container{ width: min(1380px, calc(100% - 48px)); margin-left: auto; margin-right: auto; max-width: none; padding-left: 0; padding-right: 0; } /* Rules */ body.page-contact .ct-rule{ height: 1px; width: min(1100px, calc(100% - 48px)); margin: 0 auto; background: linear-gradient(90deg, rgba(244,240,232,0), rgba(244,240,232,.22), rgba(201,162,39,.30), rgba(244,240,232,.10), rgba(244,240,232,0) ); opacity: .95; } body.page-contact .ct-rule--tight{ width: 100%; margin: 18px 0 14px; opacity: .85; background: linear-gradient(90deg, rgba(244,240,232,0), rgba(244,240,232,.16), rgba(201,162,39,.22), rgba(244,240,232,.10), rgba(244,240,232,0) ); } body.page-contact section[id]{ scroll-margin-top: 96px; } body.page-contact .ct-eyebrow{ margin: 0 0 .35rem; letter-spacing: .20em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.70); } /* ========================================================= HERO (UPGRADED) ========================================================= */ body.page-contact .contact-hero{ position: relative; overflow: hidden; padding: clamp(70px, 7vw, 110px) 0 34px; isolation: isolate; } /* Photo + veil (optional) */ body.page-contact .contact-hero::before{ content:""; position:absolute; inset:-1px; pointer-events:none; background: linear-gradient(180deg, rgba(6,17,13,.50), rgba(6,17,13,.86)), var(--ct-hero-photo); background-size: cover; background-position: center; filter: saturate(.92) contrast(1.04); transform: scale(1.02); opacity: 1; } /* Luxe overlay + print pattern (keeps your background lines) */ body.page-contact .contact-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(1060px 520px at 18% 0%, rgba(201,162,39,.14), transparent 62%), radial-gradient(1060px 520px at 92% 0%, rgba(31,138,112,.11), transparent 62%), repeating-linear-gradient(90deg, rgba(244,240,232,.018) 0 1px, rgba(0,0,0,0) 1px 22px), linear-gradient(180deg, rgba(244,240,232,.015), rgba(244,240,232,0) 55%); opacity: .95; } body.page-contact .contact-hero > *{ position: relative; z-index: 1; } body.page-contact .contact-hero-grid{ position: relative; isolation: isolate; display: grid; grid-template-columns: 1.35fr .85fr; padding: clamp(28px, 3.2vw, 44px); gap: clamp(18px, 2.4vw, 32px); align-items: start; border-radius: 34px; border: 1px solid rgba(201,162,39,.24); background: radial-gradient(900px 380px at 10% 0%, rgba(201,162,39,.075), transparent 62%), radial-gradient(900px 380px at 110% 8%, rgba(31,138,112,.065), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.040), rgba(244,240,232,.012)); box-shadow: inset 0 0 0 1px rgba(244,240,232,.085), 0 18px 54px rgba(0,0,0,.24); } body.page-contact .contact-hero-grid > .hero-copy, body.page-contact .contact-hero-grid > .contact-panel{ min-width: 0; } body.page-contact .contact-hero-grid .hero-copy{ padding: 4px 4px 2px; } body.page-contact .contact-hero-grid::before{ content:""; position:absolute; left: 28px; top: 28px; width: 92px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, rgba(201,162,39,.78), rgba(225,199,106,.18)); opacity: .95; pointer-events:none; } body.page-contact .contact-hero-grid::after{ content:""; position:absolute; left: 28px; top: 28px; width: 2px; height: 92px; border-radius: 99px; background: linear-gradient(180deg, rgba(201,162,39,.65), rgba(225,199,106,.10)); opacity: .85; pointer-events:none; } body.page-contact .hero .badge{ display: inline-flex; align-items: center; gap: 8px; padding: .45rem .70rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.88); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; } /* Optional badge dot (if your HTML uses it) */ body.page-contact .hero .badge .badge-dot{ width: 8px; height: 8px; border-radius: 999px; background: rgba(201,162,39,.92); box-shadow: 0 0 0 5px rgba(201,162,39,.14); } body.page-contact .contact-hero h1{ font-family: "Playfair Display", serif; position: relative; display: inline-block; margin-bottom: .35rem; font-size: clamp(2.05rem, 3.15vw, 3.15rem); letter-spacing: -.01em; text-wrap: balance; } body.page-contact .contact-hero h1::after{ content:""; display:block; height: 2px; margin-top: .65rem; width: min(240px, 60%); background: linear-gradient(90deg, rgba(201,162,39,.78), rgba(225,199,106,.20)); border-radius: 99px; opacity: .95; } body.page-contact .lead{ line-height: 1.85; color: rgba(244,240,232,.86); max-width: 78ch; font-size: clamp(1.00rem, 1.05vw, 1.08rem); margin-top: .55rem; } /* Slightly tighter + cleaner hero actions */ body.page-contact .hero-actions{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; } /* Proof strip (upgraded into premium meta chips) */ body.page-contact .contact-proof{ margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; border-top: 0; padding-top: 0; } body.page-contact .contact-proof__item{ padding: 10px 12px; border: 1px solid rgba(244,240,232,.12); border-radius: 16px; background: linear-gradient(180deg, rgba(244,240,232,.022), rgba(244,240,232,.012)); box-shadow: inset 0 0 0 1px rgba(244,240,232,.045); } body.page-contact .contact-proof__k{ display:block; color: rgba(244,240,232,.68); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 950; } body.page-contact .contact-proof__v{ display:block; font-weight: 950; letter-spacing: .01em; margin-top: 6px; color: rgba(244,240,232,.96); } /* Trust strip */ body.page-contact .contact-trust{ margin-top: 14px; display:flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); } body.page-contact .contact-trust__k{ letter-spacing: .18em; text-transform: uppercase; font-size: .70rem; color: rgba(244,240,232,.68); font-weight: 950; } body.page-contact .contact-trust__v{ color: rgba(244,240,232,.86); font-weight: 800; } body.page-contact .contact-pledge{ margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed rgba(244,240,232,.14); color: rgba(244,240,232,.84); line-height: 1.75; } body.page-contact .contact-pledge span[aria-hidden="true"]{ color: rgba(225,199,106,.72); font-size: 1.35rem; vertical-align: -2px; } /* Panel */ body.page-contact .contact-panel{ position: relative; border-radius: 24px; border: 1px solid rgba(244,240,232,.14); background: radial-gradient(760px 320px at 12% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(760px 320px at 112% 10%, rgba(31,138,112,.08), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); box-shadow: 0 14px 34px rgba(0,0,0,.20); overflow: hidden; isolation: isolate; box-sizing: border-box; margin: 2px; padding: clamp(16px, 1.8vw, 22px); } body.page-contact .contact-panel__kicker{ display:flex; align-items:center; justify-content: space-between; gap: 10px; letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.68); } body.page-contact .contact-status{ display:inline-flex; align-items:center; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); letter-spacing: .06em; text-transform: none; font-size: .72rem; color: rgba(244,240,232,.74); } body.page-contact .contact-status__dot{ width: 7px; height: 7px; border-radius: 999px; background: rgba(201,162,39,.90); box-shadow: 0 0 0 5px rgba(201,162,39,.12); } body.page-contact .contact-panel__title{ font-family: "Playfair Display", serif; margin: .35rem 0 .25rem; font-size: clamp(1.10rem, 1.8vw, 1.50rem); line-height: 1.12; color: rgba(244,240,232,.95); } body.page-contact .contact-panel__sub{ margin: .25rem 0 0; } body.page-contact .contact-panel__rail{ margin-top: 12px; border-top: 1px solid rgba(244,240,232,.12); } /* Rail rows (refactored) */ body.page-contact .contact-rail__item{ display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(244,240,232,.10); } body.page-contact .contact-rail__main{ flex: 1; display:flex; align-items:center; justify-content: space-between; gap: 10px; text-decoration: none !important; color: rgba(244,240,232,.92) !important; padding: 4px 0; border-radius: 12px; transition: transform .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact .contact-rail__main:hover{ transform: translateY(-1px); background: rgba(201,162,39,.045); } body.page-contact .contact-rail__label{ letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; font-weight: 900; color: rgba(244,240,232,.70); } body.page-contact .contact-rail__value{ font-weight: 950; color: rgba(244,240,232,.95); } body.page-contact .contact-rail__arrow{ color: rgba(225,199,106,.86); font-weight: 950; } body.page-contact .contact-rail__item--alert{ position: relative; } body.page-contact .contact-rail__item--alert::before{ content:""; position:absolute; left: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 99px; background: linear-gradient(180deg, rgba(201,162,39,.75), rgba(31,138,112,.35)); opacity: .85; } /* Copy pill */ body.page-contact .copy-pill{ flex: 0 0 auto; padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.02); color: rgba(244,240,232,.86); font-weight: 900; font-size: .78rem; letter-spacing: .02em; cursor: pointer; transition: transform .16s var(--ct-ease), border-color .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact .copy-pill:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.28); background: rgba(201,162,39,.06); } body.page-contact .copy-pill:active{ transform: translateY(0); } body.page-contact .contact-panel__actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } body.page-contact .contact-panel__foot{ margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(244,240,232,.10); display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.page-contact .contact-hours__k{ display:block; color: rgba(244,240,232,.66); font-size: .88rem; } body.page-contact .contact-hours__v{ display:block; font-weight: 950; color: rgba(244,240,232,.95); margin-top: 2px; } /* Contact details rails */ body.page-contact .contact-details{ margin-top: 12px; border: 1px solid rgba(244,240,232,.12); border-radius: 18px; overflow: hidden; background: rgba(244,240,232,.02); } body.page-contact .contact-detail{ display:block; padding: 16px 16px; border-bottom: 1px solid rgba(244,240,232,.10); text-decoration: none !important; color: rgba(244,240,232,.92) !important; } body.page-contact .contact-detail:last-child{ border-bottom: 0; } body.page-contact .contact-detail__k{ letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.68); font-weight: 900; } body.page-contact .contact-detail__v{ display:block; font-weight: 950; color: rgba(244,240,232,.96); margin-top: 4px; } body.page-contact .contact-detail__hint{ display:block; margin-top: 4px; color: rgba(244,240,232,.72); line-height: 1.6; } body.page-contact a.contact-detail:hover{ background: rgba(201,162,39,.06); } /* Row variant for copy button */ body.page-contact .contact-detail--row{ display:flex; align-items: center; justify-content: space-between; gap: 12px; } body.page-contact .contact-detail--row .contact-detail__main{ flex: 1; min-width: 0; } body.page-contact .contact-detail--row .copy-pill{ margin-left: 8px; } /* Routes */ body.page-contact .ct-routes{ padding-top: 4px; margin-top: 6px; } body.page-contact .ct-subtitle{ font-family: "Playfair Display", serif; margin: 0 0 .25rem; font-size: clamp(1.08rem, 1.6vw, 1.35rem); color: rgba(244,240,232,.95); } body.page-contact .ct-routegrid{ margin-top: 12px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } body.page-contact .ct-route{ position: relative; display:block; padding: 14px 14px; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); text-decoration: none !important; color: rgba(244,240,232,.92) !important; transition: transform .16s var(--ct-ease), border-color .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact .ct-route:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.25); background: rgba(201,162,39,.06); } body.page-contact .ct-route__k{ display:block; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.70); font-weight: 950; } body.page-contact .ct-route__v{ display:block; font-weight: 950; margin-top: 6px; color: rgba(244,240,232,.96); } body.page-contact .ct-route__hint{ display:block; margin-top: 6px; color: rgba(244,240,232,.72); line-height: 1.55; } body.page-contact .ct-route--alert{ border-color: rgba(201,162,39,.22); } body.page-contact .ct-route--alert::before{ content:""; position:absolute; left: 12px; top: 12px; width: 8px; height: 8px; border-radius: 999px; background: rgba(201,162,39,.78); box-shadow: 0 0 0 5px rgba(201,162,39,.12); opacity: .95; } /* Form + map cards */ body.page-contact .contact-split{ margin-top: 16px; display:grid; grid-template-columns: 1.05fr .95fr; gap: 16px; align-items: start; } body.page-contact .contact-card{ border-radius: 22px; border: 1px solid rgba(244,240,232,.14); background: radial-gradient(760px 320px at 12% 0%, rgba(201,162,39,.08), transparent 62%), radial-gradient(760px 320px at 112% 10%, rgba(31,138,112,.06), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.045), rgba(244,240,232,.012)); box-shadow: 0 16px 42px rgba(0,0,0,.22); padding: 16px 16px; } body.page-contact .contact-stack{ display:grid; gap: 16px; } body.page-contact .contact-form .form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } body.page-contact .field{ display:flex; flex-direction:column; gap: 6px; } body.page-contact .field--full{ grid-column: 1 / -1; } body.page-contact .label{ font-weight: 900; color: rgba(244,240,232,.88); font-size: .92rem; letter-spacing: .01em; } body.page-contact .input{ width: 100%; border-radius: 14px; border: 1px solid rgba(244,240,232,.14); background: rgba(6,17,13,.30); color: rgba(244,240,232,.92); padding: .82rem .9rem; outline: none; transition: border-color .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact textarea.input{ resize: vertical; min-height: 160px; } body.page-contact .input:focus{ border-color: rgba(201,162,39,.45); background: rgba(6,17,13,.36); } /* Submitted validation styling (quiet, premium) */ body.page-contact .contact-form.is-submitted .input:invalid{ border-color: rgba(225, 118, 118, .55); } body.page-contact .contact-form.is-submitted .input:invalid:focus{ box-shadow: 0 0 0 .22rem rgba(225, 118, 118, .12); } /* Check */ body.page-contact .check{ display:flex; gap: 10px; align-items:flex-start; padding-top: 6px; } body.page-contact .check input{ margin-top: 3px; accent-color: var(--ct-gold); } body.page-contact .form-actions{ margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap; } body.page-contact .form-foot{ margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed rgba(244,240,232,.14); } body.page-contact .hp-field{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; } body.page-contact .pill-group{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; } body.page-contact .pill{ display:inline-flex; align-items:center; gap: 8px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.02); cursor: pointer; user-select: none; transition: transform .16s var(--ct-ease), border-color .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact .pill:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.25); background: rgba(201,162,39,.06); } body.page-contact .pill input{ accent-color: var(--ct-gold); } body.page-contact .pill span{ font-weight: 900; color: rgba(244,240,232,.90); font-size: .90rem; } body.page-contact .ct-divider{ height: 1px; margin: 14px 0; background: linear-gradient(90deg, rgba(244,240,232,0), rgba(244,240,232,.18), rgba(244,240,232,0)); opacity: .9; } body.page-contact .map-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } body.page-contact .map-frame{ border-radius: 18px; overflow: hidden; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); } body.page-contact .map-frame iframe{ width: 100%; height: 340px; border: 0; display:block; } body.page-contact .ct-list{ margin: .6rem 0 0; padding-left: 1.1rem; color: rgba(244,240,232,.76); line-height: 1.75; } body.page-contact .ct-faq{ margin-top: 12px; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } body.page-contact .ct-faq__item{ border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); padding: 14px 14px; } body.page-contact .ct-faq__item h3{ margin: 0 0 6px 0; letter-spacing: .01em; } body.page-contact .ct-faq__item p{ margin: 0; } body.page-contact .contact-cta{ border-top: 1px solid rgba(244,240,232,.12); background: radial-gradient(900px 320px at 12% 0%, rgba(201,162,39,.055), transparent 62%), radial-gradient(900px 320px at 110% 10%, rgba(31,138,112,.050), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.018), rgba(244,240,232,0)); } /* Progress + mini-nav + top */ body.page-contact .ct-progress{ position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 9999; background: rgba(244,240,232,.06); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(244,240,232,.10); } body.page-contact .ct-progress > span{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(31,138,112,.55)); } body.page-contact .ct-mininav{ position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); z-index: 9997; display:flex; gap: 8px; align-items:center; padding: 10px 10px; border-radius: 999px; border: 1px solid rgba(244,240,232,.18); background: rgba(6,17,13,.62); backdrop-filter: blur(var(--ct-blur)); box-shadow: 0 14px 38px rgba(0,0,0,.30); opacity: 0; pointer-events: none; transition: opacity .2s var(--ct-ease), transform .2s var(--ct-ease); } body.page-contact .ct-mininav.is-show{ opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } body.page-contact .ct-mininav a{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 12px; border-radius: 999px; text-decoration:none !important; font-weight: 900; font-size: .88rem; color: rgba(244,240,232,.90) !important; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); transition: transform .16s var(--ct-ease), border-color .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact .ct-mininav a:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.30); background: rgba(201,162,39,.08); } body.page-contact .ct-mininav a.is-active{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.10); } body.page-contact .ct-top{ position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9998; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(244,240,232,.16); background: rgba(6,17,13,.62); backdrop-filter: blur(var(--ct-blur)); color: rgba(244,240,232,.92); font-weight: 950; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s var(--ct-ease), transform .2s var(--ct-ease), border-color .2s var(--ct-ease), background-color .2s var(--ct-ease); } body.page-contact .ct-top.is-show{ opacity: 1; pointer-events: auto; transform: translateY(0); } body.page-contact .ct-top:hover{ border-color: rgba(201,162,39,.35); background: rgba(6,17,13,.70); } /* Toast */ body.page-contact .ct-toast{ position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); z-index: 10000; max-width: min(520px, calc(100% - 40px)); padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(244,240,232,.16); background: rgba(6,17,13,.78); backdrop-filter: blur(var(--ct-blur)); box-shadow: 0 16px 42px rgba(0,0,0,.34); color: rgba(244,240,232,.92); font-weight: 900; letter-spacing: .01em; opacity: 0; pointer-events: none; transition: opacity .18s var(--ct-ease), transform .18s var(--ct-ease); } body.page-contact .ct-toast.is-show{ opacity: 1; transform: translate(-50%, 0); } /* Mobile action bar */ body.page-contact .ct-mbar{ position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9996; display: none; width: min(860px, calc(100% - 28px)); gap: 10px; padding: 10px; border-radius: 22px; border: 1px solid rgba(244,240,232,.16); background: rgba(6,17,13,.70); backdrop-filter: blur(var(--ct-blur)); box-shadow: 0 18px 46px rgba(0,0,0,.36); } body.page-contact .ct-mbar__btn{ flex: 1; text-decoration:none !important; display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); color: rgba(244,240,232,.92) !important; transition: transform .16s var(--ct-ease), border-color .16s var(--ct-ease), background-color .16s var(--ct-ease); } body.page-contact .ct-mbar__btn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.25); background: rgba(201,162,39,.06); } body.page-contact .ct-mbar__k{ letter-spacing: .16em; text-transform: uppercase; font-size: .70rem; color: rgba(244,240,232,.70); font-weight: 950; } body.page-contact .ct-mbar__v{ font-weight: 950; color: rgba(244,240,232,.96); } /* Responsive */ @media (max-width: 980px){ body.page-contact .contact-hero-grid{ grid-template-columns: 1fr; padding: 18px; border-radius: 26px; } body.page-contact .contact-hero-grid::before, body.page-contact .contact-hero-grid::after{ left: 18px; top: 18px; } body.page-contact .contact-panel{ margin: 0; padding: 16px; } body.page-contact .contact-proof{ grid-template-columns: 1fr; } body.page-contact .ct-routegrid{ grid-template-columns: 1fr; } body.page-contact .contact-split{ grid-template-columns: 1fr; } body.page-contact .contact-form .form-grid{ grid-template-columns: 1fr; } body.page-contact .ct-faq{ grid-template-columns: 1fr; } body.page-contact .ct-mbar{ display:flex; } body.page-contact .ct-mininav{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } body.page-contact .ct-top{ bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 560px){ body.page-contact .contact-hero .container{ width: min(1380px, calc(100% - 28px)); } body.page-contact .ct-mininav{ max-width: calc(100% - 32px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.page-contact .ct-mininav::-webkit-scrollbar{ display:none; } body.page-contact .copy-pill{ padding: 7px 10px; } } /* ========================================================= Partner pathway (premium + progress line + finish highlight) ========================================================= */ body.page-contact .ct-pathway{ margin-top: 16px; padding: 14px 14px; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: radial-gradient(760px 320px at 12% 0%, rgba(201,162,39,.06), transparent 62%), radial-gradient(760px 320px at 112% 10%, rgba(31,138,112,.05), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.03), rgba(244,240,232,.012)); box-shadow: 0 14px 38px rgba(0,0,0,.18); } body.page-contact .ct-pathway__head{ display: grid; gap: 6px; } body.page-contact .ct-steps{ margin: 12px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(244,240,232,.10); background: rgba(244,240,232,.02); position: relative; isolation: isolate; } /* Desktop progress line behind the steps */ @media (min-width: 981px){ body.page-contact .ct-steps::before{ content:""; position:absolute; left: 18px; right: 18px; top: 31px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(201,162,39,.12), rgba(201,162,39,.42), rgba(31,138,112,.20) ); opacity: .85; z-index: 0; pointer-events:none; } } body.page-contact .ct-step{ padding: 14px 14px; border-left: 1px solid rgba(244,240,232,.10); display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; transition: background-color .16s var(--ct-ease); position: relative; z-index: 1; } body.page-contact .ct-step:first-child{ border-left: 0; } body.page-contact .ct-step:hover{ background: rgba(201,162,39,.05); } body.page-contact .ct-step__num{ display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 48px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(201,162,39,.28); background: rgba(201,162,39,.08); color: rgba(244,240,232,.92); font-weight: 950; letter-spacing: .08em; font-size: .78rem; position: relative; z-index: 2; } body.page-contact .ct-step__title{ display: block; font-weight: 950; color: rgba(244,240,232,.96); letter-spacing: .01em; } body.page-contact .ct-step__text{ display: block; margin-top: 6px; color: rgba(244,240,232,.74); line-height: 1.55; } /* Finish highlight */ body.page-contact .ct-step--finish{ background: radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.10), rgba(201,162,39,.05) 55%, rgba(31,138,112,.03) ); } body.page-contact .ct-step--finish .ct-step__num{ border-color: rgba(201,162,39,.55); background: rgba(201,162,39,.14); box-shadow: 0 0 0 5px rgba(201,162,39,.10); } body.page-contact .ct-pathway__note{ margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(244,240,232,.14); display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; color: rgba(244,240,232,.80); } body.page-contact .ct-pathway__note-k{ letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; font-weight: 950; color: rgba(244,240,232,.70); } body.page-contact .ct-pathway__note-v{ font-weight: 800; color: rgba(244,240,232,.82); } /* Responsive */ @media (max-width: 980px){ body.page-contact .ct-steps{ grid-template-columns: 1fr; } body.page-contact .ct-step{ border-left: 0; border-top: 1px solid rgba(244,240,232,.10); } body.page-contact .ct-step:first-child{ border-top: 0; } } /* ========================================================= COMPACT MODE — Contact page (premium but tighter) ========================================================= */ body.page-contact .contact-hero{ padding: clamp(58px, 6vw, 92px) 0 26px; } body.page-contact .contact-hero-grid{ padding: clamp(18px, 2.4vw, 28px); gap: clamp(14px, 1.8vw, 22px); border-radius: 30px; } body.page-contact .contact-hero-grid::before, body.page-contact .contact-hero-grid::after{ left: 18px; top: 18px; } /* Buttons slightly smaller (still luxe) */ body.page-contact .btn{ padding: .58rem .95rem; font-size: .94rem; } /* Tighten hero action area */ body.page-contact .hero-actions{ gap: 10px; } body.page-contact .lead{ margin-top: .55rem; } /* Quick contact panel: tighter */ body.page-contact .contact-panel{ padding: clamp(14px, 1.5vw, 18px); border-radius: 22px; } body.page-contact .contact-panel__rail{ margin-top: 10px; } body.page-contact .contact-rail__item{ padding: 10px 0; } body.page-contact .contact-panel__actions{ margin-top: 12px; } body.page-contact .contact-panel__foot{ margin-top: 12px; padding-top: 12px; gap: 10px; } /* Make ALL sections on this page more compact (without touching other pages) */ body.page-contact .section{ padding: 56px 0 !important; } /* Rules: reduce vertical rhythm */ body.page-contact .ct-rule{ opacity: .9; } body.page-contact .ct-rule--tight{ margin: 14px 0 12px; } /* Contact details + pathway tighter */ body.page-contact .contact-detail{ padding: 14px 14px; } body.page-contact .ct-pathway{ margin-top: 12px; padding: 12px; } body.page-contact .ct-steps{ margin-top: 10px; } body.page-contact .ct-step{ padding: 12px; } /* Routes tighter */ body.page-contact .ct-route{ padding: 12px; } /* Cards tighter */ body.page-contact .contact-card{ padding: 14px; } body.page-contact .contact-stack{ gap: 14px; } body.page-contact .contact-split{ gap: 14px; } /* Form tighter */ body.page-contact .contact-form .form-grid{ gap: 10px; margin-top: 10px; } body.page-contact textarea.input{ min-height: 140px; } body.page-contact .form-actions{ margin-top: 10px; } body.page-contact .form-foot{ margin-top: .7rem; padding-top: .7rem; } /* Map shorter */ body.page-contact .map-frame iframe{ height: 300px; } /* FAQ tighter */ body.page-contact .ct-faq{ gap: 10px; } body.page-contact .ct-faq__item{ padding: 12px; } /* CTA band tighter */ body.page-contact .contact-cta{ padding: 56px 0; } /* Mini-nav + back-to-top more compact */ body.page-contact .ct-mininav{ padding: 8px 8px; gap: 6px; } body.page-contact .ct-mininav a{ padding: 7px 10px; font-size: .84rem; } body.page-contact .ct-top{ width: 42px; height: 42px; } /* Mobile action bar tighter */ body.page-contact .ct-mbar{ padding: 8px; border-radius: 20px; gap: 8px; } body.page-contact .ct-mbar__btn{ padding: 10px 12px; border-radius: 16px; } /* Responsive tweaks */ @media (max-width: 980px){ body.page-contact .contact-hero-grid{ padding: 16px; gap: 14px; border-radius: 26px; } body.page-contact .section{ padding: 48px 0 !important; } body.page-contact .map-frame iframe{ height: 280px; } } /* ========================================================= ICON SIZE FIX (Contact-only) - Shrinks oversized SVG / icon fonts in hero + quick contact rails ========================================================= */ body.page-contact :where(.contact-hero, .contact-panel, .contact-proof, .contact-details, .ct-mininav, .ct-mbar, .ct-top) :where(svg){ width: 16px !important; height: 16px !important; flex: 0 0 auto; opacity: .92; } body.page-contact :where(.contact-hero, .contact-panel, .contact-proof, .contact-details, .ct-mininav, .ct-mbar, .ct-top) :where(i, .bi, [class*="fa-"], [class*="icon"]){ font-size: 16px !important; line-height: 1 !important; } @media (max-width: 980px){ body.page-contact :where(.contact-hero, .contact-panel, .contact-proof, .contact-details, .ct-mininav, .ct-mbar, .ct-top) :where(svg){ width: 15px !important; height: 15px !important; } body.page-contact :where(.contact-hero, .contact-panel, .contact-proof, .contact-details, .ct-mininav, .ct-mbar, .ct-top) :where(i, .bi, [class*="fa-"], [class*="icon"]){ font-size: 15px !important; } } /* HERO META — force 3 columns */ body.page-contact .hero-meta.hero-meta--3{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } body.page-contact .hero-meta__item{ display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: linear-gradient(180deg, rgba(244,240,232,.022), rgba(244,240,232,.012)); box-shadow: inset 0 0 0 1px rgba(244,240,232,.045); } /* keep icons small */ body.page-contact .hero-meta__item svg{ width: 16px !important; height: 16px !important; flex: 0 0 auto; opacity: .92; margin-top: 2px; } body.page-contact .hero-meta__k{ display:block; color: rgba(244,240,232,.68); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 950; } body.page-contact .hero-meta__v{ display:block; font-weight: 950; letter-spacing: .01em; margin-top: 6px; color: rgba(244,240,232,.96); } /* alert accent */ body.page-contact .hero-meta__item--alert{ border-color: rgba(201,162,39,.22); } @media (max-width: 980px){ body.page-contact .hero-meta.hero-meta--3{ grid-template-columns: 1fr; } } /* ========================================================= ✅ Impact-style hover sheen (fade — no line) ========================================================= */ body.page-contact :is( .contact-panel, .contact-card, .ct-route, .ct-faq__item, .contact-detail, .ct-pathway, .ct-step, .contact-proof__item, .hero-meta__item ){ position: relative; overflow: hidden; isolation: isolate; } body.page-contact :is( .contact-panel, .contact-card, .ct-route, .ct-faq__item, .contact-detail, .ct-pathway, .ct-step, .contact-proof__item, .hero-meta__item )::after{ content:""; position:absolute; inset:-45% -40%; pointer-events:none; background: radial-gradient(120% 70% at 10% 38%, rgba(244,240,232,.08) 0%, rgba(201,162,39,.14) 26%, rgba(244,240,232,.06) 44%, rgba(244,240,232,0) 70%); opacity: 0; transform: translateX(-24%) rotate(8deg); mix-blend-mode: overlay; transition: opacity .22s var(--ct-ease), transform .55s var(--ct-ease); } body.page-contact :is( .contact-panel, .contact-card, .ct-route, .ct-faq__item, .contact-detail, .ct-pathway, .ct-step, .contact-proof__item, .hero-meta__item ):hover::after{ opacity: .92; transform: translateX(10%) rotate(8deg); } @media (hover: none){ body.page-contact :is( .contact-panel, .contact-card, .ct-route, .ct-faq__item, .contact-detail, .ct-pathway, .ct-step, .contact-proof__item, .hero-meta__item ):hover::after{ opacity: .55; transform: translateX(2%) rotate(8deg); } } /* ========================================================= TRUST-PAGE STYLE MATCH — Right-hand HERO card (Contact) - stacked compact rail + divider lines ========================================================= */ body.page-contact .contact-panel{ border-radius: 26px; border: 1px solid rgba(244,240,232,.16); background: radial-gradient(760px 320px at 12% 0%, rgba(201,162,39,.085), transparent 62%), radial-gradient(760px 320px at 112% 10%, rgba(31,138,112,.06), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.060), rgba(244,240,232,.018)); backdrop-filter: blur(var(--ct-blur)) saturate(1.05); box-shadow: inset 0 0 0 1px rgba(244,240,232,.06), 0 18px 46px rgba(0,0,0,.26); } body.page-contact .contact-panel__rail{ border-top: 0; margin-top: 12px; border: 1px solid rgba(244,240,232,.12); border-radius: 18px; overflow: hidden; background: rgba(6,17,13,.22); } body.page-contact .contact-rail__item{ padding: 0; border-bottom: 1px solid rgba(244,240,232,.10); } body.page-contact .contact-rail__item:last-child{ border-bottom: 0; } body.page-contact .contact-rail__main{ padding: 12px 12px; border-radius: 0; background: transparent; } body.page-contact .contact-rail__main:hover{ background: rgba(201,162,39,.06); } /* Keep the copy pill aligned with the new inner padding */ body.page-contact .contact-rail__item .copy-pill{ margin-right: 10px; } @media (max-width: 980px){ body.page-contact .contact-rail__main{ padding: 11px 11px; } } /* Contact details — 4-up grid (Bootstrap row/col) */ body.page-contact .contact-details.contact-details--grid{ border: 0; background: transparent; overflow: visible; margin-top: 12px; } /* Turn each item into a mini card */ body.page-contact .contact-detail--card{ position: relative; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); padding: 14px; display: flex; flex-direction: column; gap: 10px; } /* Main link block */ body.page-contact .contact-detail--card .contact-detail__main{ flex: 1; min-width: 0; display: block; text-decoration: none !important; color: rgba(244,240,232,.92) !important; } /* Copy button aligns to bottom */ body.page-contact .contact-detail--card .copy-pill{ align-self: flex-start; margin-top: auto; } /* Hover treatment */ body.page-contact a.contact-detail--card:hover{ background: rgba(201,162,39,.06); border-color: rgba(201,162,39,.25); } /* ========================================================= v2.9 PATCHES (requested fixes) 1) True full-width hero (Impact-style): background full-bleed, content centered 2) Hero stays 2-column on desktop (right card never drops) 3) Icons centered inside the circles (Bootstrap Icons + SVG) ========================================================= */ /* 1) Make hero wrapper full-width, keep inner content centered */ body.page-contact .contact-hero .container{ width: 100% !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } body.page-contact .contact-hero-grid{ width: min(1380px, calc(100% - 48px)); margin-left: auto; margin-right: auto; } @media (max-width: 560px){ body.page-contact .contact-hero-grid{ width: min(1380px, calc(100% - 28px)); } } /* 2) Hard force 2-column desktop layout (fix: right card on its own row) */ @media (min-width: 981px){ body.page-contact .contact-hero-grid{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 460px); align-items: start; } body.page-contact .contact-panel{ align-self: start; } } /* 3) Icon circles: centered */ body.page-contact .contact-rail__label{ display: inline-flex; align-items: center; gap: 10px; } /* Bootstrap Icons: