/* ============================================
   Location landing layout, v2: every /locations/{slug}/ page (single-location.php) and, for the
   blocks they share, every /lawyers/{city}/ page (template-parts/lawyer-city.php), since
   2026-11-10 (the Brooklyn pilot before that).
   Loaded after content-template.css by those pages only; reuses the hero frame, trust bar,
   result cards, article and sidebar from content-template.css and main.css. Every rule is
   scoped to .location-layout-v2, so no other page changes.
   Brand rules: no coral/pink shadows, no translateY on hover, neutral gray shadows only,
   hover = colour, border or opacity change.
   ============================================ */

/* Grid children may never stretch their column (the link row scrolls inside its own box). */
.location-layout-v2 .location-hero-layout > *,
.location-layout-v2 .location-hospitals > *,
.location-layout-v2 .location-next > *,
.location-layout-v2 .content-layout-grid > * {
    min-width: 0;
}

/* ---------- Buttons ---------- */
/* The one accent on this page: the brand's primary button red (white on it passes AA).
   The header button and the mobile sticky bar stay coral (site-wide). */
.location-layout-v2 .location-btn-red {
    background: var(--accent-dark-red);
    border-color: var(--accent-dark-red);
    color: var(--white);
}

.location-layout-v2 .location-btn-red:hover,
.location-layout-v2 .location-btn-red:focus {
    background: #B71C1C;
    border-color: #B71C1C;
    color: var(--white);
}

.location-layout-v2 .location-btn-outline {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
    min-height: 48px;
}

.location-layout-v2 .location-btn-outline:hover,
.location-layout-v2 .location-btn-outline:focus {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}

/* ---------- Hero: who it's for, call, the link row, the form ---------- */
/* Navy band with a soft lift top right and a faint street grid (replaces content-template.css's
   checkerboard), fading out before it reaches the copy. */
.location-layout-v2 .location-hero {
    background: radial-gradient(120% 90% at 85% 10%, #1D3A5F 0%, var(--primary-dark) 60%);
    padding: var(--spacing-xl) 0;
    isolation: isolate;
}

.location-layout-v2 .location-hero::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: 0;
    background: none;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 56px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 132px);
    transform: rotate(-29deg);
    -webkit-mask-image: radial-gradient(50% 50% at 72% 46%, #000 0%, transparent 100%);
    mask-image: radial-gradient(50% 50% at 72% 46%, #000 0%, transparent 100%);
    pointer-events: none;
}

.location-layout-v2 .location-hero > .container {
    position: relative;
    z-index: 1;
}

/* Text column beside the form (desktop centring is in the block after the "On this page" rules) */
.location-layout-v2 .location-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: var(--spacing-xxl);
    align-items: stretch;
}

/* The text column runs the full height of the form */
.location-layout-v2 .location-hero-text {
    display: flex;
    flex-direction: column;
    padding-top: var(--spacing-md);
}

.location-layout-v2 .content-hero-cta {
    align-self: start;
}

/* Trust stats: four figures on one row, thin dividers, on the navy band */
.location-layout-v2 .location-hero-stats {
    margin-top: auto;
    padding-top: var(--spacing-lg);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.location-layout-v2 .location-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.location-layout-v2 .location-hero-stat strong {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--white);
    font-variant-numeric: tabular-nums;
}

.location-layout-v2 .location-hero-stat span {
    font-size: 0.875rem;
    line-height: 1.4;
    color: #9FB0C6;
}

.location-layout-v2 .location-hero .content-page-title {
    font-size: clamp(2.5rem, 4.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-md);
    text-wrap: balance;
    max-width: none;
}

/* The place on its own line, a lighter navy-grey (6.4:1 on the band) */
.location-layout-v2 .location-hero-place {
    display: block;
    color: #9FB0C6;
}

.location-layout-v2 .location-nowrap {
    white-space: nowrap;
}

.location-layout-v2 .location-hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 34em;
    margin: 0 0 var(--spacing-md);
}

.location-layout-v2 .location-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    margin: 0 0 var(--spacing-md);
}

/* The hero's one action, larger than the site's .btn-large (per Justin 2026-11-09): 64px tall, 20px
   text. Nothing under it: "Available 24/7" is removed until the phone hours are confirmed, and no
   digits line, because CallRail swaps the dialled number for a tracking number, which would sit next
   to "833-99-BIRTH" and read as a second, different number. */
