/* Typography Override v3 - Terminal/Security-Report (mono dominant + serif numbers)
   Backup: ~/backups/public_html-pre-typo-20260506-062910.tar.gz */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{
  --title-font:"JetBrains Mono","SF Mono",Consolas,monospace !important;
  --body-font:"JetBrains Mono","SF Mono",Consolas,monospace !important;
  --display-font:"Instrument Serif","Times New Roman",serif;
  --mono-font:"JetBrains Mono","SF Mono",Consolas,monospace;
}
html body, html body p, html body li, html body span, html body div,
html body a, html body label, html body input, html body textarea, html body select{
  font-family:"JetBrains Mono","SF Mono",Consolas,monospace !important;
  font-feature-settings:"liga" 0,"calt" 1;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .title, html body .section-title, html body .hero-title,
html body [class*="title"]{
  font-family:"JetBrains Mono","SF Mono",Consolas,monospace !important;
  font-weight:500 !important;
  letter-spacing:-0.02em !important;
  line-height:1.15 !important;
  text-transform:none !important;
}
html body .price, html body .amount, html body .number, html body .display,
html body .display-1, html body .display-2, html body .display-3, html body .display-4,
html body .stat-number, html body .counter, html body .big-number, html body .value,
html body [class*="price"], html body [class*="counter"], html body .heading-display{
  font-family:"Instrument Serif","Times New Roman",serif !important;
  font-weight:400 !important;
  letter-spacing:-0.01em !important;
}
html body .eyebrow, html body .label, html body .badge, html body .tag,
html body .category, html body .meta-label, html body .section-subtitle,
html body [class*="subtitle"], html body small.uppercase{
  font-family:"JetBrains Mono","SF Mono",Consolas,monospace !important;
  text-transform:uppercase !important;
  letter-spacing:0.14em !important;
  font-weight:500 !important;
}
html body code, html body pre, html body kbd, html body samp, html body tt,
html body .url, html body .code, html body .data, html body .email, html body .phone,
html body .mono, html body a[href^="http"], html body a[href^="mailto:"], html body a[href^="tel:"]{
  font-family:"JetBrains Mono","SF Mono",Consolas,monospace !important;
}
html body .btn, html body button{
  font-family:"JetBrains Mono","SF Mono",Consolas,monospace !important;
  font-weight:500 !important;
  letter-spacing:0.02em !important;
}
html body .serif-accent, html body em.display, html body i.display{
  font-family:"Instrument Serif","Times New Roman",serif !important;
  font-style:italic !important;
  font-weight:400 !important;
}

/* Contact page feature cards - unify title sizes and improve spacing */
.contact-feature .box-title {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
    white-space: nowrap;
}
.contact-feature .box-text {
    line-height: 1.7 !important;
    margin-bottom: 4px !important;
}
.contact-feature .media-body {
    padding-left: 6px;
}

/* === Contact page  Liquid Glass cards (Our Address / Contact Us / Opening Hours) === */
.contact-feature {
    position: relative;
    background:
        linear-gradient(135deg, rgba(124, 197, 255, 0.10) 0%, rgba(26, 111, 196, 0.06) 50%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid rgba(124, 197, 255, 0.22) !important;
    border-radius: 22px !important;
    padding: 28px 26px !important;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 0 24px rgba(124, 197, 255, 0.06),
        0 8px 28px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(26, 111, 196, 0.10) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    overflow: hidden;
}

/* subtle top-edge specular highlight (liquid glass) */
.contact-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(124,197,255,0.10) 35%, rgba(255,255,255,0) 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* soft inner glow accent */
.contact-feature::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 120%;
    height: 80%;
    background: radial-gradient(ellipse at top left, rgba(124, 197, 255, 0.18), rgba(124, 197, 255, 0) 60%);
    pointer-events: none;
    border-radius: inherit;
}

.contact-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 197, 255, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 0 28px rgba(124, 197, 255, 0.10),
        0 14px 40px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(26, 111, 196, 0.22) !important;
}

