/* Black Stallion public site — built on the Black Stallion Design System (assets/css/ds).
   Rules kept from the DS: Midnight surfaces for brand moments, cyan only on Midnight,
   one primary button per screen, 2px/4px radii, diamonds instead of numbers or icons. */

@import url('/assets/fonts/ds/fonts.css');
@import url('/assets/fonts/inter.css');

:root {
    /* Jost / IBM Plex Sans / Cormorant first (as in the admin); Inter ships locally as fallback. */
    --bs-font-display: 'Jost', Inter, system-ui, sans-serif;
    --bs-font-body: 'IBM Plex Sans', Inter, system-ui, sans-serif;

    --wrap: 1180px;
    --gutter: clamp(20px, 5vw, 48px);
    --nav-h: 72px;
    --edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}

html { scroll-behavior: smooth; }
html[lang=ta] { --bs-font-body: Arial, sans-serif; --bs-font-display: Arial, sans-serif; }
html[lang=ar] { --bs-font-body: Tahoma, Arial, sans-serif; --bs-font-display: Tahoma, Arial, sans-serif; }

body { font-size: 16px; line-height: 1.65; }
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
p, .bs-muted { color: var(--bs-text-2); }
h1 { font: 500 clamp(2.1rem, 4.6vw, 3.5rem)/1.08 var(--bs-font-display); letter-spacing: -.02em; }
h2 { font: 500 clamp(1.6rem, 2.8vw, 2.25rem)/1.2 var(--bs-font-display); letter-spacing: -.01em; }
h3 { font: 500 1.2rem/1.35 var(--bs-font-display); }

main { padding-top: var(--nav-h); }

/* Brand surfaces: heading and text colors */
.bs-surface-brand h1,
.bs-surface-brand h2,
.bs-surface-brand h3 { color: var(--bs-on-dark); }
.bs-surface-brand p { color: var(--bs-on-dark-2); }

/* Section rhythm */
.section {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
    padding-block: clamp(56px, 8vw, 104px);
}

.section--white { background: var(--bs-white); border-block: 1px solid var(--bs-line); }

.section-head { max-width: 44rem; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { margin-top: 14px; font-size: 1.05rem; }

/* Navbar: Midnight, like the admin sidebar */

.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: var(--nav-h);
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--bs-midnight);
    border-bottom: 1px solid var(--bs-navy-800);
}

.logo { display: flex; align-items: center; gap: var(--bs-space-3); color: var(--bs-white); text-decoration: none; flex-shrink: 0; }
.logo:hover { color: var(--bs-white); }
.logo img { width: 32px; height: 32px; object-fit: contain; }
.logo .bs-wordmark { font-size: 13px; letter-spacing: .32em; white-space: nowrap; }

.nav-menu { display: flex; align-items: center; gap: 2px; margin-inline: auto; }

.nav-link,
.mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--bs-radius-1);
    background: none;
    color: var(--bs-on-dark-2);
    font: 500 14px var(--bs-font-display);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bs-motion-fast) var(--bs-ease), color var(--bs-motion-fast) var(--bs-ease);
}

.nav-link:hover,
.mega-trigger:hover,
.mega-parent:focus-within .mega-trigger { background: var(--bs-navy-800); color: var(--bs-white); }

.nav-link:focus-visible,
.mega-trigger:focus-visible,
.language-button:focus-visible,
.mobile-toggle:focus-visible { outline: 2px solid var(--bs-cyan-500); outline-offset: 2px; }

.chev { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }

.mobile-cta { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; }

.language-button,
.mobile-toggle {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #33406a;
    border-radius: var(--bs-radius-1);
    background: transparent;
    color: var(--bs-white);
    cursor: pointer;
}

.language-button:hover,
.mobile-toggle:hover { border-color: var(--bs-steel-300); }
.mobile-toggle { display: none; }
.lang-flag { width: 24px; height: 17px; object-fit: cover; border-radius: 1px; }

