/* «من نحن»: the company's story told while scrolling (owner 2026-10-31). Loaded on this page only, on the site's own
   tokens. Motion is transitions and scroll-driven animations on opacity and transform only; what is held back carries
   .ab-wait, which only semiramis-about.js adds, so without the script the whole story stands. Founder pictures are
   small originals: they stay framed at about their real size and are never stretched. */
.ab-story {
    --ab-space: clamp(64px, 10vw, 136px);
    --ab-ghost: #f1e4c7;
    --ab-frame: #fffdf8;
    overflow-x: clip;
    font-size: calc(15px * var(--scale, 1))
}
:root[data-theme=dark] .ab-story {
    --ab-ghost: #3a3222;
    --ab-frame: #2a271e
}
.ab-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}
.ab-eyebrow {
    margin: 0 0 10px;
    color: var(--red);
    font-size: calc(14px * var(--scale, 1));
    font-weight: 500;
    line-height: 1.6
}
.ab-title {
    margin: 0;
    font-size: clamp(calc(22px * var(--scale, 1)), 2.8vw, calc(34px * var(--scale, 1)));
    font-weight: 400;
    line-height: 1.45;
    text-wrap: balance
}
.ab-text {
    margin: 16px 0 0;
    max-width: 58ch;
    color: var(--muted);
    font-size: calc(16px * var(--scale, 1));
    line-height: 2
}
[dir=ltr] .ab-text {
    line-height: 1.8
}
.ab-anchor {
    display: block;
    scroll-margin-block-start: calc(var(--header-h) + 24px)
}

/* What is held back until it is reached. */
.ab-founder-words,.ab-station,.ab-stat,.ab-section-head,.ab-value,.ab-today-words,.ab-notice {
    transition: opacity 800ms var(--ease), transform 800ms var(--ease);
    transition-delay: calc(var(--n, 0) * 110ms)
}
.ab-wait:not(.ab-photo,.ab-today-pictures) {
    opacity: 0;
    transform: translateY(26px)
}

/* 1. The opening: words on honey, the year behind them. */
.ab-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: clamp(420px, 72svh, 640px);
    margin-block: 4px 0;
    padding: clamp(36px, 6vw, 72px) clamp(22px, 5vw, 72px) clamp(52px, 7vw, 84px);
    border-radius: 28px;
    background: var(--plate);
    overflow: hidden
}
.ab-hero::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 16px;
    background: radial-gradient(circle at 50% 100%, var(--canvas) 11px, transparent 11.5px) 50% 100%/26px 16px repeat-x
}
.ab-hero-year {
    position: absolute;
    z-index: -1;
    inset-block-end: -.1em;
    inset-inline-start: -.02em;
    color: var(--ab-ghost);
    font-size: clamp(120px, 29vw, 440px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    pointer-events: none;
    user-select: none;
    font-variant-numeric: tabular-nums
}
.ab-hero-words {
    position: relative;
    max-width: 660px
}
.ab-hero h1 {
    margin: 0;
    font-size: clamp(calc(28px * var(--scale, 1)), 4.1vw, calc(50px * var(--scale, 1)));
    font-weight: 400;
    line-height: 1.4;
    text-wrap: balance
}
.ab-hero-line {
    max-width: 48ch;
    margin: 16px 0 0;
    color: var(--muted);
    font-size: calc(17px * var(--scale, 1));
    line-height: 1.9
}
.ab-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-block-start: 22px;
    color: var(--ink);
    font-size: calc(14px * var(--scale, 1))
}
.ab-hint .icon {
    width: 18px;
    height: 18px;
    color: var(--red)
}
.ab-hero-tin {
    flex: none;
    width: clamp(120px, 23vw, 300px);
    aspect-ratio: 1;
    margin-inline-end: clamp(0px, 4vw, 56px);
    border-radius: 50%;
    background: var(--ab-frame);
    box-shadow: 0 26px 46px -18px color-mix(in srgb, var(--shadow) 42%, transparent);
    overflow: hidden
}
/* The tin's picture has white around it: the circle shows the tin itself. */
.ab-hero-tin img {
    display: block;
    width: 126%;
    max-width: none;
    height: 126%;
    margin: -13%;
    object-fit: contain
}
@media(prefers-reduced-motion:no-preference) {
    .ab-hint .icon {
        animation: ab-nudge 2.2s ease-in-out infinite
    }
    .ab-hero-tin {
        animation: ab-tin-in 1300ms var(--ease) 200ms both
    }
}
@keyframes ab-tin-in {
    from {
        opacity: 0;
        transform: translateY(26px) rotate(-22deg) scale(.94)
    }
}
@keyframes ab-nudge {
    50% {
        transform: translateY(5px)
    }
}

