/*
 * 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; }

@media screen and (max-width: 991px) {
    .svc-wheel {
        width: 200vw;
        height: 200vw;
        left: -110.9vw;
    }
}

@media screen and (max-width: 479px) {
    .svc-photo,
    .svc-photo._4 {
        width: 40vw;
        height: 40vw;
    }
}

/* 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;
}

@media screen and (max-width: 991px) {
    .service-desc-list {
        width: auto;
        max-width: none;
        top: auto;
        right: 20px;
        bottom: 8vh;
        left: 20px;
        transform: none;
    }
}

/* -------------------------------------------------------------- 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 logo block and the second copyright line were removed. The template's
 * row uses space-between for two items, which would shove the single line
 * left — centre it instead.
 */
.copyright-wrapper.is-single {
    justify-content: center;
    text-align: center;
}

/* ------------------------------------------------------ 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;
}

/* 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;
}