/* ===========================================================
   Binding Minds — Global stylesheet
   Fonts, design tokens, keyframe animations & helper classes.
   (Tailwind utilities are configured inline in js/app.js)
   =========================================================== */

/* --- Fonts ---------------------------------------------------
   Headings use Poppins (replaced Syne 2026-06-26 — Syne clipped the
   descender on 'g'); body uses Montserrat; Raleway for footer accents.
   The legacy .font-syne helper class is kept but now maps to Poppins. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Raleway:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --teal:#1E90B3;
  --teal-600:#1a7fa0;
  --teal-700:#156a86;
  --ink:#0b0b0b;
  --slate:#585352;
  --muted:#7d7d7d;
  --navy:#203955;
  --line:#ebebeb;
  --line-strong:#c0c0c0;
  --bg-soft:#fbfbfb;
  --bg-soft2:#f8f8f8;
  --sky:#b5eeff;
  --sky-soft:#def5fb;
  --cream:#f5efe1;
  --gold:#9c7f3b;
  --mint:#e3ede5;
  --green:#396c43;
  --shadow-card:0 4px 44px 0 rgba(195,195,195,0.25);
  --shadow-soft:0 10px 40px -12px rgba(20,40,60,0.18);
  --header-h:80px;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

h1,h2,h3,h4,.font-syne{ font-family:'Poppins',system-ui,sans-serif; }
.font-mont{ font-family:'Montserrat',system-ui,sans-serif; }
.font-rale{ font-family:'Raleway',system-ui,sans-serif; }

/* --- Responsive visibility fallbacks ---------------------------------
   The header, drawer & bottom-nav are injected by JS after Tailwind's
   CDN scans the page, so its lg:* utilities can fail to generate.
   These hard rules guarantee mobile/desktop chrome swap correctly. */
.hidden{ display:none !important; }
@media (min-width:1024px){
  .lg\:hidden{ display:none !important; }
  .lg\:flex{ display:flex !important; }
  .lg\:grid{ display:grid !important; }
  .lg\:block{ display:block !important; }
}
@media (max-width:1023px){
  .lg\:flex,.lg\:grid,.lg\:block{ display:none !important; }
}

/* --- Scrollbar utilities (mobile swipe rows) --- */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.snap-x{ scroll-snap-type:x mandatory; }
.snap-start{ scroll-snap-align:start; }

