/* =====================================================
   YUGANTIX — Theme v2 overrides
   Loaded by index.html and about.html (the pages we've finalized
   the new design system on). Other pages still use the original
   style.css only, until we get to them.
   Goals: stronger/more readable fonts, better contrast, cool
   blue-matched neutral palette, tighter section rhythm, mega-menus.
   ===================================================== */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap");

:root {
  /* ---- New typeface system ----
     IBM Plex Sans — a serious, corporate-grade typeface (literally
     designed by IBM for enterprise software) with real italics, good
     weight range, and a more distinct character than Inter without
     tipping into "stylized." */
  --font-display: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Fixed type scale ----
     The original scale let --fs-hero reach 102px and --fs-4xl reach
     125px on large screens — fine for a single 2-word brand statement,
     completely wrong for full-sentence headlines, and inconsistent
     with how the rest of the site reads. Capping the whole scale here
     so every page that loads this file gets the same, sane proportions
     instead of patching one section at a time. */
  --fs-xl: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
  --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-3xl: clamp(1.8rem, 1.5rem + 1.4vw, 2.5rem);
  --fs-4xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-hero: clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem);

  /* ---- New color system ----
     The blue is staying (matches the logo) — what was actually clashing
     was a WARM cream/beige background sitting underneath a COOL blue.
     Warm + cool neutrals fight each other regardless of how either one
     looks alone. Cooling the entire neutral system (paper, ink, lines,
     dark sections) to match blue's temperature fixes that, instead of
     touching the blue itself. */
  --paper: #F4F6FB;
  --paper-deep: #E9EDF6;
  --paper-warm: #EEF1F9;
  --surface: #FFFFFF;

  --brand: #004BDA;
  --brand-deep: #001F5C;
  --brand-soft: #E8EEFB;
  --accent: #3D7CFF;
  --gold: #B8924E;

  --night: #0A0F1E;
  --night-soft: #121A2E;

  --ink: #0D1220;
  --ink-soft: #232A3D;
  --ink-muted: #5A6178;
  --ink-subtle: #8A90A3;

  --line: #DCE1ED;
  --line-soft: #E6EAF3;
  --line-strong: #C3CADC;

  /* Cool-toned shadows to match (replace the warm-brown versions) */
  --shadow-1: 0 1px 0 rgba(13,18,32,.04);
  --shadow-2: 0 1px 2px rgba(13,18,32,.06), 0 4px 14px rgba(13,18,32,.04);
  --shadow-3: 0 4px 28px rgba(13,18,32,.08), 0 1px 2px rgba(13,18,32,.04);
  --shadow-brand: 0 12px 36px rgba(0,75,218,.22);

  /* Tighter section rhythm */
  --section-y: clamp(3rem, 5vw, 5rem);
}

/* (Section background tints are defined below, near the other
   section-rhythm rules, to keep the border treatment in one place) */

/* ---------- Base readability ---------- */
body {
  font-weight: 450;
  letter-spacing: 0;
}

main p, main li, .lede, .case-card p, .post-content {
  color: var(--ink-soft);
}

/* Make sure footer text stays light/readable — never inherit the dark
   ink colors above, regardless of element type */
.site-footer, .site-footer p, .site-footer li, .site-footer span {
  color: rgba(255,255,255,.82);
}
.site-footer .footer-col li { color: rgba(255,255,255,.82); }
.site-footer .footer-col li a { color: rgba(255,255,255,.78); }
.site-footer .footer-brand p { color: rgba(255,255,255,.6); }
.site-footer .footer-bottom { color: rgba(255,255,255,.45); }

/* Headlines: replace the thin variable-font weights with real weight */
.display,
.hero-headline,
.page-hero h1,
.section-head .title,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.01em;
  font-variation-settings: normal;
}
.display em,
.hero-headline em,
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 700;
  color: var(--brand);
  font-variation-settings: normal;
}

h3, .case-card h3 {
  font-weight: 650;
}

/* Eyebrow / mono labels: slightly bolder for legibility at small size */
.eyebrow, .tag, .mono {
  font-weight: 600;
}

