/* ==========================================================
   TygerLabs.ai · Layout
   Base type, page chrome (header, drawer, footer), sections.
   Components live in ui-kit.css. Nothing forces precedence.
   ========================================================== */

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--header-h) + var(--s-4)); }
body {
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--tiger); color: var(--tiger-ink); }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: var(--ff-display);
  font-weight: var(--fw-heavy);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--ink);
}
h1, .h1 { font-size: var(--text-3xl); }
h2, .h2 { font-size: var(--text-2xl); }
h3, .h3 { font-size: var(--text-xl); letter-spacing: -0.015em; line-height: 1.2; }
h4, .h4 { font-size: var(--text-lg); letter-spacing: -0.01em; line-height: 1.3; }
p { text-wrap: pretty; }
strong { color: var(--ink); font-weight: var(--fw-semi); }
.mono { font-family: var(--ff-mono); }

a { transition: color var(--t-fast) var(--ease); }
:focus-visible {
  outline: 2px solid var(--tiger);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

img, svg { max-width: 100%; height: auto; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--tiger);
  color: var(--tiger-ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-2); }

/* ---------- Container ----------
   Gutter 3rem gives 1.5rem side padding, which matches the negative
   margin of a .g-5 row, so no row ever pokes past the viewport. */
.container-xxl { --bs-gutter-x: 3rem; }
@media (max-width: 575.98px) {
  .container-xxl { --bs-gutter-x: 2rem; }
  .g-5, .gx-5 { --bs-gutter-x: 2rem; }
}

/* ---------- Header ---------- */
/* No transform, filter or backdrop-filter on .site-header itself: any of
   them makes it the containing block for the fixed offcanvas drawer inside
   it, which then renders inside the header and widens the page. The glass
   lives on ::before instead. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg-glass);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  transition: background var(--t-mid) var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-scrolled::before { background: var(--bg-glass-strong); }
.site-nav {
  --bs-navbar-padding-y: 0;
  min-height: var(--header-h);
}
.site-brand { padding: 0; margin-right: var(--s-6); }
/* Brand: the tiger head and the wordmark are separate images so the head
   can carry its own depth and motion. --brand-h sizes the whole lockup. */
.site-brand {
  --brand-h: 64px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--brand-h) * 0.18);
}
@media (min-width: 1400px) { .site-brand { --brand-h: 68px; } }
.site-brand-mark {
  position: relative;
  display: block;
  height: var(--brand-h);
  transform-origin: 50% 65%;
  transition: transform var(--t-slow) var(--ease);
}
.site-brand-mark img {
  display: block;
  height: 100%;
  width: auto;
  filter: var(--logo-depth);
  transform-origin: 50% 65%;
}
/* Sheen: a band of light clipped to the tiger's own silhouette. It rests
   off to one side; animations.css sweeps it across. */
.site-brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--logo-sheen) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-mask: url("../assets/brand/tyger-head.svg") center / contain no-repeat;
  mask: url("../assets/brand/tyger-head.svg") center / contain no-repeat;
  pointer-events: none;
}
/* Hover glow sits on the wrapper: the idle loop owns the image's filter */
.site-brand-mark { transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
.site-brand:hover .site-brand-mark,
.site-brand:focus-visible .site-brand-mark { filter: drop-shadow(0 0 18px var(--tiger-glow)); }
.site-brand-word { display: block; height: calc(var(--brand-h) * 0.667); width: auto; }

.site-nav-links {
  --bs-nav-link-color: var(--ink-2);
  --bs-nav-link-hover-color: var(--ink);
  --bs-navbar-active-color: var(--ink);
  --bs-nav-link-font-size: 1.3125rem;
  --bs-nav-link-font-weight: var(--fw-semi);
  gap: var(--s-1);
}
.site-nav-links .nav-link {
  position: relative;
  font-family: var(--ff-display);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
}
/* The current page is marked by weight and color, never an underline bar. */
.site-nav-links .nav-link.active { font-weight: var(--fw-bold); color: var(--tiger-2); }

.site-nav-actions { gap: var(--s-2); }
.site-nav-login {
  --bs-btn-font-family: var(--ff-display);
  --bs-btn-font-size: 1.3125rem;
  --bs-btn-color: var(--ink-2);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-active-color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
/* Menu button: a filled circle with two bars, the lower one shorter.
   On hover the circle turns tiger and the short bar grows to full width. */
.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  transition: background-color var(--t-mid) ease, color var(--t-mid) ease;
}
.site-nav-toggle:hover,
.site-nav-toggle[aria-expanded="true"] { background: var(--tiger); color: var(--tiger-ink); }
.site-nav-toggle:focus { box-shadow: none; }
.site-nav-toggle:focus-visible { outline: 2px solid var(--tiger); outline-offset: 3px; }
.site-nav-toggle-bars {
  display: grid;
  justify-items: end;
  gap: 6px;
  width: 22px;
}
.site-nav-toggle-bars > span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}
.site-nav-toggle-bars > span:last-child { width: 62%; }
.site-nav-toggle:hover .site-nav-toggle-bars > span:last-child { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .site-nav-toggle-bars > span { transition: width var(--t-mid) ease; }
}

