@import url("variables.css");
@import url("layout.css");

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

:before, :after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    overflow-y: scroll;
    word-wrap: break-word;
    scroll-behavior: smooth;
}

body {
    font-family: var(--dm);
    font-size: var(--text);
    font-weight: var(--regular);
    line-height: var(--lh-5);
    color: var(--honest-blue);
    background-color: var(--calming-white);
    margin: 0;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tenor);
    font-weight: var(--regular);
    margin: 0;
    line-height: var(--lh-1);
    letter-spacing: -.02em;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

p {
    font-size: var(--text);
}

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

small {
    font-size: var(--text-xs)
}

.is-macgillis--rich-text > * {
    margin: 0;
}

.is-macgillis--rich-text > * + * {
    margin-top: var(--spacing-s);
}

.is-macgillis--rich-text ul,
.is-macgillis--rich-text ol {
    padding-left: 1.25rem;
}

.is-macgillis--rich-text li + li {
    margin-top: 0.5rem;
}

/* Video Container */
.is-macgillis--video-column {
    position: relative;
    min-width: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.is-macgillis--video-column::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 16px;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(var(--warm-leather-rgb), .65);
    border-radius: 16px;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 1;
}

.is-macgillis--video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: 16px;
    overflow: hidden;
    z-index: 2;
}

.is-macgillis--video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/******************************
*********** Buttons ***********
******************************/
.is-macgillis--button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: .75rem 1.25rem;
    font-family: var(--dm);
    font-size: var(--text-sm);
    font-weight: var(--semibold);
    line-height: var(--lh);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid;
    background: transparent;
    transition: all .4s ease-in;
}

.is-macgillis--button-light {
    color: var(--honest-blue);
    border-color: var(--warm-leather);
}

.is-macgillis--button-light .material-symbols-outlined  {
    color: var(--honest-blue) !important;
    transition: all .4s ease-in !important;
}

.is-macgillis--button-light:hover {
    background: var(--cool-white);
    color: var(--honest-blue);
    border-color: var(--cool-white);
}

.is-macgillis--button-grey {
    color: var(--honest-blue);
    border-color: var(--warm-leather);
}

.is-macgillis--button-grey .material-symbols-outlined  {
    color: var(--honest-blue) !important;
    transition: all .4s ease-in !important;
}

.is-macgillis--button-grey:hover {
    background: var(--calming-white);
    border-color: var(--calming-white);
}

.is-macgillis--button-dark {
    color: var(--calming-white);
    border-color: var(--oxford-blue);
}

.is-macgillis--button-dark .material-symbols-outlined  {
    color: var(--calming-white) !important;
    transition: all .4s ease-in !important;
}

.is-macgillis--button-dark:hover {
    background: var(--calming-white);
    color: var(--honest-blue);
    border-color: var(--calming-white);
}

.is-macgillis--button-dark:hover .material-symbols-outlined {
    color: var(--honest-blue) !important;
}

/****************************
*********** Links ***********
****************************/
.is-macgillis--link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-family: var(--dm);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--honest-blue);
}

.is-macgillis--link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--warm-leather);
    transform: translateX(-50%);
    transition: width .4s ease;
}

.is-macgillis--link:hover::after {
    width: 100%;
}

.is-macgillis--link-light {
    color: var(--oxford-blue);
}

.is-macgillis--link-light::after,
.is-macgillis--link-lighter::after {
    background: var(--calming-white);
}

.is-macgillis--link-lighter {
    color: var(--calming-white);
}

/**********************************
*********** Backgrounds ***********
**********************************/
.is-macgillis--bg-003139 {
    color: var(--calming-white);
    background-color: var(--honest-blue);
}

.is-macgillis--bg-d2d1cb {
    background-color: var(--cool-white);
}

.is-macgillis--bg-885b46 {
    color: var(--calming-white);
    background-color: var(--warm-leather);
}

.is-macgillis--bg-3c0000 {
    color: var(--calming-white);
    background-color: var(--americana-red);
}

.is-macgillis--bg-9db1b8 {
    background-color: var(--oxford-blue);
}

/****************************************
*********** Slider Navigation ***********
****************************************/
.swiper-button-prev,
.swiper-button-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    margin: 0;
    width: 48px;
    height: 48px;
    cursor: pointer;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

