/* ==========================================================================
   Company Profile — title hero + light patterned content
   Loaded ONLY by master_company_profile.blade.php, so it is naturally scoped
   and cannot affect mail / dashboard / vendor views.
   The main design (red navbar, red footer, Style.css) is left untouched.
   ========================================================================== */

/* --- Title hero band: the page photo lives here, behind the title only.
   Taller band, title left-aligned (centered on phones) — matching the
   career / wbs heroes. --- */
.cp-hero {
    /* single source of truth for the shared phone hero height */
    --hero-mobile-h: clamp(430px, 62vh, 540px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    min-height: clamp(300px, 48vh, 460px);
    /* navbar is sticky (in-flow), so the hero starts right after it — no need
       for extra top padding to clear it; keep it balanced top/bottom */
    padding: clamp(40px, 6vw, 60px) 1.25rem clamp(38px, 6vw, 58px);
    padding-left: clamp(1.5rem, 7vw, 6rem);
    background-color: #7a0f08;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .64));
}

.cp-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0;
}

.cp-hero__title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 4.6vw, 3rem);
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.15;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}

.cp-hero__rule {
    width: 96px;
    height: 4px;
    margin: 1.1rem auto 0 0;
    border: 0;
    border-radius: 2px;
    background-color: #EB1C22;
    opacity: 1;
}

/* Phones — center the title band (career / wbs override this themselves).
   Shared height so EVERY hero (plain, career, wbs) is the same tall band. */
@media (max-width: 767.98px) {
    .cp-hero {
        justify-content: center;
        text-align: center;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        min-height: var(--hero-mobile-h);   /* ← shared phone hero height */
    }
    .cp-hero__inner {
        margin: 0 auto;
    }
    .cp-hero__rule {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ==========================================================================
   Career hero — layered: background photo + separate people cutout.
   The two layers are independent, so the figures can be repositioned per
   breakpoint without affecting the background.
     • Background framing knob : .cp-hero--career  -> background-position
     • People framing knob      : .cp-hero__figure -> object-position
   ========================================================================== */
.cp-hero--career {
    /* a bit taller than the normal title band so the figures fit */
    min-height: clamp(300px, 48vh, 460px);
    justify-content: flex-start;
    text-align: left;
    padding-left: clamp(1.5rem, 7vw, 6rem);
    background-position: center 35%;
}

/* Left-heavy scrim: dark on the left (title stays readable), clear on the
   right so the people show through. */
.cp-hero--career::before {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .72) 0%,
        rgba(0, 0, 0, .50) 35%,
        rgba(0, 0, 0, .15) 65%,
        rgba(0, 0, 0, 0) 100%);
}

.cp-hero--career .cp-hero__inner {
    margin: 0;
    max-width: 620px;
}

.cp-hero--career .cp-hero__rule {
    margin-left: 0;
    margin-right: auto;
}

/* People cutout — anchored flush to the right, sized smaller than the band.
   Knobs: height = size of the figures; right = horizontal anchor. */
.cp-hero__figure {
    position: absolute;
    right: 10%;               /* flush to the right edge */
    bottom: -25%;
    height: 125%;            /* ← size of the people (smaller than the hero) */
    width: auto;
    z-index: 1;
    pointer-events: none;
}

/* Phones — stack vertically (title on top, figure below) so they never
   overlap. The figure becomes an in-flow block instead of an absolute overlay. */
@media (max-width: 767.98px) {
    .cp-hero--career {
        flex-direction: column;
        justify-content: flex-end;     /* bottom-align: figure stays flush at the
                                          bottom, title drops down close to it so
                                          any leftover space goes to the TOP */
        align-items: center;
        text-align: center;
        padding-left: 1.25rem;
        padding-bottom: 0;             /* figure sits flush at the bottom */
        /* match the shared phone hero height (set explicitly so it beats the
           desktop .cp-hero--career min-height, which sits later in the file) */
        min-height: var(--hero-mobile-h);
    }
    .cp-hero--career::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .66));
    }
    .cp-hero--career .cp-hero__inner {
        margin: 0 auto;
    }
    .cp-hero--career .cp-hero__rule {
        margin-left: auto;
    }

    /* People figure — in flow, pinned to the BOTTOM (no floating). Size knobs: */
    .cp-hero__figure {
        order: 1;                /* below the title */
        position: static;        /* no longer an overlay */
        right: auto;
        bottom: auto;
        height: auto;
        width: auto;
        max-width: 100%;          /* ← size of the people on phones */
        max-height: 40vh;        /* ← cap the height on phones */
        margin-top: clamp(26px, 7vw, 48px);  /* fixed gap between title & figure */
        align-self: center;
    }
}

