/* Home page: "The Valley in Daylight" (DESIGN.md). Each section runs full width and pads its content to the page. */
:where(.is-style-jw-hero, .is-style-jw-routing, .is-style-jw-firm, .is-style-jw-expect, .jw-insights, .is-style-jw-close) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.jw-practices, .jw-insights) ul { padding: 0; list-style: none; }
:where(.is-style-jw-routing, .is-style-jw-firm, .is-style-jw-expect, .jw-insights) h2 { font-size: 36px; line-height: 1.15; letter-spacing: -.01em; color: var(--jw-blue); }
@media (max-width: 1239px) { :where(.is-style-jw-routing, .is-style-jw-firm, .is-style-jw-expect, .jw-insights) h2 { font-size: 32px; } }
.is-style-jw-firm, .is-style-jw-expect, .jw-insights { padding: 104px var(--jw-pad) 112px; }
@media (max-width: 900px) { .is-style-jw-firm, .is-style-jw-expect, .jw-insights { padding-block: 80px 88px; } }
@media (max-width: 640px) { .is-style-jw-firm, .is-style-jw-expect, .jw-insights { padding-block: 64px 72px; } }

/* Hero: the headline in the daytime sky; the photo rises out of the paper and fades into the pale band below */
.is-style-jw-hero { --jw-h1: clamp(40px, 4.4vw, 88px); display: grid; grid-template-columns: var(--jw-pad) minmax(0, 1fr) 64px minmax(0, 1fr) var(--jw-pad); }   /* the gutters are tracks, so full-bleed parts span them with no negative margins or overflow clipping */
.is-style-jw-hero > .jw-hero__photo { grid-area: 1 / 1 / 2 / -1; position: relative; z-index: 0; overflow: hidden; margin: 0; }
.is-style-jw-hero > .jw-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* the paper wash: the photo rises out of the paper under the header and calms the sky behind the headline.
   Its stops follow the headline (36px top padding plus two lines of 1.05em), not the photo's height, so the two-line
   headline keeps 3:1 at every width (checked by .checks/hero_contrast.py) while Camelback keeps its colour below it.
   The headline is written to set on two lines on desktop; longer copy needs a design check (DESIGN.md). The soft paper
   halo on the H1 is a safety net for an edited headline that reaches the photo. */