.swiper-button-prev .material-symbols-outlined,
.swiper-button-next .material-symbols-outlined {
    font-size: 48px;
    font-variation-settings:
        'FILL' 0,
        'wght' 100,
        'GRAD' 0,
        'opsz' 24;
    line-height: 1;
    color: var(--warm-leather);
    transition: all .4s ease;
}

.is-macgillis--bg-003139 .swiper-button-prev .material-symbols-outlined,
.is-macgillis--bg-003139 .swiper-button-next .material-symbols-outlined {
    color: var(--oxford-blue);
}

.swiper-button-prev .material-symbols-outlined:hover,
.swiper-button-next .material-symbols-outlined:hover {
    color: var(--honest-blue);
}

.is-macgillis--bg-003139 .swiper-button-prev .material-symbols-outlined:hover,
.is-macgillis--bg-003139 .swiper-button-next .material-symbols-outlined:hover {
    color: var(--calming-white);
}

/*****************************
*********** Header ***********
*****************************/
.is-macgillis--header {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
    background: rgba(var(--honest-blue-rgb), .8);
    margin-bottom: -90px;
    height: 90px;
    z-index: 9999;
}

.is-macgillis--header-row {
    display: grid;
    grid-template-columns: 25% 45% 30%;
    align-items: center;
}

/* Logo */
.is-macgillis--header-logo {
    justify-self: start;
    width: 220px;
}

.is-macgillis--header-logo-link {
    display: inline-flex;
}

.is-macgillis--header-logo-link svg,
.is-macgillis--header-logo-link img {
    width: 100%;
    max-height: 60px;
    display: block;
}

/* Navigation */
.is-macgillis--header-nav {
    justify-self: center;
    width: 100%;
}

.is-macgillis--header-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing-s) * 1.5);
    list-style: none;
}

.is-macgillis--header-menu a {
    font-family: var(--dm);
    font-size: var(--text-sm);
    font-weight: var(--semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--oxford-blue);
}

.is-macgillis--header-menu a::after {
        bottom: -5px;
}

/* CTA area */
.is-macgillis--header-cta {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}

.is-macgillis--header-phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    white-space: nowrap;
}

.is-macgillis--header-phone-icon {
    font-size: var(--text-lg);
    color: var(--warm-leather);
    line-height: 1;
}

.is-macgillis--header-phone-text {
    font-size: var(--text-sm);
    color: var(--calming-white);
    line-height: 1;
}

/***** Single Post/Archive Header *****/
.is-macgillis--archive-template .is-macgillis--header {
    background: var(--honest-blue);
    margin-bottom: 0;
    border-bottom: solid 1px rgba(var(--oxford-blue-rgb), .2);
}

.is-macgillis--single-template .is-macgillis--header {
    background: var(--honest-blue);
    margin-bottom: 0;
    border-bottom: solid 1px rgba(var(--oxford-blue-rgb), .2);
}

/****************************************
*********** Attorneys Archive ***********
****************************************/
.attorneys-archive--hero {
    height: 560px !important;
    padding-bottom: unset !important;
}

.attorneys-archive--hero-overlay {
    background-color: rgba(var(--honest-blue-rgb),.7);
    position: absolute;
    inset: 0;
    z-index: 1;
}

.attorneys-archive--text {
    max-width: 480px;
}

.attorneys-archive--card {
    display: grid;
    grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
    align-items: stretch;
    background: white;
    border: solid 1px rgba(var(--oxford-blue-rgb), .35);
    border-radius: 8px;
    overflow: hidden;
}

.attorneys-archive--image {
    height: 100%;
}

.attorneys-archive--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.attorneys-archive--content {
    padding: calc(var(--spacing-s) * 1.5);
}

.attorneys-archive--name {
    font-size: var(--text-xl);
}

.attorneys-archive--categories {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .375rem;
}

.attorney--single-category a {
    display: block;
    font-size: var(--text-sm);
    text-decoration: none;
    line-height: var(--lh);
    color: var(--honest-blue);
    background: rgba(var(--honest-blue-rgb), .07);
    padding: 4px 8px;
    border: solid 1px rgba(var(--honest-blue-rgb), .15);
    border-radius: 4px;
    transition: all .4s ease;
}

