/* #region Ritual grid */
/* The five segment pages show their products in the same alternating grid the Alibi page uses, and the
   rules that grid needs live here — not by pulling the whole of alibi.css in, which loads a product
   stylesheet on a prospectus for one section, plus alibi.js, which observes elements no segment page has.
   alibi.css stays untouched for the Alibi page itself. The overrides below (.segment-page …) still win:
   they carry one class more. */
.alibi-ritual {
    padding: clamp(6rem, 10vw, 9rem) 0;
    background: #050505;
    border-top: 0;
    border-bottom: 1px solid var(--hairline);
}

    .alibi-ritual > .container {
        width: min(90vw, var(--hero-content-max));
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
    }

/* The ladder itself — the grid, the rule down the middle, the alternating columns, the mark on the
   line and the passe-partout — is defined once in product-sections.css, which every page carrying it
   loads. What stays here is only what belongs to an industry page: the picture's own shape and veil,
   and the copy beside it. */

    .alibi-ritual-step figure {
        position: relative;
        overflow: hidden;
        margin: 0;
        aspect-ratio: 16 / 11;
        box-shadow: 0 2.5rem 6rem rgba(5, 5, 5, .45);
    }

        .alibi-ritual-step figure::after {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 62%, rgba(5, 5, 5, .35));
            content: "";
            pointer-events: none;
        }

    .alibi-ritual-step img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.8s var(--ease-house);
    }

    .alibi-ritual-step:hover img {
        transform: scale(1.025);
    }

.alibi-ritual-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 20rem;
    padding: clamp(1rem, 3vw, 3rem) 0;
}

    .alibi-ritual-copy > span {
        margin-bottom: 2.4vh;
        color: rgba(245, 245, 245, .5);
        font-family: var(--font-mono);
        font-weight: 400;
        font-size: .65rem;
        letter-spacing: 8px;
        /* The house eyebrow's tracking, and therefore the amount sup.tm has to give back — see .h-tag,
           which owns this specification. Omit it and the ™ in „Dotyk · Odoardo Soul™" drifts off the
           name. */
        --tm-tracking: 8px;
        text-transform: uppercase;
        opacity: .9;
    }

/* No ring beside the copy and no hairline tying it to the middle. Where a step meets the rule is marked by
   a dot on the line itself, which lives with the rest of the ladder in product-sections.css — one answer to
   that question across the whole site, not one per page. */

.alibi-ritual-copy h3 {
    max-width: 31rem;
    margin: 0 0 1.2rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3vw, 3.6rem);
    font-weight: 300;
    line-height: 1;
}

.alibi-ritual-copy p {
    max-width: 30rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.8;
}

/* One column, the rule and its marks gone: that happens for both ends of the site at 900px, in
   product-sections.css. Done here at 850px and differently — the rule sliding to the left edge with the
   steps hanging off it like a timeline — it becomes a third design of the same component. */
