/* ============================================================
   Gent of Search — global stylesheet
   Brand: navy #2B3052 · green #0F7350 · gold #FFC857
   Type:  Inter Tight (display) · IBM Plex Sans (body) · JetBrains Mono (labels)
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }

/* Page wrapper (was an inline-styled div in the design) */
.site {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: #2B3052;
  background: #FFFFFF;
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* ---------- Keyframes ---------- */
@keyframes gosMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Nav ---------- */
.nav-link {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 9px;
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.nav-link:hover {
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 #0F7350;
}
.nav-link.active {
  color: #FFFFFF;
  background: rgba(255,255,255,0.08);
  box-shadow: inset 0 -2px 0 #0F7350;
}
.nav-link.active:hover { background: rgba(255,255,255,0.14); }

/* ---------- Logo marquee ---------- */
.marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  gap: 62px;
  align-items: center;
  width: max-content;
  animation: gosMarquee 66s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- FAQ accordion ---------- */
.faq-item { border-bottom: 1px solid rgba(43,48,82,0.12); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; background: none; border: none; color: #2B3052;
  font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 18px;
  letter-spacing: -0.01em; text-align: left; padding: 22px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-chev {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  transition: transform 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  border: 1px solid rgba(43,48,82,0.14); background: transparent; color: #2B3052;
}
.faq-item.open .faq-chev { transform: rotate(45deg); border-color: #0F7350; background: #0F7350; color: #FFFFFF; }
.faq-a { overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; max-height: 0; opacity: 0; }
.faq-item.open .faq-a { max-height: 400px; opacity: 1; }

/* ---------- Blog listing / more-posts hover ---------- */
.post-link, .more-link { transition: color 0.16s ease; }
.post-link:hover, .post-link:hover h2, .more-link:hover, .more-link:hover span { color: #0F7350; }
.crumb-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Branded thumbnail placeholder ---------- */
.thumb-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    radial-gradient(120px 120px at 70% 20%, rgba(255,200,87,0.18), transparent 70%),
    linear-gradient(135deg, #E8F5F0, #F3F3F3);
}
.thumb-ph .mark {
  width: 44px; height: 44px; border-radius: 50%; background: #0F7350;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px -6px rgba(26,147,111,0.6);
  font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 24px; color: #FFFFFF;
}

/* ---------- Long-form article body (blog post) ---------- */
.article a { color:#0F7350; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.article a:hover { text-decoration-thickness:2px; }
.article p { margin:0 0 22px; }
.article h2 { font-family:'Inter Tight',sans-serif; font-weight:700; font-size:29px; line-height:1.2; letter-spacing:-0.015em; color:#2B3052; margin:46px 0 16px; }
.article ul, .article ol { margin:0 0 22px; padding-left:24px; }
.article li { margin:0 0 12px; padding-left:4px; }
.article strong { font-weight:600; color:#2B3052; }

/* ---------- Legal document body (privacy / cookie) ---------- */
.doc a { color:#0F7350; text-decoration:underline; text-underline-offset:2px; }
.doc p { margin:0 0 20px; }
.doc h2 { font-family:'Inter Tight',sans-serif; font-weight:700; font-size:24px; line-height:1.25; letter-spacing:-0.015em; color:#2B3052; margin:44px 0 14px; }
.doc h3 { font-family:'Inter Tight',sans-serif; font-weight:600; font-size:18px; line-height:1.3; color:#2B3052; margin:28px 0 10px; }
.doc ul { margin:0 0 20px; padding-left:22px; }
.doc li { margin:0 0 10px; }
.doc strong { font-weight:600; color:#2B3052; }
.doc table { width:100%; border-collapse:collapse; margin:4px 0 24px; font-size:14px; }
.doc th, .doc td { text-align:left; padding:10px 13px; border:1px solid #E7E9F0; vertical-align:top; line-height:1.5; }
.doc th { background:#F3F3F3; font-family:'Inter Tight',sans-serif; font-weight:600; color:#2B3052; }
.doc td { color:#5A607F; }
.doc td code { font-family:'JetBrains Mono',monospace; font-size:13px; color:#2B3052; }
.doc .table-wrap { overflow-x: auto; }

/* ---------- Mobile nav / burger ---------- */
.nav-burger {
  display: none; /* shown < 1024px via media query */
  width: 42px; height: 42px; padding: 0; border: none; background: transparent;
  cursor: pointer; border-radius: 9px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.18s ease;
}
.nav-burger:hover { background: rgba(255,255,255,0.10); }
.nav-burger-bar {
  display: block; width: 22px; height: 2px; background: #FFFFFF; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu {
  display: none; /* toggled to flex when .open (within media query) */
  flex-direction: column;
  padding: 6px 24px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: #2B3052;
}
.nav-mobile-link {
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-family: 'Inter Tight', sans-serif; font-size: 18px; font-weight: 500;
  padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-link:hover, .nav-mobile-link.active { color: #FFFFFF; }
.nav-mobile-link.active { box-shadow: inset 3px 0 0 #0F7350; padding-left: 12px; }

@media (max-width: 1024px) {
  /* !important overrides the elements' inline display:flex styles */
  .nav-brandtext { display: none !important; }
  .nav-links { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-mobile-menu.open { display: flex; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .testimonial-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .pricing-grid { grid-template-columns: 1fr !important; }
  .blog-row { flex-direction: column-reverse !important; }
  .blog-row .blog-thumb { width: 100% !important; height: 180px !important; }
}