.bars,
.bars::before,
.bars::after { display: block; width: 18px; height: 1.5px; background: var(--bs-white); }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
.menu-open .bars { background: transparent; }
.menu-open .bars::before { top: 0; transform: rotate(45deg); }
.menu-open .bars::after { top: 0; transform: rotate(-45deg); }

/* Menus: DS .bs-menu look */

.mega-parent { position: relative; }

.mega-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-start: 0;
    min-width: 320px;
    padding: 6px;
    background: var(--bs-white);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-2);
    box-shadow: var(--bs-shadow-1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--bs-motion-base) var(--bs-ease), transform var(--bs-motion-base) var(--bs-ease), visibility var(--bs-motion-base);
}

.mega-menu::before { content: ""; position: absolute; inset: -8px 0 auto; height: 8px; }
.mega-parent:hover .mega-menu,
.mega-parent:focus-within .mega-menu { visibility: visible; opacity: 1; transform: none; }

.mega-menu a { display: block; padding: 10px 12px; border-radius: var(--bs-radius-1); color: var(--bs-text); text-decoration: none; }
.mega-menu a:hover { background: var(--bs-mist); color: var(--bs-text); }
.mega-menu strong { display: block; font: 500 14px var(--bs-font-display); }
.mega-menu span { display: block; margin-top: 2px; font: var(--bs-text-small); color: var(--bs-text-2); }
.company-menu { min-width: 200px; }

.language-sheet {
    position: fixed;
    top: calc(var(--nav-h) + 6px);
    inset-inline-end: var(--gutter);
    z-index: 120;
    width: min(300px, calc(100vw - 24px));
    background: var(--bs-white);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-2);
    box-shadow: var(--bs-shadow-1);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--bs-motion-base) var(--bs-ease), visibility var(--bs-motion-base);
}

.language-sheet.active { visibility: visible; opacity: 1; }

.language-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--bs-line-soft); font: var(--bs-text-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-text-2); }
.language-close { border: 0; background: none; font-size: 1.4rem; line-height: 1; color: var(--bs-text-2); cursor: pointer; }

.language-sheet-list { max-height: min(70dvh, 460px); overflow: auto; padding: 6px; }
.language-sheet-list a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: var(--bs-radius-1); color: var(--bs-text); text-decoration: none; font: 400 14px var(--bs-font-body); }
.language-sheet-list a:hover { background: var(--bs-mist); }
.language-sheet-list a.active { font-weight: 500; }
.language-sheet-list .tick { margin-inline-start: auto; width: 7px; height: 7px; background: var(--bs-cyan-700); transform: rotate(45deg); }

.mobile-overlay { display: none; }

/* Hero */

.hero { padding: clamp(64px, 9vw, 120px) var(--edge) clamp(56px, 7vw, 88px); }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, 1fr); gap: clamp(40px, 7vw, 104px); align-items: end; }

.hero-facet { border: 1px solid rgba(143, 176, 214, .18); }
.hero-facet--a { width: 340px; height: 340px; inset-inline-end: -150px; top: -190px; }
.hero-facet--b { width: 200px; height: 200px; inset-inline-end: 120px; bottom: -150px; opacity: .6; }

.hero-kicker { margin-bottom: 20px; font: 500 12px var(--bs-font-display); letter-spacing: .24em; text-transform: uppercase; color: var(--bs-cyan-500); }
.hero h1 { font: var(--bs-text-display); font-size: clamp(2.2rem, 5.2vw, 3.5rem); letter-spacing: -.02em; max-width: 14em; }
.hero-lede { max-width: 36rem; margin-top: 22px; font-size: 1.1rem; line-height: 1.6; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero-facts { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--bs-navy-700); }
.hero-facts .bs-figure { padding-block: 18px; border-bottom: 1px solid var(--bs-navy-800); }
.hero-facts .bs-figure__label { margin: 0; color: var(--bs-on-dark-2); }
.hero-facts .bs-figure__value { margin: 4px 0 0; color: var(--bs-white); }

