/* ==========================================================================
   Samira Classen — base, containers, modules, header and footer

   Reads tokens-samira-classen.css only: no hex, no radius. Loads after the
   tokens and before forms.css.

   Layout rule for this site: as few media queries as possible. Spacing is
   fluid (tokens), grids wrap by themselves (auto-fit), and the containers —
   .wrap, .section, .panel, .band — carry their own padding, so a module is
   right at every width without rules of its own. The one breakpoint is 64rem
   (1024px), for what cannot be intrinsic: the 751 | 609 split, the pinned
   situations column, and the header menu.
   ========================================================================== */

/* ---- Base ---- */
body {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-text);
    color: var(--ink);
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
strong, b { font-weight: var(--fw-medium); }
em, i { font-style: italic; }
img { display: block; max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- Headings — one face, one weight; size carries the hierarchy ----
   Tags set a default for text typed in the editor. Modules size their
   titles by class (.h1/.h2/.h3), because the tag is chosen for the page
   outline and must not change the look. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: var(--fw-regular);
    line-height: var(--lh-display);
    margin: 0;
    color: var(--ink);
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
/* A page-head title the editor typed as lines (the templates add has-lines)
   keeps one row per line on a phone. At the 34px floor "ÜBERZEUGEND WIRKEN."
   (11.4em in caps) outgrows the column below ~447px, so there the size
   follows the column instead: ~30px at 390, ~24px at 320. 11.6 = the Home
   hero's longest line plus room for Safari; a longer line wraps as before.
   Above ~470px this is --fs-h1 unchanged. No mobile design: our call. */
.h1.has-lines { font-size: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 11.6)); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3, h4, h5, h6 { font-size: var(--fs-h3); }
.is-caps { text-transform: uppercase; }

p { margin: 0; }

/* Body copy: paragraphs are separated by one empty line (19px), as in Figma */
.prose > * + * { margin-top: 17px; } /* Figma's paragraph spacing, measured on Home: 247px for 11 lines and 2 breaks */
.prose ul, .prose ol { padding-left: 1.2em; margin-block: 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: var(--hairline); }
.prose h2, .prose h3 { margin-top: calc(var(--lh-text) * 1.5em); }

/* Kicker — the small line above a hero, band or panel title. The design uses
   it only there; it is not a label for every section. */
.kicker {
    font-size: var(--fs-small);
    font-weight: var(--fw-light);
    margin: 0 0 var(--space-m);
}

/* Every module stacks its parts on the same 10px step the Figma auto-layouts
   use; a title gets a little more air below it. */
.mw-module__title { margin-bottom: var(--space-m); }
.mw-module__title + .prose { margin-top: 0; }
/* The gap above a link, as Figma's auto-layouts set it. The link's 44px
   target overhangs its 20px line by 12px each way (.cta-link), so the gap is
   written against the line. */
.prose + .cta-link { margin-top: calc(var(--space-xs) - 12px); }
.mw-text-image .prose + .cta-link,
.mw-cta-banner .prose + .cta-link,
.band .prose + .cta-link { margin-top: calc(var(--space-s) - 12px); }

/* ---- Containers ----
   .wrap and .section come from the theme's main.css (the one container,
   house rule H11); the tokens make --gutter and --section fluid. */

/* Heading left, content right: 751 | 609 inside the 1360 content width.
   Below 1024px it is one column, which is what a grid with no template is. */
.split {
    display: grid;
    gap: var(--space-l);
}
.measure { max-width: var(--measure); }

/* Two equal halves that stack when there is no room for two 22rem columns */
.halves {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.halves img { width: 100%; height: 100%; object-fit: cover; }

/* Sand panel; its content is centred vertically when the row is taller */
.panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-2xl);
    background: var(--surface);
    color: var(--ink);
}

/* Full-width sand band (service-page head) */
.band {
    /* Figma: 88 above, 60 below the link's line */
    padding-block: calc(var(--section) * 1.75) calc(var(--section) * 1.2);
    background: var(--surface-sand);
}

