.elementor-2064 .elementor-element.elementor-element-7b710b7{width:var( --container-widget-width, 101.703% );max-width:101.703%;--container-widget-width:101.703%;--container-widget-flex-grow:0;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-b8a2d72 *//* =========================================================
   ROXO LAW
   GLOBAL VARIABLES
========================================================= */

:root {

    --roxo-plum: #654c61;
    --roxo-rose: #c58e9b;

    --deep-black: #121113;
    --charcoal: #191719;

    --ivory: #f5f1ed;
    --white: #ffffff;

    --text-light: #e8e3e5;
    --text-muted: #aaa3a8;

    --border-dark: rgba(255,255,255,0.12);

    --transition: 0.35s ease;

}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "DM Sans", sans-serif;
    background: var(--deep-black);
    color: var(--white);
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 100;

    padding: 28px 0;

}


.header-container {

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


/* =========================================================
   LOGO
========================================================= */

.brand {

    width: 190px;

    flex-shrink: 0;

}


.brand-logo {

    width: 100%;

    height: auto;

}


/* =========================================================
   NAVIGATION
========================================================= */

.main-navigation {

    display: flex;

    align-items: center;

    gap: 34px;

    margin-left: auto;

}


.main-navigation a {

    position: relative;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.78);

    transition: color var(--transition);

}


.main-navigation a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--roxo-rose);

    transition: width var(--transition);

}


.main-navigation a:hover {

    color: var(--white);

}


.main-navigation a:hover::after {

    width: 100%;

}


/* =========================================================
   HEADER CTA
========================================================= */

.header-cta {

    padding: 13px 20px;

    border: 1px solid rgba(197,142,155,0.65);

    color: var(--white);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition: all var(--transition);

}


.header-cta:hover {

    background: var(--roxo-plum);

    border-color: var(--roxo-plum);

}


/* =========================================================
   HERO
========================================================= */

.hero {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 75% 40%,
            rgba(101,76,97,0.22),
            transparent 32%
        ),

        linear-gradient(
            115deg,
            #111012 0%,
            #181518 55%,
            #211b20 100%
        );

}


/* =========================================================
   HERO BACKGROUND DETAILS
========================================================= */

.hero-background {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.hero-background::before {

    content: "";

    position: absolute;

    top: 0;
    right: 17%;

    width: 1px;
    height: 100%;

    background: rgba(255,255,255,0.07);

}


.hero-background::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 17%;

    width: 55%;

    height: 1px;

    background: rgba(255,255,255,0.07);

}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero-container {

    position: relative;

    z-index: 2;

    width: min(1400px, calc(100% - 80px));

    min-height: 100vh;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    align-items: center;

    gap: 80px;

    padding-top: 100px;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

    max-width: 720px;

    padding-bottom: 30px;

}


.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

    color: var(--roxo-rose);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.25em;

}


.hero-eyebrow::before {

    content: "";

    width: 42px;

    height: 1px;

    background: var(--roxo-rose);

}


/* =========================================================
   HERO HEADING
========================================================= */

.hero h1 {

    max-width: 780px;

    font-family: "Playfair Display", serif;

    font-size: clamp(58px, 6vw, 94px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.035em;

    color: var(--ivory);

}


.hero h1 span {

    color: var(--roxo-rose);

    font-style: italic;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

    max-width: 550px;

    margin-top: 34px;

    font-size: 18px;

    line-height: 1.75;

    font-weight: 400;

    color: var(--text-muted);

}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-actions {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 42px;

}


.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    min-height: 52px;

    padding: 0 25px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition: all var(--transition);

}


/* Primary */

.button-primary {

    background: var(--roxo-plum);

    color: var(--white);

}


.button-primary span {

    font-size: 18px;

    transition: transform var(--transition);

}


.button-primary:hover {

    background: #795d74;

}


.button-primary:hover span {

    transform: translateX(5px);

}


/* Secondary */

.button-secondary {

    border: 1px solid rgba(255,255,255,0.22);

    color: var(--text-light);

}


.button-secondary:hover {

    border-color: var(--roxo-rose);

    color: var(--white);

}


/* =========================================================
   TRUST STATEMENT
========================================================= */

.hero-trust {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 70px;

}


.trust-line {

    width: 55px;

    height: 1px;

    background: var(--roxo-rose);

}


