/* O nama - reuses Home's tokens/hero/.about-grid/.btn/.photo-gallery
   (wrapper carries both "home-page" and "onama-page" classes), this file
   only adds what's unique to this page. */

/* .hero-photo already defaults to min-height:100vh (full viewport) via
   the shared home.css rule - no override needed here. */
.onama-page .onama-about{padding-block:64px;}

/* ACCREDITATIONS */
.onama-page .accred-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:920px){.onama-page .accred-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.onama-page .accred-grid{grid-template-columns:1fr;}}
.onama-page .accred-card{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card, 16px); padding:24px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px;}
.onama-page .accred-icon{width:44px; height:44px; border-radius:12px; background:var(--teal); display:flex; align-items:center; justify-content:center; flex:none;}
.onama-page .accred-card p{margin:0; color:var(--ink-soft); font-size:1.081rem; line-height:1.55;}
.onama-page .accred-card strong{color:var(--ink);}
.onama-page .accred-card a{color:var(--teal-deep); font-weight:600;}
.onama-page .accred-card a:hover{text-decoration:underline;}

/* CLIENTS */
.onama-page .onama-clients{background:var(--ground-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.onama-page .clients-row{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px;}
.onama-page .clients-row span{background:var(--card-bg); border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-size:0.989rem; font-weight:600; color:var(--ink-soft);}

/* TEAM CTA banner */
.onama-page .onama-team-cta .wrap{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; background:var(--ink); color:#fff; border-radius:24px; padding:44px 48px;}
.onama-page .onama-team-cta .eyebrow{color:var(--sky);}
.onama-page .onama-team-cta h2{color:#fff; margin-top:8px; font-size:clamp(1.61rem,2.8vw,2.18rem);}
.onama-page .onama-team-cta p{color:#9FB7C4; margin-top:10px; max-width:52ch;}
.onama-page .onama-team-cta .btn-primary{white-space:nowrap;}
@media (max-width:760px){
  .onama-page .onama-team-cta .wrap{padding:32px 26px; border-radius:18px;}
}

/* Hero without gradient: flat light tint (inline) + shadow keeps text legible */
.onama-page .onama-hero-photo .eyebrow, .onama-page .onama-hero-photo h1, .onama-page .onama-hero-photo .lede{color:#fff; text-shadow:0 2px 16px rgba(5,10,16,.9), 0 1px 4px rgba(5,10,16,.95);}
.onama-page .onama-hero-photo .lede{font-weight:500;}
.onama-page .onama-hero-photo .eyebrow{color:#fff; font-weight:700;}

/* O nama gallery - bento layout, tiles of different sizes (4x4 on desktop,
   fills with no gaps; order of the 8 photos in template-onama.php matters) */
.onama-page .gallery-bento{grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(190px,19vw,250px); gap:14px; grid-auto-flow:dense;}
.onama-page .gallery-bento .gallery-item{border-radius:16px;}
.onama-page .gallery-bento .gallery-item:nth-child(1){grid-column:span 2;}
.onama-page .gallery-bento .gallery-item:nth-child(2){grid-column:span 2; grid-row:span 2;}
.onama-page .gallery-bento .gallery-item:nth-child(3){grid-row:span 2;}
.onama-page .gallery-bento .gallery-item:nth-child(5){grid-column:span 2;}
.onama-page .gallery-bento .gallery-item:nth-child(6){grid-row:span 2;}
.onama-page .gallery-bento .gallery-item:nth-child(8){grid-column:span 2;}
@media (max-width:820px){
  .onama-page .gallery-bento{grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(150px,30vw,230px); gap:10px;}
  .onama-page .gallery-bento .gallery-item:nth-child(1),
  .onama-page .gallery-bento .gallery-item:nth-child(2),
  .onama-page .gallery-bento .gallery-item:nth-child(6){grid-column:span 2; grid-row:span 1;}
}