/* =========================================================
   Office — details / map / people / forms
   Namespace: .brk-office*  (+ .brk-people* for the directory)

   Rendered by components/office/office.php into Bricks
   Shortcode elements. Outer spacing, width and background are
   the section/container's job, not this component's.

   Headings inherit their type from the design system (ACSS /
   Bricks theme style). The only font-family set here is on the
   department names in the filter list — small uppercase labels
   in the display face, the same deliberate choice as badges
   elsewhere in the theme.

   Every var() fallback equals the token's rendered value, so a
   missing token shows the same thing rather than something
   almost right.
   ========================================================= */

.brk-office {
    --brk-office-gap: var(--space-m, 2.4rem);
    --brk-office-gap-s: var(--space-s, 1.92rem);
    --brk-office-ink: var(--text-dark, #000);
    --brk-office-muted: var(--text-dark-muted, rgba(0,0,0,0.8));
    --brk-office-faint: var(--base-semi-light, #a6a6a6);
    --brk-office-line: var(--neutral-trans-20, rgba(0,0,0,0.2));
    --brk-office-hairline: var(--neutral-light, #d9d9d9); /* Jonas 2026-09-07 */
    --brk-office-surface: var(--white, #fff);
    --brk-office-surface-tint: var(--tertiary-ultra-light, #f6f3ef);
    --brk-office-accent: var(--primary, #ffcd00);
    --brk-office-radius: var(--radius-xs, 2.222px);

    color: var(--brk-office-ink);
    width: 100%;
}

.brk-office + .brk-office {
    margin-top: var(--brk-office-gap);
}

/* Bricks styles every <section> on the page as a centred flex column (that is
   how its own Section element works). This component uses <section> for its
   semantics, not for layout, so opt out — otherwise headings shrink-wrap and
   float to the middle of the page. */
.brk-office section {
    display: block;
    align-items: initial;
    justify-content: initial;
    flex-direction: initial;
    row-gap: initial;
    width: 100%;
    max-width: none;
    padding: 0;
}

/* ── Overline: the small uppercase label used for column titles,
      the "Departments" heading and the department tag on a card ── */

.brk-office__col-title,
.brk-people__depts-title,
.brk-people__dept-tag {
    margin: 0;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--brk-office-muted);
}

/* ── Shared label/value line ─────────────────────────────── */

.brk-office__label {
    display: inline-block;
    color: var(--brk-office-muted);
    font-size: var(--text-s, 1.4rem);
    letter-spacing: 0.02em;
}

.brk-office__line {
    margin: 0 0 0.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15em 0.6em;
    line-height: 1.55;
}

.brk-office__line .brk-office__label {
    min-width: 5em;
    flex: 0 0 auto;
}

.brk-office__line a,
.brk-office__directions-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--brk-office-line);
    transition: text-decoration-color var(--dur-fast) ease;
}

.brk-office__line a:hover,
.brk-office__line a:focus-visible,
.brk-office__directions-link:hover,
.brk-office__directions-link:focus-visible {
    text-decoration-color: currentColor;
}

/* ── Rich text from the editor ────────────────────────────────
   The address, opening hours and form intro are WYSIWYG fields:
   arbitrary paragraphs, lists, headings and (on some offices) an
   image. The site's reset zeroes margin-block on everything, so
   vertical rhythm has to be restored here or the block renders as
   one solid slab of text.
   ─────────────────────────────────────────────────────────── */

.brk-office__address-body,
.brk-office__hours-body,
.brk-office__form-intro {
    display: flow-root; /* contains a floated image, see below */
    line-height: 1.65;
}

.brk-office__address-body > * + *,
.brk-office__hours-body > * + *,
.brk-office__form-intro > * + * {
    margin-top: 0.85em;
}

.brk-office__address-body :is(h1, h2, h3, h4, h5, h6),
.brk-office__hours-body :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.8em;
    margin-bottom: 0.5em;
}

.brk-office__address-body :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.brk-office__address-body ul,
.brk-office__address-body ol {
    padding-left: 1.6em;
}

.brk-office__address-body li + li {
    margin-top: 0.35em;
}

/* An image pasted into the address text.
   The office's map now lives in its own field and renders through
   [brokk_office_map], so this is only a fallback for an editor who drops a
   picture into the address WYSIWYG. It does NOT float: the column is narrow,
   so full width and stacked is the only thing that works.

   The width is !important because imported markup carries inline layout hints
   from the old site's editor (a table with style="width: 70%"), which would
   otherwise win. */
.brk-office__address-body > table,
.brk-office__address-body > img,
.brk-office__address-body > p:has(> img:only-child),
.brk-office__address-body > figure {
    float: none;
    width: 100% !important;
    margin: 0 0 var(--brk-office-gap);
}

.brk-office__address-body :is(table, figure) img,
.brk-office__address-body > img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Without table-layout: fixed an auto table is sized by its image's intrinsic
   width and ignores the width above. */
.brk-office__address-body table {
    border-collapse: collapse;
    table-layout: fixed;
}

.brk-office__address-body :is(td, th) {
    padding: 0;
}

/* ── Fact row ────────────────────────────────────────────────
   Design "Kontakt Head Office" 07b: address, phone, email and
   headcount as cells side by side, divided by hairlines, under
   the hero. The row draws its own top and bottom rule so the
   Bricks container around it stays plain.
   ─────────────────────────────────────────────────────────── */

/* The row's top and bottom rules sit on the Bricks section around it, so
   they run the full width of the viewport while the cells stay centred. */
.brk-office__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

/* The address is prose (entity, street, visiting address); the others are one
   line each. Two tracks for the address keeps the row from reading as four
   equal boxes with one of them overflowing. Alone, it takes the whole row. */
.brk-office__fact--address {
    grid-column: span 2;
}

.brk-office__facts:has(> :only-child) > .brk-office__fact {
    grid-column: 1 / -1;
    border-right: 0;
}

.brk-office__fact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
    padding: var(--brk-office-gap) var(--space-l, 3rem);
    border-right: 1px solid var(--brk-office-hairline);
    font-size: var(--text-s, 1.4rem);
    line-height: 1.6;
}

.brk-office__fact:last-child {
    border-right: 0;
}

.brk-office__fact .brk-office__col-title {
    margin-bottom: 0.2em;
}

/* The one number or address each cell exists for, in the display face —
   the same exception the department names make. */
.brk-office__fact-big {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--h4, 2rem);
    line-height: 1.1;
    color: var(--brk-office-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.brk-office__fact-big:hover,
a.brk-office__fact-big:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.brk-office__fact-sub {
    margin: 0;
    color: var(--brk-office-faint);
    font-size: var(--text-xs, 1.2rem);
}

.brk-office__entity {
    margin: 0;
    font-weight: 600;
}

.brk-office__address-body p:last-child,
.brk-office__hours-body p:last-child {
    margin-bottom: 0;
}

.brk-office__address--secondary {
    padding-top: var(--brk-office-gap-s);
    border-top: 1px solid var(--brk-office-line);
}

.brk-office__hours .brk-office__label {
    display: block;
    margin-bottom: 0.35em;
}

.brk-office__directions {
    margin: 0.4rem 0 0;
}

@media (max-width: 991px) {
    .brk-office__fact {
        padding: var(--brk-office-gap-s) var(--brk-office-gap);
    }
    .brk-office__fact--address {
        grid-column: 1 / -1;
        border-right: 0;
    }
    /* Two cells per row: the right-hand one drops its divider. */
    .brk-office__fact:nth-child(2n) {
        border-right: 0;
    }
    .brk-office__fact:nth-child(-n+2) {
        border-bottom: 1px solid var(--brk-office-hairline);
    }
}

@media (max-width: 478px) {
    .brk-office__fact,
    .brk-office__fact--address {
        grid-column: auto;
        border-right: 0;
        border-bottom: 1px solid var(--brk-office-hairline);
    }
    .brk-office__fact:last-child {
        border-bottom: 0;
    }
}

/* ── Map image ───────────────────────────────────────────────
   Its own field, rendered by [brokk_office_map] below the
   details in the left column. Capped by HEIGHT, not width, and
   never cropped: the source maps are near-square, so at full
   column width they dominated the column. width:auto lets the
   image shrink proportionally off max-height, so every pin stays
   in frame.
   ─────────────────────────────────────────────────────────── */

.brk-office__map-image {
    margin: 0;
}

.brk-office__map-image-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 36rem;
    /* A global object-fit: cover is inherited from the theme; that would
       silently crop the pins off the map if the box ever stopped matching
       the image's ratio. Say it out loud instead. */
    object-fit: contain;
}

/* ── Embedded map (iframe) ───────────────────────────────── */

.brk-office__map {
    margin-top: var(--brk-office-gap);
    border-radius: var(--brk-office-radius);
    overflow: hidden;
}

/* Keep the embed responsive whatever width/height the provider pasted in. */
.brk-office__map iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

.brk-office__legal {
    margin: var(--brk-office-gap) 0 0;
    padding-top: var(--brk-office-gap-s);
    border-top: 1px solid var(--brk-office-line);
    color: var(--brk-office-muted);
    font-size: var(--text-s, 1.4rem);
}

/* ── Breadcrumb (a Text element in the Office – Single template) ── */

.brk-office-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    font-size: var(--text-xs, 1.2rem);
    color: var(--brk-office-faint, #a6a6a6);
}

.brk-office-crumbs a {
    color: inherit;
    text-decoration: none;
}

.brk-office-crumbs a:hover,
.brk-office-crumbs a:focus-visible {
    color: var(--text-dark, #000);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.brk-office-crumbs [aria-current] {
    color: var(--text-dark-muted, rgba(0,0,0,0.8));
}

/* ── Form: a collapsed row (design 07b, 2026-09-07) ────────
   Title on the left, hint and a +/− glyph on the right; opens
   to the intro notes and the form. The Bricks section around
   it draws the full-width rules; the row draws its inner ones.
   The hero button "Send a request" (data-brk-form-toggle)
   opens the same row — office.js.
   ─────────────────────────────────────────────────────────── */

.brk-office__form {
    padding: 0; /* overrides the section reset above */
}

.brk-office__form + .brk-office__form {
    border-top: 1px solid var(--brk-office-hairline);
}

.brk-office__form-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease;
}

.brk-office__form-toggle:hover,
.brk-office__form-toggle[aria-expanded="true"] {
    background: var(--brk-office-surface-tint);
}

.brk-office__form-toggle:focus-visible {
    outline: 2px solid var(--brk-office-ink);
    outline-offset: -2px;
}

.brk-office__form-toggle-head {
    padding: var(--brk-office-gap) var(--brk-office-gap);
    border-right: 1px solid var(--brk-office-hairline);
}

.brk-office__form-title {
    display: block;
    margin: 0;
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--h4, 2rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.brk-office__form-toggle-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brk-office-gap-s);
    padding: var(--brk-office-gap) var(--brk-office-gap);
}

