/**
 * Homepage — all sections, one stylesheet.
 *
 * BRIEF rule 1:  vanilla CSS only.
 * BRIEF rule 2:  Flexbox only, never CSS Grid.
 * BRIEF rule 20: never size via flex-basis — explicit width / max-width / %.
 *
 * Responsive policy: desktop-first max-width queries at 1600 / 1440 / 1360 /
 * 1200 / 1024 / 767 / 640 / 479 only. Least CSS possible; no block exists for a
 * width that needs no change. All media queries are at the BOTTOM of this file.
 *
 *   3. Hero
 *   4. About the Firm
 *   5. Practice Areas
 *   6. Meet Our Attorneys
 *   7. Office Address (with map)
 */

/* =======================================================================
 * 3. HERO
 * ======================================================================= */

/**
 * The design's 1080px hero frame INCLUDES the 129px header bar, so the hero's
 * own visual area is 951px — header plus hero fills exactly one screen.
 */
.hero {
	display: flex;
	align-items: center;
	min-height: calc(100vh - 130px);
	padding-bottom: 201px;
    padding-top: 206px;
	background-color: var(--clr-black);
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* .hero__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.18);
} */

/* The monogram watermark — 1314x1161 at 3%, exactly as the design draws it. */
.hero__pattern {
	position: absolute;
	top: 80px;
	left: 0;
	width: 759px;
	height: 870px;
	background-position: left top;
	background-size: 759px 870px;
	background-repeat: no-repeat;
	pointer-events: none;
}

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

.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-25);
	max-width: 1100px;
	margin-inline: auto;
	text-align: center;
}

.hero__heading {
	font-size: var(--fs-hero);
	line-height: var(--lh-tight); /* 85 / 80 */
}

.hero__subline {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--fs-hero-sub);
	font-style: italic;
	font-weight: var(--fw-bold);
	line-height: 1.2em;
	color: var(--clr-white);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-30);
	margin-top: var(--sp-15);
}

.hero__actions .btn--link {
	border-bottom: 0;
}

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

/* .hero__actions .btn--link .btn__icon {
	width: 24px;
	height: 17px;
} */

.hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--badge-gap);
	margin-top: var(--badge-mt);
}

.hero__badge {
	position: relative;
}

/* The design separates the two seals with a hairline rule. */
.hero__badge + .hero__badge::before {
	content: "";
	position: absolute;
	left: calc(var(--badge-gap) / 2 * -1);
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.3);
}

.hero__badge img {
	max-height: 80px;
	width: auto;
}

/* =======================================================================
 * 4. ABOUT THE FIRM
 * ======================================================================= */

.about {
	position: relative;
	padding-block: 0 var(--section-pad-y);
}

/* The design lays this image over the #818181 section fill at 60%. */
/* Figma: aboutbg_1 is a 1077x769 panel at x999 — the right half of the section,
 * not a full-bleed wash. It runs off the right edge by 156px. */
.about__bg {
    position: absolute;
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    inset: 0;
}

.about > .container {
	position: relative;
	z-index: 1;
}

/**
 * Figma starts BOTH the copy and the stats at y150 and hangs the photo off the
 * row's bottom edge. Bottom-aligning the whole row instead made each column's
 * top depend on its own height, which dropped the copy 63-69px low — the stats
 * only landed right by coincidence.
 */
.about__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--gap-row);
}

/**
 * The three columns take a fluid share of the row's free space, each capped at
 * the design's own px so 1920 cannot move.
 *
 * As fixed px they needed 1511 (457 + 460 + 353, two 110 gaps and the stats'
 * 21px offset) and the row wrapped ONE PIXEL short at 1555 - dropping the stats
 * onto their own line and taking the section from 730 to 1408, which left a
 * large empty grey band across every laptop width from 1555 down to 1201.
 * The ratios are each column over their 1270 total.
 */
.about__media {
	width: calc((100% - 2 * var(--gap-row) - 21px) * 0.3598);
	max-width: 457px;
	margin-top: -69px;
}

.about__media img {
	aspect-ratio: 457 / 659;
}

.about__media img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.about__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-20);
	width: calc((100% - 2 * var(--gap-row) - 21px) * 0.3622);
	max-width: 460px;
	padding-top: var(--section-pad-y);
}