/* ---- Text link with arrow — the only action style in the design ---- */
.cta-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--space-3xs);        /* Figma: text, 3px, a 20px icon */
    min-height: 44px;
    /* The target is 44px, the line is Figma's 20px: the extra hangs over the
       space around it, so the layout keeps Figma's spacing. */
    margin-block: -12px;
    font-size: var(--fs-body);
    color: var(--ink);
    text-decoration: none;
}
.cta-link::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: currentColor;
    /* bi:arrow-right-short, the icon Figma uses (Bootstrap Icons, MIT) */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform var(--t);
}
/* Not designed in Figma: underline + arrow nudge, never opacity */
.cta-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: var(--hairline); }
.cta-link:hover::after { transform: translateX(3px); }

/* ---- Cards ----
   Title at the top, text and link pushed to the bottom. The grid takes as many
   columns as fit at 15rem each — four at 1440, two on a tablet, one on a
   phone — with no breakpoint. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-m);
    margin: 0;
    padding: 0;
    list-style: none;
}
.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-height: 332px;
    padding: var(--space-m);
    background: var(--surface-sand);
    color: var(--ink);
}
.card--blush { background: var(--surface-blush); }
.card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-display);
    margin: 0 0 auto;
    padding-bottom: var(--space-l);
}

/* Graph-paper ground behind the situation cards */
.grid-ground {
    display: grid;
    gap: var(--space-m);
    margin: 0;
    padding: var(--space-m) clamp(var(--space-m), 4.8%, var(--space-l));
    list-style: none;
    border: var(--hairline) solid var(--line);
    background-color: var(--canvas);
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-cell) var(--grid-cell);
}

/* ---- Quote ---- */
/* Figma: a 406px panel, 50px padding, content from the top in a 756px column;
   the mark sits in a 10px-padded frame, then 15px gaps. */
.quote { margin: 0; justify-content: flex-start; min-height: 406px; }
.quote__inner { width: 100%; max-width: 756px; margin-inline: auto; }
.quote__mark { display: block; width: 60px; height: 44px; margin-bottom: calc(var(--space-xs) + var(--space-s)); fill: currentColor; }
.quote__text {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-quote);
    line-height: var(--lh-tight);
}
.quote__text > :first-child::before { content: "„"; }
.quote__text > :last-child::after { content: "“"; }
.quote__cite { display: block; margin-top: var(--space-s); font-style: normal; }

/* ---- Photo band: full-bleed photo, 20% scrim, a sand panel on top ---- */
.photo-band {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--section) * 3.1) calc(var(--section) * .9);
}
.photo-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: -1; }
.photo-band__panel { max-width: 680px; min-height: clamp(0rem, 40vw, 31.2rem); }

/* ---- Brand marks ---- */
.brand {
    font-family: var(--font-display);
    font-size: var(--fs-brand);
    line-height: var(--lh-display);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
}
.tagline {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-tagline);
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
}
.tagline small { display: block; margin-top: 2px; font-family: var(--font-text); font-size: var(--fs-small); font-weight: var(--fw-light); }

/* The footer wordmark fills the content width at every size. It sizes off
   its own box (cqi), not the viewport, so a scrollbar or a screen wider
   than the frame cannot push it over the edge. */
.wordmark {
    display: block;
    margin: 0;
    container-type: inline-size;
}
.wordmark__text {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-wordmark);
    line-height: 1.24;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    color: var(--ink);
}

/* ==========================================================================
   Modules
   ========================================================================== */

/* ---- text_image: hero ---- */
/* Figma sums neighbouring paddings: 20 under the hero + 30 above a text
   section = the 50 between them. Text-only sections carry 30, panels 50. */
.mw-text-image--hero { padding-block: 0 calc(var(--section) * .4); }
.mw-text-image--hero .mw-text-image__text { align-self: center; max-width: 41rem; }
/* 605px: wide enough for Figma's longest hero line (599), narrow enough that the next word wraps (612) */
.mw-text-image--hero .prose { max-width: 605px; }
.mw-text-image--hero .mw-text-image__img { width: 100%; aspect-ratio: 609 / 676; object-fit: cover; }
.mw-text-image--has-form .mw-text-image__text { align-self: start; }
.mw-text-image--has-form .kicker,
.mw-text-image--has-form .mw-module__title { margin-bottom: var(--space-s); }
.mw-text-image--has-form .mw-text-image__img { aspect-ratio: 609 / 871; }
/* Figma's form frame: 30 above, 60 below, after the column's 15px gap */
.mw-text-image__form { margin-top: var(--space-s); padding-block: var(--space-l) 60px; }