.brk-office__form-hint {
    font-size: var(--text-s, 1.4rem);
    line-height: 1.5;
    color: var(--brk-office-muted);
}

/* The +/− is drawn, not typed: two bars, the vertical one folds away when
   the row is open, and the box turns with it. */
.brk-office__form-glyph {
    position: relative;
    flex: 0 0 auto;
    width: 4.4rem;
    height: 4.4rem;
    border: 2px solid var(--brk-office-ink);
    border-radius: var(--brk-office-radius);
    transition: transform 0.25s ease;
}

.brk-office__form-glyph::before,
.brk-office__form-glyph::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6rem;
    height: 2px;
    background: var(--brk-office-ink);
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.brk-office__form-glyph::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.brk-office__form-toggle[aria-expanded="true"] .brk-office__form-glyph::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

.brk-office__form-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    border-top: 1px solid var(--brk-office-hairline);
}

.brk-office__form-panel[hidden] {
    display: none;
}

/* Softer open: the panel fades and lifts in, like the cards below. */
.brk-office__form-panel.is-entering {
    animation: brk-people-in 0.32s ease both;
}

.brk-office__form-notes {
    padding: var(--space-l, 3rem) var(--brk-office-gap);
    border-right: 1px solid var(--brk-office-hairline);
    font-size: var(--text-s, 1.4rem);
    line-height: 1.6;
    color: var(--brk-office-muted);
}