.location-layout-v2 .location-call-btn {
    min-height: 64px;
    padding: 16px 40px;
    font-size: 1.25rem;
    gap: 12px;
}

.location-layout-v2 .location-call-btn svg {
    width: 24px;
    height: 24px;
}

/* "On this page": pill links at least 44px tall, under the call in the text column */
.location-layout-v2 .location-hero-nav {
    max-width: 100%;
    margin-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding: 16px 0 0;
    font-size: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.location-layout-v2 .location-hero-nav-label {
    margin-right: 6px;
    color: #9FB0C6;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.location-layout-v2 .location-hero-nav a {
    color: var(--white);
    text-decoration: none;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-primary);
    font-weight: 500;
}

.location-layout-v2 .location-hero-nav a:hover,
.location-layout-v2 .location-hero-nav a:focus {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Desktop (form beside the text), per Justin 2026-11-09: no "On this page" row, and heading, Call and
   trust stats sit together, centred against the form, instead of the stats pinned to the form's foot
   with a gap above them. Phones and tablets (one column) keep the row under the Call button, where
   it is the quick way down a long page. */
@media (min-width: 993px) {
    .location-layout-v2 .location-hero-nav {
        display: none;
    }

    .location-layout-v2 .location-hero-text {
        justify-content: center;
        padding-top: 0;
    }

    .location-layout-v2 .location-hero-stats {
        margin-top: var(--spacing-xl);
        padding-top: 0;
    }
}

/* The case review card: the form lives here (the pop-up is gone on this page). Sized so
   Send Message is on screen at 1440 by 900. */
.location-layout-v2 .location-form-card {
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
    text-align: left;
    padding: var(--spacing-md);
    scroll-margin-top: 110px;
}

.location-layout-v2 .location-form-card:focus {
    outline: none;
}

.location-layout-v2 .location-form-card:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 4px;
}

.location-layout-v2 .location-form-title {
    color: var(--primary-dark);
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0 0 4px;
}

.location-layout-v2 .location-form-card > p {
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: var(--spacing-sm);
}

/* .hero-cta-card p (content-template.css) would also hit any text WS Form prints inside the
   form (help text, messages); keep that at the form's own size and spacing. */
.location-layout-v2 .location-form p {
    color: var(--dark-gray);
    font-size: 1rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1.5;
}

/* WS Form 3 fields: tap targets of at least 48px (WS Form's own rule, .wsf-form input[type].wsf-field,
   sets 44px, so this selector has to outrank it); the button full width and 48px. The message box
   keeps WS Form's own height. Fields, order, labels and placeholders are WS Form settings, untouched. */
.location-layout-v2 .location-form .wsf-form input.wsf-field,
.location-layout-v2 .location-form .wsf-form select.wsf-field {
    min-height: 48px;
}

.location-layout-v2 .location-form .wsf-button {
    width: 100%;
    min-height: 48px;
    box-shadow: none;
    transform: none;
}

/* Same red as the Call button, on this page only. The form's own skin colour stays as it is.
   The selectors match WS Form's own so these win without !important. */
.location-layout-v2 .location-form .wsf-form button.wsf-button.wsf-button-primary {
    background-color: var(--accent-dark-red);
    border-color: var(--accent-dark-red);
}

.location-layout-v2 .location-form .wsf-form button.wsf-button.wsf-button-primary:hover:enabled:not(:checked):not(:focus),
.location-layout-v2 .location-form .wsf-form button.wsf-button.wsf-button-primary:focus,
.location-layout-v2 .location-form .wsf-form button.wsf-button.wsf-button-primary:active {
    background-color: #B71C1C;
    border-color: #B71C1C;
}

/* Sidebar phone number: 44px touch target */
.location-layout-v2 .contact-widget .contact-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ---------- Section rhythm ---------- */
.location-layout-v2 .location-section {
    padding: var(--spacing-xxl) 0;
    scroll-margin-top: 110px;
}

.location-layout-v2 .location-section h2 {
    color: var(--primary-dark);
    font-size: 2rem;
    margin: 0 0 var(--spacing-sm);
}

.location-layout-v2 .location-section-lead {
    color: var(--dark-gray);
    max-width: 60ch;
    margin: 0 0 var(--spacing-lg);
}


