@charset "utf-8"; /* AL ZOHRA TRAVEL & TOURS — services.html only. Loaded AFTER assets/css/style.css and scoped to . One component lives here: the contracted service-level table on the Corporate Travel Management section. Everything else on the page uses the shared design system. Tokens only — no hard-coded colours. */ /* ---- Brand correction: numbered list on an ink-900 ground ----------- The shared .list-num counter prints --red-600, which is the display red. On the dark aviation section it must be --red-500 per the brand rules. Colour only — nothing else about the component changes. */ .p-services .section--dark .list-num > li::before { color: var(--red-500); } /* ---- SLA table ------------------------------------------------------ */ .p-services .sla-wrap { background: var(--paper); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; } .p-services .sla { width: 100%; border-collapse: collapse; } .p-services .sla__caption { caption-side: top; text-align: left; padding: clamp(1.15rem, 2.6vw, 1.75rem) clamp(1.15rem, 2.8vw, 1.9rem) 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); line-height: 1.35; letter-spacing: var(--ls-head); color: var(--ink-900); } .p-services .sla thead th { padding: var(--sp-5) clamp(1.15rem, 2.8vw, 1.9rem) var(--sp-3); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink-400); text-align: left; border-bottom: 1px solid var(--hairline); } .p-services .sla thead th + th { text-align: right; width: 34%; } .p-services .sla tbody th, .p-services .sla tbody td { padding: clamp(.95rem, 2.2vw, 1.35rem) clamp(1.15rem, 2.8vw, 1.9rem); border-top: 1px solid var(--hairline-soft); vertical-align: top; } .p-services .sla tbody th { text-align: left; font-weight: 400; } .p-services .sla tbody td { text-align: right; } .p-services .sla tbody tr:first-child th, .p-services .sla tbody tr:first-child td { border-top: 0; } .p-services .sla tbody tr { transition: background-color var(--t-fast) var(--ease-out); } .p-services .sla tbody tr:hover { background: var(--red-50); } .p-services .sla__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); line-height: 1.4; letter-spacing: var(--ls-head); color: var(--ink-900); } .p-services .sla__note { display: block; margin-top: .3rem; max-width: 62ch; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-500); } .p-services .sla__std { display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-cap); line-height: 1.4; color: var(--red-800); text-wrap: balance; }