.is-style-jw-hero > .jw-hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--jw-paper) 0, rgba(252, 251, 248, .72) calc(36px + 2.1 * var(--jw-h1)), rgba(252, 251, 248, 0) calc(36px + 2.1 * var(--jw-h1) + 56px)); }
/* the soft step into the pale band */
.is-style-jw-hero::before { content: ""; grid-area: 1 / 1 / 2 / -1; align-self: end; z-index: 1; height: 140px; pointer-events: none; background: linear-gradient(to bottom, rgba(233, 236, 246, 0), var(--jw-pale)); }
.is-style-jw-hero > h1 { grid-area: 1 / 2 / 2 / 5; position: relative; z-index: 2; max-width: 15em; padding: 36px 0 clamp(240px, 24vw, 620px); color: var(--jw-blue); font-size: var(--jw-h1); line-height: 1.05; letter-spacing: -.02em; text-shadow: 0 0 .05em var(--jw-paper), 0 0 .12em var(--jw-paper), 0 0 .3em rgba(252, 251, 248, .9); }
.jw-hero__deck { grid-area: 2 / 1 / 3 / -1; display: grid; grid-template-columns: subgrid; align-content: start; padding-block: 36px 40px; background: var(--jw-pale); color: var(--jw-ink); }
.jw-hero__deck .jw-lede { grid-column: 2; grid-row: 1 / span 2; max-width: 32em; font: 400 22px/1.5 var(--jw-serif); }
.jw-hero__deck .wp-block-buttons { grid-column: 4; margin-top: 4px; align-items: baseline; gap: 12px 32px; }
.jw-hero__since { grid-column: 4; margin-top: 20px !important; font: 400 clamp(18px, 1.53vw, 22px)/1.3 var(--jw-serif); }
/* laptop windows 860px tall or less: a tighter deck so the practice areas stay near the first view */
@media (min-width: 901px) and (min-height: 501px) and (max-height: 860px) {
	.jw-hero__deck { padding-block: 28px 16px; }
	.jw-hero__deck .jw-lede { font-size: 20px; }
	.jw-hero__since { margin-top: 12px !important; }
}
@media (max-width: 900px) {
	.is-style-jw-hero { grid-template-columns: var(--jw-pad) minmax(0, 1fr) var(--jw-pad); --jw-gap: 36px; }
	.is-style-jw-hero > h1 { grid-area: 1 / 2; padding: 28px 0 8px; font-size: clamp(36px, 9vw, 60px); }
	.is-style-jw-hero > .jw-hero__photo { grid-area: 2 / 1 / 3 / -1; height: 72vw; max-height: 460px; }
	.is-style-jw-hero > .jw-hero__photo img { object-position: 50% 26%; }
	.is-style-jw-hero > .jw-hero__photo::after { background: linear-gradient(to bottom, var(--jw-paper) 0%, rgba(252, 251, 248, 0) 38%); }
	.is-style-jw-hero::before { grid-area: 2 / 1 / 3 / -1; height: 70px; }
	.jw-hero__deck { grid-area: 3 / 1 / 4 / -1; padding-top: var(--jw-gap); }
	.jw-hero__deck .jw-lede, .jw-hero__deck .wp-block-buttons, .jw-hero__since { grid-column: 2; grid-row: auto; }
	.jw-hero__deck .wp-block-buttons { margin-top: 24px; }
	.jw-hero__since { font-size: 18px; }
}
@media (max-width: 640px) {
	.is-style-jw-hero { --jw-gap: 28px; }
	.jw-hero__deck .jw-lede { font-size: 20px; }
	.jw-hero__deck .wp-block-button:not(.jw-button-link) { flex: 1 1 auto; }
	.jw-hero__deck .wp-block-button:not(.jw-button-link) .wp-block-button__link { width: 100%; }
	.jw-hero__since { margin-top: 18px !important; font-size: max(16px, min(18px, calc((100vw - 44px) / 18))); text-wrap: balance; }
}
@media (max-width: 360px) {
	.jw-hero__deck .wp-block-buttons { column-gap: 20px; }
	.jw-hero__deck .wp-block-button:not(.jw-button-link) .wp-block-button__link { padding: 0 14px; }
}
/* Short or sideways phones: no room for the photo above Contact us. Deliberately up to 900 wide (the mockup stops at 640). */
@media (max-width: 900px) and (max-height: 500px), (max-width: 367px) and (max-height: 506px) {
	.is-style-jw-hero > .jw-hero__photo, .is-style-jw-hero::before { display: none; }
}
/* Large phones held sideways (915 to 956 wide) use the desktop grid: drop the photo there too, so Contact us is in the first view. */
@media (min-width: 901px) and (max-height: 500px) {
	.is-style-jw-hero > .jw-hero__photo, .is-style-jw-hero::before { display: none; }
	.is-style-jw-hero > h1 { padding-bottom: 24px; }
}
@media (max-height: 500px) and (orientation: landscape) {
	.is-style-jw-hero > h1 { font-size: 34px; }
	.jw-hero__deck .jw-lede { font-size: 18px; }
}

/* Practice areas: a directory of large targets on the blue field */
.is-style-jw-routing { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 64px; align-items: end; padding: 32px var(--jw-pad) 72px; background: var(--jw-blue); color: var(--jw-paper); }
.is-style-jw-routing > h2 { color: var(--jw-paper); }
.is-style-jw-routing > p { max-width: 30em; }
.is-style-jw-routing > .jw-practices { grid-column: 1 / -1; margin-top: 24px; }
.jw-practices { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; }
.jw-practices__grp h3 { margin-bottom: 14px; color: var(--jw-haze); font: 600 16px/1.6 var(--jw-sans); }
.jw-practices ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--jw-cell); border-left: 1px solid var(--jw-cell); }
.jw-practices__grp--i ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jw-practices li { border-right: 1px solid var(--jw-cell); border-bottom: 1px solid var(--jw-cell); }
.jw-practices ul a { display: flex; align-items: flex-end; height: 100%; min-height: 108px; padding: 16px 20px; color: var(--jw-paper); font: 500 28px/1.25 var(--jw-serif); text-decoration: none; overflow-wrap: anywhere; transition: background-color .15s ease, color .15s ease; }
.jw-practices ul a:hover { background: var(--jw-paper); color: var(--jw-blue); }
.jw-practices ul a:focus-visible { outline-offset: -6px; border-radius: 0; }
.jw-practices ul a:hover:focus-visible { outline-color: var(--jw-blue); }
.jw-practices__all { grid-column: 1 / -1; margin-top: -16px !important; } /* the grid's 40px row gap plus this makes 24px under the cells */
@media (min-width: 1240px) and (max-width: 1299px) { .jw-practices ul a { padding-inline: 12px; } }
@media (max-width: 1239px) { .jw-practices { grid-template-columns: 1fr; } }
@media (min-width: 641px) and (max-width: 759px) { .jw-practices ul a { font-size: 22px; } }
@media (max-width: 900px) {
	.is-style-jw-routing { grid-template-columns: 1fr; row-gap: 16px; padding-bottom: 72px; }
}
@media (max-width: 640px) {
	.is-style-jw-routing { padding-block: 24px 56px; }
	.jw-practices ul, .jw-practices__grp--i ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jw-practices ul a { min-height: 76px; padding: 14px; font-size: 20px; }
}
@media (max-width: 360px) { .jw-practices ul a { padding: 12px; font-size: 18px; } }