/* ---------- Hospitals ---------- */
/* Two columns: the intro (lead, intro line, 90-day notice, guide link) stays in view on desktop while
   the hospital groups scroll beside it. The 90-day panel is the section's one bold element. */
.location-layout-v2 .location-hospitals {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: start;
}

.location-layout-v2 .location-hospitals-intro {
    position: sticky;
    top: 120px; /* clears the sticky site header */
}

/* Body text at the site's own size (18px on phones), so this section reads like the rest of the page */
.location-layout-v2 .location-hospitals-intro p {
    color: var(--dark-gray);
    font-size: 1.125rem;
    line-height: 1.65;
    margin: 0 0 var(--spacing-sm);
    max-width: 34rem;
}

/* The lead stands out by size and colour, not weight: a bold paragraph is hard to read on a phone.
   (Selector has to outrank the rule above, which otherwise sets its size and colour.) */
.location-layout-v2 .location-hospitals-intro .location-hospitals-lead {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--primary-dark);
    font-size: 1.3rem;
    line-height: 1.5;
}

/* 90-day notice: navy panel, the number in amber on the left, the guide's sentence on the right */
.location-layout-v2 .location-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    margin: var(--spacing-md) 0 var(--spacing-sm);
    padding: 22px 24px;
    background: var(--primary-dark);
    border-radius: 8px;
}

.location-layout-v2 .location-notice-days {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    font-family: var(--font-primary);
    color: #F4B860;
    line-height: 1;
}

.location-layout-v2 .location-notice-days b {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.location-layout-v2 .location-notice-days span {
    margin-top: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.location-layout-v2 .location-hospitals-intro .location-notice p {
    margin: 0;
    max-width: none;
    color: #DFE6F0;
    font-size: 1.0625rem;
    line-height: 1.6;
}

.location-layout-v2 .location-hospital-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.location-layout-v2 .location-hospital-more:hover,
.location-layout-v2 .location-hospital-more:focus {
    color: #B71C1C;
}

/* Directory: one group per kind of hospital, name first, neighborhood beside it */
.location-layout-v2 .location-hospital-group + .location-hospital-group {
    margin-top: var(--spacing-xl);
}

.location-layout-v2 .location-hospital-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--primary-dark);
}

.location-layout-v2 .location-hospital-group h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0;
}

.location-layout-v2 .location-hospital-tag {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: #FDF2E2;
    color: #8A4B0C;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.location-layout-v2 .location-hospital-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.location-layout-v2 .location-hospital-list li {
    margin: 0;
    padding: 16px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 20px;
    align-items: center;
    border-bottom: 1px solid #DDE2EA;
    line-height: 1.35;
}

.location-layout-v2 .location-hospital-name {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--primary-dark);
    font-size: 1rem;
}

.location-layout-v2 .location-hospital-area {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5F6B7D;
    font-size: 0.95rem;
    white-space: nowrap;
}

.location-layout-v2 .location-hospital-pin {
    flex: none;
}

/* ---------- What happens next ---------- */
/* Left: the three steps as one timeline (the order is real, so the numbers stay), then the no-pressure
   line and the lawyer page link. Right: the navy call card, the section's one bold element. */
.location-layout-v2 .location-next-section {
    background: var(--light-gray);
}

.location-layout-v2 .location-next {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 6vw, 88px);
    align-items: center;
}

.location-layout-v2 .location-steps {
    list-style: none;
    padding: 0;
    margin: var(--spacing-lg) 0;
    counter-reset: location-step;
}

.location-layout-v2 .location-steps li {
    counter-increment: location-step;
    position: relative;
    margin: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding-bottom: 28px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--primary-dark);
}

/* The number marker, the same for every step (a filled first step read as a progress state) */
.location-layout-v2 .location-steps li::before {
    content: counter(location-step);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--primary-dark);
    background: var(--white);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The line joining the markers */
.location-layout-v2 .location-steps li::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 48px;
    bottom: 4px;
    width: 2px;
    background: #D3DAE4;
}

.location-layout-v2 .location-steps li:last-child {
    padding-bottom: 0;
}

.location-layout-v2 .location-steps li:last-child::after {
    display: none;
}

.location-layout-v2 .location-next-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-md);
    border-top: 1px solid #D3DAE4;
}

