/* ChaiBD about.html and contact.html: a fresh look over the design's own content (public/js/chai-info.js) */
/* hero */
.page-hero .promo-card { position: relative; overflow: hidden; padding: clamp(22px, 4vw, 40px) !important; border-radius: 28px !important; color: #fff !important;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 196, 0, .28), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--red) 90%, #ff8a3d), color-mix(in srgb, var(--red) 78%, #000)) !important;
  box-shadow: 0 30px 50px -34px var(--red) !important; }
.page-hero .promo-card h1, .page-hero .promo-card p, .page-hero .promo-card .eyebrow { color: #fff !important; position: relative; z-index: 1; }
.page-hero .promo-card p { opacity: .92; max-width: 640px; }
.page-hero .promo-card .eyebrow { display: inline-flex; padding: 5px 12px; border-radius: 99px; background: rgba(255, 255, 255, .18); }
.page-hero .promo-card .btn-primary { background: #fff !important; color: var(--red) !important; }
.page-hero .promo-card .btn-ghost { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; }
.page-hero .hero-cta { position: relative; z-index: 1; }
.in-route { position: absolute; right: 2%; top: 50%; width: min(44%, 420px); transform: translateY(-50%); opacity: .95; pointer-events: none; }
.in-route path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2.5; stroke-dasharray: 6 7; animation: in-dash 1.4s linear infinite; }
.in-route circle { fill: #fff; stroke: rgba(255, 255, 255, .35); stroke-width: 7; }
.in-route .pl { fill: #fde68a; offset-path: path('M300 50 C 230 -10, 90 0, 30 120'); offset-rotate: auto 180deg; animation: in-fly 5.5s ease-in-out infinite; }
@keyframes in-dash { to { stroke-dashoffset: -26; } }
@keyframes in-fly { 0% { offset-distance: 0%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 760px) { .in-route { position: relative; right: auto; top: auto; transform: none; width: 100%; max-width: 360px; margin: 10px auto 0; display: block; } }
/* numbers */
.stats { gap: 12px !important; }
.stat-card { position: relative; overflow: hidden; border-radius: 20px !important; padding: 18px !important; background: var(--card) !important; border: 1.5px solid var(--card-b) !important; box-shadow: 0 18px 30px -28px rgba(0, 0, 0, .5); }
.stat-card::after { content: ""; position: absolute; right: -24px; top: -24px; width: 80px; height: 80px; border-radius: 50%; background: color-mix(in srgb, var(--red) 8%, transparent); }
.stat-card b { font-family: Poppins, 'Hind Siliguri', sans-serif; font-size: clamp(22px, 3vw, 30px) !important; background: linear-gradient(135deg, var(--red), #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.stat-card b svg { color: #f59e0b; }
/* icon tiles everywhere */
.trust-item .ic, .value-card .ic, .service-card .ic, .office-card .ic, .how-card .ic, .contact-card .ic { width: 52px !important; height: 52px !important; border-radius: 16px !important; display: grid !important; place-items: center; color: #fff !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--red) 70%, #ff8a3d), var(--red)) !important; box-shadow: 0 12px 20px -14px var(--red); }
.trust-item .ic svg, .value-card .ic svg, .service-card .ic svg, .office-card .ic svg, .how-card .ic svg, .contact-card .ic svg { width: 24px; height: 24px; color: #fff; }
.trust-item, .value-card, .service-card, .office-card, .contact-card, .side-card, .hours-card, .form-card { border-radius: 22px !important; border: 1.5px solid var(--card-b) !important; background: var(--card) !important; box-shadow: 0 18px 32px -30px rgba(0, 0, 0, .5); transition: transform .25s, box-shadow .25s; }
.trust-item:hover, .value-card:hover, .service-card:hover, .office-card:hover, .contact-card:hover { transform: translateY(-4px); box-shadow: 0 26px 40px -30px rgba(0, 0, 0, .55); }
.value-card:nth-child(2) .ic, .service-card:nth-child(2) .ic, .office-card:nth-child(2) .ic, .contact-card:nth-child(2) .ic { background: linear-gradient(145deg, #60a5fa, #2563eb) !important; box-shadow: 0 12px 20px -14px #2563eb; }
.value-card:nth-child(3) .ic, .service-card:nth-child(3) .ic, .office-card:nth-child(3) .ic, .contact-card:nth-child(3) .ic { background: linear-gradient(145deg, #4ade80, #16a34a) !important; box-shadow: 0 12px 20px -14px #16a34a; }
.service-card:nth-child(4) .ic, .contact-card:nth-child(4) .ic { background: linear-gradient(145deg, #c084fc, #7c3aed) !important; box-shadow: 0 12px 20px -14px #7c3aed; }
/* the journey: numbered cards on a dashed line */
.how-grid { position: relative; }
@media (min-width: 900px) { .how-grid::before { content: ""; position: absolute; left: 8%; right: 8%; top: 46px; height: 3px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--red) 40%, transparent) 0 10px, transparent 10px 18px); animation: in-flow 1.2s linear infinite; z-index: 0; } }
@keyframes in-flow { to { background-position: 18px 0; } }
.how-card { position: relative; z-index: 1; border-radius: 22px !important; background: var(--card) !important; border: 1.5px solid var(--card-b) !important; text-align: center; }
.how-card .ic { margin: 0 auto; }
.how-num { position: absolute; right: 14px; top: 12px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #111827; color: #fff; font: 800 12px Poppins, sans-serif; }
/* offices */
.office-card .s { display: flex; align-items: center; gap: 6px; }
.office-card:nth-child(1) { background: linear-gradient(160deg, color-mix(in srgb, var(--red) 5%, var(--card)), var(--card)) !important; }
/* call to action */
.cta-band { border-radius: 26px !important; background: linear-gradient(135deg, #111827, #1f2937) !important; color: #fff !important; }
.cta-band h2, .cta-band p { color: #fff !important; }
/* contact */
.contact-card { text-align: left; }
.contact-card a, .contact-card .s { word-break: break-word; }
.map-box { position: relative; min-height: 260px !important; border-radius: 22px !important; overflow: hidden; border: 1.5px solid var(--card-b); background: linear-gradient(150deg, #eef6ff, #f6faf4) !important; }
.map-box .in-map { position: absolute; inset: 0; }
.map-box .in-open { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px; background: #fff; color: var(--red); font-weight: 700; font-size: 13px; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .45); }
.in-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--red); box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 25%, transparent); animation: in-bob 1.8s ease-in-out infinite; }
@keyframes in-bob { 50% { transform: rotate(-45deg) translate(3px, -3px); } }
.faq-item { border-radius: 16px !important; border: 1.5px solid var(--card-b) !important; background: var(--card) !important; overflow: hidden; cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.faq-item.open { border-color: color-mix(in srgb, var(--red) 30%, var(--card-b)) !important; box-shadow: 0 14px 26px -22px rgba(0, 0, 0, .4); }
.faq-item.in-acc > :not(:first-child) { display: none; } .faq-item.in-acc.open > :not(:first-child) { display: block; }
.faq-item.in-acc > :first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.faq-item.in-acc > :first-child::after { content: "+"; width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font-weight: 800; transition: transform .25s; }
.faq-item.in-acc.open > :first-child::after { transform: rotate(45deg); }
.hours-card .in-now { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.hours-card .in-now.on { color: #15803d; background: #dcfce7; } .hours-card .in-now.off { color: #b91c1c; background: #fee2e2; }
.hours-card .in-now i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.in-chat { width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: 12px; color: #fff; background: var(--red); font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 10px 18px -12px var(--red); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 700; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--red) 10%, transparent); color: var(--red); font-weight: 800; transition: transform .25s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: color-mix(in srgb, var(--red) 30%, var(--card-b)) !important; box-shadow: 0 14px 26px -22px rgba(0, 0, 0, .4); }
.faq-item > p { padding: 0 16px 14px; margin: 0; }
.in-hero { position: relative; overflow: hidden; margin: 6px 0 18px; padding: clamp(22px, 4vw, 36px); border-radius: 28px; color: #fff;
  background: radial-gradient(80% 120% at 100% 0%, rgba(255, 196, 0, .28), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--red) 90%, #ff8a3d), color-mix(in srgb, var(--red) 78%, #000)); box-shadow: 0 30px 50px -34px var(--red); }
.in-hero h1 { margin: 0 0 6px; color: #fff; font-size: clamp(24px, 4vw, 34px); position: relative; z-index: 1; }
.in-hero p { margin: 0 0 6px; max-width: 600px; opacity: .92; position: relative; z-index: 1; line-height: 1.6; }
@media (max-width: 760px) {
  .in-route { max-width: 220px; margin: 4px 0 -6px auto; }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .contact-card { padding: 14px !important; } .contact-card .ic { width: 42px !important; height: 42px !important; border-radius: 13px !important; } .contact-card .ic svg { width: 20px; height: 20px; }
  .contact-card .s { font-size: 12.5px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}