/* --- Brand thin scrollbar for desktop --- */
::-webkit-scrollbar{ width:10px;height:10px; }
::-webkit-scrollbar-thumb{ background:#c9d2da;border-radius:20px;border:2px solid #fff; }
::-webkit-scrollbar-thumb:hover{ background:#a9b6c1; }

/* ===========================================================
   Keyframe animations
   =========================================================== */
@keyframes fadeUp{ from{opacity:0;transform:translateY(34px);} to{opacity:1;transform:none;} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn{ from{opacity:0;transform:scale(.92);} to{opacity:1;transform:none;} }
@keyframes slideRight{ from{opacity:0;transform:translateX(-40px);} to{opacity:1;transform:none;} }
@keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
@keyframes bobDown{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }
@keyframes spinSlow{ to{transform:rotate(360deg);} }
@keyframes shimmer{ 100%{ background-position:200% 0; } }
@keyframes toastIn{ from{opacity:0;transform:translateY(20px) scale(.96);} to{opacity:1;transform:none;} }
@keyframes sheetUp{ from{transform:translateY(100%);} to{transform:translateY(0);} }
@keyframes pop{ 0%{transform:scale(.85);opacity:0;} 60%{transform:scale(1.04);} 100%{transform:scale(1);opacity:1;} }
@keyframes drawPath{ to{ stroke-dashoffset:0; } }
@keyframes marqueeX{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* --- Reveal-on-scroll --- */
.reveal{ opacity:0; }
.reveal.in{ animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal-l.in{ animation:slideRight .7s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal-s.in{ animation:scaleIn .6s cubic-bezier(.2,.7,.2,1) forwards; }
[data-delay="1"]{ animation-delay:.08s; }
[data-delay="2"]{ animation-delay:.16s; }
[data-delay="3"]{ animation-delay:.24s; }
[data-delay="4"]{ animation-delay:.32s; }
[data-delay="5"]{ animation-delay:.40s; }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-l,.reveal-s{ opacity:1!important; animation:none!important; }
}

.float{ animation:floatY 6s ease-in-out infinite; }
.bob{ animation:bobDown 2.2s ease-in-out infinite; }
.spin-slow{ animation:spinSlow 26s linear infinite; }

/* --- Buttons --- */
.btn-teal{
  background:var(--teal); color:#fff; border-radius:60px;
  font-weight:700; font-size:15px; transition:.28s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 8px 20px -8px rgba(30,144,179,.6);
}
.btn-teal:hover{ background:var(--teal-600); transform:translateY(-2px); box-shadow:0 14px 26px -8px rgba(30,144,179,.7); }
.btn-teal:active{ transform:translateY(0); }
.btn-ghost{
  background:#fff;color:var(--ink);border-radius:60px;border:1px solid var(--line);
  font-weight:600;transition:.25s;
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }

/* arrow nudge on hover */
.nudge .ico-arrow{ transition:transform .3s; }
.group:hover .nudge .ico-arrow,.nudge:hover .ico-arrow{ transform:translateX(5px); }

/* --- Link underline reveal --- */
.nav-link{ position:relative; }
.nav-link::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--teal);
  transition:width .3s cubic-bezier(.2,.7,.2,1);
}
.nav-link:hover::after,.nav-link.active::after{ width:100%; }
.nav-link.active{ color:var(--teal); }

/* --- Card hover lift --- */
.lift{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.lift:hover{ transform:translateY(-8px); box-shadow:0 22px 48px -20px rgba(20,40,60,.32); }

/* --- Header states --- */
#site-header{ transition:transform .4s cubic-bezier(.2,.7,.2,1), padding .3s; will-change:transform; }
#site-header.hide{ transform:translateY(-130%); }
.header-pill{ transition:box-shadow .3s, background .3s; }
#site-header.solid .header-pill{ box-shadow:0 12px 30px -16px rgba(20,40,60,.28); }

/* --- Mega/dropdown menu --- */
.dd-panel{
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s;
}
.dd:hover .dd-panel, .dd-panel:hover{ opacity:1; visibility:visible; transform:translateY(0); }
.dd-caret{ transition:transform .25s; }
.dd:hover .dd-caret{ transform:rotate(180deg); }

/* --- Marquee --- */
.marquee{ display:flex; width:max-content; animation:marqueeX 38s linear infinite; }
.marquee:hover{ animation-play-state:paused; }

/* --- Skeleton --- */
.skeleton{
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%);
  background-size:200% 100%; animation:shimmer 1.3s infinite;
}

/* --- Toasts --- */
#toast-wrap{ position:fixed; z-index:9999; bottom:22px; right:22px; display:flex; flex-direction:column; gap:12px; pointer-events:none; }
.toast{
  pointer-events:auto; min-width:280px; max-width:360px; background:#fff; border-radius:16px;
  box-shadow:0 18px 50px -16px rgba(20,40,60,.4); padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
  animation:toastIn .4s cubic-bezier(.2,.7,.2,1); border:1px solid var(--line);
}
.toast .bar{ position:absolute; left:0; bottom:0; height:3px; background:var(--teal); border-radius:0 0 0 16px; }
@media (max-width:640px){
  #toast-wrap{ left:14px; right:14px; bottom:calc(76px + env(safe-area-inset-bottom)); }
  .toast{ max-width:none; width:100%; }
}

/* --- Modal --- */
#modal-root .overlay{ position:fixed; inset:0; z-index:9998; background:rgba(12,22,34,.55); backdrop-filter:blur(4px); animation:fadeIn .25s; display:flex; align-items:center; justify-content:center; padding:20px; }
#modal-root .modal-card{ background:#fff; border-radius:26px; max-width:440px; width:100%; padding:32px; animation:pop .4s cubic-bezier(.2,.7,.2,1); box-shadow:0 30px 70px -20px rgba(20,40,60,.5); text-align:center; }

/* --- Bottom sheet --- */
#sheet-root .overlay{ position:fixed; inset:0; z-index:9997; background:rgba(12,22,34,.5); backdrop-filter:blur(3px); animation:fadeIn .25s; }
#sheet-root .sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:9998; background:#fff;
  border-radius:26px 26px 0 0; padding:10px 20px calc(24px + env(safe-area-inset-bottom));
  animation:sheetUp .42s cubic-bezier(.2,.8,.2,1); max-height:86vh; overflow:auto;
  box-shadow:0 -20px 60px -20px rgba(20,40,60,.4);
}
#sheet-root .grab{ width:44px; height:5px; border-radius:10px; background:#dfe5ea; margin:6px auto 14px; }

/* --- Mobile drawer --- */
#drawer{ transition:transform .42s cubic-bezier(.2,.8,.2,1); transform:translateX(100%); }
#drawer.open{ transform:translateX(0); }
#drawer-scrim{ transition:opacity .35s; }

/* --- Mobile bottom nav --- */
.bottom-nav-item.active{ color:var(--teal); }
.bottom-nav-item.active .bn-ico{ transform:translateY(-2px); }
.bn-ico{ transition:transform .25s; }

/* --- Form fields --- */
.field{
  width:100%; border:1px solid #e3e3e3; border-radius:12px; padding:13px 15px; font-size:15px;
  transition:border-color .2s, box-shadow .2s; background:#fff; color:var(--ink);
}
.field::placeholder{ color:#b3b3b3; }
.field:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(30,144,179,.12); }
.field.err{ border-color:#e5484d; box-shadow:0 0 0 4px rgba(229,72,77,.12); }
.field-label{ font-size:14px; font-weight:600; color:#2a2a2a; margin-bottom:7px; display:block; }
.err-msg{ color:#e5484d; font-size:12.5px; margin-top:5px; min-height:0; }

/* dropzone */
.dropzone{ border:1.6px dashed #cfd6dc; border-radius:14px; transition:.25s; }
.dropzone.drag{ border-color:var(--teal); background:rgba(30,144,179,.05); }

/* utility: hide on print scroll lines */
.divider{ height:1px; background:rgba(135,135,135,.5); }

/* number counters */
.counter{ font-variant-numeric:tabular-nums; }

/* chip active (industry pages) */
.chip{ transition:.25s; }
.chip.active,.chip:hover{ background:var(--sky-soft); border-color:var(--sky); }

/* corner brackets for feature cards */
.bracket::before,.bracket::after{
  content:"";position:absolute;width:18px;height:18px;border-color:rgba(30,144,179,.4);
  border-style:solid;opacity:0;transition:.3s;
}
.bracket::before{ top:0;left:0;border-width:2px 0 0 2px; }
.bracket::after{ bottom:0;right:0;border-width:0 2px 2px 0; }
.bracket:hover::before,.bracket:hover::after{ opacity:1; }
.bracket:hover::before{ top:-6px;left:-6px; }
.bracket:hover::after{ bottom:-6px;right:-6px; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (min-width:1024px){
  #site-footer > div{ padding-bottom:0!important; }
}
@media (max-width:1023px){
  :root{ --header-h:64px; }
  body{ padding-bottom:0; }
  #site-footer > div{ padding-bottom:88px!important; }

  .bm-about__grid,.why-grid,.vm-grid,.cf-grid,.bm-values__grid,.bm-intro__grid{ grid-template-columns:1fr!important; gap:32px!important; }
  .bm-about__grid .reveal-l,.why-grid .reveal-s,.vm-grid .reveal-s{ order:-1; }
  .bm-why__media,.bm-vm__media--left{ order:-1; }

  .stats-grid{ grid-template-columns:1fr 1fr!important; }
  .footer-grid{ grid-template-columns:1fr 1fr!important; gap:34px!important; }
  .cc-grid{ grid-template-columns:1fr!important; }
  .feat-grid{ grid-template-columns:1fr 1fr!important; }
  .svc-grid{ grid-template-columns:1fr 1fr!important; }
  .adv-grid{ grid-template-columns:1fr 1fr!important; }
  .job-grid{ grid-template-columns:1fr 1fr!important; }
}
@media (max-width:767px){
  .footer-grid{ grid-template-columns:1fr!important; }
  .stats-grid{ grid-template-columns:1fr!important; }
  .ff-grid{ grid-template-columns:1fr!important; }
  .feat-grid{ grid-template-columns:1fr!important; }

  /* horizontal swipe rows (native-app feel) */
  .svc-grid,.adv-grid,.job-grid{
    display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important;
    scroll-snap-type:x mandatory; gap:16px!important; padding:4px 2px 14px!important;
    -ms-overflow-style:none; scrollbar-width:none; margin:0 -4px;
  }
  .svc-grid::-webkit-scrollbar,.adv-grid::-webkit-scrollbar,.job-grid::-webkit-scrollbar{ display:none; }
  .svc-grid > *,.adv-grid > *{ flex:0 0 82%!important; scroll-snap-align:start; }
  .job-grid > *{ flex:0 0 86%!important; scroll-snap-align:start; }
  .awards-row,.tst-row{ flex-wrap:nowrap!important; justify-content:flex-start!important; scroll-snap-type:x mandatory; overflow-x: auto !important; }
  .awards-row > *{ flex:0 0 64%!important; scroll-snap-align:start; }
  .tst-row > *{ flex:0 0 84%!important; width:auto!important; scroll-snap-align:start; }
}
@media (max-width:480px){
  .svc-grid > *{ flex:0 0 88%!important; }
  .adv-grid > *{ flex:0 0 78%!important; }
}

/* swipe hint cursor on desktop carousels */
@media (min-width:768px){
  .awards-row,.tst-row{ flex-wrap:wrap; }
}