/* ==========================================================================
   Page: about  (site/about/index.blade.php)
   --------------------------------------------------------------------------
   0. .ab-hero     breadcrumb, title, aim, count-up numbers | collage: arch
                   window + overlapping ring window + a floating tag
   1. .ab-intro    pull-quote on the logo's lines | numbered notes + tags
   2. .ab-pillars  slogan · vision · mission — arch-topped panels
   3. .ab-logo     the mark (draws itself) with numbered pins ↔ explanations;
                   .ab-style artistic style + brand colour swatches
   4. .ab-mosaic   portraits and colour blocks (the guideline's grid)
   5. .ab-chair    the chairman's word beside his ring portrait
   6. .ab-excel    what sets us apart — numbered rows
   ========================================================================== */

/* ── 0. Hero ─────────────────────────────────────────────────────────────── */
.ab-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--panel); }
.ab-hero__mark { position: absolute; z-index: -1; inset-inline-start: -8%; bottom: -6%; width: min(70vw, 900px); opacity: 0.18; pointer-events: none; }
.ab-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    min-height: calc(88svh - var(--header-h));
    padding-block: var(--space-10) var(--space-16);
}
.ab-hero__copy { display: grid; justify-items: start; gap: var(--space-4); }
.ab-hero__copy .crumbs { margin-bottom: var(--space-2); }
.ab-hero__title { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 200; line-height: 1.1; }
.ab-hero__text { max-width: 36rem; color: var(--ink-soft); font-size: var(--fs-lg); line-height: 2; }
.ab-hero__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); width: 100%; max-width: 40rem; margin-top: var(--space-4); }
.ab-hero__stats li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-3);
    border-top: 3px solid var(--accent);
    border-radius: 0 0 var(--r-md) var(--r-md);
    background: var(--card);
}
.ab-hero__stats strong { font-family: var(--font-display); font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 200; line-height: 1; }
.ab-hero__stats span { color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.5; }

/* the collage: a large arch, a ring overlapping its lower corner, a floating tag */
.ab-hero__collage { position: relative; justify-self: center; width: min(100%, 440px); padding-block: var(--space-12) var(--space-8); }
.ab-hero__main { width: 78%; margin-inline-start: auto; }
.ab-hero__small { position: absolute; inset-inline-start: 0; bottom: 0; width: 42%; }
.ab-hero__tag {
    position: absolute;
    inset-inline-end: -4%;
    bottom: 22%;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.6em 1.1em;
    border-radius: var(--r-pill);
    background: var(--card);
    box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--ink) 55%, transparent);
    font-size: var(--fs-sm);
    font-weight: 500;
}
@media (prefers-reduced-motion: no-preference) {
    .ab-hero__tag { animation: ab-float 5s var(--ease-out) infinite alternate; }
}
@keyframes ab-float { to { transform: translateY(-10px); } }
.ab-hero__rule { position: absolute; inset-inline: 0; bottom: 0; }

/* ── 1. Introduction ─────────────────────────────────────────────────────── */
.ab-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: clamp(2rem, 1rem + 5vw, 6rem);
}
.ab-intro__lead { position: sticky; top: calc(var(--header-h) + var(--space-8)); display: grid; gap: var(--space-5); }
.ab-intro__title { font-size: var(--fs-3xl); }
.ab-intro__quote {
    position: relative;
    overflow: hidden;
    margin: var(--space-2) 0 0;
    padding: var(--space-8) var(--space-8) calc(var(--space-8) + 60px);   /* room for the 7 lines below the text */
    border-radius: var(--r-xl);
    background: var(--aqua);
    color: var(--ink-deep);
}
.ab-intro__quote p { position: relative; font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); font-weight: 300; line-height: 1.7; }
.ab-intro__lines { position: absolute; inset-inline: 0; bottom: 18px; display: grid; gap: 5px; opacity: 0.55; }
.ab-intro__lines i { display: block; height: 1.5px; background: #fff; transform-origin: right; transition: transform 1.2s var(--ease-out); }
.ab-intro__lines i:nth-child(n) { transition-delay: calc(var(--reveal-delay, 0ms) + 300ms); }
@media (prefers-reduced-motion: no-preference) {
    .js .ab-intro__quote:not(.is-visible) .ab-intro__lines i { transform: scaleX(0); }
}

.ab-intro__notes { display: grid; gap: var(--space-4); }
.ab-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
}
.ab-note__num {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, #fff);
    box-shadow: 0 0 0 5px var(--card), 0 0 0 6.5px var(--accent);
    font-weight: 600;
}
.ab-note p { color: var(--ink-soft); font-size: var(--fs-lg); line-height: 2; }
.ab-intro__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ab-intro__tags li {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.5em 1.2em;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* ── 2. Slogan · vision · mission ────────────────────────────────────────── */
.ab-pillars__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.ab-pillar {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-12) var(--space-8) var(--space-10);
    border: 1px solid var(--line-strong);
    border-radius: 999px 999px var(--r-xl) var(--r-xl);   /* arch top — the س */
    background: var(--card);
    text-align: center;
    transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.ab-pillar::before {                                        /* accent arch line inside */
    content: "";
    position: absolute;
    inset: 10px 10px auto;
    height: 70%;
    border: 1.5px solid var(--accent);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
    opacity: 0.6;
    pointer-events: none;
}
.ab-pillar:hover { transform: translateY(-4px); border-color: var(--accent); }
.ab-pillar__icon {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, #fff);
    box-shadow: 0 0 0 6px var(--card), 0 0 0 7.5px var(--accent);
    color: var(--ink);
    font-size: 1.5rem;
}
.ab-pillar__label { font-size: var(--fs-2xl); }
.ab-pillar__text { color: var(--ink-soft); font-size: var(--fs-lg); line-height: 1.9; }
.ab-pillar__num { position: absolute; inset-inline-end: var(--space-6); bottom: var(--space-4); color: var(--line-strong); font-size: 2.5rem; font-weight: 300; }

/* ── 3. Logo meaning ─────────────────────────────────────────────────────── */
.ab-logo__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: clamp(2rem, 1rem + 4vw, 5rem); }
.ab-logo__mark {
    position: relative;
    margin: 0;
    padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
    border-radius: var(--r-xl);
    background: var(--panel);
    direction: ltr;                                         /* the pins use the logo's own left/right */
}
.ab-logo__mark img { width: 100%; height: auto; }
.ab-logo__pin {
    position: absolute;
    left: calc(clamp(1.5rem, 1rem + 3vw, 3.5rem) + (100% - 2 * clamp(1.5rem, 1rem + 3vw, 3.5rem)) * var(--x) / 100%);
    top: calc(clamp(2rem, 1rem + 4vw, 4rem) + var(--y));
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-latin);
    font-size: 0.85rem;
    font-weight: 600;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--second) 50%, transparent);
    transition: transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-out);
    cursor: default;
}
.ab-logo__pin.is-active { transform: translate(-50%, -50%) scale(1.25); background: var(--second-strong); }
@media (prefers-reduced-motion: no-preference) {
    .ab-logo__pin { animation: pin-pulse 2.6s var(--ease-out) infinite; }
    .ab-logo__pin[data-part="2"] { animation-delay: 0.4s; }
    .ab-logo__pin[data-part="3"] { animation-delay: 0.8s; }
}
@keyframes pin-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--second) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }

.ab-logo__parts { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ab-part {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--card);
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.ab-part.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, #fff); }
.ab-part__num {
    display: grid; place-items: center; flex-shrink: 0;
    width: 40px; height: 40px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    font-family: var(--font-latin);
    font-weight: 600;
}
.ab-part__title { margin-bottom: var(--space-1); font-size: var(--fs-lg); font-weight: 400; }
.ab-part__text { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.9; }

.ab-style { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); margin-top: var(--space-12); padding-top: var(--space-10); border-top: 1px solid var(--line); }
.ab-style__title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--fs-xl); }
.ab-style__text p { color: var(--ink-soft); line-height: 2; }
.ab-style__label { margin-bottom: var(--space-3); color: var(--ink-faint); font-size: var(--fs-sm); }
.ab-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.ab-swatches li { display: grid; gap: var(--space-2); justify-items: center; font-size: 0.66rem; color: var(--ink-faint); }
.ab-swatches__chip { width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--card), 0 0 0 5px var(--line); }

/* ── 4. Mosaic ───────────────────────────────────────────────────────────── */
.ab-mosaic__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ab-tile { aspect-ratio: 1 / 1.05; overflow: hidden; }
.ab-tile--photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-out); }
.ab-tile--photo:hover img { scale: 1.06; }
.ab-tile--text {
    display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
    padding: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    background: var(--tone);
    color: var(--ink-deep);
}
.ab-tile--text span { font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.25rem); }
.ab-tile--text strong { font-family: var(--font-display); font-size: clamp(1.15rem, 0.9rem + 1vw, 1.7rem); font-weight: 500; line-height: 1.35; }
.ab-tile--light { color: #fff; }
.ab-tile--logo { display: grid; place-items: center; padding: var(--space-8); background: var(--tone); }
.ab-tile--logo img { width: 80%; }

/* ── 5. Chairman ─────────────────────────────────────────────────────────── */
.ab-chair__grid { display: grid; grid-template-columns: clamp(220px, 24vw, 330px) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 1rem + 5vw, 6rem); }
.ab-chair__window { margin-top: var(--space-10); }
.ab-chair__copy { display: grid; gap: var(--space-5); }
.ab-chair__quote { position: relative; margin: 0; font-family: var(--font-display); font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); font-weight: 300; line-height: 1.7; }
.ab-chair__quote p + p { margin-top: var(--space-4); }
.ab-chair__mark { width: 44px; margin-bottom: var(--space-4); fill: var(--second); }
.ab-chair__sign { display: grid; gap: 2px; padding-inline-start: var(--space-4); border-inline-start: 3px solid var(--indigo); }
.ab-chair__sign strong { font-size: var(--fs-lg); }
.ab-chair__sign span { color: var(--ink-soft); font-size: var(--fs-sm); }

/* ── 6. What sets us apart ───────────────────────────────────────────────── */
.ab-excel__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-10); margin: 0; padding: 0; list-style: none; }
.ab-excel__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px dashed var(--line-strong); }
.ab-excel__num {
    display: grid; place-items: center; flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 25%, #fff);
    box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--accent);
    font-size: 0.85rem; font-weight: 600;
}
.ab-excel__text { font-size: var(--fs-lg); line-height: 1.7; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .ab-hero__grid, .ab-intro__grid, .ab-chair__grid, .ab-logo__grid, .ab-style { grid-template-columns: 1fr; }
    .ab-hero__grid { min-height: 0; padding-block: var(--space-8) var(--space-12); }
    .ab-hero__collage { width: min(86%, 320px); padding-block: var(--space-8) var(--space-4); }
    .ab-hero__tag { font-size: var(--fs-xs); }
    .ab-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-intro__lead { position: static; }
    .ab-chair__window { width: min(62%, 240px); justify-self: center; }
    .ab-pillars__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
    .ab-mosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-tile--logo { grid-column: 1 / -1; aspect-ratio: auto; padding: var(--space-10); }
    .ab-tile--logo img { width: min(60%, 260px); }
    .ab-excel__list { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .ab-logo__pin { width: 26px; height: 26px; font-size: 0.72rem; }
    .ab-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ab-intro__quote { font-size: var(--fs-lg); }
}