/* =============================================================
   ABOUT-PRONAT.CSS — "About Pronat" page
   Reuses design tokens + shared classes from front-page.css
   (--fp-navy, --fp-red, --fp-text, --fp-bg-light, --fp-white,
    --fp-font-heading, --fp-font-body, --fp-heading-size,
    --fp-body-size, --fp-section-py, .container-big,
    .fp-section-bar, .fp-section-title, .fp-hero)
   ============================================================= */
:root { 
    --fp-section-py:    clamp(60px, 10vw, 150px);
}
.fp-about-page {
    overflow-x: hidden;
    background: var(--fp-bg-light);
}

/* ── Section bar left-aligned variant ──────────────────────── */
.fp-section-bar--left {
    margin-left: 0;
    margin-right: auto;
}

/* ── 1. HERO ────────────────────────────────────────────────── */
.fp-hero--about {
    background-size: cover;
    background-color: var(--fp-navy);
    background-repeat: no-repeat;
    background-position: 50% 100%;
   
    min-height: clamp(320px, 31.8vw, 610px); 
}

.fp-hero--about .fp-hero__title {
    text-align: center;
}

/* Base .fp-hero::before is a photo-darkening gradient; About's hero is a
   flat navy fill like Quality/Services (which also disable it), so left
   enabled it reads as a mismatched, differently-tinted navy shade. */
.fp-hero--about::before {
    display: none;
}

/* ── 2. OUR EXPERTISE ───────────────────────────────────────── */
/* The hero's own ::after now provides the curved transition into this
   section (shared .fp-hero mechanism, front-page.css) — this just needs
   to be a plain section in normal flow with the matching background.
   The negative margin-bottom + bottom rounding is unrelated: it's this
   section's own hand-off into .fp-about (navy) below. */
.fp-expertise {
    position: relative;
    background: var(--fp-bg-light);
    border-radius: 0 0 60px 60px;
    margin-bottom: -60px;
    /* Fixed --fp-hero-gap (front-page.css), not var(--fp-section-py):
       About redefines that token to a taller clamp for its own later
       sections, but the very first section under the hero needs to match
       Quality/Services/Division exactly — a shared literal value, not
       separately-tuned clamp() curves that can drift out of sync. */
    padding-block: var(--fp-hero-gap);
}

.fp-expertise__desc {
    font-family: var(--fp-font-body);
    font-size: var(--fp-body-size);
    color: var(--fp-text);
    line-height: 1.6;
    margin-bottom: 24px;
}

.fp-expertise__desc p {
    margin: 0;
}

.fp-expertise__desc p + p {
    margin-top: 1em;
}

.fp-expertise__inner {
    display: flex;
    justify-content: center;
}

/* Overrides for the inline <style> shipped with template-parts/expertise-wheel.php
   (higher specificity so these win regardless of source order) */
.fp-expertise .fp-expertise__wheel .wheel-root {
    /* Gap between the wheel and the info box; the layout below keeps its
       midpoint pinned to the horizontal center of the section. */
    --wheel-gap: 9vw;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--wheel-gap);
    padding: 32px 16px;
}

/* The wheel's column spans exactly half the row minus half the gap, with the
   wheel hugging its right edge; the info box starts right after the gap and
   soaks up the rest of the row via margin-right:auto — so the gap's midpoint
   sits on the center line even though the two blocks differ in width. */
.fp-expertise .fp-expertise__wheel .wheel-svg-wrap {
    flex: 0 0 calc(50% - var(--wheel-gap) / 2);
    width: auto;
    height: 400px;
    display: flex;
    justify-content: flex-end;
}

.fp-expertise .fp-expertise__wheel .wheel-svg-wrap svg {
    width: 400px;
    height: 400px;
    max-width: 100%;
}

.fp-expertise .fp-expertise__wheel .info-box {
    flex: 0 1 auto;
    width: 495px;
    max-width: calc(50% - var(--wheel-gap) / 2);
    margin-right: auto;
    height: 198px;
    transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.25s ease, height 0.28s ease, min-height 0.28s ease, padding 0.28s ease, margin 0.28s ease;
}

/* Collapse the info box to zero footprint until a wheel segment is selected,
   so it doesn't leave an empty gap next to (or below, on mobile) the wheel. */
