/* Page styles: contact.html */

/* ===== ROOT & RESETS ===== */
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family: 'Sora', sans-serif; background:#f4f7fe; color:#0A1220; overflow-x:hidden; }
    .gradient-text { background: linear-gradient(135deg, #0046FF, #00D4AA); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .eyebrow { display:inline-block; font-weight:600; font-size:0.75rem; letter-spacing:2.5px; text-transform:uppercase; color:#0046FF; background:rgba(0,70,255,0.08); padding:0.4rem 1.2rem; border-radius:40px; margin-bottom:1.2rem; backdrop-filter:blur(4px); border:1px solid rgba(0,70,255,0.10); }

    /* ===== CONTACT HERO (premium refresh) ===== */
    .contact { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:160px clamp(16px,5vw,80px) 100px; overflow:hidden; background:radial-gradient(140% 110% at 70% 0%, #dce6ff 0%, #f0f5ff 45%, #ffffff 85%); }
    .contact-bg { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; opacity:0.15; }
    .contact-overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 80%); backdrop-filter:blur(6px); }
    .contact-grid { width:100%; max-width:1200px; display:grid; grid-template-columns:1fr 1.1fr; gap:40px; align-items:stretch; position:relative; z-index:2; animation: fadeUp 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
    @keyframes fadeUp { 0% { opacity:0; transform:translateY(40px); } 100% { opacity:1; transform:translateY(0); } }

    .glass { background:rgba(255,255,255,0.65); backdrop-filter:blur(24px) saturate(200%); -webkit-backdrop-filter:blur(24px) saturate(200%); border:1px solid rgba(255,255,255,0.6); border-radius:40px; box-shadow:0 40px 80px -20px rgba(0,20,60,0.18), inset 0 1px 0 rgba(255,255,255,0.6); transition: transform 0.4s ease, box-shadow 0.4s ease; }
    .glass:hover { transform:translateY(-4px); box-shadow:0 60px 100px -24px rgba(0,20,60,0.25); }

    .info { padding:52px 48px; display:flex; flex-direction:column; background:rgba(255,255,255,0.5); border-radius:40px; }
    .info h2 { font-size:clamp(34px,4.2vw,50px); font-weight:800; line-height:1.05; color:#0A1220; letter-spacing:-0.03em; }
    .info h2 span { background:linear-gradient(135deg, #0046FF, #00D4AA); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .info p.lead { margin-top:18px; color:#2D3A4F; font-size:17px; line-height:1.7; opacity:0.9; max-width:90%; }
    .info-list { margin-top:40px; display:flex; flex-direction:column; gap:24px; }
    .info-item { display:flex; align-items:center; gap:20px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.04); }
    .info-item:last-child { border-bottom:none; }
    .info-ic { flex:0 0 auto; display:grid; place-items:center; width:56px; height:56px; border-radius:20px; color:#fff; background:linear-gradient(145deg, #0046FF, #1A5BFF); box-shadow:0 16px 28px -10px rgba(0,70,255,0.30); transition: transform 0.3s ease, box-shadow 0.3s; }
    .info-item:hover .info-ic { transform:scale(1.05) rotate(-2deg); box-shadow:0 20px 36px -8px rgba(0,70,255,0.40); }
    .info-ic svg { width:26px; height:26px; }
    .info-item .label { font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#6B7A92; font-weight:600; }
    .info-item .value { font-size:18px; font-weight:600; color:#0A1220; margin-top:2px; text-decoration:none; transition:color 0.2s; }
    .info-item a.value:hover { color:#0046FF; }

    .socials { margin-top:auto; padding-top:36px; display:flex; gap:16px; border-top:1px solid rgba(0,0,0,0.04); }
    .socials a { display:grid; place-items:center; width:48px; height:48px; border-radius:18px; color:#0A1220; background:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.7); transition: all 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); backdrop-filter:blur(4px); }
    .socials a:hover { background:linear-gradient(135deg, #0046FF, #0066FF); color:#fff; transform:translateY(-6px) scale(1.04); border-color:transparent; box-shadow:0 20px 36px -12px rgba(0,70,255,0.35); }
    .socials svg { width:22px; height:22px; }

    /* ===== FORM CARD (refined) ===== */
    .form-card { padding:52px 48px; background:rgba(255,255,255,0.7); backdrop-filter:blur(24px) saturate(200%); border-radius:40px; }
    .form-card h3 { font-size:28px; font-weight:700; color:#0A1220; letter-spacing:-0.02em; }
    .form-card .sub { margin-top:8px; font-size:16px; color:#5A6A7E; }
    form.contact-form { margin-top:30px; display:grid; gap:22px; }
    .row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    .field { display:flex; flex-direction:column; gap:6px; }
    .field label { font-size:12px; font-weight:600; letter-spacing:0.5px; color:#1E2B3A; text-transform:uppercase; }
    .field input, .field textarea, .field select { width:100%; padding:18px 20px; font-family:inherit; font-size:15px; color:#0A1220; background:#F6FAFF; border:1px solid rgba(0,0,0,0.05); border-radius:24px; outline:none; transition: all 0.25s ease, box-shadow 0.3s; box-shadow:0 2px 6px rgba(0,0,0,0.01); }
    .field select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A1220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 20px center; background-size:14px; }
    .field select option { color:#0A1220; background:#fff; }
    .field input::placeholder, .field textarea::placeholder { color:#A5B3C7; }
    .field input:focus, .field textarea:focus, .field select:focus { border-color:#0046FF; background:#FFFFFF; box-shadow:0 0 0 5px rgba(0,70,255,0.08), 0 10px 24px -10px rgba(0,70,255,0.15); }
    .field textarea { resize:vertical; min-height:140px; border-radius:24px; }
    .submit-btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; width:100%; padding:20px 24px; font-family:inherit; font-size:17px; font-weight:700; color:#fff; cursor:pointer; border:none; border-radius:60px; background:linear-gradient(135deg, #0046FF, #1A5BFF); box-shadow:0 20px 40px -10px rgba(0,70,255,0.40); transition: all 0.3s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); letter-spacing:0.3px; }
    .submit-btn:hover { transform:translateY(-4px) scale(1.01); filter:brightness(1.06); box-shadow:0 28px 56px -14px rgba(0,70,255,0.50); }
    .submit-btn svg { width:22px; height:22px; transition:transform 0.3s; }
    .submit-btn:hover svg { transform:translateX(6px) rotate(-4deg); }
    .form-note { font-size:13px; color:#6B7A92; margin-top:6px; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }

    /* ===== OFFICE HOURS + MAP (fresh) ===== */
    .section { padding:80px clamp(20px,5vw,80px); background:#f4f7fe; position:relative; }
    .split { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
    .reveal { opacity:0; transform:translateY(30px); animation: fadeUp 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.2s both; }
    .reveal.right { animation-delay:0.35s; }
    .hours-item { display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid rgba(0,0,0,0.04); font-size:16px; font-weight:500; }
    .hours-item:last-child { border-bottom:none; }
    .hours-item b { color:#0A1220; font-weight:600; }
    .hours-item span { color:#3A4A5E; font-weight:400; }

    .media-ph { position:relative; border-radius:32px; overflow:hidden; background:linear-gradient(145deg, #eef3fc, #ffffff); box-shadow:0 30px 60px -20px rgba(0,20,40,0.15); border:1px solid rgba(255,255,255,0.5); transition:transform 0.4s ease; }
    .media-ph:hover { transform:scale(1.01); }
    .ratio-4-3 { aspect-ratio:4/3; }
    .ph-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; background:radial-gradient(circle at 30% 30%, #d9e6ff, #eef3fc); padding:2rem; }
    .ph-icon { font-size:4rem; margin-bottom:0.8rem; color:#0046FF; opacity:0.8; }
    .ph-label { font-size:1.6rem; font-weight:700; color:#0A1220; letter-spacing:-0.02em; }
    .ph-sub { color:#4A5A6E; font-size:1rem; margin-top:0.4rem; }

    /* ===== FAQ (elevated) ===== */
    .faq-section { max-width:1200px; margin:0 auto; padding:40px 0 20px; }
    .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:36px; }
    .faq-item { background:rgba(255,255,255,0.5); backdrop-filter:blur(16px); border-radius:28px; padding:28px 32px; border:1px solid rgba(255,255,255,0.6); box-shadow:0 16px 36px -16px rgba(0,0,0,0.04); transition: all 0.3s ease; cursor:pointer; }
    .faq-item:hover { background:rgba(255,255,255,0.8); transform:translateY(-4px); box-shadow:0 28px 52px -24px rgba(0,70,255,0.12); }
    .faq-q { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:18px; color:#0A1220; }
    .faq-q span { font-size:26px; font-weight:300; color:#0046FF; transition:transform 0.3s; }
    .faq-answer { max-height:0; overflow:hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s, padding 0.3s; opacity:0; color:#3A4A5E; font-size:15px; line-height:1.6; }
    .faq-item.active .faq-answer { max-height:200px; opacity:1; padding-top:18px; }
    .faq-item.active .faq-q span { transform:rotate(45deg); }

    /* ===== RESPONSIVE ===== */
    @media (max-width:880px) { .contact-grid { grid-template-columns:1fr; } .split { grid-template-columns:1fr; } .faq-grid { grid-template-columns:1fr; } }
    @media (max-width:520px) { .row { grid-template-columns:1fr; } .info, .form-card { padding:32px 24px; } .contact { padding:130px 16px 60px; } }

/* ============================================================
   CONTACT v2
   The hero video was set to opacity .15 under a white overlay,
   so it washed out to nothing. Now it reads as a real video
   hero with the cards floating over it as true glass.
   ============================================================ */

.contact {
  position: relative;
  isolation: isolate;
  padding: clamp(96px, 11vh, 132px) clamp(20px, 5vw, 48px) clamp(64px, 8vh, 92px);
  display: flex;
  justify-content: center;
  min-height: 0;                      /* was leaving dead space top and bottom */
  overflow: hidden;
}

/* video now actually visible */
.contact-bg { opacity: 1; z-index: -3; }

/* dark navy veil instead of the white wash, so white glass reads as glass */
.contact-overlay {
  z-index: -2;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background:
    linear-gradient(180deg, rgba(6,13,30,0.90) 0%, rgba(8,16,36,0.84) 45%, rgba(6,13,30,0.92) 100%),
    radial-gradient(90% 70% at 15% 10%, rgba(0,70,255,0.22), transparent 62%);
}

/* subtle blueprint grid over the video */
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  background-size: 54px 54px;
}

/* ---------- section heading above the cards ---------- */
.contact-head {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto clamp(26px, 3vw, 40px);
  text-align: center; color: #fff;
}
.contact-head .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .4px; color: #DCE7FF;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.contact-head .eyebrow i {
  width: 7px; height: 7px; border-radius: 50%; background: #34e29a;
  box-shadow: 0 0 0 3px rgba(52,226,154,0.22);
}
.contact-head h1 {
  font-family: var(--font-head, 'Sora', sans-serif);
  font-size: clamp(30px, 4.2vw, 50px); font-weight: 800;
  letter-spacing: -1.6px; line-height: 1.06; color: #fff; margin: 0;
}
.contact-head h1 span { color: #8FB6FF; }
.contact-head p {
  margin: 14px auto 0; max-width: 62ch;
  font-size: 15.4px; line-height: 1.7; color: rgba(255,255,255,0.74);
}

/* ---------- cards ---------- */
.contact-grid { align-items: stretch; gap: clamp(20px, 2.4vw, 34px); }

.glass {
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 26px;
  box-shadow: 0 40px 90px -34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.7);
}
.glass:hover { transform: translateY(-5px); box-shadow: 0 54px 110px -34px rgba(0,0,0,0.68); }

/* left column: push socials to the bottom so the gap closes */
.info { display: flex; flex-direction: column; }
.info .info-list { margin-top: auto; }

/* trust chips fill the dead space under the contact details */
.contact-trust {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(12,21,38,0.10);
}
.contact-trust span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px;
  font-size: 12.2px; font-weight: 600; color: var(--text, #0C1526);
  background: rgba(0,70,255,0.06); border: 1px solid rgba(0,70,255,0.16);
}
.contact-trust svg { width: 14px; height: 14px; color: var(--blue, #0046FF); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .contact { padding-top: clamp(84px, 10vh, 110px); }
  .info .info-list { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
  .contact-bg { display: none; }
}

/* .contact is a flex container; the new heading was landing beside the
   cards as a second flex child. Stack them instead. */
.contact { flex-direction: column; align-items: center; }
.contact-grid { width: 100%; }
.contact-head { width: 100%; }

/* chips were inheriting a washed-out colour on the glass card */
.contact-trust span { color: #0C1526; background: rgba(0,70,255,0.07); }
.contact-trust svg { color: #0046FF; }

/* The heading moved out of this card, so the list no longer needs pushing
   down — content starts at the top and the socials take the slack instead. */
.info .info-list { margin-top: 0; }
.info > :last-child { margin-top: auto; }

/* FAQ cards sit in a 2-column grid. Without this, grid stretches every
   card in a row to the height of the tallest, so opening one made its
   closed neighbour render as a tall blank box — looking like two were
   open. `start` lets each card keep its own height. */
.faq-grid { align-items: start; }

/* ============================================================
   Left card had a large empty run between the trust chips and
   the socials. Branding + the four guarantees fill it.
   ============================================================ */
.contact-brand { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(12,21,38,0.10); }

.cb-logo { display: flex; align-items: center; gap: 12px; }
.cb-logo img { width: 54px; height: 54px; object-fit: contain; display: block; }
.cb-name {
  font-family: var(--font-head, 'Sora', sans-serif);
  font-size: 19px; font-weight: 700; letter-spacing: -.2px; color: var(--text, #0C1526);
  line-height: 1.1;
}
.cb-name b { display: block; font-weight: 700; color: var(--blue, #0046FF); }

.cb-tag { margin-top: 14px; font-size: 13.6px; line-height: 1.65; color: var(--text-soft, #4C566B); }

.cb-guarantees { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cb-guarantees li {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.4px; font-weight: 500; color: var(--text, #0C1526);
}
.cb-guarantees .g-ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--r-sm, 10px);
  color: var(--blue, #0046FF);
  background: rgba(0,70,255,0.08);
  border: 1px solid rgba(0,70,255,0.16);
  transition: background var(--dur-fast,.25s) ease, color var(--dur-fast,.25s) ease;
}
.cb-guarantees .g-ic svg { width: 16px; height: 16px; }
.cb-guarantees li:hover .g-ic { background: var(--blue, #0046FF); color: #fff; }

/* The `.info > :last-child { margin-top: auto }` above was added when this
   card was mostly empty. Now that it holds branding and guarantees, that
   push makes the content overflow past the card background. Let the card
   size to its content instead. */
.info > :last-child { margin-top: 0; }
.info { height: auto; }
.contact-grid { align-items: start; }

/* Measured: .cb-guarantees li resolved to rgb(255,255,255) — white text on a
   white card, which is why the block looked faded. A broader `li` rule was
   outranking the token colour. Pin the colours explicitly. */
.info .contact-brand .cb-name   { color: #0C1526; }
.info .contact-brand .cb-name b { color: #0046FF; }
.info .contact-brand .cb-tag    { color: #4C566B; }
.info .contact-brand .cb-guarantees li { color: #0C1526; }
.info .contact-brand .cb-guarantees .g-ic { color: #0046FF; }
.info .contact-brand .cb-guarantees li:hover .g-ic { color: #fff; }