/* ---- text_image: panel, and the contact banner — the same 50/50 band ----
   The text sits low in the panel, as in Figma: 100px above its foot. */
.mw-text-image--panel .panel,
.mw-cta-banner .panel { justify-content: flex-end; padding-bottom: calc(var(--space-2xl) * 2); }
.mw-text-image--panel .mw-text-image__media img,
.mw-cta-banner__media img { aspect-ratio: 680 / 499; }
.mw-text-image--panel.mw-image-left .mw-text-image__media { order: -1; }
.mw-text-image--panel .prose,
.mw-cta-banner .prose { max-width: 34rem; }

/* ---- heading: the service-page band ---- */
.mw-heading__text { max-width: 54rem; }

/* ---- two_columns_content ---- */
.mw-two-columns { padding-block: calc(var(--section) * .6); }
/* The service pages (the ones that open with the heading band) set their
   text sections in 40px padding in Figma, Home and Über mich in 30. */
.mw-heading ~ .mw-two-columns { padding-block: calc(var(--section) * .8); }
.mw-two-columns__head { display: flex; flex-direction: column; align-items: flex-start; }
.mw-two-columns__head .mw-module__title { max-width: 36rem; }
.mw-two-columns__aside { width: 240px; height: auto; margin-top: auto; padding-top: var(--space-xl); box-sizing: content-box; }

/* ---- services_cards ---- */
.mw-services__title { margin-bottom: var(--space-xl); }
.mw-services .card .prose { margin-top: auto; }

/* ---- features: the situations ----
   One source order, two layouts. Below 1024px the aside and its pin step
   out of the way (display: contents), so heading, cards and note line up in
   that order. From 1024px the aside fills the row (as tall as the cards) and
   the pin inside it is sticky, one viewport high: heading at its top, note at
   its bottom. When the row ends, the pin stops with it, so the note comes to
   rest level with the last card. */
.mw-situations__aside,
.mw-situations__pin { display: contents; }
.mw-situations__title { order: 1; max-width: 30rem; }
.mw-situations__cards { order: 2; }
.mw-situations__note { order: 3; max-width: 36rem; }
.mw-situations__card { min-height: 300px; }
.mw-situations__card .prose { max-width: 18rem; }

/* ---- one_column_content ---- */
.mw-one-column__body { max-width: min(100%, 70ch); }
.mw-one-column__body.cols-12 { max-width: none; }
.mw-one-column.has-top-line .wrap { border-top: var(--hairline) solid var(--line); padding-top: var(--section); }
.mw-one-column.has-bottom-line .wrap { border-bottom: var(--hairline) solid var(--line); padding-bottom: var(--section); }

/* ---- code_html ---- */
.mw-codeblock__body { overflow-x: auto; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { border-bottom: 0; }
/* The starter offsets .site-top by the admin bar for a sticky header; this
   one scrolls away, and WordPress already pushes the page down by the bar. */
.admin-bar .site-top { top: 0; }
.site-header__inner { min-height: 81px; justify-content: flex-start; gap: 0 var(--space-l); }
.site-header .nav-toggle { margin-left: auto; }
.site-branding__link { text-decoration: none; }
.site-header .tagline { display: none; }

/* Nav type: Inter Light 13 */
.main-navigation__list { gap: 0 34px; }
.main-navigation__list a {
    font-size: var(--fs-small);
    font-weight: var(--fw-light);
    color: var(--ink);
}
/* The starter tints [aria-current] links; this design keeps every nav link ink */
.main-navigation__list a[aria-current="page"] { color: var(--ink); }

/* Not .current-menu-item: WordPress gives that class to the "Leistungen"
   anchor link (/#leistungen) on the front page, which is not a page of its own. */
.main-navigation__list a:hover,
.main-navigation__list .menu-item-type-post_type > a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: var(--hairline);
}

/* The chevron next to "Leistungen" is the sub-menu's own button (script.js) */
.main-navigation .menu-item-has-children { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
/* A 44px target; the negative margins keep the chevron 3px from its label,
   as drawn, without the target widening the gap. */
.submenu-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    margin: 0 -16px 0 -13px;
    padding: 0;
    color: var(--ink);
}
.submenu-toggle::before {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M1.5 4 6 8.5 10.5 4'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M1.5 4 6 8.5 10.5 4'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform var(--t);
}
.submenu-toggle[aria-expanded="true"]::before { transform: rotate(180deg); }

