/* ==========================================================================
   Fast n Accurate Logistics
   Design system based on the Logico theme. Layout follows hnonefreight.com;
   the green accent is #35D612. Every blue surface on the page - header,
   footer, dark strips and image scrims - is the single FNA logo
   blue #3369AB sampled from FNA-Logo-PNG_2.png. Only near-black heading ink
   stays darker so body copy remains readable on white.
   ========================================================================== */

:root {
    --brand-blue: #3369AB;      /* sampled from FNA-Logo-PNG_2.png */
    --brand-blue-dark: #3369AB;
    --brand-green: #35D612;
    --brand-green-hover: #2BB40F;

    --accent: #35D612;          /* hnonefreight accent green */
    --accent-hover: #2BB40F;

    --blue-rgb: 51, 105, 171;   /* #3369AB for scrims / translucent overlays */

    --dark: #0B1A2D;            /* heading + on-accent ink (near black) */
    --panel: #3369AB;           /* every dark panel / side panel / footer */
    --text: #2D2D2D;            /* body copy */
    --text-light: #6C7280;
    --white: #FFFFFF;
    --border: #E2E6EE;
    --bg-alt: #F5F7FB;

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --transition: all 0.3s ease;

    --container: 1330px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 34px;
    font-weight: 400;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font-family: var(--font-body); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--dark);
}

h1 {
    font-size: clamp(2.75rem, 6.6vw, 88px);
    line-height: 1.115;
    letter-spacing: -2.6px;
}

h2, .section-title {
    font-size: clamp(2.25rem, 5.1vw, 67px);
    line-height: 1.18;
    letter-spacing: -2px;
}

h3 { font-size: 27px; line-height: 1.3; letter-spacing: -0.5px; }
h4 { font-size: 20px; line-height: 1.3; }

/* --- Layout --- */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 110px 25px;
}

.section-alt { background: var(--bg-alt); }

.section-header-center {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 60px;
}

.section-header-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: flex-end;
    margin-bottom: 60px;
}
.section-header-split p { color: var(--text-light); }

/* One page per HTML file now; the wrapper only carries the page id for anchors */
.page-section { display: block; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14px;
    text-transform: none;
    cursor: pointer;
    border: 1px solid var(--accent);
    border-radius: 0;
    background: transparent;
    color: var(--white);
    transition: var(--transition);
    overflow: hidden;
}

/* Text sits in its own padded area, arrow sits in a filled square block */
.btn > span:not(.btn-icon-box),
.btn-label { padding: 14px 24px; }

.btn:not(:has(.btn-icon-box)) { padding: 14px 24px; }

.btn-icon-box {
    width: 50px;
    align-self: stretch;
    background: var(--accent);
    color: var(--dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    font-size: 0.85rem;
    transition: var(--transition);
}

/* FA6 Free has no arrow-up-right glyph; rotate a right arrow for the diagonal look */
.diagonal { transform: rotate(-45deg); }

.btn-accent { color: var(--white); }
.btn-accent:hover { background: var(--accent); color: var(--dark); }
.btn-accent:hover .btn-icon-box { background: var(--brand-blue); color: var(--white); }

.btn-dark {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--white);
    padding: 14px 28px;
}
.btn-dark:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); }

.btn-outline {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.4);
    padding: 14px 28px;
    gap: 10px;
}
.btn-outline:hover { background: var(--white); color: var(--dark); border-color: var(--white); }

/* --- Header --- */
header.site-header {
    background: var(--brand-blue);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    min-height: 86px;
    width: 100%;
}

.header-inner {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 0 0 40px;
    min-width: 0;
}

.brand-logo { height: 46px; width: auto; object-fit: contain; }

/* FNA-Logo-Light.png carries white lettering, so it sits straight on the blue bar */
.logo-link {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0 auto;
    list-style: none;
}

.nav-links > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: rgba(255,255,255,0.9);
    padding: 28px 0;
    position: relative;
    transition: var(--transition);
}
.nav-links > li > a i { font-size: 0.62rem; opacity: 0.85; }

.nav-links a:hover,
.nav-links a.active { color: var(--accent); }

.nav-links > li > a.active::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
}

/* Dropdowns */
.nav-item-dropdown { position: relative; }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 240px;
    padding: 12px 0;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    z-index: 1001;
}
.nav-item-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    display: block;
    padding: 10px 26px;
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    color: var(--text);
}
.dropdown-menu li a:hover { color: var(--brand-blue); }

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--white);
    cursor: pointer;
    padding: 10px;
}

/* Accent CTA: a pill centred in the bar rather than a slab flush to the corner */
.quote-btn-flush {
    background: var(--accent);
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 24px;
    font-size: 15px;
    font-weight: 600;
    /* matches the switch beside it; without it the body line-height makes the
       pill noticeably taller, and taller again in Arabic */
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    border-radius: 999px;
    flex-shrink: 0;
    align-self: center;
    /* logical, so the gap to the edge mirrors itself in Arabic */
    margin-inline-end: 22px;
    white-space: nowrap;
    transition: var(--transition);
}
/* Header bar is the logo blue, so hover reverses out rather than blending in */
.quote-btn-flush:hover { background: var(--white); color: var(--brand-blue); }

/* --- Hero --- */
.hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: center;
    background: url('../images/FNA_Freight_Forwarding_Service_Profile.pptx\ \(Facebook\ Cover\).png') center/cover no-repeat;
    color: var(--white);
    padding: 0;
    text-align: left;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--blue-rgb),0.75) 0%, rgba(var(--blue-rgb),0.45) 45%, rgba(var(--blue-rgb),0.15) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 120px 25px 190px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--accent);
    margin-bottom: 18px;
}

.hero h1 {
    color: var(--white);
    max-width: 900px;
    margin-bottom: 22px;
}

.hero p {
    font-size: 18px;
    line-height: 30px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 36px;
    max-width: 560px;
}

.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* --- Hero Info Bar (dark panel overlapping hero) --- */
.hero-info-bar {
    position: relative;
    z-index: 10;
    max-width: var(--container);
    width: 100%;
    margin: -110px auto 0;
    padding: 0 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.call-location-panel {
    background: var(--panel);
    color: var(--white);
    display: flex;
    justify-content: flex-start;
    gap: 60px;
    padding: 44px 50px;
    border-radius: 0;
    border: none;
}

.info-block { flex: 1; min-width: 0; }

.info-block h4 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--white);
    margin-bottom: 10px;
}

.info-block p {
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    line-height: 1.7;
}
.info-block a { color: rgba(255,255,255,0.85); }
.info-block a:hover { color: var(--accent); }

.track-panel {
    background: var(--white);
    padding: 44px 50px;
    border-radius: 0;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.track-panel h4 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.54px;
    text-transform: none;
    color: var(--dark);
    margin-bottom: 16px;
}

/* Icon square fills with the accent and the label picks up an underline sweep */
.track-email {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}

.track-email i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--brand-blue);
    background: var(--bg-alt);
    border: 1px solid var(--border);
    transition: var(--transition);
}

.track-email span {
    position: relative;
    padding-bottom: 3px;
}
.track-email span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.track-email:hover { color: var(--brand-blue); }
.track-email:hover span::after { transform: scaleX(1); }
.track-email:hover i {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--dark);
    transform: translateY(-2px);
}

.track-input-row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--white);
    max-width: 420px;
}

.track-input-row input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: 14px 18px;
    font-size: 16px;
    color: var(--text);
    background: transparent;
    border-radius: 0;
}

.track-input-row button {
    background: var(--accent);
    color: var(--dark);
    border: none;
    width: 54px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    flex-shrink: 0;
    transition: var(--transition);
}
.track-input-row button:hover { background: var(--brand-blue); color: var(--white); }

/* --- Stats --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: var(--container);
    width: 100%;
    margin: 90px auto 0;
    padding: 0 25px;
}

.stat-item {
    background: transparent;
    padding: 0 30px;
    text-align: left;
    border: none;
    border-left: 1px solid var(--border);
    border-radius: 0;
}
.stat-item:first-child { border-left: none; padding-left: 0; }

.stat-number {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 500;
    letter-spacing: -1.8px;
    color: var(--dark);
    line-height: 1.1;
    margin-bottom: 6px;
}
.stat-number span { color: var(--accent); }
.counter { color: var(--dark) !important; }

.stat-label {
    color: var(--text-light);
    font-size: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.5;
    display: block;
}

/* --- Services (Home overview) --- */
.services-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 130px;
    align-items: start;
}