.attorney--single-category a:hover {
    color: var(--honest-blue);
    background: var(--calming-white);
    border-color: var(--calming-white);
}

.attorneys-archive--cta-container {
    padding-top: .5rem;
    border-top: solid 1px rgba(var(--oxford-blue-rgb), .35);
}

.archive-cta--phone {
    color: var(--warm-leather);
}

/**************************************
*********** Single Attorney ***********
**************************************/
.single-attorney--heading {
    height: 480px;
    padding: 0 0 0 0;
}

.single-attorney-heading-container {
    height: 100%;
}

.heading-container--info-container {
    gap: calc(var(--spacing-m) + 8px);
}

.rank-math-breadcrumb a {
    position: relative;
    text-decoration: none;
    font-family: var(--dm);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--oxford-blue);
}

.rank-math-breadcrumb a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 1px;
    background: var(--calming-white);
    transform: translateX(-50%);
    transition: width .4s ease;
}

.rank-math-breadcrumb a:hover::after {
    width: 100%;
}

.rank-math-breadcrumb .separator {
    color: var(--oxford-blue);
}

.rank-math-breadcrumb .last {
    font-family: var(--dm);
    font-size: var(--text-sm);
    letter-spacing: .05em;
    color: rgba(var(--oxford-blue-rgb), .65);
}

.attorney--position {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--warm-leather);
}

.attorney--name {
    font-size: var(--h2);
}

.attorney--tagline {
    font-size: var(--text-md);
}

.attorney--contact {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attorney--contact .material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: var(--text-lg);
}

.attorney--email,
.attorney--linkedin {
    color: var(--calming-white);
    border-color: rgba(var(--calming-white-rgb), .2);
    background: rgba(var(--calming-white-rgb), .08);
}

.attorney--email:hover,
.attorney--linkedin:hover {
    color: var(--honest-blue);
    border-color: var(--calming-white);
    background: var(--calming-white);
}

.attorney--linkedin svg {
    width: var(--text-lg);
    height: var(--text-lg);
}

.attorney--fax {
    color: var(--cool-white);
    border-color: rgba(var(--cool-white-rgb), .1);
    background: rgba(var(--cool-white-rgb), .05);
}

.attorney--fax .material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 100,
        'GRAD' 0,
        'opsz' 24;
}

.single-attorney--thumbnail {
    max-width: 260px;
}

.single-attorney--thumbnail img {
    width: 100%;
    border-radius: 16px 16px 0 0;
    object-fit: cover;
    object-position: center top;
}

/* Bio Section */
.single-attorney--bio-inner {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    align-items: start;
    gap: var(--spacing-xl);
}

.attorney-bio--container-inner .attorney--name {
    font-size: var(--text-2xl);
}

.attorney--results .results--title {
    font-size: var(--text-xl);
    margin-bottom: .5rem;
}

.attorney--results > .results--title > span {
    color: var(--warm-leather);
}

.results--container {
    padding: calc(var(--spacing-s) * 1.5);
    background-color: white;
    border-radius: 8px;
    border: solid 1px rgba(var(--oxford-blue-rgb), .35);
}

.single-result--amount {
    font-family: var(--tenor);
    font-size: var(--text-xl);
    color: var(--warm-leather);
}

/* Sidebar */
.single-attorney--sidebar {
    gap: calc(var(--spacing-s) * 1.5);
}

.sidebar-sticky {
    position: sticky;
    top: var(--spacing-l);
}

.single-attorney--sidebar .material-symbols-outlined {
    color: var(--warm-leather);
    font-size: var(--text-lg);
}

.attorney--practice-areas,
.attorney--education,
.attorney--bar-admissions {
    padding: calc(var(--spacing-s) * 1.5);
    background: white;
    border-radius: 8px;
    border: solid 1px rgba(var(--oxford-blue-rgb), .35);
}

.practice-area--title,
.education--title,
.admissions--title {
    font-family: var(--dm);
    font-size: var(--text-md);
    font-weight: var(--medium);
    letter-spacing: .1em;
    line-height: var(--lh);
    text-transform: uppercase;
}

