/*
 * Project overrides on top of webflow.css.
 * Loaded last; everything here is either a copy-length adjustment or markup
 * this site adds that the original template did not have.
 */

/* ---------------------------------------------------- our services ---
 * The template's scroll rig is 500vh, sized for four words. Ours holds three,
 * so the track is a quarter shorter.
 */
.sticky-service-wrapper {
    height: 375vh;
}

/* The wheel and its photos were renamed off .service-wheel / .service-image so
 * Webflow IX2 stops binding to them — it spun the wheel a full turn across
 * four slots on its own clock, out of step with the three text steps, and kept
 * overwriting the inline transform. main.js drives it now. These rules are the
 * template's, copied across verbatim under the new names. */
.svc-wheel {
    justify-content: flex-start;
    align-items: center;
    width: 250vh;
    height: 250vh;
    display: flex;
    position: absolute;
    /* Template value is -116.3vh. Shifted left so the photo lands in the gap
     * between the heading and the description instead of behind the text —
     * the slots that now face the viewer are further right than the ones IX2
     * used to bring round. */
    left: -151.3vh;
}

.svc-photo {
    object-fit: cover;
    width: 20vw;
    height: 20vw;
}

.svc-photo._1 { position: absolute; top: 40%; left: 0; }
.svc-photo._2 { position: absolute; bottom: 0; left: 40%; right: auto; }
.svc-photo._3 { position: absolute; top: 40%; right: 0; }
.svc-photo._4 { position: absolute; top: 0; left: 40%; width: 20vw; height: 20vw; }

/* Headings stack in one spot and are cross-faded by main.js. The template did
 * this with .text-1…4, which is what tied it to IX2's fixed quarters.
 *
 * They were single words at 56px; ours are full service names, so the size
 * scales with the viewport and the line is allowed to wrap. */
.service-text {
    max-width: 15ch;
    font-size: clamp(22px, 2.6vw, 40px);
    line-height: 1.15;
    letter-spacing: var(--_typography---letter-spacing--medium);
    text-transform: none;
    white-space: normal;
    text-decoration: none;
}

.service-text-list > .service-text + .service-text {
    position: absolute;
    top: 0;
    left: 0;
}

/* Descriptions ride beside the wheel on the same cross-fade as the heading. */
.service-desc-list {
    z-index: 10;
    width: 30%;
    max-width: 420px;
    position: absolute;
    top: 50%;
    right: 6vw;
    transform: translateY(-50%);
}

.service-desc {
    font-family: var(--_font-family---body-font);
    color: #ffffffe6;
    font-size: var(--_typography---font-size--paragraph-medium);
    line-height: var(--_typography---line-height--large);
    text-shadow: 0 1px 8px #000000a6;
}

.service-desc + .service-desc {
    position: absolute;
    top: 0;
    left: 0;
}

/* Only the first step is painted before the script runs. */
.service-text-list > .service-text + .service-text,
.service-desc + .service-desc,
.service-image-bg + .service-image-bg {
    opacity: 0;
}

/* ------------------------------------ our services: phones and tablets ---
 * The wheel needs a landscape screen. Its photos travel round a circle wider
 * than the viewport, and on a portrait screen that circle runs straight
 * through the heading and the description, which have no room beside it.
 *
 * Below 992px the section is a card in the hero's frame instead: the step's
 * photo, sharp and rounded like the hero, the copy over a fade at its foot,
 * and a three-part bar showing how far through the steps the reader is.
 * main.js slides each photo up over the previous one rather than
 * cross-fading them behind the blur. The card starts 10px under the fixed
 * header, which is 100px tall here and 80px on phones under 480px.
 */
.service-progress {
    display: none;
}

