/**
 * Global reusable components — Trammell, Adkins & Ward, P.C.
 *
 * BRIEF rule 4:  shared classes for repeated elements.
 * BRIEF rule 6:  same values => same base class; a parent overrides only the
 *                differing value. Never duplicate a full style block.
 * BRIEF rule 2:  Flexbox only, never CSS Grid.
 * BRIEF rule 20: never size via flex shorthand basis — use explicit
 *                width / max-width / %, and use flex only for
 *                direction / alignment / wrapping.
 */

/* =======================================================================
 * Layout
 * ======================================================================= */

/**
 * Global container. BRIEF rule 18 — the 15px inline padding sits OUTSIDE the
 * 1540px content box on every screen, so content never touches the edge.
 */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + (var(--container-pad) * 2));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Section wrapper — consistent vertical rhythm, scales down fluidly. */
.section {
	position: relative;
	padding-block: var(--section-pad-y);
}

/* Background modifiers — values from each section's extracted spec. */
.section--dark {
	background-color: var(--clr-dark-ground);
	color: var(--clr-white);
}

.section--gray {
	background-color: var(--clr-gray-ground);
	color: var(--clr-white);
}

.section--light {
	background-color: var(--clr-white);
	color: var(--clr-body-text);
}

/* Shared flex row used by every multi-column block. */
.row {
	display: flex;
	flex-wrap: wrap;
}

/* =======================================================================
 * Typography
 * ======================================================================= */

/**
 * Eyebrow. Colour deliberately NOT set here — it differs per section
 * (gold in Practice Areas, muted in Meet Our Attorneys), so the parent
 * overrides only that one value. BRIEF rule 6.
 */
.eyebrow {
	display: block;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}

.eyebrow--gold {
	color: var(--clr-eyebrow);
}

.eyebrow--muted {
	color: var(--clr-muted);
}
	.cta__content .eyebrow--muted {
		color: var(--clr-dark);
	}

.eyebrow--on-dark {
	color: var(--clr-eyebrow);
}

/**
 * Section heading. Base style only — each section overrides size/colour from
 * its own parent rule rather than redeclaring the block.
 */
.heading {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-heading);
	font-weight: var(--fw-regular);
	line-height: var(--lh-heading);
	color: var(--clr-heading);
}

.heading--on-dark {
	color: var(--clr-heading-on-dark);
}

/* The italic accent word inside a heading ("Meet", "practice areas"). */
.heading__accent {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-style: italic;
}

/* Body / description copy. */
.desc {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body);
}

.desc--muted {
	color: var(--clr-muted);
}

.desc--on-dark {
	color: var(--clr-muted-on-dark);
}

/* Large stat number (18+, 100+, 24/7, 100s). */
.stat-number {
	display: block;
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-stat);
	font-weight: var(--fw-bold);
	font-style: italic;
	line-height: var(--lh-stat); /* 65 / 60 */
	color: var(--clr-stat);
}

/* Small uppercase role label ("SHAREHOLDERS"). */
.role-label {
	font-family: var(--font-body);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-role);
	text-transform: uppercase;
}

/* Grouped section header (eyebrow + heading + intro), centred by default. */
.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-15);
	text-align: center;
}

.section-head--start {
	align-items: flex-start;
	text-align: left;
}

/* =======================================================================
 * Buttons — one base + modifiers. BRIEF rule 2.4.
 * Link data always comes from an ACF Link field returning an array.
 * ======================================================================= */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-10);
	padding: var(--btn-pad-y) var(--btn-pad-x);
	border: 1px solid transparent;
	border-radius: var(--radius-none);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-btn);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition),
		border-color var(--transition);
}

/* Solid gold — the design's primary action. */
.btn--gold {
	background-color: var(--clr-gold);
	border-color: var(--clr-gold);
	color: var(--clr-white);
}

.btn--gold:hover,
.btn--gold:focus-visible {
	background-color: var(--clr-gold-light);
	border-color: var(--clr-gold-light);
	color: var(--clr-black);
}

/**
 * Text-only gold buttons carry a small white corner wedge — measured 10x10,
 * inset 7px from the left and bottom. The phone-number buttons in the header
 * and the CTA banner do not have it, so a button holding an icon opts out.
 */
