/* Onosoji Platform v2.9.0 — restrained Liquid Glass experience layer.
   Glass is reserved for navigation and controls. Content remains solid,
   warm and editorial. Loaded after the canonical v2.8 styles. */

:root {
  --ux-glass: rgba(252, 251, 247, .74);
  --ux-glass-strong: rgba(252, 251, 247, .88);
  --ux-glass-line: rgba(255, 255, 255, .74);
  --ux-glass-shadow: 0 12px 42px rgba(5, 39, 30, .10), 0 1px 0 rgba(255,255,255,.76) inset;
  --ux-soft-green: #e9eee9;
  --ux-paper: #fbfaf6;
  --ux-radius-lg: 28px;
  --ux-radius-md: 20px;
}

html { scroll-padding-top: 104px; }
body { background: var(--cream); }
main { position: relative; z-index: 0; }
.paper { background: var(--ux-paper); }
.cream-deep { background: #f0ebdf; }

/* The content layer stays calm and solid. */
.hero::before,
.page-hero::before { display: none; }
.hero-v27,
.page-hero { background: var(--ux-paper); }
.page-hero { border-bottom: 0; }
.section-rule { border-top-color: rgba(23,34,29,.11); }

/* A distinct glass navigation/control layer. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  padding: 12px 0 4px;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav-shell {
  min-height: 64px;
  padding: 0 9px 0 12px;
  border: 1px solid var(--ux-glass-line);
  border-radius: 999px;
  background: var(--ux-glass);
  box-shadow: var(--ux-glass-shadow);
  backdrop-filter: saturate(155%) blur(24px);
  -webkit-backdrop-filter: saturate(155%) blur(24px);
}
.brand { gap: 11px; padding-right: 8px; }
.brand-mark {
  width: 40px;
  height: 40px;
  box-shadow: 0 7px 18px rgba(5,39,30,.14), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.brand-name { font-size: 14px; }
.site-nav { gap: 3px; }
.site-nav a:not(.nav-cta) {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  transition: background-color .18s ease, color .18s ease;
}
.site-nav a:not(.nav-cta)::after { display: none; }
.site-nav a:not(.nav-cta):hover,
.site-nav a:not(.nav-cta):focus-visible,
.site-nav a:not(.nav-cta)[aria-current="page"] {
  background: rgba(11,61,46,.075);
}
.nav-cta {
  min-width: 80px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  background: var(--green);
  color: var(--cream);
  box-shadow: 0 8px 20px rgba(5,39,30,.14), 0 1px 0 rgba(255,255,255,.15) inset;
}
.nav-cta:hover,
.nav-cta:focus-visible,
.nav-cta[aria-current="page"] { background: var(--green-deep); color: var(--cream); }
.menu-button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  box-shadow: 0 5px 16px rgba(5,39,30,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.menu-button span:not(.sr-only) { margin: 5px auto; width: 21px; }

/* Buttons are controls. Primary actions stay solid; secondary actions may use glass. */
.button {
  min-height: 48px;
  border-radius: 999px;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { box-shadow: 0 8px 20px rgba(5,39,30,.12); }
.button-secondary {
  border-color: rgba(11,61,46,.15);
  background: rgba(252,251,247,.60);
  box-shadow: 0 6px 18px rgba(5,39,30,.055), 0 1px 0 rgba(255,255,255,.75) inset;
  backdrop-filter: saturate(145%) blur(16px);
  -webkit-backdrop-filter: saturate(145%) blur(16px);
}
.button-secondary:hover { border-color: rgba(11,61,46,.24); background: rgba(252,251,247,.82); color: var(--green); }
.button-ghost {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.text-link { border-bottom-color: rgba(11,61,46,.17); }

/* Metadata is content, not glass. */
.status-pill {
  border: 0;
  background: var(--ux-soft-green);
  color: var(--green);
}
a.status-pill.status-link:hover,
a.status-pill.status-link:focus-visible { background: #dfe8e1; border-color: transparent; }

/* Filters are a transient control bar, so they belong on the glass layer. */
.filter-row {
  position: sticky;
  top: 92px;
  z-index: 55;
  width: max-content;
  max-width: 100%;
  padding: 5px;
  gap: 3px;
  border: 1px solid var(--ux-glass-line);
  border-radius: 999px;
  background: var(--ux-glass);
  box-shadow: var(--ux-glass-shadow);
  backdrop-filter: saturate(155%) blur(22px);
  -webkit-backdrop-filter: saturate(155%) blur(22px);
}
.filter-button {
  min-height: 38px;
  padding: 8px 13px;
  border: 0;
  background: transparent;
}
.filter-button:hover { background: rgba(11,61,46,.07); color: var(--green); }
.filter-button.is-active { background: var(--green); color: var(--cream); }

/* Hero: one clear task, one image, generous breathing room. */
.hero-v27 { padding-top: clamp(54px, 6vw, 82px); padding-bottom: clamp(56px, 6vw, 88px); }
.hero-grid-v27 { gap: clamp(50px, 7vw, 96px); }
.hero-v27 h1 {
  max-width: 15ch;
  font-size: clamp(2.9rem, 4.35vw, 4.65rem);
  line-height: 1.01;
  letter-spacing: -.044em;
}
.hero-v27 .hero-intro { max-width: 610px; color: #56665d; }
.hero-portrait-v27 img,
.page-hero-photo img,
.media-frame img,
.article-figure img {
  border-radius: var(--ux-radius-lg);
}
.hero-portrait-v27 img { box-shadow: 0 28px 70px rgba(5,39,30,.10); }
.hero-portrait-v27 figcaption { margin-top: 14px; padding-left: 4px; }

/* Page heroes are editorial rather than panels. */
.page-hero-grid { align-items: center; }
.page-hero-aside { border-left: 0; padding-left: 0; }
.page-hero-aside p { color: #59685f; }
.breadcrumbs { margin-bottom: 28px; }

/* Open content architecture: groups and rules instead of a screen of boxes. */
.card-grid { gap: clamp(28px, 4vw, 54px); }
.info-card:not(.green-card) {
  min-height: 0;
  padding: 26px 0 6px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.info-card:not(.green-card) h3 { margin-top: 12px; }
.info-card:not(.green-card) .text-link { margin-top: 28px; }
.info-card.green-card {
  border: 0;
  border-radius: var(--ux-radius-md);
  box-shadow: 0 18px 42px rgba(5,39,30,.08);
}
.v27-card-grid .info-card:not(.green-card) { min-height: 0; padding: 28px 0 4px; }
.v27-card-grid .info-card:not(.green-card) h3 { margin-top: 0; }

.world-grid { gap: clamp(28px, 4vw, 52px); }
.world-card:not(.world-feature) {
  min-height: 0;
  padding: 28px 0 4px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}
.world-card:not(.world-feature):hover { transform: none; border-color: rgba(11,61,46,.34); box-shadow: none; }
.world-card:not(.world-feature) h3 { margin-top: 34px; }
.world-feature {
  border: 0;
  border-radius: var(--ux-radius-lg);
  overflow: hidden;
}

.institution-grid { gap: clamp(30px,4vw,56px); }
.institution-card {
  min-height: 0;
  padding: 28px 0 6px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.institution-card:hover { transform: none; border-color: rgba(11,61,46,.35); }

/* Metrics read as a continuous evidence rail, not tiles. */
.proof-metrics,
.impact-metrics,
.stats-grid,
.process-grid {
  border-left: 0;
  border-right: 0;
  background: transparent;
}
.impact-metrics { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.impact-metrics article { background: transparent; border-right: 1px solid var(--line); }
.impact-metrics article:last-child { border-right: 0; }
.stats-grid { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Selected experience opens into clean editorial rows. */
.selected-experience-accordion {
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.proof-shell-v275 .selected-experience-accordion summary { padding: 24px 0; }
.selected-experience-accordion .accordion-mark {
  border-color: rgba(11,61,46,.12);
  background: rgba(252,251,247,.56);
  box-shadow: 0 5px 16px rgba(5,39,30,.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.homepage-sector-card-grid {
  padding: 10px 0 6px;
  background: transparent;
  gap: 0 42px;
}
.sector-card-grid article,
.sector-card-grid article:nth-child(odd),
.homepage-sector-card-grid article {
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sector-card-grid article:nth-child(-n+2) { border-top-color: transparent; }
.proof-shell-v275 .experience-disclosure {
  padding: 20px 0 24px;
  background: transparent;
}

/* Institution names become a readable evidence strip rather than individual boxes. */
.featured-organisations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 26px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
}
.featured-organisations span {
  min-height: 0;
  padding: 9px 0;
  background: transparent;
  font-size: .9rem;
}

/* Publication records already work as rows. Featured content loses the unnecessary frame. */
.publication-feature-grid { gap: clamp(30px, 4vw, 58px); }
.publication-feature:not(.publication-feature-dark) {
  min-height: 0;
  padding: 32px 0 8px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.publication-feature-dark {
  border: 0;
  border-radius: var(--ux-radius-lg);
  box-shadow: 0 24px 58px rgba(5,39,30,.10);
}
.publication { padding: 42px 0; }
.publication-list { border-top-color: rgba(23,34,29,.12); }

/* Lists and callouts keep meaning without becoming UI chrome. */
.office-list { gap: 0; border: 0; background: transparent; }
.office-item {
  padding: 28px 0;
  border-top: 1px solid var(--line);
  background: transparent;
}
.office-item:last-child { border-bottom: 1px solid var(--line); }
.callout {
  padding: 28px 0 28px 24px;
  border: 0;
  border-left: 2px solid var(--gold);
  background: transparent;
}
.callout.status-callout { border-left-width: 3px; }
.media-frame { border: 0; background: transparent; box-shadow: none; overflow: visible; }
.media-caption { padding: 13px 4px 0; border-top: 0; }
.quote-panel,
.feature-panel { border-radius: var(--ux-radius-lg); overflow: hidden; }

/* Forms are controls, so subtle translucency is appropriate at field level only. */
.contact-form {
  padding: 0;
  border: 0;
  background: transparent;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.contact-form textarea { min-height: 150px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(223,201,143,.10);
}

/* Keep the brand's decisive solid moments. */
.cta-band { background: var(--gold); }
.cta-band .button-primary { background: var(--green-deep); color: var(--cream); }
.site-footer { background: #041f18; }

@media (max-width: 1040px) {
  .filter-row { top: 88px; }
}

@media (max-width: 900px) {
  .sector-card-grid article:nth-child(-n+2) { border-top-color: var(--line); }
  .sector-card-grid article:first-child { border-top-color: transparent; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 88px; }
  .site-header { padding: 8px 0 0; }
  .nav-shell {
    min-height: 60px;
    padding: 0 8px 0 10px;
    border-radius: 22px;
  }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { display: inline; font-size: 13px; }
  .site-nav {
    position: fixed;
    inset: 80px 14px auto;
    max-height: calc(100dvh - 96px);
    display: none;
    padding: 10px;
    gap: 2px;
    border: 1px solid var(--ux-glass-line);
    border-radius: 26px;
    background: var(--ux-glass-strong);
    box-shadow: 0 22px 60px rgba(5,39,30,.16);
    backdrop-filter: saturate(155%) blur(28px);
    -webkit-backdrop-filter: saturate(155%) blur(28px);
    overflow-y: auto;
  }
  .site-nav.is-open { display: flex; }
  .site-nav > a,
  .site-nav > a:not(.nav-cta) {
    min-height: 50px;
    width: 100%;
    padding: 0 14px !important;
    border: 0;
    border-radius: 15px;
    font-size: 16px;
  }
  .site-nav > a:not(.nav-cta):hover,
  .site-nav > a:not(.nav-cta):focus-visible,
  .site-nav > a:not(.nav-cta)[aria-current="page"] { background: rgba(11,61,46,.07); }
  .site-nav > a.nav-cta {
    margin-top: 8px;
    justify-content: center;
    border-radius: 15px;
  }
  .filter-row {
    top: 78px;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    border-radius: 18px;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-button { white-space: nowrap; flex: 0 0 auto; }
  .page-hero-aside:not(:has(.page-hero-photo)) { padding: 0; background: transparent; }
  .hero-portrait-v27 img,
  .page-hero-photo img,
  .media-frame img,
  .article-figure img { border-radius: 22px; }
  .proof-v27 .proof-metrics article { background: transparent; }
  .impact-metrics article { border-right: 0; border-bottom: 1px solid var(--line); }
  .impact-metrics article:last-child { border-bottom: 0; }
  .featured-organisations { gap: 0 20px; }
  .publication-feature-dark { border-radius: 22px; }
}

@media (max-width: 560px) {
  .site-header .shell { width: calc(100% - 20px); }
  .nav-shell { border-radius: 20px; }
  .brand-name { font-size: 12.5px; }
  .hero-v27 { padding-top: 38px; padding-bottom: 52px; }
  .hero-v27 h1 { font-size: clamp(2.08rem, 9.4vw, 2.75rem); line-height: 1.03; }
  .hero-grid-v27 { gap: 34px; }
  .hero-portrait-v27 img,
  .page-hero-photo img,
  .media-frame img,
  .article-figure img { border-radius: 18px; }
  .homepage-sector-card-grid { padding-inline: 0; }
  .sector-card-grid article,
  .sector-card-grid article:nth-child(odd) { padding: 19px 0; }
  .proof-shell-v275 .experience-disclosure { padding-inline: 0; }
  .publication-feature:not(.publication-feature-dark) { padding-left: 0; padding-right: 0; }
  .publication-feature-dark { padding: 28px 22px; border-radius: 20px; }
  .info-card:not(.green-card),
  .v27-card-grid .info-card:not(.green-card) { padding-left: 0; padding-right: 0; }
  .contact-form { gap: 16px; }
}

/* Accessibility and graceful fallback. */
@media (prefers-reduced-transparency: reduce) {
  .nav-shell,
  .site-nav,
  .filter-row,
  .button-secondary,
  .menu-button,
  .selected-experience-accordion .accordion-mark {
    background: var(--paper);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    background: var(--green-soft);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-shell,
  .site-nav,
  .filter-row,
  .button-secondary,
  .menu-button,
  .selected-experience-accordion .accordion-mark { background: rgba(252,251,247,.97); }
}

@media (prefers-reduced-motion: reduce) {
  .button:hover { transform: none; }
}