/* Hero extras */

.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--bs-navy-800); }
.hero-trust li { display: flex; align-items: center; gap: 10px; font: var(--bs-text-small); color: var(--bs-on-dark-2); }
.hero-trust li::before { content: ""; width: 6px; height: 6px; background: var(--bs-cyan-500); transform: rotate(45deg); }

/* Why: intro left, ruled grid right */

.why { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 104px); align-items: start; }
.why-intro { position: sticky; top: calc(var(--nav-h) + 32px); }
.why-intro p { margin: 16px 0 20px; font-size: 1.05rem; }
.why-intro .bs-btn--quiet { padding-inline: 0; }
.why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--bs-space-8); }
.why-item { padding: 24px 0 36px; border-top: 2px solid var(--bs-navy-900); }
.why-item h3 { margin-bottom: 10px; }
.why-item p { font-size: .97rem; }

/* Services: tiles */

.service-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-space-4); }

.service-tile {
    display: flex;
    flex-direction: column;
    padding: var(--bs-space-6);
    background: var(--bs-mist);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-2);
    color: var(--bs-text);
    text-decoration: none;
    transition: border-color var(--bs-motion-base) var(--bs-ease), background var(--bs-motion-base) var(--bs-ease), box-shadow var(--bs-motion-base) var(--bs-ease);
}

.service-tile:hover { background: var(--bs-white); border-color: var(--bs-navy-900); box-shadow: var(--bs-shadow-1); color: var(--bs-text); }
.service-tile:focus-visible { outline: 2px solid var(--bs-cyan-700); outline-offset: 3px; }

.service-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 28px; background: var(--bs-navy-900); color: var(--bs-white); border-radius: var(--bs-radius-1); transition: background var(--bs-motion-base) var(--bs-ease); }
.service-tile:hover .service-tile__icon { background: var(--bs-cyan-700); }
.bs-icon { width: 24px; height: 24px; }

.service-tile h3 { margin-bottom: 8px; }
.service-tile p { flex: 1; font-size: .95rem; }
.service-tile__link { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--bs-line); font: 500 14px var(--bs-font-display); color: var(--bs-cyan-700); }
.service-tile__link::after,
.service-card a::after { content: " \2192"; }
[dir=rtl] .service-tile__link::after,
[dir=rtl] .service-card a::after { content: " \2190"; }

/* Process: a line with diamond nodes, no numbers */

.process-list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bs-space-8); }
.process-list::before { content: ""; position: absolute; inset-inline: 0; top: 4px; height: 1px; background: var(--bs-steel-300); }
.process-list li { position: relative; padding-top: 36px; }
.process-list li::before,
.steps li::before { content: ""; display: block; width: 9px; height: 9px; background: var(--bs-navy-900); transform: rotate(45deg); }
.process-list li::before { position: absolute; top: 0; inset-inline-start: 0; box-shadow: 0 0 0 6px var(--bs-mist); }
.process-list h3 { margin-bottom: 8px; }
.process-list p { max-width: 24rem; }

/* Careers: navy block */

.career-wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto clamp(56px, 8vw, 104px); }
.career-preview { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(32px, 5vw, 64px); background: var(--bs-navy-900); border-radius: var(--bs-radius-2); }
.career-preview > :not(.bs-facet) { position: relative; z-index: 1; }
.career-preview p { max-width: 36rem; margin-top: 12px; }
.career-facet { width: 260px; height: 260px; inset-inline-end: -90px; top: -150px; border: 1px solid rgba(143, 176, 214, .22); }

/* Closing CTA */

.cta-band { padding: clamp(56px, 8vw, 96px) var(--edge); }
.cta-band__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 7vw, 96px); align-items: end; }
.cta-band h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 16em; }
.cta-band p { margin-bottom: 24px; }
.cta-facet { width: 280px; height: 280px; inset-inline-end: -120px; top: -150px; border: 1px solid rgba(143, 176, 214, .18); }

