:root {
	--navy: #081d34;
	--blue: #102e50;
	--gold: #c7a25d;
	--paper: #f5f3ee;
	--white: #fff;
	--ink: #0c2745;
	--muted: #5c6976;
	--line: rgba(12, 39, 69, .16)
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "DM Sans", Arial, sans-serif;
	font-size:17px;
	overflow-x:hidden;
}

a {
	text-decoration: none;
	color: inherit
}

button {
	font: inherit
}

.eyebrow {
	font: 500 13px/1.4 "DM Mono", monospace;
	letter-spacing: .14em;
	text-transform: uppercase
}

.site-header {
	height: 84px;
	padding: 0 4.5vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--white);
	position: relative;
	z-index: 20
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px
}
.brand img{width:auto; height:70px;}

.brand>span {
	width: 44px;
	color: var(--gold);
	font: 600 28px/1 Georgia, serif;
	letter-spacing: -9px
}

.brand strong {
	font: 600 15px/1.1 Georgia, serif;
	letter-spacing: .18em
} 

.brand small {
	display: block;
	color: var(--gold);
	font: 500 10px/1.4 "DM Sans";
	letter-spacing: .32em;
	text-align: center;
	margin-top: 4px
}

.main-navigation {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 35px;
	font-size: 16px;
	font-weight:500;
}

.main-navigation>a,
.nav-group>button {
	border: 0;
	background: none;
	padding: 32px 0;
	cursor: pointer;
	color: var(--ink)
}

.nav-group {
	height: 100%;
	position: relative
}

.nav-group>button span {
	color: var(--gold);
	margin-left: 5px
}

.header-cta {
	padding: 13px 17px !important;
	background: var(--ink) !important;
	color: white !important;
	font: 500 13px "DM Mono" !important;
	text-transform: uppercase;
	letter-spacing:1px;
}

.dropdown {
	position: absolute;
	left: -22px;
	top: 82px;
	width: 250px;
	padding: 17px;
	background: white;
	box-shadow: 0 18px 40px rgba(4, 20, 37, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: .25s
}

.nav-group:hover .dropdown,
.nav-group.is-open .dropdown {
	opacity: 1;
	visibility: visible;
	transform: none
}

.dropdown a {
	display: flex;
	align-items:center;
	gap: 11px;
	padding: 11px 8px;
	border-bottom: 1px solid #edf0f2;
	font-size: 14px
}

.dropdown a:hover {
	color: var(--gold)
}

.dropdown--expertise {
	width: 610px;
	display: grid;
	grid-template-columns: 1fr 1fr
}

.nav-group--wide .dropdown--expertise {
	left: auto;
	right: -16px
}

.dropdown small {
	color: var(--gold);
	font: 11px "DM Mono"
}

.menu-toggle {
	display: none;
	border: 0;
	background: none;
	text-transform: uppercase;
	font: 10px "DM Mono"
}

.hero {
	height: calc(100vh - 84px);
	min-height: 650px;
	position: relative;
	overflow: hidden;
	background: var(--navy);
	color: white
}

.hero-slides,
.hero-slide {
	position: absolute;
	inset: 0
}

.hero-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s, transform 1.2s;
	transform: scale(1.04);
	background-image: url("images/practice-scenes-v2.png");
	background-size: 300% 270%
}

.hero-slide.active {
	opacity: 1;
	visibility: visible;
	transform: scale(1)
}

.hero-slide--one {
	background-position: 0 -120px
}

.hero-slide--two {
	background-position: 100% -40px;
	background-image: url("images/hero2.jpg"); background-size: cover;
}

.hero-slide--three {
	background-position: 50% 100%
}

.hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 20, 38, .97) 0%, rgba(7, 28, 49, .88) 38%, rgba(7, 28, 49, .18) 72%), linear-gradient(0deg, rgba(4, 18, 34, .6), transparent 45%)
}

.hero-content {
	position: absolute;
	z-index: 1;
	left: 9vw;
	top: 50%;
	transform: translateY(-53%);
	max-width: 850px
}

.hero-content>.eyebrow {
	color: #e3c98f
}

.hero-content h1,
.section h2,
.commitment h2,
.consultation h2 {
	font: 500 clamp(48px, 5vw, 91px)/.94 "Playfair Display", Georgia, serif;
	letter-spacing: -.052em;
	margin: 30px 0
}

.hero-content h1 em,
.section h2 em,
.commitment h2 em,
.consultation h2 em {
	display: block;
	color: #d3ad68;
	font-style: italic
}

