/* ==========================================================================
   Indi IT shared header: logo, menu, "Get In Touch", the Services / Industries
   dropdowns (desktop) and the off-canvas menu (below 1024px).
   Markup and behaviour: header.js (it loads this file). Figma: "Website Landing
   page (Copy)", header 2169:11751, dropdowns 2160:11549 / 2160:11215.

   Everything is prefixed ih- so it sits next to any page CSS (Tailwind, the old
   per-site styles) without clashing. A page can override, on .ih:
     --ih-stuck-bg   the bar's background once the page has scrolled
   ========================================================================== */

/* ---------- fonts (latin subsets, self-hosted; own family names, so a page's own DM Sans can never change the header) ---------- */
@font-face { font-family: "IH DM Sans"; src: url(fonts/dm-sans-latin.woff2) format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "IH DM Sans"; src: url(fonts/dm-sans-italic-latin.woff2) format("woff2"); font-weight: 100 1000; font-style: italic; font-display: swap; }
@font-face { font-family: "IH Inter"; src: url(fonts/inter-latin.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IH Funnel Sans"; src: url(fonts/funnel-sans-600-latin.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
.ih, .ih-drawer {
  --ih-dm: "IH DM Sans", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ih-inter: "IH Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ih-funnel: "IH Funnel Sans", "Funnel Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ih-blue: #006aff;
  --ih-ink: #111827;          /* dropdown link text */
  --ih-line: #e5e7eb;         /* dropdown + card borders */
  --ih-gutter: 20px;          /* side space below 1024px */
  font-family: var(--ih-dm);
  font-variation-settings: "opsz" 14; /* DM Sans optical size used throughout the Figma file */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}

/* resets, wrapped in :where() = zero specificity, so every rule below wins over them */
:where(.ih, .ih-drawer) *, :where(.ih, .ih-drawer) *::before, :where(.ih, .ih-drawer) *::after { box-sizing: border-box; }
:where(.ih, .ih-drawer) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.ih, .ih-drawer) :where(p, figure, blockquote) { margin: 0; }
:where(.ih, .ih-drawer) a { color: inherit; text-decoration: none; }
:where(.ih, .ih-drawer) button {
  font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer;
  text-align: inherit; text-transform: none; letter-spacing: inherit; -webkit-appearance: none; appearance: none;
}
:where(.ih, .ih-drawer) img { display: block; max-width: none; }

/* ==========================================================================
   1. Bar: fixed from the start, transparent over the hero, a solid strip once
      the page scrolls (header.js adds .is-stuck). Fixed = out of flow, so each
      hero keeps its own height.
   ========================================================================== */
.ih {
  --ih-stuck-bg: rgba(10, 15, 34, .88);
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  color: #fff;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.ih.is-stuck {
  background: var(--ih-stuck-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .28);
}
.ih-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: calc(100% - 2 * var(--ih-gutter)); max-width: 1280px; margin: 0 auto; padding: 16px 0;
  transition: padding .3s ease;
}
.ih.is-stuck .ih-bar { padding: 10px 0; }

.ih-logo { flex: none; display: block; border-radius: 4px; }
.ih-logo img { width: auto; height: 40px; }   /* 274x70 file shown at 156.57x40, as in Figma */