.about__desc {
	margin-top: var(--sp-10); /* design puts 30 between the heading and the copy */
	color: var(--clr-white);
}

/* The design puts 141px between the copy and the stats, not the row's 120. */
.about__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-stat);
	width: calc((100% - 2 * var(--gap-row) - 21px) * 0.278);
	max-width: 353px;
	margin-left: 21px;
	padding-top: var(--section-pad-y);
}

/**
 * Figma: the figure sits in a fixed 161px column closed by a 1px #818181 rule,
 * then 31px to the copy. Measured on the design at x1377 / x1538 / x1570.
 */
.about__stat {
	display: flex;
	align-items: center;
	gap: var(--stat-gap);
	width: 100%;
}

.about__stat .stat-number {
	flex-shrink: 0;
	width: 161px;
	border-right: 1px solid var(--clr-gray-band);
}

.about__stat-desc {
	line-height: var(--lh-body); /* 30 / 18 */
	color: var(--clr-white);
}

/* =======================================================================
 * 5. PRACTICE AREAS
 * ======================================================================= */

.practice {
	position: relative;
	padding-block: var(--section-pad-y) var(--section-pad-y-lg);
	overflow: hidden;
}

/**
 * rectangle_22 in the design: white under a 70px blur. The extraction gives no
 * geometry for it, and a centred 900x600 at 20% lifted the transparent cards by
 * ~42 (card 6 read 82 against the design's 31). Sampling the design's own
 * margins puts the lift on the LEFT around y800 and caps it at roughly +17, so
 * this is placed and weighted to match that instead of guessed.
 */
.practice::before {
	content: "";
	position: absolute;
	top: 42%;
	left: 0;
	width: 620px;
	height: 460px;
	max-width: 60%;
	transform: translate(-30%, -50%);
	background-color: rgba(255, 255, 255, 0.07);
	-webkit-filter: blur(90px);
	filter: blur(90px);
	pointer-events: none;
}

.practice > .container {
	position: relative;
	z-index: 1;
}

.practice__head {
	margin-bottom: var(--gap-head);
}

.practice__grid {
	display: flex;
	flex-wrap: wrap;
	border-block: 1px solid rgb(129 129 129 / 70%);
}

.practice__item {
	width: 33.3333%;
}

.practice__card {
	height: 100%;
	gap: var(--sp-25);
	padding: var(--card-pad-top) var(--card-pad-r) var(--card-pad-bot) var(--card-pad-l);
}

/**
 * Alternating card defaults, measured from the design: odd cards carry a filled
 * gray panel, even cards are transparent so the dark section shows through.
 * (Card 1 appears gold in the Figma export only because that frame demonstrates
 * the hover state — gold is never a default here. BRIEF rule 14.)
 */
.practice__item:nth-child(odd) .practice__card {
	background-color: var(--clr-gray-band);
}

.practice__item:nth-child(even) .practice__card {
	background-color: transparent;
}

.practice__card .card__title {
	color: var(--clr-white);
}

.practice__card .card__desc {
	color: var(--clr-white);
}

.practice__card .card__media {
	margin-top: auto;
	aspect-ratio: 444 / 229;
	    position: relative;
    z-index: 1;
}

.card__media:after {
    content: '';
    background-color:#fff;
    opacity:30%;
    filter:blur(40px);
    z-index: 111;
    position: absolute;
    width: 85px;
    height: 319px;
    bottom: 0;
    left: -20%;
    transition: all 0.4s ease-in-out;
}

article.card.practice__card:hover .card__media:after {
 left: 120%;
}

/* Gold on hover, for odd and even alike — matches the nth-child specificity
 * above so it is not silently out-ranked. */
.practice__item .practice__card:hover,
.practice__item .practice__card:focus-within {
	background-color: var(--clr-gold);
}

.practice__card:hover .card__title,
.practice__card:hover .card__desc,
.practice__card:focus-within .card__title,
.practice__card:focus-within .card__desc {
	color: var(--clr-white);
}

.practice__divider {
	margin-top: var(--practice-rule-mt);
	background-color: transparent;
}

/* Design: 60px from the grid to the rule, then 22px to the button. */
.practice__cta {
	margin-top: var(--practice-cta-mt);
	text-align: center;
}

