@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ==========================================================================
   LTW template — dark navy + indigo (matches wp.ltw.tn). Linked AFTER Bootstrap,
   so it overrides the stock dark theme. Styles the UNIVERSAL `pb-*` hooks emitted
   by the smart components; the `is-alt` class is added per-section by hooks.php.
   ========================================================================== */

:root {
    --pb-bg:        #0f1117;
    --pb-bg-2:      #14161f;   /* alternate sections (is-alt) */
    --pb-surface:   #181b26;   /* cards / panels */
    --pb-surface-2: #1d2130;
    --pb-border:    rgba(82, 77, 211, .22);
    --pb-accent:    #524dd3;   /* indigo (assets-one) */
    --pb-accent-2:  #6d68e6;   /* lighter indigo for gradients/hover */
    --pb-stat:      #a9b0f7;   /* periwinkle stat numbers */
    --pb-text:      #c2c6d2;
    --pb-muted:     #888ea1;
    --pb-heading:   #ffffff;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--pb-bg);
    background-image: radial-gradient(68.75rem 35rem at 82% -8%, rgba(82, 77, 211, .16), transparent 60%);
    color: var(--pb-text);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--pb-heading); font-weight: 700; letter-spacing: -.015em; }
a { text-decoration: none; }

/* Layout — sections share the body background so nothing looks "separated". ----- */
.pb-section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; background: var(--pb-bg); }
.pb-section.is-alt { background: var(--pb-bg-2); }
.pb-section .container { max-width: 73.75rem; }

/* Headings --------------------------------------------------------------- */
.pb-eyebrow {
    display: inline-block;
    color: var(--pb-accent-2);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: .85rem;
}
.pb-title { font-size: clamp(1.8rem, 3.4vw, 2.75rem); line-height: 1.18; margin-bottom: 1rem; }
.pb-subtitle { color: var(--pb-muted); font-size: 1.1rem; max-width: 45rem; margin-bottom: 0; }
.pb-heading { margin-bottom: 3rem; }
.pb-heading.text-center { max-width: 47.5rem; }
.pb-lead { color: var(--pb-text); font-size: 1.12rem; }