.hero-trust p {

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.48);

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {

    position: relative;

    height: 680px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* Large decorative circle */

.hero-circle {

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    border: 1px solid rgba(197,142,155,0.22);

}


.hero-circle::before {

    content: "";

    position: absolute;

    inset: 45px;

    border-radius: 50%;

    border: 1px solid rgba(197,142,155,0.12);

}


/* =========================================================
   HERO FRAME
========================================================= */

.hero-frame {

    position: relative;

    z-index: 2;

    width: 390px;

    height: 520px;

    padding: 14px;

    border: 1px solid rgba(197,142,155,0.35);

    transform: translateY(20px);

}


.hero-frame::before {

    content: "";

    position: absolute;

    top: -12px;
    right: -12px;

    width: 100%;
    height: 100%;

    border: 1px solid rgba(255,255,255,0.08);

}


/* Inner frame */

.hero-frame-inner {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 30px;

    background:

        linear-gradient(
            145deg,
            rgba(101,76,97,0.35),
            rgba(20,18,20,0.8)
        );

}


/* Frame number */

.frame-number {

    font-family: "Playfair Display", serif;

    font-size: 70px;

    font-weight: 400;

    color: rgba(255,255,255,0.12);

}


/* Frame label */

.frame-label {

    max-width: 180px;

    padding-top: 20px;

    border-top: 1px solid rgba(197,142,155,0.5);

    font-size: 10px;

    line-height: 1.7;

    letter-spacing: 0.2em;

    color: rgba(255,255,255,0.6);

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.hero-scroll {

    position: absolute;

    z-index: 5;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}


.hero-scroll span {

    font-size: 9px;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: rgba(255,255,255,0.35);

}


.scroll-line {

    width: 1px;

    height: 45px;

    background: linear-gradient(
        to bottom,
        var(--roxo-rose),
        transparent
    );

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .header-container,
    .hero-container {

        width: min(100% - 50px, 1400px);

    }


    .main-navigation {

        gap: 20px;

    }


    .main-navigation a {

        font-size: 11px;

    }


    .header-cta {

        display: none;

    }


    .hero-container {

        grid-template-columns: 1fr 0.8fr;

        gap: 30px;

    }


    .hero-visual {

        transform: scale(0.85);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .site-header {

        padding: 20px 0;

    }


    .header-container {

        width: calc(100% - 40px);

    }


    .brand {

        width: 165px;

    }


    .main-navigation {

        display: none;

    }


    .hero {

        min-height: auto;

        padding-bottom: 80px;

    }


    .hero-container {

        width: calc(100% - 40px);

        min-height: auto;

        padding-top: 150px;

        grid-template-columns: 1fr;

    }


    .hero-content {

        padding-bottom: 0;

    }


    .hero h1 {

        font-size: clamp(50px, 14vw, 72px);

    }


    .hero-description {

        font-size: 16px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .button {

        width: 100%;

    }


    .hero-trust {

        margin-top: 45px;

    }


    .hero-visual {

        height: 450px;

        margin-top: 30px;

        transform: none;

    }


    .hero-circle {

        width: 340px;

        height: 340px;

    }


    .hero-frame {

        width: 260px;

        height: 360px;

    }


    .frame-number {

        font-size: 50px;

    }


    .hero-scroll {

        display: none;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hero-container {

        padding-top: 130px;

    }


    .hero h1 {

        font-size: 48px;

    }


    .hero-eyebrow {

        font-size: 10px;

    }


    .hero-description {

        font-size: 15px;

    }


    .hero-visual {

        height: 390px;

    }


    .hero-circle {

        width: 290px;

        height: 290px;

    }


    .hero-frame {

        width: 225px;

        height: 320px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-063e37d *//* =========================================================
   EXPERIENCE / HERITAGE SECTION
========================================================= */

.experience-section {

    position: relative;

    background: var(--ivory);

    color: var(--deep-black);

    padding: 130px 0 120px;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.experience-container {

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

}


/* =========================================================
   SECTION LABEL
========================================================= */

.experience-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 75px;

    color: var(--roxo-plum);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

}


.experience-line {

    width: 42px;

    height: 1px;

    background: var(--roxo-plum);

}


/* =========================================================
   MAIN CONTENT
========================================================= */

.experience-main {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;

    align-items: center;

}


/* =========================================================
   LARGE NUMBER
========================================================= */

.experience-number {

    display: flex;

    align-items: flex-end;

    gap: 18px;

}


.experience-number .number {

    font-family: "Playfair Display", serif;

    font-size: clamp(150px, 17vw, 260px);

    font-weight: 400;

    line-height: 0.72;

    letter-spacing: -0.08em;

    color: var(--roxo-plum);

}


.number-caption {

    display: flex;

    flex-direction: column;

    padding-bottom: 4px;

    color: #777077;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.18em;

    line-height: 1.6;

}


.number-caption .plus {

    color: var(--roxo-rose);

    font-family: "Playfair Display", serif;

    font-size: 28px;

    line-height: 1;

}


/* =========================================================
   COPY
========================================================= */

.experience-copy {

    max-width: 650px;

}


.experience-copy h2 {

    max-width: 650px;

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 4.5vw, 68px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.035em;

    color: var(--deep-black);

}


.experience-copy h2 em {

    display: block;

    color: var(--roxo-plum);

    font-style: italic;

}


.experience-copy p {

    max-width: 580px;

    margin-top: 28px;

    color: #666166;

    font-size: 16px;

    line-height: 1.85;

}


.experience-copy p + p {

    margin-top: 16px;

}


/* =========================================================
   TEXT LINK
========================================================= */

.text-link {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 32px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--roxo-plum);

    color: var(--roxo-plum);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition: all var(--transition);

}


.text-link span {

    font-size: 18px;

    transition: transform var(--transition);

}


.text-link:hover {

    color: var(--roxo-rose);

    border-color: var(--roxo-rose);

}


.text-link:hover span {

    transform: translateX(6px);

}


/* =========================================================
   STATISTICS
========================================================= */

.experience-stats {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin-top: 120px;

    border-top: 1px solid rgba(101,76,97,0.25);

}


.experience-stat {

    min-height: 145px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 10px;

    padding: 20px 30px;

    border-right: 1px solid rgba(101,76,97,0.25);

}


.experience-stat:first-child {

    padding-left: 0;

}


.experience-stat:last-child {

    border-right: none;

}


.stat-number {

    font-family: "Playfair Display", serif;

    font-size: 45px;

    line-height: 1;

    color: var(--roxo-plum);

}


.stat-title {

    color: #777077;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.6;

    letter-spacing: 0.13em;

    text-transform: uppercase;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .experience-section {

        padding: 100px 0;

    }


    .experience-container {

        width: calc(100% - 50px);

    }


    .experience-main {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .experience-number {

        align-items: center;

    }


    .experience-number .number {

        font-size: 190px;

    }


    .experience-stats {

        grid-template-columns: repeat(2, 1fr);

    }


    .experience-stat:nth-child(2) {

        border-right: none;

    }


    .experience-stat:nth-child(3),
    .experience-stat:nth-child(4) {

        border-top: 1px solid rgba(101,76,97,0.25);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .experience-section {

        padding: 85px 0;

    }


    .experience-container {

        width: calc(100% - 40px);

    }


    .experience-label {

        margin-bottom: 55px;

        font-size: 9px;

    }


    .experience-number {

        gap: 12px;

    }


    .experience-number .number {

        font-size: 135px;

    }


    .number-caption {

        font-size: 8px;

    }


    .number-caption .plus {

        font-size: 22px;

    }


    .experience-main {

        gap: 55px;

    }


    .experience-copy h2 {

        font-size: 42px;

    }


    .experience-copy p {

        font-size: 15px;

        line-height: 1.75;

    }


    .experience-stats {

        grid-template-columns: 1fr;

        margin-top: 80px;

    }


    .experience-stat {

        min-height: 120px;

        padding: 25px 0;

        border-right: none;

        border-bottom: 1px solid rgba(101,76,97,0.25);

    }


    .experience-stat:nth-child(3),
    .experience-stat:nth-child(4) {

        border-top: none;

    }


    .experience-stat:last-child {

        border-bottom: none;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4068a7c *//* =========================================================
   EXPERTISE / PRACTICE AREAS
========================================================= */

.expertise-section {

    position: relative;

    background: var(--deep-black);

    color: var(--white);

    padding: 145px 0 150px;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.expertise-container {

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

    gap: 110px;

}


/* =========================================================
   INTRO
========================================================= */

.expertise-intro {

    position: sticky;

    top: 120px;

    align-self: start;

}


.expertise-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 45px;

    color: var(--roxo-rose);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

}


.expertise-line {

    width: 42px;

    height: 1px;

    background: var(--roxo-rose);

}


.expertise-intro h2 {

    max-width: 480px;

    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 5vw, 76px);

    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -0.04em;

}


.expertise-intro h2 em {

    display: block;

    color: var(--roxo-rose);

    font-style: italic;

}


.expertise-intro p {

    max-width: 430px;

    margin-top: 35px;

    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   EXPERTISE LINK
========================================================= */

.expertise-link {

    display: inline-flex;

    align-items: center;

    gap: 16px;

    margin-top: 35px;

    padding-bottom: 9px;

    border-bottom: 1px solid rgba(197,142,155,0.6);

    color: var(--white);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transition: all var(--transition);

}


.expertise-link span {

    color: var(--roxo-rose);

    font-size: 18px;

    transition: transform var(--transition);

}


.expertise-link:hover {

    color: var(--roxo-rose);

}


.expertise-link:hover span {

    transform: translate(4px, -4px);

}


/* =========================================================
   PRACTICE LIST
========================================================= */

.practice-list {

    border-top: 1px solid var(--border-dark);

}


/* =========================================================
   PRACTICE ITEM
========================================================= */

.practice-item {

    position: relative;

    min-height: 145px;

    display: grid;

    grid-template-columns: 60px 1fr 1fr 40px;

    align-items: center;

    gap: 25px;

    padding: 30px 0;

    border-bottom: 1px solid var(--border-dark);

    transition: all var(--transition);

}


/* Hover background */

.practice-item::before {

    content: "";

    position: absolute;

    top: 0;
    left: -30px;
    right: -30px;
    bottom: 0;

    background: rgba(101,76,97,0);

    z-index: -1;

    transition: background var(--transition);

}


.practice-item:hover::before {

    background: rgba(101,76,97,0.18);

}


/* =========================================================
   NUMBER
========================================================= */

.practice-number {

    align-self: start;

    padding-top: 7px;

    color: rgba(255,255,255,0.3);

    font-family: "Playfair Display", serif;

    font-size: 14px;

    transition: color var(--transition);

}


.practice-item:hover .practice-number {

    color: var(--roxo-rose);

}


/* =========================================================
   PRACTICE NAME
========================================================= */

.practice-name {

    font-family: "Playfair Display", serif;

    font-size: clamp(25px, 2.2vw, 35px);

    font-weight: 400;

    line-height: 1.08;

    color: var(--ivory);

    transition: transform var(--transition),
                color var(--transition);

}


.practice-item:hover .practice-name {

    color: var(--roxo-rose);

    transform: translateX(8px);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.practice-description {

    max-width: 280px;

    color: rgba(255,255,255,0.42);

    font-size: 12px;

    line-height: 1.7;

    transition: color var(--transition);

}


.practice-item:hover .practice-description {

    color: rgba(255,255,255,0.68);

}


/* =========================================================
   ARROW
========================================================= */

.practice-arrow {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255,255,255,0.16);

    border-radius: 50%;

    color: var(--roxo-rose);

    font-size: 17px;

    transition: all var(--transition);

}


.practice-item:hover .practice-arrow {

    background: var(--roxo-rose);

    border-color: var(--roxo-rose);

    color: var(--deep-black);

    transform: translateX(5px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .expertise-section {

        padding: 110px 0;

    }


    .expertise-container {

        width: calc(100% - 50px);

        grid-template-columns: 1fr;

        gap: 80px;

    }


    .expertise-intro {

        position: relative;

        top: auto;

    }


    .expertise-intro p {

        max-width: 600px;

    }


    .practice-item {

        grid-template-columns: 50px 1fr 0.8fr 40px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .expertise-section {

        padding: 90px 0;

    }


    .expertise-container {

        width: calc(100% - 40px);

        gap: 60px;

    }


    .expertise-label {

        margin-bottom: 35px;

        font-size: 9px;

    }


    .expertise-intro h2 {

        font-size: 48px;

    }


    .expertise-intro p {

        font-size: 15px;

    }


    .practice-item {

        grid-template-columns: 38px 1fr 35px;

        gap: 15px;

        min-height: 125px;

        padding: 25px 0;

    }


    .practice-description {

        display: none;

    }


    .practice-number {

        font-size: 12px;

    }


    .practice-name {

        font-size: 27px;

    }


    .practice-arrow {

        width: 34px;

        height: 34px;

        font-size: 15px;

    }


    .practice-item::before {

        left: -15px;

        right: -15px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .practice-name {

        font-size: 24px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cb57ccb *//* =========================================================
   THE ROXO DIFFERENCE
========================================================= */

.difference-section {

    position: relative;

    background: var(--ivory);

    color: var(--deep-black);

    padding: 150px 0;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.difference-container {

    position: relative;

    z-index: 2;

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 120px;

}


/* =========================================================
   INTRO
========================================================= */

.difference-intro {

    max-width: 600px;

}


.difference-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 45px;

    color: var(--roxo-plum);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

}


.difference-line {

    width: 42px;

    height: 1px;

    background: var(--roxo-plum);

}


.difference-intro h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 5vw, 76px);

    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -0.04em;

}


.difference-intro h2 em {

    display: block;

    color: var(--roxo-plum);

    font-style: italic;

}


.difference-intro > p {

    max-width: 500px;

    margin-top: 38px;

    color: #686269;

    font-size: 16px;

    line-height: 1.85;

}


/* =========================================================
   PRINCIPLES
========================================================= */

.difference-principles {

    border-top: 1px solid rgba(101,76,97,0.25);

}


/* =========================================================
   PRINCIPLE ITEM
========================================================= */

.difference-item {

    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 30px;

    padding: 38px 0;

    border-bottom: 1px solid rgba(101,76,97,0.25);

    transition: padding var(--transition);

}


.difference-item:hover {

    padding-left: 12px;

}


/* =========================================================
   NUMBER
========================================================= */

.difference-number {

    padding-top: 5px;

    color: var(--roxo-rose);

    font-family: "Playfair Display", serif;

    font-size: 14px;

}


/* =========================================================
   CONTENT
========================================================= */

.difference-content h3 {

    font-family: "Playfair Display", serif;

    font-size: 32px;

    font-weight: 400;

    color: var(--roxo-plum);

}


.difference-content p {

    max-width: 550px;

    margin-top: 13px;

    color: #777077;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   DECORATIVE ROXO MARK
========================================================= */

.difference-mark {

    position: absolute;

    right: -30px;

    bottom: -130px;

    font-family: "Playfair Display", serif;

    font-size: 500px;

    line-height: 1;

    color: rgba(101,76,97,0.035);

    pointer-events: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .difference-section {

        padding: 110px 0;

    }


    .difference-container {

        width: calc(100% - 50px);

        grid-template-columns: 1fr;

        gap: 80px;

    }


    .difference-intro {

        max-width: 700px;

    }


    .difference-intro > p {

        max-width: 650px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .difference-section {

        padding: 90px 0;

    }


    .difference-container {

        width: calc(100% - 40px);

        gap: 55px;

    }


    .difference-label {

        margin-bottom: 35px;

        font-size: 9px;

    }


    .difference-intro h2 {

        font-size: 46px;

    }


    .difference-intro > p {

        font-size: 15px;

        line-height: 1.75;

    }


    .difference-item {

        grid-template-columns: 40px 1fr;

        gap: 18px;

        padding: 30px 0;

    }


    .difference-item:hover {

        padding-left: 0;

    }


    .difference-content h3 {

        font-size: 27px;

    }


    .difference-content p {

        font-size: 14px;

    }


    .difference-mark {

        font-size: 300px;

        right: -50px;

        bottom: -60px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9fee5f0 *//* =========================================================
   OUR PEOPLE
========================================================= */

.people-section {

    position: relative;

    background: var(--deep-black);

    color: var(--white);

    padding: 150px 0;

    overflow: hidden;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.people-container {

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

}


/* =========================================================
   SECTION LABEL
========================================================= */

.people-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 45px;

    color: var(--roxo-rose);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

}


.people-line {

    width: 42px;

    height: 1px;

    background: var(--roxo-rose);

}


/* =========================================================
   HEADER
========================================================= */

.people-heading-row {

    display: grid;

    grid-template-columns: 1fr 0.7fr;

    gap: 80px;

    align-items: end;

}


.people-heading h2 {

    max-width: 700px;

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6vw, 90px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.045em;

    color: var(--ivory);

}


.people-heading h2 em {

    display: block;

    color: var(--roxo-rose);

    font-style: italic;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.people-introduction {

    max-width: 430px;

    padding-bottom: 5px;

}


.people-introduction p {

    margin: 0;

    color: var(--text-muted);

    font-size: 15px;

    line-height: 1.85;

}


/* =========================================================
   PEOPLE LINK
========================================================= */

.people-link {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 28px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(197,142,155,0.55);

    color: var(--white);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-decoration: none;

    transition:
        color 0.35s ease,
        border-color 0.35s ease;

}


.people-link span {

    color: var(--roxo-rose);

    font-size: 17px;

    transition: transform 0.35s ease;

}


.people-link:hover {

    color: var(--roxo-rose);

    border-color: var(--roxo-rose);

}


.people-link:hover span {

    transform: translate(4px, -4px);

}


/* =========================================================
   SENIOR TEAM
========================================================= */

.senior-team {

    display: grid;

    grid-template-columns: 1.25fr 1fr 1fr;

    gap: 25px;

    margin-top: 90px;

}


/* =========================================================
   ATTORNEY CARD
========================================================= */

.attorney-card {

    position: relative;

    display: block;

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   ATTORNEY IMAGE
========================================================= */

.attorney-image {

    position: relative;

    width: 100%;

    height: 470px;

    overflow: hidden;

    background: #211d20;

}


/* Larger founder image */

.attorney-large .attorney-image {

    height: 560px;

}


/* =========================================================
   ATTORNEY PHOTOGRAPH
========================================================= */

.attorney-photo {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center top;

    transform: scale(1);

    transition:
        transform 0.8s cubic-bezier(.2,.7,.2,1),
        filter 0.5s ease;

}


/* =========================================================
   INDIVIDUAL PHOTO POSITIONING
========================================================= */

/*
   Rui
   The original image is portrait oriented, so keep
   his face and upper body positioned naturally.
*/

.attorney-large .attorney-photo {

    object-position: center top;

}


/*
   Genie
*/

.senior-team .attorney-card:nth-child(2) .attorney-photo {

    object-position: center top;

}


/*
   Tavio
*/

.senior-team .attorney-card:nth-child(3) .attorney-photo {

    object-position: center top;

}


/* =========================================================
   PHOTO HOVER
========================================================= */

.attorney-card:hover .attorney-photo {

    transform: scale(1.04);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.attorney-overlay {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            to top,
            rgba(15,13,15,0.88) 0%,
            rgba(15,13,15,0.35) 32%,
            rgba(15,13,15,0) 65%
        );

    transition:
        background 0.45s ease;

}


.attorney-card:hover .attorney-overlay {

    background:

        linear-gradient(
            to top,
            rgba(101,76,97,0.85) 0%,
            rgba(101,76,97,0.20) 40%,
            rgba(101,76,97,0.02) 70%
        );

}


/* =========================================================
   VIEW PROFILE
========================================================= */

.attorney-view {

    position: absolute;

    left: 30px;

    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--white);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

}


.attorney-view span {

    font-size: 18px;

}


.attorney-card:hover .attorney-view {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   ATTORNEY DETAILS
========================================================= */

.attorney-details {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 0 0;

}


.attorney-name {

    min-width: 0;

}


.attorney-details h3 {

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 28px;

    font-weight: 400;

    line-height: 1.2;

    color: var(--ivory);

}


.attorney-details p {

    margin: 6px 0 0;

    color: var(--roxo-rose);

    font-size: 10px;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 0.14em;

    text-transform: uppercase;

}


.attorney-number {

    flex-shrink: 0;

    padding-top: 5px;

    color: rgba(255,255,255,0.3);

    font-family: "Playfair Display", serif;

    font-size: 13px;

}


/* =========================================================
   TEAM SUMMARY
========================================================= */

.team-summary {

    display: grid;

    grid-template-columns: 100px 1fr auto;

    align-items: center;

    gap: 35px;

    margin-top: 100px;

    padding: 35px 0;

    border-top: 1px solid var(--border-dark);

    border-bottom: 1px solid var(--border-dark);

}


/* =========================================================
   SUMMARY NUMBER
========================================================= */

.team-summary-number {

    font-family: "Playfair Display", serif;

    font-size: 50px;

    font-weight: 400;

    line-height: 1;

    color: var(--roxo-rose);

}


/* =========================================================
   SUMMARY COPY
========================================================= */

.team-summary-copy > span {

    display: block;

    color: rgba(255,255,255,0.4);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.18em;

}


.team-summary-copy p {

    max-width: 600px;

    margin: 8px 0 0;

    color: var(--text-muted);

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   SUMMARY LINK
========================================================= */

.team-summary-link {

    display: flex;

    align-items: center;

    gap: 18px;

    color: var(--white);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-decoration: none;

}


.team-summary-link span {

    color: var(--roxo-rose);

    font-size: 20px;

    transition: transform 0.35s ease;

}


.team-summary-link:hover {

    color: var(--roxo-rose);

}


.team-summary-link:hover span {

    transform: translateX(6px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .people-section {

        padding: 110px 0;

    }


    .people-container {

        width: calc(100% - 50px);

    }


    .people-heading-row {

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .people-introduction {

        max-width: 600px;

    }


    .senior-team {

        grid-template-columns: 1fr 1fr;

    }


    /*
       Rui spans the full width
       on tablet.
    */

    .attorney-large {

        grid-column: span 2;

    }


    .attorney-large .attorney-image {

        height: 520px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .people-section {

        padding: 90px 0;

    }


    .people-container {

        width: calc(100% - 40px);

    }


    .people-label {

        margin-bottom: 35px;

        font-size: 9px;

    }


    .people-heading h2 {

        font-size: 49px;

    }


    .people-introduction p {

        font-size: 15px;

        line-height: 1.75;

    }


    .senior-team {

        grid-template-columns: 1fr;

        gap: 55px;

        margin-top: 65px;

    }


    .attorney-large {

        grid-column: auto;

    }


    .attorney-image,

    .attorney-large .attorney-image {

        height: 430px;

    }


    .attorney-details h3 {

        font-size: 25px;

    }


    /*
       Mobile has no hover,
       therefore show profile link.
    */

    .attorney-view {

        opacity: 1;

        transform: none;

    }


    .team-summary {

        grid-template-columns: 60px 1fr;

        gap: 20px;

        margin-top: 70px;

    }


    .team-summary-number {

        font-size: 40px;

    }


    .team-summary-link {

        grid-column: 2;

        margin-top: 15px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .people-heading h2 {

        font-size: 44px;

    }


    .attorney-details h3 {

        font-size: 23px;

    }


    .attorney-details p {

        font-size: 9px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c5d3d34 *//* =========================================================
   OUR APPROACH
========================================================= */

.approach-section {

    position: relative;

    background: var(--ivory);

    color: var(--deep-black);

    padding: 160px 0;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.approach-container {

    position: relative;

    z-index: 2;

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 130px;

}


/* =========================================================
   INTRO
========================================================= */

.approach-intro {

    max-width: 570px;

}


.approach-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 45px;

    color: var(--roxo-plum);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

}


.approach-line {

    width: 42px;

    height: 1px;

    background: var(--roxo-plum);

}


/* =========================================================
   HEADING
========================================================= */

.approach-intro h2 {

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6vw, 88px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.045em;

    color: var(--deep-black);

}


.approach-intro h2 em {

    display: block;

    color: var(--roxo-plum);

    font-style: italic;

}


/* =========================================================
   TEXT
========================================================= */

.approach-lead {

    max-width: 520px;

    margin-top: 40px;

    color: var(--roxo-plum);

    font-family: "Playfair Display", serif;

    font-size: 21px;

    line-height: 1.55;

}


.approach-text {

    max-width: 500px;

    margin-top: 25px;

    color: #6f696e;

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   PROCESS
========================================================= */

.approach-process {

    border-top: 1px solid rgba(101,76,97,0.28);

}


/* =========================================================
   STEP
========================================================= */

.approach-step {

    padding: 34px 0 38px;

    border-bottom: 1px solid rgba(101,76,97,0.28);

    transition:
        padding 0.35s ease;

}


.approach-step:hover {

    padding-left: 14px;

}


/* =========================================================
   STEP TOP
========================================================= */

.approach-step-top {

    display: flex;

    align-items: center;

    gap: 24px;

}


/* =========================================================
   NUMBER
========================================================= */

.approach-number {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(101,76,97,0.3);

    border-radius: 50%;

    color: var(--roxo-plum);

    font-family: "Playfair Display", serif;

    font-size: 13px;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;

}


.approach-step:hover .approach-number {

    background: var(--roxo-plum);

    border-color: var(--roxo-plum);

    color: var(--white);

}


/* =========================================================
   STEP LABEL
========================================================= */

.approach-step-label {

    color: var(--roxo-rose);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.2em;

}


/* =========================================================
   STEP CONTENT
========================================================= */

.approach-step-content {

    margin-left: 66px;

    margin-top: 20px;

}


.approach-step-content h3 {

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 30px;

    font-weight: 400;

    line-height: 1.2;

    color: var(--roxo-plum);

}


.approach-step-content p {

    max-width: 590px;

    margin-top: 12px;

    color: #777177;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   BACKGROUND NUMBER
========================================================= */

.approach-background-number {

    position: absolute;

    right: -60px;

    bottom: -180px;

    z-index: 1;

    font-family: "Playfair Display", serif;

    font-size: 600px;

    font-weight: 400;

    line-height: 1;

    color: rgba(101,76,97,0.035);

    pointer-events: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .approach-section {

        padding: 120px 0;

    }


    .approach-container {

        width: calc(100% - 50px);

        grid-template-columns: 1fr;

        gap: 80px;

    }


    .approach-intro {

        max-width: 700px;

    }


    .approach-lead {

        max-width: 650px;

    }


    .approach-text {

        max-width: 650px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .approach-section {

        padding: 90px 0;

    }


    .approach-container {

        width: calc(100% - 40px);

        gap: 60px;

    }


    .approach-label {

        margin-bottom: 35px;

        font-size: 9px;

    }


    .approach-intro h2 {

        font-size: 49px;

    }


    .approach-lead {

        margin-top: 32px;

        font-size: 19px;

    }


    .approach-text {

        font-size: 14px;

    }


    .approach-step {

        padding: 28px 0 32px;

    }


    .approach-step:hover {

        padding-left: 0;

    }


    .approach-step-top {

        gap: 17px;

    }


    .approach-number {

        width: 38px;

        height: 38px;

        font-size: 12px;

    }


    .approach-step-content {

        margin-left: 55px;

        margin-top: 17px;

    }


    .approach-step-content h3 {

        font-size: 26px;

    }


    .approach-step-content p {

        font-size: 13px;

        line-height: 1.75;

    }


    .approach-background-number {

        right: -80px;

        bottom: -80px;

        font-size: 320px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .approach-intro h2 {

        font-size: 44px;

    }


    .approach-step-content h3 {

        font-size: 24px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d826392 *//* =========================================================
   CLIENT RELATIONSHIP
========================================================= */

.client-section {

    position: relative;

    background: var(--ivory);

    color: var(--deep-black);

    padding: 160px 0 0;

    overflow: hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.client-container {

    width: min(1400px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 130px;

}


/* =========================================================
   LABEL
========================================================= */

.client-label {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 45px;

    color: var(--roxo-plum);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.22em;

}


.client-line {

    width: 42px;

    height: 1px;

    background: var(--roxo-plum);

}


/* =========================================================
   MAIN HEADING
========================================================= */

.client-statement h2 {

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 6vw, 88px);

    font-weight: 400;

    line-height: 0.98;

    letter-spacing: -0.045em;

}


.client-statement h2 em {

    display: block;

    color: var(--roxo-plum);

    font-style: italic;

}


/* =========================================================
   INTRO TEXT
========================================================= */

.client-lead {

    max-width: 530px;

    margin-top: 42px;

    color: var(--roxo-plum);

    font-family: "Playfair Display", serif;

    font-size: 21px;

    line-height: 1.55;

}


.client-copy {

    max-width: 500px;

    margin-top: 25px;

    color: #706970;

    font-size: 14px;

    line-height: 1.85;

}


/* =========================================================
   VALUES
========================================================= */

.client-values {

    border-top: 1px solid rgba(101,76,97,0.25);

}


/* =========================================================
   VALUE
========================================================= */

.client-value {

    display: grid;

    grid-template-columns: 65px 1fr;

    gap: 30px;

    padding: 40px 0;

    border-bottom: 1px solid rgba(101,76,97,0.25);

    transition: padding 0.35s ease;

}


.client-value:hover {

    padding-left: 12px;

}


/* =========================================================
   VALUE NUMBER
========================================================= */

.client-value-number {

    padding-top: 4px;

    color: var(--roxo-rose);

    font-family: "Playfair Display", serif;

    font-size: 14px;

}


/* =========================================================
   VALUE CONTENT
========================================================= */

.client-value-content h3 {

    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: 34px;

    font-weight: 400;

    color: var(--roxo-plum);

}


.client-value-content p {

    max-width: 540px;

    margin-top: 12px;

    color: #777177;

    font-size: 13px;

    line-height: 1.8;

}


/* =========================================================
   BOTTOM BAND
========================================================= */

.client-bottom {

    position: relative;

    display: grid;

    grid-template-columns: 120px 1fr auto;

    align-items: center;

    gap: 40px;

    margin-top: 130px;

    padding: 45px max(40px, calc((100vw - 1400px) / 2));

    background: var(--deep-black);

    color: var(--white);

}


/* =========================================================
   DECORATIVE R
========================================================= */

.client-bottom-mark {

    font-family: "Playfair Display", serif;

    font-size: 70px;

    line-height: 1;

    color: var(--roxo-rose);

}


/* =========================================================
   BOTTOM TEXT
========================================================= */

.client-bottom p {

    margin: 0;

    color: rgba(255,255,255,0.65);

    font-family: "Playfair Display", serif;

    font-size: 20px;

    font-weight: 400;

}


/* =========================================================
   BOTTOM LINK
========================================================= */

.client-bottom-link {

    display: inline-flex;

    align-items: center;

    gap: 16px;

    color: var(--white);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    text-decoration: none;

}


.client-bottom-link span {

    color: var(--roxo-rose);

    font-size: 18px;

    transition: transform 0.35s ease;

}


.client-bottom-link:hover span {

    transform: translate(4px, -4px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .client-section {

        padding-top: 120px;

    }


    .client-container {

        width: calc(100% - 50px);

        grid-template-columns: 1fr;

        gap: 80px;

    }


    .client-statement {

        max-width: 700px;

    }


    .client-bottom {

        padding-left: 25px;

        padding-right: 25px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .client-section {

        padding-top: 90px;

    }


    .client-container {

        width: calc(100% - 40px);

        gap: 60px;

    }


    .client-label {

        margin-bottom: 35px;

        font-size: 9px;

    }


    .client-statement h2 {

        font-size: 49px;

    }


    .client-lead {

        margin-top: 32px;

        font-size: 19px;

    }


    .client-copy {

        font-size: 14px;

        line-height: 1.8;

    }


    .client-value {

        grid-template-columns: 45px 1fr;

        gap: 15px;

        padding: 30px 0;

    }


    .client-value:hover {

        padding-left: 0;

    }


    .client-value-content h3 {

        font-size: 27px;

    }


    .client-value-content p {

        font-size: 13px;

        line-height: 1.75;

    }


    .client-bottom {

        grid-template-columns: 55px 1fr;

        gap: 20px;

        margin-top: 80px;

        padding: 35px 20px;

    }


    .client-bottom-mark {

        font-size: 48px;

    }


    .client-bottom p {

        font-size: 17px;

        line-height: 1.4;

    }


    .client-bottom-link {

        grid-column: 2;

        margin-top: 5px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .client-statement h2 {

        font-size: 44px;

    }


    .client-value-content h3 {

        font-size: 25px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7b710b7 *//* =========================================
   ROXO LAW — PREMIUM FOOTER
========================================= */

.roxo-footer {
    position: relative;
    overflow: hidden;

    background: #111011;
    color: #F8F4EF;

    padding: 100px 25px 30px;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
}


/* BACKGROUND R */

.roxo-footer-bg {
    position: absolute;

    right: 2%;
    bottom: -8%;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 35vw;
    line-height: .7;

    color: rgba(255,255,255,.025);

    pointer-events: none;

    user-select: none;
}


/* CONTAINER */

.roxo-footer-container {
    position: relative;
    z-index: 2;

    max-width: 1200px;

    margin: 0 auto;
}


/* =========================================
   INTRO
========================================= */

.roxo-footer-intro {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 60px;

    margin-bottom: 70px;
}


.roxo-footer-brand {
    max-width: 650px;
}


.roxo-footer-eyebrow {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 25px;

    color: #C58E9B;

    font-size: 9px;

    letter-spacing: 4px;

    font-weight: 600;
}


.roxo-footer-eyebrow::before {
    content: "";

    width: 35px;
    height: 1px;

    background: #C58E9B;
}


.roxo-footer-brand h2 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(42px, 6vw, 76px);

    line-height: 1.05;

    font-weight: 400;

    letter-spacing: -1px;

    color: #FFFFFF;
}


.roxo-footer-brand h2 em {
    color: #C58E9B;

    font-style: italic;
}


.roxo-footer-description {
    max-width: 350px;
}


.roxo-footer-description p {
    margin: 0;

    color: #999398;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================
   DIVIDER
========================================= */

.roxo-footer-line {
    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            to right,
            #C58E9B 0%,
            rgba(197,142,155,.3) 20%,
            rgba(255,255,255,.08) 100%
        );

    margin-bottom: 70px;
}


/* =========================================
   CONTACT
========================================= */

.roxo-footer-contact {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 60px;

    margin-bottom: 90px;
}


.roxo-footer-contact-heading span {
    display: block;

    color: #C58E9B;

    font-size: 9px;

    letter-spacing: 3px;

    margin-bottom: 20px;
}


.roxo-footer-contact-heading h3 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(28px, 4vw, 46px);

    line-height: 1.15;

    font-weight: 400;

    color: #F8F4EF;
}


.roxo-footer-contact-heading h3 em {
    color: #C58E9B;

    font-style: italic;
}


/* CONTACT DETAILS */

.roxo-footer-contact-details {
    display: flex;

    gap: 50px;

    flex-wrap: wrap;
}


.roxo-contact-item {
    display: flex;

    flex-direction: column;

    gap: 9px;

    text-decoration: none;

    min-width: 150px;
}


.roxo-contact-label {
    color: #C58E9B;

    font-size: 8px;

    letter-spacing: 2.5px;

    font-weight: 600;
}


.roxo-contact-item strong {
    color: #F8F4EF;

    font-size: 12px;

    font-weight: 400;

    transition:
        color .3s ease,
        transform .3s ease;
}


.roxo-contact-item:hover strong {
    color: #C58E9B;

    transform: translateX(4px);
}


/* =========================================
   NAVIGATION
========================================= */

.roxo-footer-navigation {
    display: grid;

    grid-template-columns:
        220px
        1fr;

    gap: 80px;

    padding-bottom: 70px;
}


.roxo-footer-column {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}


.roxo-footer-column-title {
    color: #C58E9B;

    font-size: 8px;

    letter-spacing: 2.5px;

    font-weight: 600;

    margin-bottom: 10px;
}


.roxo-footer-column > a {
    color: #D9D3D7;

    text-decoration: none;

    font-size: 11px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.roxo-footer-column > a:hover {
    color: #FFFFFF;

    transform: translateX(4px);
}


/* =========================================
   PRACTICE AREA GRID
========================================= */

.roxo-practice-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    width: 100%;

    column-gap: 35px;

    row-gap: 13px;
}


.roxo-practice-grid a {
    color: #999398;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.5;

    transition:
        color .3s ease;
}


.roxo-practice-grid a:hover {
    color: #C58E9B;
}


/* =========================================
   BOTTOM
========================================= */

.roxo-footer-bottom-line {
    width: 100%;

    height: 1px;

    background: rgba(255,255,255,.08);

    margin-bottom: 25px;
}


.roxo-footer-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

    color: #777277;

    font-size: 9px;
}


.roxo-footer-legal {
    display: flex;

    gap: 25px;
}


.roxo-footer-legal a {
    color: #777277;

    text-decoration: none;

    transition: color .3s ease;
}


.roxo-footer-legal a:hover {
    color: #C58E9B;
}


.roxo-footer-powered a {
    color: #C58E9B;

    text-decoration: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .roxo-footer-intro {
        align-items: flex-start;

        flex-direction: column;
    }


    .roxo-footer-contact {
        flex-direction: column;

        align-items: flex-start;
    }


    .roxo-footer-navigation {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .roxo-practice-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .roxo-footer {
        padding:
            70px
            20px
            25px;
    }


    .roxo-footer-intro {
        margin-bottom: 50px;
    }


    .roxo-footer-brand h2 {
        font-size: 44px;
    }


    .roxo-footer-line {
        margin-bottom: 50px;
    }


    .roxo-footer-contact {
        margin-bottom: 65px;
    }


    .roxo-footer-contact-heading h3 {
        font-size: 34px;
    }


    .roxo-footer-contact-details {
        flex-direction: column;

        gap: 25px;

        width: 100%;
    }


    .roxo-contact-item {
        width: 100%;

        padding-bottom: 20px;

        border-bottom:
            1px solid
            rgba(255,255,255,.07);
    }


    .roxo-practice-grid {
        grid-template-columns: 1fr;
    }


    .roxo-footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }


    .roxo-footer-legal {
        flex-direction: column;

        gap: 10px;
    }


    .roxo-footer-bg {
        font-size: 70vw;

        right: -10%;

        bottom: 5%;
    }

}/* End custom CSS */