/* =====================================================================
   How we deliver.

   Four stages, as four cards on the same surface-and-lift language as
   the contact section: no outer box, no dashed rules, no arrows drawn
   between them. Order is carried by the stage numbers, which is what
   they are for, so the arrows were saying a second time what the
   numbering already said.

   Each card is a column that ends on its exit condition, so all four
   exits line up along the bottom no matter how long the activities are.
   That bottom line is the point of the section: every stage has a
   hand-off, and stage four does not end.
   ===================================================================== */

.section--method {
    --p-card: #FFFFFF;
    --p-rest: #FAF9F7;
    --p-well: #F1EEEA;
    --p-faint: #A8ADB3;

    /* One value, used by the grid and by the arrows that sit in it, so
       the arrows stay centred in the gap whatever the gap becomes. */
    --p-gap: clamp(26px, 2.8vw, 40px);
}

/* The outer frame and the arrows between the columns. */
.section--method .proc {
    border: 0;
    background: transparent;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--p-gap);
    padding: 0;
}
.section--method .proc::before,
.section--method .proc::after { content: none; display: none; }

@media (max-width: 1080px) {
    .section--method .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    .section--method .proc { grid-template-columns: minmax(0, 1fr); }
}

/* ---- a stage --------------------------------------------------------- */

.section--method .proc__node {
    display: flex;
    flex-direction: column;
    /* Rests just off white and goes to pure white on hover. That colour
       change is half of what makes the service-card hover feel like
       something; without it the card only scales, which reads as thin.
       Timing and easing copied from pop.css exactly, so the two card sets
       on this page cannot drift apart. */
    background: var(--p-rest);
    border: 0;
    padding: clamp(26px, 2.6vw, 36px);
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    transform: scale(1);
    transition: transform 140ms cubic-bezier(0.2, 0, 0, 1),
                box-shadow 140ms cubic-bezier(0.2, 0, 0, 1),
                background var(--e-fast);
    will-change: transform;
    position: relative;
}

/* A rust rule sweeps the top edge on hover, the same gesture the headings
   make. It is the section's one moving accent and it costs nothing at
   rest, because it is scaled to nothing rather than hidden. */
.section--method .proc__node > .proc__id::before { content: none; }

.section--method .proc__node::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent, #A43818);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms cubic-bezier(0.2, 0, 0, 1);
}
.section--method .proc__node:hover::after,
.section--method .proc__node.is-near::after,
.section--method .proc__node:focus-within::after { transform: scaleX(1); }

/* The same Pop the service cards use: the card comes toward you rather
   than sliding up, and its label fills solid. Scaling text softens its
   rendering very slightly; at 2.2% it is invisible and it buys the most
   tactile response available. */
.section--method .proc__node:hover,
.section--method .proc__node.is-near,
.section--method .proc__node:focus-within {
    transform: scale(1.022);
    background: var(--p-card);
    box-shadow: 0 10px 30px rgba(10, 12, 15, 0.10),
                0 2px 6px rgba(10, 12, 15, 0.06);
    z-index: 2;
}

/* The stage number carries the order, so it is the one accent. */
/* A chip, not a line of text, so it can fill on hover the way the OPS
   tag does on the service cards. align-self keeps it to its own width. */
.section--method .proc__id {
    align-self: flex-start;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent, #A43818);
    border: 1px solid var(--accent-line, rgba(164, 56, 24, 0.45));
    border-radius: 2px;
    padding: 3px 8px;
    margin-bottom: 22px;
    transition: background 140ms linear,
                color 140ms linear,
                border-color 140ms linear;
}

