@import url('./index-material-vivid.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700&family=Sora:wght@600;700;800&display=swap');

:root {
  --ink: #183854;
  --ink-soft: #48637f;
  --paper: #f7fffd;
  --sand: #ffe58a;
  --brand: #00a79d;
  --brand-dark: #008379;
  --accent: #ff9f1c;
  --accent-dark: #f57c00;
  --sky: #2f7cf3;
  --mint: #58c97a;
  --line: rgba(24, 56, 84, 0.12);
  --shadow: 0 18px 44px rgba(0, 167, 157, 0.2);
  --surface-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.4));
  --surface-bg-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.34));
  --surface-border: rgba(255, 255, 255, 0.26);
}

html {
  color-scheme: light !important;
}

body {
  background:
    linear-gradient(156deg, #f7fffd 0%, #f7fffd 34%, #ffe58a 34%, #ffe58a 58%, #00a79d 58%, #00a79d 100%) fixed !important;
}

.nav,
.nav.scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 167, 157, 0.26) !important;
  box-shadow: 0 18px 42px rgba(47, 124, 243, 0.18) !important;
}

.nav-links,
.nav-links a {
  color: #1e4c6a !important;
}

.nav-links a:hover {
  background: rgba(47, 124, 243, 0.1) !important;
  color: #1f67cf !important;
}