.hero-content>p:not(.eyebrow) {
	max-width: 550px;
	color: #d4dee7;
	line-height: 1.7;
	font-size: 17px
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 35px
}

.button {
	display: inline-block;
	padding: 16px 20px;
	font: 500 13px "DM Mono";
	text-transform: uppercase;
	letter-spacing: .06em
}

.button--gold {
	background: var(--gold);
	color: var(--navy)
}

.button b,
.text-link b,
.line-link b {
	font-size: 16px;
	margin-left: 10px
}

.text-link {
	font: 500 13px "DM Mono";
	text-transform: uppercase;
	letter-spacing: .06em
}

.hero-controls {
	position: absolute;
	z-index: 3;
	left: 9vw;
	bottom: 74px;
	display: flex;
	align-items: center;
	gap: 14px
}

.hero-controls button,
.commitment-controls button {
	width: 43px;
	height: 43px;
	border: 1px solid rgba(208, 170, 99, .8);
	background: transparent;
	color: white;
	cursor: pointer;
	font-size: 17px;
	transition: .2s
}

.hero-controls button:hover,
.commitment-controls button:hover {
	background: var(--gold);
	color: var(--navy)
}

.hero-controls>span,
.commitment-controls>span {
	font: 13px "DM Mono";
	min-width: 48px;
	text-align: center
}

.hero-progress {
	width: 105px;
	height: 1px;
	background: rgba(255, 255, 255, .3);
	margin-left: 8px;
	overflow: hidden
}

.hero-progress i {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--gold);
	transform-origin: left
}

@keyframes progress {
	from {
		transform: scaleX(0)
	}

	to {
		transform: scaleX(1)
	}
}

.hero-courts {
	position: absolute;
	z-index: 3;
	right: 5vw;
	bottom: 29px;
	margin: 0;
	display: flex;
	gap: 12px;
	align-items: center;
	color: #fff;
	font: 18px "Playfair Display";
	letter-spacing: .08em;
	text-transform: uppercase
}

.hero-courts span {
	width: 22px;
	height: 1px;
	background: var(--gold)
}

.section {
	padding: 125px 9vw
}

.section-label {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--line);
	padding-top: 16px
}

.section-label span {
	font: 16px "DM Mono";
	color: var(--gold)
}

.intro {
	display: grid;
	grid-template-columns: 22% 1fr;
	gap: 6vw
}

.intro .section-label {
	display: block;
	border: 0;
	padding: 0
}

.intro .section-label span {
	display: block;
	margin-top: 12px
}

.intro-copy {
	max-width: 830px
}

.intro-copy h2 {
	margin-top: 0
}

.intro-copy .large-copy {
	font: 500 25px/1.45 "Playfair Display";
	max-width: 690px
}

.intro-copy>p:not(.large-copy) {
	line-height: 1.75;
	max-width: 620px;
	color: var(--muted)
}

.line-link {
	display: inline-block;
	margin-top: 25px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--gold);
	font: 500 13px "DM Mono";
	letter-spacing: .06em;
	text-transform: uppercase
}

.about-paths {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: white;
	padding: 0 9vw 105px
}

.about-paths>a {
	min-height: 250px;
	padding: 27px;
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	position: relative;
	transition: .3s
}
.about-paths>a img{height:80px; width:auto; margin-bottom:1rem;}

.about-paths>a:last-child {
	border-right: 0
}

.about-paths>a:hover {
	background: var(--ink);
	color: white;
	transform: translateY(-6px)
}

.about-paths small {
	color: var(--gold);
	font: 10px "DM Mono"
}

.about-paths h3 {
	font: 500 28px/1.1 "Playfair Display";
	max-width: 300px
}

.about-paths>a>b {
	position: absolute;
	right: 25px;
	bottom: 23px
}

.forum-strip {
	padding: 29px 5vw;
	background: var(--gold);
	color: var(--navy);
	display: flex;
	align-items: center;
	gap: 4vw
}

.forum-strip>p {
	font: 500 13px "DM Mono";
	text-transform: uppercase;
	letter-spacing: .1em;
	white-space: nowrap
}

.forum-strip>div {
	display: flex;
	gap: 28px;
	overflow: hidden
}

.forum-strip span {
	font: 500 18px "Playfair Display";
	white-space: nowrap
}

.expertise {
	background: white
}

.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 40px;
	margin: 35px 0 65px
}

.section-heading h2 {
	margin: 0
}

.section-heading>p {
	max-width: 420px;
	line-height: 1.7;
	color: var(--muted)
}