.fp-expertise .fp-expertise__wheel .info-box:not(.show) {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border-left-width: 0;
    overflow: hidden;
}

.fp-expertise .fp-expertise__wheel .info-title {
    font-family: var(--fp-font-body);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.fp-expertise .fp-expertise__wheel .info-text {
    font-family: var(--fp-font-body);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: #1a1a1a;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

/* ── 3. ABOUT PRONAT + TIMELINE ─────────────────────────────── */
.fp-about {
    background-color: var(--fp-navy);
    /* Reset: front-page.css styles .fp-about too, incl. `padding:80px 40px` at
       ≤991.98px which would leak a 40px horizontal inset. Content inset comes
       from .container-big, so keep this section's own inline padding at 0. */
    padding-inline: 0;
    padding-top: var(--fp-section-py);
    /* room for the straddling CTA banner below the timeline */
 
    height: auto;
    max-height: none;
    border-radius: 60px 60px 0 0;
    display: block;
    position: relative;
    z-index: 2;
}

/* bg image lives on ::before so it can fade independently of the navy fill;
   z-index:-1 keeps it under the content but above the section background
   (safe: .fp-about's own z-index:2 creates the stacking context). */
.fp-about::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/about-frame.svg');
    background-size: 115%;
    background-position: right;
    background-repeat: no-repeat;
    border-radius: inherit;
    opacity: 0.5;
    pointer-events: none;
}

.fp-about .container {
    max-width: var(--fp-container-max);
    /* style.css sets a global `.container-big{position:relative}` which would
       otherwise become the sticker's containing block instead of this section;
       force it back to static so `.fp-sticker`'s absolute offsets are relative
       to `.fp-about` (which has the padding-bottom buffer for the sticker). */
    position: static;
}

.fp-about__title {
    color: var(--fp-white);
}

.fp-about__body {
    max-width: 1126px;
    margin: 0 auto;
    color: var(--fp-white);
    font-size: var(--fp-body-size);
    line-height: 1.6;
    text-align: left;
}

.fp-about__body p {
    margin-bottom: 1.2em;
    text-align: justify;
    font-size: 20px;
}

.fp-about__body p:last-child {
    margin-bottom: 0;
}

/* Timeline */
.fp-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    /* Figma timeline zone is ~315px tall (labels 22/33 two lines beyond the
       46px stem + 31px ring on each side of the line). */
    height: clamp(280px, 24vw, 330px);
    margin-top: clamp(40px, 6vw, 70px);
    padding: 0 8px;
}

.fp-timeline__line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
}

.fp-timeline__node {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* Node marker — matches Figma "Group 16687": a 31px outlined ring with a
   solid 10px dot inside, joined to the main line by a thin 46px stem.
   Flipped above/below the line per node position. */
.fp-timeline__dot {
    position: absolute;
    left: 50%;
    width: 31px;
    height: 31px;
    border: 1px solid var(--fp-white);
    border-radius: 50%;
    background: transparent;
    transform: translateX(-50%);
    z-index: 2;
}

.fp-timeline__dot::after {
    /* solid centre dot */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: var(--fp-white);
    border-radius: 50%;
}

.fp-timeline__dot::before {
    /* stem connecting the ring to the main line */
    content: '';
    position: absolute;
    left: 50%;
    width: 1px;
    height: 46px;
    background: var(--fp-white);
}

.fp-timeline__node--above .fp-timeline__dot {
    bottom: calc(50% + 46px);
}

.fp-timeline__node--above .fp-timeline__dot::before {
    top: 100%;
}

.fp-timeline__node--below .fp-timeline__dot {
    top: calc(50% + 46px);
}

.fp-timeline__node--below .fp-timeline__dot::before {
    bottom: 100%;
}

/* Figma: years Roboto Bold 29/33, labels Roboto Regular 22/33, both white */
.fp-timeline__year {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--fp-font-body);
    font-weight: 700;
    font-size: clamp(20px, 1.6vw, 29px);
    line-height: 1.15;
    color: var(--fp-white);
    white-space: nowrap;
}

.fp-timeline__label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    text-align: center;
    font-family: var(--fp-font-body);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 22px);
    line-height: 1.4;
    color: var(--fp-white);
}

