/* The about page (about.html), after its editorial design (2026-10-29: "about us page or company page design", with
   kweepa-about-editorial-interactive.html, desktop.png and mobile.png). Until then the page was drawn to its first design
   (2026-10-24), whose rules were in site.css and are gone from it.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else, and its
   sizes are the tokens', in rem, not the design's (a title of 88px, sections' headings of 59 to 79px and the weights 650 to
   850 are the roles' sizes and weights here). Mobile first: one column, the hero's K under its words, the four disciplines as
   a list over the one chosen; the two columns come at 48rem, the hero's K beside its words. Where the page asks for a script
   (the choice of a discipline) every one is in the markup, one after another, the list that chooses a list of links to them,
   until site.js makes tabs of it; nothing else needs one.

   The space between rows, columns and items is 20px at the most (--gap-max, site.css); a painted band has the room it needs
   inside itself (1.75rem). Everything is scoped to .abt; its colours are the --abt-* tokens, set again for the dark theme, and
   its text takes typography.md's two text colours through them. */

:root {
    --abt-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --abt-ink: var(--text-primary);
    --abt-muted: var(--text-secondary);
    --abt-eyebrow: #0a4ce9;
    --abt-accent: #0154e5;
    --abt-blue: #0154e5;
    --abt-blue-hover: #0043bd;
    --abt-on-blue: #ffffff;
    --abt-btn-shadow: 0 11px 20px -13px #0154e5;
    --abt-crumb-sep: #8790a8;
    /* the hero: white that goes to a pale blue at its right, a soft light behind the K and a ring */
    --abt-hero-bg: linear-gradient(110deg, #ffffff 0%, #ffffff 41%, #f0f6ff 100%);
    --abt-glow: radial-gradient(ellipse at 50% 49%, #d9ecff 0%, rgb(217 236 255 / 0) 68%);
    --abt-ring: rgb(0 92 224 / 0.18);
    /* the K: the gradient of the company's own mark */
    --abt-k-1: #0aa8ef;
    --abt-k-2: #005cf7;
    --abt-k-3: #273bd9;
    --abt-k-4: #5b27c7;
    --abt-k-opacity: 0.93;
    --abt-k-shadow: drop-shadow(10px 26px 34px rgb(0 84 228 / 0.14));
    --abt-aside-rule: #8aa9d5;
    --abt-aside-label: #35507f;
    --abt-line: #dbe2eb;
    --abt-line-soft: #e3eaf4;
    --abt-link-line: #8ca8d5;
    /* the small numbers and labels */
    --abt-no: #4f6590;
    /* what we do: a pale band, the list and its rules */
    --abt-band: #f6f8fc;
    --abt-band-line: #cbd6e5;
    --abt-tab-line: #dce4ed;
    --abt-tab-ink: #4d5b73;
    --abt-tag-ink: #384b69;
    /* how we work: a deep blue band, ruled in vertical lines */
    --abt-night: #091d43;
    --abt-night-grid: rgb(109 160 234 / 0.14);
    --abt-night-eyebrow: #77b1ff;
    --abt-night-text: #bacbea;
    --abt-night-label: #84b7ff;
    --abt-night-card-text: #b6c8e3;
    --abt-night-rule: rgb(255 255 255 / 0.35);
    --abt-night-rule-soft: rgb(255 255 255 / 0.23);
    --abt-quote-ink: #142a52;
    /* what matters to us: a card for each value, with its drawing in a frame */
    --abt-card: #f6f8fc;
    --abt-art-filter: none;
    /* where we work: a pale blue band */
    --abt-sky: #f3f8ff;
    --abt-sky-edge: #e6eef8;
    --abt-sky-rule: #bfd0e8;
    --abt-sky-ink: #164c9b;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --abt-surface: #131314;
        --abt-eyebrow: #a8c7fa;
        --abt-accent: #a8c7fa;
        --abt-blue: #a8c7fa;
        --abt-blue-hover: #c2d7fb;
        --abt-on-blue: #062e6f;
        --abt-btn-shadow: none;
        --abt-crumb-sep: #7b8088;
        --abt-hero-bg: linear-gradient(110deg, #131314 0%, #131314 41%, #141c2b 100%);
        --abt-glow: radial-gradient(ellipse at 50% 49%, #1b2c4a 0%, rgb(27 44 74 / 0) 68%);
        --abt-ring: rgb(168 199 250 / 0.22);
        --abt-k-1: #3bb8f5;
        --abt-k-2: #2f7cf8;
        --abt-k-3: #4a5fe6;
        --abt-k-4: #7d4fe0;
        --abt-k-opacity: 0.88;
        --abt-k-shadow: drop-shadow(10px 26px 34px rgb(0 0 0 / 0.45));
        --abt-aside-rule: #4a5f87;
        --abt-aside-label: #a9c4ee;
        --abt-line: #333537;
        --abt-line-soft: #2d2f31;
        --abt-link-line: #5f7aa8;
        --abt-no: #9bb2d9;
        --abt-band: #1a1b1d;
        --abt-band-line: #3a3d42;
        --abt-tab-line: #2f3236;
        --abt-tab-ink: #b4b9c2;
        --abt-tag-ink: #c9d3e3;
        --abt-night: #0a1630;
        --abt-night-grid: rgb(109 160 234 / 0.1);
        --abt-night-eyebrow: #9cc3ff;
        --abt-night-text: #c7d3e8;
        --abt-night-label: #9cc3ff;
        --abt-night-card-text: #c1cee3;
        --abt-night-rule: rgb(255 255 255 / 0.28);
        --abt-night-rule-soft: rgb(255 255 255 / 0.2);
        --abt-quote-ink: #e3e3e3;
        --abt-sky: #151b26;
        --abt-sky-edge: #232b3a;
        --abt-sky-rule: #3a4a66;
        --abt-sky-ink: #a8c7fa;
        --abt-card: #1a1b1d;
        --abt-art-filter: brightness(0.86) saturate(1.08);
    }
}

:root[data-theme="dark"] {
    --abt-surface: #131314;
    --abt-eyebrow: #a8c7fa;
    --abt-accent: #a8c7fa;
    --abt-blue: #a8c7fa;
    --abt-blue-hover: #c2d7fb;
    --abt-on-blue: #062e6f;
    --abt-btn-shadow: none;
    --abt-crumb-sep: #7b8088;
    --abt-hero-bg: linear-gradient(110deg, #131314 0%, #131314 41%, #141c2b 100%);
    --abt-glow: radial-gradient(ellipse at 50% 49%, #1b2c4a 0%, rgb(27 44 74 / 0) 68%);
    --abt-ring: rgb(168 199 250 / 0.22);
    --abt-k-1: #3bb8f5;
    --abt-k-2: #2f7cf8;
    --abt-k-3: #4a5fe6;
    --abt-k-4: #7d4fe0;
    --abt-k-opacity: 0.88;
    --abt-k-shadow: drop-shadow(10px 26px 34px rgb(0 0 0 / 0.45));
    --abt-aside-rule: #4a5f87;
    --abt-aside-label: #a9c4ee;
    --abt-line: #333537;
    --abt-line-soft: #2d2f31;
    --abt-link-line: #5f7aa8;
    --abt-no: #9bb2d9;
    --abt-band: #1a1b1d;
    --abt-band-line: #3a3d42;
    --abt-tab-line: #2f3236;
    --abt-tab-ink: #b4b9c2;
    --abt-tag-ink: #c9d3e3;
    --abt-night: #0a1630;
    --abt-night-grid: rgb(109 160 234 / 0.1);
    --abt-night-eyebrow: #9cc3ff;
    --abt-night-text: #c7d3e8;
    --abt-night-label: #9cc3ff;
    --abt-night-card-text: #c1cee3;
    --abt-night-rule: rgb(255 255 255 / 0.28);
    --abt-night-rule-soft: rgb(255 255 255 / 0.2);
    --abt-quote-ink: #e3e3e3;
    --abt-sky: #151b26;
    --abt-sky-edge: #232b3a;
    --abt-sky-rule: #3a4a66;
    --abt-sky-ink: #a8c7fa;
    --abt-card: #1a1b1d;
    --abt-art-filter: brightness(0.86) saturate(1.08);
}

/* ------------------------------------------------------------------ */
/* Type roles (typography.md, 3)                                        */
/* ------------------------------------------------------------------ */

/* The page's texts take typography.md's roles (section 3) here, and only here: the rules below set none of their family, size,
   weight, line height, letter spacing or case. A heading's tag gives it its role (site.css's base) unless it is listed here,
   taking another level's style; the rest are listed by their roles. */

/* H4 (card title): sans 500 */
.abt-tab__name,
.abt-principle__title,
.abt-value__title,
.abt-quote {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* H3: sans 500 (what a discipline comes to, the place and its time zone) */
.abt-disc__title,
.abt-place__name {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* Body: sans 400 */
.abt-hero__lead,
.abt-story__copy p,
.abt-work__lead,
.abt-disc__text,
.abt-approach__lead,
.abt-principle__text,
.abt-values__lead,
.abt-value__text,
.abt-place__text,
.abt-closing__text {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 */
.abt-story__foot,
.abt-disc__tags {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form labels: sans 500 (the note beside the K) */
.abt-aside__text {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 */
.abt-btn,
.abt-link,
.abt-crumbs__list {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase */
.abt-eyebrow,
.abt-tag,
.abt-aside__label,
.abt-strip__item,
.abt-place__note {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* The page                                                            */
/* ------------------------------------------------------------------ */

.abt {
    background: var(--abt-surface);
    color: var(--abt-ink);
}

.abt-eyebrow {
    margin: 0;
    color: var(--abt-eyebrow);
}

/* a section's heading (an h2, the H2 role), its lines balanced, a sentence to a line */
.abt-title {
    margin: 0.5rem 0 0;
    color: var(--abt-ink);
    text-wrap: balance;
}

.abt-line {
    display: block;
}

/* a section has its room over it and none under it (--gap-max); a band has the room it needs inside itself */
.abt-section {
    padding-top: var(--gap-max);
}

.abt .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

/* this page's icons are lines (site.css's .icon fills with currentColor) */
.abt .abt-icon {
    fill: none;
}

/* ------------------------------------------------------------------ */
/* Buttons and links: they answer the press itself                      */
/* ------------------------------------------------------------------ */

.abt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    max-width: 100%;
    border: 1px solid var(--abt-blue);
    border-radius: 999px;
    background: var(--abt-blue);
    color: var(--abt-on-blue);
    box-shadow: var(--abt-btn-shadow);
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.abt-btn:hover {
    border-color: var(--abt-blue-hover);
    background: var(--abt-blue-hover);
    color: var(--abt-on-blue);
}

.abt-btn:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, 200ms, var(--press-in);
}

/* a standalone link, underlined by a line of its own under its words */
.abt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding-block: 0.25rem;
    border-bottom: 1px solid var(--abt-link-line);
    color: var(--abt-ink);
    text-decoration: none;
    transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.abt-link:hover {
    border-color: var(--abt-eyebrow);
    color: var(--abt-eyebrow);
}

.abt-link:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.abt-link--blue {
    border-color: currentColor;
    color: var(--abt-eyebrow);
}

.abt-link--blue:hover {
    color: var(--abt-blue-hover);
}

.abt-btn .icon,
.abt-link .icon {
    transition: translate var(--spring) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
    /* an arrow moves the way it points */
    .abt-btn:hover .abt-icon--arrow-up-right,
    .abt-link:hover .abt-icon--arrow-up-right,
    .abt-tab:hover .abt-icon--arrow-up-right {
        translate: 2px -2px;
    }

    .abt-link:hover .abt-icon--arrow-down {
        translate: 0 3px;
    }
}

/* ------------------------------------------------------------------ */
/* The hero                                                            */
/* ------------------------------------------------------------------ */

/* the room over the words is 1.75rem, a painted band's: the turned K throws its top about 0.05 of its height above its box */
.abt-hero {
    position: relative;
    padding-block: 1.75rem var(--gap-max);
    overflow: hidden;
    background: var(--abt-hero-bg);
}

.abt-hero__grid {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
}

.abt-hero__words {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.abt-crumbs {
    margin-bottom: var(--gap-max);
}

.abt-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--abt-muted);
}

/* the slash between two of them is for the eye: a screen reader hears the list */
.abt-crumbs__list li + li::before {
    content: "/";
    content: "/" / "";
    margin-right: 0.625rem;
    color: var(--abt-crumb-sep);
}

.abt-crumbs__list [aria-current] {
    color: var(--abt-ink);
}

.abt-crumbs__link {
    color: inherit;
    text-decoration: none;
}

.abt-crumbs__link:hover {
    color: var(--abt-eyebrow);
    text-decoration: underline;
}

.abt-hero__title {
    margin: 0.5rem 0 0;
    color: var(--abt-ink);
}

.abt-accent {
    color: var(--abt-accent);
}

.abt-hero__lead {
    margin: 0.75rem 0 0;
    max-width: 36rem;
    color: var(--abt-muted);
    text-wrap: pretty;
}

.abt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--gap-max);
    margin-top: var(--gap-max);
}

/* the K: a bold letter drawn here, turned a little, with a soft light behind it and a thin ring */
.abt-hero__visual {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: var(--gap-max);
    min-width: 0;
}

.abt-hero__visual::before {
    content: "";
    position: absolute;
    inset: -2rem -3rem;
    z-index: -2;
    background: var(--abt-glow);
    pointer-events: none;
}

.abt-hero__visual::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 15rem;
    height: 15rem;
    border: 1px solid var(--abt-ring);
    border-radius: 50%;
    translate: calc(-50% + 4rem) calc(-50% - 1rem);
    pointer-events: none;
}

.abt-k {
    /* its height: the turn throws its lower arm about 0.07 of it past its box, and its top about 0.05 above it */
    --abt-k-h: 13rem;
    display: block;
    flex: none;
    height: var(--abt-k-h);
    width: auto;
    aspect-ratio: 79 / 100;
    overflow: visible;
    opacity: var(--abt-k-opacity);
    filter: var(--abt-k-shadow);
    transform: rotate(-9deg);
    /* so it stands clear of the note beside it */
    translate: calc(var(--abt-k-h) * -0.07) 0;
}

.abt-k__stop--1 {
    stop-color: var(--abt-k-1);
}

.abt-k__stop--2 {
    stop-color: var(--abt-k-2);
}

.abt-k__stop--3 {
    stop-color: var(--abt-k-3);
}

.abt-k__stop--4 {
    stop-color: var(--abt-k-4);
}

.abt-hero__aside {
    flex: 0 1 12rem;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--abt-aside-rule);
}

.abt-aside__label {
    display: block;
    color: var(--abt-aside-label);
}

.abt-aside__text {
    display: block;
    margin-top: 0.25rem;
    color: var(--abt-ink);
}

/* four phrases, ruled across the window */
.abt-strip {
    border-top: 1px solid var(--abt-line-soft);
    background: var(--abt-surface);
}

.abt-strip__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin-block: 0;
    padding-block: 1rem 0;
    list-style: none;
    color: var(--abt-ink);
}

/* ------------------------------------------------------------------ */
/* The story                                                           */
/* ------------------------------------------------------------------ */

.abt-story__grid {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
}

.abt-story__head {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-max);
    min-width: 0;
}

.abt-story__no {
    flex: none;
    min-width: 2.25rem;
    color: var(--abt-no);
}

.abt-story__copy {
    min-width: 0;
    color: var(--abt-muted);
}

.abt-story__copy p {
    margin: 0 0 1rem;
    max-width: 38rem;
}

.abt-story__copy .abt-quote {
    margin: var(--gap-max) 0 0;
    padding: 0.125rem 0 0.125rem 1.5rem;
    border-left: 3px solid var(--abt-blue);
    color: var(--abt-quote-ink);
    quotes: "\201C" "\201D";
    text-wrap: balance;
}

.abt-quote::before {
    content: open-quote;
}

.abt-quote::after {
    content: close-quote;
}

.abt-story__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem var(--gap-max);
    max-width: none;
    margin: var(--gap-max) 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--abt-line);
    color: var(--abt-muted);
}

/* ------------------------------------------------------------------ */
/* What we do: four disciplines, the one chosen shown beside the list   */
/* ------------------------------------------------------------------ */

.abt-work {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--abt-band);
}

.abt-work__head {
    display: grid;
    gap: 0.75rem;
}

.abt-work__lead {
    margin: 0;
    max-width: 24rem;
    color: var(--abt-muted);
}

.abt-work__shell {
    display: grid;
    margin-top: var(--gap-max);
    border-block: 1px solid var(--abt-band-line);
}

.abt-tabs {
    min-width: 0;
    border-bottom: 1px solid var(--abt-band-line);
}

.abt-tab {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 0.875rem 0.25rem;
    border-bottom: 1px solid var(--abt-tab-line);
    color: var(--abt-tab-ink);
    text-decoration: none;
    transition: color 200ms var(--ease-standard), background-color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.abt-tab:last-child {
    border-bottom: 0;
}

.abt-tab__no {
    color: var(--abt-no);
}

.abt-tab__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.abt-tab:hover,
.abt-tab[aria-selected="true"] {
    color: var(--abt-eyebrow);
}

.abt-tab[aria-selected="true"] .abt-tab__no {
    color: var(--abt-eyebrow);
}

.abt-tab:active {
    scale: var(--press-scale-card);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.abt-tab .icon {
    transition: translate var(--spring) var(--ease-spring);
}

/* without a script the disciplines are one after another; with it, the one chosen. The room over the first and under the last
   is the container's, so that two of them one after another are 20px apart and not 60 (a gap and the padding of both) */
.abt-panels {
    display: grid;
    align-content: center;
    gap: var(--gap-max);
    min-width: 0;
    padding-block: var(--gap-max);
}

.abt-disc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding-inline: 0.25rem;
}

.abt-disc__kicker {
    margin: 0;
    color: var(--abt-eyebrow);
}

.abt-disc__title {
    margin: 0.5rem 0 0;
    color: var(--abt-ink);
    text-wrap: balance;
}

.abt-disc__text {
    margin: 0.75rem 0 0;
    max-width: 32rem;
    color: var(--abt-muted);
}

.abt-disc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--gap-max);
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--abt-tag-ink);
}