@media screen and (max-width: 991px) {
    /* The template paints this white; it shows below the card in the strip
     * a phone's toolbars leave when they hide (see svh below). */
    .service-contain-wrapper {
        background-color: var(--neutral--black);
    }

    /* svh: with the phone's toolbars showing, a 100vh card would run under
     * the bottom one and hide the end of the copy. */
    .stiky-service {
        --card-top: 110px;
        height: 100vh;
        height: 100svh;
        flex-direction: column;
        justify-content: flex-end;
        align-items: stretch;
        padding: var(--card-top) 10px 10px;
        background-color: var(--neutral--black);
    }

    .service-image-bg,
    .stiky-service > .overlay {
        top: var(--card-top);
        left: 10px;
        width: calc(100% - 20px);
        height: calc(100% - var(--card-top) - 10px);
        border-radius: 24px;
    }

    .service-image-bg {
        will-change: transform;
    }

    .stiky-service > .overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(180deg, #0000 32%, #00000066 50%, #000000cc 72%, #000000e6 100%);
    }

    .service-wheel-wrap {
        display: none;
    }

    .service-wrapper,
    .service-desc-list,
    .service-progress {
        margin-left: clamp(24px, 5vw, 40px);
        margin-right: clamp(24px, 5vw, 40px);
    }

    .service-wrapper {
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-left: 0;
    }

    /* The steps share one grid cell, so each list is as tall as its longest
     * step and nothing under it shifts when the copy changes. */
    .service-text-list,
    .service-desc-list {
        display: grid;
    }

    .service-text-list > .service-text,
    .service-text-list > .service-text + .service-text,
    .service-desc,
    .service-desc + .service-desc {
        grid-area: 1 / 1;
        position: static;
    }

    .service-text {
        max-width: none;
        font-size: clamp(26px, 7.4vw, 40px);
    }

    .service-desc-list {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: auto;
        max-width: 560px;
        margin-top: 12px;
        transform: none;
    }

    .service-progress {
        z-index: 10;
        display: flex;
        gap: 6px;
        position: relative;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .service-progress-step {
        flex: 1;
        height: 2px;
        border-radius: 2px;
        background-color: #ffffff40;
        overflow: hidden;
    }

    .service-progress-fill {
        display: block;
        height: 100%;
        background-color: var(--neutral--white);
        transform: scaleX(0);
        transform-origin: left center;
    }
}

@media screen and (max-width: 479px) {
    .stiky-service {
        --card-top: 90px;
    }
}

/* Short screens — an SE-sized phone with its toolbars showing, any phone on
 * its side: the copy tightens so the photo keeps the top half of the card. */
@media screen and (max-width: 991px) and (max-height: 680px) {
    .service-wrapper {
        gap: 12px;
    }

    .service-text {
        font-size: 24px;
    }

    .service-desc {
        font-size: 15px;
        line-height: 1.45;
    }

    .service-desc-list {
        margin-top: 8px;
    }

    .service-progress {
        margin-top: 18px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 991px) and (max-height: 460px) {
    .service-text {
        font-size: 22px;
    }

    .service-desc {
        font-size: 14px;
    }
}

/* -------------------------------------------------------------- contact ---
 * The Visit / Working Hours row was removed. The template's card holds
 * min-height 950px with space-between, so without that row the remaining
 * content would be pushed apart to fill the gap. Let the card size to its
 * contents and space them explicitly instead.
 */
.footer-cta-card {
    min-height: auto;
    grid-row-gap: 64px;
    justify-content: flex-start;
}

/* --------------------------------------------------------------- footer ---
 * The title is the client's line, twice the template's length: at the
 * template's heading-4 (56px, up to 140% leading) it ran to four lines. The
 * type scale's heading-6 (32px), set tight, keeps one sentence per line in
 * the template's 440px column.
 */
.title-footer {
    font-size: var(--_typography---font-size--heading-6);
    line-height: 110%;
}

/* --------------------------------------------------------- mobile menu ---
 * Phones and tablets — the burger shows below 992px. A panel slides in from
 * the right over a dimmed, blurred page and leaves a strip of the page
 * uncovered: a tap there closes the menu, as do the X, Esc, a swipe to the
 * right and any link (main.js). The items arrive one after another — each
 * label rises out of its line, its number and the rule beneath follow — and
 * the contacts, social links and the call to action sit at the bottom, where
 * a thumb reaches.
 *
 * This replaces the template's .nav-menu-phone, a full-screen sheet that
 * Webflow IX2 slid in. That markup is gone; its webflow.css rules are dead.
 */

/* The burger is a real <button> now. :where() keeps this reset at zero
 * specificity, so the template's .menu-toggle size and padding still win. */
:where(button.menu-toggle) {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The page behind an open menu holds still (main.js sets the class). */
html.is-menu-open,
html.is-menu-open body {
    overflow: hidden;
}

.mnav {
    --mnav-ease: cubic-bezier(.22, 1, .36, 1);
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
    /* stays painted until the closing slide is over */
    transition: visibility 0s linear .5s;
}

.mnav.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

@media screen and (min-width: 992px) {
    .mnav {
        display: none;
    }
}

.mnav-backdrop {
    position: absolute;
    inset: 0;
    background-color: #00000080;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .4s ease;
}

.mnav.is-open .mnav-backdrop {
    opacity: 1;
}

.mnav-panel {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    /* the uncovered strip on the left is the tap-to-close area */
    width: min(calc(100% - 72px), 400px);
    display: flex;
    flex-direction: column;
    padding: 20px 24px 24px;
    border: 1px solid #ffffff14;
    border-radius: 24px;
    background:
        radial-gradient(120% 45% at 100% 100%, #fb451c26, #fb451c00 70%),
        #0e0e0e;
    box-shadow: -24px 0 64px #00000073;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* vertical pans scroll the panel natively; horizontal ones are the swipe */
    touch-action: pan-y;
    transform: translateX(calc(100% + 24px));
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.mnav.is-open .mnav-panel {
    transform: none;
    transition: transform .7s var(--mnav-ease);
}

/* following a finger */
.mnav.is-dragging .mnav-panel,
.mnav.is-dragging .mnav-backdrop {
    transition: none;
}

.mnav-head {
    display: flex;
    flex: none;
    justify-content: space-between;
    align-items: center;
}

.mnav-close {
    display: flex;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ffffff1f;
    border-radius: 50%;
    background-color: #ffffff0f;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, transform .2s ease;
}

.mnav-close img {
    width: 20px;
    height: 20px;
    opacity: 0;
    transform: rotate(-90deg) scale(.6);
    transition: opacity .2s ease, transform .2s ease;
}

.mnav.is-open .mnav-close img {
    opacity: 1;
    transform: none;
    transition: opacity .4s ease .25s, transform .6s var(--mnav-ease) .25s;
}

.mnav-close:active {
    background-color: #ffffff1f;
    transform: scale(.92);
}

.mnav-nav {
    margin-top: 28px;
}

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

.mnav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    color: var(--neutral--white);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* the rule under each item draws itself in */
.mnav-link::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background-color: #ffffff1f;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s ease;
}

.mnav-num {
    align-self: flex-start;
    min-width: 20px;
    padding-top: 7px;
    font-family: var(--_font-family---body-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #ffffff59;
    opacity: 0;
    transition: opacity .2s ease;
}

.mnav-link.is-current .mnav-num {
    color: #fb451c;
}

/* a mask the label rises out of */
.mnav-label {
    display: block;
    flex: 1;
    overflow: hidden;
}

.mnav-label-text {
    display: block;
    font-family: var(--_font-family---body-font);
    font-size: clamp(26px, 8.6vw, 34px);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
    letter-spacing: -.03em;
    transform: translateY(110%);
    transition: transform .25s ease;
}

.mnav-arrow {
    flex: none;
    width: 20px;
    opacity: 0;
    transition: opacity .2s ease, transform .3s ease;
}

.mnav.is-open .mnav-label-text {
    transform: none;
    transition: transform .8s var(--mnav-ease) calc(.18s + var(--i) * .07s);
}

.mnav.is-open .mnav-num {
    opacity: 1;
    transition: opacity .6s ease calc(.3s + var(--i) * .07s);
}

.mnav.is-open .mnav-arrow {
    opacity: .4;
    transition: opacity .6s ease calc(.3s + var(--i) * .07s), transform .3s ease;
}

.mnav.is-open .mnav-link.is-current .mnav-arrow,
.mnav.is-open .mnav-link:active .mnav-arrow {
    opacity: 1;
}

.mnav.is-open .mnav-link::after {
    transform: scaleX(1);
    transition: transform .9s var(--mnav-ease) calc(.22s + var(--i) * .07s);
}

.mnav-link:active .mnav-arrow {
    transform: translateX(4px);
}

.mnav-foot {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: auto;
    padding-top: 32px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .2s ease, transform .2s ease;
}

.mnav.is-open .mnav-foot {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease .45s, transform .8s var(--mnav-ease) .45s;
}

.mnav-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.mnav-contact {
    font-family: var(--_font-family---body-font);
    font-size: 16px;
    line-height: 1.4;
    color: #ffffffb3;
    text-decoration: none;
    transition: color .2s ease;
}

.mnav-contact:active {
    color: var(--neutral--white);
}

.mnav-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mnav-social-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ffffff24;
    border-radius: 50%;
    transition: background-color .2s ease;
}

.mnav-social-link img {
    width: 18px;
    height: 18px;
}

.mnav-social-link:active {
    background-color: #ffffff1f;
}

/* the same pill as the book page's Amazon button */
.mnav-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 0 24px;
    border: 1px solid var(--neutral--white);
    border-radius: 1000px;
    font-family: var(--_font-family---body-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral--white);
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease;
}

.mnav-cta img {
    width: 20px;
    transition: transform .25s ease;
}

.mnav-cta:active {
    border-color: var(--brand-color--red);
    background-color: var(--brand-color--red);
}

@media (hover: hover) {
    .mnav-close:hover,
    .mnav-social-link:hover {
        background-color: #ffffff1f;
    }

    .mnav.is-open .mnav-link:hover .mnav-arrow {
        opacity: 1;
        transform: translateX(4px);
    }

    .mnav-contact:hover {
        color: var(--neutral--white);
    }

    .mnav-cta:hover {
        border-color: var(--brand-color--red);
        background-color: var(--brand-color--red);
    }

    .mnav-cta:hover img {
        transform: translateX(4px);
    }
}

.mnav-open:focus-visible,
.mnav :focus-visible {
    outline: 2px solid var(--neutral--white);
    outline-offset: 3px;
}

/* An SE-sized phone with its toolbars showing, or any phone on its side. */
@media screen and (max-height: 640px) {
    .mnav-nav {
        margin-top: 16px;
    }

    .mnav-link {
        padding: 10px 0;
    }

    .mnav-label-text {
        font-size: clamp(24px, 8vw, 28px);
    }

    .mnav-foot {
        gap: 14px;
        padding-top: 20px;
    }
}

/* 320px phones: five social buttons in one row, and a little more room. */
@media screen and (max-width: 359px) {
    .mnav-panel {
        padding-right: 20px;
        padding-left: 20px;
    }

    .mnav-social {
        gap: 6px;
    }

    .mnav-social-link {
        width: 36px;
        height: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mnav-panel,
    .mnav.is-open .mnav-panel {
        transform: none;
    }

    .mnav-panel {
        opacity: 0;
        transition: opacity .2s ease;
    }

    .mnav.is-open .mnav-panel {
        opacity: 1;
    }

    .mnav .mnav-label-text,
    .mnav .mnav-link::after,
    .mnav .mnav-foot,
    .mnav .mnav-close img {
        transform: none;
    }

    .mnav *,
    .mnav *::after {
        transition-duration: .2s !important;
        transition-delay: 0s !important;
    }
}

/* ------------------------------------------------------ webflow badge ---
 * webflow.js injects a "Made in Webflow" link into the page. Not ours.
 */
.w-webflow-badge {
    display: none !important;
}

/* ---------------------------------------------------------------- hero ---
 * The template's hero title is a single word at 200px. Ours is a full
 * sentence, so it scales with the viewport instead.
 */
.title-hero.home.is-long {
    font-size: clamp(38px, 6.2vw, 104px);
    line-height: 1.02;
    max-width: 14ch;
}

/* --------------------------------------------------------------- about ---
 * The template's lead paragraph is 56px because it holds ~20 words. Ours holds
 * ~60, which fills the whole viewport at that size — so it scales down and the
 * column runs wider.
 */
.about-text.is-long {
    max-width: 1180px;
    font-size: clamp(19px, 2.1vw, 32px);
    line-height: 1.35;
}

/* ---------------------------------------------------------- page intro ---
 * An inner page's opening paragraph, moved out of the hero (page-intro.php).
 * The same lead as the home page's About us block (.about-text.reveal-text
 * .is-long) under a class IX2 does not bind to. The section that follows
 * brings its own top padding, so this one adds none underneath.
 */
.section.section-padding.page-intro {
    padding-bottom: 0;
}

/* On a phone the next block's padding is only 40px, which ran the lead into
 * the first chapter's tag. */
@media screen and (max-width: 767px) {
    .section.section-padding.page-intro {
        padding-bottom: 32px;
    }
}

.page-intro-text {
    width: 100%;
    max-width: 1180px;
    margin: 0;
    font-family: var(--_font-family---body-font);
    color: var(--neutral--white);
    font-size: clamp(19px, 2.1vw, 32px);
    line-height: 1.35;
    font-weight: var(--_typography---font-weight--medium);
    letter-spacing: var(--_typography---letter-spacing--large);
}

/* The template's 200px gap suited a lead that filled the screen; with the
 * smaller type it reads as a hole. */
.about-us-contain {
    grid-column-gap: 96px;
    grid-row-gap: 96px;
}

@media screen and (max-width: 991px) {
    .about-us-contain {
        grid-column-gap: 48px;
        grid-row-gap: 48px;
    }
}

/* The bio link sits above the paired images in a right-hand column. */
.about-side-column {
    grid-row-gap: 32px;
    flex-flow: column;
    flex: 0 auto;
    justify-content: flex-end;
    align-items: flex-end;
    display: flex;
}

.about-side-column .about-image-wrapper {
    width: auto;
}

.about-side-link {
    white-space: nowrap;
}

@media screen and (max-width: 991px) {
    .about-side-column {
        align-items: flex-start;
        width: 100%;
    }

    .about-side-column .about-image-wrapper {
        width: 100%;
    }
}

/* --------------------------------------------- centred section buttons ---
 * "Work With Me", "View all books", "View all articles".
 */
.section-cta-center {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
}

/* ------------------------------------------------- work with me cards ---
 * Three cards in a two-column grid: the third spans both columns and is
 * centred at single-column width.
 */
.list-work.gird-2.is-three {
    grid-template-rows: auto auto;
}

.list-work.gird-2.is-three > :nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 5px);
}

@media screen and (max-width: 991px) {
    .list-work.gird-2.is-three > :nth-child(3) {
        width: 100%;
    }
}

.work-card.service-card {
    justify-content: flex-end;
    min-height: 420px;
    padding: 0;
}

.service-card-body {
    z-index: 2;
    background-image: linear-gradient(to top, #000000f2 0%, #000000e0 40%, #00000080 72%, #0000 100%);
    flex-flow: column;
    grid-row-gap: 10px;
    width: 100%;
    padding: 72px 28px 28px;
    display: flex;
    position: relative;
}

.service-card-title {
    font-family: var(--_font-family---body-font);
    color: var(--neutral--white);
    font-size: var(--_typography---font-size--heading-7);
    line-height: var(--_typography---line-height--reguler);
    font-weight: var(--_typography---font-weight--bold);
}

.service-card-text {
    font-family: var(--_font-family---body-font);
    color: #ffffffd9;
    font-size: var(--_typography---font-size--paragraph-medium);
    line-height: var(--_typography---line-height--large);
    text-shadow: 0 1px 6px #000000a6;
}

.service-card-title {
    text-shadow: 0 1px 8px #000000b3;
}

/* ------------------------------------------------------ insight cards ---
 * The testimonial card becomes a link; keep it looking identical.
 */
a.testimonial-card.article-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* ------------------------------------------------------ About Me page ---
 * The story chapters alternate text and photo. Everything inside a row is a
 * template class; only the two-column grid is new, because the template has
 * no block that pairs a headline with an image this way.
 */
.story-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 80px;
    align-items: center;
    width: 100%;
}

/* Even chapters put the photo first, so the page reads as a zigzag. */
.story-row.is-reversed .story-media {
    order: -1;
}

.story-copy {
    display: flex;
    flex-direction: column;
    grid-row-gap: 32px;
}

.story-text {
    display: flex;
    flex-direction: column;
    grid-row-gap: 20px;
}

/* .paragraph-large is black by default — it was written for the light sections. */
.story-text .paragraph-large {
    color: var(--text-color--text-grey-2);
}

.story-media {
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    width: 100%;
}

@media screen and (max-width: 991px) {
    .story-row {
        grid-template-columns: 1fr;
        grid-row-gap: 40px;
    }

    /* One column: the photo always follows its text. */
    .story-row.is-reversed .story-media {
        order: 0;
    }

    .story-media {
        aspect-ratio: 3 / 2;
    }
}

/* ------------------------------------------------------------- 404 ------
 * No hero above it, so the section has to clear the fixed navbar itself:
 * 80px for the bar on top of the template's own section padding, which
 * shrinks on smaller screens. Two classes, because the template sets that
 * padding on .section.section-padding and a single class loses to it.
 */
.section.is-404-section {
    min-height: 70vh;
    padding-top: calc(80px + var(--_spacing---section-padding--default));
}

.is-404-section .paragraph-large {
    color: var(--text-color--text-grey-2);
}

/* Same look as .title-section.text-white, minus the IX2 letter animation. */
.not-found-title {
    font-family: var(--_font-family---body-font);
    color: var(--neutral--white);
    font-size: var(--_typography---font-size--heading-2);
    line-height: var(--_typography---line-height--reguler);
    font-weight: var(--_typography---font-weight--medium);
    letter-spacing: var(--_typography---letter-spacing--large);
}

/* ----------------------------------------------------- Services page ---
 * Rows of programmes: number, name, one line of copy, arrow. The template has
 * no block shaped like this, so the grid is ours; everything painted inside a
 * row is a template class.
 */
.service-row-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.service-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1.05fr) minmax(0, 0.95fr) 56px;
    align-items: center;
    grid-column-gap: 24px;
    width: 100%;
    padding: 36px 0;
    color: inherit;
    text-decoration: none;
    transition: opacity .3s ease;
}