/* =======================================================================
 * 6. MEET OUR ATTORNEYS
 * ======================================================================= */

.attorneys {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #fff;
}

/* The courthouse columns sit faintly behind the cards, not competing with them. */
.attorneys::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 10%;
	background-size: cover;
	background-repeat:no-repeat;
}

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

.attorneys__head {
	margin-bottom: var(--gap-head);
}

.attorneys__intro {
	max-width: 840px;
	color: var(--clr-dark);
}

/**
 * The photos overhang their panels by 67px, so the row needs that much extra
 * clearance for the design's 60px gap below the intro to actually be 60px.
 */
.attorneys__grid:not(.slick-slider) {
	display: flex;
	flex-wrap: wrap;
	padding-top: var(--photo-overhang);
}

.attorneys__grid:not(.slick-slider) .attorneys__item {
	width: 33.3333%;
}

/* =======================================================================
 * Attorneys slider (Slick) — three cards visible, one at a time, no arrows
 * or dots. Figma draws five cards on a 512px pitch with the last two beyond
 * the canvas, and 1540 / 3 lands on that same pitch, so Slick's own slide
 * width reproduces the design geometry with nothing restated here.
 * ======================================================================= */

/**
 * The photo overhangs its panel by 67px. .slick-list has to keep overflow
 * hidden to clip the carousel horizontally, so that clearance becomes padding
 * INSIDE the clipping box — otherwise the top of every photo is cut off.
 */
.attorneys__slider .slick-list {
	padding-top: var(--photo-overhang);
}

/**
 * Slick floats its slides and wraps each one in its own div, so a percentage
 * height has nothing to resolve against and the cards end up ragged (a name
 * that wraps to two lines makes its own card taller). Making the whole chain —
 * track, slide, slick's wrapper, the item — a stretching flex container is what
 * lets every card match the tallest, which is how the design draws them.
 */
.attorneys__slider .slick-track {
	display: flex;
	align-items: stretch;
}

.attorneys__slider .slick-slide {
	display: flex;
	height: auto;
}

.attorneys__slider .slick-slide > div {
	display: flex;
	width: 100%;
}

.attorneys__slider .attorneys__item {
	display: flex;
	width: 100%;
}

.attorneys__slider .attorney-card {
	width: 100%;
}

.attorneys__slider img {
	-webkit-user-drag: none;
	user-select: none;
}

@media (max-width: 640px) {
	.attorneys__slider {
		margin-bottom: 68px;
	}

	.attorneys__slider .slick-prev,
	.attorneys__slider .slick-next {
		position: absolute;
		top: auto;
		bottom: -48px;
		z-index: 2;
		width: 32px;
		height: 24px;
		padding: 0;
		border: 0;
		background-color: transparent;
		color: var(--clr-gold);
		font-size: 0;
		transform: none;
	}

	.attorneys__slider .slick-prev {
		left: calc(50% - 46px);
	}

	.attorneys__slider .slick-next {
		right: calc(50% - 46px);
	}

	.attorneys__slider .slick-prev::before,
	.attorneys__slider .slick-next::before {
		display: none;
	}

	.attorneys__slider .slick-prev svg,
	.attorneys__slider .slick-next svg {
		width: 24px;
		height: 20px;
		fill: currentColor;
	}

	.attorneys__slider .slick-prev svg {
		transform: rotate(180deg);
	}

	.attorneys__slider .slick-prev:hover,
	.attorneys__slider .slick-next:hover,
	.attorneys__slider .slick-prev:focus-visible,
	.attorneys__slider .slick-next:focus-visible {
		background-color: transparent;
		color: var(--clr-gold-light);
	}
}

.attorney-card {
	height: 100%;
	gap: var(--gap-card);
	padding: 0 0 var(--gap-card);
	background-color: var(--clr-white);
	border: 1px solid var(--clr-border);
}

/**
 * The photo is a fixed 437x395 that overhangs the panel by 67px at the top and
 * sits 36px in from its left edge — the offset composition in the design.
 */
.attorney-card__media {
	position: relative;
	overflow: hidden;
	width: 437px;
	max-width: calc(100% - var(--att-inset-l) - var(--att-inset-r));
	aspect-ratio: 437 / 395;
	margin: calc(var(--photo-overhang) * -1) var(--att-inset-r) 0 var(--att-inset-l);
}