.abt-disc__tag::before {
    content: "\2014";
    content: "\2014" / "";
    margin-right: 0.625rem;
    color: var(--abt-eyebrow);
}

.abt-disc .abt-link {
    margin-top: var(--gap-max);
}

/* ------------------------------------------------------------------ */
/* How we work: a deep blue band                                        */
/* ------------------------------------------------------------------ */

/* it follows the pale band of what we do, and the two touch as the design's do: no room between them */
.abt-approach {
    position: relative;
    padding-block: 1.75rem;
    overflow: hidden;
    background: var(--abt-night);
    color: #ffffff;
}

/* vertical lines, a line every 7.5rem, as the design draws its band */
.abt-approach::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgb(0 0 0 / 0) calc(100% - 1px), var(--abt-night-grid) 0);
    background-size: 7.5rem 100%;
    pointer-events: none;
}

.abt-approach > .container {
    position: relative;
}

.abt-approach .abt-eyebrow {
    color: var(--abt-night-eyebrow);
}

.abt-approach__top {
    display: grid;
    gap: 0.75rem;
}

.abt-approach .abt-title {
    margin-top: 0.5rem;
    color: #ffffff;
}

.abt-approach__lead {
    margin: 0;
    max-width: 24rem;
    color: var(--abt-night-text);
}