.location-layout-v2 .location-steps-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-dark);
}

.location-layout-v2 .location-steps-note svg {
    flex: none;
}

.location-layout-v2 .location-lawyer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.location-layout-v2 .location-lawyer p {
    margin: 0;
    font-size: 0.95rem;
    color: #5F6B7D;
}

.location-layout-v2 .location-lawyer-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.location-layout-v2 .location-lawyer-link:hover,
.location-layout-v2 .location-lawyer-link:focus {
    color: #B71C1C;
}

/* Call card */
.location-layout-v2 .location-phone-panel {
    background: var(--primary-dark);
    color: #DFE6F0;
    border-radius: 8px;
    padding: clamp(28px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.location-layout-v2 .location-phone-panel h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--white);
    margin: 0 0 6px;
}

.location-layout-v2 .location-phone-intro p {
    margin: 0;
    font-size: 1.05rem;
    color: #DFE6F0;
}

.location-layout-v2 .location-phone-number {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--white);
    text-decoration: none;
}

.location-layout-v2 .location-phone-vanity {
    display: block;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(2.25rem, 4.2vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.location-layout-v2 .location-phone-vanity em {
    font-style: normal;
    color: #F4B860;
}

.location-layout-v2 .location-phone-number:hover .location-phone-vanity,
.location-layout-v2 .location-phone-number:focus .location-phone-vanity {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

.location-layout-v2 .location-phone-points {
    list-style: none;
    margin: 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    display: grid;
    gap: 10px;
}

.location-layout-v2 .location-phone-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--white);
    font-size: 1.05rem;
}

.location-layout-v2 .location-phone-points svg {
    flex: none;
    color: #F4B860;
}

.location-layout-v2 .location-phone-panel .location-phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 8px;
    background: var(--white);
    border: 0;
    color: var(--primary-dark);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: none;
    transform: none;
}

.location-layout-v2 .location-phone-panel .location-phone-btn:hover,
.location-layout-v2 .location-phone-panel .location-phone-btn:focus {
    background: #E8EEF6;
    color: var(--primary-dark);
    transform: none;
}

.location-layout-v2 .location-phone-panel a:focus-visible {
    outline: 3px solid #F4B860;
    outline-offset: 3px;
}

/* ---------- Case results and testimonial (dark band) ---------- */
/* The four amounts as the site's white result cards (main.css .local-result-card; the ledger was
   dropped 2026-11-09, Justin and Dani), then the quote with one large amber quote mark. Card sizes are
   option B of the 2026-11-09 mockup (picked by Wrenz 2026-11-10): a larger amount and case type.
   Heading, card text and disclaimer are centred (Dani 2026-11-10); the testimonial is a centred block
   with justified quote text (Dani 2026-11-10). main.css keeps the
   white card, the 8px corners, the 4 / 2 x 2 columns and the bold amount. */
.location-layout-v2 .location-results {
    background: var(--primary-dark);
    color: #dfe6f0;
    scroll-margin-top: 110px;
}

/* No width cap: one line wherever it fits, balanced lines on phones (Wrenz 2026-11-10) */
.location-layout-v2 .location-results h2 {
    margin: 0 auto clamp(32px, 4vw, 48px);
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
    color: var(--white);
}

/* Four equal columns across the full content width (not main.css's 900px box), the disclaimer 16px
   under them */
.location-layout-v2 .location-results .local-results-grid {
    max-width: none;
    margin: 0 0 16px;
    gap: var(--spacing-md);
}

/* Not a link or a button: plain cursor, no hover state, no shadow, no movement */
.location-layout-v2 .location-results .local-result-card {
    padding: 28px 28px 26px;
    text-align: center;
    cursor: default;
}

/* The darker navy, under the 32px heading, equal-width figures, one line on every card
   ("$8.25 Million" wrapped before) */
.location-layout-v2 .location-results .local-result-amount {
    font-family: var(--font-primary);
    font-size: 1.625rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--primary-dark);
    margin-bottom: 6px;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
}

/* On its own line, navy-grey at 7.2:1 on white */
.location-layout-v2 .location-results .local-result-type {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: #4A586B;
}

.location-layout-v2 .location-results .local-results-disclaimer {
    margin: 0;
    font-size: 1rem;
    font-style: normal;
    text-align: center;
    color: #b9c6d6;
}