.brk-office__form-intro {
    margin: 0;
}

.brk-office__form-intro p:last-child {
    margin-bottom: 0;
}

.brk-office__form-intro a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.brk-office__form-body {
    padding: var(--space-xl, 4rem) var(--brk-office-gap);
}

@media (max-width: 991px) {
    .brk-office__form-toggle,
    .brk-office__form-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .brk-office__form-toggle-head {
        padding-bottom: 0;
        border-right: 0;
    }

    .brk-office__form-notes {
        padding-bottom: 0;
        border-right: 0;
    }
}

@media (max-width: 478px) {
    .brk-office__form-toggle-head,
    .brk-office__form-toggle-side,
    .brk-office__form-notes,
    .brk-office__form-body {
        padding-left: 0;
        padding-right: 0;
    }

    .brk-office__form-hint[data-brk-hint-closed] {
        display: none; /* the title and the glyph are enough on a phone */
    }
}

@media (prefers-reduced-motion: reduce) {
    .brk-office__form-glyph,
    .brk-office__form-glyph::before,
    .brk-office__form-glyph::after { transition: none; }
    .brk-office__form-panel.is-entering { animation: none; }
}
/* =========================================================
   People — office list + rows (client review, 2026-09-14)
   Two people per row divided by one hairline, the group heading
   as a row of its own, and — when the market has several offices
   with people — a list of offices on the left that filters the
   rows. The department filter, the search, the counter and the
   card view are gone: the client wanted the people sooner and
   the layout plainer. Department mailboxes are an entry of
   their own in that list, listed as rows (Anders 2026-09-29).
   ========================================================= */