@media (max-width: 900px) {
    .alibi-ritual-step {
        gap: 1.5rem;
    }

        .alibi-ritual-step figure {
            aspect-ratio: 4 / 3;
        }

    .alibi-ritual-copy {
        min-height: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 620px) {
    .alibi-ritual {
        padding: 5.5rem 0;
    }

    .alibi-ritual-step figure {
        aspect-ratio: 1 / 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alibi-ritual .reveal-elem {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .alibi-ritual-step img,
    .alibi-ritual-step figure::before {
        transition: none;
    }
}

/* The callout below the letter kept alibi.css's quieter rules on these pages. */
.segment-page .filmable-callout {
    border-top-color: var(--hairline);
    border-bottom: 0;
}

/* #endregion */

/* #region Signature & salutation */
.segment-page .segment-signature {
    display: block;
    margin-top: 2rem;
    color: var(--white);
    text-decoration: none;
    transition: color var(--motion) var(--ease-house);
}

    /* The signature is a link, so gold arrives under the hand. */
    .segment-page .segment-signature:hover,
    .segment-page .segment-signature:focus-visible {
        color: var(--gold);
    }

    .segment-page .segment-signature small {
        color: var(--text-muted);
        font-family: var(--font);
        font-size: .62rem;
        font-style: normal;
        font-weight: 300;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

.segment-page .segment-handwritten {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    letter-spacing: .01em;
}

.segment-page .segment-salutation {
    display: block;
    margin-bottom: 2.5rem;
    color: var(--white-soft);
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.2;
}

/* #endregion */

/* #region Quote & letter */
.segment-page #manifest .manifesto-left p {
    position: relative;
    margin: 0;
    padding: clamp(1rem, 2vw, 2rem) 0;
    line-height: 1.35;
}

.segment-page .segment-quote-text {
    display: block;
    max-width: min(25ch, 100%);
    color: var(--white-soft);
    /* The vw term must be live at phone widths, or the quote sits at a fixed 28.8px on every mobile. */
    font-size: clamp(1.45rem, 7vw, 2.8rem);
    text-wrap: balance;
}

    .segment-page .segment-quote-text::before {
        display: block;
        margin-bottom: 1.5rem;
        color: var(--gold);
        content: "“";
        font-family: var(--font-display);
        font-size: clamp(4.5rem, 7vw, 7rem);
        font-weight: 200;
        line-height: .45;
    }

.segment-page .segment-signature--quote {
    width: fit-content;
    margin-top: 2rem;
    font-size: clamp(1.15rem, 1.7vw, 1.5rem);
}

/* A letter is signed where a letter is signed: under the last paragraph, at the right edge of the
   column. The width is trimmed to the name before the margin pushes it there — this is an anchor,
   and a full-width block would leave the whole line clickable, with the pointer changing over paper
   nobody wrote on. The salutation stays left, because that is where a letter opens. */
.segment-page .segment-signature--letter {
    width: fit-content;
    margin-top: 3rem;
    margin-left: auto;
    color: var(--white-soft);
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    line-height: 1.35;
}

/* #endregion */

/* #region Ritual step overrides */
    .segment-page .alibi-ritual-step figure {
        width: 100%;
        aspect-ratio: 1;
    }

.segment-page .alibi-ritual-copy {
    min-height: 0;
    padding-block: clamp(2rem, 4vw, 4rem);
}

    .segment-page .alibi-ritual-copy > span {
        margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
        font-size: .65rem;
        font-weight: 400;
        letter-spacing: 8px;
        --tm-tracking: 8px;
        opacity: .9;
    }

    .segment-page .alibi-ritual-copy h3 {
        max-width: 11ch;
        margin-bottom: 1.6rem;
        /* The vw term must be live at phone widths, or long Polish compounds overflow the column. */
        font-size: clamp(1.9rem, 8vw, 4.8rem);
        line-height: .94;
        letter-spacing: -.04em;
        /* Wraps, but never breaks a word with a hyphen: a display heading split across two lines by
           a dash reads as a defect at this size. overflow-wrap still saves the layout from a word
           genuinely wider than its column. */
        overflow-wrap: break-word;
    }

        .segment-page .alibi-ritual-copy h3 i {
            color: var(--gold);
            font-weight: 300;
        }


/* #endregion */

/* #region Product story */
/* The scene caption. Deliberately quiet — it is a statement of fact under a picture, not a
   warning — but it stays legible, because a disclosure nobody reads is not a disclosure. */
.segment-page .segment-scene-caption {
    margin-top: .6rem;
    color: var(--white-soft);
    font-family: var(--font);
    font-size: .68rem;
    font-weight: 300;
    letter-spacing: .04em;
    line-height: 1.6;
    opacity: .55;
}

/* The one sentence that states what the product does for this trade, set in the display face —
   editorial emphasis, which is the other job Playfair has here besides headings. In the text face it reads as
   the first line of the story below it, and a reader then reaches the third paragraph before anything tells
   them what they are looking at.

   Set above body size, because a display face at body size reads as thin rather than as emphasis, and
   still well under the heading above (1.9–3.6rem), so the two do not become two headings. The colour
   stays soft and the measure narrow: this is a lead, not a second title. The negative tracking went
   with the sans — Playfair sets its own fit at this size. */
.segment-page .segment-product-lead {
    max-width: 34rem;
    /* Its own step down from the heading. The heading's bottom margin alone set the two almost
       touching, and in one face they read as a title that wrapped rather than as two elements. */
    margin: clamp(.5rem, 1.2vh, .9rem) 0 0;
    color: var(--white-soft);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.25vw, 1.22rem);
    font-weight: 300;
    line-height: 1.6;
    text-wrap: balance;
}

/* The same distance the home page's product ladder keeps, and for the same reason: the base rule in
   product-sections.css opens up to 4.5rem, which is right under a whole product panel and far too
   much under the last line of a card. Three classes, because that base rule is a single class in a
   stylesheet these pages load after this one. */
.segment-page .alibi-ritual-copy .home-product-link {
    margin-top: clamp(1.2rem, 2.4vh, 1.8rem);
}

/* A condition on the offer, read where the offer is made. Used on the samorząd page alone, on the
   two cards a public official could buy privately — it says the purchase is separate from anything
   the office orders. A box rather than another paragraph, because it is not part of the story: it is
   the boundary around it, and a reader must not be able to skim past it as prose. */
.segment-page .segment-card-note {
    max-width: 34rem;
    margin: clamp(1.4rem, 2.6vh, 2rem) 0 0;
    padding: clamp(.9rem, 1.6vw, 1.2rem) clamp(1rem, 1.8vw, 1.4rem);
    border: 1px solid var(--hairline-mid);
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .84rem;
    font-weight: 300;
    line-height: 1.7;
}

.segment-page .segment-product-story {
    display: grid;
    gap: 1rem;
    max-width: 34rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

    .segment-page .segment-product-story p {
        max-width: none;
        margin: 0;
        color: var(--text-muted);
        font-size: 1.05rem;
        font-weight: 200;
        line-height: 1.8;
    }

        /* A RUN-IN HEAD — „Wybór.", „Tożsamość.", „Wsparcie." — which is what these words have
           always been: a heading that begins its own paragraph instead of standing above it. So they
           are set like a label, full white and lightly tracked in capitals, rather than merely emboldened.

           Three values keep it from turning into a second eyebrow. The size steps DOWN from the
           body, because a heading inside a sentence that is larger than the sentence stops the
           reading it is meant to guide. The weight is 500, not 600: the full white already does the work of
           standing out, and capitals in a heavier cut read as an alarm. The tracking is a third of
           the eyebrow's above, so the two cannot be mistaken for each other — that one is a label on
           its own line, this one runs into a sentence.

           WHICH words these are is said in the copy, not guessed by a selector: a run-in head is
           written <strong> (strong importance, which is what a label has) and ordinary emphasis
           inside a sentence stays <b>. That distinction has to live in the text, because CSS cannot
           make it. `b:first-child` is wrong — :first-child means the first ELEMENT and takes no notice of
           the words before it, so a bold standing mid-sentence as the only element in its paragraph matches
           too, and „ODOARDO SOUL" and the artist's share both come out as labels in capitals. */
        /* A link inside a sentence, set the way the footer's transparency link is set — the house has
           one answer for this and it is not gold text: the word keeps the sentence's colour and takes
           an underline to say it leads somewhere, then turns gold under the pointer. The base rule
           for `a` on this site only inherits the colour, so without this the word „regulamin" would
           be a link nobody could see. */
        .segment-page .segment-product-story p a {
            color: inherit;
            text-decoration: underline;
            text-underline-offset: 2px;
            transition: color var(--motion-quick) var(--ease-house);
        }

            .segment-page .segment-product-story p a:hover,
            .segment-page .segment-product-story p a:focus-visible {
                color: var(--gold);
            }

        .segment-page .segment-product-story p > strong {
            color: var(--white);
            font-size: .8em;
            font-weight: 500;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

.segment-page .alibi-ritual-copy .odo-button {
    align-self: flex-start;
    margin-top: 2.75rem;
}

.segment-page .core-interface.home-concierge {
    border-top: 1px solid var(--hairline);
}

/* #endregion */

/* #region Responsive */
@media (max-width: 900px) {
    .segment-page .alibi-ritual-step figure {
        aspect-ratio: 1;
    }
}

@media (max-width: 480px) {
    .segment-page .alibi-ritual-copy > span {
        letter-spacing: 3px;
        --tm-tracking: 3px;
    }
}
/* #endregion */

/* #region Closing CTA pair */
/* A primary button and its quieter second path, side by side under the last ritual card. */
.segment-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

    /* The row carries the distance from the copy once; each button's own margin would open a second
       gap between the two the moment they wrap. */
    .segment-page .segment-cta-row {
        margin-top: 2.75rem;
    }

        .segment-page .alibi-ritual-copy .segment-cta-row .odo-button {
            margin-top: 0;
        }

/* Nothing to correct for the second door: it is .odo-button--quiet, the same size and shape as the button
   beside it, so the row needs no rule of its own beyond its gap. As .home-product-link — a link beside a
   button — it needs its paragraph margin taken off to sit level and still reads as a different kind of
   object. */
/* #endregion */

/* #region Prospect steps */
/* The shared steps component carries a 4:3 image box, because the Alibi page's step photographs are 4:3.
   The samorząd keepsake is shot in the house's square format, and a 1:1 photograph cropped to 4:3 loses an
   eighth off the top and the bottom — enough to cut through the outer cards of the illustration grid.
   Squared here rather than in product-sections.css, so the Alibi page keeps the ratio its own photographs
   are framed for. */
.segment-prospect .step-img-box {
    aspect-ratio: 1;
}
/* #endregion */

/* #region Usage scenarios */
/* Eight rooms, said plainly. The section stands between the products and the keepsake because that
   is where a reader who has just understood what a cube is asks where one would go, and the alternative
   is to answer by moving on to the next object. */
/* The page's own rhythm, not a rhythm of its own: the same padding, the same hairline and the
   same content width as .alibi-ritual above it, so the heading starts on the products' left edge and
   the three sections are separated by one kind of line rather than three. */
.segment-scenarios {
    padding: clamp(6rem, 10vw, 9rem) 0;
    border-bottom: 1px solid var(--hairline);
}

    .segment-scenarios > .container {
        width: min(90vw, var(--hero-content-max));
        max-width: none;
        margin-inline: auto;
        padding-inline: 0;
    }

.segment-scenarios-head {
    margin-bottom: clamp(3rem, 6vh, 4.5rem);
}

    /* .h-desc centres itself, which is right under a hero and wrong under a heading that starts at
       the container's left edge. */
    .segment-scenarios-head .h-desc {
        max-width: 66ch;
        margin-inline: 0;
    }

/* Two columns of entries, not a wall of tiles. Bordered cards on a tinted ground are the language of
   a feature list; what belongs here is the page's own — a hairline, a wide column and air. The
   column gap is the ritual grid's own, so the two sections breathe at the same rate. */
/* Three across, so nine entries read as a board of places rather than as a long column of text.
   Squares are the house's format; a three-by-three grid is that format at the scale of a section. */
.segment-scenarios-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.6rem);
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Four terms, so two by two rather than three across: a fourth tile alone on a second row reads as
   an afterthought, and these four are one condition each of the same agreement. The wider column
   also suits them — a term is a sentence a reader weighs, not a place they scan for. */
.segment-terms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A tile, not a row under a rule. The reveal transition is restated because the shorthand would
   otherwise drop the two properties .reveal-elem transitions; the stagger rides on the property the
   entrance animations already use. */
.segment-scenario {
    position: relative;
    /* The numeral is drawn larger than the tile and cropped by it, so the tile has to clip. */
    overflow: hidden;
    display: grid;
    /* Place, object, story, conclusion — and the story takes the slack, so the closing line sits on
       the floor of every tile and the three in a row close at the same height. The numeral is out of
       flow, behind all of them. */
    grid-template-rows: auto auto 1fr auto;
    gap: .7rem;
    padding: clamp(1.6rem, 2.6vw, 2.4rem);
    border: 1px solid var(--hairline);
    background: var(--surface-card);
    transition: opacity 1s ease var(--odo-enter-delay, 0s),
                transform 1s ease var(--odo-enter-delay, 0s),
                border-color var(--motion) var(--ease-house),
                background-color var(--motion) var(--ease-house);
}

    /* The tile answers the pointer: the rule warms and the ground lifts a shade. No movement — the
       tiles arrive on a transform of their own, and a second one on hover would fight it. */
    .segment-scenario:hover,
    .segment-scenario:focus-within {
        border-color: var(--gold-accent);
        background: var(--surface-raised);
    }

    /* Everything the reader reads stands above the watermark. */
    .segment-scenario > :not(.segment-scenario-index) {
        position: relative;
        z-index: 1;
    }

    /* The number of the entry as a watermark: set far larger than the tile and pushed past its
       bottom-right corner, so the edge crops it. Drawn in the display face at a breath of white that
       warms to gold under the hand, which is what keeps it a texture behind the words rather than a
       figure competing with them — a magazine sets its folio this way. Out of the flow, so it costs
       the tile no height. */
    .segment-scenario-index {
        position: absolute;
        right: -.04em;
        bottom: -.1em;
        z-index: 0;
        color: var(--tint);
        font-family: var(--font-display);
        font-size: clamp(6rem, 9vw, 9.5rem);
        font-weight: 400;
        line-height: .8;
        letter-spacing: -.04em;
        pointer-events: none;
        user-select: none;
        transition: color var(--motion) var(--ease-house);
    }

    .segment-scenario:hover .segment-scenario-index,
    .segment-scenario:focus-within .segment-scenario-index {
        color: rgba(var(--gold-rgb), .085);
    }

    /* The house's body setting, the same one the product stories above this section use — these are
       paragraphs a reader actually reads, not captions, and shrinking them to .9rem only made nine
       tiles look denser than they are. */
    .segment-scenario p {
        max-width: 46ch;
        color: var(--text-muted);
        font-size: 1.05rem;
        font-weight: 200;
        line-height: 1.8;
    }

/* The room — the heading of the tile and the largest thing on it. A reader scanning nine of these is
   looking for their own building, so „Sala ślubów" has to be findable at a glance. */
.segment-scenario-place {
    margin: 0;
    color: var(--white);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.9vw, 1.65rem);
    font-weight: 300;
    line-height: 1.2;
    text-wrap: balance;
}


/* What stands in that room. Second line, not first — the object matters once the reader has found
   the place it belongs to. */
.segment-scenario .segment-scenario-object {
    /* Room under the rule that closes it, on top of the grid's gap. */
    margin-bottom: .6rem;
    color: var(--white-soft);
    /* The display face, like the place above it: the two together are the tile's title — where the
       object stands and what it is — and the story below them is the only part set in the text face.
       A step above body size and a touch looser, because Playfair at body size reads as thin rather than as
       quiet. */
    font-family: var(--font-display);
    font-size: clamp(.98rem, 1.15vw, 1.08rem);
    /* One step up from the 300 the display face carries everywhere else — enough to hold the line
       against the place above it without turning it into a second heading. Playfair is loaded as a
       variable font (100–900), so 400 is a real weight here, not a synthesised one. */
    font-weight: 400;
    line-height: 1.55;
}

    /* The rule closes the title as a whole — place and object together — rather than separating the
       two halves of it. It draws itself out when the tile is touched: scaled from nothing on the
       left, so it reads as a line being drawn and not as a block appearing. */
    .segment-scenario .segment-scenario-object::after {
        display: block;
        width: 2.4rem;
        height: 1px;
        margin-top: 1.35rem;
        background: var(--gold);
        content: '';
        transform: scaleX(.35);
        transform-origin: left;
        transition: transform var(--motion) var(--ease-house);
    }

    .segment-scenario:hover .segment-scenario-object::after,
    .segment-scenario:focus-within .segment-scenario-object::after {
        transform: scaleX(1);
    }

/* What is left afterwards. It closes the entry in the house's display italic rather than under a
   label in a bordered strip: the sentence is short enough to be recognised as the conclusion by
   being set differently, and „Efekt:" in front of it only says what the reader has already read.
   Stated through the entry, because .segment-scenario p above is one step more specific than a bare
   class and would otherwise take the colour and the size back. */
.segment-scenario .segment-scenario-effect {
    margin-top: auto;
    padding-top: .9rem;
    border-top: 1px solid var(--hairline);
    color: var(--white-soft);
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    /* Stated, because the paragraph rule above now carries the body weight of 200 and the display
       face at that weight in italic comes out too faint to close an entry. */
    font-weight: 300;
    font-style: italic;
    line-height: 1.5;
    /* Held back a step and let in when the tile is touched: the conclusion is the reward for
       stopping at this one, and nine punchlines shouting at once is a wall, not a grid. */
    opacity: .55;
    transition: opacity var(--motion) var(--ease-house), color var(--motion) var(--ease-house);
}

    .segment-scenario:hover .segment-scenario-effect,
    .segment-scenario:focus-within .segment-scenario-effect {
        color: var(--gold);
        opacity: 1;
    }

/* A touch screen never hovers, so the conclusion stands at full strength there from the start. */
@media (hover: none) {
    .segment-scenario-effect {
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .segment-scenarios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .segment-scenarios-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Nothing moves for a reader who asked for stillness — but the rule under the place and the closing
   sentence are then simply there, at full strength, rather than waiting for a gesture that will
   never come. */
@media (prefers-reduced-motion: reduce) {
    .segment-scenario,
    .segment-scenario-index,
    .segment-scenario .segment-scenario-object::after,
    .segment-scenario .segment-scenario-effect {
        transition: none;
    }

    .segment-scenario .segment-scenario-object::after {
        transform: scaleX(1);
    }

    .segment-scenario .segment-scenario-effect {
        opacity: 1;
    }
}
/* #endregion */