/* ---------- Section rhythm fixes ---------- */
.section, .section-tight {
  padding-block: var(--section-y);
}

.section-head {
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.hero {
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Remove doubled-up whitespace where a tight section follows a regular one */
.section + .section-tight,
.section-tight + .section {
  margin-top: -1.5rem;
}

/* Stat/process/case sections sit a touch closer to their headers */
.section-head + * {
  margin-top: 0;
}

/* Buttons: a touch bolder for clearer affordance */
.btn {
  font-weight: 700;
}

/* Footer + nav inherit the same body font automatically via variables;
   just nudge nav link weight up slightly for clarity */
.nav-primary a, .mobile-nav-links a {
  font-weight: 600;
}

/* ---------- Case-cover caption (replaces oversized SVG text) ---------- */
.case-cover { position: relative; overflow: hidden; }
.case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.case-card:hover .case-cover img { transform: scale(1.04); }
.case-cover img + .cover-caption,
.case-cover img ~ .cover-caption {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
/* Stronger gradient specifically when the cover is a photo, so the
   caption stays legible regardless of the image's own brightness */
.case-cover:has(img)::after {
  background: linear-gradient(180deg, rgba(13,18,32,0) 45%, rgba(13,18,32,.65) 100%);
}
.cover-caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
  letter-spacing: -.01em;
  z-index: 1;
}
.cover-caption-dark { color: var(--ink); text-shadow: none; }

/* ---------- Section-wise background rhythm ---------- */
.bg-deep { background: #E9EDF6; }
.bg-surface { background: #FFFFFF; }
.bg-warm { background: #EEF1F9; }
.bg-deep, .bg-surface, .bg-warm {
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* ============================================
   MEGA MENU — "Company" (index.html only)
   ============================================ */
.nav-item.has-mega { position: relative; }

.nav-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.nav-mega-trigger .chev {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-item.has-mega:hover .nav-mega-trigger .chev,
.nav-item.has-mega:focus-within .nav-mega-trigger .chev {
  transform: rotate(180deg);
}

.nav-mega-panel {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  pointer-events: none;
  z-index: 90;
}
.nav-item.has-mega:hover .nav-mega-panel,
.nav-item.has-mega:focus-within .nav-mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Invisible hover-bridge spanning trigger-to-panel gap; must exceed (header-h - trigger-h)/2. */
.nav-mega-panel::before {
  content: "";
  position: absolute;
  top: -32px;
  left: 0;
  right: 0;
  height: 32px;
}

.nav-mega-inner {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .nav-mega-inner { grid-template-columns: .85fr 1.15fr; gap: 3.5rem; }
}

.nav-mega-intro h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.08;
  margin: .9rem 0 .8rem;
}
.nav-mega-intro h3 em {
  font-style: italic;
  color: var(--brand);
  font-weight: 700;
}
.nav-mega-intro p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  max-width: 30ch;
  margin-bottom: 1.25rem;
}
.nav-mega-intro .eyebrow .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
}

.nav-mega-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
}
@media (min-width: 600px) {
  .nav-mega-links { grid-template-columns: repeat(2, 1fr); gap: .5rem 1.5rem; }
}
.nav-mega-link {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .85rem .75rem;
  border-radius: var(--r-md);
  transition: background var(--dur-fast) var(--ease);
}
.nav-mega-link:hover { background: var(--paper-deep); }
.nav-mega-link .num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-subtle);
  padding-top: .15rem;
  flex-shrink: 0;
}
.nav-mega-link strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 650;
  color: var(--ink);
  margin-bottom: .2rem;
}
.nav-mega-link small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.45;
}