.brk-people {
    --brk-people-photo: 9.6rem;
    --brk-people-row-head: 4.8rem; /* the label row over the list and the first heading row */
    --brk-people-gutter: var(--brk-office-gap); /* between the list column's rule and the rows' content */
}

/* ── Head ────────────────────────────────────────────────── */

.brk-people__head {
    padding-bottom: var(--brk-office-gap);
    border-bottom: 1px solid var(--brk-office-hairline);
}

.brk-people__title {
    margin: 0;
}

/* ── Body: office list on the left, rows on the right ────── */

.brk-people__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    align-items: stretch; /* the office column must reach the bottom, its rule with it */
}

.brk-people--no-depts .brk-people__body {
    grid-template-columns: minmax(0, 1fr);
}

/* Ränna mellan kontorslistan och raderna. The rows' rules cross it and meet
   the column's rule (Anders 2026-09-14): every horizontal line is a
   pseudo-element that starts a gutter's width to the left of its row. */
.brk-people__main {
    min-width: 0;
    padding-left: var(--brk-people-gutter);
}

.brk-people--no-depts .brk-people__main {
    padding-left: 0;
}

.brk-people--no-depts {
    --brk-people-gutter: 0px;
}

.brk-people__depts {
    border-right: 1px solid var(--brk-office-hairline);
}

/* Sticky on the inner wrapper, not the column: the column stretches to the
   full height of the body so its rule never stops short of the rows. The
   site header is fixed (~115 px) and exposes no height variable, so the
   offset is stated here — same approach as dealer-locator.css. */
.brk-people__depts-inner {
    position: sticky;
    top: calc(var(--brk-people-header, 12rem) + var(--brk-office-gap-s));
}

.brk-people__dept-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brk-people__dept-list li:first-child .brk-people__dept {
    border-top: 0; /* the head's rule is right above */
}