/* Text sits beyond the ring marker (46px stem + 31px ring + gap) */
.fp-timeline__node--above .fp-timeline__label {
    bottom: calc(50% + 87px);
}

.fp-timeline__node--above .fp-timeline__year {
    top: calc(50% + 10px);
}

.fp-timeline__node--below .fp-timeline__year {
    bottom: calc(50% + 10px);
}

.fp-timeline__node--below .fp-timeline__label {
    top: calc(50% + 87px);
}

/* ── CTA stickers (About = right, Leverage = left) ──────────── */
/* The chevron-notched banner shape lives on ::before (clip-path'd) rather
   than on the <a> itself, so the ::after "folded corner" tail can hang
   below the banner's bottom edge without being clipped away by the
   banner's own clip-path (clip-path on an element also clips its
   descendants/pseudo-elements that overflow its box). */
/* Figma "stickers" spec: banner 384×161, chevron notch tip at ~24% of the
   width, text Roboto SemiBold 29/36 (2 lines), dark fold ~29×26 hanging
   under the OUTER bottom corner. */
.fp-sticker {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    width: min(384px, 92vw);
    min-height: clamp(120px, 11vw, 161px);
    padding-top: 16px;
    padding-bottom: 16px;
    text-decoration: none;
    bottom: clamp(-80px, -5.5vw, -40px);
}

.fp-sticker::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fp-red);
    z-index: -1;
}

.fp-sticker::after {
    content: '';
    position: absolute;
    top: 100%;
    width: 29px;
    height: 26px;
    background: #8c0002;
}

.fp-sticker__text {
    font-family: var(--fp-font-body);
    font-weight: 600;
    font-size: clamp(20px, 1.6vw, 29px);
    line-height: 1.25;
    color: var(--fp-white);
    max-width: 280px; /* Figma: 2-line wrap (218px right / 276px left) */
}

.fp-sticker--right {
    right: 0;
    /* fixed px: % padding would resolve against the section width, not the
       banner (Figma: text starts ~110px in, past the 24%-deep notch) */
    padding-left: 112px;
    padding-right: 30px;
}

.fp-sticker--right::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 24% 50%);
}