/* top-level links */
.ih-nav { display: none; }
.ih-menu { display: flex; align-items: center; gap: 32px; }
.ih-menu__link {
  display: block; padding: 10px 0;
  font-family: var(--ih-dm); font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: normal; white-space: nowrap;
  color: #fff; opacity: .7; transition: opacity .2s ease;
}
.ih-menu__link:hover, .ih-menu__link[aria-expanded="true"], .ih-menu__link.is-current { opacity: 1; }
.ih-menu__link:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
/* dropdown marker on Services / Industries (the drawer has its own, sized in section 3) */
button.ih-menu__link { display: inline-flex; align-items: center; gap: 6px; }
button.ih-menu__link svg { flex: none; width: 10px; height: 7px; transition: transform .25s ease; }
button.ih-menu__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Get In Touch (also the full-width button in the off-canvas menu) */
.ih-cta {
  display: none; flex: none; align-items: center; justify-content: center; width: 146px; height: 40px;
  border: 1px solid #fff; background: transparent; color: #fff;
  font-family: var(--ih-funnel); font-size: 14px; font-weight: 600; line-height: 14px; letter-spacing: normal; white-space: nowrap;
  font-variation-settings: normal;
  transition: background-color .25s ease, color .25s ease;
}
.ih-cta:hover { background: #fff; color: #121e3d; }
.ih-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* hamburger (below 1024px) */
.ih-burger { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: -8px; color: #fff; border-radius: 8px; }
.ih-burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
.ih-burger:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.ih-bar__end { display: flex; align-items: center; gap: 12px; }

@media (min-width: 600px) {
  .ih-cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .ih, .ih-drawer { --ih-gutter: 32px; }
  .ih-bar { padding-top: 30px; padding-bottom: 0; }   /* Figma: 30px from the top of the hero */
  .ih.is-stuck .ih-bar { padding: 14px 0; }
  .ih-nav { display: block; }
  .ih-burger { display: none; }
}

/* ==========================================================================
   2. Dropdowns (desktop). Drawn at the 1280px Figma size; between 1024 and
      1343px header.js zooms them down (--ih-z) so they always fit the window.
      They stay display:none until first needed (or the page is idle), so their
      fonts and images never compete with the page's first paint.
   ========================================================================== */
.ih-panel { display: none; }
@media (min-width: 1024px) {
  .ih.is-ready .ih-panel {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1;
    display: flex; justify-content: center; padding-top: 12px; pointer-events: none;
    visibility: hidden; opacity: 0; transform: translateY(8px);
    transition: opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .ih.is-ready .ih-panel.is-open {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .2s ease, transform .25s ease, visibility 0s;
  }
  /* The quote carousel marks its active slide visibility:visible (for its crossfade), which punches through the
     closed panel's visibility:hidden; with the box's pointer-events:auto that left an invisible click-trap floating
     over the page (it swallowed clicks on anything that scrolled under it, e.g. the tech-stack tabs). */
  .ih.is-ready .ih-panel:not(.is-open) .ih-panel__box { pointer-events: none; }
}
.ih-panel__box {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 1280px; padding: 29px 30px 29px 29px; zoom: var(--ih-z, 1);
  border: 1px solid var(--ih-line); border-radius: 20px; background: #f7f8fa; color: var(--ih-ink);
  box-shadow: 0 24px 60px rgba(2, 6, 23, .28);
  pointer-events: auto;
}
.ih-panel__box::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 13px; } /* hover bridge over the gap */

/* link cards (dropdowns and off-canvas) */
.ih-cards { display: grid; grid-template-columns: repeat(2, 305px); grid-template-rows: repeat(var(--ih-rows, 5), auto); grid-auto-flow: column; gap: 10px; }
.ih-card {
  display: flex; align-items: center; gap: 16px; height: 58px; padding: 12px;
  border: 1px solid var(--ih-line); border-radius: 10px; background: #fff; color: var(--ih-ink);
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ih-card__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #f0f7ff; }
.ih-card__glyph { position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; }
.ih-card__glyph img { position: absolute; }   /* each icon keeps its own size; header.js sets its offset from the Figma frame */
.ih-card__label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--ih-dm); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -.5px;
}
.ih-cards--industries .ih-card__label { font-size: 16px; }
.ih-card__label.is-small { font-size: 13px; }
.ih-card__arrow { flex: none; width: 22px; height: 22px; transition: transform .2s ease; }
.ih-card:hover, .ih-card:focus-visible { border-color: #bcd6ff; background: #fbfdff; box-shadow: 0 4px 14px rgba(0, 106, 255, .08); }
.ih-card:hover .ih-card__arrow, .ih-card:focus-visible .ih-card__arrow { transform: translate(2px, -2px); }
.ih-card:focus-visible { outline: 2px solid var(--ih-blue); outline-offset: 2px; }
.ih-card[aria-current="page"] { border-color: var(--ih-blue); }
/* items without a page yet: not clickable, no hover */
.ih-card.is-static { cursor: default; }
.ih-card.is-static:hover { border-color: var(--ih-line); background: #fff; box-shadow: none; }
.ih-card.is-static:hover .ih-card__arrow { transform: none; }

/* promo card */
.ih-promo {
  position: relative; isolation: isolate; flex: none; display: flex; flex-direction: column; justify-content: space-between;
  width: 570px; height: 330px; padding: 24px 24px 19.79px; overflow: hidden;
  border-radius: 16px; background: rgba(0, 106, 255, .1); color: #fff;
}
.ih-promo__glow {
  position: absolute; z-index: -1; left: -166px; top: -323px; width: 1165px; height: 1165px;
  object-fit: cover; transform: scaleY(-1); filter: blur(60px); pointer-events: none;
}
.ih-promo__head { display: flex; flex-direction: column; justify-content: space-between; flex: none; min-height: 120px; }
.ih-promo__eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.ih-promo__eyebrow span { flex: none; font-size: 12px; font-weight: 700; line-height: 20px; color: #00f6ff; white-space: nowrap; }
.ih-promo__rule { position: relative; flex: 1; min-width: 0; height: 0; }
.ih-promo__rule img { position: absolute; left: -2.89px; top: -2.887px; }
.ih-promo__title {
  font-family: var(--ih-inter); font-size: 32px; font-weight: 800; line-height: 42px; letter-spacing: -1.8px;
  font-variation-settings: "opsz" 14; /* Inter's text cut, as in Figma (at 32px the browser would pick the narrower display cut) */
}
.ih-promo__text { font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: -.2px; color: rgba(255, 255, 255, .7); }
.ih-promo__foot { display: flex; flex-direction: column; gap: 10px; }

/* testimonials: every slide sits in the same grid cell, so the card is as tall as the longest and never jumps */
.ih-quote {
  display: grid; padding: 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px;
  background: linear-gradient(167.89deg, rgba(255, 255, 255, .1) 9.32%, rgba(255, 255, 255, .2) 90.68%);
}
.ih-quote__slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.ih-quote__slide.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.ih-quote__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ih-quote__who { display: flex; flex-direction: column; line-height: 20px; }
.ih-quote__name { font-size: 16px; font-weight: 700; }
.ih-quote__role { font-size: 11px; font-weight: 400; opacity: .7; }
.ih-quote__stars { flex: none; }
.ih-quote__text { font-size: 16px; font-style: italic; font-weight: 400; line-height: 20px; }
.ih-quote__bars { display: flex; gap: 4px; }
.ih-quote__bar { position: relative; flex: 1; height: 3px; border-radius: 20px; background: #4764ad; transition: background-color .3s ease; }
.ih-quote__bar::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; } /* bigger hit area */
.ih-quote__bar[aria-current="true"] { background: var(--ih-blue); }
.ih-quote__bar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ==========================================================================
   3. Off-canvas menu (below 1024px). Lives outside the header (and outside
      anything with transform / filter), or its position: fixed stops covering
      the screen.
   ========================================================================== */
.ih-drawer { position: fixed; inset: 0; z-index: 1000; visibility: hidden; transition: visibility 0s linear .4s; color: #fff; }
.ih-drawer:not(.is-open) { pointer-events: none; }   /* same guard as the dropdowns: nothing inside a closed drawer may catch clicks (an open __sub keeps visibility:visible) */
.ih-drawer.is-open { visibility: visible; transition: none; }
@media (min-width: 1024px) { .ih-drawer { display: none; } }
.ih-drawer__scrim { position: absolute; inset: 0; background: rgba(2, 6, 23, .6); opacity: 0; transition: opacity .35s ease; }
.ih-drawer.is-open .ih-drawer__scrim { opacity: 1; }
.ih-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%;
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(120% 50% at 100% 0%, rgba(0, 106, 255, .28), transparent 70%), #121e3d;
  transform: translateX(100%); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.ih-drawer.is-open .ih-drawer__panel { transform: none; }
.ih-drawer__top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--ih-gutter); }
.ih-drawer__top .ih-logo img { height: 40px; }
.ih-drawer__close {
  display: grid; place-items: center; flex: none; width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; color: #fff; transition: background-color .2s;
}
.ih-drawer__close:hover { background: rgba(255, 255, 255, .1); }
.ih-drawer__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ih-drawer__close svg { width: 16px; height: 16px; }

.ih-drawer__menu { padding: 8px var(--ih-gutter) 0; }
.ih-drawer__menu > li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.ih-drawer__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 0;
  font-size: 18px; font-weight: 400; line-height: 24px; color: rgba(255, 255, 255, .8); transition: color .2s;
}
.ih-drawer__link:hover, .ih-drawer__link[aria-expanded="true"], .ih-drawer__link.is-current { color: #fff; }
.ih-drawer__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.ih-drawer__link svg { flex: none; width: 12px; height: 8px; transition: transform .3s ease; }
.ih-drawer__link[aria-expanded="true"] svg { transform: rotate(180deg); }
/* height animation: grid-template-rows 0fr -> 1fr */
.ih-drawer__sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s ease, visibility 0s linear .35s; }
.ih-drawer__sub.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s ease, visibility 0s; }
.ih-drawer__sub > * { min-height: 0; overflow: hidden; }
.ih-drawer .ih-cards { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 8px; padding: 0 0 16px; }
.ih-drawer .ih-card__label, .ih-drawer .ih-cards--industries .ih-card__label { font-size: 15px; }

.ih-drawer__foot { flex: none; margin-top: auto; padding: 24px var(--ih-gutter) 28px; }
.ih-drawer__foot .ih-cta { display: flex; width: 100%; height: 48px; }

@media print { .ih, .ih-drawer { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .ih, .ih-bar, .ih-menu__link, .ih-menu__link svg, .ih-cta, .ih-panel, .ih-card, .ih-card__arrow, .ih-quote__slide,
  .ih-drawer, .ih-drawer__scrim, .ih-drawer__panel, .ih-drawer__sub, .ih-drawer__link svg { transition: none !important; }
}