/* Every row the height of the first group heading across the gutter
   (--brk-people-row-head), so the rule under "All offices" and the rule
   under that heading are one line. The first row's top rule is the head's. */
.brk-people__dept {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    min-height: var(--brk-people-row-head);
    padding: 0 var(--brk-office-gap);
    border: 0;
    border-top: 1px solid var(--brk-office-hairline);
    border-radius: 0;
    background: transparent;
    color: var(--brk-office-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.brk-people__dept:hover,
.brk-people__dept:focus-visible {
    background: var(--brk-office-surface-tint);
    color: var(--brk-office-ink);
}

.brk-people__dept:focus-visible {
    outline: 2px solid var(--brk-office-ink);
    outline-offset: -2px;
}

.brk-people__dept.is-active {
    background: var(--brk-office-surface-tint);
    color: var(--brk-office-ink);
}

/* Display face for the office name: a small uppercase label, the same
   deliberate exception badges make elsewhere in the theme. */
.brk-people__dept-name {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.brk-people__dept-count {
    flex: 0 0 auto;
    font-size: var(--text-xs, 1.2rem);
    font-weight: 600;
    color: var(--brk-office-faint);
}

.brk-people__dept.is-active .brk-people__dept-count {
    color: var(--brk-office-muted);
}

/* ── Rows: two per line, one rule down the middle ────────────
   The vertical rule is painted on the LIST so it runs the full
   height whatever the rows do — a filtered set, a last line with
   one person, a hidden row in the middle. Rows carry their top
   rule; the list closes the bottom. ────────────────────────── */

.brk-people__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background-image: linear-gradient(var(--brk-office-hairline), var(--brk-office-hairline));
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-position: 50% 0;
    position: relative;
}

/* The lines: one under the list, one on top of every row and heading, all
   drawn from the column's rule (a gutter to the left) to the right edge. */
.brk-people__list::after,
.brk-people__group-title::before,
.brk-people__card::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--brk-people-gutter));
    right: 0;
    height: 1px;
    background: var(--brk-office-hairline);
    pointer-events: none;
}

.brk-people__list::after { bottom: 0; }
.brk-people__group-title::before,
.brk-people__card::before { top: 0; }

/* The list closes on the left when there is no column to do it. */
.brk-people--no-depts .brk-people__list {
    border-left: 1px solid var(--brk-office-hairline);
}

.brk-people--no-depts .brk-people__group-title,
.brk-people--no-depts .brk-people__card {
    padding-left: var(--brk-office-gap-s);
}

/* A hidden row or heading must leave the grid entirely, or it still counts
   as a cell. `hidden` alone loses to the elements' own display. */
.brk-people__list > [hidden] {
    display: none !important;
}

/* The group heading is a row of its own across both columns. Its solid
   background covers the list's centre rule so the line does not run
   through the words. A new group is a clear break (Anders 2026-09-14): a
   rule closes the rows above, air, then the heading with the accent bar —
   the same yellow mark the H1's slash and the On site list use. The first
   heading sits straight under "Contacts" at the height of the label across
   the gutter, so their rules align. */
.brk-people__group-title {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    /* More air above than below (Anders 2026-09-14): the heading belongs to
       the rows under it, not to the ones it closes. */
    padding: var(--space-xl, 3.75rem) var(--brk-office-gap-s) var(--brk-office-gap-s);
    background: var(--brk-office-surface);
}

.brk-people__group-title.is-first {
    min-height: var(--brk-people-row-head);
    padding-top: 0;
    padding-bottom: 0;
}

.brk-people__group-title.is-first::before {
    display: none; /* the head's rule is right above */
}

/* Gruppetiketterna ("Sales", "Department mailboxes") är eyebrows: typografi och gult "/" från
   .brokk-tagline / --slash (plan 023). */
.brk-people__group-heading {
    margin: 0;
}

/* "· Office" after the group name while every office is shown; office.js
   sets .is-filtered once one office is selected and the suffix is noise. */
.brk-people__group-office {
    font-weight: 400;
    color: var(--brk-office-faint);
    text-transform: none;
    letter-spacing: normal;
}

