/* Rhu Law Chambers - site styles layered over the template stylesheet.
   Palette taken from the logo: navy #2A4173, a warm brass accent and ivory. */

:root,
.navbar {
    --dark-primary: #2a4173 !important;
    --paragraph-color: #4a5468 !important;
    --gray: #c3cad6 !important;
    --light-gray: #f7f5f0 !important;
    --dark-primary-20: #2a417333 !important;
}
:root {
    --rlc-brass: #b8893b;
    --rlc-brass-light: #d9ad5e;
    --rlc-brass-dark: #8a6520;
    --rlc-line: rgba(42, 65, 115, 0.16);
    --rlc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- base ---------- */
body { overflow-x: hidden; }
a, .w-button, .nav-link, .service-link, .team-member-name-link, .footer-link { text-transform: none; }
.w-webflow-badge { display: none !important; }
:focus-visible { outline: 2px solid var(--rlc-brass-light); outline-offset: 3px; }
/* the template animates this variable on <html> while scrolling; keep overlays on navy */
.banner-image-overlay, .cta-overlay { --dark-primary-transparent: #2a417300 !important; }

/* ---------- entrance motion (CSS only, so content never waits for scripts) ---------- */
.rlc-rise { animation: rlc-rise 0.9s var(--rlc-ease) both; animation-delay: var(--d, 0s); }
@keyframes rlc-rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to   { opacity: 1; transform: none; }
}

/* ---------- header ---------- */
.brand, .brand-tablet { height: auto; }
.brand-logo {
    height: 46px !important; width: auto !important; max-width: none !important;
    transition: height 0.3s var(--rlc-ease);
}
.navbar:not(.white) {
    background-color: transparent !important;
    border-bottom: 1px solid transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.navbar:not(.white).rlc-nav-docked {
    background-color: rgba(42, 65, 115, 0.95) !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom-color: rgba(184, 137, 59, 0.38);
    box-shadow: 0 10px 30px rgba(10, 18, 40, 0.3);
    padding-top: 9px;
    padding-bottom: 9px;
}
.navbar.rlc-nav-docked .nav-menu-wrapper > .brand .brand-logo { height: 40px !important; }
.nav-link.w--current { color: var(--rlc-brass-light); }
@media (min-width: 992px) and (max-width: 1279px) {
    .nav-link { padding-left: 12px; padding-right: 12px; }
    .brand-logo { height: 40px !important; }
}
@media (max-width: 991px) {
    .brand-logo { height: 40px !important; }
    .brand-tablet { filter: none; }
    .brand-tablet .brand-logo { height: 34px !important; }
}
@media (max-width: 479px) {
    .nav-menu-wrapper > .brand .brand-logo { height: 36px !important; }
}

/* ---------- home hero ---------- */
.home-banner-section { overflow: hidden; }
/* the hero always fills the screen: the headline sits centred above the benefits and the team card,
   which stay on the bottom edge (phones keep their own stacked layout, which is already taller) */
@media (min-width: 768px) {
    .home-banner-section { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
    .home-banner-section > .base-container { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; }
    .home-banner-section > .base-container::before,
    .home-banner-section > .base-container::after { display: none; }
    .home-banner-wrap { flex: 1 0 auto; }
    .home-banner-left-wrap { align-self: stretch; }
    .home-banner-title-wrap { margin-top: auto; margin-bottom: auto; }
}
/* one smooth navy fade over the photo, plus a lower fade so the benefit text stays readable */
@media (min-width: 768px) {
    .home-banner-gradient {
        width: 70%;
        background-image: linear-gradient(90deg, var(--dark-primary) 0%, rgba(42, 65, 115, 0.72) 32%, rgba(42, 65, 115, 0) 100%);
    }
    .home-banner-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background-image: linear-gradient(0deg, rgba(42, 65, 115, 0.85), rgba(42, 65, 115, 0) 45%);
        pointer-events: none;
    }
}
.home-banner-image { opacity: 1 !important; transform: none !important; translate: none !important; }
/* moving city: the still frame shows first and the video fades in once it is actually playing */
.rlc-hero-video {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0;
    transition: opacity 1.4s ease;
    pointer-events: none;
}
.rlc-hero-video.is-playing { opacity: 1; }
.rlc-eyebrow {
    color: var(--rlc-brass-light) !important;
    font-size: 14px;
    letter-spacing: 0.18em;
    margin-bottom: 22px;
}
.home-h1-wrapper { max-width: 640px; }
.home-banner-section h1 {
    font-size: clamp(2.6rem, 1.4rem + 3.7vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.home-banner-paragraph-wrap { max-width: 520px; }
.banner-clients-text { max-width: 290px; line-height: 1.5; }
/* the scales icon ships dark; render every hero benefit icon white like the shield */
.home-banner-section .benefit-icon { filter: brightness(0) invert(1); }
.rlc-card-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--dark-primary);
    font-weight: 500;
    border-bottom: 1px solid var(--rlc-brass);
    padding-bottom: 2px;
}
.rlc-card-link:hover { color: var(--rlc-brass-dark); }

/* ---------- inner page banners ---------- */
.rlc-banner .central-banner-text-wrapper { max-width: 880px; }
.rlc-banner h1 {
    font-size: clamp(2.4rem, 1.5rem + 2.8vw, 4.25rem);
    line-height: 1.08;
}
.rlc-banner .center-paragraph-wrapper { max-width: 640px; }
.rlc-banner .label, .contact-us-page .label { color: var(--rlc-brass-light) !important; letter-spacing: 0.18em; font-size: 14px; }

/* ---------- shared bits ---------- */
.label { letter-spacing: 0.12em; }
.label.text-white, .stage-wrapper .service-number { color: var(--rlc-brass-light) !important; }
.service-number, .banner-clients-number { color: var(--rlc-brass-dark) !important; }
.process-line, .service-detailed-card-icon-wrap { background-color: var(--rlc-brass) !important; }
.primary-button:hover, .light-primary-button:hover, .secondary-button:hover {
    background-color: var(--rlc-brass-dark) !important;
    background-image: none !important;
    border-color: var(--rlc-brass-dark) !important;
    color: #fff !important;
}
.rlc-lead { font-size: 20px; line-height: 1.6; max-width: 760px; }
.services-wrap > .w-dyn-list { display: flex; flex-direction: column; }
.services-wrap > .w-dyn-list > .w-dyn-items { flex: 1; display: flex; flex-direction: column; }
.services-wrap .service-collection-item { flex: 1; }
/* enquiry banner copy sits on a photo: lift it to a readable size and tone */
.cta-paragraph-wrap .light-text { color: #e4e8f0; font-size: 18px; line-height: 1.55; }
/* enquiry banner photo: keep the faces in frame on wide screens */
.cta-image { object-position: 50% 30%; }
.rlc-team-title { max-width: 620px; }
.section-title-wrap.rlc-wide { max-width: 820px; }
.ceo-quote-card { height: auto !important; min-height: 400px; }
@media (min-width: 992px) { .home-process-block-left-wrap { padding-bottom: 64px; } }
.section.process-section.rlc-vision { padding-top: var(--_spacing-system---spacing--section-spacing); }
.rlc-vision h2 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.75rem); }
@media (min-width: 992px) { .rlc-vision .process-image { margin-top: 520px; } }
/* boardroom: keep the skyline and the seated team in frame; on phones, centre the three on the left */
.rlc-vision .process-image { object-position: 50% 50%; }
@media (max-width: 767px) { .rlc-vision .process-image { object-position: 24% 50%; } }
.testimonial-tab-link.w--current .commitment-tab-label { color: var(--rlc-brass-dark) !important; }
.commitment-tab-label {
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; white-space: nowrap; line-height: 1.2;
}

/* ---------- vision & purpose ---------- */
.rlc-purposes { display: flex; flex-direction: column; }
.rlc-purpose {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px 80px;
    padding: 56px 0;
    border-top: 1px solid var(--rlc-line);
}
.rlc-purpose:last-child { border-bottom: 1px solid var(--rlc-line); }
.rlc-purpose-num {
    font-family: var(--_typography---fonts--headings);
    color: var(--rlc-brass-dark);
    font-size: 24px;
    line-height: 1;
    margin-bottom: 18px;
}
.rlc-purpose-title {
    font-family: var(--_typography---fonts--headings);
    color: var(--dark-primary);
    font-size: clamp(1.75rem, 1.2rem + 1.3vw, 2.4rem);
    line-height: 1.2;
}
.rlc-purpose-body p { font-size: 18px; line-height: 1.7; }
.rlc-purpose-body p + p { margin-top: 16px; }
.rlc-purpose-body p:first-child { color: var(--dark-primary); font-weight: 400; }

/* ---------- areas of expertise: each area opens its explanation ---------- */
.rlc-area-list { border-top: 1px solid var(--rlc-line); }
.rlc-area { border-bottom: 1px solid var(--rlc-line); scroll-margin-top: 110px; }
.rlc-area-name {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    list-style: none;
    cursor: pointer;
    color: var(--dark-primary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.2s ease;
}
.rlc-area-name::-webkit-details-marker { display: none; }
.rlc-area-name::before { content: "\2014"; flex: none; color: var(--rlc-brass); }
.rlc-area-name::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    margin-left: auto;
    background:
        linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
    color: var(--rlc-brass);
    transition: transform 0.3s var(--rlc-ease), opacity 0.2s ease;
}
.rlc-area[open] > .rlc-area-name { font-weight: 500; }
.rlc-area[open] > .rlc-area-name::after { transform: rotate(45deg); }
@media (hover: hover) { .rlc-area-name:hover { color: var(--rlc-brass-dark); } }
.rlc-area-body { padding: 0 40px 24px 32px; }
.rlc-area-body p { font-size: 16px; line-height: 1.7; color: var(--paragraph-color); }
/* the firm's own write-up for each area: paragraphs, bullet lists and the odd sub-heading */
.rlc-area-text > * { margin: 0; }
.rlc-area-text > * + * { margin-top: 14px; }
/* the template paints every ul as clipped gradient text in a flex column; these lists need plain text */
.rlc-area-text ul {
    display: block;
    padding: 0;
    list-style: none;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}
.rlc-area-text li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.65; color: var(--paragraph-color); }
.rlc-area-text li + li { margin-top: 8px; }
.rlc-area-text li::before { content: "\2013"; position: absolute; top: 0; left: 0; color: var(--rlc-brass); font-weight: 400; }
.rlc-area-text strong { color: var(--dark-primary); font-weight: 600; }
.rlc-area-text .rlc-area-sub {
    margin-top: 24px;
    font-family: Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rlc-brass-dark);
}
.rlc-area-text .rlc-area-sub + ul { margin-top: 10px; }
.rlc-area[open] .rlc-area-body { animation: rlc-area-in 0.35s var(--rlc-ease) both; }
.rlc-area-link {
    display: inline-block;
    margin-top: 14px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--rlc-brass);
    color: var(--dark-primary);
    font-weight: 500;
}
.rlc-area-link:hover { color: var(--rlc-brass-dark); }
.rlc-area-panel { display: none; }
/* sections with sticky columns clip without becoming a scroll container, so position: sticky follows the page */
.rlc-clip { overflow: clip; }
@keyframes rlc-area-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* wide screens: the list on the left, the open area explained in a column beside it */
@media (min-width: 992px) {
    .rlc-areas.is-ready { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
    .rlc-areas.is-ready .rlc-area-body { display: none; }
    .rlc-areas.is-ready .rlc-area-name { padding: 15px 0; }
    .rlc-areas.is-ready .rlc-area-name::after {
        width: 9px;
        height: 9px;
        margin-right: 4px;
        background: none;
        border-top: 1.5px solid currentColor;
        border-right: 1.5px solid currentColor;
        transform: rotate(45deg);
        opacity: 0;
    }
    .rlc-areas.is-ready .rlc-area-name:hover::after { opacity: 0.5; }
    .rlc-areas.is-ready .rlc-area[open] > .rlc-area-name { color: var(--dark-primary); }
    .rlc-areas.is-ready .rlc-area[open] > .rlc-area-name::after { opacity: 1; color: var(--rlc-brass); transform: rotate(45deg); }
    .rlc-areas.is-ready .rlc-area-panel {
        display: block;
        position: sticky;
        top: 120px;
        overflow: hidden;
        border-radius: 8px;
        background-color: var(--light-gray);
    }
    /* long write-ups scroll inside the panel, so the panel never runs past the screen */
    .rlc-area-scroll {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        padding: 48px 52px 52px;
        scrollbar-width: thin;
        scrollbar-color: rgba(42, 65, 115, 0.25) transparent;
    }
    .rlc-area-panel::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 72px;
        background: linear-gradient(rgba(247, 245, 240, 0), var(--light-gray) 85%);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .rlc-area-panel.has-more::after { opacity: 1; }
    .rlc-area-count { font-size: 13px; letter-spacing: 0.16em; color: var(--rlc-brass-dark) !important; }
    .rlc-area-title { margin: 14px 0 20px; font-size: 2.25rem; line-height: 1.2; color: var(--dark-primary); }
    .rlc-area-panel .rlc-area-text { max-width: 600px; }
    .rlc-area-panel .rlc-area-text p, .rlc-area-panel .rlc-area-text li { font-size: 17px; line-height: 1.7; }
    .rlc-area-panel .w-button { display: inline-flex; width: auto; margin-top: 32px; }
    .rlc-area-panel.is-in .rlc-area-scroll > * { animation: rlc-area-in 0.4s var(--rlc-ease) both; }
    .rlc-area-panel.is-in .rlc-area-scroll > :nth-child(2) { animation-delay: 0.04s; }
    .rlc-area-panel.is-in .rlc-area-scroll > :nth-child(3) { animation-delay: 0.08s; }
    .rlc-area-panel.is-in .rlc-area-scroll > :nth-child(4) { animation-delay: 0.12s; }
}
@media (prefers-reduced-motion: reduce) {
    .rlc-area[open] .rlc-area-body, .rlc-area-panel.is-in .rlc-area-scroll > * { animation: none; }
}
.rlc-expertise-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    margin-top: 56px;
    padding: 32px 40px;
    border-radius: 8px;
    background-color: var(--light-gray);
}
.rlc-expertise-foot p { max-width: 620px; font-size: 18px; color: var(--dark-primary); font-weight: 400; }