/* 2. The founder: three framed prints that settle into place. */
.ab-founder {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(32px, 6vw, 88px);
    margin-block-start: var(--ab-space)
}
.ab-collage {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 600/470;
    justify-self: center
}
.ab-photo {
    position: absolute;
    margin: 0;
    padding: 8px 8px 0;
    border-radius: 6px;
    background: var(--ab-frame);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 18%, transparent), 0 18px 34px -14px color-mix(in srgb, var(--shadow) 34%, transparent);
    rotate: var(--r, 0deg);
    transition: opacity 900ms var(--ease), scale 900ms var(--ease), rotate 900ms var(--ease);
    transition-delay: calc(var(--n, 0) * 170ms)
}
.ab-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px
}
.ab-photo figcaption {
    padding: 6px 2px 8px;
    color: var(--muted);
    font-size: clamp(11px, 1.8vw, calc(13px * var(--scale, 1)));
    line-height: 1.5;
    text-align: center
}
.ab-photo--1 {
    --r: -5deg;
    z-index: 1;
    width: 36%;
    inset-inline-start: 0;
    inset-block-start: 12%
}
.ab-photo--2 {
    --r: 1.5deg;
    z-index: 3;
    width: 40%;
    inset-inline-start: 30%;
    inset-block-start: 0
}
.ab-photo--3 {
    --r: 5deg;
    z-index: 2;
    width: 38%;
    inset-inline-end: 0;
    inset-block-start: 22%
}
[dir=rtl] .ab-photo--1 {
    --r: 5deg
}
[dir=rtl] .ab-photo--3 {
    --r: -5deg
}
.ab-collage--1 .ab-photo,.ab-collage--2 .ab-photo--2 {
    inset-inline-start: 28%
}
.ab-photo.ab-wait {
    opacity: 0;
    scale: .92;
    rotate: 0deg
}
@media(hover:hover) and (pointer:fine) {
    .ab-photo:hover {
        z-index: 4;
        rotate: 0deg;
        transition-delay: 0ms;
        transition-duration: 320ms
    }
}

/* 3. The journey: the side holds the year being read, the line fills beside the stations. */
.ab-journey {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 6vw, 88px);
    margin-block-start: var(--ab-space)
}
.ab-journey-head {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 32px)
}
.ab-now {
    margin: 20px 0 0;
    color: var(--red);
    font-size: clamp(72px, 9vw, calc(128px * var(--scale, 1)));
    font-weight: 300;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}
.ab-now.is-long {
    font-size: clamp(44px, 5.2vw, calc(76px * var(--scale, 1)))
}
.ab-track {
    position: relative;
    min-width: 0
}
.ab-track::before,.ab-track-fill {
    content: "";
    position: absolute;
    inset-block: 30px 0;
    inset-inline-start: 16px;
    width: 2px;
    border-radius: 2px
}
.ab-track::before {
    background: var(--line)
}
.ab-track-fill {
    display: block;
    background: var(--red);
    transform-origin: top;
    transform: scaleY(1);
    will-change: transform
}
.ab-stations {
    margin: 0;
    /* Room for the current dot's soft ring, which the page's edge would cut on a phone. */
    padding: 0;
    padding-inline-start: 8px;
    list-style: none
}
.ab-station {
    position: relative;
    padding-inline-start: 44px;
    padding-block: 10px clamp(44px, 8vh, 92px)
}
.ab-station:last-child {
    padding-block-end: 0
}
/* The line ends at the last station's dot. */
.ab-station:last-child::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 40px 0;
    width: 18px;
    background: var(--canvas)
}
.ab-dot {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 26px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--red);
    z-index: 1;
    border-radius: 50%;
    background: var(--canvas);
    transition: background var(--fast) var(--ease), box-shadow 320ms var(--ease), border-color var(--fast)
}
.ab-year {
    margin: 0;
    font-size: clamp(34px, 4.4vw, calc(54px * var(--scale, 1)));
    font-weight: 300;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    transition: color 320ms var(--ease)
}
.ab-station h3 {
    margin: 6px 0 0;
    font-size: calc(19px * var(--scale, 1));
    font-weight: 500;
    line-height: 1.6
}
.ab-station-text {
    max-width: 56ch;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: calc(15px * var(--scale, 1));
    line-height: 1.95
}
.ab-station-picture {
    display: block;
    width: auto;
    max-width: min(100%, 460px);
    height: auto;
    margin-block-start: 16px;
    border-radius: 12px
}
.ab-live .ab-dot {
    border-color: var(--line)
}
.ab-live .ab-year {
    color: var(--muted)
}
.ab-live .is-on .ab-dot {
    border-color: var(--red);
    background: var(--red)
}
.ab-live .is-on .ab-year {
    color: var(--ink)
}
@media(max-width:960px) {
    .ab-live .is-now .ab-year {
        color: var(--red)
    }
}
.ab-live .is-now .ab-dot {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 18%, transparent)
}

