/* Multi-page extensions — same tokens, radii, type, and motion as site.css */

.site-nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px;
}
.site-nav a.ctrl{
  text-decoration:none;
}
.site-nav a.ctrl.is-active{
  border-color:var(--gold); color:var(--gold);
}

.menu-toggle{display:none; width:40px; height:40px; padding:0; justify-content:center; font-size:1.05rem}

@media (max-width:980px){
  .topbar{flex-wrap:wrap; gap:12px}
  .brand{order:1}
  .menu-toggle{display:inline-flex; order:2}
  .controls{order:3}
  .site-nav{
    order:4; width:100%; flex-direction:column; align-items:stretch; gap:8px;
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .topbar.nav-open .site-nav{max-height:70vh; overflow-y:auto; padding-top:6px}
  .site-nav a.ctrl{width:100%; justify-content:center}
}

.hero.hero-page{
  min-height:auto;
  padding-block:140px 56px;
}
.hero-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:22px; position:relative;
}

.proj-logo{
  display:block; margin:0 auto 22px; width:auto; height:88px; max-width:220px;
  object-fit:contain; position:relative;
}

.copy-clamp{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.page-block{max-width:62ch}
.page-block p{color:var(--ink-2)}

.case-study{padding-top:42px}
.case-grid{
  display:grid; gap:18px; margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.case-card{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow);
  padding:24px 22px;
}
.case-num{
  color:var(--gold); font-family:var(--display-en);
  font-size:1.35rem; font-weight:600; line-height:1;
}
.case-card h3{margin-top:14px}
.case-card p{margin-top:8px; color:var(--ink-2); font-size:.93rem}
.case-updates{
  margin-top:22px; padding:26px 28px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2);
}
.case-updates h3{margin-bottom:14px}
.case-updates ul{margin:0; padding-inline-start:22px; color:var(--ink-2)}
.case-updates li{margin:8px 0}
.case-lesson{
  margin:26px 0 0; padding:22px 26px;
  border-inline-start:4px solid var(--gold);
  background:var(--gold-faint); color:var(--ink);
  border-radius:calc(var(--r) - 6px); font-size:1rem; font-weight:500;
}

/* Extended case-study sections (structured, multi-section case study) */
.case-bullets, .role-list{
  margin-top:28px; padding:0; list-style:none;
  display:grid; gap:14px;
}
.case-bullets li, .role-list li{
  position:relative; padding-inline-start:32px;
  color:var(--ink-2); font-size:.98rem; line-height:1.75;
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface); padding:16px 18px 16px 18px;
  box-shadow:var(--shadow);
}
html[dir="rtl"] .case-bullets li, html[dir="rtl"] .role-list li{padding-inline-start:38px}
.case-bullets li::before{
  content:"—"; position:absolute; inset-inline-start:16px; top:16px;
  color:var(--gold); font-weight:700;
}
.role-list{counter-reset:role-step}
.role-list li{counter-increment:role-step}
.role-list li::before{
  content:counter(role-step,decimal-leading-zero); position:absolute; inset-inline-start:14px; top:15px;
  color:var(--gold); font-family:var(--display-en); font-weight:600; font-size:.82rem;
}
.tags-row{margin-top:26px}
.tag-pill{background:var(--surface-2)}

.gallery{
  display:grid; gap:22px; margin-top:42px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.gallery figure{margin:0}
.gallery img{
  width:100%; height:220px; object-fit:cover; display:block;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow);
}
.gallery figcaption{
  margin-top:10px; font-size:.78rem; color:var(--ink-3);
  font-family:var(--head); letter-spacing:.08em;
}

.cert-card{
  display:flex; flex-direction:column; min-height:100%;
  text-align:start;
}
.cert-card.is-featured{
  grid-column:1/-1;
  display:grid; grid-template-columns:minmax(280px,.95fr) minmax(280px,1.05fr);
  gap:24px; align-items:start;
}
.cert-card.is-featured .cert-media{margin-bottom:0}
.cert-content{display:flex; flex-direction:column; align-items:flex-start}
.cert-title-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%}
.cert-title-row h3{margin:0}
.cert-status-badge{
  display:inline-flex; align-items:center; flex:0 0 auto;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-3);
  border-radius:999px; padding:5px 14px;
  font-family:var(--head); font-size:.72rem; font-weight:600; letter-spacing:.06em;
  white-space:nowrap;
}
.cert-org-row{display:flex; align-items:center; gap:10px; margin-top:4px}
.cert-org-row .org{margin:0}
.cert-org-logo{
  flex:0 0 auto; width:auto; max-width:72px; height:auto; max-height:32px;
  object-fit:contain; display:block;
}
.cert-card .org{color:var(--ink-3); font-size:.9rem; margin:4px 0 0}
.cert-desc{color:var(--ink-2); margin-top:12px; font-size:.94rem}
.cert-pending-note{
  width:100%; margin-top:16px; padding:13px 16px;
  border:1px dashed var(--line); border-radius:14px;
  background:var(--surface-2); color:var(--ink-2); text-align:center;
  font-family:var(--head); font-size:.86rem; font-weight:600; letter-spacing:.01em;
}
.cert-meta{
  display:grid; gap:8px; width:100%; margin-top:16px;
}
.cert-meta span{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;
  padding:8px 10px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-2);
}
.cert-meta b{color:var(--gold); font-family:var(--head); font-size:.78rem}
.cert-meta em{font-style:normal; color:var(--ink-2); font-size:.86rem}