.practice-areas--list,
.admissions--list {
    list-style: none;
}

.practice-areas--list li,
.admissions--list li {
    position: relative;
    padding-left: 1.5rem;
}

.practice-areas--list li .is-macgillis--link {
    text-transform: unset !important;
    letter-spacing: unset !important;
}

.practice-areas--list li + li,
.admissions--list li + li {
    margin-top: 0.5rem;
}

.practice-areas--list li::before,
.admissions--list li::before {
    content: "task_alt";
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0;
    font-size: var(--text-md);
    color: var(--warm-leather);
    transform: translateY(-1px);
}

.education--degree {
    font-weight: var(--bold);
}

.education--meta {
    font-size: var(--text-sm);
    font-weight: var(--light);
}

.attorney--cta-container {
    gap: calc(var(--spacing-s) + 4px);
    padding: calc(var(--spacing-s) * 1.5);
    border-radius: 8px;
}

.cta--title {
    font-size: var(--text-lg);
    margin-bottom: calc(var(--spacing-s) * .5);
}

.cta--text {
    font-size: var(--text-sm);
}

/* Awards Section */
.attorney--awards-container {
    background: rgba(255,255,255,.35);
}

.attorney-awards--eyebrow {
    font-size: var(--text-sm);
    font-weight: var(--medium);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .2em;
    color: var(--warm-leather);
}

.attorney-awards--title {
    font-size: var(--h4);
    text-align: center;
}

/*******************************************
*********** Single Practice Area ***********
*******************************************/
.practice-area--hero {
    height: 460px !important;
    padding-bottom: var(--spacing-xxl) !important;
}

.practice-area--hero.is-macgillis--alt-hero {
    background-position: center !important;
}

.practice-area--hero .attorneys-archive--hero-overlay {
    background: linear-gradient(105deg, rgba(var(--honest-blue-rgb),0.92) 41.55%, rgba(var(--honest-blue-rgb),0.60) 92.26%);
}

.practice-area--single-category {
    display: flex;
    align-items: center;
    gap: 8px;
}

.practice-area--hero-phone {
    color: var(--calming-white);
    border-color: rgba(var(--calming-white-rgb), .2);
    background: rgba(var(--calming-white-rgb), .08);
}

.practice-area--hero-phone:hover {
    color: var(--honest-blue);
    border-color: var(--calming-white);
    background: var(--calming-white);
}

.practice-area--number {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: var(--medium);
    color: var(--warm-leather);
}

.practice-area--number::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background-color: var(--warm-leather);
    margin-left: 8px;
}

.practice-area--categories {
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oxford-blue);
}

.practice-area--content-inner {
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    align-items: start;
    gap: var(--spacing-xl);
}

.content--title {
    text-transform: uppercase;
    line-height: var(--lh-1);
    letter-spacing: .1em;
    color: var(--warm-leather);
    margin-bottom: calc(var(--spacing-s) * .75);
}

.practice-area--coverage-container {
    padding: var(--spacing-m);
    background: white;
    border-radius: 12px;
    border: solid 1px rgba(var(--oxford-blue-rgb), .35);
}

.coverage--title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--dm);
    font-size: var(--font);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.coverage--title .material-symbols-outlined {
    color: var(--warm-leather);
}

.coverage--items ul {
    padding: 0;
    margin: 0;
    list-style: none;
    column-gap: var(--spacing-m);
    font-size: var(--text-sm);
}

.coverage--items ul li {
    position: relative;
    padding-left: 1.5rem;
}

.coverage--items ul li::before {
    content: "check_circle";
    font-family: 'Material Symbols Outlined';
    position: absolute;
    left: 0;
    font-size: var(--text-md);
    color: var(--warm-leather);
    transform: translateY(-1px);
}

.approach--eyebrow {
    text-transform: uppercase;
    line-height: var(--lh-1);
    letter-spacing: .1em;
    color: var(--warm-leather);
    margin-bottom: 6px;
}

.approach--title {
    font-size: var(--text-3xl);
}

.approach--items {
    display: flex;
    flex-direction: column;
}

.approach--item {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 24px;
}

.approach--item:last-child {
    padding-bottom: 0;
}