/* The firm: the statement and facts beside the lobby they describe */
.is-style-jw-firm { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: start; grid-template-areas: "head head" "photo statement" "photo facts"; }
.is-style-jw-firm:has(.jw-recognitions) { grid-template-areas: "head head" "photo statement" "photo facts" "photo rec"; }
.is-style-jw-firm > h2 { grid-area: head; }
.is-style-jw-firm > .jw-firm__photo { grid-area: photo; align-self: stretch; position: relative; min-height: 360px; margin: 0; }
.is-style-jw-firm > .jw-firm__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-style-jw-statement { grid-area: statement; max-width: 25em; font: 400 28px/1.42 var(--jw-serif); }
@media (min-width: 1240px) { .is-style-jw-statement { text-box: trim-start cap alphabetic; } }
.jw-firm__facts { grid-area: facts; }
.jw-facts { border-top: 1px solid var(--jw-line); }
.jw-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0 12px; border-bottom: 1px solid var(--jw-line); }
.jw-facts dt { color: var(--jw-slate); font-size: 16px; }
.jw-facts dd { color: var(--jw-blue); font: 500 28px/1.3 var(--jw-serif); text-align: right; }
.jw-facts__avg { white-space: nowrap; }
.jw-facts__avg span { color: var(--jw-slate); font: 400 16px/1 var(--jw-sans); }
.jw-facts__note { margin-top: 14px; color: var(--jw-slate); font-size: 15px; }   /* names the platforms and qualifies the figures (ER 7.1) */
.jw-recognitions { grid-area: rec; color: var(--jw-slate); font-size: 16px; }
.jw-recognitions ul { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 0; list-style: none; color: var(--jw-ink); }
.jw-recognitions__note { margin-top: 8px !important; }
.jw-recognitions a { color: var(--jw-blue); }
@media (max-width: 1239px) {
	.is-style-jw-firm { grid-template-areas: "head head" "statement facts" "photo photo"; }
	.is-style-jw-firm:has(.jw-recognitions) { grid-template-areas: "head head" "statement facts" "rec rec" "photo photo"; }
	.is-style-jw-firm > .jw-firm__photo { min-height: 0; aspect-ratio: 2; }
}
@media (max-width: 900px) {
	.is-style-jw-firm { grid-template-columns: 1fr; grid-template-areas: "head" "statement" "facts" "photo"; }
	.is-style-jw-firm:has(.jw-recognitions) { grid-template-areas: "head" "statement" "facts" "rec" "photo"; }
	.is-style-jw-firm > .jw-firm__photo { aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) { .is-style-jw-statement, .jw-facts dd { font-size: 22px; } }

/* What to expect: three numbered steps on the pale band */
.is-style-jw-expect { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 64px; align-items: end; background: var(--jw-pale); }
.is-style-jw-expect > p { max-width: 30em; }
.is-style-jw-expect > ol { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin-top: 32px !important; padding: 0; list-style: none; counter-reset: jw-step; }
.is-style-jw-expect li { position: relative; padding-top: 84px; counter-increment: jw-step; }
.is-style-jw-expect li::before { content: counter(jw-step); position: absolute; top: 0; left: 0; color: var(--jw-blue); font: 500 64px/1 var(--jw-serif); }
.is-style-jw-expect li::after { content: ""; position: absolute; top: 32px; left: 56px; right: 0; height: 1px; background: var(--jw-edge); }
.is-style-jw-expect li:not(:last-child)::after { right: -28px; }
.is-style-jw-expect li strong { display: block; margin-bottom: 12px; color: var(--jw-ink); font: 600 28px/1.25 var(--jw-serif); }
.is-style-jw-expect li a { padding-block: 12px; color: var(--jw-blue); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 4px; } /* inline: the 44px target adds no line height */
@media (max-width: 900px) {
	.is-style-jw-expect { grid-template-columns: 1fr; }
	.is-style-jw-expect > ol { grid-template-columns: 1fr; gap: 0; }
	.is-style-jw-expect li { padding: 0 0 40px 76px; }
	.is-style-jw-expect li:last-child { padding-bottom: 0; }
	.is-style-jw-expect li::before { width: 56px; font-size: 44px; text-align: center; }
	.is-style-jw-expect li::after, .is-style-jw-expect li:not(:last-child)::after { top: 56px; bottom: 0; left: 28px; right: auto; width: 1px; height: auto; }
	.is-style-jw-expect li:last-child::after { display: none; }
}
@media (max-width: 640px) { .is-style-jw-expect li strong { font-size: 22px; } }
@media (max-width: 360px) {
	.is-style-jw-expect li { padding-left: 56px; }
	.is-style-jw-expect li::before { width: 40px; font-size: 36px; }
	.is-style-jw-expect li::after, .is-style-jw-expect li:not(:last-child)::after { left: 20px; }
}

/* Insights: a lead article, then a register */
.jw-insights__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 64px; align-items: end; margin-bottom: 48px; }
.jw-insights__head .jw-link { justify-self: end; }
.jw-insights__feat { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; padding-bottom: 48px; }
.jw-insights__feat h3 { max-width: 20em; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.2; }
.jw-insights__title { color: var(--jw-blue); text-decoration: none; }
.jw-insights__title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.jw-insights__excerpt { max-width: 36em; font-family: var(--jw-serif); }
.jw-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px !important; color: var(--jw-slate); font-size: 16px; font-variant-numeric: tabular-nums; }
.jw-meta__cat { color: var(--jw-ink); font-weight: 600; }
.jw-insights__list { border-top: 1px solid var(--jw-line); }
.jw-insights__list li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px 64px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--jw-line); }
.jw-insights__list h3 { font-size: 22px; font-weight: 500; line-height: 1.35; }
.jw-insights__list .jw-insights__title { padding: 5px 0; }
/* the register's meta keeps its columns by class, so a missing category or attorney never shifts the date */
.jw-insights__list .jw-meta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.4fr); gap: 4px 24px; margin-top: 0 !important; }
.jw-insights__list .jw-meta__cat { grid-column: 1; }
.jw-insights__list .jw-meta time { grid-column: 2; }
.jw-insights__list .jw-meta__by { grid-column: 3; }
.jw-meta time { white-space: nowrap; }
.jw-meta__by a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 1239px) {
	.jw-insights__list .jw-insights__title { display: inline-flex; min-height: 44px; padding: 8px 0; }   /* inline-flex takes its first line's baseline (inline-block its last), so the meta aligns with a wrapped title's first line */
	/* the 5fr column is too narrow for three meta columns below 1240 (dates wrapped at 1024): stack them */
	.jw-insights__list .jw-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; }
	.jw-insights__list .jw-meta__by { flex-basis: 100%; }
	.jw-meta { align-items: flex-start; }
	.jw-meta__by a { min-height: 44px; }
}
@media (max-width: 900px) {
	.jw-insights__head, .jw-insights__feat, .jw-insights__list li { grid-template-columns: 1fr; }
	.jw-insights__head .jw-link { justify-self: start; }
	.jw-meta__by { flex-basis: 100%; }
}
@media (max-width: 640px) {
	.jw-insights__head { margin-bottom: 36px; }
	.jw-insights__feat { padding-bottom: 40px; }
	.jw-insights__feat h3 { font-size: 22px; }
	.jw-insights__list h3 { font-size: 20px; }
	.jw-insights__list li { padding: 14px 0 20px; }
}