/* A "#" parent (Leistungen) is all button: label, then the chevron 3px on */
.submenu-toggle--label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    width: auto;
    margin: 0;
    font: inherit;
    font-size: var(--fs-small);
    font-weight: var(--fw-light);
}
.submenu-toggle--label::before { order: 1; }
.submenu-toggle--label:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: var(--hairline);
}

/* The sub-menu answers to hover and to its button, not to focus: a clicked
   button keeps focus, and the menu would not close again. Keyboard users
   open it with the button, so a Tab still never lands on a hidden link. */
.main-navigation .menu-item-has-children:not(.is-open):not(:hover) > .sub-menu { display: none; }

/* ==========================================================================
   Footer — four widget areas, then the wordmark. Sand by default; the
   Theme-Einstellungen switch adds .tone-slate, which flips every role.
   ========================================================================== */
.site-footer {
    padding-block: var(--section) 0;
    border-top: 0;
    background: var(--surface);
    color: var(--ink);
}
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xl) var(--space-l);
    padding-bottom: calc(var(--section) * 2);
    border-bottom: 0;
}
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-s); }
/* Under 768px the columns wrapped wherever they ran out of room: 1 + 2 + 1
   on a 390px phone, 2 + 2 at 430, 3 + 1 at 600. Every phone now gets the
   390 layout: contact on its own row, the middle two side by side, legal on
   its own. From 768 all four fit in one row. */
@media (max-width: 47.99rem) {
    .site-footer__col:first-child,
    .site-footer__col:last-child { flex-basis: 100%; }
}

.footer-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-display);
    margin: 0 0 var(--space-2xs);
}
.site-footer .widget p { margin: 0; line-height: var(--lh-text); }
/* Figma's footer: a text block is title, 5, lines at 19.36 (the phone
   numbers 22.75, 5px apart); a list is title, 10, items at 19.36, 10 apart.
   A list's 29.36px pitch clears WCAG's 24px target spacing; the contact
   lines are lines of text, which WCAG exempts. */
.site-footer .widget_nav_menu .footer-title { margin-bottom: var(--space-xs); }
.site-footer .widget ul { display: flex; flex-direction: column; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; line-height: var(--lh-text); }
.site-footer .widget a { color: inherit; text-decoration: none; }
.site-footer .textwidget a { display: block; width: fit-content; line-height: var(--lh-list); }
.site-footer .textwidget a:not(:last-child) { margin-bottom: var(--space-2xs); }
.site-footer .textwidget a + br { display: none; }
.site-footer .textwidget a[href^="mailto:"] { line-height: var(--lh-text); }
.site-footer .widget a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: var(--hairline); }

.site-footer__mark { border-top: var(--hairline) solid var(--line); }

/* ==========================================================================
   Phone menu. The starter puts the open panel in the header row; the row
   then wraps and the 81px header shrinks around it, so the wordmark and the
   button jump. Here the panel drops under a header that does not move.
   Below the breakpoint only: a touch screen has no hover.
   ========================================================================== */
@media (max-width: 63.99rem) {
    #site-navigation.is-open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        max-height: calc(100svh - 100%);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Leistungen: a full row, chevron at the far end, its pages underneath */
    #site-navigation.is-open .submenu-toggle--label {
        flex: 1;
        justify-content: space-between;
        min-height: 48px;
        font-size: 18px;
        text-decoration: none; /* a tap leaves :hover stuck; the chevron shows the state */
        border-bottom: 1px solid var(--line);
    }
    .main-navigation .menu-item-has-children:not(.is-open) > .sub-menu { display: none; }
    .main-navigation .sub-menu { flex-basis: 100%; padding-left: var(--space-m); }
    #site-navigation.is-open .sub-menu a { min-height: 44px; font-size: var(--fs-body); }
    #site-navigation.is-open .sub-menu li:last-child > a { border-bottom: 1px solid var(--line); }
}

/* ==========================================================================
   The one breakpoint: 1024px
   ========================================================================== */
