/* ==================================================
   DBS SCROLL EFFECTS
   Uses the site's own fonts and colors.
================================================== */

.dbs-fx-pin,
.dbs-fx-slowbg {
    --dbs-fx-ink: #060606;
    --dbs-fx-cream: #f9f5f2;
    --dbs-fx-sand: #eae2da;
    --dbs-fx-taupe: #75685b;
    --dbs-fx-white: #ffffff;
    --dbs-fx-top: var(--wp-admin--admin-bar--height, 0px);
    --dbs-fx-gutter: clamp(16px, 4vw, 48px);
    --dbs-fx-screen: calc(100vh - var(--dbs-fx-top));
}

@supports (height: 100svh) {
    .dbs-fx-pin,
    .dbs-fx-slowbg {
        --dbs-fx-screen: calc(100svh - var(--dbs-fx-top));
    }
}

.dbs-fx-eyebrow {
    font-family: "Karla", sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--dbs-fx-taupe);
    margin: 0;
}


/* ==================================================
   EFFECT 1: PINNED HEADLINE WITH FLOATING PHOTOS
================================================== */

.wp-block-group.dbs-fx-pin {
    position: relative;
    overflow-x: clip;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    background: var(--dbs-fx-white);
}

/* The headline and its paragraph stay still together, centered on the screen. */
.dbs-fx-pin > .dbs-fx-pin__lead {
    position: sticky;
    top: var(--dbs-fx-top);
    z-index: 0;
    height: var(--dbs-fx-screen);
    max-width: none;
    margin: 0;
    padding-inline: var(--dbs-fx-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 3.5vh, 36px);
    text-align: center;
}

.dbs-fx-pin .dbs-fx-pin__title {
    max-width: 11em;
    margin: 0;
    font-family: "Cormorant Garamond", "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(2.6rem, 7vw, 6.2rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--dbs-fx-ink);
}

.dbs-fx-pin .dbs-fx-pin__title em {
    font-style: italic;
    text-transform: none;
}

.dbs-fx-pin__lead > .dbs-fx-lead {
    max-width: 38em;
    margin: 0;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.65;
    color: var(--dbs-fx-ink);
}

.dbs-fx-pin > .dbs-fx-pin__photos {
    position: relative;
    z-index: 1;
    height: 230vh;
    max-width: none;
    margin: calc(-1 * var(--dbs-fx-screen)) 0 0;
    pointer-events: none;
}

.dbs-fx-pin .dbs-fx-float {
    position: absolute;
    margin: 0;
}

.dbs-fx-pin .dbs-fx-float img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Four photos, sized and spaced like the Aperol Spritz reference. They scroll with the page
   and arrive from below once the headline and its paragraph have been read. */
.dbs-fx-pin .dbs-fx-float--1 { top: 106vh; left: 0;     right: auto; width: 19.4%; aspect-ratio: 3 / 4; }
.dbs-fx-pin .dbs-fx-float--2 { top: 67vh;  left: auto;  right: 0;    width: 21%;   aspect-ratio: 3 / 4; }
.dbs-fx-pin .dbs-fx-float--3 { top: 86vh;  left: 29.2%; right: auto; width: 40.8%; aspect-ratio: 3 / 4; }
.dbs-fx-pin .dbs-fx-float--4 { top: 175vh; left: 75%;   right: auto; width: 16.8%; aspect-ratio: 3 / 4; }
.dbs-fx-pin .dbs-fx-float--5,
.dbs-fx-pin .dbs-fx-float--6 { display: none; }

.dbs-fx-pin > .dbs-fx-pin__curtain {
    position: relative;
    z-index: 2;
    min-height: 55vh;
    max-width: none;
    margin: 0;
    padding: clamp(56px, 10vh, 120px) var(--dbs-fx-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: var(--dbs-fx-white);
    text-align: center;
}

.dbs-fx-pin__curtain > * {
    max-width: 40em;
    margin: 0;
}

.dbs-fx-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.7;
}

.dbs-fx-pin__note {
    font-family: "Noto Serif Display", serif;
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    color: var(--dbs-fx-ink);
}


/* ==================================================
   EFFECT 4: SLOW BACKGROUND WITH CARD
================================================== */

.wp-block-group.dbs-fx-slowbg {
    position: relative;
    overflow: hidden;
    min-height: var(--dbs-fx-screen);
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(56px, 10vh, 120px) var(--dbs-fx-gutter);
    display: grid;
    place-items: center;
    background: var(--dbs-fx-white);
}

.dbs-fx-slowbg > .dbs-fx-slowbg__image {
    position: absolute;
    inset: -35% 0;
    z-index: 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

.dbs-fx-slowbg > .dbs-fx-slowbg__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dbs-fx-slowbg > .dbs-fx-slowbg__card {
    position: relative;
    z-index: 1;
    width: min(100%, 34rem);
    max-width: none;
    margin: 0;
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px dotted var(--dbs-fx-ink);
    color: var(--dbs-fx-ink);
    text-align: center;
}

.dbs-fx-slowbg__card > * {
    margin: 0;
}

.dbs-fx-slowbg__card .dbs-fx-slowbg__heading {
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}


/* ==================================================
   EFFECT 2: STICKY PHOTO PANEL
   Sized like the Aperol Spritz reference: a narrow
   column of photos scrolls on the left while a large
   fading photo, its text and button stay in view.
================================================== */

.dbs-fx-panel,
.dbs-fx-stack {
    --dbs-fx-ink: #060606;
    --dbs-fx-white: #ffffff;
    --dbs-fx-top: var(--wp-admin--admin-bar--height, 0px);
    --dbs-fx-gutter: clamp(16px, 4vw, 48px);
    --dbs-fx-screen: calc(100vh - var(--dbs-fx-top));
}

@supports (height: 100svh) {
    .dbs-fx-panel,
    .dbs-fx-stack {
        --dbs-fx-screen: calc(100svh - var(--dbs-fx-top));
    }
}

.wp-block-group.dbs-fx-panel {
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(56px, 11vh, 120px) var(--dbs-fx-gutter) clamp(72px, 14vh, 160px);
    background: var(--dbs-fx-white);
}

.dbs-fx-panel > .dbs-fx-panel__title {
    max-width: none;
    margin: 0 0 clamp(28px, 6vh, 56px);
    font-family: "Cormorant Garamond", "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(3rem, 8.6vw, 7.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    color: var(--dbs-fx-ink);
}

.dbs-fx-panel > .dbs-fx-panel__title em {
    font-style: italic;
    text-transform: none;
}

.dbs-fx-panel > .dbs-fx-panel__grid {
    width: min(100%, 80vw, 1240px);
    max-width: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 34fr) minmax(0, 50fr);
    column-gap: 16%;
    align-items: start;
}