/**
 * Figma: the attorney arrow stays diagonal in both states and grows on hover —
 * a 28x28 bounding box at rest, 40x40 hovered (card 1 is the hover demo frame).
 * 36x31 rotated -45deg spans 47.4, so the scales are 28/47.4 and 40/47.4.
 */
/**
 * Figma: a 28x28 bounding box at rest — 36x31 rotated -45deg spans 47.4, so
 * 28/47.4 is the scale. On hover it only straightens; the size holds.
 */
.attorney-card__arrow {
    position: absolute;
    top: 45px;
    right: 40px;
    color: var(--clr-white);
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s ease;
	height: 29px;
	width: 29px;
}

.attorney-card:hover .attorney-card__arrow,
.attorney-card:focus-within .attorney-card__arrow {
	transform: rotate(45deg);
}

.attorney-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s ease;
}

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

/**
 * Figma insets the name 40px from the panel's left edge and the role 37px from
 * its right, and holds the name in a 211px box — which is what breaks
 * "Brian H. / Trammell" onto two lines.
 */
.attorney-card__meta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-15);
	padding-left: var(--att-meta-pad-l);
	padding-right: var(--att-meta-pad-r);
}

.attorney-card__name {
	/* 211px is Figma's box; the design PNG wraps a 208px string inside it, so
	 * the rendered reference needs a hair less to break the same way. */
	max-width: var(--att-name-max);
}

.attorney-card__role {
	color: var(--clr-muted);
	white-space: nowrap;
}

.attorney-card:hover .card__title,
.attorney-card:hover .attorney-card__role,
.attorney-card:focus-within .card__title,
.attorney-card:focus-within .attorney-card__role {
	color: var(--clr-white);
}

.attorneys__cta {
	margin-top: var(--gap-head);
	text-align: center;
}

/* =======================================================================
 * 7. OFFICE ADDRESS (WITH MAP)
 *
 * The centre box is PERMANENTLY gold — a static state, not a hover.
 * Only the links inside the boxes react to hover.
 * ======================================================================= */

.office {
	padding-block: var(--section-pad-y-map) var(--section-pad-map-bottom);
	overflow: hidden;
	/**
	 * Figma declares radial-gradient(#DFDFDF 44%, #FFFFFF 77%), but an implicit
	 * radial is sized to the farthest CORNER, which drags the tint right out to
	 * the section edges — the design's own render is pure white there. Sizing the
	 * ellipse explicitly keeps the tint to the central pool the PNG shows.
	 */
	/* background-image: radial-gradient(ellipse 50% 55% at 50% 52%, #efefef 0%, var(--clr-white) 70%); */
}

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

.office__head {
	margin-bottom: var(--gap-head);
}

/* Figma closes the band with a 1px #dfdfdf rule top and bottom, not a shadow. */
.office__boxes {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background-color: var(--clr-white);
	border-top: 1px solid var(--clr-divider);
	border-bottom: 1px solid var(--clr-divider);
}

.office-box {
	display: flex;
	align-items: center;
	gap: var(--office-box-gap);
	width: 33.3333%;
	padding: var(--office-box-pad-y) var(--office-box-pad-x);
}

/* Permanently gold — a static state, never a hover. BRIEF rule 10. */
.office-box--highlight {
	background-color: var(--clr-gold);
	color: var(--clr-white);
}

.office-box__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tile-w);
	height: var(--tile-h);
	flex-shrink: 0;
	background-color: var(--clr-icon-tile);
}

/* Measured on the design: the glyph fills 48x48 of the 114x103 tile. */
.office-box__icon img {
	width: var(--tile-glyph);
	height: var(--tile-glyph);
	object-fit: contain;
}

.office-box:not(.office-box--highlight) .office-box__icon img {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

/* Inside the gold box the icon tile inverts to white. */
.office-box--highlight .office-box__icon {
	background-color: var(--clr-white);
}

.office-box__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-10);
}

.office-box__label {
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-regular);
	letter-spacing: var(--ls-role);
	text-transform: uppercase;
	color: var(--clr-muted);
}

.office-box--highlight .office-box__label {
	color: var(--clr-white);
}