/* keep the icon tile consistent on glass */
.contact-feature .box-icon {
    background: rgba(8, 22, 44, 0.55) !important;
    border: 1px solid rgba(124, 197, 255, 0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* make sure text sits above the ::after glow */
.contact-feature .box-icon,
.contact-feature .media-body {
    position: relative;
    z-index: 1;
}

/* ===== Liquid Glass enhancement for Contact section cards & form ===== */
.contact-feature {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(124,197,255,0.06) 100%),
        rgba(8, 22, 44, 0.55) !important;
    border: 1.5px solid rgba(124, 197, 255, 0.45) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        inset 0 0 28px rgba(124,197,255,0.10),
        0 14px 40px rgba(0,0,0,0.45),
        0 0 60px rgba(26,111,196,0.18) !important;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
}
.contact-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(124,197,255,0.25) 40%, rgba(255,255,255,0.05) 70%, rgba(124,197,255,0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.contact-feature::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -10%;
    width: 120%;
    height: 80%;
    background: radial-gradient(ellipse at top left, rgba(255,255,255,0.22), rgba(124,197,255,0.10) 35%, rgba(124,197,255,0) 65%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}
.contact-feature:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(124, 197, 255, 0.75) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        inset 0 0 32px rgba(124,197,255,0.18),
        0 18px 50px rgba(0,0,0,0.55),
        0 0 72px rgba(26,111,196,0.30) !important;
}
.contact-feature .box-icon,
.contact-feature .media-body {
    position: relative;
    z-index: 3;
}

/* ===== Liquid Glass for 'How May We Help You?' form ===== */
.contact-form1 {
    position: relative !important;
    overflow: hidden !important;
    padding: 40px !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(124,197,255,0.06) 100%),
        rgba(8, 22, 44, 0.55) !important;
    border: 1.5px solid rgba(124, 197, 255, 0.45) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -1px 0 rgba(255,255,255,0.05),
        inset 0 0 32px rgba(124,197,255,0.10),
        0 18px 50px rgba(0,0,0,0.50),
        0 0 80px rgba(26,111,196,0.20) !important;
    transition: border-color .35s ease, box-shadow .35s ease !important;
}
.contact-form1::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(124,197,255,0.25) 40%, rgba(255,255,255,0.05) 70%, rgba(124,197,255,0.45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.contact-form1::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -10%;
    width: 120%;
    height: 70%;
    background: radial-gradient(ellipse at top left, rgba(255,255,255,0.20), rgba(124,197,255,0.10) 35%, rgba(124,197,255,0) 65%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}
.contact-form1:hover {
    border-color: rgba(124, 197, 255, 0.70) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 0 36px rgba(124,197,255,0.16),
        0 22px 60px rgba(0,0,0,0.55),
        0 0 90px rgba(26,111,196,0.28) !important;
}
.contact-form1 > * {
    position: relative;
    z-index: 3;
}

/* ===== Reduce glow intensity on contact cards & form ===== */
.contact-feature {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        inset 0 0 14px rgba(124,197,255,0.04),
        0 10px 28px rgba(0,0,0,0.40),
        0 0 24px rgba(26,111,196,0.06) !important;
}
.contact-feature:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 0 18px rgba(124,197,255,0.08),
        0 14px 36px rgba(0,0,0,0.50),
        0 0 32px rgba(26,111,196,0.12) !important;
}
.contact-form1 {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        inset 0 0 16px rgba(124,197,255,0.05),
        0 14px 36px rgba(0,0,0,0.45),
        0 0 30px rgba(26,111,196,0.08) !important;
}
.contact-form1:hover {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.24),
        inset 0 0 20px rgba(124,197,255,0.09),
        0 18px 44px rgba(0,0,0,0.52),
        0 0 40px rgba(26,111,196,0.14) !important;
}

/* Equal height feature cards on home */
.feature-area-1 .row { align-items: stretch !important; }
.feature-area-1 .row > [class*='col-'] { display: flex !important; }
.feature-area-1 .feature-card { display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; }

/* === Glassmorphism upgrade for Contact page Liquid Glass cards === */
/* Added 2026-05-11 - real frosted glass effect with backdrop blur */
.contact-feature,
section .contact-feature,
.contact-section .contact-feature {
    background: rgba(255, 255, 255, 0.06) !important;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(124,197,255,0.05) 50%, rgba(255,255,255,0.02) 100%) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important;
    border-radius: 22px !important;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease !important;
}

.contact-feature .box-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(124, 197, 255, 0.25) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.contact-feature:hover {
    transform: translateY(-4px) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(124, 197, 255, 0.45) !important;
    box-shadow:
        0 14px 44px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(26, 111, 196, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* === Higher contrast text on Contact cards === */
.contact-feature .box-title,
.contact-feature h3,
.contact-feature h2 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    text-shadow: 0 0 12px rgba(124, 197, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.contact-feature .box-text,
.contact-feature .box-text p,
.contact-feature p,
.contact-feature a,
.contact-feature .media-body,
.contact-feature .media-body p {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.contact-feature a:hover {
    color: #7cc5ff !important;
    text-shadow: 0 0 10px rgba(124, 197, 255, 0.5) !important;
}

/* === Contact form: unified glass style for ALL input states === */
/* Added 2026-05-11 - fix autofill turning fields white */
.contact-section .form-control,
.contact-section .form-select,
.contact-section input.form-control,
.contact-section textarea.form-control,
.contact-section select.form-select,
form.ajax-contact .form-control,
form.ajax-contact .form-select,
form.ajax-contact input,
form.ajax-contact textarea,
form.ajax-contact select {
    background: rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #7cc5ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease !important;
}

.contact-section .form-control:focus,
.contact-section .form-select:focus,
form.ajax-contact .form-control:focus,
form.ajax-contact .form-select:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(124, 197, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(124, 197, 255, 0.15), inset 0 1px 0 rgba(255,255,255,0.10) !important;
    outline: none !important;
}

/* Kill Chrome/Edge yellow autofill */
.contact-section input:-webkit-autofill,
.contact-section input:-webkit-autofill:hover,
.contact-section input:-webkit-autofill:focus,
.contact-section input:-webkit-autofill:active,
.contact-section textarea:-webkit-autofill,
.contact-section select:-webkit-autofill,
form.ajax-contact input:-webkit-autofill,
form.ajax-contact input:-webkit-autofill:hover,
form.ajax-contact input:-webkit-autofill:focus,
form.ajax-contact input:-webkit-autofill:active,
form.ajax-contact textarea:-webkit-autofill,
form.ajax-contact select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 28, 48, 0.85) inset !important;
    box-shadow: 0 0 0 1000px rgba(15, 28, 48, 0.85) inset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    caret-color: #7cc5ff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Placeholder consistency */
.contact-section .form-control::placeholder,
form.ajax-contact .form-control::placeholder,
form.ajax-contact textarea::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1 !important;
}

/* Icons inside inputs - keep brand blue */
.contact-section .input-label i,
form.ajax-contact .input-label i {
    color: #7cc5ff !important;
}

/* === Subject select dropdown options readability === */
form.ajax-contact select.form-select option,
.contact-section select.form-select option {
    background-color: #0f1c30 !important;
    color: #ffffff !important;
}
form.ajax-contact select.form-select option:disabled,
.contact-section select.form-select option:disabled {
    color: rgba(255, 255, 255, 0.55) !important;
}