/* ==========================================================================
   Service pages rebuilt in the frv design (includes/frv-service-page.php).
   Extends financial-reporting-valuation-dubai.css with the pieces the main
   service pages do not have: stats row, photo + copy split, check list,
   numbered tab items, three-column cards, booking form, award logos,
   testimonials, community chips and location cards. Same tokens, type and
   16px card corner as the main pages; no lift or zoom on hover.
   ========================================================================== */

/* ---- hero: tag line and buttons under the lead ---------------------------- */
.frv-svc .rs-svh__actions {
    margin-top: 28px;
}

/* ---- stats row ---------------------------------------------------------- */
.frv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 48px 0 0;
    border-top: 1px solid var(--frv-line);
}

.frv-stats__item {
    padding: 24px 24px 0 0;
}

.frv-stats__item + .frv-stats__item {
    padding-left: 24px;
    border-left: 1px solid var(--frv-line);
}

.frv-stats dt {
    font-family: var(--frv-head);
    font-size: clamp(28px, 2.6vw, 38px);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--frv-brand);
}

.frv-stats dd {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--frv-ink-500);
}

@media (max-width: 639px) {
    .frv-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .frv-stats__item,
    .frv-stats__item + .frv-stats__item {
        padding: 18px 12px 0 0;
        border-left: 0;
    }
}

/* ---- photo + copy split ---------------------------------------------------- */
.frv-split {
    display: grid;
    gap: 32px;
    align-items: center;
}

@media (min-width: 1024px) {
    .frv-split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 64px;
    }

    .frv-split--rev .frv-split__media {
        order: 2;
    }
}

.frv-split__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: var(--frv-mist);
}

.frv-split__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frv-split__body .frv-display-md {
    margin-bottom: 24px;
}

.frv-split__copy p,
.frv-intro__body > p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--frv-ink-700);
}

.frv-split__copy > * + *,
.frv-intro__body > * + * {
    margin-top: 16px;
}

/* ---- check list ------------------------------------------------------------- */
.frv-checks {
    display: grid;
    gap: 12px;
}

.frv-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--frv-ink-700);
}

.frv-checks .frv-ic {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    padding: 2px;
    border-radius: 50%;
    background: var(--frv-brand-50);
    color: var(--frv-brand);
}

.frv-panel--why .frv-sechead__pt .frv-checks {
    margin-top: 20px;
}

/* ---- numbered items in the tab lists ----------------------------------------- */
.frv-linelist__num {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--frv-brand);
}

/* ---- cards: three columns for six, a hairline on white sections ---------------- */
@media (min-width: 1024px) {
    .frv-process--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.frv-svc .frv-section:not(.frv-mist) .frv-process__card {
    border: 1px solid var(--frv-line);
}

.frv-svc .frv-process__card:not(:has(.frv-process__num)) .frv-process__title {
    margin-top: 0;
}

/* ---- booking: details left, certified valuation form right --------------------- */
.frv-book {
    display: grid;
    gap: 32px;
}

@media (min-width: 1024px) {
    .frv-book {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 64px;
        align-items: start;
    }
}

.frv-book__p {
    margin-top: 20px !important;
    font-size: 16px;
    line-height: 1.7;
    color: var(--frv-ink-700);
}

.frv-book__contacts {
    margin: 32px 0 0;
    border-top: 1px solid var(--frv-line);
}

.frv-book__contacts > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--frv-line);
}

.frv-book__contacts dt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--frv-ink-500);
}

.frv-book__contacts dt .frv-ic {
    color: var(--frv-brand);
}

.frv-book__contacts dd {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--frv-ink);
}

.frv-book__contacts a:hover {
    color: var(--frv-brand);
}

.frv-book__panel {
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--frv-line);
    border-radius: 16px;
    background: #fff;
}

.frv-book__title {
    margin-bottom: 24px !important;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--frv-ink);
}