/* ==========================================================================
   WBS hero — layered: background photo + person cutout with a text image
   glued onto the person's belly. The person+text move together (they live in
   one wrapper), so the text always stays on the belly.
     • Background framing knob : .cp-hero--wbs        -> background-position
     • Person size / anchor    : .cp-hero__figure--wbs -> height / right / bottom
     • Text-on-belly placement : .cp-hero__text       -> top / width
   ========================================================================== */
.cp-hero--wbs {
    min-height: clamp(300px, 48vh, 460px);
    justify-content: flex-start;
    text-align: left;
    padding-left: clamp(1.5rem, 7vw, 6rem);
    background-position: center 30%;
}

.cp-hero--wbs::before {
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .72) 0%,
        rgba(0, 0, 0, .50) 35%,
        rgba(0, 0, 0, .15) 65%,
        rgba(0, 0, 0, 0) 100%);
}

.cp-hero--wbs .cp-hero__inner {
    margin: 0;
    max-width: 620px;
}

.cp-hero--wbs .cp-hero__rule {
    margin-left: 0;
    margin-right: auto;
}

/* Person cutout wrapper — anchored flush to the right. */
.cp-hero__figure--wbs {
    position: absolute;
    right: 8%;               /* ← horizontal anchor of the person */
    bottom: -25%;
    height: 125%;            /* ← size of the person (smaller than the hero) */
    width: auto;
    z-index: 1;
    pointer-events: none;
}

.cp-hero__figure--wbs .cp-hero__person {
    display: block;
    height: 100%;
    width: auto;
}

/* Text image sitting on the person's belly. Positioned relative to the person
   wrapper, so it tracks the person on every screen. */
.cp-hero__figure--wbs .cp-hero__text {
    position: absolute;
    top: 53%;                /* ← vertical spot on the body (belly) */
    left: 60%;
    transform: translateX(-50%);
    width: 100%;              /* ← width of the text across the belly */
    height: auto;
}

/* Phones — stack: title on top, person (with belly text) below. */
@media (max-width: 767.98px) {
    .cp-hero--wbs {
        flex-direction: column;
        justify-content: flex-end;     /* bottom-align: person stays flush at the
                                          bottom, title drops down close to it */
        align-items: center;
        text-align: center;
        padding-left: 1.25rem;
        padding-bottom: 0;
        /* match the shared phone hero height (set explicitly so it beats the
           desktop .cp-hero--wbs min-height, which sits later in the file) */
        min-height: var(--hero-mobile-h);
    }
    .cp-hero--wbs::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .66));
    }
    .cp-hero--wbs .cp-hero__inner {
        margin: 0 auto;
    }
    .cp-hero--wbs .cp-hero__rule {
        margin-left: auto;
    }
    .cp-hero__figure--wbs {
        order: 1;
        position: static;
        right: auto;
        bottom: auto;
        height: auto;
        width: auto;
        /* percentage for narrow phones, but capped in px so it doesn't balloon
           on wide "phones" like an unfolded foldable */
        max-width: min(60%, 300px);   /* ← size of the person on phones */
        max-height: 44vh;        /* ← cap the height on phones */
        margin-top: clamp(26px, 7vw, 48px);  /* fixed gap between title & person */
        align-self: center;
    }
    .cp-hero__figure--wbs .cp-hero__person {
        height: auto;
        width: 100%;
        max-height: 44vh;
    }
    /* Text-on-belly knob for phones (independent from desktop). */
    .cp-hero__figure--wbs .cp-hero__text {
        top: 67%;                /* ← vertical spot on the body (belly) on phones */
        left: 54%;
        /* percentage on narrow phones, capped in px so it doesn't balloon on
           wide foldables */
        width: min(85%, 255px);  /* ← width of the text across the belly on phones */
    }
}