/* 4. Numbers, at the journey's end (owner 2026-10-31: no loud block): a soft honey surface, a small arch of the sweets,
   one sentence that gives them meaning, and crimson on the figures alone. */
.ab-numbers {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 3vw, 36px);
    margin-block-start: clamp(56px, 7vw, 96px);
    padding: clamp(32px, 5.5vw, 76px) clamp(22px, 5.5vw, 80px) clamp(44px, 6vw, 84px);
    border-radius: 28px;
    background: var(--plate);
    overflow: hidden
}
.ab-numbers::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 16px;
    background: radial-gradient(circle at 50% 100%, var(--canvas) 11px, transparent 11.5px) 50% 100%/26px 16px repeat-x
}
.ab-numbers--picture {
    grid-template-columns: clamp(170px, 19vw, 248px) minmax(0, 1fr);
    grid-template-areas: "arch line" "arch stats";
    column-gap: clamp(36px, 6vw, 88px);
    align-items: center
}
.ab-numbers-line {
    grid-area: line;
    align-self: end;
    max-width: 30em;
    font-size: clamp(calc(19px * var(--scale, 1)), 2.1vw, calc(27px * var(--scale, 1)));
    line-height: 1.7;
    transition: opacity 800ms var(--ease), transform 800ms var(--ease)
}
.ab-numbers-arch {
    grid-area: arch;
    aspect-ratio: 248/310;
    border-radius: 999px 999px 20px 20px;
    background: var(--elevated);
    outline: 1.5px solid color-mix(in srgb, var(--red) 26%, transparent);
    outline-offset: 6px;
    overflow: hidden
}
.ab-numbers-arch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 72%
}
.ab-stats {
    grid-area: stats;
    align-self: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none
}
.ab-stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-block-start: 14px;
    border-block-start: 1px solid color-mix(in srgb, var(--ink) 14%, transparent)
}
.ab-stat-prefix,.ab-stat-label {
    color: var(--muted);
    font-size: calc(14px * var(--scale, 1));
    line-height: 1.7
}
.ab-stat-number {
    color: var(--red);
    font-size: clamp(42px, 4.6vw, calc(62px * var(--scale, 1)));
    font-weight: 300;
    line-height: 1.25;
    font-variant-numeric: tabular-nums
}

/* 5. Values. */
.ab-values {
    margin-block-start: var(--ab-space)
}
.ab-section-head {
    margin-block-end: clamp(24px, 3vw, 36px)
}
.ab-value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--gap)
}
.ab-value {
    min-width: 0;
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: var(--radius);
    background: var(--plate)
}
.ab-value:nth-child(even) {
    background: var(--second)
}
.ab-value-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--elevated);
    color: var(--red)
}
.ab-value-icon .icon {
    width: 24px;
    height: 24px
}
.ab-value h3 {
    margin: 16px 0 0;
    font-size: calc(17px * var(--scale, 1));
    font-weight: 500;
    line-height: 1.6
}
.ab-value p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: calc(14px * var(--scale, 1));
    line-height: 1.9
}
.ab-quote {
    max-width: 24em;
    margin: var(--ab-space) auto 0;
    font-size: clamp(calc(23px * var(--scale, 1)), 3.5vw, calc(42px * var(--scale, 1)));
    font-weight: 300;
    line-height: 1.6;
    text-align: center;
    text-wrap: balance
}