.frv-book__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.frv-book__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.frv-book__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.frv-book__field > span {
    font-size: 13px;
    font-weight: 500;
    color: var(--frv-ink);
}

.frv-book__field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #cfd5e2;
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--frv-ink);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.frv-book__field input:focus {
    border-color: var(--frv-brand);
    box-shadow: 0 0 0 3px rgba(11, 45, 190, .12);
}

/* the country-code picker wraps the phone field */
.frv-book__field .iti {
    width: 100%;
}

.frv-book__submit {
    align-self: flex-start;
}

@media (max-width: 575px) {
    .frv-book__fields {
        grid-template-columns: 1fr;
    }

    .frv-book__contacts > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .frv-book .g-recaptcha {
        transform: scale(.9);
        transform-origin: 0 0;
    }
}

/* ---- shared full booking form (includes/valuation-form-section.php) in the frv tone */
.frv-svc .vlead {
    padding: 56px 0;
    background: var(--frv-mist);
}

.frv-svc .vlead .container {
    max-width: 1408px;
    padding-inline: 20px;
}

@media (min-width: 1024px) {
    .frv-svc .vlead .container {
        padding-inline: 48px;
    }
}

@media (min-width: 1280px) {
    .frv-svc .vlead .container {
        padding-inline: 64px;
    }
}

.frv-svc .vlead__card {
    border-color: var(--frv-line);
    box-shadow: none;
}

.frv-svc .vlead__head {
    padding: 24px 32px 18px;
}

.frv-svc .vlead__title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--frv-ink);
}

.frv-svc .vlead__sub {
    margin-top: 6px;
    font-size: 14px;
    color: var(--frv-ink-500);
}

.frv-svc .vlead__body {
    padding: 24px 32px 28px;
}

.frv-svc .vlead__label {
    font-size: 12px;
    color: var(--frv-ink-700);
}

.frv-svc .vlead__input {
    background-color: #fff;
    border-color: #cfd5e2;
}

.frv-svc .vlead__submit {
    border-radius: 999px;
    background: var(--frv-brand);
    letter-spacing: .06em;
}

.frv-svc .vlead__submit:hover {
    background: var(--frv-brand-700);
    transform: none;
}

/* ---- award and accreditation logos --------------------------------------------- */
.frv-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 8px;
}

@media (min-width: 768px) {
    .frv-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .frv-logos {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

.frv-logos__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 22px 20px;
    border: 1px solid var(--frv-line);
    border-radius: 16px;
    background: #fff;
}

.frv-logos__img {
    display: flex;
    align-items: center;
    height: 56px;
    margin-bottom: 12px;
}

.frv-logos__img img {
    max-height: 56px;
    max-width: 110px;
    width: auto;
    object-fit: contain;
}

.frv-logos__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--frv-ink);
}

.frv-logos__sub {
    font-size: 13px;
    line-height: 1.45;
    color: var(--frv-ink-500);
}

/* ---- testimonials ------------------------------------------------------------- */
.frv-quotes {
    display: grid;
    gap: 20px;
}

@media (min-width: 900px) {
    .frv-quotes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.frv-quote {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 28px;
    border-radius: 16px;
    background: #fff;
}

.frv-section:not(.frv-mist) .frv-quote {
    border: 1px solid var(--frv-line);
}

.frv-quote__stars {
    font-size: 14px;
    letter-spacing: .12em;
    color: var(--frv-brand);
}

.frv-quote__text {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--frv-ink-700);
}

.frv-quote__by {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--frv-line);
}

.frv-quote__avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--frv-brand);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.frv-quote__name {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--frv-ink);
}

.frv-quote__role {
    display: block;
    font-size: 13px;
    color: var(--frv-ink-500);
}

/* ---- community chips (not links) ------------------------------------------------ */
.frv-pills--static .frv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: default;
}

.frv-pills--static .frv-pill .frv-ic {
    color: var(--frv-brand);
}