.dbs-fx-panel__grid > * {
    margin: 0;
    max-width: none;
}

.dbs-fx-panel__list {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 10vh, 96px);
}

.dbs-fx-panel__list > .dbs-fx-panel__photo {
    margin: 0;
    aspect-ratio: 4 / 5;
}

.dbs-fx-panel__list > .dbs-fx-panel__photo:nth-child(4n + 1) { width: 89%; margin-left: 5%; }
.dbs-fx-panel__list > .dbs-fx-panel__photo:nth-child(4n + 2) { width: 100%; margin-left: 0; }
.dbs-fx-panel__list > .dbs-fx-panel__photo:nth-child(4n + 3) { width: 84%; margin-left: 8%; }
.dbs-fx-panel__list > .dbs-fx-panel__photo:nth-child(4n + 4) { width: 96%; margin-left: 3%; }

.dbs-fx-panel__photo img,
.dbs-fx-panel__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dbs-fx-panel__grid > .dbs-fx-panel__aside {
    position: sticky;
    top: calc(var(--dbs-fx-top) + 8vh);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(16px, 3vh, 28px);
}

.dbs-fx-panel__aside > * {
    margin: 0;
}

.dbs-fx-panel__aside > .dbs-fx-panel__fade {
    position: relative;
    /* Sized to the screen height so the photo, text and button always fit on screen together. */
    width: min(100%, calc((var(--dbs-fx-screen) - 8vh - 330px) * 12 / 13));
    aspect-ratio: 12 / 13;
}

.dbs-fx-panel__fade > .dbs-fx-panel__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.dbs-fx-panel__fade:not(.is-ready) > .dbs-fx-panel__slide:first-child,
.dbs-fx-panel__fade > .dbs-fx-panel__slide.is-on {
    opacity: 1;
}

.dbs-fx-panel__aside > .dbs-fx-panel__text {
    max-width: 27em;
    font-family: "Noto Serif Display", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.5;
    color: var(--dbs-fx-ink);
}


/* ==================================================
   EFFECT 5: PHOTOS UNDER FIXED TEXT
   The words stay in the middle of the screen while
   full-screen photos slide up beneath them; the next
   section then rises and covers everything.
================================================== */

.wp-block-group.dbs-fx-stack {
    position: relative;
    margin-top: 0;
    margin-bottom: calc(-1 * var(--dbs-fx-screen));
    padding: 0;
    background: #060606;
}

.dbs-fx-stack > .dbs-fx-stack__text {
    position: sticky;
    top: var(--dbs-fx-top);
    z-index: 2;
    height: var(--dbs-fx-screen);
    max-width: none;
    margin: 0;
    padding-inline: var(--dbs-fx-gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 2.6vh, 24px);
    text-align: center;
    color: var(--dbs-fx-white);
    pointer-events: none;
}

.dbs-fx-stack__text > * {
    margin: 0;
    color: var(--dbs-fx-white);
}

.dbs-fx-stack__text .dbs-fx-stack__kicker {
    font-family: "Cormorant Garamond", "Noto Serif Display", serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.8rem, 4.1vw, 3.6rem);
    line-height: 1;
}

.dbs-fx-stack__text .dbs-fx-stack__title {
    max-width: 9em;
    font-family: "Cormorant Garamond", "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(3rem, 8.2vw, 7.5rem);
    line-height: 0.92;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    text-wrap: balance;
}

.dbs-fx-stack__text .dbs-fx-stack__copy {
    max-width: 28em;
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
}

.dbs-fx-stack__text .wp-block-button__link {
    pointer-events: auto;
}

.dbs-fx-stack .dbs-fx-stack__text .wp-block-button .wp-block-button__link {
    background: transparent !important;
    color: var(--dbs-fx-white) !important;
    -webkit-text-fill-color: var(--dbs-fx-white) !important;
    border: 1px solid var(--dbs-fx-white) !important;
}

.dbs-fx-stack .dbs-fx-stack__text .wp-block-button .wp-block-button__link:hover,
.dbs-fx-stack .dbs-fx-stack__text .wp-block-button .wp-block-button__link:focus-visible {
    background: var(--dbs-fx-white) !important;
    color: var(--dbs-fx-ink) !important;
    -webkit-text-fill-color: var(--dbs-fx-ink) !important;
}

.dbs-fx-stack > .dbs-fx-stack__photos {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: calc(-1 * var(--dbs-fx-screen)) 0 0;
}

.dbs-fx-stack__photos > .dbs-fx-stack__photo {
    position: relative;
    height: var(--dbs-fx-screen);
    margin: 0;
}

.dbs-fx-stack__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dbs-fx-stack__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 6, 6, 0.32);
    pointer-events: none;
}

/* One extra screen with the words still pinned, so the next section can rise over them. */
.dbs-fx-stack > .dbs-fx-stack__end {
    height: var(--dbs-fx-screen);
    margin: 0;
}

.dbs-fx-stack + * {
    position: relative;
    z-index: 3;
    background-color: var(--wp--preset--color--base, #ffffff);
}


/* ==================================================
   EFFECT 6: STORY WITH DRIFTING PHOTOS
   Laid out like the Aperol Spritz "Images that make
   you lean in" section: a centered headline, three
   overlapping photos that each drift at their own
   speed, then a large centered client quote.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.dbs-fx-story {
    --dbs-fx-ink: #060606;
    --dbs-fx-white: #ffffff;
    --dbs-fx-gutter: clamp(16px, 4vw, 48px);
}

.wp-block-group.dbs-fx-story {
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(64px, 7vw, 120px) 0;
    overflow-x: clip;
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
}

.dbs-fx-story > * {
    max-width: none;
    margin: 0;
}

.dbs-fx-story > .dbs-fx-story__intro,
.dbs-fx-story > .dbs-fx-story__review {
    padding-inline: var(--dbs-fx-gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dbs-fx-story__intro > *,
.dbs-fx-story__words > *,
.dbs-fx-story__review > * {
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-story__intro > .dbs-fx-story__eyebrow {
    font-family: "Karla", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dbs-fx-story__intro > .dbs-fx-story__title {
    max-width: 10em;
    margin-top: clamp(28px, 3vw, 52px);
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(2.5rem, 5.75vw, 6.5rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.dbs-fx-story__title em,
.dbs-fx-story__quote em {
    font-style: italic;
    text-transform: none;
}

.dbs-fx-story__intro > .dbs-fx-story__lead {
    max-width: 38em;
    margin-top: clamp(20px, 2vw, 32px);
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.26vw, 19px);
    line-height: 1.6;
}

.dbs-fx-story__lead em {
    font-family: "Noto Serif Display", serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.12em;
}

/* The photos: a large one on the left with the words under it, a small and a medium one
   overlapping on the right. Each drifts at its own speed (see effects.js). */
.dbs-fx-story > .dbs-fx-story__body {
    position: relative;
    min-height: 70vw;
    margin-top: clamp(48px, 6.7vw, 120px);
}

.dbs-fx-story__body > .dbs-fx-story__photo {
    margin: 0;
}

/* The photo fills its frame instead of setting its height, so every frame keeps the reference's shape.
   Two classes deep so WordPress's own "height: auto" for images doesn't win. */
.dbs-fx-story .dbs-fx-story__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: transform;
}