/* ---------- Mobile accordion ---------- */
.mobile-nav-group { display: flex; flex-direction: column; }
.mobile-nav-accordion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: inherit;
  padding: 0;
}
.mobile-nav-accordion svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease);
}
.mobile-nav-accordion[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur) var(--ease);
}
.mobile-nav-submenu-inner { overflow: hidden; min-height: 0; }
.mobile-nav-group.is-open .mobile-nav-submenu {
  grid-template-rows: 1fr;
  margin-top: .75rem;
}
.mobile-nav-submenu a {
  display: block;
  padding: .6rem 0 .6rem 1rem;
  font-size: .85em;
  opacity: .8;
  border-left: 1px solid var(--night-line);
}

/* ---------- Technologies mega-menu variant ---------- */
.nav-mega-inner--tech {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 2rem;
}
@media (min-width: 900px) {
  .nav-mega-inner--tech { grid-template-columns: repeat(6, 1fr); }
}
.nav-tech-col h5 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  padding-bottom: .6rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.nav-tech-col h5.mt-3 { margin-top: 1.25rem; }
.nav-tech-col ul { display: flex; flex-direction: column; gap: .55rem; }
.nav-tech-col li {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.nav-tech-col--trending {
  background: var(--brand-soft);
  border-radius: var(--r-md, 12px);
  padding: 1.25rem 1.25rem 1.5rem;
  margin: -0.25rem -0.25rem -0.25rem 0;
}
.nav-tech-col--trending h5 {
  color: var(--brand-deep, var(--brand));
  border-bottom-color: rgba(0,75,218,.18);
}
.nav-tech-col--trending li { color: var(--ink); }

/* ---------- Footer overhaul (index.html only) ---------- */
.footer-brand .logo {
  height: 56px;
  margin-bottom: 1.5rem;
}
.footer-social--brand {
  margin-top: 1.5rem;
}
.legal-links--right {
  margin-left: auto;
}
@media (min-width: 600px) {
  .footer-bottom { flex-wrap: nowrap; }
}

/* Warm-toned variant of the default subtle case-cover gradient
   (replaces the cool navy-tinted default from the shared stylesheet) */
.case-cover::after {
  background: linear-gradient(180deg, transparent 50%, rgba(13,18,32,.05));
}

/* Header background was hardcoded to the old warm cream — match the
   new cool paper tone instead */
.site-header {
  background: rgba(244,246,251,0.78);
}
.site-header.is-scrolled {
  background: rgba(244,246,251,0.92);
}

/* ---------- Footer contact block (index.html only) ---------- */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.footer-contact a {
  color: rgba(255,255,255,.85);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease);
}
.footer-contact a:hover { color: var(--accent); }

/* Tighten footer column list spacing — the default gap felt too airy
   with 6-7 items per column */
.footer-col ul { gap: .45rem; }
.footer-col h5 { margin-bottom: .9rem; }
.footer-top { gap: 2rem; }

/* ============================================
   FAQ accordion (about.html)
   ============================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink);
  cursor: pointer;
}
.faq-question svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform var(--dur-fast) var(--ease);
}
.faq-item.is-open .faq-question svg { transform: rotate(180deg); color: var(--brand); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur) var(--ease);
}
.faq-answer > p {
  overflow: hidden;
  min-height: 0;
  padding-bottom: 1.4rem;
  max-width: 68ch;
  color: var(--ink-muted);
  font-size: var(--fs-base);
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

/* Mega-menu "you are here" highlight */
.nav-mega-link.is-current { background: var(--paper-deep); }
.nav-mega-link.is-current strong { color: var(--brand); }

/* ============================================
   ABOUT PAGE — image-rich sections
   ============================================ */

/* Hero split (headline + image) */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .about-hero-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; }
}
.about-hero-image {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 9/7;
  box-shadow: var(--shadow-3);
}
.about-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Story split (image + copy, reusable) */
.story-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .story-split { grid-template-columns: .85fr 1.15fr; gap: 3.5rem; }
  .story-split-reverse { grid-template-columns: 1.15fr .85fr; }
  .story-split-reverse .story-split-image { order: 2; }
  .story-split-reverse .story-split-body { order: 1; }
}
.story-split-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-2);
}
.story-split-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-stat-card {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  max-width: 14rem;
}
.story-stat-card strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--brand);
  line-height: 1;
}
.story-stat-card span {
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  line-height: 1.3;
}
.story-split-body .lede { color: var(--ink-muted); max-width: 50ch; }