/* Buttons ---------------------------------------------------------------- */
.pb-btn {
    --bs-btn-padding-y: .72rem;
    --bs-btn-padding-x: 1.7rem;
    font-weight: 600;
    border-radius: .6rem;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.pb-btn:hover { transform: translateY(-0.125rem); }
.btn-accent {
    background-image: linear-gradient(135deg, var(--pb-accent), var(--pb-accent-2));
    border: 0;
    color: #fff;
}
.btn-accent:hover, .btn-accent:focus {
    color: #fff;
    box-shadow: 0 0.75rem 1.875rem -0.625rem rgba(82, 77, 211, .8);
}
.btn-outline-light { border-radius: .6rem; border-color: rgba(255, 255, 255, .35); }
.pb-btn-ghost { color: var(--pb-accent-2); padding-left: .25rem; }
.pb-btn-ghost::after { content: " →"; }
.pb-btn-ghost:hover { color: #fff; }

/* Navbar ----------------------------------------------------------------- */
.pb-navbar {
    background: rgba(15, 17, 23, .82);
    -webkit-backdrop-filter: blur(0.625rem);
    backdrop-filter: blur(0.625rem);
    border-bottom: 0.0625rem solid rgba(255, 255, 255, .06);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
/* The logo is used untouched (transparent PNG) at its original small header size. */
.pb-brand-img { height: 2.5rem; width: auto; display: block; }
.pb-brand-img--footer { height: 3.25rem; }
/* Brand text: legible, not the oversized white Bootstrap default. Size/colour are
   overridable per-block via inline style (brand_size / brand_color). */
.pb-brand-text { font-size: 1.15rem; font-weight: 600; color: var(--pb-text); letter-spacing: 0.0125rem; line-height: 1; }
.pb-navbar.pb-navbar-transparent { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.pb-navbar .nav-link { color: var(--pb-text); font-weight: 500; padding: .4rem .9rem; }
.pb-navbar .nav-link:hover, .pb-navbar .nav-link:focus { color: #fff; }

/* Hero ------------------------------------------------------------------- */
.pb-hero {
    background-color: var(--pb-bg);
    background-size: cover;
    background-position: center;
    padding: clamp(4.5rem, 11vw, 8rem) 0;
    overflow: hidden;
    /* Fade the bottom edge into the page background so the hero is not "separated". */
    box-shadow: inset 0 -8.75rem 6.875rem -4.375rem var(--pb-bg);
}
.pb-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(15, 17, 23, .95) 0%, rgba(15, 17, 23, .72) 46%, rgba(15, 17, 23, .42) 100%);
}
.pb-hero-copy { position: relative; z-index: 2; }
.pb-hero-title { font-size: clamp(2.3rem, 5.2vw, 3.85rem); font-weight: 800; line-height: 1.06; margin-bottom: 1.2rem; }
.pb-hero-subtitle { color: #d3d6e0; font-size: 1.18rem; max-width: 33.75rem; margin-bottom: 2rem; }
/* Make the hero motto clearly readable (brighter + larger + a leading accent bar). */
.pb-hero .pb-eyebrow {
    color: #cfd1f7;
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .14em;
    margin-bottom: 1.1rem;
}
.pb-hero .pb-eyebrow::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 0.125rem;
    background: var(--pb-accent-2);
    vertical-align: middle;
    margin: -.2rem .65rem 0 0;
}

/* Hero media (rounded cover image with a centered caption) — matches the source:
   wp-block-cover, min-height 29.625rem, border-radius 0.9375rem, object-position 95% 9%. */
.pb-hero-media {
    position: relative;
    z-index: 2;
    margin: 0;
    min-height: 29.625rem;
    border-radius: 0.9375rem;
    overflow: hidden;
    box-shadow: 0 2.25rem 5rem -2.125rem rgba(0, 0, 0, .85);
}
.pb-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 95% 9%;
}
.pb-hero-caption {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: -.01em;
    text-shadow: 0 0.125rem 1rem rgba(0, 0, 0, .6);
    background: linear-gradient(180deg, rgba(8, 9, 14, .15), rgba(8, 9, 14, .45));
}

/* Stats ------------------------------------------------------------------ */
.pb-stats-band {
    background: var(--pb-bg-2);
    border-top: 0.0625rem solid var(--pb-border);
    border-bottom: 0.0625rem solid var(--pb-border);
    padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.pb-stat-value { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: var(--pb-stat); line-height: 1; }
.pb-stat-label { color: var(--pb-muted); text-transform: uppercase; letter-spacing: .09em; font-size: .8rem; margin-top: .4rem; }

/* Split media ------------------------------------------------------------ */
.pb-media-frame {
    border: 0.0625rem solid var(--pb-border);
    border-radius: 1.1rem;
    padding: .55rem;
    background: var(--pb-surface);
    box-shadow: 0 1.875rem 3.75rem -2.1875rem rgba(0, 0, 0, .9);
}
.pb-media-frame img { width: 100%; height: auto; display: block; border-radius: .8rem; }
.pb-mini {
    display: flex; gap: .9rem; align-items: flex-start;
    background: var(--pb-surface);
    border: 0.0625rem solid var(--pb-border);
    border-radius: .9rem;
    padding: 1rem 1.1rem;
}
.pb-mini-ico {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.625rem; height: 2.625rem;
    border-radius: .7rem;
    background: rgba(82, 77, 211, .16);
    color: var(--pb-accent-2);
    font-size: 1.25rem;
}
.pb-mini-ico img { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.pb-mini-ico .pb-ico-mask {
    width: 1.5rem; height: 1.5rem;
    background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.pb-mini-title { font-size: 1.02rem; margin: 0 0 .15rem; }
.pb-mini-text { color: var(--pb-muted); font-size: .92rem; margin: 0; }

/* Feature / service grid ------------------------------------------------- */
.pb-card {
    background: linear-gradient(180deg, var(--pb-surface) 0%, var(--pb-bg-2) 100%);
    border: 0.0625rem solid var(--pb-border);
    border-radius: 1.1rem;
    padding: 2rem 1.75rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.is-alt .pb-card { background: linear-gradient(180deg, var(--pb-surface-2) 0%, var(--pb-surface) 100%); }
.pb-card:hover {
    transform: translateY(-0.375rem);
    border-color: var(--pb-accent);
    box-shadow: 0 1.625rem 3.125rem -1.75rem rgba(82, 77, 211, .5);
}
.pb-card-num {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: transparent;
    -webkit-text-stroke: 0.09375rem var(--pb-accent-2);
    margin-bottom: 1rem;
    line-height: 1;
}
.pb-card-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.625rem; height: 3.625rem;
    border-radius: .9rem;
    background: rgba(82, 77, 211, .16);
    color: var(--pb-accent-2);
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
}
.pb-card-ico img { width: 1.875rem; height: 1.875rem; object-fit: contain; }
.pb-card-title { font-size: 1.2rem; margin-bottom: .55rem; }
.pb-card-text { color: var(--pb-muted); font-size: .98rem; margin-bottom: 1rem; }
.pb-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.pb-tag {
    font-size: .74rem; font-weight: 600;
    color: var(--pb-accent-2);
    border: 0.0625rem solid var(--pb-border);
    border-radius: 62.4375rem;
    padding: .2rem .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Team ------------------------------------------------------------------- */
.pb-team {
    background: var(--pb-surface);
    border: 0.0625rem solid var(--pb-border);
    border-radius: 1.1rem;
    padding: 1.75rem 1.25rem;
    transition: transform .2s ease, border-color .2s ease;
}
.is-alt .pb-team { background: var(--pb-surface-2); }
.pb-team:hover { transform: translateY(-0.3125rem); border-color: var(--pb-accent); }
.pb-team-photo { width: 6.5rem; height: 6.5rem; margin: 0 auto 1rem; border-radius: 50%; overflow: hidden; border: 0.125rem solid var(--pb-border); }
.pb-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-team-name { font-size: 1.1rem; margin-bottom: .15rem; }
.pb-team-role { color: var(--pb-accent-2); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin: 0; }

/* CTA -------------------------------------------------------------------- */
.pb-cta { background-color: var(--pb-bg); background-size: cover; background-position: center; overflow: hidden; }
.pb-cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 17, 23, .9), rgba(15, 17, 23, .95)); }
.pb-cta-box { max-width: 51.25rem; }
.pb-cta-title { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; margin-bottom: 1rem; }
.pb-cta .pb-subtitle { color: #d3d6e0; margin-bottom: 2rem; }

/* Contact ---------------------------------------------------------------- */
.pb-contact {
    background: var(--pb-surface);
    border: 0.0625rem solid var(--pb-border);
    border-radius: 1.1rem;
    padding: 2rem 1.5rem;
    transition: transform .2s ease, border-color .2s ease;
}
.is-alt .pb-contact { background: var(--pb-surface-2); }
.pb-contact:hover { transform: translateY(-0.25rem); border-color: var(--pb-accent); }
.pb-contact-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: rgba(82, 77, 211, .16); color: var(--pb-accent-2);
    font-size: 1.5rem; margin-bottom: 1rem;
}
.pb-contact-label { font-size: 1.05rem; margin-bottom: .35rem; }
.pb-contact-val { color: var(--pb-muted); margin: 0; word-break: break-word; }
a.pb-contact-val:hover { color: var(--pb-accent-2); }

/* Footer ----------------------------------------------------------------- */
.pb-footer {
    background: #0b0d12;
    border-top: 0.0625rem solid var(--pb-border);
    padding: clamp(3rem, 6vw, 4.5rem) 0 1.75rem;
    color: var(--pb-muted);
}
.pb-foot-tag { color: var(--pb-muted); max-width: 20rem; margin-top: .25rem; }
.pb-foot-title { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.pb-foot-list li { margin-bottom: .55rem; }
.pb-foot-link { color: var(--pb-muted); transition: color .15s ease; }
.pb-foot-link:hover { color: var(--pb-accent-2); }
.pb-foot-bottom { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 0.0625rem solid rgba(255, 255, 255, .07); font-size: .9rem; }

@media (max-width: 61.99875rem) {
    .pb-hero-overlay { background: linear-gradient(180deg, rgba(15, 17, 23, .82), rgba(15, 17, 23, .96)); }
    .pb-hero-media { min-height: 20rem; margin-top: 2.5rem; }
}

/* Flexible layout blocks --------------------------------------------------- */
/* Generic container/columns sit in normal flow; sections placed inside get a
   little breathing room. Spacer is purely structural. */
.pb-container, .pb-columns { width: 100%; }
.pb-divider { border: 0; border-top: 0.0625rem solid var(--pb-border); opacity: 1; margin: 2rem 0; }
.pb-divider.container { margin-left: auto; margin-right: auto; }

.pb-accordion { --bs-accordion-bg: transparent; --bs-accordion-color: var(--pb-text); --bs-accordion-border-color: var(--pb-border); margin: 1.5rem 0; }
.pb-accordion .accordion-button { background: rgba(255, 255, 255, .02); color: var(--pb-text); font-weight: 600; }
.pb-accordion .accordion-button:not(.collapsed) { background: rgba(82, 77, 211, .14); color: #fff; box-shadow: none; }
.pb-accordion .accordion-button:focus { border-color: var(--pb-accent); box-shadow: 0 0 0 .2rem rgba(82, 77, 211, .25); }
.pb-accordion .accordion-body { color: var(--pb-muted); }

.pb-tabs-wrap { margin: 1.5rem 0; }
.pb-tabs { --bs-nav-tabs-border-color: var(--pb-border); border-bottom-color: var(--pb-border); }
.pb-tabs .nav-link { color: var(--pb-muted); }
.pb-tabs .nav-link:hover { color: #fff; border-color: transparent; }
.pb-tabs .nav-link.active { color: #fff; background: rgba(82, 77, 211, .14); border-color: var(--pb-border) var(--pb-border) transparent; }
.pb-tab-content { padding-top: 1.25rem; color: var(--pb-text); }