.dbs-fx-story__body > .dbs-fx-story__big    { position: relative; margin-left: 15.7%; width: 32.3%; aspect-ratio: 460 / 636; }
.dbs-fx-story__body > .dbs-fx-story__small  { position: absolute; z-index: 1; top: 6vw;     left: 56.1%; width: 21.5%; aspect-ratio: 306 / 432; }
.dbs-fx-story__body > .dbs-fx-story__medium { position: absolute; z-index: 2; top: 29.05vw; left: 63%;   width: 29.1%; aspect-ratio: 415 / 574; }

.dbs-fx-story__body > .dbs-fx-story__words {
    width: 35.4%;
    margin: 5.75vw 0 0 15.7%;
}

.dbs-fx-story__words > .dbs-fx-story__heading {
    max-width: 94%;
    font-family: "DBS EB Garamond", "EB Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 1.82vw, 1.9rem);
    line-height: 1.3;
}

.dbs-fx-story__words > .dbs-fx-story__copy {
    margin-top: clamp(12px, 1.2vw, 20px);
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.26vw, 19px);
    line-height: 1.6;
}

.dbs-fx-story__words > .dbs-fx-story__sign {
    margin-top: clamp(14px, 1.6vw, 26px);
    font-family: "Reenie Beanie", cursive;
    font-size: clamp(1.8rem, 2.3vw, 2.4rem);
    line-height: 1.2;
}

.dbs-fx-story > .dbs-fx-story__review {
    margin-top: clamp(56px, 6.3vw, 110px);
}

.dbs-fx-story__review > .dbs-fx-story__quote {
    max-width: 14.5em;
    font-family: "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(1.75rem, 3.16vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-wrap: balance;
}

.dbs-fx-story__review > .dbs-fx-story__review-text {
    max-width: 29em;
    margin-top: clamp(14px, 1.2vw, 20px);
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
}

.dbs-fx-story__review > .dbs-fx-story__cite {
    margin-top: clamp(14px, 1.5vw, 24px);
    font-family: "DBS EB Garamond", "EB Garamond", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.1rem, 1.54vw, 1.4rem);
}


/* ==================================================
   EFFECTS 7, 8 AND 9: SHARED SETTINGS
================================================== */

.dbs-fx-photo,
.dbs-fx-artist,
.dbs-fx-press {
    --dbs-fx-ink: #060606;
    --dbs-fx-white: #ffffff;
    --dbs-fx-top: var(--wp-admin--admin-bar--height, 0px);
    --dbs-fx-gutter: clamp(16px, 4vw, 48px);
    --dbs-fx-screen: calc(100vh - var(--dbs-fx-top));
}

@supports (height: 100svh) {
    .dbs-fx-photo {
        --dbs-fx-screen: calc(100svh - var(--dbs-fx-top));
    }
}

.dbs-fx-photo > *,
.dbs-fx-artist > *,
.dbs-fx-press > * {
    max-width: none;
    margin: 0;
}


/* ==================================================
   EFFECT 7: FULL PHOTO WITH WORDS
   Like the Tonic Site Shop About photo: a full-width
   photo that moves at half the scroll speed, with an
   italic line, a large light headline and a short
   paragraph in white on its lower left.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.wp-block-group.dbs-fx-photo {
    position: relative;
    overflow: hidden;
    min-height: max(var(--dbs-fx-screen), 81vw);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 var(--dbs-fx-gutter) 10.6vw 13.4vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--dbs-fx-ink);
    color: var(--dbs-fx-white);
}

/* Taller than the section by half a screen, so it can move at half speed without showing an edge. */
.dbs-fx-photo > .dbs-fx-photo__image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: calc(100% + 50vh);
    will-change: transform;
}

.dbs-fx-photo .dbs-fx-photo__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.dbs-fx-photo .dbs-fx-photo__image.dbs-fx-focus-right img { object-position: 82% 50%; }
.dbs-fx-photo .dbs-fx-photo__image.dbs-fx-focus-left img  { object-position: 18% 50%; }

/* A soft shade under the words so white text stays readable on any photo. */
.dbs-fx-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to top, rgba(6, 6, 6, 0.62) 0%, rgba(6, 6, 6, 0.28) 45%, rgba(6, 6, 6, 0) 75%),
        linear-gradient(to right, rgba(6, 6, 6, 0.3) 0%, rgba(6, 6, 6, 0) 60%);
}

.dbs-fx-photo > .dbs-fx-photo__words {
    position: relative;
    z-index: 2;
    width: min(100%, 52.4vw);
}

.dbs-fx-photo__words > * {
    margin: 0;
    color: var(--dbs-fx-white);
}

.dbs-fx-photo__words > .dbs-fx-photo__kicker {
    font-family: "Noto Serif Display", serif;
    font-style: italic;
    font-weight: 200;
    font-size: clamp(1.2rem, 2.08vw, 2.2rem);
    line-height: 1.8;
    letter-spacing: 0.02em;
}