.approach--item::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 40px;
    bottom: 0;
    width: 1px;
    background: rgba(var(--warm-leather-rgb),.2);
}

.approach--item:last-child::before {
    display: none;
}

.approach--number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: 1px solid rgba(var(--warm-leather-rgb),.2);
    font-family: var(--tenor);
    font-size: var(--text);
    color: var(--warm-leather);
    background: rgba(var(--warm-leather-rgb),.07);
    z-index: 2;
}

.approach--content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.approach--item-title {
    font-size: var(--text-lg);
    margin: 10px 0 0;
}

.approach--item-text {
    margin: 0;
}

.questions--eyebrow {
    text-transform: uppercase;
    line-height: var(--lh-1);
    letter-spacing: .1em;
    color: var(--warm-leather);
    margin-bottom: 6px;
}

.questions--title {
    font-size: var(--text-2xl);
}

.questions--accordion-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.accordion--tab-container {
    width: 100%;
    margin: 0;
    clear: both;
    border-bottom: solid 1px rgba(var(--oxford-blue-rgb), .25);
}

.accordion--title {
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
    text-decoration: none;
}

.accordion--title h3 {
    font-size: var(--text-lg);
    color: var(--honest-blue);
}

.accordion--title .accordion--toggle-icon {
    display: inline-block;
    position: absolute;
    right: var(--spacing-s);
    color: var(--warm-leather);
    transition: transform 0.3s ease-in-out;
}

.accordion--title.open .accordion--toggle-icon {
    transform: rotate(-180deg);
}

.accordion--content {
    display: none;
    padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) 0;
    overflow: auto;
}

.accordion--title.open + .accordion--content {
    border-top: solid 1px rgba(var(--oxford-blue-rgb), .25);
}

/* Practice Area Sidebar */
.sidebar--cta-container {
    padding: var(--spacing-m);
    background: var(--honest-blue);
    border-radius: 24px;
}

.sidebar-cta--heading-container {
    color: var(--calming-white);
}

.sidebar-cta--heading-container .sidebar-cta--title {
    font-size: var(--text-xl);
}

.sidebar-cta--buttons .sidebar-cta--button-custom {
    color: var(--calming-white);
    border-color: rgba(var(--calming-white-rgb), .2);
    background: rgba(var(--calming-white-rgb), .08);
}

.sidebar-cta--buttons .sidebar-cta--button-custom .material-symbols-outlined {
    font-size: 18px;
}

.sidebar-cta--buttons .sidebar-cta--button-custom:hover {
    color: var(--honest-blue);
    border-color: var(--calming-white);
    background: var(--calming-white);
}

.related-attorneys--item {
    overflow: hidden;
    border-radius: 24px;
}

.related-attorney--image {
    aspect-ratio: 4 / 3;
}

.related-attorney--image img {
    object-position: center 15%;
}

.related-attorney--info {
    padding: var(--spacing-s);
    padding-bottom: calc(var(--spacing-s) * 1.5);
    background: white;
}

.related-attorney--name {
    font-size: var(--text-lg);
    margin-bottom: 4px;
}

.related-attorney--position {
    font-size: var(--text-sm);
    letter-spacing: .1em;
}

.related-attorney--tagline {
    font-size: var(--text-sm);
}

.related-attorney--link {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    line-height: var(--lh-1);
}

.related-attorney--link .material-symbols-outlined {
    font-size: 18px;
}

.related-attorneys--navigation {
    margin-top: 8px;
}

.related-attorney--swiper-button-prev,
.related-attorney--swiper-button-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    margin: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.related-attorney--swiper-button-prev .material-symbols-outlined,
.related-attorney--swiper-button-next .material-symbols-outlined {
    font-size: 32px;
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
    line-height: 1;
    color: var(--warm-leather);
    transition: all .4s ease;
}

.related-attorney--swiper-button-prev:hover .material-symbols-outlined,
.related-attorney--swiper-button-next:hover .material-symbols-outlined {
    color: var(--honest-blue);
}

.related--practice-areas {
    border-radius: 12px;
    border: solid 1px rgba(var(--oxford-blue-rgb), .35);
    overflow: hidden;
}