/* ---------- our team ---------- */
/* portraits crop from the bottom when a card is wider than 4:5, never from the head */
.team-member-photo { object-position: 50% 0%; }
.team-page-collection-list .team-member-link-block { height: 440px; }
/* white-backdrop portraits need an edge so every card reads as a card */
.team-page-collection-list .team-member-link-block, .rlc-profile-photo { border: 1px solid var(--rlc-line); }
.team-page-collection-list .team-member-name-wrap p { color: var(--paragraph-color); }
.rlc-profiles { display: flex; flex-direction: column; }
.rlc-profile {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 72px;
    padding: 72px 0;
    border-top: 1px solid var(--rlc-line);
    scroll-margin-top: 90px;
}
.rlc-profile:first-child { border-top: 0; padding-top: 0; }
.rlc-profile-photo {
    width: 100%;
    height: auto; /* the img's height attribute would otherwise force 1125px */
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 15%;
    border-radius: 8px;
    position: sticky;
    top: 110px;
}
.rlc-profile-name {
    font-family: var(--_typography---fonts--headings);
    color: var(--dark-primary);
    font-size: clamp(2rem, 1.5rem + 1.2vw, 2.6rem);
    line-height: 1.15;
    margin: 12px 0 28px;
}
.rlc-profile-text p { font-size: 17px; line-height: 1.75; }
.rlc-profile-text p + p { margin-top: 16px; }
.rlc-back-top { display: inline-block; margin-top: 28px; font-size: 15px; color: var(--paragraph-color); border-bottom: 1px solid var(--rlc-line); }
.rlc-back-top:hover { color: var(--dark-primary); }