.expertise-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #d7dce0
}

.expertise-card {
	aspect-ratio: 1;
	position: relative;
	overflow: hidden;
	color: white;
	background: var(--navy);
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

.expertise-card__image {
	position: absolute;
	inset: 0;
	background-image: url("images/expertise-sprite-v2.png");
	background-size: 400% 300%;
	transition: transform .6s, filter .4s
}

.expertise-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(4, 19, 34, .92), rgba(4, 19, 34, .02) 70%);
	transition: .4s
}

.expertise-card small,
.expertise-card__copy,
.expertise-card>i {
	position: relative;
	z-index: 1
}

.expertise-card small {
	font: 16px "DM Mono";
	color: #e3c98f
}

.expertise-card__copy {
	margin-top: auto
}

.expertise-card__copy b {
	display: block;
	font: 500 24px/1.05 "Playfair Display"
}

.expertise-card__copy em {
	display: block;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	font: normal 16px/1.5 "DM Sans";
	color: #d7e0e8;
	transition: .45s;
	margin-top: 0
}

.expertise-card>i {
	position: absolute;
	right: 20px;
	top: 18px;
	font-style: normal
}

.expertise-card:hover .expertise-card__image {
	transform: scale(1.09);
	filter: saturate(.75)
}

.expertise-card:hover .expertise-card__shade {
	background: linear-gradient(0deg, rgba(4, 19, 34, .98), rgba(4, 19, 34, .28))
}

.expertise-card:hover .expertise-card__copy em {
	max-height: 70px;
	opacity: 1;
	margin-top: 10px
}

.expertise-card--1 .expertise-card__image {
	background-position: 0 0
}

.expertise-card--2 .expertise-card__image {
	background-position: 33.333% 0
}

.expertise-card--3 .expertise-card__image {
	background-position: 66.666% 0
}

.expertise-card--4 .expertise-card__image {
	background-position: 100% 0
}

.expertise-card--5 .expertise-card__image {
	background-position: 0 50%
}

.expertise-card--6 .expertise-card__image {
	background-position: 33.333% 50%
}

.expertise-card--7 .expertise-card__image {
	background-position: 66.666% 50%
}

.expertise-card--8 .expertise-card__image {
	background-position: 100% 50%
}

.expertise-card--9 .expertise-card__image {
	background-position: 0 100%
}

.expertise-card--10 .expertise-card__image {
	background-position: 33.333% 100%
}

.expertise-card--11 .expertise-card__image {
	background-position: 66.666% 100%
}

.expertise-card--12 .expertise-card__image {
	background-position: 100% 100%
}

.commitment {
	padding: 125px 9vw;
	background: var(--navy);
	color: white;
	display: grid;
	grid-template-columns: 39% 1fr;
	gap: 7vw;
	align-items: center
}

.commitment .eyebrow {
	color: #dfc58f
}

.commitment h2 {
	font-size: clamp(44px, 5vw, 72px);
	margin: 28px 0
}

.commitment-copy>p:not(.eyebrow) {
	max-width: 500px;
	line-height: 1.75;
	color: #cfdae3
}

.commitment-controls {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 40px
}

.commitment-slider {
	height: 520px;
	position: relative;
	perspective: 1200px
}

.commitment-slide {
	position: absolute;
	inset: 0;
	overflow: hidden;
	opacity: 0;
	transform: rotateY(13deg) translateX(45px) scale(.94);
	transition: .85s
}

.commitment-slide.active {
	opacity: 1;
	transform: none
}

.commitment-slide img,
.commitment-slide>span {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.commitment-slide--scene>span {
	background-image: url("images/practice-scenes-v2.png");
	background-size: 300% 200%;
	background-position: 0 100%
}

.commitment-slide:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(3, 16, 29, .93), transparent 62%)
}

.commitment-slide>div {
	position: absolute;
	z-index: 1;
	left: 35px;
	right: 30px;
	bottom: 32px
}

.commitment-slide h3 {
	font: 500 37px/1.03 "Playfair Display";
	max-width: 490px;
	margin: 10px 0 0
}

.why {
	background: var(--paper)
}

.why-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 60px
}

.why-grid article {
	padding: 27px;
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line)
}

.why-grid article:last-child {
	border-right: 0
}

.why-grid strong {
	color: var(--gold);
	font: 16px "DM Mono"
}

.why-grid h3 {
	font: 500 27px/1.1 "Playfair Display"
}

.why-grid p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--muted)
}

.insights {
	background: white
}

.insight-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px
}