.btn--gold::after {
	content: "";
	position: absolute;
	left: var(--sp-7);
	bottom: var(--sp-7);
	width: 10px;
	height: 10px;
	background-color: var(--clr-white);
	-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
	clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.btn--gold:has(.btn__icon)::after {
	display: none;
}

/**
 * Transparent / outline. BRIEF rule 14 — gold as a background is the HOVER
 * state, so the default here is deliberately transparent.
 */
.btn--outline {
	background-color: transparent;
	border-color: var(--clr-white);
	color: var(--clr-white);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background-color: var(--clr-gold);
	border-color: var(--clr-gold);
	color: var(--clr-white);
}

.btn--outline-dark {
	background-color: transparent;
	border-color: var(--clr-black);
	color: var(--clr-black);
}

.btn--outline-dark:hover,
.btn--outline-dark:focus-visible {
	background-color: var(--clr-gold);
	border-color: var(--clr-gold);
	color: var(--clr-white);
}

/* Icons inside buttons. The phone handset is 20x20 in the design. */
.btn__icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	flex-shrink: 0;
}

/**
 * Text link with a trailing arrow — the hero's second action and the About
 * button. The design draws these underlined with no border or fill, and the
 * arrow measures 24x20.
 */
.btn--link {
	align-items: flex-start;
	gap: 18px;
	padding: 0;
	background-color: transparent;
	border: 0;
	color: var(--clr-white);
}

.btn--link .btn__label {
	display: inline-block;
	padding-bottom: 7px;
	border-bottom: 1px solid currentColor;
}

.btn--link .btn__icon {
	width: 24px;
	height: 20px;
	color: var(--clr-gold);
}

.btn--link:hover,
.btn--link:focus-visible {
	color: var(--clr-gold);
}

/* =======================================================================
 * Cards — shared shell for practice-area cards, attorney cards, info boxes.
 * ======================================================================= */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-30);
	background-color: transparent;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Gold state. BRIEF rule 14 — this is the HOVER state, not a default. */
.card:hover,
.card:focus-within {
	background-color: var(--clr-gold);
	color: var(--clr-white);
}

/* Header row inside a card: title left, arrow top-right. */
/* Figma closes the title row with a 1px rule across the card's content width. */
.card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-15);
	padding-bottom: var(--card-head-pad);
	border-bottom: 1px solid rgba(255, 255, 255, 0.33);
}

.card__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-card-title);
	font-weight: var(--fw-regular);
	line-height: var(--lh-card-title); /* 32 / 27 */
}

/**
 * The arrow glyph is 36x31. Figma draws it at FULL size on a practice card,
 * rotated -45deg — a 47x47 bounding box at rest (measured on cards 2-6) — and
 * straightens it to 36x31 on hover (card 1 is the hover demo frame). The size
 * never changes; only the rotation does.
 */
/**
 * 36x31 glyph, rotated -45deg at rest so it spans the 47x47 the design shows,
 * straightening to 36x31 on hover. The inline margins reserve that width so the
 * swing turns about a fixed centre instead of reading as a jerk; the extra
 * height overflows the title row, exactly as it does in the design.
 */
.card__arrow {
	width: 36px;
	height: 30px;
	flex-shrink: 0;
	color: var(--clr-gold);
	transform-origin: 50% 50%;
	will-change: transform;
	transition: color 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .card__arrow, .card:focus-within .card__arrow {
    color: var(--clr-white);
    transform: rotate(45deg);
}
.practice__card:hover path, .card:focus-within path {
    fill: #fff;
}
svg.card__arrow path {
    transition: color 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card media — fixed ratio so siblings align. BRIEF rule 21. */
.card__media {
	width: 100%;
	overflow: hidden;
}

.card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover .card__media img,
.card:focus-within .card__media img {
	transform: scale(1.05);
}

/* Stretched link so the whole card is clickable without nesting anchors. */
.card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* =======================================================================
 * Utilities
 * ======================================================================= */

.divider {
	width: 100%;
	height: 1px;
	border: 0;
	background-color: var(--clr-divider);
	opacity: 0.3;
}

.text-center {
	text-align: center;
}

.is-hidden {
	display: none;
}

/* =======================================================================
 * SITE HEADER — BRIEF sections 1 (Top Bar) and 2 (Navigation)
 * ======================================================================= */

/**
 * The header bar runs the full width of the viewport — the logo block is flush
 * to the left edge, so these rows clear it instead of using the 1540 container.
 * Measured at the 1920 canvas: content starts at 225 and ends 60 from the right.
 */
.site-header {
	position: relative;
}

.header-bar {
	width: 100%;
	padding-left: calc(var(--logo-block) + var(--logo-gap));
	padding-right: 60px;
}

.topbar {
	background-color: var(--clr-white);
}

.topbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-15);
	padding-block: var(--sp-15);
	border-bottom: 1px solid var(--clr-divider);
}