/* The block is centred on the page and only as wide as its content; inside it the text is left-aligned:
   the mark in its own column, the quote beside it, the name under the quote (Wrenz 2026-11-10) */
.location-layout-v2 .location-testimonial {
    width: fit-content;
    max-width: 880px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px clamp(20px, 3vw, 40px);
    color: var(--white);
}

.location-layout-v2 .location-testimonial-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(5rem, 9vw, 7.5rem);
    line-height: 0.8;
    color: #F4B860;
    user-select: none;
}

.location-layout-v2 .location-testimonial blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Justified at every width, with automatic English hyphenation (<html lang="en-US">) to narrow the
   gaps between words on phones; normal wrapping, since balance fights justify (Dani 2026-11-10) */
.location-layout-v2 .location-testimonial blockquote p {
    max-width: 60ch;
    margin: 0;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.55;
    font-style: normal;
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: wrap;
    color: var(--white);
}

.location-layout-v2 .location-testimonial figcaption {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.location-layout-v2 .location-testimonial-initial {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
}

.location-layout-v2 .location-testimonial-name {
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--white);
}

/* ---------- Other NY locations ---------- */
.location-layout-v2 .location-locations-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs) var(--spacing-md);
}

.location-layout-v2 .location-locations-list li {
    margin: 0;
}

.location-layout-v2 .location-locations-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0;
    color: var(--primary-dark);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}

.location-layout-v2 .location-locations-list a:hover,
.location-layout-v2 .location-locations-list a:focus {
    color: var(--primary-blue);
    border-bottom-color: var(--primary-blue);
}

.location-layout-v2 .location-locations-list svg {
    color: var(--primary-blue);
    flex-shrink: 0;
}

/* ---------- The guide ---------- */
.location-layout-v2 .location-guide {
    scroll-margin-top: 110px;
}

.location-layout-v2 .location-guide .content-main-article {
    font-size: 1.2rem;
}

.location-layout-v2 .location-guide-label {
    font-size: 1.75rem;
    margin: 0 0 var(--spacing-md);
}

/* Byline and date, just above the guide text */
.location-layout-v2 .location-guide-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--dark-gray);
}

.location-layout-v2 .post-byline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
}

/* about.css colours these white for dark heroes; here they sit on the white article. */
.location-layout-v2 .post-byline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--dark-gray);
}

.location-layout-v2 .author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
    transition: border-color 0.2s ease;
    flex-shrink: 0;
}

.location-layout-v2 .author-name-hover {
    position: relative;
    font-weight: 700;
    color: var(--primary-dark);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.location-layout-v2 .author-name-hover:hover .author-avatar {
    border-color: var(--primary-blue);
}

.location-layout-v2 .author-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--white);
    color: var(--primary-dark);
    padding: var(--spacing-md);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 320px;
    margin: 0; /* about.css adds margin-left: -150px for its own centring */
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
    font-size: 0.875rem;
    line-height: 1.6;
    pointer-events: none;
    font-weight: 400;
}

.location-layout-v2 .author-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--white);
}

.location-layout-v2 .author-tooltip strong {
    color: var(--primary-dark);
    font-size: 1rem;
}

.location-layout-v2 .author-tooltip em {
    color: var(--primary-blue);
    font-size: 0.85rem;
}

/* Show on hover only: no vertical movement */
.location-layout-v2 .author-name-hover:hover .author-tooltip {
    opacity: 1;
    visibility: visible;
}

.location-layout-v2 .post-meta-info {
    display: flex;
    align-items: center;
    color: var(--dark-gray);
}

.location-layout-v2 .post-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--dark-gray);
}

/* Folded sections: the summary holds the guide's own H2, so headings, ids and links are unchanged */
.location-layout-v2 .location-guide-section {
    border-top: 1px solid #e0e0e0;
}

.location-layout-v2 .location-guide-section:last-of-type {
    border-bottom: 1px solid #e0e0e0;
}

.location-layout-v2 .location-guide-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    min-height: 44px;
}

.location-layout-v2 .location-guide-summary::-webkit-details-marker {
    display: none;
}

.location-layout-v2 .location-guide-summary::marker {
    content: "";
}

.location-layout-v2 .location-guide-summary h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 0;
    line-height: 1.3;
}