.service-row-number {
    font-family: var(--_font-family---body-font);
    color: var(--text-color--text-grey-2);
    font-size: var(--_typography---font-size--paragraph-medium);
    font-weight: var(--_typography---font-weight--semi-bold);
    letter-spacing: var(--_typography---letter-spacing--large);
}

.service-row-name {
    font-family: var(--_font-family---body-font);
    color: var(--neutral--white);
    /* Our names run to five words, so they scale instead of sitting at the
     * template's fixed heading size and wrapping three lines. */
    font-size: clamp(24px, 2.6vw, 44px);
    line-height: 1.1;
    font-weight: var(--_typography---font-weight--bold);
    letter-spacing: var(--_typography---letter-spacing--large);
    text-transform: uppercase;
}

.service-row-text {
    color: var(--text-color--text-grey-2);
}

.service-row-arrow {
    display: flex;
    justify-content: flex-end;
}

.service-row-arrow img {
    transition: transform .3s ease;
}

.service-row:hover .service-row-arrow img {
    transform: translateX(8px);
}

.service-row:hover .service-row-name {
    opacity: .7;
}

@media screen and (max-width: 991px) {
    .service-row {
        grid-template-columns: 48px minmax(0, 1fr) 32px;
        grid-row-gap: 12px;
        padding: 28px 0;
    }

    /* The line of copy drops under the name and spans the text column. */
    .service-row-text {
        grid-column: 2 / 3;
    }

    .service-row-arrow {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
        align-self: start;
    }
}