.topbar__group {
	display: flex;
	align-items: center;
	gap: var(--sp-10);
	font-size: var(--fs-eyebrow);
	line-height: var(--lh-topbar);
}

.topbar__icon {
	width: var(--icon-sm);
	height: var(--icon-sm);
	flex-shrink: 0;
	color: var(--clr-gold-light);
}

.topbar__label {
	color: var(--clr-muted);
}

.topbar__link,
.topbar__value {
	font-weight: var(--fw-bold);
	color: #333333;
}

.topbar__link:hover,
.topbar__link:focus-visible {
	color: var(--clr-gold);
}

.masthead__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-30);
	padding-block: 9.5px;
}

/**
 * The logo sits in a 178x178 dark block flush to the left edge of the
 * viewport, overhanging the white header bar by 49px. The block and its gold
 * corner are built here — only the plain monogram is uploaded (BRIEF rule 16).
 */
.site-branding {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--logo-block);
	/**
	 * Height is the white bar's OWN height plus the accent, not a fixed square.
	 * At 1920 that is 130 + 48 = 178, the design's square, so desktop is
	 * unchanged - but below 1024 the top bar is hidden and the bar collapses to
	 * 55px, where a fixed 178 left 45px of bare dark block between the bar and
	 * the gold corner. Deriving it keeps the corner flush at every width.
	 */
	height: calc(100% + var(--logo-accent-h));
	background-color: var(--clr-dark);
}

.site-branding__link {
	display: flex;
	align-items: center;
	justify-content: center;
	/**
	 * Fills the whole dark block so the logo tile AND its background are one
	 * click target. With only `display: flex` the anchor shrank to the 92px
	 * monogram, leaving 76% of the block dead to the pointer.
	 */
	width: 100%;
	height: 100%;
}

.site-branding__logo {
	/* width: calc(var(--logo-block) * 92 / 178); */
	width: calc(var(--logo-block) * 69.6 / 81.7);
	height: auto;
}

.site-branding__text {
	font-family: var(--font-heading);
	font-size: var(--fs-card-title);
	color: var(--clr-black);
}

/**
 * The gold corner beside the logo block — 23x48, starting where the white
 * header bar ends and running to the bottom of the block.
 */
.site-branding__accent {
	position: absolute;
	left: 100%;
	bottom: 0;
	width: var(--logo-accent-w);
	height: var(--logo-accent-h);
	background-color: var(--clr-gold-light);
	-webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.main-navigation__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nav-gap);
}

.main-navigation__list a {
	font-size: var(--fs-body);
	color: var(--clr-black);
	transition: color var(--transition);
}

.main-navigation__list a:hover,
.main-navigation__list a:focus-visible,
.main-navigation__list .current-menu-item > a {
	color: var(--clr-gold);
}

.main-navigation__list .current-menu-item > a {
	font-weight: 700;
}


/* Header submenu: keep the top-level navigation layout unchanged. */
.main-navigation__list > .menu-item-has-children {
	position: relative;
}

.main-navigation__list > .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.main-navigation__list > .menu-item-has-children > a::after {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	content: '';
	transform: translateY(-2px) rotate(45deg);
	transition: border-color var(--transition), transform var(--transition);
}

.main-navigation__list > .menu-item-has-children > .submenu-toggle {
	display: none;
}

.main-navigation__list > .menu-item-has-children > .sub-menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	z-index: 10;
	min-width: 238px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background-color: var(--clr-dark-ground);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
	will-change: opacity, transform;
}

.main-navigation__list > .menu-item-has-children > .sub-menu::before {
	position: absolute;
	top: -6px;
	left: calc(50% - 8px);
	width: 16px;
	height: 16px;
	background-color: var(--clr-dark-ground);
	content: '';
	transform: rotate(45deg);
}