/* Faint dotted map field behind the service list, as in the reference layout */
.services-layout::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 68%;
    height: 125%;
    background-image: radial-gradient(#D2D2D2 1.4px, transparent 1.5px);
    background-size: 15px 15px;
    -webkit-mask-image: radial-gradient(ellipse at 52% 50%, #000 32%, transparent 70%);
    mask-image: radial-gradient(ellipse at 52% 50%, #000 32%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.services-heading,
.services-list { position: relative; z-index: 1; }

.services-heading .section-title {
    text-transform: uppercase;
    font-size: clamp(2rem, 3.8vw, 56px);
    line-height: 1.14;
    letter-spacing: -1.4px;
    margin-bottom: 46px;
}

.all-services-btn {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14px;
    text-transform: none;
    color: var(--dark);
    background: var(--white);
    overflow: hidden;
}
.all-services-btn > span:not(.btn-icon-box) { padding: 16px 26px; display: inline-flex; align-items: center; }
.all-services-btn:hover { border-color: var(--accent); }
.all-services-btn:hover .btn-icon-box { background: var(--brand-blue); color: var(--white); }

.services-list { display: flex; flex-direction: column; }

.service-row {
    display: flex;
    gap: 42px;
    padding: 40px 0;
    border-bottom: 1px solid var(--border);
    align-items: center;
}
.service-row:first-child { padding-top: 0; }
.service-row:last-child { border-bottom: none; padding-bottom: 0; }

.service-row .icon {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    color: var(--brand-blue);
}
.service-row .icon svg { width: 100%; height: 100%; }

.service-row h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 14px;
    text-transform: none;
}
.service-row p {
    color: var(--text-light);
    font-size: 18px;
    line-height: 1.75;
    max-width: 34ch;
}

/* --- Services page cards --- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    transition: var(--transition);
}
.service-card:hover {
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.service-card-img { height: 240px; background-size: cover; background-position: center; }
.service-card-body { padding: 34px 30px; }
.service-card-body h3 { font-size: 24px; margin-bottom: 12px; text-transform: none; }
.service-card-body p { color: var(--text-light); font-size: 18px; line-height: 1.7; }

/* --- Fleet gallery --- */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.fleet-item {
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}
.fleet-item::after {
    content: attr(data-label);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* logo blue is lighter than the old navy, so the scrim carries more
       alpha to keep the white label at AA over bright photos */
    background: linear-gradient(transparent, rgba(var(--blue-rgb),0.92));
    color: var(--white);
    padding: 40px 24px 20px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
}

/* --- Brand strip --- */
.brand-strip {
    background: var(--bg-alt);
    padding: 40px 25px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    color: var(--text-light);
    font-weight: 600;
    font-size: 18px;
}
.brand-item { display: flex; align-items: center; gap: 10px; }
.brand-item i { color: var(--brand-blue); }

/* --- Blog --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.blog-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    transition: var(--transition);
}
.blog-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

.blog-img { height: 240px; background-size: cover; background-position: center; }
.blog-content { padding: 30px; }
.blog-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 14px;
}
.blog-meta i { color: var(--accent); margin-right: 6px; }
.blog-content h3 { font-size: 24px; margin-bottom: 12px; text-transform: none; }
.blog-content p { color: var(--text-light); font-size: 18px; margin-bottom: 20px; line-height: 1.7; }
.blog-link {
    font-weight: 600;
    color: var(--dark);
    font-size: 14px;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.blog-link:hover { color: var(--brand-blue); }

/* --- About --- */
.about-split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.about-image-wrapper { position: relative; }
.about-image-main { width: 100%; height: 520px; object-fit: cover; border-radius: 0; }

.experience-badge {
    position: absolute;
    bottom: 0;
    right: -20px;
    background: var(--accent);
    color: var(--dark);
    padding: 28px 34px;
    border-radius: 0;
    border: none;
    text-align: center;
}
.experience-badge .years {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -1.8px;
}
.experience-badge .text {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    margin-top: 6px;
}

.about-text h2 { margin-bottom: 24px; }
.about-text p { color: var(--text-light); margin-bottom: 18px; }

.feature-list { margin-top: 34px; display: flex; flex-direction: column; }
.feature-item {
    display: flex;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-light);
}
.feature-item strong { color: var(--dark); }
.feature-item i { color: var(--accent); font-size: 1.1rem; margin-top: 5px; }

/* --- Team --- */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}

/* Portrait fills the tile, the name plate sits on a frosted strip over the
   bottom of it and lifts on hover - the photos are headshots on white studio
   backgrounds, so the blue wash is what ties them to the rest of the page. */
.team-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    transition: var(--transition);
}
.team-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 24px 46px rgba(11,26,45,0.16);
}

.team-photo {
    height: 360px;
    background-size: cover;
    background-position: center 18%;
    transition: transform 0.5s ease;
}
.team-card:hover .team-photo { transform: scale(1.05); }

/* Sits above the portrait so the scrim never washes out the face */
.team-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    bottom: 0;
    background: linear-gradient(180deg, rgba(var(--blue-rgb),0) 0%, rgba(var(--blue-rgb),0.55) 55%, rgba(11,26,45,0.92) 100%);
    pointer-events: none;
    transition: var(--transition);
}
.team-card:hover::after { background: linear-gradient(180deg, rgba(var(--blue-rgb),0) 0%, rgba(var(--blue-rgb),0.65) 50%, rgba(11,26,45,0.96) 100%); }

.team-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 22px 24px 24px;
    text-align: left;
}
.team-info h4 {
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 8px;
    color: var(--white);
    text-transform: none;
}
.team-info span {
    display: flex;
    /* Roles that wrap to two lines keep the dash beside the first one */
    align-items: flex-start;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
}
/* Small accent dash instead of a bullet, matching the vm-card rules */
.team-info span::before {
    content: '';
    width: 18px;
    height: 2px;
    margin-top: 10px;
    flex-shrink: 0;
    background: var(--accent);
    transition: var(--transition);
}
.team-card:hover .team-info span::before { width: 30px; }

html[dir="rtl"] .team-info { text-align: right; }

/* Leadership card: full width above .team-grid, so the CEO reads a level up
   from the rest of the team instead of sitting as one tile among many */
.team-lead {
    display: grid;
    grid-template-columns: 360px 1fr;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 30px;
    transition: var(--transition);
}
.team-lead:hover {
    border-color: var(--accent);
    box-shadow: 0 24px 46px rgba(11,26,45,0.16);
}
.team-lead-photo {
    min-height: 420px;
    background-size: cover;
    background-position: center 18%;
}
.team-lead-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 54px;
    /* Same brand blue the grid cards fade into, so the two rows read as a set */
    background: var(--panel);
}
.team-lead-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}
.team-lead-eyebrow::before {
    content: '';
    width: 26px;
    height: 2px;
    background: var(--accent);
}
.team-lead-body h3 {
    font-size: 34px;
    line-height: 1.2;
    color: var(--white);
    text-transform: none;
    margin-bottom: 10px;
}
.team-lead-role {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: rgba(255,255,255,0.92);
}
.team-lead-role::before {
    content: '';
    width: 22px;
    height: 2px;
    margin-top: 12px;
    flex-shrink: 0;
    background: var(--accent);
    transition: var(--transition);
}
.team-lead:hover .team-lead-role::before { width: 34px; }
.team-lead-note {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
}

html[dir="rtl"] .team-lead-body { text-align: right; }

@media (max-width: 992px) {
    .team-lead { grid-template-columns: 1fr; }
    .team-lead-photo { min-height: 340px; }
    .team-lead-body { padding: 34px 28px; }
    .team-lead-body h3 { font-size: 28px; }
}

/* --- FAQ --- */
.faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; }
.faq-item {
    background: var(--white);
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}

/* The trigger is a real <button> so it is focusable and operable from the
   keyboard; these rules strip the UA button styling back to a plain row */
.faq-question {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 28px 0;
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: var(--dark);
    transition: var(--transition);
}
.faq-question:hover { color: var(--brand-blue); }
.faq-question:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 3px;
}

.faq-toggle {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(var(--blue-rgb), 0.1);
    color: var(--brand-blue);
    font-size: 0.8rem;
    transition: var(--transition);
}
.faq-question:hover .faq-toggle { background: rgba(var(--blue-rgb), 0.2); }
.faq-item.open .faq-toggle {
    background: var(--brand-blue);
    color: var(--white);
    transform: rotate(45deg);
}

/* 0fr -> 1fr animates to the answer's natural height without measuring it in
   JS. The padding has to live on the <p>, not on the clipping element, or it
   stays visible while collapsed. */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }

.faq-answer-inner {
    overflow: hidden;
    color: var(--text-light);
    font-size: 18px;
    line-height: 1.8;
}
.faq-answer-inner p { margin: 0; padding-bottom: 28px; }

/* Cards, for the FAQ that sits on the tinted section background where a
   flush hairline list has no edges to read against */
.faq-cards { gap: 14px; }
.faq-cards .faq-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: var(--transition);
}
.faq-cards .faq-item:hover { border-color: rgba(var(--blue-rgb), 0.45); }
.faq-cards .faq-item.open {
    border-color: var(--brand-blue);
    box-shadow: 0 14px 34px rgba(var(--blue-rgb), 0.13);
}
.faq-cards .faq-question { padding: 24px 28px; font-size: 20px; }
.faq-cards .faq-answer-inner p { padding: 0 28px 26px; }

@media (prefers-reduced-motion: reduce) {
    .faq-answer { transition: none; }
}

/* --- Process --- */
.process-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
}

.process-step {
    background: transparent;
    border-radius: 0;
    padding: 0 34px;
    border-left: 1px solid var(--border);
}
.process-step:first-child { border-left: none; padding-left: 0; }

.process-marker {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 500;
    letter-spacing: -1.8px;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 20px;
}
.process-step h3 { font-size: 24px; margin-bottom: 12px; text-transform: none; }
.process-step p { color: var(--text-light); font-size: 18px; line-height: 1.7; }

/* --- CTA banner --- */
.cta-banner {
    background: var(--panel);
    border-left: none;
    color: var(--white);
    padding: 70px 60px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.cta-banner h3 { color: var(--white); font-size: 40px; line-height: 1.2; letter-spacing: -1.2px; margin-bottom: 10px; }
.cta-banner p { color: rgba(255,255,255,0.85); font-size: 18px; }
.cta-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Testimonials --- */
.testimonial-wrapper { max-width: 900px; margin: 0 auto; }

.testimonial-card {
    display: none;
    background: var(--white);
    border: none;
    border-radius: 0;
    padding: 0;
    text-align: center;
}
.testimonial-card.active { display: block; }

.testimonial-card .quote-mark {
    font-family: var(--font-heading);
    font-size: 5rem;
    color: var(--accent);
    line-height: 1;
    display: block;
    margin-bottom: 20px;
}

.testimonial-quote {
    font-size: 24px;
    line-height: 1.6;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 34px;
}
.testimonial-person { display: flex; align-items: center; justify-content: center; gap: 16px; }
.testimonial-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.testimonial-person > div { text-align: left; }
.testimonial-person .name { font-family: var(--font-heading); font-weight: 500; font-size: 18px; color: var(--dark); }
.testimonial-person .role { font-size: 14px; color: var(--text-light); }

.testimonial-nav { display: flex; gap: 10px; justify-content: center; margin-top: 34px; }
.testimonial-dot {
    width: 40px;
    height: 3px;
    background: var(--border);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: var(--transition);
}
.testimonial-dot.active { background: var(--accent); }

/* --- Contact --- */
/* Photo band across the full width; the method cards overlap its lower edge */
.contact-band {
    position: relative;
    width: 100%;
    /* Source band art is 1127x183, so keep the strip shallow rather than upscaling it hard */
    height: clamp(240px, 22vw, 310px);
    overflow: hidden;
    background: var(--bg-alt);
}

.contact-band-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-methods {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    margin: -110px auto 0;
    padding: 0 25px 110px;
    display: grid;
    /* auto-fit rather than a fixed count: the row carries four methods
       (email, Saudi office, Egypt contact, offices) and drops to two then one
       on its own. The minimum is the width the email address needs unbroken */
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 24px;
    align-items: stretch;
}

.contact-method-card {
    background: var(--white);
    border: 1px solid var(--border);
    padding: 34px 22px 36px;
    box-shadow: 0 18px 50px rgba(11, 26, 45, 0.08);
    transition: var(--transition);
}
.contact-method-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(11, 26, 45, 0.14);
}

.contact-method-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    color: var(--brand-blue);
    font-size: 1.15rem;
    margin-bottom: 28px;
    transition: var(--transition);
}
.contact-method-card:hover .contact-method-icon {
    background: var(--accent);
    color: var(--dark);
}

.contact-method-card h3 {
    font-size: 22px;
    text-transform: none;
    margin-bottom: 12px;
}

.contact-method-card p {
    color: var(--text-light);
    /* 16px keeps Info@fastnaccurate.com on one line in the four-up row; the
       break-word below is the fallback for anything longer still */
    font-size: 16px;
    line-height: 1.7;
    word-break: break-word;
}
.contact-method-card p a:hover { color: var(--brand-blue); }

/* --- Footer --- */
.global-footer {
    position: relative;
    background-color: var(--panel);
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 16px 16px;
    color: var(--white);
    padding: 110px 25px 90px;
    font-family: var(--font-body);
}

.footer-top-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    background-color: var(--accent);
    border-radius: 0;
}

.footer-container {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 60px 50px;
    align-items: start;
}

/* Brand column */
.footer-logo-link {
    display: inline-flex;
    margin-bottom: 26px;
}
.footer-logo-link img { height: 62px; width: auto; object-fit: contain; }

.footer-subtext {
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 28px;
    max-width: 380px;
}

.footer-brand-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* The footer itself is now the logo blue, so this reverses out in white
   instead of sitting blue-on-blue */
.footer-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    color: var(--brand-blue);
    font-size: 16px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 8px;
    transition: var(--transition);
}
.footer-follow-btn:hover { background: var(--accent); color: var(--dark); }

/* Link columns */
.footer-links-col h4,
.footer-contact-col h4 {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    text-transform: none;
    color: var(--white);
    margin-bottom: 26px;
}

.footer-links-col ul { display: flex; flex-direction: column; gap: 16px; }
.footer-links-col a { color: rgba(255,255,255,0.85); font-size: 18px; }
.footer-links-col a:hover { color: var(--accent); }

/* Contact column */
.footer-contact-col ul { display: flex; flex-direction: column; gap: 22px; }
.footer-contact-col li {
    display: flex;
    gap: 12px;
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    line-height: 1.6;
}
.footer-contact-col li i { color: var(--accent); font-size: 0.95rem; margin-top: 5px; flex-shrink: 0; }
.footer-contact-col a { color: rgba(255,255,255,0.85); }
.footer-contact-col a:hover { color: var(--accent); }
/* The label wraps freely, the number never splits across two lines */
.footer-contact-col a[href^="tel:"],
.footer-contact-col a[href*="wa.me"] { white-space: nowrap; }

/* Bottom bar */
.footer-bottom {
    max-width: var(--container);
    margin: 70px auto 0;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.12);
    text-align: center;
}
.footer-bottom p { color: rgba(255,255,255,0.7); font-size: 16px; }

/* Sits in its own column, left of the two fixed buttons in the bottom-right
   corner. Clearing them vertically is not enough: this one is absolute inside
   the footer, so as the footer scrolls up it travels through the fixed pair
   and - being below them in the stack - slides underneath on the way past */
.scroll-top-btn {
    position: absolute;
    bottom: 162px;
    right: 100px;
    z-index: 998;
    width: 54px;
    height: 54px;
    background: var(--accent);
    color: var(--dark);
    border: none;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition);
}
.scroll-top-btn:hover { background: var(--white); color: var(--brand-blue); }

/* --- Floating call button --- */
.floating-call-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: var(--accent);
    color: var(--dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 999;
    /* Not `all`: a box-shadow transition would fight the phonePulse keyframes
       driving the same property, which makes the ring stutter on hover */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    animation: phonePulse 2.5s infinite;
}
.floating-call-btn:hover { background-color: var(--brand-blue); color: var(--white); transform: scale(1.08); }

.call-tooltip {
    position: absolute;
    right: 68px;
    background: var(--panel);
    color: var(--white);
    padding: 7px 13px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition);
}
.floating-call-btn:hover .call-tooltip { opacity: 1; visibility: visible; }

/* The drop shadow is repeated in every frame: box-shadow is a single property,
   so a pulse that lists only the ring wipes out the resting shadow set above
   and leaves the call button flat next to the WhatsApp one */