.brk-people.is-filtered .brk-people__group-office {
    display: none;
}

.brk-people__card {
    display: grid;
    /* Photo on the left, everything else stacked beside it: name, role,
       contact. The text takes the whole remaining width. Top-aligned, so
       the names of the two rows on a line sit on the same baseline whether
       a role wraps or not. */
    grid-template-columns: var(--brk-people-photo) minmax(0, 1fr);
    column-gap: var(--brk-office-gap);
    row-gap: 0.2rem;
    align-items: start;
    align-content: start;
    min-width: 0;
    position: relative;
    padding: var(--brk-office-gap-s);
}

.brk-people__photo {
    width: var(--brk-people-photo);
    /* 4:5, a little taller than wide (Anders 2026-09-14): the source
       portraits are 2:3, and a square cut them to a passport photo. */
    aspect-ratio: 4 / 5;
    border-radius: var(--brk-office-radius);
    overflow: hidden;
    background: var(--brk-office-surface-tint);
}

.brk-people__photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Source portraits are 2:3 studio shots with the face in the upper
       third; centre-top keeps the face inside a square crop. */
    object-position: center 20%;
}

/* Avdelningsbrevlåda: kvadrat med B:et, samma gula platta som initialerna
   och som faviconen. */
.brk-people__photo--mailbox {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brk-office-accent);
    color: var(--text-dark);
}

.brk-people__photo--mailbox svg {
    width: 50%;
    height: auto;
    display: block;
}

.brk-people__photo--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brk-office-accent);
    color: var(--primary-ultra-dark, #332900);
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: calc(var(--brk-people-photo) * 0.34);
    letter-spacing: 0.02em;
}

/* The text is one block beside the photo, not grid rows the photo would
   stretch: with the taller portrait the lines drifted apart (Anders
   2026-09-14). Photo and text both start at the top. */
.brk-people__card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.brk-people__name {
    margin: 0;
    font-size: var(--h5, 1.9rem);
    line-height: 1.1;
    text-transform: uppercase;
}

.brk-people__role,
.brk-people__territory,
.brk-people__note {
    margin: 0.4rem 0 0;
    color: var(--brk-office-muted);
    font-size: var(--text-m, 1.5rem);
    line-height: 1.4;
}

.brk-people__note {
    font-size: var(--text-xs, 1.2rem);
    line-height: 1.5;
}

/* Air after the title (Anders 2026-09-14): name and title read as one
   unit, the territory and the contact lines as the next. Two classes deep so
   it outranks the lines' own margin rules, which come later in the sheet. */
.brk-people__card .brk-people__role + * {
    margin-top: 1.4rem;
}

/* Phone, then the e-mail under it — always, not side by side when there
   is room (Anders 2026-09-14). */
.brk-people__reach {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* the underline as long as the text, not the row */
    row-gap: 0.4rem;
    margin: 0;
    padding-top: 0.6rem;
    font-size: var(--text-s, 1.4rem);
    line-height: 1.4;
}

.brk-people__reach a {
    color: var(--brk-office-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--brk-office-line);
    overflow-wrap: anywhere;
    transition: text-decoration-color var(--dur-fast) ease;
}

.brk-people__reach a:hover,
.brk-people__reach a:focus-visible {
    text-decoration-color: currentColor;
}

/* ── Softer changes ──────────────────────────────────────────
   office.js re-adds .is-entering after every filter, and the
   visible rows fade and lift in, staggered a little so the grid
   reads as settling rather than snapping. Off under reduced
   motion. The form panel uses the same keyframes. ─────────── */

@keyframes brk-people-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.brk-people__list.is-entering .brk-people__card,
.brk-people__list.is-entering .brk-people__group-title {
    animation: brk-people-in 0.32s ease both;
}