.cert-media{
  width:100%; aspect-ratio:4/3; border-radius:var(--r); border:1px solid var(--line);
  background:var(--surface); margin-bottom:12px; overflow:hidden;
  display:grid; place-items:center;
}
.cert-media img{width:100%; height:100%; object-fit:contain; display:block; background:#fff}
.cert-media .cert-placeholder{
  color:var(--ink-3); font-size:.82rem; text-align:center; padding:16px;
  font-family:var(--head); letter-spacing:.04em;
}
.cert-media .cert-placeholder-pending{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.cert-pending-icon{font-size:1.7rem; line-height:1}
.cert-verify{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:16px;
  color:var(--gold); font-family:var(--head); font-size:.78rem; font-weight:600;
  letter-spacing:.08em; text-decoration:none;
}
.cert-verify::after{content:"↗"; font-size:.85rem}
.cert-tracks{
  width:100%; margin-top:18px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface-2); overflow:hidden;
}
.cert-tracks summary{
  cursor:pointer; padding:14px 16px; color:var(--gold);
  font-family:var(--head); font-weight:600; list-style-position:inside;
}
.cert-tracks-grid{
  display:grid; gap:12px; padding:0 14px 14px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.cert-track{
  border:1px solid var(--line); border-radius:14px;
  background:var(--surface); padding:16px 15px;
}
.cert-track-label{
  color:var(--gold); font-family:var(--head);
  font-size:.74rem; font-weight:600;
}
.cert-track h4{margin-top:6px; color:var(--ink)}
.cert-track p{margin-top:7px; color:var(--ink-2); font-size:.86rem}
.cert-track ul{
  margin:10px 0 0; padding-inline-start:20px;
  color:var(--ink-2); font-size:.84rem;
}
.cert-track li{margin:4px 0}

.cert-related{
  width:100%; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--line);
}
.cert-related-title{
  margin:0 0 10px; color:var(--ink);
  font-size:.95rem; font-family:var(--head); font-weight:600;
}
.cert-related-grid{
  display:grid; gap:0 18px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.cert-related-item{
  display:flex; flex-direction:column; gap:5px;
  padding:13px 0; border-bottom:1px solid var(--line);
  color:inherit; text-decoration:none;
}
.cert-related-item[href]:hover strong{color:var(--gold)}
.cert-related-issuer{
  color:var(--gold); font-family:var(--head);
  font-size:.74rem; font-weight:600;
}
.cert-related-item strong{
  color:var(--ink); line-height:1.35;
  transition:color .2s ease;
}
.cert-related-item[href] strong::after{
  content:"↗"; display:inline-block; margin-inline-start:6px;
  color:var(--gold); font-size:.78em;
}
.cert-related-item em{
  color:var(--ink-3); font-style:normal; font-size:.78rem;
}
.cert-related-item p{
  margin:2px 0 0; color:var(--ink-2); font-size:.84rem;
}

/* Licenses — distinguished single-column layout (fewer, higher-weight items) */
.licenses-list{
  display:flex; flex-direction:column; gap:24px;
  max-width:840px; margin:0 auto;
}
.license-card{
  display:grid; grid-template-columns:96px 1fr; gap:26px; align-items:start;
  padding:36px 34px; position:relative; overflow:hidden;
}
.license-emblem{
  width:96px; height:96px; border-radius:50%; flex:0 0 auto;
  padding:3px; box-sizing:border-box;
  background:linear-gradient(140deg,var(--gold-soft),var(--gold) 55%,#8a6418);
  box-shadow:0 10px 24px -12px rgba(184,137,42,.55);
}
.license-emblem-inner{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background:var(--surface); display:grid; place-items:center;
  font-size:2.1rem;
}
.license-emblem-inner img{width:100%; height:100%; object-fit:contain; padding:12px; background:#fff}
.license-content{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0}
.license-num{
  font-family:var(--display-en); color:var(--gold); font-size:.82rem;
  font-weight:600; letter-spacing:.14em; opacity:.75;
}
.license-title-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:100%; margin-top:2px}
.license-title-row h3{margin:0; font-size:1.22rem}
.license-status-badge{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  border-radius:999px; padding:5px 14px; background:var(--gold-faint); color:var(--gold);
  font-family:var(--head); font-size:.72rem; font-weight:600; letter-spacing:.05em; white-space:nowrap;
}
.license-status-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold)}
.license-org{color:var(--ink-3); font-size:.9rem; margin:0}
.license-desc{color:var(--ink-2); font-size:.95rem; margin-top:2px}
.license-stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.license-meta{display:flex; flex-wrap:wrap; gap:10px; width:100%; margin-top:6px}
.license-meta span{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;
  padding:8px 12px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface-2);
}
.license-meta b{color:var(--gold); font-family:var(--head); font-size:.76rem}
.license-meta em{font-style:normal; color:var(--ink-2); font-size:.85rem}
.license-verify-btn{margin-top:10px; padding:11px 24px; font-size:.85rem}
@media (max-width:640px){
  .license-card{grid-template-columns:64px 1fr; gap:18px; padding:26px 22px}
  .license-emblem{width:64px; height:64px}
  .license-emblem-inner{font-size:1.5rem}
}