@keyframes phonePulse {
    0%   { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(53, 214, 18, 0.6); }
    70%  { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 14px rgba(53, 214, 18, 0); }
    100% { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(53, 214, 18, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .floating-call-btn { animation: none; }
}

/* --- Page loader --- */
.page-loader {
    position: fixed;
    inset: 0;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 20px;
}
.page-loader.loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-content { display: flex; flex-direction: column; align-items: center; }
.loader-logo { width: 280px; max-width: 85vw; height: auto; object-fit: contain; animation: logoPulse 1.6s ease-in-out infinite; }

.loader-spinner {
    width: 42px;
    height: 42px;
    margin-top: 28px;
    border: 3px solid var(--border);
    border-top: 3px solid var(--accent);
    border-right: 3px solid var(--brand-blue);
    border-radius: 50%;
    animation: loaderSpin 0.8s linear infinite;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.04); opacity: 1; }
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* --- Scroll reveal --- */
.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */

/* 1 / Page title banner */
.page-banner {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--blue-rgb),0.55);
}
.page-banner-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 25px;
}
.page-banner-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(2.6rem, 6vw, 80px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -2.4px;
    text-transform: uppercase;
    color: var(--white);
}
.banner-slash { color: var(--accent); }

.page-banner-crumbs {
    position: absolute;
    left: 30px;
    bottom: 34px;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
}
.page-banner-crumbs a { color: var(--white); }
.page-banner-crumbs a:hover { color: var(--accent); }
.crumb-sep { opacity: 0.55; }
.crumb-current { color: var(--accent); }

.page-banner-side {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    z-index: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.6px;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
}

/* 2 / All services grid */
.svc-intro { max-width: 820px; margin-bottom: 70px; }

.svc-page-title,
.svc-showcase .section-title,
.svc-features .section-title {
    text-transform: uppercase;
    font-size: clamp(2rem, 4vw, 60px);
    line-height: 1.14;
    letter-spacing: -1.8px;
}

.svc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 70px 40px;
}

.svc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.svc-card-icon {
    width: 90px;
    height: 90px;
    margin-bottom: 24px;
    color: var(--brand-blue);
    transition: var(--transition);
}
.svc-card-icon svg { width: 100%; height: 100%; }
/* Service pages use Font Awesome glyphs in the same slot as the inline SVGs */
.svc-card-icon i { font-size: 46px; line-height: 90px; }
.svc-card h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 14px;
    text-transform: none;
}
.svc-card p {
    color: var(--text-light);
    font-size: 18px;
    line-height: 1.75;
    margin-bottom: 22px;
}
.svc-card:hover .svc-card-icon { color: var(--accent); }

.svc-discover {
    position: relative;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}
.svc-discover i { font-size: 0.8rem; color: var(--accent); }
.svc-discover::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition);
}
.svc-card:hover .svc-discover::after { transform: scaleX(1); }

/* 3 / Dark showcase strip */
.svc-showcase {
    background: var(--panel);
    padding: 110px 0;
    overflow: hidden;
}
/* .container sets vertical padding at every breakpoint, so these overrides
   need the extra class to stay in front of it inside the media queries */
.container.svc-showcase-head { padding-top: 0; padding-bottom: 0; }
.svc-showcase .section-title { color: var(--white); max-width: 900px; }

.showcase-strip {
    display: flex;
    gap: 30px;
    max-width: var(--container);
    margin: 0 auto;
    padding: 60px 25px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.showcase-strip::-webkit-scrollbar { display: none; }

.showcase-item {
    position: relative;
    flex: 0 0 300px;
    height: 380px;
    margin: 0;
    background-size: cover;
    background-position: center;
    scroll-snap-align: start;
    overflow: hidden;
}
.showcase-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(var(--blue-rgb),0.92), rgba(var(--blue-rgb),0) 55%);
}
.showcase-item figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    padding: 22px 24px;
    font-size: 18px;
    font-weight: 600;
    /* white, not accent green: the scrim under it is now the logo blue and
       green-on-blue over a bright photo is unreadable */
    color: var(--white);
}

.showcase-controls,
.container.showcase-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 44px;
    padding-bottom: 0;
}
.showcase-counter {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-light);
}
.showcase-counter strong { font-size: 20px; font-weight: 600; color: var(--dark); }
.svc-showcase .showcase-counter { color: rgba(255,255,255,0.55); }
.svc-showcase .showcase-counter strong { color: var(--white); }

.showcase-nav { display: flex; gap: 12px; }
.showcase-nav button {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 0;
    color: var(--white);
    cursor: pointer;
    transition: var(--transition);
}
.showcase-nav button:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); }
.steps-controls .showcase-nav button { border-color: var(--border); color: var(--dark); }

/* 4 / Image + feature accordion */
.svc-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.svc-features-media {
    min-height: 560px;
    background-size: cover;
    background-position: center;
}
.svc-features-body .section-title { margin-bottom: 40px; }

.svc-accordion { max-width: none; margin: 0; }
.svc-accordion .faq-item:first-child { border-top: 1px solid var(--border); }
.svc-accordion .faq-question {
    padding: 22px 0;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.svc-accordion .faq-question em { font-style: normal; color: var(--accent); margin-right: 6px; }
.svc-accordion .faq-answer-inner p { padding-bottom: 26px; }

/* 5 / How we work steps */
.svc-steps-block .svc-intro { margin-bottom: 60px; }

.steps-strip {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.steps-strip::-webkit-scrollbar { display: none; }

.step-item {
    flex: 0 0 33.333%;
    padding: 0 40px;
    border-left: 1px solid var(--border);
    scroll-snap-align: start;
}
.step-item:first-child { border-left: none; padding-left: 0; }

.step-number-wrap {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}
.step-number {
    font-family: var(--font-heading);
    font-size: 100px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
    color: transparent;
    -webkit-text-stroke: 1px var(--accent);
}
.step-word {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}
.step-item h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin-bottom: 12px;
    text-transform: none;
}
.step-item p { color: var(--text-light); font-size: 18px; line-height: 1.75; }

/* --- Vision & Mission --- */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}
.vm-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.vm-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    transition: var(--transition);
}
.vm-card:hover .vm-icon { background: var(--accent); color: var(--dark); }
.vm-rule {
    width: 54px;
    height: 3px;
    background: var(--accent);
    margin: 28px 0 24px;
}
.vm-card h3 { font-size: 28px; text-transform: none; margin-bottom: 16px; }
.vm-card p { color: var(--text-light); font-size: 19px; line-height: 1.8; max-width: 480px; }

/* --- Operational strengths --- */
.strength-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 55px 40px;
}
.strength-icon {
    font-size: 26px;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 22px;
}
.strength-item h3 { font-size: 20px; text-transform: none; margin-bottom: 12px; }
.strength-item p { color: var(--text-light); font-size: 18px; line-height: 1.75; }

/* --- Alliance / partner / standards logo walls --- */
.logo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}
.logo-wall.wall-5 { grid-template-columns: repeat(5, 1fr); }

.logo-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    min-height: 128px;
    padding: 24px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    transition: var(--transition);
}
.logo-tile:hover { border-color: var(--accent); transform: translateY(-4px); }

/* Supplied logos range from 208x36 to 93x92, so cap both axes and let
   object-fit letterbox them into a consistent optical area */
.logo-tile img {
    max-height: 52px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}
/* The alliance grid has wider tiles and taller marks, so it gets more room */
.wall-5 .logo-tile img { max-height: 68px; max-width: 150px; }
/* Compliance marks are near-square (saber 82x120, sfda 128x111) and keep a
   caption underneath, so they sit between the two */
/* max-width as well as max-height: capping height alone lets a wide wordmark
   like CargoX (175x58) take ~2x the optical area of a squarer mark */
.logo-tile strong {
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.2px;
    color: var(--dark);
    line-height: 1.3;
}
.logo-tile span { font-size: 13px; line-height: 1.5; color: var(--text-light); }

/* --- Partner marquee --- */
.logo-marquee {
    overflow: hidden;
    /* fade both ends so tiles slide in and out instead of being hard-clipped */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 90px, #000 calc(100% - 90px), transparent);
}

.logo-marquee-track { display: flex; width: max-content; }

/* Trailing padding equal to the gap keeps the seam between the two copies
   the same width as every other gap, so the -50% wrap is invisible */
.logo-marquee-group {
    display: flex;
    gap: 18px;
    padding-right: 18px;
    flex-shrink: 0;
}

/* Logo-only tiles, so they need less height than the old text tiles and the
   mark can carry more of it */
.logo-marquee .logo-tile { width: 236px; flex-shrink: 0; min-height: 112px; }
.logo-marquee .logo-tile img { max-height: 60px; }