.site-drawer .offcanvas-title { margin: 0; }

/* Drawer close button: the same circle as the menu button */
.site-drawer-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 1.375rem;
  transition: background-color var(--t-mid) ease, color var(--t-mid) ease;
}
.site-drawer-close:hover { background: var(--tiger); color: var(--tiger-ink); }
.site-drawer-close:focus-visible { outline: 2px solid var(--tiger); outline-offset: 3px; }

/* Services dropdown: themed through Bootstrap's own variables */
.site-services-menu {
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-radius: var(--r-lg);
  --bs-dropdown-padding-y: var(--s-3);
  --bs-dropdown-min-width: 19rem;
  --bs-dropdown-link-color: var(--ink-2);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--surface-2);
  --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--surface-3);
  --bs-dropdown-item-padding-x: var(--s-5);
  --bs-dropdown-item-padding-y: var(--s-3);
  --bs-dropdown-divider-bg: var(--line);
  --bs-dropdown-font-size: var(--text-md);
  box-shadow: var(--shadow-lg);
}
.site-services-menu .dropdown-item { display: flex; align-items: center; gap: var(--s-3); font-weight: var(--fw-medium); }
.site-services-menu .dropdown-item .ph { font-size: 1.25rem; color: var(--tiger); }
.site-services-all { color: var(--tiger-2); font-weight: var(--fw-semi); }
.site-nav-links .dropdown-toggle::after { vertical-align: 0.15em; border-top-color: currentColor; }

/* Drawer: Bootstrap offcanvas below xxl (1400px), inline nav above.
   At this type size the full menu needs about 1,350px. */
.site-drawer {
  --bs-offcanvas-bg: var(--surface-0);
  --bs-offcanvas-width: min(88vw, 420px);
  --bs-offcanvas-border-color: var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.site-drawer-foot {
  display: grid;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-6);
}

@media (max-width: 1399.98px) {
  .site-drawer .offcanvas-body { display: flex; flex-direction: column; }
  /* In the drawer the services list opens in place, full width */
  .site-services-menu { --bs-dropdown-bg: transparent; --bs-dropdown-border-color: transparent; box-shadow: none; position: static; }
  .site-nav-links .nav-link {
    font-family: var(--ff-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-heavy);
    letter-spacing: -0.02em;
    padding: var(--s-2) 0;
  }
  }
@media (min-width: 1400px) {
  .site-nav-links { margin-inline: auto; }
}
@media (max-width: 575.98px) {
  .site-nav .container-xxl { flex-wrap: nowrap; }
  .site-brand { margin-right: var(--s-2); }
  .site-brand { --brand-h: 52px; }
  .site-nav-actions .site-nav-cta { display: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: calc(var(--section-y) * 0.6); }
.section-raised { background: var(--surface-0); }
.section-rule { border-top: 1px solid var(--line); }

.section-head { max-width: 52rem; margin-bottom: var(--s-7); }
.section-head.text-center { margin-inline: auto; }
.section-head p { font-size: var(--text-lg); color: var(--muted); margin-top: var(--s-4); }
.section-head-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}
.section-head-split .section-head { margin-bottom: 0; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 2rem + 8vw, 8rem) clamp(3rem, 2rem + 4vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, var(--tiger-glow) 0%, transparent 62%);
  pointer-events: none;
}
.page-hero .container-xxl { position: relative; }
.page-hero h1 { font-size: clamp(2.75rem, 1.5rem + 5vw, 6rem); font-weight: var(--fw-ultra); max-width: 16ch; }
.page-hero-lede { font-size: var(--text-xl); color: var(--ink-2); max-width: 44rem; margin-top: var(--s-5); line-height: 1.5; }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--s-9) calc(var(--s-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface-0);
}
.site-footer-brand img { height: 60px; width: auto; }
.site-footer-lede { color: var(--muted); max-width: 26rem; margin-top: var(--s-5); }
.site-footer-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.site-footer-mail:hover { color: var(--tiger-2); }
.site-footer-head {
  font-family: var(--ff-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--dim);
  margin-bottom: var(--s-4);
}
.site-footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.site-footer-links a {
  display: inline-block;
  padding-block: var(--s-1);
  color: var(--ink-2);
  text-decoration: none;
}
.site-footer-links a:hover { color: var(--tiger-2); }
.site-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  color: var(--dim);
}
.site-footer-base p { margin: 0; }
.site-footer-tag { font-family: var(--ff-body); font-size: var(--text-xs); }
.site-footer-legal { display: flex; gap: var(--s-5); }
.site-footer-legal a { color: inherit; text-decoration: none; padding-block: 0.7rem; margin-block: -0.7rem; }
.site-footer-legal a:hover { color: var(--tiger-2); }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .modal, .skip-link { display: none; }
  body { background: #fff; color: #000; }
}