.badge-media{aspect-ratio:auto; height:300px; overflow:visible}

/* Badges grid — 3 / 2 / 1 columns */
.badges-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){
  .badges-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .badges-grid{grid-template-columns:1fr}
}

/* Badge card — whole card is a link */
.badge-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none; color:inherit; cursor:pointer;
}
.badge-media-wrap{
  width:100%; display:flex; justify-content:center; align-items:center;
  min-height:120px; margin-bottom:16px;
}
.badge-media-wrap img{
  width:auto; max-width:150px; max-height:150px; object-fit:contain; display:block;
}
.badge-card h3{margin:0; font-size:1.08rem; line-height:1.4}
.badge-org{
  color:var(--ink-3); font-size:.82rem; margin:6px 0 0; opacity:.85;
}
.badge-skills{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-top:16px; width:100%;
}
.badge-skill-pill{
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2);
  font-size:.75rem; padding:5px 13px; border-radius:999px; white-space:nowrap;
}
.badges-cta{justify-content:center; margin-top:36px}

/* Staggered reveal animation for badge cards */
.reveal-stagger{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal-stagger.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-stagger{opacity:1; transform:none; transition:none}
}

@media (max-width:820px){
  .cert-card.is-featured{grid-template-columns:1fr}
  .cert-card.is-featured .cert-media{margin-bottom:4px}
}

body.inner footer{padding-bottom:48px}

.section-cta{margin-top:28px; display:flex; flex-wrap:wrap; gap:12px}

/* Contact hub — large visual spaces for social platforms */
.contact-hero .lead{max-width:680px}
.contact-socials{padding-top:54px}
.social-showcase{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px; margin-top:42px;
}
.social-card{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow);
  overflow:hidden; color:inherit; text-decoration:none;
  transition:transform .4s ease,border-color .4s ease;
}
.social-card[href]{cursor:pointer}
.social-card:hover{transform:translateY(-5px); border-color:color-mix(in srgb,var(--gold) 62%,var(--line))}
.social-media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--surface-2);
}
.social-media img{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.social-card:hover .social-media img{transform:scale(1.025)}
.social-image-label{
  position:absolute; inset-inline-start:16px; bottom:14px;
  padding:7px 12px; border-radius:999px;
  color:#fff; background:rgba(0,0,0,.58); backdrop-filter:blur(8px);
  font-family:var(--head); font-size:.7rem; letter-spacing:.02em;
}
.social-card[href] .social-image-label{display:none}
.social-card-body{
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:22px 24px;
}
.social-card-body h3{font-size:1.1rem}
.social-card-body span{
  color:var(--ink-3); font-family:var(--head);
  font-size:.76rem; text-align:end;
}
.contact-direct{padding-top:74px}
.contact-direct .lead{max-width:700px}
.contact-direct-links{margin-top:34px}
.contact-location{cursor:default}

@media (max-width:760px){
  .social-showcase{grid-template-columns:1fr}
  .social-card-body{align-items:flex-start; flex-direction:column; gap:5px}
  .social-card-body span{text-align:start}
}