.brk-people__list.is-entering > :nth-child(n+2)  { animation-delay: 0.03s; }
.brk-people__list.is-entering > :nth-child(n+4)  { animation-delay: 0.06s; }
.brk-people__list.is-entering > :nth-child(n+7)  { animation-delay: 0.09s; }
.brk-people__list.is-entering > :nth-child(n+10) { animation-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .brk-people__list.is-entering > * { animation: none; }
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 1279px) {
    .brk-people {
        --brk-people-photo: 8rem;
    }

    .brk-people__card {
        padding: var(--brk-office-gap-s) var(--brk-office-gap-s);
    }
}

@media (max-width: 991px) {
    /* The office list becomes a horizontally scrolling row of chips above
       the rows; sticky no longer makes sense. One row per line. */
    .brk-people__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .brk-people__depts {
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid var(--brk-office-hairline);
        padding-bottom: var(--brk-office-gap-s);
    }

    .brk-people__depts-inner {
        position: static;
    }

    .brk-people {
        --brk-people-gutter: 0px; /* stacked: the gutter would be an indent without a counterpart */
    }

    .brk-people__group-title.is-first {
        min-height: 0;
        padding-top: var(--brk-office-gap-s);
        padding-bottom: var(--brk-office-gap-s);
    }

    .brk-people__list {
        grid-template-columns: minmax(0, 1fr);
        background-image: none;
    }

    .brk-people__group-title,
    .brk-people__card {
        padding-left: 0;
        padding-right: 0;
    }

    .brk-people__dept-list {
        display: flex;
        gap: 0.6rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .brk-people__dept-list::-webkit-scrollbar {
        display: none;
    }

    .brk-people__dept-list li {
        flex: 0 0 auto;
    }

    .brk-people__dept-list li:first-child .brk-people__dept {
        border-top: 1px solid var(--brk-office-hairline); /* a chip again */
    }

    .brk-people__dept {
        width: auto;
        min-height: 0;
        gap: 0.8rem;
        padding: 0.9rem 1.2rem;
        border: 1px solid var(--brk-office-hairline);
        border-radius: var(--brk-office-radius);
        white-space: nowrap;
    }

    .brk-people__dept.is-active {
        border-color: var(--brk-office-ink);
        background: var(--brk-office-ink);
        color: var(--text-light, #fff);
    }

    .brk-people__dept.is-active .brk-people__dept-count {
        color: var(--text-light-muted, rgba(255,255,255,0.8));
    }
}

@media (max-width: 767px) {
    .brk-people {
        --brk-people-photo: 7.2rem;
    }

    .brk-people__card {
        column-gap: var(--brk-office-gap-s);
    }

}

@media (max-width: 478px) {
    .brk-office__line {
        display: block;
    }

    .brk-office__line .brk-office__label {
        min-width: 0;
        margin-right: 0.4em;
    }

    .brk-people__card {
        padding: var(--brk-office-gap-s) 0;
    }
}

/* ── Facts row: the Selected office cell and the On site list (08b, 2026-09-08) ── */

.brk-office__facilities {
    margin: 0;
    padding: 0;
    list-style: none;
}

.brk-office__facilities li {
    position: relative;
    padding-left: 1.4rem;
}

.brk-office__facilities li::before {
    content: "";
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 0.6rem;
    height: 2px;
    background: var(--brk-office-accent);
}

/* The On site list gets a row of its own under the cells, in columns. */
.brk-office__fact--facilities {
    grid-column: 1 / -1;
    border-right: 0;
    border-top: 1px solid var(--brk-office-hairline);
}

.brk-office__facilities {
    columns: 3;
    column-gap: var(--space-l, 3rem);
}

@media (max-width: 991px) {
    .brk-office__facilities { columns: 2; }
}

@media (max-width: 478px) {
    .brk-office__facilities { columns: 1; }
}

/* The submit button's font and colours are set for every WS Form button
   site-wide in style.css ("Formulärknappar"). */

/* The submit sits at the right edge of its column, like on the start page
   (.bcf-submit is the field wrapper class set in WS Form). */
.brk-office__form-body .bcf-submit,
.brk-office__form-body .wsf-field-wrapper:has(> button.wsf-button) {
    display: flex;
    justify-content: flex-end;
}