/* Tablets / foldables (portrait-ish, still using the overlay layout) — the
   desktop text width overflows past the person here, so give it its own knobs
   that keep the text sitting on the body instead of stretching into the bg. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* keep the title in the left half so it wraps instead of running under
       the person on the right */
    .cp-hero--wbs .cp-hero__inner {
        max-width: 52%;
    }
    .cp-hero__figure--wbs .cp-hero__text {
        top: 55%;                /* ← vertical spot on the body (belly) on tablets */
        left: 58%;
        width: 78%;             /* ← width of the text across the belly on tablets */
    }
}

/* --- Content area: white with a light, non-overpowering grid motif --- */
.cp-content {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(17, 24, 39, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    background-position: center top;
    padding: clamp(42px, 6vw, 74px) 0;
    color: #22262b;
}

/* Keep the hero→content gap consistent across every page (like the service
   pages): neutralise any extra top margin on the first content element. */
.cp-content > .container > *:first-child {
    margin-top: 0 !important;
}

.cp-content #org {
    margin-top: 0;
}

/* Readable body text on the light background */
.cp-content .isiPhilo,
.cp-content .isi,
.cp-content p,
.cp-content li {
    color: #2a2f36;
}

.cp-content b,
.cp-content strong {
    color: #14181d;
}

.cp-content hr {
    border-color: rgba(0, 0, 0, .12);
}

/* Section sub-heading used inside content (kept dark on white) */
.cp-subhead {
    color: #14181d;
    font-weight: 700;
    letter-spacing: .5px;
    margin: 0 0 1rem;
    display: inline-block;
    border-bottom: 3px solid #EB1C22;
    padding-bottom: .35rem;
}

/* Images inside content get a soft, professional frame */
.cp-content img {
    max-width: 100%;
    height: auto;
}

.cp-framed {
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
}

/* Caption under a framed photo (e.g. the founder portrait on History) */
.cp-figure {
    margin: 0;
}
.cp-figcaption {
    margin-top: 14px;
    text-align: center;
    font-size: .95rem;
    line-height: 1.45;
    color: #5b6068;
}
.cp-figcaption__name {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .2px;
    color: #1c2127;
}

/* Carousels inside content get the same soft frame automatically */
.cp-content .carousel {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .12);
}

/* ==========================================================================
   Content cards (Company Policy, Vision & Mission)
   ========================================================================== */
.cp-card {
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 6px 20px rgba(20, 20, 30, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20, 20, 30, .12);
}

.cp-card--accent {
    border-top: 4px solid #EB1C22;
}

.cp-card .subjudulPhilo {
    margin: 0 0 18px;
    padding: 0;
    opacity: 1;
}

/* ==========================================================================
   Section heading — modern replacement for the plain black underline
   (used on Philosophy: Vision / Mission / Guiding Principles)
   ========================================================================== */
.cp-heading {
    position: relative;
    /* table + auto margins centers the shrink-wrapped box within ANY parent,
       so it works both inside the cards and in the centered section div */
    display: table;
    margin: 0 auto;
    padding-bottom: 16px;
    font-weight: 700;
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    letter-spacing: .6px;
    text-transform: uppercase;
    text-align: center;
    color: #14181d;
}

/* Short red accent bar centered under the text */
.cp-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 52px;
    height: 3px;
    border-radius: 2px;
    background: #EB1C22;
}

/* First word/segment tinted red for a subtle two-tone accent */
.cp-heading b {
    color: #EB1C22;
    font-weight: 700;
}

/* Neutralise the .cp-card .subjudulPhilo { padding:0 } override so the
   accent bar keeps its breathing room inside cards */
.cp-card .subjudulPhilo.cp-heading {
    margin: 0 auto 18px;
    padding-bottom: 16px;
}

/* Section intro lead paragraph */
.cp-lead {
    max-width: 840px;
    margin: 0 auto 6px;
    color: #3f454d;
    line-height: 1.8;
}

/* Guiding-principles cards */
.cp-principle {
    height: 100%;
    background: #fff;
    border: 1px solid #ececf0;
    border-top: 4px solid #EB1C22;
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: 0 4px 14px rgba(20, 20, 30, .05);
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease;
}

.cp-principle:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 20, 30, .10);
}