/* A one-word hero title has no space to break at, so it scales with the
 * viewport instead of overflowing the hero's left column. */
.title-hero.home.is-one-word {
    font-size: clamp(48px, 10.5vw, 200px);
    white-space: nowrap;
}

/* The "View all services" button sits in its own band under the pinned Work
 * With Me section, so the section itself keeps the layout it was calibrated
 * with. Padding matches the gap the template leaves around a centred button.
 */
.is-service-cta {
    padding-top: 80px;
    padding-bottom: 20px;
}

/* --------------------------------------------- insights: stack clearance ---
 * The article cards are sticky and IX2 rotates the middle ones, so they hang
 * about 60px below the box the stack occupies. The button that follows sat
 * flush against that box, which put it under the cards once the stack
 * collapsed. Clear the overhang, and paint above whatever still reaches down.
 */
#insights .section-cta-center {
    position: relative;
    z-index: 3;
    margin-top: 96px;
}

@media screen and (max-width: 991px) {
    #insights .section-cta-center {
        margin-top: 56px;
    }
}

/* Phones: the template's card keeps its 360px (the first one, padded 20px
 * rather than 40, its 280px content) once the cover beside the text is
 * hidden, which left ~130px of nothing between the title and the author.
 * The card takes its content's height instead. A floor of three title lines
 * (90 + 24 + the 60px author row) keeps the stacked cards the same height,
 * so one does not peek out from under the next. */