.nav-cta,
.btn-primary,
.footer-cta {
  background: linear-gradient(135deg, #2f7cf3, #00a79d) !important;
  box-shadow: 0 14px 30px rgba(47, 124, 243, 0.3) !important;
}

.btn-secondary {
  border-color: rgba(0, 167, 157, 0.34) !important;
}

.filter-btn.active,
.project-action--brief {
  background: #00a79d !important;
  border-color: #00a79d !important;
}

.page-loader {
  background: linear-gradient(135deg, #2f7cf3, #00a79d) !important;
}

.blob-1 {
  background: linear-gradient(135deg, rgba(47, 124, 243, 0.4), rgba(0, 167, 157, 0.36)) !important;
}

.blob-2 {
  background: linear-gradient(135deg, rgba(255, 159, 28, 0.4), rgba(255, 229, 138, 0.32)) !important;
}

.blob-3 {
  background: linear-gradient(135deg, rgba(88, 201, 122, 0.34), rgba(47, 124, 243, 0.28)) !important;
}

/* Typography profile: rounded and bold */
body {
  font-family: "Nunito", sans-serif;
  font-size: 16.8px;
  line-height: 1.68;
}

h1,
h2,
h3,
.brand-text,
.section-head h2,
.footer-grid h2 {
  font-family: "Sora", sans-serif;
  letter-spacing: -0.02em;
}

.hero h1 {
  font-size: clamp(2.55rem, 5vw, 4.3rem);
  line-height: 1.08;
  font-weight: 800;
}

.section-head h2 {
  font-size: clamp(2rem, 3.6vw, 3.05rem);
}

.hero p,
.section-head p,
.about-panel p,
.process-step p,
.project-body p,
.featured-card p,
.footer-grid p {
  font-size: 1.03rem;
  line-height: 1.7;
}

.featured-card h3,
.project-body h4,
.process-step h3,
.about-panel h3 {
  font-size: 1.13rem;
  line-height: 1.3;
}

.nav-links a,
.nav-cta,
.btn-primary,
.btn-secondary,
.footer-cta,
.project-action {
  font-size: 0.97rem;
  font-weight: 700;
}

/* Readability pass: comprehensive */
.hero h1 {
  font-size: clamp(2.75rem, 5.35vw, 4.55rem) !important;
}

.section-head h2,
.footer-grid h2 {
  font-size: clamp(2.15rem, 3.9vw, 3.2rem) !important;
}

.hero p,
.section-head p,
.about-panel p,
.process-step p,
.project-body p,
.featured-card p,
.footer-grid p,
.quickview-desc,
.about-panel li {
  font-size: clamp(1.04rem, 1.25vw, 1.11rem) !important;
  line-height: 1.74 !important;
  font-weight: 500 !important;
}

.featured-card h3,
.project-body h4,
.process-step h3,
.about-panel h3,
.quickview-title {
  font-size: clamp(1.18rem, 1.8vw, 1.28rem) !important;
  line-height: 1.33 !important;
  font-weight: 800 !important;
}

.nav-links a,
.nav-cta,
.btn-primary,
.btn-secondary,
.footer-cta,
.project-action,
.filter-btn,
.search input {
  font-size: 1.01rem !important;
  font-weight: 700 !important;
}

.pill,
.project-tag,
.process-meta,
.quickview-tag {
  font-size: 0.9rem !important;
  letter-spacing: 0.09em !important;
  font-weight: 800 !important;
}

.result-bar,
.footer-legal,
.contact-info,
.stat-text {
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.stat strong {
  font-size: 1.2rem !important;
}

/* Layout safety pass: containment + no overflow */
:where(
  .hero h1,
  .hero p,
  .section-head h2,
  .section-head p,
  .featured-card h3,
  .featured-card p,
  .project-body h4,
  .project-body p,
  .process-step h3,
  .process-step p,
  .about-panel h3,
  .about-panel p,
  .about-panel li,
  .quickview-title,
  .quickview-desc,
  .quickview-tag,
  .pill,
  .project-tag,
  .process-meta,
  .contact-info,
  .footer-grid p,
  .footer-grid h2,
  .stat strong,
  .stat-text
) {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.featured-card,
.project-card,
.process-step,
.about-panel li,
.quickview-details,
.hero-card,
.stat,
.process-flow,
.about-panel {
  overflow: hidden;
}

.featured-card {
  height: auto !important;
  min-height: clamp(340px, 40vw, 420px) !important;
}

.featured-body {
  flex: 1 1 auto !important;
  padding: 10px 2px 8px !important;
}

.project-body {
  gap: 8px !important;
}

.pill,
.project-tag,
.process-meta,
.quickview-tag {
  max-width: 100%;
  display: inline-flex !important;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1.2 !important;
  white-space: normal !important;
  letter-spacing: 0.065em !important;
}

.nav {
  min-height: 60px;
}

.nav-links {
  gap: 6px !important;
}

.nav-links a,
.nav-cta {
  white-space: nowrap;
}

.nav-links a {
  padding: 7px 12px !important;
  font-size: clamp(0.86rem, 0.78rem + 0.22vw, 0.96rem) !important;
}

.nav-cta,
.btn-primary,
.btn-secondary,
.footer-cta,
.project-action,
.filter-btn,
.search input {
  font-size: clamp(0.92rem, 0.82rem + 0.24vw, 1rem) !important;
}

.search input {
  min-height: 44px;
}

.quickview-details {
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "meta"
    "desc"
    "actions" !important;
  max-height: 44% !important;
}

.quickview-actions {
  justify-content: flex-start !important;
}

@media (max-width: 1200px) {
  .hero h1 {
    font-size: clamp(2.18rem, 5.3vw, 3.45rem) !important;
  }

  .section-head h2,
  .footer-grid h2 {
    font-size: clamp(1.8rem, 4.2vw, 2.6rem) !important;
  }

  .hero p,
  .section-head p,
  .about-panel p,
  .process-step p,
  .project-body p,
  .featured-card p,
  .footer-grid p,
  .quickview-desc,
  .about-panel li {
    font-size: clamp(0.98rem, 1.6vw, 1.04rem) !important;
    line-height: 1.62 !important;
  }

  .featured-card {
    min-height: 330px !important;
  }
}

@media (max-width: 900px) {
  .nav {
    height: auto !important;
    padding: 8px 12px 8px 18px !important;
  }

  .nav-cta {
    padding: 10px 14px !important;
  }

  .featured-card {
    min-height: 312px !important;
  }

  .project-footer {
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: clamp(1.88rem, 8.8vw, 2.5rem) !important;
    line-height: 1.12 !important;
  }

  .section-head h2,
  .footer-grid h2 {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
  }

  .hero p,
  .section-head p,
  .about-panel p,
  .process-step p,
  .project-body p,
  .featured-card p,
  .footer-grid p,
  .quickview-desc,
  .about-panel li {
    font-size: 0.96rem !important;
    line-height: 1.58 !important;
  }

  .featured-card h3,
  .project-body h4,
  .process-step h3,
  .about-panel h3,
  .quickview-title {
    font-size: 1.04rem !important;
  }

  .pill,
  .project-tag,
  .process-meta,
  .quickview-tag {
    font-size: 0.78rem !important;
    letter-spacing: 0.05em !important;
  }

  .featured-card {
    min-height: 296px !important;
  }

  .process-step {
    padding: 12px !important;
  }

  .quickview-details {
    margin: 10px !important;
    padding: 12px !important;
  }
}

/* Final UX stabilization pass */
:where(
  .hero h1,
  .hero p,
  .section-head h2,
  .section-head p,
  .featured-card h3,
  .featured-card p,
  .project-body h4,
  .project-body p,
  .process-step h3,
  .process-step p,
  .about-panel h3,
  .about-panel p,
  .about-panel li,
  .quickview-title,
  .quickview-desc,
  .quickview-tag,
  .pill,
  .project-tag,
  .process-meta,
  .contact-info,
  .footer-grid p,
  .footer-grid h2,
  .stat strong,
  .stat-text,
  .nav-links a,
  .nav-cta,
  .btn-primary,
  .btn-secondary,
  .footer-cta,
  .project-action,
  .filter-btn,
  .search input
) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hero h1,
.section-head h2,
.footer-grid h2 {
  text-wrap: balance;
}

.hero h1 {
  max-inline-size: 13ch;
  line-height: 1.1 !important;
}

.section-head h2,
.footer-grid h2 {
  max-inline-size: 18ch;
  line-height: 1.17 !important;
}

:where(
  .hero-grid > *,
  .featured-grid > *,
  .vault-grid > *,
  .process-flow > *,
  .about-panel > *,
  .footer-grid > *,
  .quickview-content > *,
  .quickview-details > *
) {
  min-width: 0;
}

.nav-cta,
.btn-primary,
.btn-secondary,
.footer-cta,
.project-action,
.filter-btn,
.search input,
.quickview-close,
.nav-toggle {
  min-height: 44px;
}

.project-icon {
  right: 12px !important;
  bottom: 12px !important;
}

.quickview-details {
  max-height: min(52vh, 52%) !important;
  overflow: auto !important;
}

.quickview-actions {
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.featured-scene {
  min-height: 150px;
}

.pill,
.project-tag,
.process-meta,
.quickview-tag {
  white-space: normal !important;
  line-height: 1.2 !important;
}

@media (max-width: 1200px) {
  .hero h1 {
    max-inline-size: 12ch;
  }

  .section-head h2,
  .footer-grid h2 {
    max-inline-size: 16ch;
  }
}

@media (max-width: 900px) {
  .nav-links a,
  .nav-cta,
  .btn-primary,
  .btn-secondary,
  .footer-cta,
  .project-action,
  .filter-btn,
  .search input {
    font-size: 0.94rem !important;
  }

  .quickview-details {
    max-height: min(56vh, 58%) !important;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    max-inline-size: 11ch;
    line-height: 1.12 !important;
  }

  .section-head h2,
  .footer-grid h2 {
    max-inline-size: 14ch;
    line-height: 1.18 !important;
  }

  .pill,
  .project-tag,
  .process-meta,
  .quickview-tag {
    font-size: 0.76rem !important;
    letter-spacing: 0.04em !important;
  }

  .project-icon {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Vault action alignment + hero mini-card containment */
.vault-grid {
  align-items: stretch;
}

.project-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.project-body {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(74px, 1fr) auto !important;
  align-content: start;
  gap: 10px !important;
}

.project-body p {
  margin: 0;
}

.project-footer {
  margin-top: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
}

.project-action {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
}

.hero-art {
  height: clamp(450px, 46vw, 560px) !important;
  overflow: visible !important;
}

.hero-card {
  overflow: visible !important;
}

/* Keep hero right panel and stat tiles on one glass opacity scale. */
.hero-art,
.hero-card,
.stat {
  background: var(--surface-bg) !important;
  border-color: var(--surface-border) !important;
  box-shadow: var(--surface-shadow) !important;
}

/* Match process/about outer containers to the same glass token as other cards. */
.process-flow,
.about-panel {
  background: var(--surface-bg) !important;
  border-color: var(--surface-border) !important;
  box-shadow: var(--surface-shadow) !important;
}

.process-flow::before {
  display: none !important;
}

.hero-card.tag {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-card.tag .hero-mini-grid,
.hero-card.mini .hero-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.hero-card.tag .hero-mini-grid span,
.hero-card.mini .hero-mini-grid span {
  min-width: 0;
  padding: 4px 6px !important;
  font-size: clamp(0.68rem, 0.58rem + 0.28vw, 0.8rem) !important;
  line-height: 1.16 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1200px) {
  .hero-art {
    height: clamp(420px, 54vw, 520px) !important;
  }

  .project-body {
    grid-template-rows: auto auto minmax(66px, 1fr) auto !important;
  }
}

@media (max-width: 900px) {
  .hero-art {
    height: 380px !important;
  }

  .project-footer {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .project-action {
    font-size: 0.92rem !important;
  }
}

@media (max-width: 640px) {
  .hero-art {
    height: auto !important;
    overflow: hidden !important;
  }

  .project-footer {
    grid-template-columns: 1fr !important;
  }

  .hero-card.tag .hero-mini-grid span,
  .hero-card.mini .hero-mini-grid span {
    font-size: 0.74rem !important;
  }
}

/* Black-readable vivid palette */
:root {
  --ink: #0f1115;
  --ink-soft: #171a20;
}

body {
  color: var(--ink) !important;
  background: linear-gradient(156deg, #f8fffd 0%, #f8fffd 28%, #8dffe3 28%, #8dffe3 54%, #ffe66a 54%, #ffe66a 76%, #9fdfff 76%, #9fdfff 100%) fixed !important;
}

.nav-links a,
.hero p,
.section-head p,
.about-panel p,
.process-step p,
.project-body p,
.featured-card p,
.result-bar,
.contact-info,
.contact-info a,
.footer-grid p,
.footer-legal,
.stat-text,
.process-meta,
.quickview-desc,
.quickview-title,
.quickview-tag,
.project-tag,
.pill,
.hero-card.tag p,
.hero-mini-title,
.hero-card-header,
.search input,
.filter-btn,
.about-panel li {
  color: var(--ink) !important;
  text-shadow: none !important;
}

.brand-text {
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  color: var(--ink) !important;
}

.site-footer {
  background: rgba(255, 255, 255, 0.58) !important;
  color: var(--ink) !important;
  border-top: 1px solid rgba(15, 17, 21, 0.12);
}

.btn-primary,
.nav-cta,
.footer-cta,
.project-action--brief {
  color: #fff !important;
}