@media (min-width: 64rem) {
    /* Footer columns: Figma's fixed 308px frame, 50px padding top and bottom */
    .site-footer__inner { min-height: calc(308px - var(--section)); padding-bottom: var(--section); }
    /* Figma's left column on the service pages' last text section keeps the
       276px the signature takes on Home, signature or not (ACF: tall_head) */
    .mw-two-columns--tall-head .mw-two-columns__head { min-height: 276px; }
    /* Kontakt: Figma fixes the text column at 1110px and centres its content */
    .mw-text-image--has-form .mw-text-image__text { min-height: 1110px; display: flex; flex-direction: column; justify-content: center; }
    .split { grid-template-columns: var(--split); gap: 0; }
    .split > :only-child { grid-column: 2; }

    /* situations: pin the left column */
    /* contain: size — the aside never sizes the row; the cards do. It is
       stretched to their height, and the pin is capped at it. */
    .mw-situations__aside { display: block; contain: size; }
    .mw-situations__cards { align-content: start; }
    .mw-situations__pin {
        position: sticky;
        top: var(--section);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--space-xl);
        height: calc(100svh - 2 * var(--section));
        max-height: 100%;
        /* the panel's own bottom padding, so the note lands on the last card, not the panel edge */
        padding: 0 var(--space-xl) calc(var(--space-m) + var(--hairline)) 0;
    }

    /* header: brand | divider | menu ……… tagline */
    .site-header .tagline { display: block; margin-left: auto; }
    .main-navigation { display: flex; align-items: center; }
    .main-navigation::before {
        content: "";
        width: var(--hairline);
        height: 19px;
        margin-right: 34px;
        background: var(--ink);
    }
    .main-navigation .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 20;
        min-width: 13rem;
        padding: var(--space-xs) var(--space-m);
        background: var(--canvas);
        border: var(--hairline) solid var(--line);
    }
    .main-navigation .sub-menu a { display: flex; }
}

/* ==========================================================================
   Motion — see script.js. Every hidden state hangs off .has-motion or
   .reveal, which only the script adds, so the page reads fully without it;
   the script does not run for prefers-reduced-motion.
   ========================================================================== */

/* In-page links glide (Lenis takes over where it runs) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
html.lenis.lenis-smooth { scroll-behavior: auto; }

/* Lenis's own rules (lenis.css, 1.3.26) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Page-head title: each line rises out of its own mask, 120ms apart. The
   padding/margin pair gives the umlauts room inside the mask. */
.mw-module__title.is-split .line { display: block; overflow: hidden; padding-top: .12em; margin-top: -.12em; }
.mw-module__title.is-split .line__inner { display: block; }
.has-motion .mw-module__title.is-split .line__inner {
    animation: sc-line-in 1s var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 120ms + 150ms);
}
@keyframes sc-line-in { from { transform: translateY(105%); } to { transform: none; } }

/* The rest of the page head follows the title in */
.has-motion .mw-text-image--hero .mw-text-image__text > :not(.mw-module__title),
.has-motion .mw-heading__inner > :not(.mw-module__title) {
    animation: sc-fade-up .9s var(--ease-out) .55s both;
}
@keyframes sc-fade-up { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }

/* Portrait settles from a slight zoom */
.mw-text-image--hero .mw-text-image__media { overflow: hidden; }
.has-motion .mw-text-image--hero .mw-text-image__img { animation: sc-settle 1.6s var(--ease-out) both; }
@keyframes sc-settle { from { transform: scale(1.04); } to { transform: none; } }

/* Sections fade up once on entering. transform: none afterwards, so a
   revealed section keeps no stacking context (the sticky situations column). */
.has-motion .reveal {
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.has-motion .reveal:not(.is-revealed) {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
}

/* After 2.5s (script.js) the page-head animations are dropped: final state */
/* Same selectors as the animations above plus .motion-done, so these always win */
.has-motion.motion-done .mw-module__title.is-split .line__inner,
.has-motion.motion-done .mw-text-image--hero .mw-text-image__text > :not(.mw-module__title),
.has-motion.motion-done .mw-heading__inner > :not(.mw-module__title),
.has-motion.motion-done .mw-text-image--hero .mw-text-image__img { animation: none; }

/* Footer reveal (script.js adds .has-footer-reveal when the footer fits in
   the window): the content scrolls up over a footer pinned underneath it.
   The content needs its own background, or the footer would show through. */
.has-footer-reveal .site-main {
    position: relative;
    z-index: 1;
    background: var(--canvas);
}
.has-footer-reveal .site-footer {
    position: sticky;
    bottom: 0;
    z-index: 0;
}