.related-practice-area--title {
    font-family: var(--dm);
    font-size: var(--text-sm);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--oxford-blue);
    padding: var(--spacing-s);
    background: white;
}

.related-practice-area--item {
    padding: var(--spacing-s);
    border-top: solid 1px rgba(var(--oxford-blue-rgb), .35);
    color: var(--honest-blue);
    text-decoration: none !important;
    background: white;
    transition: all .4s ease;
}

.related-practice-area--item:hover {
    background: var(--cool-white);
}

.related-practice-area--number {
    letter-spacing: .1em;
    color: var(--warm-leather);
}

.practice-area--cta .custom-cta--title {
    font-size: var(--text-2xl);
}

.practice-area--back-link {
    display: flex;
    align-items: center;
    gap: 6px;
}

.practice-area--back-link .material-symbols-outlined {
    font-size: 18px;
}

/*****************************
*********** Tablet ***********
*****************************/
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Video Container */
    .is-macgillis--video-column {
        max-width: 100%;
        width: 100%;
        min-width: 0;
    }

    /*****************************
    *********** Header ***********
    *****************************/
    .is-macgillis--header {
        background: rgba(var(--honest-blue-rgb), 1);
        margin-bottom: 0;
        height: 80px;
        z-index: 9999;
    }

    /****************************************
    *********** Attorneys Archive ***********
    ****************************************/
    .attorneys-archive--hero {
        height: 420px !important;
    }

    .attorneys-archive--grid {
        grid-template-columns: 1fr;
    }

    .attorneys-archive--card {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    }

    /**************************************
    *********** Single Attorney ***********
    **************************************/
    .single-attorney--heading {
        height: auto;
        padding: var(--spacing-xl) var(--spacing-m) 0;
    }

    .single-attorney-heading-container {
        gap: var(--spacing-m);
    }

    .heading-container--info-container {
        gap: var(--spacing-m);
        padding-bottom: var(--spacing-m);
        flex: 7 1 0;
    }

    .single-attorney-heading-container .mg-col-3 {
        min-width: 240px;
    }

    .single-attorney--thumbnail {
        display: flex;
        max-width: 200px;
    }

    /*******************************************
    *********** Single Practice Area ***********
    *******************************************/
    .custom-cta--buttons-container {
        flex-direction: column;
    }
}

/*****************************
*********** Mobile ***********
*****************************/
@media (max-width: 767px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    /* Video Container */
    .is-macgillis--video-column::after {
        top: 12px;
        left: 12px;
    }

    /****************************************
    *********** Attorneys Archive ***********
    ****************************************/

    .attorneys-archive--grid {
        grid-template-columns: 1fr;
    }

    .attorneys-archive--card {
        grid-template-columns: 1fr;
    }

    .attorneys-archive--image {
        aspect-ratio: 1 / 1;
    }

    .attorneys-archive--image img {
        object-position: top;
    }

    /**************************************
    *********** Single Attorney ***********
    **************************************/
    .single-attorney--heading {
        padding: var(--spacing-l) var(--spacing-s) 0;
    }

    .single-attorney-heading-container {
        gap: var(--spacing-l);
    }

    .heading-container--info-container {
        padding-bottom: 0;
    }

    .heading-container--info-container .rank-math-breadcrumb a,
    .heading-container--info-container .rank-math-breadcrumb .last {
        font-size: var(--text-xs);
    }

    .attorney--contact-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .attorney--contact-buttons .attorney--contact {
        width: 100;
    }

    .single-attorney-heading-container .mg-col-3 {
        align-items: center;
    }

    .attorney-bio--container-inner {
        gap: var(--spacing-l);
    }

    .single-attorney--bio-inner {
        grid-template-columns: 1fr;
        gap: var(--spacing-l);
    }

    .single-attorney--sidebar.sidebar-sticky {
        position: relative;
        top: var(--spacing-s);
    }

    .attorney--awards-container-inner {
        gap: var(--spacing-m);
    }

    /*******************************************
    *********** Single Practice Area ***********
    *******************************************/
    .practice-area--hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .practice-area--content-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .custom-cta--buttons-container {
        flex-direction: column;
        align-items: stretch;
    }

    .custom-cta--buttons-container .practice-area--back-link {
        align-self: center;
    }
}