.main-navigation__list > .menu-item-has-children:hover > .sub-menu,
.main-navigation__list > .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.main-navigation__list > .menu-item-has-children:hover > a::after,
.main-navigation__list > .menu-item-has-children:focus-within > a::after,
.main-navigation__list > .menu-item-has-children.current-menu-ancestor > a::after,
.main-navigation__list > .menu-item-has-children.current-menu-parent > a::after {
	border-color: var(--clr-gold);
	transform: translateY(2px) rotate(225deg);
}

.main-navigation__list > .menu-item-has-children > .sub-menu > li {
	position: relative;
	z-index: 1;
}

.main-navigation__list > .menu-item-has-children > .sub-menu > li > a {
	display: block;
	padding: 11px 20px;
	font-size: var(--fs-eyebrow);
	line-height: 1.35;
	color: var(--clr-white);
	white-space: normal;
}

.main-navigation__list > .menu-item-has-children > .sub-menu > li > a:hover,
.main-navigation__list > .menu-item-has-children > .sub-menu > li > a:focus-visible,
.main-navigation__list > .menu-item-has-children > .sub-menu > li.current-menu-item > a,
.main-navigation__list > .menu-item-has-children > .sub-menu > li.current-menu-ancestor > a {
	color: var(--clr-black);
	background-color: var(--clr-gold-light);
}

.main-navigation__list > .menu-item-has-children.current-menu-ancestor > a,
.main-navigation__list > .menu-item-has-children.current-menu-parent > a {
	color: var(--clr-gold);
	font-weight: 700;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: var(--sp-10);
	background: none;
}

.nav-toggle__bar {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--clr-black);
	transition: transform 0.3s ease, opacity 0.2s ease;
}

/* The three bars fold into a cross while the drawer is open. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/**
 * Drawer-only rows: the hours line and the phone button. Desktop shows the top
 * bar and masthead copies instead, so exactly one of each is ever visible.
 */
.main-navigation__extras,
.nav-backdrop {
	display: none;
}

.main-navigation__hours {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-10);
	font-size: var(--fs-eyebrow);
	line-height: var(--lh-topbar);
}

/* =======================================================================
 * CALL TO ACTION banner — part of the footer, shown site-wide.
 * The blue is the sky in the photograph, not a CSS gradient.
 * ======================================================================= */

/**
 * Figma: cta_banner is 443px tall at the top of this block, and the footer's
 * dark ground begins 243px before the banner ends. The section itself carries no
 * background — what shows beside the banner is the map section above it.
 */
.cta {
	position: relative;
	z-index: 1;
	padding-block: 0;
}

.cta__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: var(--cta-banner-h);
	background-color: var(--clr-white);
	background-position: left center;
	background-size: cover;
	background-repeat: no-repeat;
}

.cta__media {
	width: 50%;
}

.cta__media img {
	width: 100%;
	height: auto;
}

/**
 * The content always sits in the right half. `margin-left: auto` keeps it there
 * whether or not the optional foreground image renders — without it, an empty
 * foreground field lets the text fall to the left and collide with the statue.
 */
/**
 * Right-aligned in the 1540 banner. Figma starts this block 895px in, and
 * (1540 - width) + 50px of padding is what has to land on 895 — so 45%, not
 * 50%, which put it 67px too far left.
 */
.cta__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-20);
	width: 45%;
	margin-left: auto;
	padding: var(--cta-content-pad);
}

.cta__heading {
	max-width: 460px;
}

/* =======================================================================
 * SITE FOOTER — BRIEF section 9
 * ======================================================================= */

/**
 * The CTA banner overlaps the footer in the design: the banner runs from 52px
 * above this block to y442, and the dark footer starts at y200. The footer's
 * 348px top padding is the room that overlap needs.
 */
.site-footer {
	position: relative;
	overflow: hidden; /* clips the oversized watermark layer */
	margin-top: calc(var(--footer-overlap) * -1);
	padding-block: var(--footer-pad-top) var(--footer-pad-bottom);
	background-color: var(--clr-dark-ground);
	color: var(--clr-white);
}

/**
 * Figma: icon_1 is 1326x1171 at x712 y167 within this block, and the footer's
 * own top starts at y200 — so the visible slice is exactly the 1208x776 that
 * footer-icon.svg was exported at. Place it, don't centre it.
 */