/* Inner pages */

.page-hero,
.service-detail-hero { padding: clamp(48px, 7vw, 88px) var(--edge) clamp(40px, 5vw, 64px); }
.page-hero h1,
.service-detail-hero h1 { max-width: 16em; }
.page-hero p,
.service-detail-hero p { max-width: 38rem; margin-top: 16px; font-size: 1.1rem; }
.service-detail-inner { width: auto; }

.back-link { display: inline-block; margin-bottom: 28px; font: 500 14px var(--bs-font-display); color: var(--bs-on-dark-2); text-decoration: none; }
.back-link::before { content: "\2190  "; }
[dir=rtl] .back-link::before { content: "\2192  "; }
.back-link:hover { color: var(--bs-white); }

.inner,
.split-section,
.single-section,
.service-detail-grid,
.service-page-cta,
.cta-section {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
}

.inner,
.split-section,
.single-section { padding-block: clamp(40px, 6vw, 72px); }

.split-section { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); }

.panel { max-width: 44rem; }
.panel h2 { margin-bottom: 14px; }
.panel p + p { margin-top: 1em; }

.steps { align-self: start; border-top: 1px solid var(--bs-line); }
.steps li { padding-block: 18px; border-bottom: 1px solid var(--bs-line); font: 500 1.1rem/1.35 var(--bs-font-display); }
.steps li::before { margin-bottom: 10px; }

.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-space-4); }
.service-card { padding: var(--bs-space-6); background: var(--bs-white); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-2); }
.service-card h3 { margin-bottom: 8px; }
.service-card p { margin-bottom: 14px; }
.service-card a { font: 500 14px var(--bs-font-display); }

.Contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); }

.legal-copy { max-width: 52rem; padding: var(--bs-space-8); background: var(--bs-white); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-2); line-height: 1.85; }
.legal-copy p { margin-block: 1rem; }
.legal-copy a { overflow-wrap: anywhere; }
.legal-copy address { font-style: normal; }

/* Service detail pages */

.service-detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); padding-block: clamp(40px, 6vw, 72px); }
.service-detail-content { width: auto; padding: 0; }
.detail-card h2 { margin-bottom: 14px; }
.detail-card p { font-size: 1.05rem; }

.detail-list { border-top: 1px solid var(--bs-line); }
.detail-list li { position: relative; padding: 16px 0 16px 24px; border-bottom: 1px solid var(--bs-line); color: var(--bs-text); }
.detail-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1.5em; width: 7px; height: 7px; background: var(--bs-cyan-700); transform: rotate(45deg); }
[dir=rtl] .detail-list li { padding: 16px 24px 16px 0; }

.service-page-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: clamp(48px, 7vw, 88px); padding: var(--bs-space-8); background: var(--bs-white); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-2); }
.service-page-cta h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.service-page-cta p { max-width: 36rem; margin-top: 8px; }

/* Shared form block on inner pages */

.cta-section.compact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); margin-bottom: clamp(48px, 7vw, 88px); padding: clamp(24px, 4vw, 48px); background: var(--bs-white); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-2); }
.cta-section.compact p { margin-top: 10px; }

/* Forms (DS .bs-field / .bs-control) */