/* ---- location cards (CMS) -------------------------------------------------------- */
.frv-locs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.frv-loc {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--frv-line);
    border-radius: 16px;
    background: #fff;
    transition: border-color .25s ease;
}

.frv-loc:hover {
    border-color: var(--frv-brand);
}

.frv-loc__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--frv-mist);
}

.frv-loc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frv-loc__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 20px;
}

.frv-loc__area {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 500;
    color: var(--frv-ink);
}

.frv-loc__area .frv-ic,
.frv-loc__more {
    color: var(--frv-brand);
}

.frv-loc__type {
    font-size: 13px;
    color: var(--frv-ink-500);
}

.frv-loc__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
}

.frv-empty {
    max-width: 760px;
    padding: 28px;
    border-radius: 16px;
    background: var(--frv-mist);
}

.frv-empty .frv-process__title {
    margin-top: 0;
}

/* ---- CTA glass: two paragraphs and a caption line ----------------------------------- */
.frv-glass .frv-cta__p + .frv-cta__p {
    margin-top: 12px;
}

.frv-cta__caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 20px !important;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.frv-cta__caption strong {
    font-weight: 500;
    color: #fff;
}

/* ---- FAQ and disclaimer -------------------------------------------------------------- */
.frv-faq {
    padding-top: 24px;
}

.frv-disclaimer {
    padding: 0 0 40px;
}

.frv-disclaimer p {
    max-width: 900px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--frv-ink-500);
}

/* ---- list block (2026-11-05): a numbered two-column list on hairlines, e.g. "When is a rental
   valuation needed?" on the valuation sub-service pages ---- */
.frv-needs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
    margin: clamp(8px, 1vw, 16px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #cdd5e4;
}

.frv-needs__item {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 20px 0;
    border-bottom: 1px solid #e0e5ef;
}

.frv-needs__num {
    flex: 0 0 auto;
    min-width: 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    color: #0b2dbe;
}

.frv-needs__title {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: #0a1230;
}

.frv-needs__actions {
    margin-top: clamp(24px, 2.6vw, 36px);
}

@media (max-width: 767px) {
    .frv-needs {
        grid-template-columns: minmax(0, 1fr);
    }

    .frv-needs__item {
        padding: 16px 0;
    }

    .frv-needs__title {
        font-size: 16px;
    }
}

/* list block items with a line of copy under the title (2026-11-05) */
.frv-needs__body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.frv-needs__desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: #5b6782;
}

/* a stats row with a single item (a callout statement) spans the full row on phones (2026-11-05) */
@media (max-width: 639px) {
    .frv-svc .frv-stats__item:only-child {
        grid-column: 1 / -1;
    }
}


/* ---- stats row, bold (2026-11-06): the figures set heavy in brand blue like the home page's track
   record, the labels in dark ink under them, on the same hairline grid ---- */
html body .frv-stats {
    margin-top: 44px;
}

html body .frv-stats__item {
    padding-top: 28px;
}

html body .frv-stats dt {
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -.03em;
    color: #0b2dbe;
}

html body .frv-stats dd {
    margin-top: 10px;
    font-size: clamp(14.5px, 1.1vw, 16.5px);
    font-weight: 500;
    line-height: 1.4;
    color: #0a1230;
}

@media (max-width: 639px) {
    html body .frv-stats dt {
        font-size: 30px;
    }
}

/* ---- booking form, v2 (2026-11-06): defined and structured. The details on the left; on the right the
   brand's glass-ribbon abstract in the top corner with the form on a white card over its lower-left
   edge. Square, softly filled fields with small labels. Every page that uses the 'book' block. ---- */
html body .frv-book {
    position: relative;
    align-items: center;
}

html body .frv-book::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 46%;
    height: 300px;
    background: url("../images/page-heroes/panel_abstract_glass_flow.webp") center / cover no-repeat;
}

html body .frv-book__info {
    position: relative;
    z-index: 1;
}