@media screen and (max-width: 479px) {
    #insights .testimonial-card {
        height: auto;
    }

    #insights .testimonial-content-wrap {
        height: auto;
        min-height: 174px;
        grid-row-gap: 24px;
    }
}

/* Detail-page hero title: the size the template uses for .title-hero
 * .detail-project. The hero's own 200px is built for a single word and runs
 * off the screen with a service name.
 */
.title-hero.home.is-detail {
    font-size: var(--_typography---font-size--heading-2);
    line-height: var(--_typography---line-height--reguler);
    font-weight: var(--_typography---font-weight--bold);
    text-transform: uppercase;
    max-width: 16ch;
}

/* ------------------------------------------------ service overview ---
 * The template's overview lead is about 230 characters at 40px. Our service
 * descriptions are twice that, which turned the block into a wall of type —
 * so it scales down, the same way the home page's lead does.
 */
.section-overview .detail-work-text {
    font-size: clamp(18px, 1.9vw, 26px);
    line-height: 1.5;
}

/* ------------------------------------------------------------ projects ---
 * The project pictures are 16:9 banners — a logo across a designed navy
 * background (client, 2026-10-08; until then flat-ground logos). The logo
 * runs nearly edge to edge, so a box that crops much would cut it.
 *
 * Hero (project-hero.php): the card starts under the fixed header, which is
 * 105px tall on a desktop, 100px below 992px and 80px on a phone. It takes
 * the banner's own proportions, so the banner shows whole; on a desktop it is
 * held to the rest of the screen, which trims a sliver off top and bottom.
 */
.section.hero-section.home.is-project-hero {
    height: auto;
    padding: 115px 10px 10px;
}

.hero-contain.main.project-hero-card {
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 125px);
    aspect-ratio: 1672 / 941;
    padding: 0;
}

/* the darkening is for a title, and this hero has none */
.hero-contain.main.project-hero-card::after {
    content: none;
}

.hero-image.project-hero-banner {
    object-fit: cover;
    padding: 0;
}

.section-overview h1.title-section {
    margin: 0;
}

/* A holding's brands (project-overview.php): the label/value rows under a
 * white heading, each value a link to the brand's site. */
.overview-brands {
    width: 100%;
}

.overview-brands-title {
    margin-bottom: 24px;
    color: var(--neutral--white);
    font-size: var(--_typography---font-size--heading-7);
    line-height: var(--_typography---line-height--large);
    font-weight: var(--_typography---font-weight--semi-bold);
    letter-spacing: var(--_typography---letter-spacing--large);
}

.overview-brand-link {
    text-underline-offset: 4px;
}

@media (hover: hover) {
    .overview-brand-link:hover {
        text-decoration: underline;
    }
}

/* Latest project strip. The template pinned the section — a 400vh runway
 * under a 100vh sticky frame — and slid the cards across while the page
 * scrolled. The client asked for no stop (2026-10-08): the page scrolls
 * straight past, and the strip scrolls sideways on its own — swipe, trackpad,
 * Shift + wheel, or a mouse drag (main.js). The frame keeps room under the
 * cards for the OUR WORK watermark, which showed there in the pinned view.
 * Phones (≤479) were never pinned: the cards stand in a column there.
 */
@media screen and (min-width: 480px) {
    #work .the-height-400vh-section {
        height: auto;
    }

    #work .the-sticky-div {
        position: relative;
        height: auto;
        padding-bottom: 120px;
    }

    #work .the-overflow-hidden-mask {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-user-select: none;
        user-select: none;
    }

    #work .the-overflow-hidden-mask::-webkit-scrollbar {
        display: none;
    }
}

/* The strip the cards ride on, renamed off .the-width-400vh-scrollable-div so
 * Webflow IX2 no longer moves it; the template's rules for it, copied across.
 * It is as wide as its cards, plus an end margin the size of the start one
 * (the mask's padding-left), so "Got an idea?" stops as far from the right
 * edge as the first card starts from the left. The template's 500vw below
 * 768px left more than a screen-width of nothing after the last card. */
.work-track {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: flex-start;
    align-items: center;
    width: max-content;
    padding-right: 80px;
    display: flex;
}

@media screen and (max-width: 991px) {
    .work-track {
        padding-right: 40px;
    }
}