.office-box__value {
	font-size: var(--fs-card-title); /* 27px in the design */
	font-weight: var(--fw-bold);
	line-height: var(--lh-card-title); /* 32 / 27 */
	color: var(--clr-black);
}

.office-box--highlight .office-box__value {
	font-size: var(--fs-body-lg); /* 21px in the design, not the 27px figure */
	line-height: var(--lh-body-lg); /* 28 / 21 */
	color: var(--clr-white);
}

/* The only hover in this section belongs to the links inside a box value. */
.office-box__value a {
	color: inherit;
	text-decoration: none;
}

.office-box__value a {
	transition: color var(--transition);
}

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

.office-box--highlight .office-box__value a:hover,
.office-box--highlight .office-box__value a:focus-visible {
	color: var(--clr-dark);
}

/**
 * Figma: image_1 is 1920x1213 anchored at the section's top-left, and the
 * section's own radial gradient shows through around it. On the design the map
 * only reads in a central pool and is pure white at every edge, so it carries a
 * matching radial mask rather than a flat opacity.
 *
 * The height MUST scale with the viewport (--map-h). The raster is 2140x1050,
 * so a frozen 1213px height makes object-fit: cover permanently height-driven
 * (1213/1050 = 1.155 beats W/2140 at every width we support). The map then
 * renders at a constant 2472px wide and narrowing the viewport CROPS it instead
 * of shrinking it - at 390px you saw a 375px window of a 2472px map, i.e. roads
 * and labels at desktop size on a phone. The ladder keeps 77% of the raster
 * visible at every width, exactly the desktop framing, so the pin, the ::after
 * fade and the crop window all stay proportional.
 */
.office__map {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* height: var(--map-h); */
	z-index: 0;
	height: 100%;
}

/**
 * The design's map is a heavily desaturated styled map. The source export is a
 * full-colour raster, so the treatment is applied here rather than baked in.
 */
/**
 * Figma: icon_1 is a 37x44 gold pin at x923 y669 inside the 1920x1213 map
 * layer. It sits above the map's mask so it stays fully opaque, as in the design.
 * The raster itself carries a marker at almost the same spot, so this is nudged
 * ~11px to sit right on top of it — the design shows one pin, not two.
 */
/* .office__pin {
	position: absolute;
	left: 47.5%;
	top: 48.8%;
	width: var(--pin-w);
	height: var(--pin-h);
	z-index: 2;
}

.office__pin-body {
	fill: var(--clr-gold);
}

.office__pin-dot {
	fill: var(--clr-white);
} */

/**
 * The design reads as a near-white map with grey roads in a central pool that
 * fades out at every edge. object-position matches Figma's own crop of the fill.
 *
 * The fade is PAINTED ON TOP (see ::after) rather than cut with mask-image.
 * mask-image still needs the -webkit- prefix for older WebKit, and its
 * repeat/size/mode defaults differ between the longhand and the `mask`
 * shorthand across engines — combined with filter and opacity on the same
 * element that is exactly where rendering diverges between Chrome, Firefox and
 * Safari. Since the ground behind the map is white anyway, a radial
 * white-to-transparent overlay is pixel-equivalent and uses only
 * background-image, which every engine treats identically.
 */
.office__map img {
	object-fit: cover;
	height: 100%;
}

/* .office__map::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: radial-gradient(
		ellipse var(--map-fade-rx) var(--map-fade-ry) at 50% 52%,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, var(--map-fade-mid)) 55%,
		#ffffff 88%
	);
} */

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

@media (max-width: 1360px) {
	.hero {
		padding-block: var(--hero-pad-y);
	}
}

@media (max-width: 1440px) {
	/**
	 * The name and the role shared one space-between row, and because the role
	 * cannot wrap it won the space. The squeeze depends on the CARD's width, not
	 * just --att-name-max, so it starts as soon as the cards narrow: at 1361 the
	 * name broke to THREE lines where the design shows two. 1441 and up keep the
	 * design's side-by-side row; below that the name takes the full card width.
	 * (Was <=1024, which was far too late.)
	 */
	.attorney-card__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-7);
	}

	.attorney-card__name {
		max-width: none;
	}