.site-footer__pattern {
    position: absolute;
    background-repeat: no-repeat;
    pointer-events: none;
    inset: 0;
	background-size: cover;
}

.site-footer .container {
	position: relative;
	z-index: 1;
}

.site-footer__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--footer-row-gap);
	padding-bottom: var(--footer-row-gap);
}

.site-footer__col--brand {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--footer-brand-gap);
	width: 40%;
}

/**
 * The monogram column and the copy sit side by side. Figma keeps the firm name
 * and the sentence in ONE 373px text block, which is what wraps the name onto
 * two lines; the button then sits 32px below it.
 */
/**
 * Wrap under the monogram only when the column really is too narrow for it - at
 * 320 the column is 275 wide and the copy was being crushed to 122px, breaking
 * after almost every word.
 *
 * A flex line wraps on the item's HYPOTHETICAL size, and wrapping beats
 * shrinking - so declaring the design's 373px here made it jump under the
 * monogram at 1200 and 1024, where shrinking a few px was all that was needed.
 * Declaring the floor and growing up to 373 gets the order right: shrink first,
 * wrap only below the floor. At 1920 it still grows to the design's 373.
 */
.site-footer__brand-text {
	width: 240px;
	max-width: 373px;
	flex-grow: 1;
}

.site-footer__col--links {
	width: auto;
	margin-left: auto;
	padding-right: var(--sp-80);
	    border-right: 2px solid #333333;
    margin-right: 30px;
}

.site-footer__col--contact {
	width: auto;
}

/**
 * The footer monogram stands on a dark column — a 46x193 shaft with a flared
 * foot, measured from the design. Only the monogram is uploaded; the column is
 * drawn here (BRIEF rule 16).
 */
.site-footer__logo {
	position: relative;
	flex-shrink: 0;
	width: var(--footer-logo-w);
}

.site-footer__logo img {
	position: relative;
	z-index: 1;
	width: var(--footer-logo-w);
	height: auto;
}

.site-footer__logo::before {
    content: "";
    position: absolute;
    left: calc(var(--footer-logo-w) * 14 / 92);
    top: calc(var(--footer-logo-w) * 85 / 92);
    width: 59px;
    height: 193px;
    background-image: url(/wp-content/uploads/2026/08/Union-2.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.site-footer__firm {
	margin-block: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-card-title);
	line-height: var(--lh-card-title);
	font-style: italic;
	font-weight: var(--fw-bold);
	color: var(--clr-white);
	margin-bottom: 6px;
}

.site-footer__about {
	color: var(--clr-white);
}
.site-footer__copyright p,.site-footer__bottom-link  {
    font-size: var(--fs-body);
    color: #fff;
    font-weight: 400;
}
.site-footer__cta {
	margin-top: var(--footer-cta-mt);
}

.site-footer__title {
	margin-bottom: var(--sp-25);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
	color: var(--clr-muted);
}

.site-footer__menu {
	display: flex;
	flex-direction: column;
	gap: var(--sp-15);
}

.site-footer__menu a,
.site-footer__bottom-link {
	color: var(--clr-border);
	transition: var(--clr-white);
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible,
.site-footer__bottom-link:hover,
.site-footer__bottom-link:focus-visible {
	color: var(--clr-gold);
}

/**
 * Footer contact rows, measured off 00-full-page-desktop.png: every icon is a
 * 20px-wide gold glyph at its natural height (the pin is 20x27), sharing one
 * left edge with the column heading, top-aligned to the first text line, with
 * 20px to the copy and 20px between rows. The copy is white, not the muted
 * border grey, and its leading is tighter than body copy so the two-line
 * address closes up the way the design draws it.
 */
.site-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--sp-20);
}

.contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-20);
}

.contact-item__icon {
	display: flex;
	flex-shrink: 0;
	width: var(--icon-sm);
}

.contact-item__icon img {
	width: var(--icon-sm);
	height: auto;
	object-fit: contain;
}

.contact-item__value {
	font-size: var(--fs-body);
	line-height: 1.3em; /* 23 / 18, measured on the two-line address */
	color: var(--clr-white);
}

/* The number is a link inside the value editor, like the office boxes. */
.contact-item__value a {
	color: inherit;
	text-decoration: none;
}