.fp-sticker--right::after {
    right: 0;
    /* ribbon fold: vertical outer edge, sloping inner edge */
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.fp-sticker--left {
    left: 0;
    padding-left: 40px;
    padding-right: 112px;
}

.fp-sticker--left::before {
    clip-path: polygon(0% 0%, 100% 0%, 76% 50%, 100% 100%, 0% 100%);
}

 
.fp-sticker--left::after {
    left: 0;
    /* mirrored ribbon fold */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.fp-sticker:hover .fp-sticker__text {
    text-decoration: underline;
}

/* ── 4. OUR LEVERAGE ────────────────────────────────────────── */
.fp-leverage {
    background: #F7F7F7;
    padding-top: var(--fp-section-py);
    /* room for the 161px CTA banner sitting above the 60px markets overlap */
    padding-bottom: calc(var(--fp-section-py) + 160px);
    position: relative;
    z-index: 1;
}

.fp-leverage .container {
    /* see note on .fp-about .container: style.css's global
       `.container-big{position:relative}` would otherwise become the
       sticker's containing block instead of this section. */
    position: static;
}

.fp-leverage__grid {
    margin-top: clamp(20px, 3vw, 40px);
}

.fp-leverage__card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fp-leverage__icon {
    width: 80px;
    height: 80px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-leverage__icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.fp-leverage__card-title {
    font-family: var(--fp-font-body);
    font-weight: 700;
    font-size: clamp(20px, 1.8vw, 32px);
    color: var(--fp-navy);
    margin-bottom: 14px;
    line-height: 1.2;
}

.fp-leverage__card-text {
    font-family: var(--fp-font-body);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 19px);
    color: var(--fp-text);
    line-height: 1.5;
    max-width: 390px;
    margin: 0 auto;
}

.fp-leverage__card-text p {
    margin: 0;
}

.fp-leverage__card-text p + p {
    margin-top: 1em;
}
.fp-leverage .col-lg-4{
    max-width: 410px;
}
/* ── 5. MARKETS ─────────────────────────────────────────────── */
.fp-markets {
    background: var(--fp-navy);
    padding-block: var(--fp-section-py);
    border-radius: 60px 60px 0 0;
    position: relative;
    z-index: 0; 
}

.fp-markets__title {
    color: var(--fp-white);
}

.fp-markets__body {
    color: var(--fp-white);
    max-width: 640px;
}

.fp-markets__body p {
    font-family: var(--fp-font-body);
    font-size: var(--fp-body-size);
    line-height: 1.6;
    margin-bottom: 0;
}

.fp-markets__cards {
    position: relative;
    width: 600px;
    max-width: 100%;
    min-height: 545px;
    margin-inline: auto;
}

/* .fp-markets__card is now just a staggered-position wrapper around a
   shared .division-card (see template-parts/division-card.php) — the card's
   own visuals (background, overlay, logo, hover) come from style.css. */
.fp-markets__card {
    display: block;
    width: 340px;
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}

/* style.css sets a global .division-card{height:300px}; constrain it back to
   the Figma proportions (340×225) within the markets stagger only. These
   overrides are scoped under .fp-markets__card so the homepage cards are
   untouched. */
.fp-markets__card .division-card {
    height: 225px;
}

/* Scale the shared card's inner artwork down to the smaller market card
   (Figma shows the wordmark ~174px wide on these cards). */
.fp-markets__card .card-content-logo-svg {
    left: 28px;
    bottom: 28px;
}

.fp-markets__card .card-content-logo-svg svg {
    width: 174px;
    height: auto;
}

.fp-markets__card .card-content-svg-item {
    max-height: 130px;
}

.fp-markets__card .card-content-svg-item svg {
    width: 230px;
    max-height: 130px;
}

.fp-markets__card .division-card:hover .card-content-logo-svg {
    bottom: 40px;
}

/* ── 6. GALLERY ─────────────────────────────────────────────── */
.fp-gallery {
    background: var(--fp-white);
    padding-block: var(--fp-section-py);
}

.fp-gallery__carousel {
    position: relative;
    max-width: 1660px;
    margin: clamp(24px, 3vw, 48px) auto 0;
}

.fp-gallery-swiper {
    padding: 24px 4px 24px;
}

/* Swiper owns .swiper-slide's transform, so the centered-slide emphasis is
   applied to the inner .fp-gallery__item wrapper instead: the whole card
   (photo + caption + rounded corners) scales down on the side slides and a
   silver #C0C0C0 wash covers them; the active centered slide is full size
   with no wash (per design). */
.fp-gallery__slide {
    display: flex;
    align-items: center;
}

.fp-gallery__item {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    transform: scale(0.835);
    transition: transform 0.4s ease;
}

.fp-gallery-swiper .swiper-slide-active .fp-gallery__item {
    transform: scale(1);
}

.fp-gallery__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #C0C0C0;
    opacity: 0.6;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.fp-gallery-swiper .swiper-slide-active .fp-gallery__item::after {
    opacity: 0;
}

.fp-gallery__item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.fp-gallery__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 20px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    color: var(--fp-white);
    font-family: var(--fp-font-body);
    font-size: clamp(20px, 1.9vw, 33px);
    line-height: 1.2;
    text-align: center;
    z-index: 2; /* keep the caption readable above the silver wash */
}

.fp-gallery-prev,
.fp-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--fp-white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: var(--fp-navy);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Arrows sit over the CENTER of the left/right side slides (per design).
   With an integer slidesPerView of 3, each slide slot is a third of the
   carousel, so the side-slide centers are 1/6 in from each edge. */
.fp-gallery-prev {
    left: 16.666%;
    transform: translate(-50%, -50%);
}

.fp-gallery-next {
    right: 16.666%;
    transform: translate(50%, -50%);
}

.fp-gallery-prev:hover,
.fp-gallery-next:hover {
    background: var(--fp-navy);
    color: var(--fp-white);
}
.fp-markets__card--1{
    z-index: 3
}
.fp-markets__card--2{
    z-index: 2
}
.fp-markets__card--3{
    z-index: 1
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (min-width: 992px) {
    /* Staggered slots, Figma proportions for 340×225 cards. */
    .fp-markets__card--1 {
        top: 0;
        right: 0;
        position: absolute;
    }

    .fp-markets__card--2 {
        top: 115px;
        left: 0;
        position: absolute;
    }

    .fp-markets__card--3 {
        top: 300px;
        right: 60px;
        position: absolute;
    }
}

@media (max-width: 991.98px) {
    .fp-expertise{
        border-radius: 0;
        margin: 0;
        max-width: 100%;
    }
    .fp-about-page{
            background: var(--fp-bg-light);
    }
    .fp-about::before {
        background-size: 415%;
        background-position: right 33% top 28%;
    }
    .fp-about__body p {
        margin-bottom: 1.2em;
        text-align: justify;
        font-size: 16px;
    }
    .fp-expertise .fp-expertise__wheel .wheel-root {
        flex-direction: column;
    }

    .fp-expertise .fp-expertise__wheel .wheel-svg-wrap {
        flex: 0 0 auto;
        display: block;
        width: 100%;
        max-width: 340px;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
    }

    .fp-expertise .fp-expertise__wheel .wheel-svg-wrap svg {
        width: 100%;
        height: 100%;
    }

    .fp-expertise .fp-expertise__wheel .info-box {
        flex: 0 0 auto;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        height: auto;
        min-height: 170px;
    }

    /* Timeline → vertical: same marker construction as desktop, rotated 90° —
       vertical spine on the left, a horizontal stem off it, ring at the stem's
       end, text after the ring. Geometry: spine at x8 (2px wide), stem x10–34,
       ring x34–51, text from x64. */
    .fp-timeline {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        gap: 30px;
        padding: 10px 0 10px 64px;
        margin-top: clamp(32px, 5vw, 56px);
    }

    .fp-timeline__line {
        left: 8px;
        right: auto;
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
    }

    .fp-timeline__node {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-left: 0;
    }
    .fp-hero--about{
 background-size: auto;
    }

    /* Doubled selectors so these beat the desktop --above/--below placement
       rules, which otherwise out-rank a bare .fp-timeline__dot override. */
    .fp-timeline__node--above .fp-timeline__dot,
    .fp-timeline__node--below .fp-timeline__dot {
        top: 3px;
        bottom: auto;
        left: -30px;
        width: 17px;
        height: 17px;
        transform: none;
    }

    .fp-timeline__dot::after {
        width: 7px;
        height: 7px;
        margin: -3.5px 0 0 -3.5px;
    }

    /* Stem: horizontal, running from the spine to the ring */
    .fp-timeline__node--above .fp-timeline__dot::before,
    .fp-timeline__node--below .fp-timeline__dot::before {
        top: 50%;
        bottom: auto;
        left: auto;
        right: 100%;
        width: 25px;
        height: 1px;
    }

    .fp-timeline__year,
    .fp-timeline__label {
        position: static;
        transform: none;
        text-align: left;
        width: auto;
        max-width: none;
    }

    .fp-timeline__year {
        order: 1;
        margin-bottom: 4px;
    }

    .fp-timeline__label {
        order: 2;
    }

    /* Markets cards → static stack */
    .fp-markets__cards {
        min-height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .fp-markets__card {
        position: static;
        width: 100%;
        max-width: 360px;
    }

    .fp-markets .row.g-5 {
        row-gap: 40px;
    }
}

@media (max-width: 575.98px) {
    .fp-expertise .fp-expertise__wheel .info-box {
        width: 100%;
    }

    .fp-gallery-prev,
    .fp-gallery-next {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .fp-sticker {
        min-height: 96px;
        bottom: 0;
        transform: translateY(50%);
    }

    .fp-sticker--right {
        padding-left: 88px;
        padding-right: 20px;
        text-align: right;
    }
    .fp-sticker{
        width: min(384px, 72vw);
    }
    .fp-hero--about{
        background-size: 276%; 
        background-position: center right;
    }
    .fp-markets, .fp-leverage{
            padding: 120px 10px;
    }
    .fp-sticker--left {
        text-align: left;
        padding-left: 20px;
        padding-right: 88px;
    }

    .fp-sticker__text {
        font-size: 17px;
        max-width: 180px;
    }

    .fp-sticker::after {
        width: 20px;
        height: 18px;
    }
}