.lead-form { display: grid; gap: var(--bs-space-5); }
.lead-form .bs-control { margin-top: 6px; }
.lead-form select { cursor: pointer; }
.lead-form .bs-control:has(select)::after { content: ""; width: 6px; height: 6px; margin-inline-end: var(--bs-space-3); border-right: 1.5px solid var(--bs-text-2); border-bottom: 1.5px solid var(--bs-text-2); transform: translateY(-2px) rotate(45deg); pointer-events: none; }
.lead-form button { justify-self: start; }
.lead-form button:disabled { opacity: .6; cursor: wait; }
.form-trap { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-notice { font: var(--bs-text-small); }
.form-result { font-size: .95rem; color: var(--bs-text); }
.form-result:empty { display: none; }

/* Footer: Midnight */

.footer { border-top: 1px solid var(--bs-navy-800); padding: clamp(48px, 7vw, 80px) var(--edge) 28px; background: var(--bs-midnight); color: var(--bs-on-dark-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(28px, 5vw, 64px); }
.footer .footer-brand { margin-bottom: 14px; color: var(--bs-white); font-size: 13px; letter-spacing: .32em; }
.footer p { color: var(--bs-on-dark-2); font-size: .93rem; max-width: 24rem; }
.footer h4 { margin-bottom: 14px; font: 500 12px var(--bs-font-display); letter-spacing: .12em; text-transform: uppercase; color: #7f8bab; }
.footer-grid a { display: block; padding-block: 5px; font-size: .93rem; color: var(--bs-on-dark-2); text-decoration: none; }
.footer-grid a:hover { color: var(--bs-white); }
.footer-bottom { margin-top: clamp(36px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--bs-navy-800); }
.footer-bottom p { font: var(--bs-text-small); color: #7f8bab; }

/* Tablet / mobile */

@media (max-width: 1100px) {
    .mobile-toggle { display: grid; }
    .nav-cta { display: none; }

    .nav-menu {
        position: fixed;
        top: var(--nav-h);
        inset-inline: 0;
        max-height: calc(100dvh - var(--nav-h));
        overflow: auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 8px var(--gutter) 24px;
        background: var(--bs-midnight);
        border-bottom: 1px solid var(--bs-navy-800);
    }

    .nav-menu.active { display: flex; }

    .nav-link,
    .mega-trigger { width: 100%; height: 52px; padding: 0 4px; justify-content: space-between; border-bottom: 1px solid var(--bs-navy-800); border-radius: 0; font-size: 16px; color: var(--bs-white); }

    .mega-menu { position: static; min-width: 0; padding: 0 0 8px; border: 0; background: none; box-shadow: none; visibility: visible; opacity: 1; transform: none; display: none; }
    .mega-parent.open .mega-menu { display: block; }
    .mega-parent.open .chev { transform: translateY(2px) rotate(-135deg); }
    .mega-menu a { padding: 12px 12px; color: var(--bs-on-dark-2); }
    .mega-menu a:hover { background: var(--bs-navy-800); color: var(--bs-white); }
    .mega-menu strong { color: var(--bs-white); }
    .mega-menu span { color: #7f8bab; }

    .mobile-cta { display: inline-flex; margin-top: 20px; }
}

@media (max-width: 900px) {
    .hero-in,
    .cta-band__in,
    .split-section,
    .cta-section.compact,
    .Contact-layout,
    .service-detail-grid { grid-template-columns: 1fr; }

    .hero-in { align-items: start; }
    .why { grid-template-columns: 1fr; }
    .why-intro { position: static; }
    .service-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .service-grid { grid-template-columns: 1fr; }
    .process-list { grid-template-columns: 1fr; gap: 0; }
    .process-list::before { inset-inline: auto; inset-inline-start: 4px; top: 4px; bottom: 0; width: 1px; height: auto; }
    .process-list li { padding: 0 0 32px 36px; }
    [dir=rtl] .process-list li { padding: 0 36px 32px 0; }
    .career-preview,
    .service-page-cta { flex-direction: column; align-items: flex-start; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    :root { --nav-h: 64px; }
    .logo .bs-wordmark { letter-spacing: .2em; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-buttons .bs-btn,
    .cta-band .bs-btn,
    .lead-form button { width: 100%; }
    .bs-form-grid { grid-template-columns: 1fr; }
    .service-tiles,
    .why-grid { grid-template-columns: 1fr; }
    .career-preview .bs-btn { width: 100%; }
}