.location-layout-v2 .location-guide-summary:hover h2 {
    color: var(--primary-blue);
}

.location-layout-v2 .location-guide-summary:focus-visible {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Chevron: points down when closed, up when open (rotation only, no movement) */
.location-layout-v2 .location-guide-chevron {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--primary-blue);
    border-bottom: 2px solid var(--primary-blue);
    transform: rotate(45deg);
    margin-right: 4px;
    transition: transform 0.2s ease;
}

.location-layout-v2 .location-guide-section[open] .location-guide-chevron {
    transform: rotate(-135deg);
}

.location-layout-v2 .location-guide-body {
    padding: 0 0 var(--spacing-md);
}

.location-layout-v2 .location-guide-body p:last-child {
    margin-bottom: 0;
}

/* Headings jumped to from a link clear the sticky header */
.location-layout-v2 .location-article-body h2[id] {
    scroll-margin-top: 110px;
}

/* ---------- Small laptop / tablet landscape: two columns, but the text column is narrow ---------- */
@media (min-width: 993px) and (max-width: 1199px) {
    .location-layout-v2 .location-hero-stats {
        grid-template-columns: 1fr 1fr;
    }

    /* Four narrow result cards */
    .location-layout-v2 .location-results .local-result-amount {
        font-size: 1.5rem;
    }
}

/* ---------- Tablet ---------- */
@media (max-width: 992px) {
    .location-layout-v2 .location-hero-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .location-layout-v2 .location-hero .content-page-title {
        max-width: none;
    }

    /* One column: the text column's two parts become grid rows so the stats can follow the form */
    .location-layout-v2 .location-hero-text {
        display: contents;
    }

    .location-layout-v2 .location-hero-main {
        padding-top: var(--spacing-md);
    }

    /* One column: the form and the call card keep a readable width instead of spanning the tablet */
    .location-layout-v2 .content-hero-cta {
        order: 1;
        width: 100%;
        max-width: 600px;
    }

    .location-layout-v2 .location-phone-panel {
        width: 100%;
        max-width: 600px;
    }

    .location-layout-v2 .location-hero-stats {
        order: 2;
        margin-top: 0;
        padding-top: 0;
    }

    /* Stacked: the list starts further below the guide link than the two groups sit apart, so it
       reads as a new block, not as more of the intro */
    .location-layout-v2 .location-hospitals {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-xl) + var(--spacing-sm));
    }

    .location-layout-v2 .location-next {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .location-layout-v2 .location-hospitals-intro {
        position: static;
    }

    .location-layout-v2 .location-hospitals-intro p {
        max-width: 40rem;
    }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
    .location-layout-v2 .location-hero {
        padding: var(--spacing-lg) 0 var(--spacing-xl);
    }

    /* On a phone the grid's bright spot sits top right, behind the heading's end, not the copy */
    .location-layout-v2 .location-hero::before {
        -webkit-mask-image: radial-gradient(60% 40% at 70% 20%, #000 0%, transparent 100%);
        mask-image: radial-gradient(60% 40% at 70% 20%, #000 0%, transparent 100%);
    }

    .location-layout-v2 .location-hero .content-page-title {
        font-size: 2.25rem;
    }

    .location-layout-v2 .location-hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-md);
    }

    .location-layout-v2 .location-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
    }

    .location-layout-v2 .location-call-btn {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* The pills wrap onto more rows, so every link is visible and nothing scrolls sideways */
    .location-layout-v2 .location-hero-nav {
        flex-wrap: wrap;
        gap: 8px;
    }

    .location-layout-v2 .location-hero-nav a {
        flex-shrink: 0;
    }

    .location-layout-v2 .location-form-card {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .location-layout-v2 .location-form-title {
        font-size: 1.25rem;
    }

    /* Trust stats 2 by 2 on phones */
    .location-layout-v2 .location-hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-sm);
    }

    .location-layout-v2 .location-hero-stat strong {
        font-size: 1.25rem;
    }

    .location-layout-v2 .location-section {
        padding: var(--spacing-xl) 0;
    }

    .location-layout-v2 .location-section h2 {
        font-size: 1.6rem;
    }

    .location-layout-v2 .location-hospital-list li {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 14px 0;
    }

    .location-layout-v2 .location-hospital-tag {
        margin-left: 0;
    }

    .location-layout-v2 .location-notice {
        padding: 20px;
        gap: 16px;
    }

    /* Phone: "90 DAYS" on one line above the sentence, so the sentence gets the full width */
    .location-layout-v2 .location-notice {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .location-layout-v2 .location-notice-days {
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .location-layout-v2 .location-notice-days span {
        margin-top: 0;
    }

    .location-layout-v2 .location-steps li {
        font-size: 1.05rem;
        grid-template-columns: 44px 1fr;
    }

    .location-layout-v2 .location-steps li::before {
        width: 44px;
        height: 44px;
    }

    .location-layout-v2 .location-phone-panel {
        padding: var(--spacing-md);
    }

    .location-layout-v2 .location-phone-vanity {
        font-size: 2.1rem;
    }

    .location-layout-v2 .location-notice-days b {
        font-size: 2.25rem;
    }

    /* Result cards (2 x 2, from main.css): the amount grows with the screen and stays on one line
       (22px at 440, 19.5px at 390, 17.6px at 320); the case type is 16px */
    .location-layout-v2 .location-results .local-results-grid {
        gap: var(--spacing-sm);
    }

    .location-layout-v2 .location-results .local-result-card {
        padding: 18px var(--spacing-sm);
    }

    .location-layout-v2 .location-results .local-result-amount {
        font-size: clamp(1.1rem, 5vw, 1.5rem);
    }

    .location-layout-v2 .location-results .local-result-type {
        font-size: 1rem;
    }

    .location-layout-v2 .location-locations-list {
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--spacing-sm);
    }

    .location-layout-v2 .location-guide .content-main-article {
        font-size: 1.0625rem;
    }

    .location-layout-v2 .location-guide-label {
        font-size: 1.4rem;
    }

    .location-layout-v2 .location-guide-summary h2 {
        font-size: 1.15rem;
    }

    .location-layout-v2 .author-tooltip {
        width: 280px;
        font-size: 0.8rem;
        left: 0;
        transform: none;
    }

    .location-layout-v2 .author-tooltip::after {
        left: 20px;
        transform: none;
    }
}