.cp-principle b:first-child {
    display: block;
    color: #14181d;
    font-size: 1.1rem;
    letter-spacing: .3px;
    margin-bottom: .5rem;
}

.cp-principle p {
    margin: 0;
    text-align: justify;
}

/* ==========================================================================
   Numbered policy cards
   ========================================================================== */
.cp-policy {
    list-style: none;
    counter-reset: pol;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
    text-align: left;
}

.cp-policy > li {
    counter-increment: pol;
    position: relative;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 14px;
    padding: 22px 24px 22px 74px;
    box-shadow: 0 4px 14px rgba(20, 20, 30, .05);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cp-policy > li:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(20, 20, 30, .10);
}

.cp-policy > li::before {
    content: counter(pol);
    position: absolute;
    left: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #EB1C22;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
}

/* Featured first item (priority order) spans the full row */
.cp-policy > li:first-child {
    grid-column: 1 / -1;
}

.cp-policy > li > ul {
    margin: .6rem 0 0;
    padding-left: 1.1rem;
}

.cp-policy > li > ul li {
    margin-bottom: .35rem;
}

@media (max-width: 575.98px) {
    .cp-policy {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Home — sections below the hero (Overview / Services / Clients + CTA)
   ========================================================================== */

/* Service cards: photo tile with name overlay, links to each service page */
.cp-service-card {
    display: block;
    position: relative;
    height: 200px;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(20, 20, 30, .10);
    transition: transform .2s ease, box-shadow .2s ease;
}

.cp-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(20, 20, 30, .18);
}

.cp-service-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.cp-service-card:hover .cp-service-card__img {
    transform: scale(1.08);
}

.cp-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .78));
}

.cp-service-card__name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 16px 18px;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .4px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* red accent bar that grows on hover */
.cp-service-card__name::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    margin-bottom: 8px;
    border-radius: 2px;
    background: #EB1C22;
    transition: width .25s ease;
}

.cp-service-card:hover .cp-service-card__name::before {
    width: 60px;
}

/* Home CTA buttons (Read More / View All Clients) — pill buttons with a
   lift hover. Styling lives here (not inline) so :hover works. */
.cp-btn {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

/* Solid red (Read More) */
.cp-btn--solid {
    color: #fff;
    background: #EB1C22;
}

.cp-btn--solid:hover {
    color: #fff;
    background: #c9161b;
    transform: translateY(-3px);
}

/* Outline red (View All Clients) — fills red on hover */
.cp-btn--outline {
    color: #EB1C22;
    background: #fff;
    border-color: #EB1C22;
}

.cp-btn--outline:hover {
    color: #fff;
    background: #EB1C22;
    transform: translateY(-3px);
}

/* Blue (WBS — Isi Formulir Pengaduan) */
.cp-btn--blue {
    color: #fff;
    background: #0d6efd;
}

.cp-btn--blue:hover {
    color: #fff;
    background: #0b5ed7;
    transform: translateY(-3px);
}

/* Green (WBS — Hubungi via WhatsApp) */
.cp-btn--green {
    color: #fff;
    background: #198754;
}

.cp-btn--green:hover {
    color: #fff;
    background: #157347;
    transform: translateY(-3px);
}

/* Home client logo strip */
.cp-client-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 46px;
    padding: 8px 0;
}

.cp-client-strip img {
    height: 58px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: transform .2s ease;
}

.cp-client-strip img:hover {
    transform: scale(1.06);
}

/* Company profile video — responsive 16:9 embed */
.cp-video {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
}

