/* ============================================================================
   RANCO concept gallery — index.html only.
   Load order: ibix-base.css -> shared.css -> motion-kit.css -> gallery.css
   Neutral shell (not any one concept's palette) since this page's job is to
   present all three fairly, not to pre-sell one of them visually.
   ========================================================================= */
:root{
  --ink:#0B0C0E; --ink-2:#101216; --ink-3:#16181D;
  --paper:#F3F5F8; --paper-2:#E8ECF1;
  --txt:#EDEEF2; --txt-dim:#A7ADB6; --txt-faint:#7B818B;
  --ink-txt:#17181B; --ink-dim:#4A5B7D;
  --navy:#223566; --blue:#328FCE; --blue-link:#1F6FA8;
  --accent:#223566; --accent-hi:#223566; --accent-btn:#223566;
  --line:rgba(255,255,255,.13); --line-ink:rgba(23,24,27,.16);
}
body{ background:var(--paper) }
#top-bar{ --header-bg:var(--paper); --header-line:var(--line-ink);
  --nav-txt:var(--ink-dim); --nav-txt-hover:var(--ink-txt); --line-btn:var(--line-ink) }
#site-footer{ --footer-line:var(--line-ink); --footer-muted:var(--ink-dim); --footer-accent:var(--navy);
  background:var(--paper); color:var(--ink-txt) }
#site-footer .ibix-credit{ color:var(--footer-muted) }
/* This is the internal picker page, not a site page — it keeps the simple
   two-line footer rather than the full brand/services/company/contact grid
   the three concept pages carry. */
#site-footer .foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:14px 24px }

.gal-hero{ padding-block-start:clamp(72px,10vh,120px); padding-block-end:clamp(40px,6vh,64px); background:var(--paper) }
.gal-hero h1{ font-size:clamp(2.1rem,4.4vw,3.4rem); max-width:22ch; color:var(--ink-txt) }
.gal-hero p{ margin-top:18px; max-width:62ch; color:var(--ink-dim); font-size:var(--step-1); line-height:1.65 }

.gal-grid{ padding-block-end:clamp(72px,10vh,120px); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6) var(--space-4) }
@media (max-width:980px){ .gal-grid{ grid-template-columns:1fr; max-width:640px; margin-inline:auto } }

.gal-card{ border:1px solid var(--line-ink); border-radius:10px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column }
.gal-card-media{ aspect-ratio:16/10; position:relative }
.gal-card-media img{ width:100%; height:100%; object-fit:cover }
.gal-card-body{ padding:24px 26px 28px; display:flex; flex-direction:column; gap:14px; flex:1 }
.gal-card-body .mono{ color:var(--navy) }
.gal-card-body h2{ font-size:1.5rem }
.gal-card-body .signal{ font-size:.92rem; color:var(--ink-dim); line-height:1.55 }
.gal-card-body .logo-line{ font-size:.86rem; color:var(--ink-dim); line-height:1.55; border-top:1px solid var(--line-ink); padding-top:14px; margin-top:auto }
.gal-card-body .logo-line b{ color:var(--ink-txt) }
.gal-card-actions{ margin-top:6px }
.gal-card-actions .btn{ width:100% }

.gal-rec{ margin-block:clamp(48px,7vh,80px); padding:clamp(32px,4.5vw,48px); border-radius:12px;
  background:var(--ink); color:var(--txt) }
.gal-rec .kicker{ color:#5CB3EF }
.gal-rec h2{ font-size:clamp(1.6rem,2.8vw,2.2rem); max-width:28ch; color:#fff }
.gal-rec p{ margin-top:16px; max-width:70ch; color:var(--txt-dim); line-height:1.65 }