/* ---------- Tablet, centred (601 to 992px) ---------- */
/* One column with room to spare: the 600px cards sat against the left edge with an empty strip on the
   right. Here the hero is centred (text, Call button, links, form card, stats) and "What Happens Next"
   is a centred 600px column, so the steps and the call card line up. Phones and desktop are unchanged;
   the hospitals, results, locations and guide stay full width. */
@media (min-width: 601px) and (max-width: 992px) {
    .location-layout-v2 .location-hero-text {
        text-align: center;
    }

    .location-layout-v2 .location-hero-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .location-layout-v2 .location-hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    .location-layout-v2 .location-hero-actions,
    .location-layout-v2 .location-hero-nav {
        justify-content: center;
    }

    .location-layout-v2 .content-hero-cta {
        justify-self: center;
    }

    .location-layout-v2 .location-next-section .container {
        max-width: 632px;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 520px) {
    /* One column: a smaller quote mark above the quote, the name under it */
    .location-layout-v2 .location-testimonial {
        grid-template-columns: minmax(0, 1fr);
    }

    .location-layout-v2 .location-testimonial-mark {
        margin-bottom: -24px;
        font-size: 4.5rem;
    }

    .location-layout-v2 .location-testimonial figcaption {
        grid-column: 1;
    }

    /* Long names ("Birth Injuries in Niagara Falls, New York") read better one per line */
    .location-layout-v2 .location-locations-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The guide card: less inner padding, so the text column is not squeezed by two sets of margins */
    .location-layout-v2 .location-guide .content-main-article {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ---------- Smallest phones ---------- */
@media (max-width: 374px) {
    /* Keeps "Birth Injury" together in the results heading */
    .location-layout-v2 .location-results h2 {
        font-size: 1.75rem;
    }

    /* Room for "$8.25 Million" on one line at 320px */
    .location-layout-v2 .location-results .local-results-grid {
        gap: 12px;
    }

    .location-layout-v2 .location-results .local-result-card {
        padding: var(--spacing-sm) 10px;
    }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .location-layout-v2 *,
    .location-layout-v2 *::before,
    .location-layout-v2 *::after {
        transition: none !important;
    }
}