.cp-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Call-to-action band */
.cp-cta {
    text-align: center;
    background: linear-gradient(135deg, #7a0f08, #EB1C22);
    border-radius: 18px;
    padding: clamp(34px, 6vw, 56px) 1.25rem;
    box-shadow: 0 12px 30px rgba(122, 15, 8, .28);
}

.cp-cta__title {
    margin: 0 0 12px;
    color: #fff;
    font-weight: 700;
    font-size: clamp(1.4rem, 3.4vw, 2.1rem);
    letter-spacing: .5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.cp-cta .cp-cta__text {
    max-width: 620px;
    margin: 0 auto 24px;
    color: rgba(255, 255, 255, .92);
    font-size: clamp(.98rem, 2vw, 1.1rem);
    line-height: 1.7;
}

.cp-cta__btn {
    display: inline-block;
    padding: 13px 40px;
    background: #fff;
    color: #EB1C22;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cp-cta__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .26);
    color: #EB1C22;
}

/* ==========================================================================
   Home landing hero — refined headline typography
   (IDs are used only on index.blade.php; overrides Style.css via load order)
   ========================================================================== */
/* Front hero photo — gradient scrim.
   The scrim now only darkens the BOTTOM band, where the text lockup sits, so
   the building photo stays fully visible everywhere else (previously the big
   centred logo + full-frame overlay hid the building).
   To REVERT to the flat overlay, replace the first gradient with:
   linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)) */
.darken-index {
    background-image:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.62) 18%,
            rgba(0, 0, 0, 0.22) 42%,
            rgba(0, 0, 0, 0.00) 62%),
        url('../Gambar/kantor1.webp');
    /* Keep the building centered (esp. on portrait phones where cover crops) */
    background-position: center 50%;
    background-size: cover;
    /* navbar is now sticky (in-flow, ~66px), so subtract it from the viewport
       height so the hero fits exactly one screen.
       On phones `100vh` is locked to the viewport WITHOUT the address bar, so
       it overflows while the bar is visible. `100svh` (small viewport height)
       always uses the smaller "address bar shown" size, so the hero fits on
       first paint and never resizes mid-scroll the way `dvh` would.
       The `vh` line stays as a fallback for browsers without svh support
       (pre Chrome 108 / Safari 15.4 / Firefox 101). */
    min-height: calc(100vh - 66px);
    min-height: calc(100svh - 66px);
}

/* Anchor the lockup to the bottom-left of the hero on every device. */
.darken-index {
    display: flex;
    align-items: flex-end;
}
.darken-index > .container {
    width: 100%;
}
.index-margin {
    margin-top: 0 !important;
}

/* Bottom-left text lockup */
.cp-home-hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-bottom: clamp(1.75rem, 5vh, 3.5rem);
}

/* Logo sits inline with the company name, sized to the name's height */
.cp-home-hero__brand {
    display: flex;
    align-items: center;
    gap: clamp(.6rem, 1.6vw, 1rem);
}
.cp-home-hero__brand #logo-index {
    width: auto;
    height: clamp(2.4rem, 6vw, 4.1rem);
    flex: 0 0 auto;
}

/* red accent bar under the lockup, left-aligned */
.cp-home-hero__bar {
    display: block;
    width: 92px;
    height: 4px;
    margin: 16px 0 4px;
    border-radius: 2px;
    background: #EB1C22;
    box-shadow: 0 2px 12px rgba(235, 28, 34, .55);
}

#pt-index {
    display: inline-block;
    font-size: clamp(1.55rem, 4.6vw, 3.05rem);
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1.12;
    border-bottom: none;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .55);
}

/* the old centred accent bar is replaced by .cp-home-hero__bar */
#pt-index::after {
    content: none;
}

#desc-index {
    display: inline-block;
    margin-top: 6px;
    font-size: clamp(.95rem, 2.1vw, 1.35rem);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
}

#desc2-index {
    display: inline-block;
    margin-top: 14px;
    font-size: clamp(1.15rem, 2.7vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 1px;
    /* premium gold gradient text (fallback to solid gold if clip unsupported) */
    color: #ffce54;
    background: linear-gradient(90deg, #ffd97a, #ffb200);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

/* Board of Directors — square portrait on top of each card */
.cp-board-photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
}

/* Reusable hover-lift for plain Bootstrap cards (Board page) */
.cp-hover-lift {
    transition: transform .18s ease, box-shadow .18s ease;
}

.cp-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20, 20, 30, .16) !important;
}

/* ==========================================================================
   Clients — name list + logo cards
   ========================================================================== */
/* Alphabetical name list flows into responsive columns automatically */
.cp-clients {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 3;
    column-gap: 40px;
}

.cp-clients li {
    position: relative;
    padding: 6px 0 6px 22px;
    line-height: 1.4;
    color: #2a2f36;
    break-inside: avoid;
    border-bottom: 1px solid #f0f0f3;
}

.cp-clients li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 13px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EB1C22;
}