html body .frv-book__panel {
    position: relative;
    z-index: 1;
    margin: 104px 0 0 56px;
    padding: clamp(26px, 2.8vw, 40px);
    border: 1px solid #e1e6f0;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 40px 80px -48px rgba(10, 18, 48, .4);
}

html body .frv-book__title {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e1e6f0;
}

html body .frv-book__field > span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #3d4a6b;
}

html body .frv-book__field input {
    height: 52px;
    border: 1px solid #dbe2ee;
    border-bottom-color: #b6c2d8;
    border-radius: 0;
    background: #f7f9fd;
    box-shadow: none;
}

html body .frv-book__field input:focus {
    border-color: #0b2dbe;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 45, 190, .12);
}

html body .frv-book .iti,
html body .frv-book .iti__flag-container,
html body .frv-book .iti__selected-flag {
    border-radius: 0;
}

@media (max-width: 991px) {
    html body .frv-book::before {
        width: 100%;
        height: 180px;
        top: auto;
        bottom: auto;
    }

    html body .frv-book__panel {
        margin: 0;
    }

    html body .frv-book__info {
        margin-bottom: 24px;
    }
}

@media (max-width: 991px) {
    /* phones and tablets: the abstract sits as a band above the card */
    html body .frv-book {
        display: flex;
        flex-direction: column;
    }

    html body .frv-book::before {
        position: relative;
        order: 1;
        display: block;
        flex: none;
    }

    html body .frv-book__panel {
        order: 2;
        margin: -96px 10px 0;
    }
}

/* booking form v2: more of the abstract shows above the card */
@media (min-width: 992px) {
    html body .frv-book::before {
        width: 54%;
        height: 340px;
    }

    html body .frv-book__panel {
        margin-top: 150px;
    }
}

/* ---------- list block as a ruled grid (.frv-lx, 2026-11-06): white cells on fine rules, each with a
   large light numeral, the title and its line. Pointing at a cell tints it, draws a blue rule across
   its top and turns the numeral blue. With a photo ('img'), the photo stands on the left at the
   grid's full height and the cells sit two across beside it. ---------- */
html body .frv-lx .frv-lx__body {
    display: block;
}

html body .frv-lx.frv-lx--img .frv-lx__body {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: stretch;
}

html body .frv-lx .frv-lx__media {
    position: relative;
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    background: #e9edf5;
}

html body .frv-lx .frv-lx__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
}

html body .frv-lx .frv-lx__body:hover .frv-lx__media img {
    transform: scale(1.03);
}

html body .frv-lx .frv-needs {
    display: grid;
    grid-template-columns: repeat(var(--lcols, 3), minmax(0, 1fr));
    column-gap: 0;
    margin: 0;
    border-top: 1px solid #e1e6f0;
    border-left: 1px solid #e1e6f0;
}

html body .frv-lx.frv-lx--img .frv-needs {
    border-left: 0;
}

html body .frv-lx .frv-needs__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 26px 28px 30px;
    border-right: 1px solid #e1e6f0;
    border-bottom: 1px solid #e1e6f0;
    background: #fff;
    transition: background-color .35s ease;
}

html body .frv-lx .frv-needs__item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: #0b2dbe;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

html body .frv-lx .frv-needs__num {
    min-width: 0;
    font-size: clamp(30px, 2.4vw, 38px);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
    color: #a9b9f2;
    transition: color .35s ease;
}

html body .frv-lx .frv-needs__body {
    gap: 8px;
}

html body .frv-lx .frv-needs__title {
    font-size: clamp(17px, 1.25vw, 19px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #0a1230;
    transition: color .35s ease;
}

html body .frv-lx .frv-needs__desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #5b6782;
}

html body .frv-lx .frv-needs__item:hover {
    background: #f6f8fe;
}

html body .frv-lx .frv-needs__item:hover::before {
    transform: scaleX(1);
}

html body .frv-lx .frv-needs__item:hover .frv-needs__num {
    color: #0b2dbe;
}