.attorney-card__arrow {
    top: 20px;
    right: 20px;
}
}

@media (min-width: 1201px) and (max-width: 1280px) {
	.about__row {
		gap: 50px;
	}

	.about__media {
		width: 31%;
		max-width: 457px;
	}

	.about__content {
		width: 33%;
		max-width: 460px;
	}

	.about__stats {
		width: 26%;
		max-width: 353px;
		margin-left: 0;
	}
}

@media (max-width: 1200px) {
	.hero {
		padding-block: var(--hero-pad-y);
	}

	.about__media,
	.about__content,
	.about__stats {
		width: 100%;
		/* Release the desktop px caps - they are only there to pin 1920. */
		max-width: 100%;
	}

	/* Full width, the photo would butt straight against the hero — the desktop
	 * section has no top padding because the photo overhangs into it instead. */
	.about {
		padding-top: var(--section-pad-y);
	}

	.about__media {
		margin-top: 0;
	}

	/**
	 * ONE consistent crop at every width here. `max-height` was fighting
	 * `aspect-ratio`: past ~833px of width the height clamped at 520 and the
	 * effective ratio kept widening with the viewport - 2.22 at 1200, 1.92 at
	 * 1044, 1.88 at 1024, 1.60 at 768 - so the photo never settled. Capping the
	 * MEDIA's width instead holds the ratio at a flat 16/10 and bounds the
	 * height to 450 without distorting anything.
	 */
	.about__media {
		max-width: 520px;
		margin-inline: auto;
	}

	.about__media img {
		aspect-ratio: auto;
		height: auto;
		object-fit: contain;
	}

	/* The 21px offset only exists to make the desktop 141px gap; drop it here. */
	.about__stats {
		margin-left: 0;
	}


	.about__content,
	.about__stats {
		padding-top: 0;
	}

	.about__stats {
		flex-direction: row;
	}

	/* Two up — the subtrahend has to be the real 60px gap or they wrap. */
	.about__stat {
		width: calc((100% - var(--gap-stat)) / 2);
	}

	.practice__item {
		width: calc((100% - 1px) / 2);
	}

	/**
	 * Two-up, `nth-child(odd)` lands every filled card in column one and every
	 * transparent one in column two - two solid stripes, not the design's
	 * alternation. 4n+1 and 4n are the same alternation laid out on a
	 * two-column flow: filled 1, 4, 5, 8 - a checkerboard.
	 */
	.practice__item:nth-child(4n + 1) .practice__card,
	.practice__item:nth-child(4n) .practice__card {
		background-color: var(--clr-gray-band);
	}

	.practice__item:nth-child(4n + 2) .practice__card,
	.practice__item:nth-child(4n + 3) .practice__card {
		background-color: transparent;
	}

	.attorneys__item {
		width: 45%;
	}

	/* The photo keeps its fixed 437px inside a much wider card otherwise. */
	.attorney-card__media {
		width: auto;
		max-width: none;
	}
	.card__arrow, .attorney-card__arrow {
    width: 1.5em;
    height: 1.5em;
}
}

@media (max-width: 999px) {
	.office-box {
		width: 100%;
	}
.office {
    background-image: radial-gradient(ellipse 520% 265% at 40% 52%, #efefef 0%, var(--clr-white) 40%);
}
.office__map {
    top: 120px;
}
}

@media (max-width: 767px) {
	.hero {
		min-height: 0;
		padding-top: 70px;
	}
	

	/* One up — a 161px figure column leaves too little for the copy at two up. */
	.about__stat {
		width: 100%;
	}

	.about__stat .stat-number {
		box-sizing: border-box;
		width: 110px;
		padding-right: 20px;
	}


	.practice__item,
	.attorneys__item {
		width: 100%;
	}

	/* Single column - the checkerboard has no second column to alternate
	 * against, so the design's plain odd/even alternation returns. */
	.practice__item:nth-child(odd) .practice__card {
		background-color: var(--clr-gray-band);
	}

	.practice__item:nth-child(even) .practice__card {
		background-color: transparent;
	}

	.office__boxes {
		margin-bottom: 0;
	}
}

@media (max-width: 479px) {
	/* .hero__actions .btn {
		width: 100%;
	} */

	.hero__actions .btn--link {
		width: auto;
	}

}