/* Only animates once script.js has appended the duplicate group */
.logo-marquee-track.is-looping { animation: logoMarquee 70s linear infinite; }
.logo-marquee:hover .logo-marquee-track.is-looping { animation-play-state: paused; }

@keyframes logoMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track.is-looping { animation: none; }
    .logo-marquee { overflow-x: auto; scrollbar-width: none; }
    .logo-marquee::-webkit-scrollbar { display: none; }
}

/* Port and border tiles ride the same marquee, but carry a name and a line of
   detail instead of a logo, so they get their own icon block and width. The
   row is shorter than the partner row, so the duration drops to keep the two
   sliding at the same pixel speed */
.ports-marquee .logo-marquee-track.is-looping { animation-duration: 46s; }
.logo-marquee .port-tile { width: 252px; }

.port-tile-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    color: var(--brand-blue);
    font-size: 15px;
    margin-bottom: 4px;
    transition: var(--transition);
}
.port-tile:hover .port-tile-icon { background: var(--accent); color: var(--dark); }

/* ==========================================================================
   SINGLE SERVICE PAGES
   ========================================================================== */

/* Two-tone headline: the emphasised words go accent green, like the deck */
.section-title em,
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }

/* Intro: copy + points on the left, photography on the right */
.svc-detail {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 70px;
    align-items: center;
}
.svc-detail-body .section-title { margin-bottom: 26px; }
.svc-detail-body > p { color: var(--text-light); max-width: 560px; }

.svc-detail-media img {
    width: 100%;
    height: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 4px;
}

/* Compliance pages carry the authority logo rather than a photograph, so the
   column becomes a panel and the mark is contained - never cropped */
.svc-detail-media.is-logo {
    display: grid;
    place-items: center;
    padding: 56px 48px;
    /* white, not the usual alt grey: both authority marks ship on a white
       ground, and any other panel colour draws a rectangle around them */
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.svc-detail-media.is-logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 210px;
    object-fit: contain;
    border-radius: 0;
}

/* Headline stats, split by a rule like the deck's 30,000 / 5,000 pair */
.svc-stat-row {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    margin: 34px 0 6px;
    padding-top: 30px;
    border-top: 2px solid var(--accent);
}
.svc-stat strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--brand-blue);
}
.svc-stat span { font-size: 16px; color: var(--text-light); }

/* Points list. Each item may be a single line or carry a description, which
   is what lets the transportation page reuse the same component. */
.svc-points { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }
.svc-points li { display: flex; gap: 14px; align-items: flex-start; }
.svc-points li > i {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--accent);
    font-size: 1.05rem;
}
.svc-points strong {
    display: block;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 700;
    color: var(--dark);
}
.svc-points p {
    margin-top: 5px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-light);
}

/* "Logistics by the Numbers": centred stat columns above a full-bleed photo */
.stats-grid.stats-centered { margin-top: 0; padding: 0; text-align: center; }
.stats-centered .stat-item { text-align: center; padding: 0 24px; }
.stats-centered .stat-number { justify-content: center; font-size: 46px; }
.stats-centered .stat-label { text-align: center; }

.stat-icon {
    display: block;
    margin-bottom: 18px;
    font-size: 32px;
    color: var(--brand-blue);
}

.vas-band {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-top: 70px;
}

/* Compliance platform strip, divided like the deck */
.vas-platforms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 0;
    margin-top: 46px;
}
.vas-platform {
    display: grid;
    place-items: center;
    padding: 18px 26px;
    border-left: 1px solid var(--border);
}
.vas-platform:first-child { border-left: none; }
.vas-platform img { max-height: 76px; max-width: 100%; object-fit: contain; }

/* Supporting photo strip under the warehousing intro */
.svc-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 60px;
}
.svc-gallery img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 4px;
}

@media (max-width: 992px) {
    .svc-detail { grid-template-columns: 1fr; gap: 44px; }
    .svc-detail-media img { max-height: 380px; }
    .stats-grid.stats-centered { grid-template-columns: repeat(2, 1fr); gap: 44px 0; }
    .stats-centered .stat-item:nth-child(3) { border-left: none; }
    .vas-band { height: 200px; }
}
@media (max-width: 600px) {
    .svc-stat-row { gap: 28px; }
    .svc-gallery { grid-template-columns: 1fr; }
    .svc-gallery img { height: 220px; }
    .vas-platforms { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
    .vas-platform:nth-child(3) { border-left: none; }
    .vas-band { height: 150px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1200px) {
    .services-layout { gap: 60px; }
    .service-row { gap: 30px; }
    .service-row .icon { width: 80px; height: 80px; }
    .about-split { gap: 50px; }
    .footer-container { gap: 50px; }
    .call-location-panel, .track-panel { padding: 36px 34px; }

    .svc-card-grid { gap: 60px 30px; }
    .step-item { flex: 0 0 40%; }
    .svc-features { gap: 50px; }
    .svc-features-media { min-height: 460px; }
}

@media (max-width: 992px) {
    .container { padding: 70px 25px; }

    .mobile-toggle { display: block; }
    .header-inner { padding: 0 20px; gap: 16px; }
    .logo-link { margin-left: 0; margin-right: auto; }

    .nav-menu-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--brand-blue);
        flex-direction: column;
        padding: 20px 25px;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        display: none;
    }
    .nav-menu-wrapper.show { display: flex; }

    .nav-links { flex-direction: column; width: 100%; gap: 0; margin: 0; align-items: stretch; }
    .nav-links > li > a { display: flex; width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .nav-links > li > a.active::after { display: none; }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--panel);
        padding: 0;
        display: none;
        min-width: 0;
    }
    .dropdown-menu li a { color: rgba(255,255,255,0.9); }
    .dropdown-menu li a:hover { color: var(--accent); }
    /* Touch devices have no hover, so the submenus open on tap instead */
    .nav-item-dropdown.open .dropdown-menu { display: block; }
    .nav-item-dropdown.open > a { color: var(--accent); }
    .nav-item-dropdown.open > a i { transform: rotate(180deg); }
    .nav-item-dropdown > a i { transition: var(--transition); }
    .dropdown-menu li a { padding: 12px 18px; }

    .quote-btn-flush { display: none; }

    .hero { min-height: 560px; }
    .hero-content { padding: 90px 25px 150px; }

    .hero-info-bar { grid-template-columns: 1fr; margin-top: -80px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 0; margin-top: 60px; }
    .stat-item:nth-child(3) { border-left: none; padding-left: 0; }

    .services-layout,
    .about-split,
    .section-header-split { grid-template-columns: 1fr; }

    .footer-container { grid-template-columns: 1fr 1fr; gap: 45px 40px; }
    .footer-brand-col { grid-column: 1 / -1; }

    .services-layout::before { display: none; }

    .page-banner { min-height: 380px; }
    .page-banner-side { display: none; }
    .page-banner-crumbs { left: 25px; bottom: 26px; }

    .svc-card-grid { grid-template-columns: repeat(2, 1fr); }
    .svc-showcase { padding: 70px 0; }
    .svc-features { grid-template-columns: 1fr; gap: 40px; }
    .svc-features-media { min-height: 340px; }
    .step-item { flex: 0 0 58%; }

    .process-track { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
    .process-step:nth-child(3) { border-left: none; padding-left: 0; }

    .experience-badge { right: 0; }
    .contact-methods { grid-template-columns: repeat(2, 1fr); margin-top: -80px; padding-bottom: 70px; }
    .cta-banner { padding: 50px 34px; }
}