.dbs-fx-photo__words > .dbs-fx-photo__title {
    max-width: 10.8em;
    margin-top: 0.1em;
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(2.2rem, 4.58vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.dbs-fx-photo__words > .dbs-fx-photo__copy {
    max-width: 39.7em;
    margin-top: clamp(10px, 0.9vw, 16px);
    font-family: "Karla", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.32vw, 20px);
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* Centered version, like the Fitzgerald closing call to action: the words and a white
   pill button in the middle of a slow-moving photo. Sizes measured at 1440px wide. */
.wp-block-group.dbs-fx-photo.is-centered {
    min-height: max(70vh, 51.9vw);
    padding: clamp(64px, 8vw, 140px) var(--dbs-fx-gutter);
    align-items: center;
    justify-content: center;
    text-align: center;
}

.dbs-fx-photo.is-centered::after {
    background: rgba(6, 6, 6, 0.3);
}

.dbs-fx-photo.is-centered > .dbs-fx-photo__words {
    width: min(100%, 46vw);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dbs-fx-photo.is-centered .dbs-fx-photo__words > .dbs-fx-photo__title {
    max-width: none;
    font-size: clamp(2.4rem, 5.63vw, 6rem);
    line-height: 0.95;
}

.dbs-fx-photo.is-centered .dbs-fx-photo__words > .dbs-fx-photo__copy {
    max-width: 22em;
    margin-top: clamp(16px, 1.3vw, 24px);
    font-size: clamp(16px, 1.18vw, 18px);
    line-height: 1.6;
    letter-spacing: 0;
}

.dbs-fx-photo.is-centered .dbs-fx-photo__words > .wp-block-buttons {
    margin-top: clamp(24px, 2.2vw, 40px);
    justify-content: center;
}

/* The site's pill button, in white over the photo. */
.dbs-fx-photo .wp-block-button .wp-block-button__link {
    background: var(--dbs-fx-white) !important;
    color: var(--dbs-fx-ink) !important;
    -webkit-text-fill-color: var(--dbs-fx-ink) !important;
    border: 1px solid var(--dbs-fx-white) !important;
}

.dbs-fx-photo .wp-block-button .wp-block-button__link:hover,
.dbs-fx-photo .wp-block-button .wp-block-button__link:focus-visible {
    background: transparent !important;
    color: var(--dbs-fx-white) !important;
    -webkit-text-fill-color: var(--dbs-fx-white) !important;
}


/* ==================================================
   EFFECT 8: ABOUT THE ARTIST
   Like the Aperol Spritz "About the Artist" section:
   a large centered title, a centered italic intro,
   then a tall portrait beside the story, signed in
   a fine handwritten script.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.wp-block-group.dbs-fx-artist {
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(64px, 7.2vw, 130px) 0 clamp(72px, 9.9vw, 160px);
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
}

.dbs-fx-artist > .dbs-fx-artist__title {
    padding-inline: var(--dbs-fx-gutter);
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(2.8rem, 6.94vw, 7.5rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--dbs-fx-ink);
}

.dbs-fx-artist__title em,
.dbs-fx-press__title em {
    font-style: italic;
    text-transform: none;
}

.dbs-fx-artist > .dbs-fx-artist__intro {
    width: min(100% - 2 * var(--dbs-fx-gutter), 48.8vw);
    margin: clamp(24px, 2.9vw, 52px) auto 0;
    font-family: "DBS EB Garamond", "EB Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 1.8vw, 1.9rem);
    line-height: 1.4;
    text-align: center;
    color: var(--dbs-fx-ink);
}

.dbs-fx-artist > .dbs-fx-artist__body {
    display: grid;
    grid-template-columns: 16.1% 27.2% 6.8% 29.9% minmax(0, 1fr);
    align-items: start;
    margin-top: clamp(32px, 3.75vw, 64px);
}

.dbs-fx-artist__body > .dbs-fx-artist__photo {
    position: relative;
    grid-column: 2;
    margin: 0;
    aspect-ratio: 392 / 637;
}

.dbs-fx-artist .dbs-fx-artist__photo img,
.dbs-fx-press .dbs-fx-press__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dbs-fx-artist__body > .dbs-fx-artist__words {
    grid-column: 4;
    margin: 0;
}

.dbs-fx-artist__words > * {
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-artist__words > .dbs-fx-artist__copy {
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
}

.dbs-fx-artist__words > .dbs-fx-artist__copy + .dbs-fx-artist__copy {
    margin-top: 1.6em;
}

.dbs-fx-artist__words > .dbs-fx-artist__sign {
    margin-top: clamp(8px, 0.8vw, 14px);
    font-family: "Waterfall", cursive;
    font-weight: 400;
    font-size: clamp(2.6rem, 4.4vw, 4.8rem);
    line-height: 1.1;
    color: #595754;
}


/* ==================================================
   EFFECT 9: PRESS BIO
   Like the Aperol Spritz About page's text-and-photo
   section, with its numbered list: a light serif
   statement, three numbered entries and no lines,
   beside a portrait that stays in view.
================================================== */

.wp-block-group.dbs-fx-press {
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(64px, 8vw, 140px) 0;
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
}

.dbs-fx-press > .dbs-fx-press__grid {
    display: grid;
    grid-template-columns: 15.7% 33.8% 4.6% 29.1% minmax(0, 1fr);
    align-items: start;
}

.dbs-fx-press__grid > .dbs-fx-press__words {
    grid-column: 2;
    margin: 0;
}

.dbs-fx-press__grid > .dbs-fx-press__photo {
    position: sticky;
    top: calc(var(--dbs-fx-top) + 10vh);
    grid-column: 4;
    margin: 0;
    aspect-ratio: 419 / 645;
}

.dbs-fx-press__words > *,
.dbs-fx-press__item > * {
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-press__words > .dbs-fx-press__eyebrow {
    font-family: "Karla", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dbs-fx-press__words > .dbs-fx-press__title {
    margin-top: clamp(16px, 1.8vw, 28px);
    font-family: "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(1.9rem, 3.26vw, 3.6rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.dbs-fx-press__words > .dbs-fx-press__list {
    margin-top: clamp(32px, 3.6vw, 60px);
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 2.8vw, 44px);
}

.dbs-fx-press__list > .dbs-fx-press__item {
    display: grid;
    grid-template-columns: 3.2em minmax(0, 1fr);
    column-gap: 0.8em;
    margin: 0;
}

/* A small moving image (the flickering candle) marks each entry instead of a number. */
.dbs-fx-press__item > .dbs-fx-press__mark {
    grid-row: 1 / span 2;
    width: 2.4em;
    margin: 0;
}

.dbs-fx-press__item > .dbs-fx-press__mark img {
    display: block;
    width: 100%;
    height: auto;
}

.dbs-fx-press__item > .dbs-fx-press__item-title,
.dbs-fx-press__item > .dbs-fx-press__item-text {
    grid-column: 2;
}

/* Two classes deep so WordPress's own spacing between blocks doesn't push the title below its candle. */
.dbs-fx-press__item > .dbs-fx-press__item-title {
    margin-top: 0;
    font-family: "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(1.25rem, 1.75vw, 1.9rem);
    line-height: 1.25;
}

.dbs-fx-press__item > .dbs-fx-press__item-text {
    margin-top: 0.6em;
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.65;
}

.dbs-fx-press__words > .wp-block-buttons {
    margin-top: clamp(32px, 3.4vw, 56px);
}


/* ==================================================
   EFFECT 6 EXTRAS: a handwritten line and a button
   under the intro, and a second block of words on
   the right, under the medium photo.
================================================== */

.dbs-fx-story__intro > .dbs-fx-story__hand {
    margin-top: clamp(16px, 1.6vw, 28px);
    font-family: "Reenie Beanie", cursive;
    font-size: clamp(1.8rem, 2.4vw, 2.6rem);
    line-height: 1.3;
}

.dbs-fx-story__intro > .wp-block-buttons {
    margin-top: clamp(24px, 2.4vw, 40px);
    justify-content: center;
}

.dbs-fx-story__words2 > * {
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-story__words2 > .dbs-fx-story__copy,
.dbs-fx-story__words > .dbs-fx-story__copy + .dbs-fx-story__copy {
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.26vw, 19px);
    line-height: 1.6;
}

.dbs-fx-story__words2 > .dbs-fx-story__copy + .dbs-fx-story__copy,
.dbs-fx-story__words > .dbs-fx-story__copy + .dbs-fx-story__copy {
    margin-top: 1.1em;
}

@media (min-width: 782px) {
    /* The words under the large photo and a second block under the medium photo sit in two columns. */
    .dbs-fx-story > .dbs-fx-story__body.has-second-words {
        display: grid;
        grid-template-columns: 15.7% 35.4% 11.9% 29.1% minmax(0, 1fr);
        align-items: start;
        min-height: 0;
    }

    .dbs-fx-story__body.has-second-words > .dbs-fx-story__big   { grid-column: 2; grid-row: 1; width: 91.25%; margin-left: 0; }
    .dbs-fx-story__body.has-second-words > .dbs-fx-story__words { grid-column: 2; grid-row: 2; width: auto; margin-left: 0; }

    /* Starts just under the medium photo: its bottom (69.3vw) minus the large photo's height (44.6vw), plus the usual gap. */
    .dbs-fx-story__body.has-second-words > .dbs-fx-story__words2 { grid-column: 4; grid-row: 2; margin: 30.45vw 0 0; }
}


/* ==================================================
   EFFECT 10: RESOURCES INTRO
   Like the Aperol Spritz "Resources and Education"
   section: a large centered title, a light serif
   statement beside a small label and paragraph, then
   two staggered photo cards.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.dbs-fx-resources,
.dbs-fx-offer {
    --dbs-fx-ink: #060606;
    --dbs-fx-white: #ffffff;
    --dbs-fx-top: var(--wp-admin--admin-bar--height, 0px);
    --dbs-fx-gutter: clamp(16px, 4vw, 48px);
    --dbs-fx-screen: calc(100vh - var(--dbs-fx-top));
}

.dbs-fx-resources > *,
.dbs-fx-offer > * {
    max-width: none;
    margin: 0;
}

.wp-block-group.dbs-fx-resources {
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(56px, 7vw, 120px) 0 clamp(64px, 8vw, 140px);
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
}

.dbs-fx-resources > .dbs-fx-resources__title {
    padding-inline: var(--dbs-fx-gutter);
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(2.6rem, 9.03vw, 9.5rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
    text-align: center;
    text-transform: uppercase;
    color: var(--dbs-fx-ink);
}

.dbs-fx-resources__title em,
.dbs-fx-resources__card-title em {
    font-style: italic;
    text-transform: none;
}

.dbs-fx-resources > .dbs-fx-resources__intro {
    display: grid;
    grid-template-columns: 16.1% 32.3% 2.5% 33.1% minmax(0, 1fr);
    align-items: start;
    margin-top: clamp(24px, 2.4vw, 40px);
}

.dbs-fx-resources__intro > *,
.dbs-fx-resources__side > *,
.dbs-fx-resources__card > * {
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-resources__intro > .dbs-fx-resources__statement {
    grid-column: 2;
    font-family: "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 3.13vw, 3.4rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.dbs-fx-resources__intro > .dbs-fx-resources__side {
    grid-column: 4;
    padding-top: 16px;
}

.dbs-fx-resources__side > .dbs-fx-resources__eyebrow {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(6, 6, 6, 0.22);
    font-family: "Karla", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dbs-fx-resources__side > .dbs-fx-resources__copy {
    margin-top: clamp(24px, 2.6vw, 44px);
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
}

.dbs-fx-resources__side > .dbs-fx-resources__copy + .dbs-fx-resources__copy {
    margin-top: 1.1em;
}

.dbs-fx-resources__copy strong {
    font-weight: 500;
}

.dbs-fx-resources > .dbs-fx-resources__cards {
    display: grid;
    grid-template-columns: 15.2% 32.4% 6.8% 29.5% minmax(0, 1fr);
    align-items: start;
    margin-top: clamp(56px, 6.7vw, 120px);
}

.dbs-fx-resources__cards > .dbs-fx-resources__card {
    margin: 0;
}

.dbs-fx-resources__cards > .dbs-fx-resources__card:nth-child(1) { grid-column: 2; }
.dbs-fx-resources__cards > .dbs-fx-resources__card:nth-child(2) { grid-column: 4; margin-top: 5vw; }

.dbs-fx-resources__card > .dbs-fx-resources__photo {
    position: relative;
    aspect-ratio: 466 / 578;
}

.dbs-fx-resources__card:nth-child(2) > .dbs-fx-resources__photo {
    aspect-ratio: 425 / 413;
}

.dbs-fx-resources .dbs-fx-resources__photo img,
.dbs-fx-offer .dbs-fx-offer__photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dbs-fx-resources__card > .dbs-fx-resources__card-title {
    margin-top: clamp(24px, 3vw, 52px);
    font-family: "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 2.22vw, 2.4rem);
    line-height: 1.1;
}

.dbs-fx-resources__card > .dbs-fx-resources__card-text {
    margin-top: clamp(10px, 0.9vw, 16px);
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
}

.dbs-fx-resources__card > .dbs-fx-resources__link {
    margin-top: clamp(18px, 1.9vw, 30px);
    font-family: "Karla", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dbs-fx-resources__link a {
    text-decoration: none;
}


/* ==================================================
   EFFECT 11: NUMBERED OFFER
   Like the Aperol Spritz service sections (No. 01,
   02, 03): a full-screen section with a handwritten
   "No." and number, a tall photo and a large light
   title. The photo stays in view while longer details
   scroll. Every other offer is mirrored.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.wp-block-group.dbs-fx-offer {
    min-height: var(--dbs-fx-screen);
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(64px, 12vh, 160px) 0;
    display: flex;
    align-items: center;
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
}

.dbs-fx-offer > .dbs-fx-offer__grid {
    width: 100%;
    display: grid;
    grid-template-columns: 11.4% 3.3% 1.7% 29.9% 5.1% 37.3% minmax(0, 1fr);
    align-items: start;
}

.dbs-fx-offer__grid > .dbs-fx-offer__no {
    position: sticky;
    top: calc(var(--dbs-fx-top) + 12vh);
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    text-align: center;
}

.dbs-fx-offer__no > * {
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-offer__no > .dbs-fx-offer__no-label {
    font-family: "Waterfall", cursive;
    font-size: clamp(1.5rem, 2.2vw, 2.4rem);
    line-height: 1.1;
}

.dbs-fx-offer__no > .dbs-fx-offer__no-num {
    font-family: "Noto Serif Display", serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 1.74vw, 1.9rem);
    line-height: 1.1;
}

.dbs-fx-offer__grid > .dbs-fx-offer__photo {
    position: sticky;
    top: calc(var(--dbs-fx-top) + 12vh);
    grid-column: 4;
    grid-row: 1;
    margin: 0;
    aspect-ratio: 431 / 571;
}

.dbs-fx-offer__grid > .dbs-fx-offer__words {
    grid-column: 6;
    grid-row: 1;
    margin: 0;
    padding-top: 2.9vw;
}

/* Mirrored: the words on the left, the number and photo on the right. */
.dbs-fx-offer.is-flipped > .dbs-fx-offer__grid {
    grid-template-columns: 14.6% 33.2% 3.3% 2.1% 31.5% minmax(0, 1fr);
}

.dbs-fx-offer.is-flipped .dbs-fx-offer__grid > .dbs-fx-offer__words { grid-column: 2; }
.dbs-fx-offer.is-flipped .dbs-fx-offer__grid > .dbs-fx-offer__no    { grid-column: 3; }
.dbs-fx-offer.is-flipped .dbs-fx-offer__grid > .dbs-fx-offer__photo { grid-column: 5; aspect-ratio: 454 / 574; }

/* The offer's own text, kept as it was written, in the reference's type. */
.dbs-fx-offer .dbs-fx-offer__words > * {
    max-width: 84%;
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-offer .dbs-fx-offer__words > * + * {
    margin-top: 1.1em;
}

.dbs-fx-offer .dbs-fx-offer__words > p,
.dbs-fx-offer .dbs-fx-offer__words li {
    font-family: "Karla", sans-serif;
    font-weight: 300;
    font-size: clamp(16px, 1.18vw, 18px);
    line-height: 1.6;
}

.dbs-fx-offer .dbs-fx-offer__words > h2 {
    max-width: none;
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(2.2rem, 4.03vw, 4.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.dbs-fx-offer .dbs-fx-offer__words > h2 strong {
    font-weight: inherit;
}

.dbs-fx-offer .dbs-fx-offer__words > h2 em {
    font-style: italic;
    text-transform: none;
}

.dbs-fx-offer .dbs-fx-offer__words > h2 + * {
    margin-top: clamp(28px, 4.7vw, 72px);
}

.dbs-fx-offer .dbs-fx-offer__words > .dbs-fx-offer__sub,
.dbs-fx-offer .dbs-fx-offer__words > .dbs-fx-offer__detail {
    font-family: "Karla", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dbs-fx-offer .dbs-fx-offer__words > h2 + .dbs-fx-offer__sub {
    margin-top: clamp(16px, 1.6vw, 28px);
}

.dbs-fx-offer .dbs-fx-offer__words > .dbs-fx-offer__sub + * {
    margin-top: clamp(24px, 3vw, 48px);
}

.dbs-fx-offer .dbs-fx-offer__words > .dbs-fx-offer__detail {
    margin-top: 1.8em;
}

.dbs-fx-offer .dbs-fx-offer__words > .dbs-fx-offer__more a {
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 14px;
}

.dbs-fx-offer .dbs-fx-offer__words ul {
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}

.dbs-fx-offer .dbs-fx-offer__words li {
    margin: 0;
    font-size: clamp(15px, 1.1vw, 17px);
}

.dbs-fx-offer .dbs-fx-offer__words strong {
    font-weight: 500;
}

.dbs-fx-offer .dbs-fx-offer__words > .wp-block-buttons {
    margin-top: clamp(24px, 2.4vw, 40px);
}


/* ==================================================
   EFFECTS 12, 13 AND 14: SHARED SETTINGS
================================================== */

.dbs-fx-reviews,
.dbs-fx-manifesto,
.dbs-fx-cta {
    --dbs-fx-ink: #060606;
    --dbs-fx-white: #ffffff;
    --dbs-fx-muted: #8c8379;
    --dbs-fx-gutter: clamp(16px, 4vw, 48px);
}

.dbs-fx-reviews > *,
.dbs-fx-manifesto > *,
.dbs-fx-cta > * {
    max-width: none;
    margin: 0;
}


/* ==================================================
   EFFECT 12: REVIEW SLIDER
   Like the Aperol Spritz single-service reviews: a
   small label, one large quote at a time with an
   italic accent, the client's name in italics, and
   thin arrows on either side.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.wp-block-group.dbs-fx-reviews {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(64px, 8.3vw, 140px) var(--dbs-fx-gutter) clamp(72px, 8.8vw, 150px);
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
    text-align: center;
}

.dbs-fx-reviews > .dbs-fx-reviews__eyebrow {
    font-family: "Karla", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dbs-fx-ink);
}

.dbs-fx-reviews > .dbs-fx-reviews__slides {
    position: relative;
    margin: clamp(20px, 2vw, 36px) auto 0;
    width: min(100%, 47.2vw);
}

/* Once the script is running, the slides sit on top of each other and fade from one to the next. */
.dbs-fx-reviews.is-ready > .dbs-fx-reviews__slides {
    display: grid;
}

.dbs-fx-reviews__slides > .dbs-fx-reviews__slide {
    margin: 0;
}

.dbs-fx-reviews__slides > .dbs-fx-reviews__slide + .dbs-fx-reviews__slide {
    margin-top: 48px;
}

.dbs-fx-reviews.is-ready .dbs-fx-reviews__slides > .dbs-fx-reviews__slide {
    grid-area: 1 / 1;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.dbs-fx-reviews.is-ready .dbs-fx-reviews__slides > .dbs-fx-reviews__slide.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.6s ease, visibility 0s;
}

.dbs-fx-reviews__slide > * {
    margin: 0;
    color: var(--dbs-fx-ink);
}

.dbs-fx-reviews__slide > .dbs-fx-reviews__quote {
    font-family: "Noto Serif Display", serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 3.19vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.dbs-fx-reviews__quote em {
    font-style: italic;
}

.dbs-fx-reviews__slide > .dbs-fx-reviews__cite {
    margin-top: clamp(18px, 2.15vw, 36px);
    font-family: "DBS EB Garamond", "EB Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 1.8vw, 1.9rem);
    line-height: 1.2;
}

/* The arrows are added by effects.js. */
.dbs-fx-reviews__arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dbs-fx-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dbs-fx-reviews__arrow svg {
    width: 40px;
    height: 14px;
    transition: transform 0.25s ease;
}

.dbs-fx-reviews__arrow.is-prev { left: 11.6%; }
.dbs-fx-reviews__arrow.is-next { left: 83.8%; }
.dbs-fx-reviews__arrow.is-prev:hover svg { transform: translateX(-4px); }
.dbs-fx-reviews__arrow.is-next:hover svg { transform: translateX(4px); }

.dbs-fx-reviews__arrow:focus-visible {
    outline: 1px dotted var(--dbs-fx-ink);
    outline-offset: 4px;
}


/* ==================================================
   EFFECT 13: NUMBERED MANIFESTO
   Like the Fitzgerald "What we stand for" section, on
   white: a small label, five large lines that turn
   between upright and italic with a small number
   beside each, then a centered paragraph.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.wp-block-group.dbs-fx-manifesto {
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(64px, 9.5vw, 160px) var(--dbs-fx-gutter) clamp(72px, 9.6vw, 160px);
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
    text-align: center;
}

.dbs-fx-manifesto > .dbs-fx-manifesto__eyebrow {
    font-family: "Karla", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dbs-fx-ink);
}

.dbs-fx-manifesto > .dbs-fx-manifesto__list {
    margin-top: clamp(16px, 1.9vw, 32px);
}

.dbs-fx-manifesto__list > .dbs-fx-manifesto__line {
    margin: 0;
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(2.2rem, 5.56vw, 6rem);
    line-height: 1.075;
    letter-spacing: -0.01em;
    color: var(--dbs-fx-ink);
}

.dbs-fx-manifesto__line em {
    font-style: italic;
}

/* The small number sits just outside the start (odd lines) or the end (even lines) of each line. */
.dbs-fx-manifesto__line .dbs-fx-manifesto__num {
    display: inline-block;
    position: relative;
    top: 1em;
    margin: 0 1.6vw;
    font-family: "Karla", sans-serif;
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    vertical-align: top;
    color: var(--dbs-fx-muted);
}

.dbs-fx-manifesto > .dbs-fx-manifesto__copy {
    max-width: 34em;
    margin: clamp(28px, 2.85vw, 48px) auto 0;
    font-family: "Karla", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
    color: var(--dbs-fx-ink);
}

.dbs-fx-manifesto > .dbs-fx-manifesto__copy + .dbs-fx-manifesto__copy {
    margin-top: 1em;
}

.dbs-fx-manifesto > .wp-block-buttons {
    margin-top: clamp(24px, 2.4vw, 40px);
    justify-content: center;
}


/* ==================================================
   EFFECT 14: CLOSING CALL TO ACTION WITH PHOTO STRIP
   Like the Aperol Spritz "Let's work together"
   section: an italic line, a large light title, a
   short paragraph and an outlined button on white,
   then a full-width photo strip that moves slowly.
   Sizes are the reference's, measured at 1440px wide.
================================================== */

.wp-block-group.dbs-fx-cta {
    margin-top: 0;
    margin-bottom: 0;
    padding: clamp(64px, 7vw, 120px) 0 0;
    background: var(--dbs-fx-white);
    color: var(--dbs-fx-ink);
    text-align: center;
}

.dbs-fx-cta > .dbs-fx-cta__kicker {
    padding-inline: var(--dbs-fx-gutter);
    font-family: "DBS EB Garamond", "EB Garamond", serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 1.8vw, 1.9rem);
    line-height: 1.2;
    color: var(--dbs-fx-ink);
}

.dbs-fx-cta > .dbs-fx-cta__title {
    margin-top: clamp(16px, 2vw, 32px);
    padding-inline: var(--dbs-fx-gutter);
    font-family: "Noto Serif Display", serif;
    font-weight: 200;
    font-size: clamp(2.4rem, 4.72vw, 5.2rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--dbs-fx-ink);
}

.dbs-fx-cta__title em {
    font-style: italic;
    text-transform: none;
}

.dbs-fx-cta > .dbs-fx-cta__copy {
    width: min(100% - 2 * var(--dbs-fx-gutter), 35.7vw);
    margin: clamp(14px, 0.7vw, 20px) auto 0;
    font-family: "Karla", sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
    color: var(--dbs-fx-ink);
}

.dbs-fx-cta > .wp-block-buttons {
    margin-top: clamp(24px, 2.4vw, 40px);
    justify-content: center;
}

/* The site's pill button as an outline, as in the reference. */
.dbs-fx-cta .wp-block-button .wp-block-button__link {
    background: transparent !important;
    color: var(--dbs-fx-ink) !important;
    -webkit-text-fill-color: var(--dbs-fx-ink) !important;
    border: 1px solid var(--dbs-fx-ink) !important;
}

.dbs-fx-cta .wp-block-button .wp-block-button__link:hover,
.dbs-fx-cta .wp-block-button .wp-block-button__link:focus-visible {
    background: var(--dbs-fx-ink) !important;
    color: var(--dbs-fx-white) !important;
    -webkit-text-fill-color: var(--dbs-fx-white) !important;
}

/* The photo strip: taller inside than its frame by half a screen, so it can move at half speed. */
.dbs-fx-cta > .dbs-fx-cta__strip {
    position: relative;
    height: 44.7vw;
    margin-top: clamp(56px, 7.5vw, 120px);
    overflow: hidden;
}

.dbs-fx-cta .dbs-fx-cta__strip img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 50vh);
    object-fit: cover;
    will-change: transform;
}

.dbs-fx-cta .dbs-fx-cta__strip.dbs-fx-focus-right img { object-position: 82% 50%; }
.dbs-fx-cta .dbs-fx-cta__strip.dbs-fx-focus-left img  { object-position: 18% 50%; }


/* ==================================================
   PHONES
================================================== */

@media (max-width: 781px) {
    .dbs-fx-panel > .dbs-fx-panel__grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }

    .dbs-fx-panel__grid > .dbs-fx-panel__aside {
        position: static;
        order: -1;
        align-items: center;
        text-align: center;
    }

    .dbs-fx-panel__aside > .dbs-fx-panel__fade {
        width: 100%;
    }

    .dbs-fx-panel__aside .wp-block-buttons {
        justify-content: center;
    }

    .dbs-fx-panel__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .dbs-fx-panel__list > .dbs-fx-panel__photo:nth-child(n) {
        width: 100%;
        margin-left: 0;
    }

    /* Phones: the copy gets the first full screen, then the photos follow one by one with space between them. */
    .dbs-fx-pin > .dbs-fx-pin__photos { height: calc(100vh + 285vw); }
    .dbs-fx-pin .dbs-fx-float--2 { top: 100vh;                left: auto; right: 0;    width: 46%; }
    .dbs-fx-pin .dbs-fx-float--3 { top: calc(100vh + 70vw);  left: 10%;  right: auto; width: 80%; }
    .dbs-fx-pin .dbs-fx-float--1 { top: calc(100vh + 185vw); left: 0;    right: auto; width: 48%; }
    .dbs-fx-pin .dbs-fx-float--4 { top: calc(100vh + 215vw); left: auto; right: 0;    width: 44%; }

    /* Phones: arranged like the reference's own phone layout. The large photo touches the
       left edge, the small one the right edge, the medium one sits below them. */
    .dbs-fx-story__intro > .dbs-fx-story__title { font-size: clamp(2.3rem, 10.5vw, 3.4rem); }
    .dbs-fx-story > .dbs-fx-story__body { min-height: 0; margin-top: 48px; }
    .dbs-fx-story__body > .dbs-fx-story__big    { margin-left: 0; width: 75%; aspect-ratio: 750 / 847; }
    .dbs-fx-story__body > .dbs-fx-story__small  { top: 46.5vw;  left: auto; right: 0; width: 41.9%; aspect-ratio: 419 / 556; }
    .dbs-fx-story__body > .dbs-fx-story__medium { top: 116.9vw; left: 14.1%; width: 44.1%; aspect-ratio: 441 / 578; }
    .dbs-fx-story__body > .dbs-fx-story__words  { width: auto; margin: 105vw 12.5% 0; }
    .dbs-fx-story__words > .dbs-fx-story__heading { max-width: none; }
    .dbs-fx-story > .dbs-fx-story__review { margin-top: 64px; }
    .dbs-fx-story__review > .dbs-fx-story__quote { font-size: clamp(1.6rem, 7vw, 2.2rem); }

    /* Phones: the photo section fills the screen, the words take the full width. */
    .wp-block-group.dbs-fx-photo { min-height: var(--dbs-fx-screen); padding: 0 var(--dbs-fx-gutter) 14vw; }
    .dbs-fx-photo > .dbs-fx-photo__words { width: 100%; }
    .wp-block-group.dbs-fx-photo.is-centered { min-height: 80svh; padding: 64px var(--dbs-fx-gutter); }
    .dbs-fx-photo.is-centered > .dbs-fx-photo__words { width: 100%; }

    /* Phones: the portrait above the story, then the signature. */
    .dbs-fx-artist > .dbs-fx-artist__intro { width: auto; margin: 24px var(--dbs-fx-gutter) 0; }
    .dbs-fx-artist > .dbs-fx-artist__body { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-inline: var(--dbs-fx-gutter); }
    .dbs-fx-artist__body > .dbs-fx-artist__photo { grid-column: 1; width: 78%; margin: 0 auto; }
    .dbs-fx-artist__body > .dbs-fx-artist__words { grid-column: 1; }

    /* Phones: the portrait first, then the bio. */
    .dbs-fx-press > .dbs-fx-press__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding-inline: var(--dbs-fx-gutter); }
    .dbs-fx-press__grid > .dbs-fx-press__photo { position: relative; top: auto; grid-column: 1; grid-row: 1; width: 78%; margin: 0 auto; }
    .dbs-fx-press__grid > .dbs-fx-press__words { grid-column: 1; grid-row: 2; }

    /* Phones: the second block of story words follows the first. */
    .dbs-fx-story__body > .dbs-fx-story__words2 { margin: 32px 12.5% 0; }

    /* Phones: the resources intro and its two cards stack. */
    .dbs-fx-resources > .dbs-fx-resources__intro,
    .dbs-fx-resources > .dbs-fx-resources__cards { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-inline: var(--dbs-fx-gutter); }
    .dbs-fx-resources__intro > .dbs-fx-resources__statement,
    .dbs-fx-resources__intro > .dbs-fx-resources__side,
    .dbs-fx-resources__cards > .dbs-fx-resources__card:nth-child(n) { grid-column: 1; }
    .dbs-fx-resources__intro > .dbs-fx-resources__side { padding-top: 0; }
    .dbs-fx-resources__cards > .dbs-fx-resources__card:nth-child(2) { margin-top: 24px; }

    /* Phones: number, photo, then the offer's words. */
    .wp-block-group.dbs-fx-offer { min-height: 0; display: block; padding: 56px 0; }
    .dbs-fx-offer > .dbs-fx-offer__grid,
    .dbs-fx-offer.is-flipped > .dbs-fx-offer__grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-inline: var(--dbs-fx-gutter); }
    .dbs-fx-offer__grid > .dbs-fx-offer__no,
    .dbs-fx-offer.is-flipped .dbs-fx-offer__grid > .dbs-fx-offer__no { position: static; grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 0.3em; text-align: left; }
    .dbs-fx-offer__grid > .dbs-fx-offer__photo,
    .dbs-fx-offer.is-flipped .dbs-fx-offer__grid > .dbs-fx-offer__photo { position: relative; top: auto; grid-column: 1; grid-row: 2; }
    .dbs-fx-offer__grid > .dbs-fx-offer__words,
    .dbs-fx-offer.is-flipped .dbs-fx-offer__grid > .dbs-fx-offer__words { grid-column: 1; grid-row: 3; padding-top: 12px; }
    .dbs-fx-offer .dbs-fx-offer__words > * { max-width: none; }
    .dbs-fx-offer .dbs-fx-offer__words > h2 { font-size: clamp(2rem, 9vw, 2.6rem); }

    /* Phones: the review slider keeps its arrows, just closer to the edges. */
    .dbs-fx-reviews > .dbs-fx-reviews__slides { width: 76%; }
    .dbs-fx-reviews__arrow.is-prev { left: 0; }
    .dbs-fx-reviews__arrow.is-next { left: auto; right: 0; }
    .dbs-fx-reviews__arrow svg { width: 28px; }

    /* Phones: the manifesto lines get smaller, numbers stay beside them. */
    .dbs-fx-manifesto__list > .dbs-fx-manifesto__line { font-size: clamp(1.8rem, 8.6vw, 2.6rem); }
    .dbs-fx-manifesto__line .dbs-fx-manifesto__num { font-size: 11px; margin: 0 6px; }

    /* Phones: the closing call to action. */
    .dbs-fx-cta > .dbs-fx-cta__copy { width: auto; margin-inline: var(--dbs-fx-gutter); }
    .dbs-fx-cta > .dbs-fx-cta__strip { height: 70vw; }
}