/* ============================================================
   IP Consulting site stylesheet
   Design tokens from the IP Consulting Design System.
   Shell components (ribbon, nav, footer, buttons, tooltips) are
   fully classed and responsive. Page bodies ported from the
   mockups keep their inline styles for now; the responsive shim
   at the bottom makes them degrade acceptably on small screens.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --blue: #0E0E89;          /* Galactic Blue */
  --lime: #9ACD32;          /* Lucky Lime */
  --black: #1E1E1E;         /* Dynamic Black */
  --silver: #D7D7D7;        /* Light Silver */
  --blue-soft: #E6E6F5;
  --bg-soft: #F5F6FA;
  --border: #ECECEC;
  --text-muted: #7a7a7a;
  --footer-link: #CFCFCF;
  --footer-muted: #A9A9A9;
  --font-ui: 'Montserrat', system-ui, sans-serif;
  --font-accent: 'Quicksand', var(--font-ui);
  --shadow-drop: 0 24px 60px rgba(14, 14, 137, .16);
  --radius-card: 14px;
  --wrap: 1280px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--black);
  background: #fff;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; }
a { color: var(--blue); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
[id] { scroll-margin-top: 90px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14.5px;
  text-decoration: none;
  border-radius: 999px;
  padding: 12px 26px;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  cursor: pointer;
  border: 0;
}
.btn-primary { background: var(--lime); color: var(--blue); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(154, 205, 50, .4); }
.btn-outline { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.btn-outline:hover { background: var(--blue-soft); }
.btn-dark { background: var(--blue); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(14, 14, 137, .35); }

/* ---------- CTA hover tooltip (replaces mockup style-hover pattern) ---------- */
.cta-wrap { position: relative; display: inline-block; }
.tip {
  position: absolute;
  width: 270px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-drop);
  padding: 14px 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
  z-index: 300;
  text-align: left;
  pointer-events: none;
}
.cta-wrap:hover .tip, .cta-wrap:focus-within .tip { opacity: 1; visibility: visible; }
.tip-below { top: calc(100% + 12px); right: 0; }
.tip-above { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
.tip-badge {
  display: inline-block;
  background: var(--lime);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}
.tip-title { display: block; font-size: 13.5px; font-weight: 800; color: var(--blue); margin-top: 8px; }
.tip-body { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* Hydrated design-runtime tooltips: wrapper carried onMouseEnter in the
   mockups; statically the tooltip shows on CSS hover instead. */
.cta-wrap-js { position: relative; }
.cta-wrap-js .dc-tip { opacity: 0; visibility: hidden; transition: opacity .15s ease; pointer-events: none; }
.cta-wrap-js:hover .dc-tip, .cta-wrap-js:focus-within .dc-tip { opacity: 1; visibility: visible; }

/* ---------- Announcement ribbon ---------- */
.ribbon { background: var(--blue); padding: 9px 40px; text-align: center; }
.ribbon-inner {
  display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap;
  justify-content: center; font-size: 13px; font-weight: 600;
}
.ribbon-badge {
  background: var(--lime); color: var(--blue); font-size: 10px; font-weight: 800;
  letter-spacing: .08em; padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
}
.ribbon-text { color: var(--blue-soft); }
.ribbon-link { color: var(--lime); font-weight: 800; text-decoration: none; white-space: nowrap; }

/* ---------- Nav ---------- */
.nav-shell {
  position: sticky; top: 0; z-index: 100;
  background: #fff; border-bottom: 1px solid var(--border);
}
.nav-bar {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 18px 40px;
}
.nav-logo {
  display: flex; align-items: center; gap: 11px; flex: none; text-decoration: none;
}
.nav-logo span {
  font-weight: 800; font-size: 21px; color: var(--blue);
  letter-spacing: -.01em; white-space: nowrap;
}
.nav-menu { display: flex; align-items: center; gap: 26px; }
.nav-item { position: relative; }
.nav-item > a {
  display: flex; align-items: center; gap: 5px;
  color: var(--black); font-weight: 600; font-size: 14.5px;
  text-decoration: none; white-space: nowrap; padding: 8px 0;
}
.nav-item.is-active > a { color: var(--blue); }
.nav-drop {
  position: absolute; top: 100%; left: 0; padding-top: 14px; z-index: 200;
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { opacity: 1; visibility: visible; }
.nav-drop-card {
  width: 320px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-drop); padding: 10px;
}
.nav-drop-card a {
  display: block; padding: 10px 12px; border-radius: 9px;
  text-decoration: none; transition: background .12s;
}
.nav-drop-card a:hover, .nav-drop-card a:focus { background: var(--bg-soft); }
.nav-drop-title { font-size: 13.5px; font-weight: 800; color: var(--blue); }
.nav-drop-blurb { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.nav-side { display: flex; align-items: center; gap: 18px; flex: none; }
.nav-phone { color: var(--blue); font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.nav-portal { color: var(--black); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; }
.nav-portal:hover { color: var(--blue); }
.nav-cta { padding: 10px 22px; }
.nav-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-burger span { display: block; width: 22px; height: 2.5px; background: var(--blue); margin: 4.5px 0; border-radius: 2px; transition: transform .15s; }

/* ---------- Footer ---------- */
.footer { background: var(--black); padding: 54px 0 40px; color: var(--footer-muted); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1.1fr 1fr 1fr 1fr;
  gap: 26px;
}
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-logo span { font-weight: 800; font-size: 19px; color: #fff; }
.footer-brand p { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; max-width: 280px; }
.footer-offices { margin-top: 20px; font-size: 13px; line-height: 1.55; }
.footer-office-name { color: #fff; font-weight: 700; margin: 14px 0 2px; }
.footer-offices .footer-office-name:first-child { margin-top: 0; }
.footer-phone { display: inline-block; margin-top: 18px; font-size: 14px; color: #fff; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.footer-heading { font-size: 13px; font-weight: 800; color: var(--lime); letter-spacing: .04em; margin-bottom: 14px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.footer-col a { color: var(--footer-link); text-decoration: none; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid #333; font-size: 12.5px;
}
.footer-legal a { color: var(--footer-muted); margin-left: 18px; text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--black); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 14px; font-family: var(--font-ui); font-size: 14px;
  border: 1.5px solid var(--silver); border-radius: 9px; background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--blue);
}
.form-error { color: #B00020; font-size: 12.5px; margin-top: 4px; }
.form-success {
  background: var(--bg-soft); border: 1.5px solid var(--lime); border-radius: var(--radius-card);
  padding: 22px; font-size: 14.5px;
}
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Blog / article ---------- */
.article-body { font-size: 16px; line-height: 1.75; }
.article-body h2 { font-size: 26px; font-weight: 800; color: var(--blue); margin: 38px 0 12px; }
.article-body h3 { font-size: 20px; font-weight: 800; margin: 30px 0 10px; }
.article-body p { margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 26px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  margin: 24px 0; padding: 16px 22px; border-left: 4px solid var(--lime);
  background: var(--bg-soft); border-radius: 0 10px 10px 0;
}
.article-body img { border-radius: 12px; }
.article-body table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 14.5px; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.article-body th { background: var(--bg-soft); font-weight: 700; }
.chip {
  display: inline-block; background: var(--blue-soft); color: var(--blue);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 20px;
}
.read-card {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 18px; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease;
}
.read-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-drop); }

/* ---------- Pagination ---------- */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 44px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; padding: 8px 12px; text-align: center; border-radius: 9px;
  text-decoration: none; font-weight: 700; font-size: 14px; border: 1.5px solid var(--border); color: var(--black);
}
.pagination .current { background: var(--blue); color: #fff; border-color: var(--blue); }
.pagination a:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- 404 ---------- */
.page-404 { padding: 90px 0 120px; }
.page-404 h1 { color: var(--blue); font-size: 34px; font-weight: 900; }

/* ============================================================
   Interactive behaviors (paired with site.js)
   ============================================================ */

/* Hero and section CTA buttons should not wrap a single word to a second line
   on desktop (e.g. "Explore Navigate IT"). On narrow screens, long button
   labels MUST be allowed to wrap so they do not overflow the viewport, so this
   only applies from tablet width up. */
@media (min-width: 821px) {
  main a[style*="display:inline-block"][style*="border-radius:9px"],
  main a[style*="display: inline-block"][style*="border-radius:9px"] { white-space: nowrap; }
}
/* On mobile, force button-like CTAs to wrap and stay within the screen. */
@media (max-width: 820px) {
  main a[style*="display:inline-block"][style*="border-radius:9px"],
  main a[style*="display: inline-block"][style*="border-radius:9px"] {
    white-space: normal !important;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

/* --- FAQ / question accordion --- */
.faq-item .faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  transition: max-height .28s ease, opacity .2s ease, margin-top .2s ease;
}
.faq-item[aria-expanded="true"] .faq-answer {
  max-height: 600px;
  opacity: 1;
}
.faq-chevron {
  float: right;
  margin-left: 12px;
  color: var(--lime);
  font-size: 20px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .2s ease;
}
.faq-item[aria-expanded="true"] .faq-chevron { transform: rotate(-90deg); }
.faq-item:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* --- Testimonial slider controls --- */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--blue); color: #fff; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(14,14,137,.28); transition: background .15s, transform .15s;
}
.slider-arrow:hover { background: #1a1ab0; }
.slider-prev { left: -8px; }
.slider-next { right: -8px; }
.slider-dots { display: flex; gap: 9px; justify-content: center; margin-top: 24px; }
.slider-dot {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: #C4CBE0; transition: background .15s, transform .15s;
}
.slider-dot[aria-current="true"] { background: var(--lime); transform: scale(1.25); }

/* --- Search input injected into toolbars --- */
.list-search {
  width: 100%; max-width: 440px; padding: 12px 16px; font-family: var(--font-ui);
  font-size: 15px; border: 1.5px solid var(--silver); border-radius: 999px; background: #fff;
}
.list-search:focus { outline: none; border-color: var(--blue); }

/* --- Phone links auto-created from plain-text numbers by site.js: inherit the
   surrounding text color so they are legible on any background (never
   blue-on-blue). The header/footer number links keep their own explicit
   styling and are intentionally not matched here. */
.tel-link { color: inherit; text-decoration: none; }
.tel-link:hover, .tel-link:focus { text-decoration: underline; }

/* --- Trusted-by logo strip: Safari flex + percentage max-height fix ---
   Safari ignores `max-height:100%` on an <img> inside a fixed-height flex
   cell and renders the logo at intrinsic size; the mockup's per-logo
   transform:scale() then amplifies the overflow. An absolute px cap is
   honored everywhere, and neutralizing the scale keeps the row tidy. The
   opacity:0.95 signature is unique to these logos. */
main img[style*="opacity:0.95"] {
  max-height: 52px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

/* --- Video lightbox --- */
.video-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,10,40,.82); display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.video-modal.is-open { display: flex; }
.video-modal-inner { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; }
.video-modal-inner iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; background: #000; }
.video-modal-close {
  position: absolute; top: -44px; right: 0; width: 38px; height: 38px;
  background: #fff; color: var(--blue); border: 0; border-radius: 50%;
  font-size: 24px; line-height: 1; cursor: pointer;
}
@media (max-width: 820px) {
  .slider-prev { left: 2px; }
  .slider-next { right: 2px; }
  .slider-arrow { width: 38px; height: 38px; font-size: 20px; }
}

/* ============================================================
   Responsive shim
   The ported page bodies still carry mockup inline styles that
   assume a desktop canvas. These rules make the shell responsive
   and force common body patterns (grids, large paddings, fixed
   min-widths) to collapse sanely on small screens. A full
   inline-to-class flattening pass can replace this over time.
   ============================================================ */
main [style*="min-width:1160px"], main [style*="min-width: 1160px"] { min-width: 0 !important; }

@media (max-width: 1080px) {
  .nav-menu { gap: 18px; }
  .nav-phone, .nav-portal { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 820px) {
  .wrap, .nav-bar { padding-left: 20px; padding-right: 20px; }
  .ribbon { padding: 8px 14px; }
  .nav-burger { display: block; }
  .nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
  }
  .nav-menu.is-open { display: flex; }
  .nav-item > a { padding: 12px 4px; font-size: 16px; }
  .nav-drop { position: static; opacity: 1; visibility: visible; padding: 0 0 6px; display: none; }
  .nav-item.is-open .nav-drop { display: block; }
  .nav-drop-card { width: 100%; border: 0; box-shadow: none; padding: 0 0 0 12px; }
  .nav-side .nav-cta { padding: 9px 16px; font-size: 13px; }
  .cta-wrap .tip { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Collapse mockup multi-column grids in ported bodies */
  main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  main [style*="display:flex"]:not([style*="flex-direction:column"]),
  main [style*="display: flex"]:not([style*="flex-direction:column"]) { flex-wrap: wrap !important; }
  /* Soften desktop-scale padding */
  main [style*="padding:9"], main [style*="padding:8"], main [style*="padding:7"] { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .nav-logo span { font-size: 18px; }
}