/* Close: a daytime Phoenix panorama rises out of the paper and melts into the blue, which the footer continues */
.is-style-jw-close { --jw-close-photo: clamp(200px, 26vw, 460px); position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: center; gap: 0 36px; padding: calc(var(--jw-close-photo) + 8px) var(--jw-pad) 64px; background: var(--jw-blue); color: var(--jw-paper); }
.is-style-jw-close > .jw-close__photo { position: absolute; inset: 0 0 auto 0; z-index: -1; height: var(--jw-close-photo); overflow: hidden; margin: 0; }
.is-style-jw-close > .jw-close__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.is-style-jw-close > .jw-close__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--jw-paper) 0%, rgba(252, 251, 248, 0) 28%, rgba(40, 63, 151, 0) 52%, var(--jw-blue) 100%); }
.is-style-jw-close > h2 { flex-basis: 100%; color: var(--jw-paper); font-size: clamp(44px, 4.45vw, 64px); line-height: 1.04; letter-spacing: -.018em; }
.is-style-jw-close > p { flex-basis: 100%; margin-top: 20px; color: var(--jw-haze); font: 400 22px/1.5 var(--jw-serif); }
.is-style-jw-close > .wp-block-buttons, .is-style-jw-close > .jw-contact { margin-top: 40px; }
.jw-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
.jw-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--jw-paper); font: 500 22px/1.6 var(--jw-sans); text-decoration: underline; text-decoration-color: var(--jw-haze); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.jw-contact a:hover { text-decoration-color: var(--jw-paper); text-decoration-thickness: 3px; }
@media (max-width: 900px) { .is-style-jw-close { padding-bottom: 64px; } }
@media (max-width: 640px) {
	.is-style-jw-close > .wp-block-buttons { flex-basis: 100%; }
	.is-style-jw-close .wp-block-button, .is-style-jw-close .wp-block-button__link { width: 100%; }
	.is-style-jw-close > .jw-contact { margin-top: 12px; flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link, .jw-practices ul a { transition: none; }
}