@media screen and (max-width: 767px) {
    .work-track {
        padding-right: 20px;
    }
}

@media screen and (max-width: 479px) {
    .work-track {
        flex-flow: column;
        width: 100%;
        padding-right: 0;
    }
}

/* Held by the mouse (main.js): a grabbing hand, and the View Project ball
 * squeezes a little. `scale` stacks on the transform IX2 shows the ball with. */
#work.is-dragging .the-overflow-hidden-mask,
#work.is-dragging .the-overflow-hidden-mask * {
    cursor: grabbing;
}

#work .pointer.works {
    transition: scale .25s ease;
}

#work.is-dragging .pointer.works {
    scale: .85;
}

/* Home page cards: the banner fills the card as the template's photos do
 * (it trims ~8% off the sides). Below 768px the template's card is nearly
 * square or tall and narrow, which would cut the logo, so there the banner
 * shows whole, along the foot of a card cut down to the banner plus a band
 * for the tags (72px), on the colour of its edges (the project's
 * 'background', inline). Between 480 and 767 the template's card width came
 * out of the tags' text (266px at 600); it is set outright instead. The tag
 * gets a darker ground than the template's 24% black: it sits on bright
 * logos and light trails. */
@media screen and (max-width: 767px) {
    .work-card-image.is-banner {
        object-fit: contain;
        object-position: 50% 100%;
    }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
    #work .collection-item {
        width: auto;
        min-width: 0;
    }

    #work .work-card {
        --card-w: min(75vw, 520px);
        width: var(--card-w);
        min-width: var(--card-w);
        max-width: var(--card-w);
        height: calc(var(--card-w) * 941 / 1672 + 72px);
    }
}

@media screen and (max-width: 479px) {
    #work .work-card {
        height: calc((100vw - 40px) * 941 / 1672 + 72px);
    }
}

.work-card .tag-work {
    background-color: #000000a6;
}

/* A long Category ("Pet Care Ecosystem & Services / Crowdfunding Platform")
 * ran past a phone-width card, which clips it: the tags wrap instead. */
.work-card .tag-work-wrap {
    flex-wrap: wrap;
    grid-row-gap: 6px;
}

@media screen and (max-width: 991px) {
    .section.hero-section.home.is-project-hero {
        padding-top: 110px;
    }

    .hero-contain.main.project-hero-card {
        max-height: none;
    }
}

@media screen and (max-width: 479px) {
    .section.hero-section.home.is-project-hero {
        padding-top: 90px;
    }
}

/* --------------------------------------------------------- Books page ---
 * The template lays its team cards out in a single row. The board wants the
 * whole library, so the same cards go into a grid.
 */
.books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 56px;
    width: 100%;
}

/* Covers sit on their own classes rather than the template's .team-image /
 * .team-image-wrapper: IX2 binds to .team-image and writes scale3d(1.1) into
 * its inline style, which crops the edges off the picture.
 * The flag in the bundle does not stop it and !important loses to an inline
 * transform, so the way out is a name IX2 does not know — the same trick the
 * Work With Me section uses.
 *
 * The box has the proportions of the book mockups (43:24 — 5504x3072 at the
 * source), so a mockup fills it exactly.
 */
.book-cover-wrap {
    width: 100%;
    aspect-ratio: 43 / 24;
    overflow: hidden;
    border-radius: 12px;
}

/* Never cropped: a book still on its flat Amazon cover sits whole in the
 * middle of the box, black either side, until its mockup arrives. */
.book-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s ease;
}

.book-card:hover .book-cover {
    transform: scale(1.04);
}

@media screen and (max-width: 991px) {
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 40px;
    }
}

@media screen and (max-width: 767px) {
    .books-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------ book page ---
 * The mockup beside its copy. A mockup is a wide scene with the book small in
 * the middle, so the picture gets the larger column. The block stops growing
 * at 1280px.
 *
 * A flat Amazon cover (books still waiting for a mockup) would come out one
 * and a half times as tall as that column is wide; max-height keeps it on the
 * screen, and it sits centred in the column.
 */
.book-detail {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-column-gap: 80px;
    align-items: center;
    width: 100%;
    max-width: 1280px;
}

.book-detail-media {
    display: flex;
    justify-content: center;
}

.book-detail-cover {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 75vh;
    border-radius: 12px;
}

.book-detail-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    grid-row-gap: 40px;
}

/* Book titles run to several words and the copy has the narrower column, so
 * the section title's 80px steps down to heading-5; uppercase, like the
 * section titles across the site. */
.book-detail-title {
    font-size: var(--_typography---font-size--heading-5);
    text-transform: uppercase;
}

/* .paragraph-large is black by default — it was written for the light sections. */
.book-detail-text {
    color: var(--text-color--text-grey-2);
    margin: 0;
}

/* The Amazon link is the one thing to do on a book page, and the template's
 * text-and-arrow link read as part of the copy. So it is a real button: a
 * pill outlined in white — the shape of the template's form submit — that
 * fills with the brand red on hover, as the footer's social icons do. */
.book-buy-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 32px;
    border: 1px solid var(--neutral--white);
    border-radius: 1000px;
    color: var(--neutral--white);
    font-size: var(--_typography---font-size--paragraph-medium);
    font-weight: var(--_typography---font-weight--medium);
    letter-spacing: var(--_typography---letter-spacing--medium);
    text-decoration: none;
    transition: background-color .3s ease, border-color .3s ease;
}

.book-buy-button:hover {
    background-color: var(--brand-color--red);
    border-color: var(--brand-color--red);
}

@media screen and (max-width: 991px) {
    .book-detail {
        grid-template-columns: minmax(0, 1fr);
        grid-row-gap: 48px;
    }
}

/* ---------------------------------------------------------- Blog page ---
 * Same card grid as the books page. The image is on its own class for the
 * same reason as the covers: IX2 scales .team-image inline.
 */
.article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 56px;
    width: 100%;
}