@media (max-width: 640px) {
    .container { padding: 55px 20px; }

    .hero-content { padding: 70px 20px 120px; }
    .hero-btns { flex-direction: column; align-items: stretch; }
    .hero-btns .btn { width: 100%; justify-content: space-between; }

    .hero-info-bar { padding: 0 20px; margin-top: -60px; }
    .call-location-panel { flex-direction: column; gap: 26px; padding: 32px 26px; }
    .track-panel { padding: 32px 26px; }

    .stats-grid { grid-template-columns: 1fr; gap: 28px; padding: 0 20px; }
    .stat-item { border-left: none; padding-left: 0; }
    .stat-number { font-size: 44px; }

    .service-row { gap: 22px; padding: 30px 0; }
    .service-row .icon { width: 62px; height: 62px; }
    .service-row p { max-width: none; }

    .services-grid, .blog-grid, .team-grid { grid-template-columns: 1fr; }

    .svc-card-grid { grid-template-columns: 1fr; gap: 50px; }
    .svc-intro { margin-bottom: 45px; }
    .showcase-strip { padding-left: 20px; padding-right: 20px; }
    .showcase-item { flex: 0 0 240px; height: 300px; }
    /* keep clear of the fixed call button in the bottom-right corner */
    .scroll-top-btn { right: 92px; }
    .showcase-nav button { width: 46px; height: 46px; }
    .svc-accordion .faq-question { font-size: 18px; }
    .step-item { flex: 0 0 85%; padding: 0 24px; }
    .step-number { font-size: 76px; }

    .process-track { grid-template-columns: 1fr; gap: 34px; }
    .process-step { border-left: none; padding: 0; }

    .cta-banner { flex-direction: column; align-items: flex-start; text-align: left; padding: 40px 26px; }
    .cta-banner-actions { width: 100%; }

    .contact-methods {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: -60px;
        padding: 0 20px 55px;
    }
    .contact-method-card { padding: 28px 24px 30px; }
    .contact-method-icon { margin-bottom: 20px; }

    .global-footer { padding: 70px 20px 80px; }
    .footer-container { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { margin-top: 50px; }
    /* Tuck it beside the fixed call button, clear of the copyright line */
    .scroll-top-btn { bottom: 18px; right: 92px; width: 46px; height: 46px; }

    .call-tooltip { display: none; }

    .testimonial-quote { font-size: 18px; }
}

/* Company-profile sections at narrower widths */
@media (max-width: 1200px) {
    .logo-wall.wall-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .vm-grid { grid-template-columns: 1fr; gap: 50px; }
    .strength-grid { grid-template-columns: repeat(2, 1fr); gap: 45px 30px; }
    .logo-wall,
    .logo-wall.wall-5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .strength-grid { grid-template-columns: 1fr; }
    .logo-wall,
    .logo-wall.wall-5 { grid-template-columns: repeat(2, 1fr); }
    .vm-card h3 { font-size: 24px; }
}

/* ==========================================================================
   ARABIC / RTL LAYER
   --------------------------------------------------------------------------
   js/i18n.js swaps the visible text and sets dir="rtl" on <html>; everything
   below is what the layout needs on top of that. Flex and grid rows mirror
   themselves once dir flips, so only the pieces pinned with left/right, the
   one-sided borders and the Latin-tuned type need restating.
   ========================================================================== */

/* --- Language switch in the header bar --- */
.lang-toggle {
    align-self: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 18px;
    margin-inline-end: 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: normal;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.lang-toggle:hover { background: var(--accent); border-color: var(--accent); color: var(--dark); }

@media (max-width: 992px) {
    /* The CTA is hidden on mobile, so the switch sits beside the burger */
    .lang-toggle { padding: 6px 14px; font-size: 13px; margin-inline-end: 18px; }
}

/* --- Type: Latin tracking and uppercasing do not suit Arabic --- */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] textarea { font-family: 'Cairo', 'Manrope', sans-serif; }

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .section-title,
html[dir="rtl"] .page-banner-title,
html[dir="rtl"] .stat-number,
html[dir="rtl"] .hero h1 {
    font-family: 'Cairo', 'Space Grotesk', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.35;
}
html[dir="rtl"] h1 { font-size: clamp(2.1rem, 5vw, 64px); }
html[dir="rtl"] h2,
html[dir="rtl"] .section-title { font-size: clamp(1.8rem, 4vw, 50px); }
html[dir="rtl"] .page-banner-title { font-size: clamp(2rem, 4.6vw, 58px); }
html[dir="rtl"] .quote-btn-flush,
html[dir="rtl"] .btn,
html[dir="rtl"] .hero-eyebrow,
html[dir="rtl"] .footer-follow-btn { letter-spacing: normal; }

/* --- Header --- */
html[dir="rtl"] .header-inner { padding: 0 40px 0 0; }
html[dir="rtl"] .dropdown-menu { left: auto; right: 0; }

/* --- Hero --- */
html[dir="rtl"] .hero { text-align: right; }
html[dir="rtl"] .hero::before {
    background: linear-gradient(270deg, rgba(var(--blue-rgb),0.75) 0%, rgba(var(--blue-rgb),0.45) 45%, rgba(var(--blue-rgb),0.15) 100%);
}
/* The arrow in the round button should point the way the text reads */
html[dir="rtl"] .btn-icon-box i { transform: rotate(-45deg) scaleX(-1); }

/* --- One-sided borders and offsets --- */
html[dir="rtl"] .stat-item,
html[dir="rtl"] .process-step,
html[dir="rtl"] .step-item,
html[dir="rtl"] .vas-platform {
    border-left: none;
    border-right: 1px solid var(--border);
    padding-left: 0;
    padding-right: 40px;
}
html[dir="rtl"] .stat-item:first-child,
html[dir="rtl"] .process-step:first-child,
html[dir="rtl"] .step-item:first-child,
html[dir="rtl"] .vas-platform:first-child { border-right: none; padding-right: 0; }

html[dir="rtl"] .stat-item,
html[dir="rtl"] .team-info,
html[dir="rtl"] .faq-question,
html[dir="rtl"] .testimonial-person > div { text-align: right; }

html[dir="rtl"] .experience-badge { right: auto; left: -20px; }
html[dir="rtl"] .services-layout::before { right: auto; left: 0; }
html[dir="rtl"] .showcase-item figcaption { left: auto; right: 0; }
html[dir="rtl"] .logo-marquee-group { padding-right: 0; padding-left: 18px; }
/* Flex lays the track out from the right edge in Arabic, so it overflows to
   the left rather than the right. Travelling -50% then drags it away from the
   window and the row runs dry; mirrored, it wraps on the seam exactly as LTR */
html[dir="rtl"] .logo-marquee-track.is-looping { animation-name: logoMarqueeRtl; }
@keyframes logoMarqueeRtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}
html[dir="rtl"] .blog-meta i,
html[dir="rtl"] .svc-accordion .faq-question em { margin-right: 0; margin-left: 6px; }

/* --- Page banner --- */
html[dir="rtl"] .page-banner-crumbs { left: auto; right: 30px; }
html[dir="rtl"] .page-banner-side { right: auto; left: 30px; }

/* Phone numbers and addresses are Latin runs; without an explicit LTR box the
   bidi algorithm moves the leading "+" to the end of the number */
html[dir="rtl"] a[href^="tel:"]:not(.floating-call-btn),
html[dir="rtl"] a[href^="mailto:"] {
    display: inline-block;
    direction: ltr;
    unicode-bidi: embed;
}

/* --- Floating controls --- */
html[dir="rtl"] .scroll-top-btn { right: auto; left: 100px; }
html[dir="rtl"] .floating-call-btn { right: auto; left: 24px; }
html[dir="rtl"] .floating-wa-btn { right: auto; left: 24px; }
html[dir="rtl"] .call-tooltip { right: auto; left: 68px; }

@media (max-width: 992px) {
    html[dir="rtl"] .header-inner { padding: 0 20px; }
    html[dir="rtl"] .logo-link { margin-right: 0; margin-left: auto; }
    html[dir="rtl"] .stat-item,
    html[dir="rtl"] .process-step,
    html[dir="rtl"] .step-item { padding-right: 26px; }
    html[dir="rtl"] .stat-item:nth-child(3),
    html[dir="rtl"] .process-step:nth-child(3) { border-right: none; padding-right: 0; }
    html[dir="rtl"] .page-banner-crumbs { left: auto; right: 25px; }
}

@media (max-width: 640px) {
    html[dir="rtl"] .stat-item,
    html[dir="rtl"] .process-step { border-right: none; padding-right: 0; }
    html[dir="rtl"] .cta-banner { text-align: right; }
    html[dir="rtl"] .scroll-top-btn { right: auto; left: 92px; }
}

/* ==========================================================================
   EGYPT IMPORT & EXPORT PAGE
   --------------------------------------------------------------------------
   The 2026 Egypt brochure rebuilt as a page. Its own header and footer are
   dropped in favour of the site's, and every colour resolves to the shared
   tokens - logo blue for the panels, #35D612 for the accents.
   ========================================================================== */

/* --- Hero --- */
.eg-hero {
    position: relative;
    background: url('../images/services/egypt-port-hero.jpg') center/cover no-repeat;
    color: var(--white);
    overflow: hidden;
}
.eg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11,26,45,0.72) 0%, rgba(var(--blue-rgb),0.78) 55%, rgba(11,26,45,0.92) 100%);
}
.eg-hero-inner {
    position: relative;
    z-index: 1;
    max-width: var(--container);
    margin: 0 auto;
    padding: 70px 25px 60px;
}