.abt-principles {
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--abt-night-rule);
}

.abt-principle {
    padding-block: 1.25rem;
}

.abt-principle:last-child {
    padding-bottom: 0;
}

.abt-principle + .abt-principle {
    border-top: 1px solid var(--abt-night-rule-soft);
}

.abt-principle__label {
    margin: 0;
    color: var(--abt-night-label);
}

.abt-principle__title {
    margin: 0.5rem 0 0.25rem;
    color: #ffffff;
}

.abt-principle__text {
    margin: 0;
    max-width: 24rem;
    color: var(--abt-night-card-text);
}

/* ------------------------------------------------------------------ */
/* What matters to us: four cards, each with a drawing                  */
/* ------------------------------------------------------------------ */

/* No line anywhere in it (2026-10-29: asked for, with the section's words pasted, "remove these ____ and come up with a better
   design, maybe illustrations could do"): the four values were numbered lines between rules; they are four cards now, each a
   drawing in a frame, its number, the value and what it means. The drawings are the first design's (2026-10-24, the company's),
   which the page had not drawn since the editorial design of 2026-10-29 began. */
.abt-values__head {
    display: grid;
    gap: 0.75rem;
}

.abt-values__lead {
    margin: 0;
    max-width: 24rem;
    color: var(--abt-muted);
}