.insight-grid article {
	border-top: 1px solid var(--line);
	padding-top: 17px
}

.insight-art {
	height: 250px;
	margin-bottom: 25px;
	position: relative;
	overflow: hidden;
	background-image: url("images/practice-scenes-v2.png");
	background-size: 300% 200%
}

.insight-art--one {
	background-position: 0 0
}

.insight-art--two {
	background-position: 0 100%
}

.insight-art--three {
	background-position: 100% 0
}

.insight-art:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(6, 24, 43, .55), transparent)
}

.insight-art span {
	position: absolute;
	z-index: 1;
	left: 18px;
	bottom: 15px;
	color: white;
	font: 13px "DM Mono";
	letter-spacing: .12em
}

.insight-grid h3 {
	font: 500 27px/1.12 "Playfair Display";
	min-height: 92px
}

.insight-grid article>a {
	font: 13px "DM Mono";
	text-transform: uppercase
}

.consultation {
	min-height: 690px;
	position: relative;
	display: flex;
	align-items: center;
	color: white;
	background: var(--navy);
	overflow: hidden
}

.consultation-image {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 21, 39, .98) 3%, rgba(4, 21, 39, .89) 38%, rgba(4, 21, 39, .15) 74%), url("images/corporate-consultation-v2.png") center/cover
}

.consultation-content {
	position: relative;
	z-index: 1;
	margin-left: 9vw;
	max-width: 720px
}

.consultation-content .eyebrow {
	color: #e0c58f
}

.consultation-content h2 {
	margin: 28px 0
}

.consultation-content>p:not(.eyebrow) {
	max-width: 480px;
	line-height: 1.7;
	color: #d1dce5
}

.consultation-content>div {
	display: flex;
	gap: 25px;
	align-items: center;
	margin-top: 32px
}

.site-footer {
	background: #06182b;
	color: #b7c3ce
}

.footer-top {
	padding: 80px 6vw 65px;
	display: grid;
	grid-template-columns: 1.4fr .7fr 1fr 1.4fr;
	gap: 5vw
}

.footer-top>div:not(.footer-brand) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
	font-size: 16px
}

.brand--footer {
	color: white
}
.brand--footer img{filter:invert(1);}

.footer-brand>p {
	max-width: 320px;
	font-size: 16px;
	line-height: 1.7
}

.footer-title {
	color: #e1c58d;
	font: 14px "DM Mono";
	letter-spacing: .12em;
	text-transform: uppercase;
	margin: 0 0 10px
}

.footer-contact p {
	line-height: 1.6;
	margin: 0 0 6px
}

.footer-contact p b {
	display: block;
	color: white;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .08em
}

.footer-contact small {
	margin-top: 8px;
	color: #e1c58d; font-size: 16px;
}

.socials {
	display: flex;
	gap: 9px;
	margin-top: 22px
}

.socials a {
	width: 34px;
	height: 34px;
	border: 1px solid rgba(199, 162, 93, .65);
	display: grid;
	place-items: center;
	border-radius: 50%;
	font: 10px "DM Mono";
	transition: .2s
}
.socials a img{filter:invert(1);}

.socials a:hover {
	background: var(--gold);
	color: var(--navy)
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 23px 6vw;
	display: flex;
	justify-content: space-between;
	font-size: 16px
}

.footer-bottom div {
	display: flex;
	align-items: center;
	gap: 22px
}

.disclaimer {
	position: fixed;
	inset: 0;
	z-index: 100;
	padding: 20px;
	background: rgba(3, 16, 29, .9);
	backdrop-filter: blur(8px);
	display: grid;
	place-items: center
}

.disclaimer.is-hidden {
	display: none
}

.disclaimer__box {
	max-width: 680px;
	background: var(--paper);
	padding: 30px;
	color: var(--ink);
	box-shadow: 0 25px 90px rgba(0, 0, 0, .45)
}

.disclaimer__box h1 {
	font: 500 40px "Playfair Display";
	margin: 12px 0 22px
}

.disclaimer__box p:not(.eyebrow) {
	font-size: 15px;
	line-height: 1.7
}
.disclaimer__box ol{margin:0 0 0 25px; padding:0;}
.disclaimer__box ol li{margin:10px 0; padding:0; font-size: 15px;}

.disclaimer__box button {
	border: 0;
	background: var(--ink);
	color: white;
	padding: 15px 20px;
	margin-top: 15px;
	cursor: pointer;
	font: 500 14px "DM Mono";
	letter-spacing: .06em;
	text-transform: uppercase
}