@media (max-width: 1199px) {
    html body .frv-lx:not(.frv-lx--img) .frv-needs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    html body .frv-lx.frv-lx--img .frv-lx__body {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .frv-lx .frv-lx__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    html body .frv-lx.frv-lx--img .frv-needs {
        border-left: 1px solid #e1e6f0;
    }
}

@media (max-width: 639px) {
    html body .frv-lx .frv-needs,
    html body .frv-lx:not(.frv-lx--img) .frv-needs {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .frv-lx .frv-needs__item {
        flex-direction: row;
        align-items: baseline;
        gap: 16px;
        padding: 18px 18px 20px;
    }

    html body .frv-lx .frv-needs__num {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .frv-lx .frv-lx__media img,
    html body .frv-lx .frv-needs__item::before {
        transition: none;
    }
}

/* ---- stats row on phones, v2 (2026-11-06): one figure per row on hairlines, the figure on the left and
   its label on the right, so three (or any number of) figures line up instead of leaving the last one
   alone on a second row ---- */
@media (max-width: 639px) {
    html body .frv-stats {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 30px;
        border-top: 1px solid var(--frv-line, #e1e6f0);
    }

    html body .frv-stats__item,
    html body .frv-stats__item + .frv-stats__item {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 0;
        border-left: 0;
        border-bottom: 1px solid var(--frv-line, #e1e6f0);
    }

    html body .frv-stats dt {
        flex: 0 0 auto;
        font-size: 26px;
    }

    html body .frv-stats dd {
        margin: 0;
        font-size: 14.5px;
        text-align: right;
    }
}

/* ---------- "When is it needed?" (.frv-when, 2026-11-10; frv_block_when) ----------
   The overview split, mirrored: the copy on the left (6fr), the page's second photo on the right (5fr),
   with the same 64px gap and 16px corners, so the two sections zig-zag. The copy column holds the
   heading, the lead-in directly above the list it introduces, the occasions as ruled rows with a blue
   line icon (two across, or one across for a short list of long labels) and the button at its foot,
   level with the foot of the photo. The photo takes the height of the copy column (never flatter than
   16:9). Phones show the checklist without the photo. */
.frv-when__grid {
    display: grid;
    gap: 32px;
}

.frv-when__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.frv-when .frv-display-md {
    margin: 0;
    text-wrap: balance;
}

.frv-when__lead {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--frv-ink-500);
}

.frv-when__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 40px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.frv-when__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #dde2ec;
    font-size: 16.5px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -.005em;
    color: var(--frv-ink);
}

.frv-when__item:first-child {
    border-top: 1px solid #dde2ec;
}

/* balanced lines: a two-line label breaks near its middle, not after a hyphen at the line end */
.frv-when__item span {
    min-width: 0;
    text-wrap: balance;
}

/* a hyphenated word is one box (inline-block, not just nowrap: line balancing then still breaks
   cleanly either side of it) */
.frv-when__nb {
    display: inline-block;
    white-space: nowrap;
}

.frv-when__item svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--frv-brand);
}

.frv-when .frv-when__actions {
    margin-top: auto;
    padding-top: 32px;
}

.frv-when__media {
    position: relative;
    display: none;
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #e9edf5;
}

.frv-when__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 640px) {
    .frv-when__list--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .frv-when__list--2 .frv-when__item:nth-child(2) {
        border-top: 1px solid #dde2ec;
    }

    .frv-when__media {
        display: block;
    }
}

@media (min-width: 1024px) {
    .frv-when__grid {
        grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
        gap: 64px;
        align-items: stretch;
    }

    .frv-when__grid--solo {
        grid-template-columns: minmax(0, 1fr);
    }

    .frv-when__media {
        align-self: stretch;
        aspect-ratio: auto;
        min-height: 0;
    }

    /* the photo follows the height of the copy column, and is never flatter than 16:9: this spacer
       holds that height open in the row */
    .frv-when__media::before {
        content: "";
        display: block;
        padding-top: 56.25%;
    }
}