.eg-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 50px;
}
.eg-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.eg-pill i { font-size: 8px; color: var(--accent); }
.eg-pill-solid { background: var(--brand-blue); border-color: var(--brand-blue); }

.eg-hero-title {
    color: var(--white);
    font-size: clamp(2.6rem, 6vw, 78px);
    margin-bottom: 6px;
}
.eg-hero-sub {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.2vw, 42px);
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 28px;
}
.eg-hero-lead {
    color: var(--white);
    font-size: clamp(1.25rem, 2.2vw, 30px);
    letter-spacing: -0.6px;
    text-transform: none;
    max-width: 860px;
    margin-bottom: 22px;
}
.eg-hero-copy {
    max-width: 860px;
    font-size: 18px;
    line-height: 32px;
    color: rgba(255,255,255,0.88);
    background: rgba(11,26,45,0.42);
    border-left: 4px solid var(--accent);
    padding: 20px 26px;
    margin-bottom: 54px;
}

.eg-chip-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.eg-chip {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px;
}
.eg-chip-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(var(--blue-rgb),0.55);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--accent);
    font-size: 18px;
}
.eg-chip h4 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--white);
    font-size: 17px;
    margin-bottom: 6px;
}
.eg-chip p { font-size: 15px; line-height: 24px; color: rgba(255,255,255,0.78); }

.eg-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: none;
}
.eg-tag-official { background: rgba(255,196,61,0.18); color: #FFC43D; }
.eg-tag-verified { background: rgba(255,255,255,0.18); color: var(--white); }
.eg-tag-api { background: rgba(53,214,18,0.18); color: var(--accent); }
.eg-tag-advisor { background: var(--brand-blue); color: var(--white); padding: 6px 16px; font-size: 13px; }

/* --- Section header bar (the brochure's blue banner) --- */
.eg-section-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    background: var(--panel);
    color: var(--white);
    padding: 22px 28px;
    border-radius: 14px;
    margin-bottom: 55px;
}
.eg-bar-rule {
    width: 8px;
    height: 42px;
    border-radius: 999px;
    background: var(--accent);
    flex-shrink: 0;
}
.eg-bar-text { flex: 1; min-width: 260px; }
.eg-bar-text h2 {
    color: var(--white);
    font-size: clamp(1.35rem, 2.4vw, 32px);
    letter-spacing: -0.8px;
    text-transform: none;
    margin-bottom: 2px;
}
.eg-bar-sub { font-size: 15px; font-weight: 600; color: var(--accent); }
.eg-bar-badge {
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* --- Operational pillars --- */
/* Both card blocks run two-up like the brochure, so neither leaves a single
   card stranded on its own row */
.eg-pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}
.services-grid.eg-services { grid-template-columns: repeat(2, 1fr); }
.eg-pillar {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--brand-blue);
    padding: 30px 30px 34px;
    transition: var(--transition);
}
.eg-pillar:hover {
    border-top-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}
.eg-pillar-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.eg-pillar-num {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}
.eg-pillar-tag {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(var(--blue-rgb),0.1);
    color: var(--brand-blue);
    font-size: 13px;
    font-weight: 700;
}
.eg-pillar-kicker {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 8px;
}
.eg-pillar h3 { font-size: 22px; text-transform: none; margin-bottom: 12px; }
.eg-pillar p { color: var(--text-light); font-size: 17px; line-height: 1.7; }

/* --- Service card overlays --- */
.service-card-img { position: relative; }
/* The brochure crops are wide banners (1035x161), so the band is shortened
   here rather than zooming a quarter of each photo to fill the usual 240px */
.eg-services .service-card-img { height: 180px; }
.eg-card-tag,
.eg-card-note {
    position: absolute;
    bottom: 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.eg-card-tag {
    right: 16px;
    padding: 7px 14px;
    border-radius: 6px;
    background: var(--brand-blue);
}
.eg-card-tag em { font-style: normal; opacity: 0.9; }
.eg-card-note {
    left: 16px;
    text-transform: none;
    font-weight: 600;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* --- Advisor contact panel --- */
.eg-contact {
    background: var(--panel);
    color: var(--white);
    padding: 46px 50px 50px;
    border-radius: 16px;
}
.eg-contact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 30px;
    margin-bottom: 34px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.eg-contact-head h3 {
    color: var(--white);
    font-size: clamp(1.35rem, 2.4vw, 32px);
    text-transform: none;
    letter-spacing: -0.8px;
    margin-top: 12px;
}
.eg-support-badge {
    padding: 12px 24px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 15px;
    font-weight: 700;
}

.eg-contact-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 44px;
    align-items: center;
}

.eg-contact-qr { text-align: center; }
.eg-contact-qr img {
    width: 168px;
    height: 168px;
    padding: 10px;
    background: var(--white);
    border: 3px solid var(--accent);
    border-radius: 14px;
}
.eg-contact-qr a {
    display: inline-block;
    margin-top: 12px;
    font-size: 15px;
    color: rgba(255,255,255,0.85);
}
.eg-contact-qr a:hover { color: var(--accent); }

.eg-contact-list { display: flex; flex-direction: column; gap: 18px; }
.eg-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
}
.eg-contact-list i {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(53,214,18,0.16);
    border: 1px solid rgba(53,214,18,0.4);
    color: var(--accent);
    font-size: 15px;
}
.eg-contact-list a:hover { color: var(--accent); }
.eg-hubs { color: var(--accent); font-weight: 600; }

.eg-contact-phones { display: flex; flex-direction: column; gap: 22px; }
.eg-contact-phones li { text-align: right; }
.eg-phone-label { display: block; font-size: 15px; color: rgba(255,255,255,0.75); }
.eg-contact-phones a {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    color: var(--white);
}
.eg-contact-phones a:hover { color: var(--accent); }

/* --- Accreditation wall --- */
/* EIFFA publishes no mark we can use, so that one tile carries the wordmark
   and its expansion at the same optical weight as the logos beside it */
/* Six memberships, so the wall runs six-up rather than leaving one orphan
   on a second row the way the shared five-column grid does */
.logo-wall.eg-accreditations { grid-template-columns: repeat(6, 1fr); gap: 16px; }
.eg-accreditations .logo-tile { min-height: 132px; padding: 20px 14px; }
.eg-accreditations .logo-tile img { max-height: 56px; max-width: 130px; }

@media (max-width: 1200px) {
    .logo-wall.eg-accreditations { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .logo-wall.eg-accreditations { grid-template-columns: repeat(2, 1fr); }
}
.eg-tile-text strong { font-size: 22px; letter-spacing: 0.5px; }
.eg-tile-text span { max-width: 190px; }

@media (max-width: 992px) {
    .eg-hero-inner { padding: 50px 25px 55px; }
    .eg-hero-pills { margin-bottom: 34px; }
    .eg-contact { padding: 36px 30px 40px; }
    .eg-contact-grid { grid-template-columns: 1fr; gap: 34px; justify-items: start; }
    .eg-contact-phones li { text-align: left; }
}

@media (max-width: 800px) {
    .eg-pillar-grid,
    .services-grid.eg-services { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .eg-hero-inner { padding: 40px 20px 46px; }
    .eg-hero-copy { padding: 18px 20px; font-size: 17px; line-height: 30px; }
    .eg-section-bar { padding: 20px 22px; gap: 16px; }
    .eg-pillar { padding: 26px 24px 30px; }
    .eg-contact-qr { align-self: center; }
}

/* --- RTL corrections for this page --- */
html[dir="rtl"] .eg-hero-copy { border-left: none; border-right: 4px solid var(--accent); }
html[dir="rtl"] .eg-card-tag { right: auto; left: 16px; }
html[dir="rtl"] .eg-card-note { left: auto; right: 16px; }
html[dir="rtl"] .eg-contact-phones li { text-align: left; }
html[dir="rtl"] .eg-hero-lead,
html[dir="rtl"] .eg-bar-text h2,
html[dir="rtl"] .eg-contact-head h3 { letter-spacing: normal; }

@media (max-width: 992px) {
    html[dir="rtl"] .eg-contact-grid { justify-items: end; }
    html[dir="rtl"] .eg-contact-phones li { text-align: right; }
}

/* ==========================================================================
   Gallery page
   --------------------------------------------------------------------------
   Office photographs shot at the Jeddah head office. The grid is a plain
   auto-fit so the six tiles reflow cleanly; the two landscape shots that
   carry the most detail (the brand wall and the team photo) span two columns
   on wide screens. Every tile opens in the shared lightbox below.
   ========================================================================== */
.gallery-intro .section-header-center p { color: var(--text-light); margin-top: 18px; }

.gallery-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent-hover);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* --- Yard walkthrough -----------------------------------------------------
   The clip is 9:16 phone footage. Letterboxing it into a wide band would waste
   most of the frame, so the player keeps its portrait ratio and the copy sits
   alongside it. */
.gallery-film {
    display: grid;
    grid-template-columns: minmax(0, 300px) 1fr;
    gap: 46px;
    align-items: center;
    margin-bottom: 46px;
    padding-bottom: 46px;
    border-bottom: 1px solid var(--border);
}

.gallery-film-player {
    position: relative;
    background: var(--dark);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(11, 26, 45, 0.22);
}
.gallery-film-player video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: var(--dark);
}