@media(max-width:1000px) {
	.main-navigation {
		gap: 13px
	}

	.dropdown--expertise {
		width: 520px
	}

	.expertise-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.commitment {
		grid-template-columns: 1fr
	}

	.commitment-slider {
		height: 470px
	}

	.footer-top {
		grid-template-columns: 1fr 1fr
	}

	.hero-content {
		left: 7vw
	}

	.section,
	.commitment {
		padding-left: 7vw;
		padding-right: 7vw
	}
}

@media(max-width:820px) {
	.site-header {
		height: 72px;
		padding: 0 6vw
	}

	.menu-toggle {
		display: block
	}

	.main-navigation {
		display: none;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		height: auto;
		padding: 22px;
		background: white;
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		box-shadow: 0 15px 30px rgba(0, 0, 0, .12);
		max-height: calc(100vh - 72px);
		overflow: auto
	}

	.main-navigation.is-open {
		display: flex
	}

	.main-navigation>a,
	.nav-group>button {
		display: block;
		width: 100%;
		padding: 12px 0;
		text-align: left
	}

	.nav-group {
		height: auto
	}

	.dropdown,
	.dropdown--expertise {
		position: static;
		width: 100%;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		padding: 5px 0 10px
	}

	.nav-group.is-open .dropdown {
		display: grid
	}

	.dropdown--expertise {
		grid-template-columns: 1fr
	}

	.header-cta {
		margin-top: 8px;
		text-align: center !important
	}

	.hero {
		height: 760px;
		min-height: 0
	}

	.hero-content {
		left: 7vw;
		right: 7vw;
		top: 45%
	}

	.hero-content h1 {
		font-size: 57px
	}

	.hero-content>p:not(.eyebrow) {
		font-size: 14px
	}

	.hero-actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px
	}

	.hero-controls {
		left: 7vw;
		bottom: 70px
	}

	.hero-courts {
		display: none
	}

	.section {
		padding: 80px 7vw
	}

	.intro {
		display: block
	}

	.intro .section-label {
		margin-bottom: 28px
	}

	.section-heading {
		display: block;
		margin-bottom: 40px
	}

	.section-heading>p {
		margin-top: 24px
	}

	.about-paths {
		grid-template-columns: 1fr;
		padding: 0 7vw 70px
	}

	.about-paths>a {
		border-right: 0;
		min-height: 210px
	}

	.forum-strip {
		display: block;
		padding: 25px 7vw
	}

	.forum-strip>div {
		overflow-x: auto;
		padding-bottom: 8px
	}

	.expertise-grid {
		grid-template-columns: 1fr 1fr
	}

	.expertise-card__copy b {
		font-size: 18px
	}

	.commitment {
		padding: 80px 7vw
	}

	.commitment-slider {
		height: 340px;
		margin-top: 45px
	}

	.commitment-slide h3 {
		font-size: 28px
	}

	.why-grid {
		grid-template-columns: 1fr 1fr
	}

	.insight-grid {
		grid-template-columns: 1fr
	}

	.insight-grid h3 {
		min-height: 0
	}

	.consultation {
		min-height: 670px
	}

	.consultation-content {
		margin: 0 7vw
	}

	.consultation-content h2 {
		font-size: 51px
	}

	.consultation-content>div {
		align-items: flex-start;
		flex-direction: column
	}

	.footer-top {
		padding: 65px 7vw;
		grid-template-columns: 1fr
	}

	.footer-bottom {
		padding: 23px 7vw;
		display: block
	}

	.footer-bottom div {
		margin-top: 15px;
		flex-wrap: wrap
	}

	.disclaimer__box {
		padding: 35px 27px
	}

	.disclaimer__box h1 {
		font-size: 42px
	}
}

@media(max-width:460px) {

	.expertise-grid,
	.why-grid {
		grid-template-columns: 1fr
	}

	.expertise-card {
		aspect-ratio: 1.12
	}

	.hero-content h1 {
		font-size: 49px
	}

	.section h2,
	.commitment h2,
	.consultation h2 {
		font-size: 44px
	}

	.hero-progress {
		display: none
	}
}

@media(prefers-reduced-motion:reduce) {
	* {
		scroll-behavior: auto !important;
		animation: none !important;
		transition: none !important
	}
}

#about .disclaimer__box{max-width:800px; overflow:auto; max-height:90vh; position:relative;}
#about .disclaimer__box button{background:none; padding:0; color:#0c2745; font-size:22px; position:absolute; top:0; right:15px;}