.article-card-link {
    color: inherit;
    text-decoration: none;
}

/* Landscape, the same box as the book cards (2026-10-02): covers are wide
 * pictures now, and the same picture fills the article's hero. A cover of
 * another shape is cropped to the box, not letterboxed — it is a photo, not a
 * book cover. */
.article-cover-wrap {
    width: 100%;
    aspect-ratio: 43 / 24;
    overflow: hidden;
    border-radius: 12px;
}

.article-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.article-card-link:hover .article-cover {
    transform: scale(1.04);
}

/* Tag filter, after the 999pawn blog's pills — redrawn for the dark page in
 * the section tag's type: All, then each tag in use; the current one filled. */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.blog-filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid #ffffff38;
    border-radius: 100px;
    color: var(--text-color--text-grey-2);
    font-size: 13px;
    font-weight: var(--_typography---font-weight--medium);
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s, border-color .2s, background-color .2s;
}

.blog-filter-pill:hover {
    color: var(--neutral--white);
    border-color: var(--neutral--white);
}

.blog-filter-pill.is-active {
    background-color: var(--neutral--white);
    border-color: var(--neutral--white);
    color: var(--neutral--black);
}

/* Switching tags swaps the grid in place (main.js): out and back in, softly. */
#insights .article-grid {
    transition: opacity .18s ease;
}

#insights.is-filtering .article-grid {
    opacity: 0;
}

@media screen and (max-width: 991px) {
    .article-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-row-gap: 40px;
    }
}

@media screen and (max-width: 767px) {
    .article-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------ article page ---
 * The body reuses .story-row from About Me. A section with no picture runs
 * the full width, and the pull-quote is the one new block.
 */
.story-row.is-full {
    grid-template-columns: 1fr;
}

.story-row.is-full .story-copy {
    max-width: 900px;
}

.article-quote {
    width: 100%;
    max-width: 900px;
    margin: 0;
    padding-left: 32px;
    border-left: 2px solid var(--neutral--white);
}

.article-quote .paragraph-large {
    color: var(--neutral--white);
    font-style: italic;
    margin: 0;
}

/* A section that is only a picture: full width, so a wide crop rather than
 * the 4:5 the photo gets beside text. */
.story-row.is-image-only .story-media {
    aspect-ratio: 16 / 9;
}

/* Inline formatting the admin allows in article text. The template's own <a>
 * is black and sized for body copy — wrong on the dark article page. */
.story-text a,
.article-quote a {
    color: var(--neutral--white);
    font-size: inherit;
    text-decoration: underline;
}

.story-text strong {
    color: var(--neutral--white);
}

/* Every hero carries a photo under white type, and the template's blur
 * overlay fades to 0.2 once the intro has played: on a bright photo — the
 * client's are, 2026-10-02: concrete walls, a lit corridor — the headline and
 * the paragraph beside it lose contrast. A scrim darkens the lower part,
 * where the text sits; the title is at z-index 3, so this layer goes just
 * below it. Articles get a stronger one: their covers are anything at all.
 */
.hero-contain.main::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 24px;
    background: linear-gradient(180deg, #0000 35%, #0000008c 100%);
    pointer-events: none;
}

.is-post .hero-contain.main::after {
    background: linear-gradient(180deg, #0000 25%, #000000cc 100%);
}

/* On the board the date and reading time sit right under the headline, not
 * out in the hero's right-hand column where a subtitle normally goes.
 */
.is-post .sub-title-hero-wrapper.home {
    flex-flow: column;
    justify-content: flex-end;
    align-items: flex-start;
    grid-row-gap: 12px;
}

.is-post .sub-title-hero {
    max-width: none;
    font-size: var(--_typography---font-size--paragraph-medium);
    color: #ffffffd9;
}

/* The article's tag at the start of that line, linking to the filtered blog. */
.is-post .post-tag-link {
    color: var(--neutral--white);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.is-post .post-tag-link:hover {
    color: var(--brand-color--red);
}

/* ------------------------------------------------------------ consent ---
 * The Privacy Policy / Terms of Use checkbox on every form. Light variant for
 * the white contact card, .is-dark for the black footer.
 */
.consent-field {
    display: flex;
    align-items: flex-start;
    grid-column-gap: 12px;
    width: 100%;
    margin: 0;
    font-family: var(--_font-family---body-font);
    font-size: var(--_typography---font-size--paragraph-medium);
    line-height: var(--_typography---line-height--large);
    color: var(--text-color--text-grey);
    cursor: pointer;
    font-weight: var(--_typography---font-weight--reguler);
}

.consent-checkbox {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: var(--neutral--black);
    cursor: pointer;
}

.consent-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent-field.is-dark {
    color: var(--text-color--text-grey-2);
    font-size: var(--_typography---font-size--paragraph-small);
}

.consent-field.is-dark .consent-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--neutral--white);
}

/* The button stays clickable — clicking it unticked is what brings up the
 * browser's prompt — but it reads as not ready yet. In the newsletter the
 * real submit input is invisible (opacity 0) over the arrow, so it is the
 * arrow's wrapper that dims; touching the input would uncover its default
 * blue Webflow background. */
.is-consent-missing .submit-button,
.is-consent-missing .div-block-9 {
    opacity: .4;
}

/* The newsletter pill used to be the form itself; now the form also holds the
 * consent line under it. */
.newsletter-form {
    display: flex;
    flex-direction: column;
    grid-row-gap: 12px;
    width: 100%;
    margin: 0;
}

.newsletter-done {
    padding: 16px 20px;
    border: 1px solid var(--border--border-grey);
    font-size: var(--_typography---font-size--paragraph-medium);
}

/* ------------------------------------------------------ legal pages ---
 * Privacy Policy, Terms of Use and the book pages: no hero, so the section
 * clears the fixed navbar itself — same padding and same two-class selector
 * as the 404 section above.
 */
.section.is-text-page {
    min-height: 60vh;
    padding-top: calc(80px + var(--_spacing---section-padding--default));
}

.is-text-page h1.title-section {
    margin: 0;
}

.legal-updated {
    color: var(--text-color--text-grey-2);
    font-size: var(--_typography---font-size--paragraph-medium);
    margin: 0;
}

/* The policy text is the client's document as plain HTML: headings, lists,
 * two tables. The template's own h2, h3, p, ul and li are set for its white
 * pages — black, with an 80px h2 — so each one is restyled here in the
 * article's colours: grey text; white headings, bold and links.
 */
.legal-body {
    max-width: 800px;
}

.legal-body > * {
    margin: 0;
}

.legal-body > * + * {
    margin-top: 20px;
}

.legal-body p,
.legal-body li,
.legal-body td {
    color: var(--text-color--text-grey-2);
    font-size: var(--_typography---font-size--paragraph-large);
    line-height: var(--_typography---line-height--large);
}

.legal-body strong,
.legal-body th {
    color: var(--neutral--white);
}

.legal-body a {
    color: var(--neutral--white);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .legal-body a:hover {
        color: var(--brand-color--red);
    }
}

/* A rule over each numbered section. A contents link stops with that rule
 * just under the navbar: scroll-margin-top, which main.js reads as well. */
.legal-body h2 {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--border--border-grey);
    color: var(--neutral--white);
    font-size: var(--_typography---font-size--heading-6);
    line-height: var(--_typography---line-height--reguler);
    font-weight: var(--_typography---font-weight--medium);
    letter-spacing: var(--_typography---letter-spacing--large);
    scroll-margin-top: 130px;
}