@media (max-width: 991.98px) {
    .cp-clients { column-count: 2; }
}

@media (max-width: 575.98px) {
    .cp-clients { column-count: 1; }
}

/* Logo cards: uniform white tiles, centered logo, hover lift */
.cp-logo-card {
    height: 100%;
    background: #fff;
    border: 1px solid #ececf0;
    border-radius: 14px;
    padding: 22px 18px 18px;
    box-shadow: 0 4px 14px rgba(20, 20, 30, .05);
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cp-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20, 20, 30, .12);
    border-color: #EB1C22;
}

.cp-logo-card__media {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.cp-logo-card__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: transform .2s ease;
}

.cp-logo-card:hover .cp-logo-card__media img {
    transform: scale(1.05);
}

.cp-logo-card__name {
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #f0f0f3;
    font-size: .92rem;
    font-weight: 600;
    color: #22262b;
    line-height: 1.35;
}

/* ==========================================================================
   Career — job opening cards
   ========================================================================== */
.cp-job {
    background: #fff;
    border: 1px solid #ececf0;
    border-top: 4px solid #EB1C22;
    border-radius: 14px;
    padding: 24px 26px;
    margin-bottom: 20px;
    box-shadow: 0 6px 18px rgba(20, 20, 30, .06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.cp-job:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(20, 20, 30, .12);
}

.cp-job__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.cp-job__title {
    margin: 0 0 10px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #14181d;
}

.cp-job__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    color: #5a616b;
    font-size: .92rem;
}

.cp-job__meta i {
    color: #EB1C22;
    margin-right: 6px;
}

.cp-job__apply {
    flex-shrink: 0;
    display: inline-block;
    padding: 10px 26px;
    background: #EB1C22;
    color: #fff;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, background .18s ease;
}

.cp-job__apply:hover {
    transform: translateY(-2px);
    background: #c9161b;
    color: #fff;
}

.cp-job__apply i { margin-left: 7px; }

.cp-job__desc {
    margin: 16px 0 0;
    color: #2a2f36;
    line-height: 1.7;
}

.cp-job__more {
    margin-top: 14px;
    border-top: 1px solid #f0f0f3;
    padding-top: 12px;
}

.cp-job__more > summary {
    cursor: pointer;
    font-weight: 600;
    color: #14181d;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-job__more > summary::before {
    content: "\f054"; /* fa chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .8rem;
    color: #EB1C22;
    transition: transform .18s ease;
}

.cp-job__more[open] > summary::before {
    transform: rotate(90deg);
}

.cp-job__more ul {
    margin: 12px 0 4px;
    padding-left: 1.3rem;
}

.cp-job__more li {
    margin-bottom: .4rem;
    line-height: 1.6;
}

/* Empty state when there are no open positions */
.cp-job-empty {
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    padding: 40px 24px;
    color: #4a505a;
}

.cp-job-empty i {
    font-size: 2.4rem;
    color: #EB1C22;
    margin-bottom: 14px;
}

/* ==========================================================================
   Contact map — give the embed a definite height so the location buttons
   never collapse over / collide with the form on phones. (Overrides the
   unreliable `height:100%` mobile rule in Style.css, scoped to this page.)
   ========================================================================== */
.cp-content .iframe-rwd iframe {
    display: block;
    width: 100%;
    height: 450px;
}

@media (max-width: 767.98px) {
    .cp-content .iframe-rwd iframe {
        height: 300px;
    }
}

/* ==========================================================================
   Contact form — red input borders matching the navbar
   ========================================================================== */
#contact-form .form-control {
    border-color: #EB1C22;
}

#contact-form .form-control:focus {
    border-color: #EB1C22;
    box-shadow: 0 0 0 .2rem rgba(235, 28, 34, .25);
}

/* ==========================================================================
   Footer bottom bar — certification logos (left) + social links (right)
   ========================================================================== */
.cp-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 26px;
    margin-top: 6px;
    padding: 20px 0 26px;
    border-top: 1px solid rgba(255, 255, 255, .28);
}