.contact-item__value a:hover,
.contact-item__value a:focus-visible {
	color: var(--clr-gold-light);
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-15);
	padding-block: var(--footer-bottom-pad);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--fs-eyebrow);
	color: var(--clr-muted);
}

.site-footer__bottom-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-15);
}

.site-footer__bottom-item + .site-footer__bottom-item {
	padding-left: var(--sp-15);
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* =======================================================================
 * MEDIA QUERIES — desktop-first, only where a change is needed.
 * ======================================================================= */

 
@media (min-width: 1361px) {
 .site-footer__bottom {
   margin-top: -4px;
}
}

@media (max-width: 1600px) {
.header-bar {
	padding-right: 15px;
}
}
@media (max-width: 1360px) {
 .site-footer__logo::before {
    left: calc(var(--footer-logo-w) * 12 / 92);
    width: 58px;
    height: 193px;
}
}

@media (max-width: 1280px) {
 .site-footer__logo::before {
    height: 185px;
}
}

@media (max-width: 1200px) {
 .site-footer__logo::before {
    height: 181px;
}
.site-branding__logo {
	width: calc(var(--logo-block) * 72.6 / 81.7);
	height: auto;
}
}

@media (max-width: 1024px) {
	.nav-toggle {
		position: relative;
		z-index: 9999;
		display: flex;
		order: 3;
	}

	/**
	 * The menu becomes a panel that slides in from the right — the side the
	 * toggle sits on — carrying the hours row and the phone button beneath the
	 * links.
	 */
	.main-navigation {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-30);
		width: 360px;
		max-width: 86vw;
		padding: 100px var(--sp-30) var(--sp-30);
		overflow-y: auto;
		background-color: var(--clr-white);
		box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
		transform: translateX(100%);
		transition: transform 0.35s ease;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	/* Only present once the toggle has opened the drawer, and it fades. */
	.nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 60;
		background-color: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	body.nav-open .nav-backdrop {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	body.nav-open {
		overflow: hidden;
	}

	/* The toggle sits at the right-hand end of the row at these widths. */
	.masthead__row {
		justify-content: flex-end;
	}

	.main-navigation__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 15px;
	}

	.main-navigation__list > .menu-item-has-children {
		display: grid;
		align-items: center;
		grid-template-columns: minmax(0, 1fr) 40px;
		width: 100%;
	}

	.main-navigation__list > .menu-item-has-children > a {
		min-width: 0;
	}

	.main-navigation__list > .menu-item-has-children > a::after {
		display: none;
	}

	.main-navigation__list > .menu-item-has-children > .submenu-toggle {
		position: relative;
		display: block;
		grid-column: 2;
		grid-row: 1;
		width: 40px;
		height: 40px;
		margin-left: 8px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--clr-dark);
		cursor: pointer;
	}

	.main-navigation__list > .menu-item-has-children > .submenu-toggle::before {
		position: absolute;
		top: 14px;
		left: 14px;
		width: 8px;
		height: 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		content: '';
		transform: rotate(45deg);
		transition: border-color 0.2s ease, transform 0.24s ease;
	}

	.main-navigation__list > .menu-item-has-children > .submenu-toggle:hover,
	.main-navigation__list > .menu-item-has-children > .submenu-toggle:focus-visible {
		color: var(--clr-gold);
	}

	.main-navigation__list > .menu-item-has-children.submenu-open > .submenu-toggle {
		color: var(--clr-gold);
	}

	.main-navigation__list > .menu-item-has-children.submenu-open > .submenu-toggle::before {
		transform: translateY(4px) rotate(225deg);
	}

	.main-navigation__list > .menu-item-has-children > .sub-menu {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		grid-column: 1 / -1;
		grid-row: 2;
		display: block;
		justify-self: stretch;
		width: 100%;
		min-width: 0;
		max-height: 0;
		margin-top: 0;
		padding: 0 0 0 15px;
		overflow: hidden;
		border-left: 2px solid var(--clr-gold);
		background-color: transparent;
		box-shadow: none;
		opacity: 0;
		visibility: hidden;
		transform: none;
		transition: max-height 0.3s ease, margin-top 0.3s ease, padding 0.3s ease,
			opacity 0.2s ease, visibility 0.3s ease;
		will-change: auto;
	}

	.main-navigation__list > .menu-item-has-children.submenu-open > .sub-menu {
		max-height: 800px;
		margin-top: 8px;
		padding: 5px 0 5px 15px;
		opacity: 1;
		visibility: visible;
		transform: none !important;
	}
.main-navigation__list > .menu-item-has-children:hover > .sub-menu, .main-navigation__list > .menu-item-has-children:focus-within > .sub-menu {
    transform: none !important;
}
	.main-navigation__list > .menu-item-has-children > .sub-menu::before {
		display: none;
	}

	.main-navigation__list > .menu-item-has-children > .sub-menu > li > a {
		padding: 8px 10px;
		color: var(--clr-muted);
	}

	.main-navigation__list > .menu-item-has-children > .sub-menu > li > a:hover,
	.main-navigation__list > .menu-item-has-children > .sub-menu > li > a:focus-visible,
	.main-navigation__list > .menu-item-has-children > .sub-menu > li.current-menu-item > a,
	.main-navigation__list > .menu-item-has-children > .sub-menu > li.current-menu-ancestor > a {
		color: var(--clr-gold);
		background-color: transparent;
	}

	/* Hours sits above the phone button inside the drawer. */
	.main-navigation__extras {
		display: flex;
		flex-direction: column;
		gap: var(--sp-20);
		margin-top: auto;
		padding-top: var(--sp-25);
		border-top: 1px solid var(--clr-divider);
	}

	.main-navigation__cta {
		width: 100%;
	}

	/**
	 * The whole top bar goes from here down, not at 767. Both of its rows are
	 * already in the drawer (hours line + gold phone button), and once the
	 * hours row went the surviving phone row was stranded at the left of a
	 * space-between row with 280-536px of dead space beside it.
	 */
	.topbar {
		display: none;
	}

	.masthead__cta {
		display: none;
	}


	/**
	 * The pedestal only has room beside the desktop two-column brand block.
	 * Stacked, its 193px runs straight down over the Quick Links heading.
	 */
	.site-footer__logo::before,
	.site-footer__logo::after {
		display: none;
	}

	.cta__media,
	.cta__content {
		width: 100%;
	}

	/* Stacked, the copy sits over the photograph — a scrim keeps it readable. */
	.cta__inner {
		background-size: cover;
		background-position: center;
	}

	.cta__inner::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(255, 255, 255, 0.92);
	}

	/**
	 * Stacked, the copy sits directly over the statue. At 0.75 the artwork still
	 * showed through as noise behind the text, and the muted #818181 eyebrow only
	 * reached ~3.5:1 against it. A near-solid ground plus the dark eyebrow puts
	 * every line comfortably above 4.5:1.
	 */
	.cta__content .eyebrow--muted {
		color: var(--clr-dark);
	}

	.cta__content {
		position: relative;
		z-index: 1;
	}

	/**
	 * Stack rather than go two-up. Two-up left Contact Us alone on row two with
	 * 53% of the width empty beside it; stacking is what <=767 already did, so
	 * the footer has ONE behaviour from 1024 down instead of two.
	 */
	.site-footer__col--brand,
	.site-footer__col--links,
	.site-footer__col--contact {
		width: 100%;
	}
		.site-footer__col--links {
		margin-left: 0;
		padding-right: 0;
        margin-right: 100px;
	}
.site-footer__col--links, .site-footer__col--contact {
    width: 300px;
}
.site-footer__row{
	justify-content: flex-start;
}
}

@media (max-width: 767px) {
	.header-bar {
		padding-right: var(--container-pad);
	}
		/* Stacked columns align to the left edge like everything else. */
	.site-footer__col--links {
		border-right: 0;
        margin-right: 0;
	}
.site-footer__col--links, .site-footer__col--contact {
    width: 100%;
}

}

@media (max-width: 479px) {
	.masthead__row {
		flex-wrap: wrap;
		row-gap: var(--sp-15);
	}
}


/* =======================================================================
 * Shared hover smoothing — every interactive colour change eases rather than
 * snapping. Collected here so no rule has to remember it individually.
 * ======================================================================= */

.main-navigation__list a,
.site-footer__menu a,
.site-footer__bottom-link,
.topbar__link,
.contact-item__value a,
.site-branding__link,
.wysiwyg a,
.card__link,
.card__title,
.attorney-card__role,
.office-box__label {
	transition: color var(--transition), background-color var(--transition),
		border-color var(--transition), opacity var(--transition);
}