.legal-body h3 {
    margin-top: 36px;
    color: var(--neutral--white);
    font-size: var(--_typography---font-size--paragraph-extra-large);
    line-height: var(--_typography---line-height--medium);
    font-weight: var(--_typography---font-weight--semi-bold);
}

.legal-body h2 + *,
.legal-body h3 + * {
    margin-top: 16px;
}

.legal-body ul {
    padding-left: 24px;
}

.legal-body ol {
    padding-left: 28px;
}

.legal-body li + li,
.legal-body li > ul {
    margin-top: 10px;
}

.legal-body li > ul {
    margin-bottom: 0;
}

/* Bullets take the section tag's dot colour; numbers are white. */
.legal-body li::marker {
    color: #fb451c;
}

.legal-body li li::marker {
    color: var(--text-color--text-grey-2);
}

.legal-body ol > li::marker {
    color: var(--neutral--white);
    font-weight: var(--_typography---font-weight--semi-bold);
}

.legal-body > .legal-toc {
    margin-top: 32px;
}

.legal-toc {
    padding: 32px;
    border: 1px solid var(--border--border-grey);
    border-radius: 24px;
}

.legal-body .legal-toc ol {
    margin: 16px 0 0;
}

/* Spaced with padding, not margins: in two columns a margin would push the
 * second column's first item down. */
.legal-body .legal-toc li {
    margin: 0;
    padding: 4px 0;
    break-inside: avoid;
    font-size: var(--_typography---font-size--paragraph-medium);
}

.legal-body .legal-toc li::marker {
    color: var(--text-color--text-grey-2);
    font-weight: var(--_typography---font-weight--reguler);
}

.legal-body .legal-toc a {
    color: var(--text-color--text-grey-2);
    text-decoration: none;
}

@media (hover: hover) {
    .legal-body .legal-toc a:hover {
        color: var(--neutral--white);
        text-decoration: underline;
    }
}

.legal-body table {
    width: 100%;
    border-top: 1px solid var(--border--border-grey);
}

.legal-body th,
.legal-body td {
    padding: 16px 24px 16px 0;
    border-bottom: 1px solid var(--border--border-grey);
    text-align: left;
    vertical-align: top;
}

.legal-body td {
    padding-right: 0;
}

.legal-body thead th {
    color: var(--text-color--text-grey-2);
    font-size: var(--_typography---font-size--paragraph-medium);
    font-weight: var(--_typography---font-weight--semi-bold);
}

.legal-body tbody th {
    width: 36%;
    font-size: var(--_typography---font-size--paragraph-large);
    line-height: var(--_typography---line-height--large);
    font-weight: var(--_typography---font-weight--medium);
}

/* The results disclaimer in the Terms: the article pull-quote's side rule,
 * in the dot colour. */
.legal-callout {
    padding-left: 32px;
    border-left: 2px solid #fb451c;
}

.legal-body .legal-callout h3 {
    margin-top: 0;
}

.legal-contact {
    font-style: normal;
}

.legal-contact p {
    margin: 0;
}

.legal-contact p + p {
    margin-top: 12px;
}

@media screen and (min-width: 768px) {
    .legal-body .legal-toc ol {
        columns: 2;
        column-gap: 48px;
    }
}

@media screen and (max-width: 991px) {
    .legal-body h2 {
        scroll-margin-top: 124px;
    }
}

/* Phones: a smaller section heading, and each table row stacks — the name
 * above its description, without the column headings. */
@media screen and (max-width: 767px) {
    .legal-body h2 {
        margin-top: 48px;
        padding-top: 32px;
        font-size: 24px;
    }

    .legal-body h3 {
        font-size: 18px;
    }

    .legal-toc {
        padding: 24px 20px;
    }

    .legal-body table,
    .legal-body tbody,
    .legal-body tr,
    .legal-body tbody th,
    .legal-body td {
        display: block;
    }

    .legal-body thead {
        display: none;
    }

    .legal-body tr {
        padding: 16px 0;
        border-bottom: 1px solid var(--border--border-grey);
    }

    .legal-body tbody th,
    .legal-body td {
        width: auto;
        padding: 0;
        border: 0;
    }

    .legal-body tbody th {
        margin-bottom: 4px;
    }

    .legal-callout {
        padding-left: 20px;
    }
}

@media screen and (max-width: 479px) {
    .legal-body h2 {
        scroll-margin-top: 104px;
    }
}