/* Certifications on white rounded tiles so they stay legible on the red band */
.cp-footer-certs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.cp-footer-certs img {
    height: 60px;
    width: auto;
    background: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.cp-footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cp-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.3rem;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.cp-footer-social a:hover {
    background: #fff;
    color: #EB1C22;
    transform: translateY(-3px);
}

/* Center both groups on small phones */
@media (max-width: 575.98px) {
    .cp-footer-bottom {
        justify-content: center;
        text-align: center;
    }
    .cp-footer-certs,
    .cp-footer-social {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   Organization chart — pure-CSS, top-down (GMS at the top)
   ========================================================================== */
/* Horizontal scroll wrapper so the WHOLE chart scrolls as one — keeps the ASD
   to the right of the Board of Directors even on phones (never drops below). */
/* Full-bleed on every screen: break out of the Bootstrap container's max-width
   so the chart uses the entire viewport width (the org page body sets
   overflow-x: clip to swallow the phantom scroll from 100vw). */
.cp-org-scroll {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    padding: 0 16px 12px;
}

.cp-org {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;   /* grow with the widest row (the departments) */
    min-width: 100%;      /* but fill & center when it fits the container */
    margin: 0 auto;
    padding: 8px 0 16px;
}

.cp-org__node {
    position: relative;
    background: #ffffff;
    border: 1px solid #e6e6ec;
    border-radius: 12px;
    padding: 18px 24px 15px;   /* extra top for the coloured header bar */
    text-align: center;
    font-weight: 700;
    color: #1c2127;
    line-height: 1.3;
    box-shadow: 0 4px 14px rgba(20, 20, 30, .08);
    max-width: 100%;
    overflow: hidden;          /* clip the header bar to the rounded corners */
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Coloured header line — differs per tier (overridden below) */
.cp-org__node::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #EB1C22;
}

.cp-org__node:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20, 20, 30, .14);
}

/* Main spine nodes (GMS → Commissioners → Directors → GM) */
.cp-org__node--head {
    min-width: 260px;
    letter-spacing: .5px;
}

/* Header line colour per tier (departments all share one colour) */
.cp-org__node--gms::before  { background: #6C3483; }
.cp-org__node--boc::before  { background: #117A65; }
.cp-org__node--bod::before  { background: #CA6F1E; }
.cp-org__node--asd::before  { background: #7F8C8D; }
.cp-org__node--gm::before   { background: #1F618D; }
.cp-org__node--dept::before { background: #EB1C22; }

/* Vertical connector between spine nodes */
.cp-org__down {
    width: 2px;
    height: 26px;
    background: #cfd2d8;
}

/* Board of Directors stays centered on the spine; the ASD is an ABSOLUTE
   offshoot to its right, so it never shifts the BoD off-center nor drops below. */
.cp-org__bod {
    position: relative;
    display: flex;
}

.cp-org__aside {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.cp-org__hline {
    width: 46px;
    height: 2px;
    background: #cfd2d8;
}

/* ASD = support role → lighter weight (same red border as the rest) */
.cp-org__node--asd {
    min-width: 180px;
    font-weight: 600;
    font-size: .95rem;
    white-space: normal;   /* aside is nowrap; let the ASD text wrap inside */
}

/* Departments reporting to the General Manager — one aligned row joined to the
   GM by a backbone (horizontal bus) that branches a stub down to each card. */
.cp-org__depts {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 22px;            /* room for the drop from the GM */
}

/* vertical drop from the General Manager down to the backbone */
.cp-org__depts::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 22px;
    background: #cfd2d8;
    transform: translateX(-50%);
}

/* each department wrapper carries half of the backbone + a stub to its card */
.cp-org__dept {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 22px 8px 0;         /* 8px sides = 16px between cards; 22px top = connector zone */
}

.cp-org__dept::before,
.cp-org__dept::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 22px;
    border-top: 2px solid #cfd2d8;   /* horizontal backbone */
}
.cp-org__dept::before { right: 50%; }
.cp-org__dept::after  { left: 50%; border-left: 2px solid #cfd2d8; }  /* stub down to the card */

/* trim the backbone ends at the first/last card centre */
.cp-org__dept:first-child::before { border: 0; }
.cp-org__dept:last-child::after   { border: 0; }
.cp-org__dept:last-child::before  { border-right: 2px solid #cfd2d8; }  /* stub for the last card */

.cp-org__node--dept {
    flex: 0 0 200px;        /* uniform width, never shrink → row can overflow */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .98rem;
}