.abt-values__list {
    display: grid;
    gap: var(--gap-max);
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
}

/* a card: the page's pale ground, its drawing inset in a frame whose corners are the card's less its padding */
.abt-value {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.5rem;
    border-radius: 1.25rem;
    background: var(--abt-card);
}

.abt-value__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 639 / 370;
    border-radius: 0.75rem;
    object-fit: cover;
    filter: var(--abt-art-filter);
}

.abt-value__body {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 0.5rem;
    padding: var(--gap-max) 0.75rem 0.75rem;
}

.abt-value__no {
    margin: 0;
    color: var(--abt-eyebrow);
}

.abt-value__title {
    margin: 0;
    color: var(--abt-ink);
    text-wrap: balance;
}

.abt-value__text {
    margin: 0;
    color: var(--abt-muted);
}

/* ------------------------------------------------------------------ */
/* Where we work: a pale blue band                                      */
/* ------------------------------------------------------------------ */

.abt-place {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    border-block: 1px solid var(--abt-sky-edge);
    background: var(--abt-sky);
}

.abt-place__grid {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
}

.abt-place__words {
    min-width: 0;
}

.abt-place__text {
    margin: 0;
    max-width: 34rem;
    color: var(--abt-muted);
}

.abt-place__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem var(--gap-max);
    max-width: none;
    margin: var(--gap-max) 0 0;
    padding-block: 1.25rem;
    border-block: 1px solid var(--abt-sky-rule);
    color: var(--abt-sky-ink);
}