/* ---------- enquiry ---------- */
.rlc-form select.text-field {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c3cad6' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}
.rlc-form select.text-field option { color: #1d2433; }
.rlc-form .text-field { width: 100%; }
.rlc-consent {
    display: flex; gap: 12px; align-items: flex-start;
    color: var(--light-gray); font-size: 15px; line-height: 1.5; font-weight: 300;
    text-transform: none; cursor: pointer;
}
.rlc-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--rlc-brass); }
.rlc-form-note { color: var(--gray); font-size: 14px; line-height: 1.55; }
.rlc-form-status { width: 100%; padding: 14px 16px; border-radius: 6px; font-size: 15px; line-height: 1.5; color: #fff; }
.rlc-form-status[hidden] { display: none; }
.rlc-form-status.is-success { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(217, 173, 94, 0.7); }
.rlc-form-status.is-error { background: rgba(176, 58, 46, 0.2); border: 1px solid rgba(232, 120, 105, 0.75); }
.rlc-form-status a { color: #fff; text-decoration: underline; font-size: inherit; }
.rlc-form [type="submit"][disabled] { opacity: 0.6; cursor: progress; }
.rlc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contacts-links-wrap { display: flex; flex-direction: column; gap: 14px; }
.contact-us-page .contacts-banner-left-wrap { justify-content: flex-start; gap: 40px; }
@media (min-width: 992px) and (max-width: 1279px) {
    /* give the form room so two-column fields don't truncate on small laptops */
    .contact-us-page .contacts-banner-left-wrap { width: 44%; }
    .contact-us-page .form-block { width: 54%; }
}
.rlc-map-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.rlc-map-text { display: flex; flex-direction: column; gap: 22px; }
.rlc-map-text address { font-style: normal; font-size: 19px; line-height: 1.6; color: var(--dark-primary); }
.rlc-map {
    width: 100%; height: 440px; border: 0; border-radius: 8px;
    background-color: var(--light-gray);
}

/* ---------- footer ---------- */
.footer-brand { height: auto; }
.footer-logo { height: 56px !important; width: auto !important; max-width: none !important; }
.footer-form-title { max-width: 560px; }
.rlc-footer-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-bottom-wrapper { color: var(--gray); font-size: 14px; }
.footer-link { white-space: nowrap; }
@media (min-width: 992px) {
    .footer-brand-wrapper { width: 40%; }
    .footer-right-wrap { width: 52%; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .ceo-quote-card { min-height: 0; gap: 32px; }
    .banner-clients-card-top-wrap { flex-wrap: wrap; }
    .rlc-profile { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
    .rlc-map-wrap { grid-template-columns: 1fr; gap: 32px; }
    .footer-logo { height: 48px !important; }
}
@media (max-width: 767px) {
    .rlc-purpose { grid-template-columns: 1fr; padding: 40px 0; gap: 16px; }
    .rlc-expertise-foot { padding: 28px 24px; }
}
@media (max-width: 479px) {
    .rlc-lead, .rlc-purpose-body p { font-size: 17px; }
    .rlc-map { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .rlc-hero-video { display: none; }
    .rlc-rise { animation-duration: 1ms !important; animation-delay: 0s !important; }
    .navbar:not(.white), .brand-logo { transition: none; }
}
.rlc-strong { color: var(--dark-primary); font-weight: 400; }
.rlc-about-block .about-block-top-wrapper { border-bottom: 0; padding-bottom: 0; }
.rlc-anchor { scroll-margin-top: 40px; }
.rlc-inline { align-self: flex-start; }
.rlc-sent { display: none; }
.rlc-sent:target { display: block; }
.rlc-404 { min-height: 70vh; display: flex; align-items: center; }
.rlc-center { justify-content: center; margin-top: 16px; }
.rlc-fade { animation: rlc-fade 0.9s var(--rlc-ease) both; animation-delay: var(--d, 0s); }
@keyframes rlc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rlc-fade { animation-duration: 1ms !important; animation-delay: 0s !important; } }

/* =====================================================================
   Phones and tablets
   ===================================================================== */
html { -webkit-tap-highlight-color: rgba(184, 137, 59, 0.18); }
html.rlc-menu-open, html.rlc-menu-open body { overflow: hidden; }
@media (min-width: 992px) { .rlc-menu-contact { display: none; } }

/* section buttons beside a heading keep their size */
.horizontal-title-wrap > .mobile-hidden-wrap { flex-shrink: 0; }
.horizontal-title-wrap .w-button { white-space: nowrap; }

/* full-screen navy menu */
@media (max-width: 991px) {
    /* webflow pins the overlay to the width measured before the scroll lock hides the scrollbar */
    .w-nav[data-animation="over-left"] .w-nav-overlay { width: 100% !important; }
    .nav-menu {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        background-color: var(--dark-primary);
        text-align: left;
        overflow-y: auto;
    }
    .tablet-menu { height: 72px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .close-menu-button, .close-menu-button.w--open { padding: 12px !important; margin: 0 -12px 0 0 !important; }
    .nav-close-icon { filter: brightness(0) invert(1); width: 20px; }
    .menu-wrap { background-color: transparent; padding: 8px 20px 40px; }
    .nav-link, .nav-link.w--current {
        color: #fff;
        font-family: var(--_typography---fonts--headings);
        font-size: 28px;
        line-height: 1.2;
        padding: 18px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .nav-link.w--current { color: var(--rlc-brass-light); }
    .nav-link:hover { color: var(--rlc-brass-light); }
    .nav-button-tablet { margin-top: 32px; }
    .nav-button-tablet .primary-button {
        width: 100%;
        padding: 18px 24px;
        background-color: #fff;
        background-image: none;
        color: var(--dark-primary);
        box-shadow: none;
        font-size: 17px;
    }
    .rlc-menu-contact { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
    .rlc-menu-contact a { display: flex; align-items: center; gap: 12px; color: var(--gray); font-size: 16px; font-weight: 400; }
    .rlc-menu-contact img { height: 18px; }
    .rlc-back-top { padding: 6px 0; }
    .ceo-quote-text { max-width: 600px; }
}

/* home hero: on phones the skyline sits at the top and the copy rises out of it */
@media (max-width: 767px) {
    .home-banner-section { padding-top: clamp(250px, 56vw + 70px, 400px); padding-bottom: 56px; }
    .home-banner-bg { inset: 0 0 auto 0; width: 100%; max-width: none; height: clamp(330px, 66vw + 110px, 520px); }
    .home-banner-image { height: 100%; object-position: 70% 45%; }
    .rlc-hero-video { object-position: 70% 45%; }
    .home-banner-gradient {
        inset: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(180deg, rgba(42, 65, 115, 0.55) 0%, rgba(42, 65, 115, 0) 24%, rgba(42, 65, 115, 0) 50%, var(--dark-primary) 97%);
    }
    .rlc-eyebrow { margin-bottom: 14px; }
    .home-banner-left-wrap { gap: 48px; }

    /* vision: button sits under the heading */
    .home-process-block-left-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }

    /* Quality / Trust / Integrity as a segmented control */
    .testimonials-tabs { flex-direction: column; }
    .testimonials-tabs-menu { flex-direction: row; align-items: stretch; gap: 6px; margin: 0; padding: 6px; border-right: 0; border-bottom: 1px solid var(--rlc-line); }
    .testimonial-tab-link, .testimonial-tab-link.first, .testimonial-tab-link.last {
        flex: 1 1 0;
        width: auto;
        padding: 12px 4px;
        border-bottom: 0;
        border-radius: 6px;
        background-color: transparent;
        justify-content: center;
    }
    .testimonial-tab-link.w--current { background-color: var(--dark-primary); }
    .testimonial-tab-link.w--current .commitment-tab-label { color: #fff !important; }
    .commitment-tab-label { font-size: 13px; letter-spacing: 0.12em; }
    .testimonial-text-wrap { padding: 36px 32px 0; }
    .testimonial-image-wrap { height: 300px; }

    /* team page: two portraits per row */
    .team-page-collection-list { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 28px; }
    .team-page-collection-list .team-member-link-block { height: auto; aspect-ratio: 4 / 5; }
    .team-page-collection-list .team-member-card-info-wrap { padding-top: 12px; }
    .team-page-collection-list .team-member-name-link { font-size: 18px; line-height: 1.3; }
    .team-page-collection-list .team-member-name-wrap p { font-size: 14px; line-height: 1.4; }

    /* profiles: small portrait beside the name, biography full width below */
    .rlc-profile { grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; row-gap: 0; padding: 44px 0; align-items: center; }
    .rlc-profile:first-child { padding-top: 0; }
    .rlc-profile > div:first-child { grid-row: 1 / span 2; }
    .rlc-profile > div:last-child { display: contents; }
    .rlc-profile-photo { position: static; width: 88px; border-radius: 8px; }
    .rlc-profile .label { grid-column: 2; align-self: end; font-size: 12px; }
    .rlc-profile-name { grid-column: 2; align-self: start; margin: 6px 0 0; font-size: 1.6rem; }
    .rlc-profile-text, .rlc-back-top { grid-column: 1 / -1; justify-self: start; }
    .rlc-profile-text { margin-top: 24px; }
    .rlc-profile-text p { font-size: 16px; line-height: 1.7; }
}

/* large phones and small tablets: a bigger portrait and a full-width intro */
@media (min-width: 480px) and (max-width: 767px) {
    .rlc-profile { grid-template-columns: 120px minmax(0, 1fr); column-gap: 24px; }
    .rlc-profile-photo { width: 120px; }
    .rlc-about-block .about-paragraph-wrap { max-width: none; }
}

@media (max-width: 479px) {
    h2 { font-size: 2rem; line-height: 1.18; }
    .service-link, .stage-title { font-size: 22px; }
    .testimonial-text { font-size: 19px; }
    .ceo-quote-text { font-size: 18px; }
    .label { font-size: 13px; }

    /* inner page banners read left-aligned on a phone */
    .rlc-banner .central-banner-wrap { justify-content: flex-start; }
    .rlc-banner .central-banner-text-wrapper, .rlc-banner .central-banner-text { align-items: flex-start; text-align: left; }
    .rlc-banner .center-paragraph-wrapper { max-width: none; }
    .rlc-banner h1 { font-size: 2.2rem; }
    .rlc-404 .home-banner-button-wrapper { width: 100%; }

    /* home team: both partners side by side */
    .team-collection-list { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 24px; }
    .team-collection-list .team-member-link-block { height: auto; aspect-ratio: 4 / 5; }
    .team-collection-list .team-member-card-info-wrap { padding-top: 12px; }
    .team-collection-list .team-member-name-link { font-size: 17px; line-height: 1.3; }
    .team-collection-list .team-member-name-wrap p { font-size: 13px; line-height: 1.4; }

    /* segmented control: tighter on small phones */
    .commitment-tab-label { font-size: 12px; }
    .testimonial-text-wrap { padding: 28px 22px 0; }
    .testimonial-image-wrap { height: 220px; }

    .rlc-area-name { padding: 14px 0; font-size: 17px; }
    .rlc-area-body { padding: 0 8px 22px 31px; }
}

/* =====================================================================
   Home hero on phones: benefits side by side, team card full width
   ===================================================================== */
@media (max-width: 767px) {
    .banner-benefits-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .benefit-cell, .benefit-cell.last { padding: 0; border: 0; gap: 14px; }
    .benefit-cell:not(.last) { padding-right: 20px; border-right: 1px solid rgba(255, 255, 255, 0.2); }
    .benefit-cell.last { padding-left: 20px; }
    .home-banner-clients-wrap { width: 100%; max-width: none; }
    .banner-clients-card-top-wrap { flex-wrap: nowrap; }
    .banner-clients-text { max-width: none; }
}

/* =====================================================================
   Footer on phones and tablets: left-aligned and grouped
   ===================================================================== */
@media (min-width: 992px) {
    .rlc-footer-contact-title, .footer-address-link .rlc-pin { display: none; }
}
@media (max-width: 991px) {
    .footer-wrapper {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
        grid-template-areas:
            "logo logo logo"
            "title title title"
            "cta cta cta"
            "firm clients contact";
        column-gap: 32px;
        row-gap: 0;
        justify-items: start;
        text-align: left;
        margin-bottom: 0;
    }
    .footer-brand-wrapper, .footer-right-wrap, .footer-links-wrap { display: contents; text-align: left; }
    .footer-logo-wrapper { grid-area: logo; width: auto; align-items: flex-start; margin-bottom: 32px; }
    .footer-form-title-wrap { grid-area: title; max-width: 560px; }
    .footer-form-title { font-size: 32px; line-height: 1.25; text-align: left; }
    .rlc-footer-actions {
        grid-area: cta;
        justify-self: stretch;
        justify-content: flex-start;
        margin-top: 28px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }
    .footer-links-wrapper { align-items: flex-start; text-align: left; gap: 12px; padding-top: 40px; }
    .footer-links-wrapper:first-child { grid-area: firm; }
    .footer-links-wrapper:last-child { grid-area: clients; }
    .footer-contacts-wrap { grid-area: contact; margin-top: 0; padding-top: 40px; gap: 12px; align-items: flex-start; }
    .footer-intro-title {
        font-family: var(--_typography---fonts--primary);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--rlc-brass-light);
    }
    .links-column, .footer-contacts-wrapper, .footer-contacts-column { gap: 0; }
    .footer-link, .footer-contact-link-block { justify-content: flex-start; padding: 7px 0; font-size: 16px; line-height: 1.5; white-space: normal; }
    .footer-contact-link-block { gap: 12px; }
    .footer-address-link {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 7px 0;
        font-family: var(--_typography---fonts--primary);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
    }
    .footer-address-link .rlc-pin { flex: none; margin-top: 3px; }
    .footer-bottom-wrapper {
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 6px 24px;
        margin-top: 48px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
    .footer-rights { justify-content: flex-start; text-align: left; font-size: 13px; }
}
@media (max-width: 767px) {
    .footer-wrapper {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            "logo logo"
            "title title"
            "cta cta"
            "firm clients"
            "contact contact";
        column-gap: 24px;
    }
    .footer-form-title { font-size: 28px; }
    .footer-bottom-wrapper { flex-direction: column; }
}
@media (max-width: 479px) {
    .footer-form-title { font-size: 26px; }
    .footer-logo { height: 44px !important; }
}

/* =====================================================================
   Language switch (EN / 中文) and the Chinese pages
   ===================================================================== */
.rlc-lang {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 0 20px 0 0;
    padding: 0 14px 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    color: #fff;
    font-family: Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.rlc-lang:hover { color: var(--rlc-brass-light); border-color: var(--rlc-brass-light); }
.rlc-lang-icon { flex: none; width: 15px; height: 15px; }
.rlc-menu-contact .rlc-lang-icon { width: 18px; height: 18px; }
/* small laptops: the header is full, so the switch drops its globe and the menu tightens a little */
@media (min-width: 992px) and (max-width: 1199px) {
    .rlc-lang { margin-right: 14px; padding: 0 12px; }
    .rlc-lang-icon { display: none; }
    .nav-link { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 991px) {
    .rlc-lang { height: 34px; margin: 0 16px 0 auto; padding: 0 12px 0 10px; }
    .menu-button { flex: none; }
}
@media (max-width: 379px) {
    .rlc-lang { margin-right: 12px; padding: 0 10px; }
    .rlc-lang-icon { display: none; }
}

/* footer credit */
.footer-rights.rlc-credit { display: block; }
.rlc-credit a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(195, 202, 214, 0.45);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.rlc-credit a:hover { color: #fff; text-decoration-color: currentColor; }

/* Chinese: a serif for headings that sits with Playfair Display, the system's own Chinese font for text.
   The template sets these on body as well, once per breakpoint. */
html[lang|="zh"],
html[lang|="zh"] body {
    --_typography---fonts--headings: "Playfair Display", "Noto Serif SC", "Songti SC", "STSong", serif;
    --_typography---fonts--primary: Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
}
html[lang|="zh"] .rlc-area-text .rlc-area-sub { font-family: var(--_typography---fonts--primary); }
/* Chinese lines can break between any two characters: even out headings, avoid a lone last character */
html[lang|="zh"] h1, html[lang|="zh"] h2, html[lang|="zh"] h3, html[lang|="zh"] h4 {
    text-wrap: balance;
    word-break: keep-all;      /* break at punctuation and the <wbr> hints in zh.json, not inside a word */
    overflow-wrap: break-word; /* ...unless a line would not fit at all */
}
html[lang|="zh"] p, html[lang|="zh"] li { text-wrap: pretty; }
html[lang|="zh"] .home-banner-section h1 { line-height: 1.12; letter-spacing: 0; }