/* 6. Today. */
.ab-today {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(36px, 6vw, 80px);
    margin-block-start: var(--ab-space)
}
.ab-today-pictures {
    position: relative;
    max-width: 780px;
    padding-block-end: 44px;
    transition: opacity 900ms var(--ease)
}
.ab-today-pictures.ab-wait {
    opacity: 0
}
.ab-assortment {
    aspect-ratio: 949/620;
    border-radius: 20px;
    background: var(--surface);
    overflow: hidden
}
.ab-assortment img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1800ms var(--ease)
}
.ab-wait .ab-assortment img {
    transform: scale(1.07)
}
.ab-tin {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: clamp(14px, 4%, 32px);
    width: clamp(92px, 19%, 148px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ab-frame);
    box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--shadow) 40%, transparent);
    overflow: hidden;
    transition: transform 1100ms var(--ease) 240ms
}
/* The tin's picture has white around it: the circle shows the tin itself. */
.ab-tin img {
    display: block;
    width: 126%;
    max-width: none;
    height: 126%;
    margin: -13%;
    object-fit: contain
}
.ab-wait .ab-tin {
    transform: translateY(18px) rotate(-14deg)
}
.ab-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 24px
}
.ab-notice {
    display: flex;
    gap: 16px;
    margin-block: clamp(40px, 6vw, 64px) clamp(24px, 3vw, 36px);
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--radius);
    background: var(--surface)
}
.ab-notice-icon {
    flex: none;
    color: var(--red)
}
.ab-notice-icon .icon {
    width: 24px;
    height: 24px
}
.ab-notice h2 {
    margin: 0 0 8px;
    font-size: calc(17px * var(--scale, 1));
    font-weight: 500;
    line-height: 1.6
}
.ab-notice p {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: calc(14px * var(--scale, 1));
    line-height: 1.9
}
.ab-notice p:last-child {
    margin-block-end: 0
}
.ab-notice a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 4px
}

/* Scroll-driven touches, for browsers that run them off the main thread; the rest simply stand still. */
@supports (animation-timeline:view()) {
    @media(prefers-reduced-motion:no-preference) {
        .ab-hero-year {
            animation: ab-year-away linear both;
            animation-timeline: scroll(root);
            animation-range: 0 80vh
        }
        .ab-hero-tin img {
            animation: ab-roll linear both;
            animation-timeline: scroll(root);
            animation-range: 0 90vh
        }
        .ab-photo {
            animation: ab-drift linear both;
            animation-timeline: view()
        }
        .ab-photo--1 {
            --d: 22px
        }
        .ab-photo--2 {
            --d: 10px
        }
        .ab-photo--3 {
            --d: 30px
        }
    }
}
@keyframes ab-year-away {
    to {
        transform: translateY(-70px) scale(1.04);
        opacity: .45
    }
}
@keyframes ab-roll {
    to {
        transform: rotate(48deg)
    }
}
@keyframes ab-drift {
    from {
        translate: 0 var(--d, 16px)
    }
    to {
        translate: 0 calc(var(--d, 16px) * -1)
    }
}

/* Tablet and phone: one column, the line at the start, no side year. */
@media(max-width:960px) {
    .ab-founder,.ab-journey,.ab-today {
        grid-template-columns: minmax(0, 1fr)
    }
    .ab-journey-head {
        position: static
    }
    .ab-now {
        display: none
    }
    .ab-today-pictures {
        justify-self: center;
        width: 100%
    }
}
@media(max-width:640px) {
    .ab-hero {
        min-height: clamp(380px, 66svh, 520px);
        border-radius: 24px;
        align-items: flex-start;
        flex-direction: column;
        justify-content: center
    }
    .ab-hero-words {
        order: 0
    }
    .ab-hero-tin {
        position: absolute;
        width: 112px;
        inset-block-end: 34px;
        inset-inline-end: 20px;
        margin: 0
    }
    .ab-hero-year {
        font-size: 41vw
    }
    .ab-hero-line {
        font-size: calc(15px * var(--scale, 1))
    }
    .ab-text {
        font-size: calc(15px * var(--scale, 1))
    }
    .ab-numbers {
        border-radius: 24px
    }
    .ab-numbers--picture {
        grid-template-columns: minmax(0, 1fr) 96px;
        grid-template-areas: "line arch" "stats stats";
        column-gap: 18px
    }
    .ab-numbers-arch {
        align-self: start;
        outline-offset: 4px
    }
    .ab-numbers-line {
        align-self: center
    }
    .ab-stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px
    }
    .ab-station {
        padding-inline-start: 36px
    }
    .ab-notice {
        flex-direction: column;
        gap: 8px
    }
}
@media(prefers-reduced-motion:reduce) {
    .ab-story *,.ab-story *::before,.ab-story *::after {
        animation: none !important;
        transition: none !important
    }
}