.abt-place__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* The closing call                                                    */
/* ------------------------------------------------------------------ */

.abt-closing {
    padding-bottom: var(--gap-max);
}

.abt-closing__grid {
    display: grid;
    gap: var(--gap-max);
    align-items: end;
}

.abt-closing__side {
    display: grid;
    justify-items: start;
    gap: var(--gap-max);
    min-width: 0;
}

.abt-closing__text {
    margin: 0;
    max-width: 26rem;
    color: var(--abt-muted);
}

/* ------------------------------------------------------------------ */
/* Where a script chooses                                              */
/* ------------------------------------------------------------------ */

/* a page without a script has every discipline one after another; where a script will make the choice, only the first, until it
   has (the markup has no `hidden` on them, which a page without a script could not undo) */
@media (scripting: enabled) {
    [data-tabs]:not(.is-ready) .abt-disc:not(:first-child) {
        display: none;
    }

    [data-tabs]:not(.is-ready) .abt-tab:first-child {
        color: var(--abt-eyebrow);
    }

    [data-tabs]:not(.is-ready) .abt-tab:first-child .abt-tab__no {
        color: var(--abt-eyebrow);
    }
}

/* ------------------------------------------------------------------ */
/* From 40rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 40rem) {
    .abt-btn {
        overflow-wrap: normal;
    }

    /* four labels in four equal cells, each as many lines as its words need: at this width they would run together in one row */
    .abt-strip__list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem 1.25rem;
        text-align: center;
    }

    .abt-values__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .abt-k {
        --abt-k-h: 16rem;
    }

    .abt-hero__visual::after {
        width: 18.75rem;
        height: 18.75rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 48rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 48rem) {
    /* the four labels fit a row from here, spread across the window */
    .abt-strip__list {
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    .abt-hero__grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .abt-hero__visual {
        justify-content: flex-end;
    }

    .abt-work__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        align-items: end;
    }

    .abt-work__shell {
        grid-template-columns: minmax(0, 0.87fr) minmax(0, 1.13fr);
    }

    .abt-tabs {
        border-right: 1px solid var(--abt-band-line);
        border-bottom: 0;
    }

    .abt-tab {
        padding-right: 1.5rem;
    }

    .abt-disc {
        padding-inline: 2.5rem var(--gap-max);
    }

    .abt-approach__top {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        align-items: end;
    }

    .abt-principles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .abt-principle {
        padding: 1.25rem 1.5rem 0 0;
    }

    .abt-principle + .abt-principle {
        padding-left: 1.5rem;
        border-top: 0;
        border-left: 1px solid var(--abt-night-rule-soft);
    }


    .abt-place__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .abt-closing__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

/* ------------------------------------------------------------------ */
/* From 64rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .abt-k {
        --abt-k-h: 19rem;
    }

    /* the heading and its sentence side by side: a tablet's column leaves the heading's first line too little room */
    .abt-values__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
        gap: var(--gap-max);
        align-items: end;
    }

    /* a slash between each two of the four labels, which are spread across the window */
    .abt-strip__item + .abt-strip__item::before {
        content: "/";
        content: "/" / "";
        padding-right: 1rem;
        color: var(--abt-crumb-sep);
    }

    .abt-story__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .abt-story__copy {
        padding-top: 1.625rem;
    }

    .abt-disc {
        padding-left: 3.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 80rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 80rem) {
    /* four cards in a row, each wide enough for a sentence in four lines */
    .abt-values__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

/* As the page opens the hero's words settle (the title and the lead only rise, so that they are painted at once), the rest comes
   in after them and the K rises into place; a discipline that is chosen comes in as it is shown. */
@media (prefers-reduced-motion: no-preference) {
    .abt-hero__title,
    .abt-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

    .abt-hero__lead {
        animation-delay: 60ms;
    }

    .abt-crumbs,
    .abt-hero__words > .abt-eyebrow,
    .abt-hero__actions {
        animation: hero-enter var(--spring-slow) var(--ease-spring) both;
    }

    .abt-hero__actions {
        animation-delay: 140ms;
    }

    .abt-k {
        animation: abt-k-in var(--spring-slow) var(--ease-spring) 160ms both;
    }

    .abt-disc:not([hidden]) {
        animation: abt-swap var(--spring) var(--ease-spring) both;
    }
}

@keyframes abt-k-in {
    from {
        opacity: 0;
        translate: calc(var(--abt-k-h) * -0.07) calc(var(--abt-k-h) * 0.08);
    }
}

@keyframes abt-swap {
    from {
        opacity: 0;
        translate: 0 0.5rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* ------------------------------------------------------------------ */
/* Contrast and transparency                                           */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .abt-hero__visual::before,
    .abt-hero__visual::after,
    .abt-approach::before {
        display: none;
    }

    .abt-k {
        filter: none;
        opacity: 1;
    }
}

/* hidden stays hidden, whatever display a rule above gives it */
.abt [hidden] {
    display: none;
}