/* Problem -> solution cards */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 700px) {
  .problem-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .problem-grid { grid-template-columns: repeat(4, 1fr); }
}
.problem-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem;
}
.problem-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 1.1rem;
}
.problem-icon svg { width: 22px; height: 22px; }
.problem-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  margin-bottom: .5rem;
}
.problem-card p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  line-height: 1.55;
}

/* About stats bar — slightly tighter than the homepage version */
.about-stats { padding-block: 0; }

/* Industry icon grid */
.industry-icon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 700px) {
  .industry-icon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .industry-icon-grid { grid-template-columns: repeat(3, 1fr); }
}
.industry-icon-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-fast) var(--ease);
}
.industry-icon-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.industry-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--paper-deep);
  color: var(--brand);
  margin-bottom: 1.1rem;
}
.industry-icon svg { width: 22px; height: 22px; }
.industry-icon-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);
  margin-bottom: .35rem;
}
.industry-icon-card p {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

/* Global --fs-4xl is now sane (capped at 48px), so we only need
   line-height/width tuning here, not a separate font-size override. */
.about-hero h1 {
  line-height: 1.1;
  max-width: 20ch;
}
.about-hero .lede { max-width: 52ch; }

/* Stat numbers and manifesto quotes use their own hardcoded clamp()
   values instead of the shared scale — bring them in line too, and
   make sure they pick up real weight from IBM Plex Sans instead of
   the old thin variable-font weight. */
.stat .num, .manifesto-text {
  font-weight: 600;
}
.stat .num {
  font-size: clamp(2.5rem, 4vw, 3.75rem);
}
.manifesto-text {
  font-size: clamp(1.5rem, 3vw, 2.4rem);
}

/* Bring all portfolio cards down to ~16:9 so the SVG-cover cards (Atlas,
   Orbit AI) match the height of the screenshot cards. */
.case-cover { aspect-ratio: 16 / 9; }

/* Portfolio web-card screenshot — full image, no left/right cropping AND
   no top/bottom letterbox. The cover sheds its aspect lock and matches the
   image's natural height instead. */
.case-cover:has(> img.case-cover-img) {
  aspect-ratio: auto;
}
.case-cover:has(> img.case-cover-img)::after { display: none; }
.case-cover img.case-cover-img,
.case-card:hover .case-cover img.case-cover-img {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none;
  display: block;
}


/* =========== Legal page content (Privacy Policy, Terms of Service, and
   any other plain WordPress Page) =========== */
/* .page-content.prose (from page.php) had no styling anywhere in the
   theme before this — plain Pages were rendering with pure browser
   defaults, which is why they looked visually out of step with the
   rest of the site. Placed here (loads on every page) rather than in
   a page-specific stylesheet, since any future plain Page should get
   this automatically. */
.page-content.prose {
  max-width: 760px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--ink-soft, #2A2F40);
}
.page-content.prose > * + * {
  margin-top: 1.4rem;
}
.page-content.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink, #0A0E1F);
  margin-top: 2.6rem;
  margin-bottom: .2rem;
}
.page-content.prose h2:first-child {
  margin-top: 0;
}
.page-content.prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink, #0A0E1F);
  margin-top: 2rem;
  margin-bottom: .2rem;
}
.page-content.prose p {
  margin-top: .9rem;
}
.page-content.prose em {
  color: var(--ink-muted, #4A4F5C);
  font-style: italic;
}
.page-content.prose ul,
.page-content.prose ol {
  margin-top: .9rem;
  padding-left: 1.4rem;
}
.page-content.prose li {
  margin-top: .4rem;
}
.page-content.prose li::marker {
  color: var(--brand, #004BDA);
}
.page-content.prose a {
  color: var(--brand, #004BDA);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-content.prose a:hover {
  text-decoration: none;
}
.page-content.prose strong {
  font-weight: 700;
  color: var(--ink, #0A0E1F);
}