/* --- Custom video controls ------------------------------------------------
   The native bar is grey chrome that belongs to the browser, not the brand.
   These are the same square edges, brand blue and accent green as the rest of
   the site. script.js unhides .film-controls and drops the `controls`
   attribute, so without JS the native bar is still there and still works. */
.gallery-film-player[data-video] video { cursor: pointer; }

/* Big centre play: the first thing you see, and the largest hit target */
.film-bigplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 5px;      /* optical centring for the triangle */
    background: var(--accent);
    color: var(--dark);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 10px 34px rgba(11, 26, 45, 0.45);
    transition: transform 0.3s ease, background 0.3s ease, opacity 0.25s ease;
}
.is-enhanced .film-bigplay { display: flex; }
.film-bigplay:hover { background: var(--white); transform: translate(-50%, -50%) scale(1.08); }
.is-playing .film-bigplay { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.85); }

.film-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 30px 14px 13px;
    /* a scrim rather than a solid bar, so the frame stays visible underneath */
    background: linear-gradient(180deg, rgba(11, 26, 45, 0) 0%, rgba(11, 26, 45, 0.86) 62%);
    /* the timeline reads left to right in every language, so the bar stays LTR */
    direction: ltr;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
/* Visible at rest, while paused, on hover, and whenever anything inside has
   keyboard focus - never hidden from someone tabbing through */
.gallery-film-player:hover .film-controls,
.gallery-film-player:focus-within .film-controls,
.film-controls.is-shown {
    opacity: 1;
    transform: none;
}

.fc-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.fc-btn:hover { color: var(--accent); transform: scale(1.12); }
.fc-play { padding-left: 2px; }

/* Scrubber: a 4px rule that thickens on hover, with the knob only showing
   once the pointer is on it */
.fc-scrub {
    flex: 1;
    min-width: 0;
    height: 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}
.fc-track {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    transition: height 0.18s ease;
}
.fc-scrub:hover .fc-track,
.fc-scrub:focus-visible .fc-track,
.fc-scrub.is-dragging .fc-track { height: 7px; }

.fc-buffered,
.fc-played {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
}
.fc-buffered { background: rgba(255, 255, 255, 0.34); }
.fc-played { background: var(--accent); }

.fc-knob {
    position: absolute;
    right: 0;
    top: 50%;
    width: 13px;
    height: 13px;
    background: var(--white);
    border-radius: 50%;
    transform: translate(50%, -50%) scale(0);
    transition: transform 0.18s ease;
    box-shadow: 0 2px 8px rgba(11, 26, 45, 0.5);
}
.fc-scrub:hover .fc-knob,
.fc-scrub:focus-visible .fc-knob,
.fc-scrub.is-dragging .fc-knob { transform: translate(50%, -50%) scale(1); }

.fc-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.fc-time {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;   /* stops the bar twitching per second */
    color: var(--white);
    letter-spacing: 0.02em;
}

@media (max-width: 480px) {
    .film-controls { gap: 8px; padding: 26px 10px 11px; }
    .fc-time { font-size: 11.5px; }
    .fc-btn { width: 28px; height: 28px; font-size: 13px; }
}

.gallery-film-body h3 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    margin-bottom: 16px;
}
.gallery-film-body > p { color: var(--text-light); max-width: 56ch; }

.gallery-film-points { margin-top: 26px; display: grid; gap: 14px; }
.gallery-film-points li { display: flex; align-items: center; gap: 14px; }
.gallery-film-points i {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--bg-alt);
    color: var(--brand-blue);
    font-size: 15px;
}
.gallery-film-points span { color: var(--text-light); }

@media (max-width: 900px) {
    .gallery-film { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
    .gallery-film-player { max-width: 300px; }
    .gallery-film-body { text-align: center; }
    .gallery-film-body > p { margin-inline: auto; }
    .gallery-film-points { justify-items: start; display: inline-grid; text-align: left; }
}

/* Arabic keeps the same two-column split; only the icon spacing is directional */
html[dir="rtl"] .gallery-film-points li { flex-direction: row; }

.gallery-item {
    position: relative;
    overflow: hidden;
    background: var(--dark);
}
/* The two wide shots only claim a second column once the grid actually has
   three, otherwise they would stretch a single-column layout out of ratio */
@media (min-width: 1100px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
    .gallery-item-wide { grid-column: span 2; }
}

.gallery-item img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.5s ease, opacity 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.06); }

.gallery-item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 46px 24px 20px;
    background: linear-gradient(transparent, rgba(var(--blue-rgb),0.94));
    color: var(--white);
    pointer-events: none;
}
.gallery-item figcaption h3 {
    font-size: 20px;
    line-height: 1.3;
    color: var(--white);
    margin-bottom: 2px;
}
.gallery-item figcaption span {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
}

/* --- Egypt contact strip on the gallery page --- */
.gallery-cta {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: center;
}
.gallery-cta-text p { color: var(--text-light); margin-top: 18px; }
.gallery-cta .section-title { font-size: clamp(2rem, 3.4vw, 46px); }

.gallery-cta-actions { display: flex; flex-direction: column; gap: 16px; }

.gallery-contact-btn {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 26px;
    background: var(--panel);
    color: var(--white);
    border: 1px solid transparent;
}
.gallery-contact-btn i { font-size: 26px; color: var(--accent); }
.gallery-contact-btn span {
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    direction: ltr;
}
.gallery-contact-btn small {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
}
.gallery-contact-btn:hover { background: var(--accent); color: var(--dark); }
.gallery-contact-btn:hover i { color: var(--dark); }
.gallery-contact-btn:hover small { color: rgba(11,26,45,0.7); }

.gallery-contact-btn-wa { background: #128C7E; }
.gallery-contact-btn-wa i { color: var(--white); }

@media (max-width: 992px) {
    .gallery-cta { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 640px) {
    .gallery-item img { height: 250px; }
    .gallery-contact-btn span { font-size: 22px; }
}

/* --- Lightbox --- */
/* One overlay lives at the end of gallery.html and is repointed by
   openLightbox(); arrow keys and the arrow buttons walk the same node list */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
    background: rgba(11,26,45,0.94);
}
.lightbox.open { display: flex; }
body.lightbox-open { overflow: hidden; }

.lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.lightbox-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    text-align: center;
    color: var(--white);
    font-size: 17px;
    font-weight: 600;
    padding: 0 80px;
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    transition: var(--transition);
}
.lightbox-close:hover,
.lightbox-nav:hover { background: var(--accent); color: var(--dark); }

.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

@media (max-width: 640px) {
    .lightbox { padding: 70px 14px; }
    .lightbox-caption { padding: 0 20px; font-size: 15px; }
    .lightbox-close { top: 14px; right: 14px; }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
}

/* --- Floating WhatsApp button --- */
/* Sits directly above the call button so the pair reads as one stack */
.floating-wa-btn {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 56px;
    height: 56px;
    background-color: #25D366;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 999;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.floating-wa-btn:hover { background-color: #128C7E; color: var(--white); transform: scale(1.08); }
.floating-wa-btn:hover .call-tooltip { opacity: 1; visibility: visible; }

/* --- RTL corrections for the gallery page --- */
html[dir="rtl"] .gallery-item figcaption { text-align: right; }
html[dir="rtl"] .gallery-contact-btn span { align-items: flex-start; }
html[dir="rtl"] .lightbox-close { right: auto; left: 24px; }
html[dir="rtl"] .gallery-cta .section-title { letter-spacing: normal; }

/* --- Phone numbers stay left-to-right in Arabic --- */
/* "+20 105 525 5854" is four bidi-neutral runs, so an RTL paragraph reorders
   them to "5854 525 105 20+". Isolating every dial link keeps the groups in
   the order they are dialled, in both languages. */
a[href^="tel:"],
a[href*="wa.me"] {
    direction: ltr;
    unicode-bidi: isolate;
}