.section--method .proc__node:hover .proc__id,
.section--method .proc__node.is-near .proc__id,
.section--method .proc__node:focus-within .proc__id {
    background: var(--accent, #A43818);
    border-color: var(--accent, #A43818);
    color: #FFF3EE;
}

/* The title goes rust with the rest of the card, so the whole thing
   changes state together rather than the chip and the exit doing it
   while the biggest text on the card stays put. */
.section--method .proc__node:hover .proc__name,
.section--method .proc__node.is-near .proc__name,
.section--method .proc__node:focus-within .proc__name {
    color: var(--accent, #A43818);
}

.section--method .proc__name {
    transition: color 140ms linear;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.014em;
    color: var(--text);
    margin-bottom: 22px;

    /* Two of the four titles wrap to a second line. Reserving both lines
       on all four keeps the activities, and everything under them, on the
       same baseline across the row. */
    min-height: 2.5em;
}

/* ---- activities ------------------------------------------------------- */

/* Each activity is a verb and what it means. The verb sits in its own
   column so the three line up, which is the whole reason they are set in
   mono in the first place. */
.section--method .proc__activities {
    display: grid;
    gap: 16px;
    margin-bottom: clamp(26px, 2.8vw, 34px);
}

/* The verb sits above its phrase rather than beside it. Side by side, the
   value column was narrow enough that every card ended on a one-word
   line, and no amount of tracking fixes an orphan. Stacked, each activity
   reads as a labelled item and the phrases stay whole. */
.section--method .act {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text);
    text-wrap: pretty;
}

.section--method .act i {
    display: block;
    font-family: var(--f-mono);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--p-faint);
    margin-bottom: 3px;
}

/* ---- the exit --------------------------------------------------------- */

/* margin-top:auto pins every exit to the bottom of its card, so the four
   line up across the row whatever the activities above them do. */
/* The hand-off. A slab of grey with an arrow in it read as a button that
   does nothing; this is a labelled result instead — the word small and
   quiet above, the outcome stated plainly underneath. */
.section--method .proc__exit {
    margin-top: auto;
    display: block;
    padding: 14px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(10, 12, 15, 0.08);
    font-family: var(--f-sans);
    font-size: 15px;
    letter-spacing: -0.008em;
    text-transform: none;
    color: var(--text);
    transition: color 140ms linear, border-color 140ms linear;
}

.section--method .proc__node:hover .proc__exit,
.section--method .proc__node.is-near .proc__exit,
.section--method .proc__node:focus-within .proc__exit {
    color: var(--accent, #A43818);
    border-top-color: rgba(164, 56, 24, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .section--method .proc__node { transition: none; }
    .section--method .proc__node:hover { transform: none; }
}


/* ---- the arrows between stages ---------------------------------------- */

/* site.css draws these as a bordered circle sitting on the card edge. Kept,
   because the hand-off between stages is the point of the section, but
   restated: no border, a warm disc instead, and the glyph in rust. It sits
   above the cards and is pushed out of the pointer's way so it never
   swallows a click meant for a card. */
.section--method .proc__node + .proc__node::before {
    content: "→";
    position: absolute;
    left: calc(-1 * (var(--p-gap) / 2) - 9px);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    font-family: var(--f-mono);
    font-size: 15px;
    line-height: 1;
    color: var(--accent, #A43818);
    opacity: 0.55;
    z-index: 3;
    pointer-events: none;
    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1),
                background 200ms linear;
}

/* The arrow leans toward the stage you are pointing at. */
.section--method .proc__node:hover + .proc__node::before,
.section--method .proc__node.is-near + .proc__node::before,
.section--method .proc__node + .proc__node.is-near::before,
.section--method .proc__node + .proc__node:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}

@media (max-width: 1080px) {
    /* Two per row, so an arrow on the third card would point at nothing. */
    .section--method .proc__node:nth-child(odd)::before { content: none; }
}
@media (max-width: 620px) {
    .section--method .proc__node + .proc__node::before { content: none; }
}

/* ---- rolling out ------------------------------------------------------- */

/* .is-rolled is added by include/proc.js as the row comes into view, one
   card after the next from the left. Nothing is hidden without JavaScript:
   with it off the cards simply render in place. */
.section--method .proc__node.is-armed {
    opacity: 0;
    translate: -26px 0;
    scale: 0.985;
}

.section--method .proc__node.is-armed.is-rolled {
    opacity: 1;
    translate: none;
    scale: none;
    transition: opacity 520ms ease-out,
                translate 620ms cubic-bezier(0.22, 0.65, 0.25, 1),
                scale 620ms cubic-bezier(0.22, 0.65, 0.25, 1);
}

/* The arrow follows its card in rather than sitting there waiting. */
.section--method .proc__node.is-armed::before { opacity: 0; }
.section--method .proc__node.is-armed.is-rolled::before {
    opacity: 1;
    transition: opacity 300ms ease-out 260ms;
}

@media (prefers-reduced-motion: reduce) {
    .section--method .proc__node.is-armed,
    .section--method .proc__node.is-armed::before { opacity: 1; translate: none; scale: none; }
}

/* The small word above each result. */
.section--method .proc__exit i {
    display: block;
    font-family: var(--f-mono);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--p-faint);
    margin-bottom: 5px;
}

/* ---- the affordance ---------------------------------------------------- */

/* Each card is a link to the page for that stage, and nothing said so. An
   arrow parked in the bottom right corner is the plainest way to say it,
   and it sits on the result line so the two read as one row: what the
   stage hands off, and where to go for more.

   On the exit rather than the card, because .proc__node::after is already
   carrying the rule that sweeps the top edge. */
.section--method .proc__exit {
    position: relative;
    padding-right: 36px;
}

.section--method .proc__exit::after {
    content: "→";
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: var(--f-mono);
    font-size: 16px;
    line-height: 1.4;
    color: var(--accent, #A43818);
    opacity: 0.45;
    transition: opacity 200ms linear,
                transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.section--method .proc__node:hover .proc__exit::after,
.section--method .proc__node.is-near .proc__exit::after,
.section--method .proc__node:focus-within .proc__exit::after {
    opacity: 1;
    transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
    .section--method .proc__exit::after { transition: none; }
}