/* SANABIL SHARED PRESENTATION RULES — 20 OCT 2026
   Consistent spacing, legible component text, logo frames and calls to action.
   Original programme palettes, authentic artwork and page-specific typography remain. */
:root {
  --sanabil-type-body: 16px;
  --sanabil-type-caption: 13px;
  --sanabil-type-card: 20px;
  --sanabil-type-section: clamp(28px,3.2vw,40px);
  --sanabil-radius: 14px;
}
html{scroll-behavior:smooth}
body{font-family:Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:Roboto,Arial,sans-serif}
img{height:auto}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid #198f8a;outline-offset:4px;
}
/* Unified footer: genuinely useful follow options, not a nonfunctional mailing list */
.footer-updates{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.footer-updates-link{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 15px;min-height:44px;border-radius:9px;
  background:linear-gradient(115deg,#148b80,#5765be);
  color:#fff!important;text-decoration:none!important;
  font-size:14px;font-weight:750;line-height:1.25;
}
.footer-updates-link:hover{filter:brightness(.94)}
.footer-updates-note{font-size:12px!important;line-height:1.55!important;color:#61767c!important;margin:0!important;max-width:28ch}
/* Main site: compact, balanced 2-panel discovery section now articles are not advertised */
.dashboard-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);align-items:stretch}
.dashboard-grid .panel{min-width:0}
.dashboard-grid .publications .books-mini{gap:15px}
/* Programme directory: identical frames even where the supplied media differ */
.academy-programmes-page .academy-card-art{
  height:176px;margin:18px 20px 0;padding:20px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.academy-programmes-page .academy-card-art img{object-fit:contain;object-position:center;max-width:100%;height:auto}
.academy-programmes-page .academy-art-wordmark img,
.academy-programmes-page .academy-art-traveller img{max-height:100px;max-width:88%}
.academy-programmes-page .academy-art-mantiq img,
.academy-programmes-page .academy-art-sanabil img{max-height:120px;max-width:150px}
.academy-programmes-page .academy-art-cover img{max-height:144px;max-width:96%;width:auto}
.academy-programmes-page .academy-card-main h3{font-size:21px;line-height:1.3;min-height:2.6em}
.academy-programmes-page .academy-card-description{font-size:16px;line-height:1.65}
.academy-programmes-page .academy-card-action{font-size:15px;min-height:50px}
.academy-programmes-page .academy-card-tag{font-size:13px}
/* IFXperts: one original wordmark at the top, one strong text-led hero. */
.page-ifxperts .hero h1{
  font-size:clamp(42px,4.9vw,62px);line-height:1.11;
  letter-spacing:-.045em;max-width:850px;
}
.page-ifxperts .hero h1 span{
  color:#23795e;letter-spacing:-.045em;font-size:.91em;
}
.page-ifxperts .hero-graphic{
  padding:31px 32px 32px;
  background:linear-gradient(135deg,#fff,#f5fbf7);
  box-shadow:0 20px 55px rgba(20,94,70,.07);
}
.page-ifxperts .ifx-panel-eyebrow{
  color:#227c5c;font-size:12px;font-weight:800;letter-spacing:.17em;
  margin:0 0 18px;
}
.page-ifxperts .ifx-panel-number{
  font-size:clamp(56px,6vw,88px);font-weight:850;
  letter-spacing:-.075em;line-height:1;color:#14573f;
}
.page-ifxperts .ifx-panel-title{
  color:#476a5e;font-size:18px;line-height:1.5;
  max-width:25ch;margin:11px 0 23px;
}
.page-ifxperts .ifx-panel-tags{display:flex;flex-wrap:wrap;gap:8px}
.page-ifxperts .ifx-panel-tags span{
  padding:7px 10px;border:1px solid #d9e8df;
  border-radius:999px;background:white;color:#376f59;
  font-size:12px;font-weight:650;
}
.page-ifxperts .package h3{font-size:21px;line-height:1.24}
.page-ifxperts .package p{font-size:15px;line-height:1.6}
.page-ifxperts .package .footnote{font-size:13px;line-height:1.55}
.page-ifxperts .package{gap:12px}
.page-ifxperts .btn{font-size:15px;min-height:48px}
.page-ifxperts .navback{font-size:14px}
/* Keep hero typography in a common scale while preserving individual personality */
.char-page .character-hero h1{font-size:clamp(50px,6vw,74px)}
.wisdom .hero h1{font-size:clamp(46px,5vw,70px)}
.mantiq .stage h3{font-size:clamp(23px,2.1vw,28px)}
.mantiq .stage .stage-description{font-size:16px}
.mantiq .stage .stage-status{font-size:13px;line-height:1.45}
.mantiq .stage .stage-link{font-size:14px}
.mantiq .button{font-size:15px}
.advisory-page .adv-service-card h3{font-size:clamp(21px,1.8vw,25px)}
/* Small programme navigation text stays readable */
.topnav .navaction,.site-nav .nav-action,.subsite-header .subsite-nav-action{font-size:14px}
@media(max-width:900px){
  .dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .page-ifxperts .hero h1{font-size:clamp(39px,10vw,48px)}
  .page-ifxperts .hero-graphic{padding:24px}
  .page-ifxperts .ifx-panel-number{font-size:63px}
  .academy-programmes-page .academy-card-art{height:158px}
  .footer-updates-link{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}