/* ==========================================================================
   DelhiPD public microsite - shared stylesheet
   Used by Profile.aspx, About.aspx, PracticeAreas.aspx, Contact.aspx,
   Default.aspx and NotFound.aspx.

   Design intent: a single quiet, "printed business card" page for a
   practicing advocate. Deep charcoal-navy + warm off-white, one dark
   goldenrod accent used sparingly, a serif display face for the firm
   name paired with a plain sans-serif for everything else. Light theme
   is the default; a prefers-color-scheme(dark) block inverts the two
   anchor colors (the navy becomes the background, the off-white becomes
   the heading color) while keeping the same gold accent.
   ========================================================================== */

:root {
    /* anchor colors */
    --bg: #f7f5f0;              /* warm off-white page background */
    --card-bg: #fffefc;         /* slightly warm card surface, not stark white */
    --heading: #1a2332;         /* deep charcoal-navy - firm name / hero text */
    --text-body: #363c49;       /* softened navy-grey for body copy */
    --muted: #75726c;           /* warm mid-grey for meta / section labels */
    --border: #e6e1d3;          /* warm hairline border */
    --border-soft: #efebe0;     /* even quieter divider, e.g. between contact rows */

    /* accent - dark goldenrod, used sparingly (rules, badges, eyebrow, links) */
    --accent: #b8860b;
    --accent-soft: rgba(184, 134, 11, .12);   /* badge fill */
    --accent-border: rgba(184, 134, 11, .38); /* badge outline */
    /* Same gold hue, deepened slightly so phone/email link text and badge
       text keep comfortable reading contrast on the light background;
       every other accent use (rule, eyebrow, badges border, dark-theme
       links) stays the exact #b8860b above. */
    --accent-text: #96690c;

    --shadow: 0 1px 2px rgba(26, 35, 50, .04), 0 4px 14px rgba(26, 35, 50, .05);

    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Hero band / top nav - a real photograph (see .hero-band below) sits
       behind both, so unlike the rest of the page they do NOT invert with
       light/dark mode: a photo-backed band reads as one fixed, deliberately
       lit surface regardless of the visitor's OS theme, exactly like a real
       photographic website header would. These tokens are the same in both
       themes on purpose - they are not redefined in the dark-mode block below. */
    --hero-fixed-bg: #10151f;
    --hero-text: #f7f5f0;
    --hero-pill-bg: rgba(247, 245, 240, .1);
    --hero-pill-bg-hover: rgba(247, 245, 240, .18);
    --hero-pill-border: rgba(247, 245, 240, .32);
    --hero-pill-border-hover: rgba(247, 245, 240, .55);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a2332;
        --card-bg: #222c40;
        --heading: #f7f5f0;
        --text-body: #d9d6cc;
        --muted: #9a978d;
        --border: #313d54;
        --border-soft: #2a3549;

        --accent: #b8860b;
        --accent-soft: rgba(184, 134, 11, .16);
        --accent-border: rgba(184, 134, 11, .42);
        /* Dark navy background already gives the base gold comfortable
           contrast, so link/badge text does not need deepening here. */
        --accent-text: #b8860b;

        --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .3);

        /* --hero-fixed-bg / --hero-text / --hero-pill-* are deliberately NOT
           redefined here - the photographic hero/nav band stays the same in
           both themes (see the :root comment above). */
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Profile page shell ---------- */
/* Widened per the approved desktop mockup - a narrow 720px centered column
   read as "a landing page, not a real website" on a real monitor. 1320px
   with generous 48px side padding gives the new multi-column sections
   (About-the-Firm cards, Advocates grid, footer columns) real room. */

.page-shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.75rem 48px 4rem;
}

.eyebrow {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--accent);
    margin: 0 0 .65rem;
}

.firm-name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(1.85rem, 5.5vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--heading);
    margin: 0;
    word-wrap: break-word;
}

/* ---------- Top navigation ---------- */
/* Shared across Profile.aspx (Home), About.aspx, PracticeAreas.aspx,
   Acts.aspx and Contact.aspx. Per the approved desktop mockup this is now a
   LIGHT header bar, visually separate from the dark photographic hero band
   underneath it (previously it shared --hero-fixed-bg and the two read as
   one merged block). Built server-side by Core/SiteNav.cs, never pointing
   anywhere but the current tenant's own slug-scoped pages. */

.site-nav {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
}

.site-nav-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 88px;
}

/* Logo mark + firm-name/eyebrow lockup on the left - the ONLY place this
   identity strip appears at the very top of the page. The hero below keeps
   its own larger serif firm-name heading on the dark photo; that is an
   intentional repeat (header identity strip, then a bold hero restatement),
   not a duplication mistake. */

.site-nav-brand {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-width: 0;
}

.site-nav-logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--heading);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: .02em;
}

.site-nav-firmblock {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.site-nav-firmname {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--heading);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-nav-eyebrow {
    font-family: var(--font-sans);
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--accent);
    margin: .15rem 0 0;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    overflow-x: auto;
    flex: 0 1 auto;
}

.site-nav-link {
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text-body);
    opacity: .72;
    text-decoration: none;
    white-space: nowrap;
    padding: .3rem 0;
    border-bottom: 2px solid transparent;
}

.site-nav-link:hover,
.site-nav-link:focus-visible {
    opacity: 1;
}

.site-nav-link.is-active {
    opacity: 1;
    color: var(--heading);
    border-bottom-color: var(--accent);
}

/* ---------- Hero band ---------- */
/* Full-bleed band behind the firm name - a real photograph (a public-domain
   courthouse exterior; see assets/images/hero-courthouse.jpg's licensing
   note at the bottom of this file) under a dark gradient so the light hero
   text stays comfortably readable over any part of the image. This is the
   page's main visual anchor, deliberately fixed/not theme-inverted - see the
   --hero-fixed-bg / --hero-text tokens' own comment in :root above. */

.hero-band {
    position: relative;
    background:
        linear-gradient(180deg, rgba(16, 21, 31, .74), rgba(16, 21, 31, .88)),
        url("/assets/images/hero-courthouse.jpg") center 30% / cover no-repeat;
    padding: 4.5rem 48px 5rem;
}

.hero-inner {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
}

.hero-band .firm-name {
    color: var(--hero-text);
}

/* ---------- Hero illustration ---------- */
/* The line-art deed-and-seal built by Core/HeroArt.cs - now a small, quiet
   watermark badge in the corner of the photographic hero (rather than a
   full-size icon competing with it for attention), a discreet branded touch
   rather than the page's main visual. Fixed off-white tint regardless of
   theme, matching the rest of this photo-backed band. */

.hero-art {
    position: absolute;
    right: 0;
    bottom: -.5rem;
    width: 58px;
    color: #f7f5f0;
    opacity: .4;
    pointer-events: none;
}

.hero-band--compact .hero-art {
    display: none;
}

.hero-art svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Slimmer variant used as the page-header treatment on About.aspx,
   PracticeAreas.aspx and Contact.aspx - same photographic band, just less
   vertical padding and a smaller firm-name size since there is no tagline
   or hero actions underneath it on those pages. */

.hero-band--compact {
    padding: 2.25rem 48px 2.5rem;
}

.hero-band--compact .firm-name {
    font-size: clamp(1.5rem, 4.5vw, 2.15rem);
}

.hero-tagline {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--hero-text);
    opacity: .82;
    margin: .85rem 0 0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--hero-pill-bg);
    border: 1px solid var(--hero-pill-border);
    color: var(--hero-text);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: .95rem;
    padding: .7rem 1.15rem;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.3;
}

.hero-btn:hover,
.hero-btn:focus-visible {
    background: var(--hero-pill-bg-hover);
    border-color: var(--hero-pill-border-hover);
}

.hero-btn-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.hero-btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------- Panels / cards ---------- */

.panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}

.panel:last-of-type {
    margin-bottom: 2.5rem;
}

.panel-title {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin: 0 0 1.1rem;
}

/* ---------- Contact rows ---------- */

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .65rem 0;
}

.contact-row + .contact-row {
    border-top: 1px solid var(--border-soft);
}

.contact-row:first-of-type {
    padding-top: 0;
}

.contact-row:last-of-type {
    padding-bottom: 0;
}

.contact-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .15rem;
    color: var(--accent);
}

.contact-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.contact-value {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body);
    word-break: break-word;
    min-width: 0;
}

.contact-link {
    color: var(--accent-text);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.contact-link:hover,
.contact-link:focus-visible {
    border-bottom-color: var(--accent-text);
}

/* ---------- Field values / About text ---------- */

.field-value {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
}

.about-text {
    line-height: 1.75;
}

/* ---------- Areas of Practice grid ---------- */
/* Each card now carries a real explanatory paragraph (from Core/PracticeAreaLibrary.cs)
   alongside the area name, not just the name alone - so the grid is a single stacked
   column of readable cards rather than a dense tile grid of short labels. */

.practice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.practice-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}

.practice-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: .15rem;
    color: var(--accent-text);
}

.practice-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.practice-card-body {
    min-width: 0;
}

.practice-name {
    display: block;
    font-family: var(--font-sans);
    font-size: .98rem;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.35;
}

.practice-desc {
    font-family: var(--font-sans);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: .4rem 0 0;
}

/* ---------- Acts & Rules ---------- */
/* A short intro line above the panel, and a stacked list of law/concept
   cards inside it - same panel/card visual language as everything else,
   distinguished from .practice-card only by not having an icon (these are
   references to law, not services this firm performs). */

.section-intro {
    font-family: var(--font-sans);
    font-size: .95rem;
    line-height: 1.65;
    color: var(--muted);
    margin: 0 0 1.5rem;
}

.acts-list,
.acts-teaser-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.act-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.25rem;
}

.act-title {
    font-family: var(--font-sans);
    font-size: .98rem;
    font-weight: 600;
    color: var(--heading);
    margin: 0;
    line-height: 1.35;
}

.act-desc {
    font-family: var(--font-sans);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text-body);
    margin: .4rem 0 0;
}

/* Home page's shorter "Key Property Laws" teaser - same act-card look, one
   level up in a section of its own rather than nested inside a .panel,
   since this section already carries its own heading/intro/CTA link. */

.acts-teaser {
    margin-bottom: 1.25rem;
}

/* Grid columns/gap for .acts-teaser-list come from the shared
   ".acts-list, .acts-teaser-list" rule above (same act-card grid as the
   dedicated Acts.aspx page) - this just adds the teaser's own bottom
   margin before its "View all Acts & Rules" link. */
.acts-teaser-list {
    margin-bottom: 1rem;
}

.acts-teaser-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-sans);
    font-size: .88rem;
    font-weight: 600;
    color: var(--accent-text);
    text-decoration: none;
}

.acts-teaser-link:hover,
.acts-teaser-link:focus-visible {
    text-decoration: underline;
}

/* ---------- Shared section heading (new Home-page content sections) ---------- */
/* .eyebrow (defined above) is reused for the small accent label above each of
   these; .section-title is the larger serif heading that follows it. */

.section-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--heading);
    margin: 0 0 1rem;
}

.content-section {
    margin-bottom: 1.75rem;
}

/* ---------- About the Firm (two cards) ---------- */

.about-firm {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}

.about-firm-card {
    margin-bottom: 0;
}

.about-firm-divider {
    border-top: 1px solid var(--border-soft);
    margin: 1.1rem 0;
}

/* ---------- Our Advocates ---------- */

.advocates-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.advocate-card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
}

.advocate-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .9rem;
}

.advocate-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--heading);
}

.advocate-designation {
    font-family: var(--font-sans);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-text);
    margin-top: .35rem;
}

.advocate-bar {
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--muted);
    margin-top: .5rem;
}

/* ---------- Deeds & Documents We Draft (pills) ---------- */

.deed-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.deed-pill {
    display: inline-flex;
    align-items: center;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-text);
    font-family: var(--font-sans);
    font-size: .85rem;
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 999px;
}

/* ---------- Documents You May Need (checklist card) ---------- */

.documents-checklist-card .field-value {
    margin: .35rem 0 0;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1.5rem;
    margin-top: 1.15rem;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}

.checklist-icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .1rem;
    color: var(--accent);
}

.checklist-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.checklist-text {
    font-family: var(--font-sans);
    font-size: .92rem;
    line-height: 1.55;
    color: var(--text-body);
}

/* ---------- Entry disclaimer gate ---------- */
/* Compliance-positive consent gate shown once per browser (see assets/js/site.js).
   Not a marketing element - a full-screen blocking overlay with a single
   "I Agree" action, no backdrop-click or Escape dismissal. */

.disclaimer-gate {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(26, 35, 50, .72);
}

.disclaimer-gate[hidden] {
    display: none;
}

.disclaimer-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: 12px;
    max-width: 480px;
    width: 100%;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: var(--shadow);
}

.disclaimer-box h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--heading);
    margin: 0 0 .85rem;
}

.disclaimer-box p {
    font-family: var(--font-sans);
    font-size: .92rem;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0 0 1.35rem;
}

.disclaimer-agree {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--accent);
    color: #fffefc;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .95rem;
    border: none;
    border-radius: 8px;
    padding: .8rem 1.25rem;
    cursor: pointer;
}

.disclaimer-agree:hover,
.disclaimer-agree:focus-visible {
    background: var(--accent-text);
}

body.disclaimer-active {
    overflow: hidden;
}

/* ---------- Multi-column footer ---------- */
/* Built server-side by Core/SiteFooter.cs, shared by all five public pages.
   A full-bleed dark surface, deliberately using the same fixed (non theme-
   inverting) tokens as the photographic hero band - see --hero-fixed-bg's
   own comment in :root above - so it reads as one consistent "dark element"
   with the hero regardless of the visitor's light/dark OS theme. */

.site-footer-wide {
    background: var(--hero-fixed-bg);
    color: var(--hero-text);
    margin-top: 2rem;
}

.footer-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 3rem 48px 2rem;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .85rem;
}

.footer-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--hero-text);
    color: var(--hero-fixed-bg);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: .92rem;
}

.footer-firmname {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--hero-text);
}

.footer-tagline {
    font-family: var(--font-sans);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--hero-text);
    opacity: .72;
    margin: 0;
    max-width: 34ch;
}

.footer-heading {
    font-family: var(--font-sans);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--hero-text);
    opacity: .55;
    margin: 0 0 1rem;
}

.footer-links,
.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.footer-links a,
.footer-contact a {
    color: var(--hero-text);
    opacity: .82;
    text-decoration: none;
    font-size: .9rem;
}

.footer-links a:hover,
.footer-links a:focus-visible,
.footer-contact a:hover,
.footer-contact a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.footer-contact li {
    color: var(--hero-text);
    opacity: .82;
    font-size: .9rem;
    line-height: 1.55;
}

.footer-bar-number {
    opacity: .6 !important;
    font-size: .82rem !important;
}

.footer-bottom {
    border-top: 1px solid var(--hero-pill-border);
}

.footer-bottom-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.25rem 48px 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.footer-disclaimer {
    font-size: .78rem;
    line-height: 1.6;
    color: var(--hero-text);
    opacity: .58;
    margin: 0;
    max-width: 720px;
}

.footer-copyright {
    font-size: .78rem;
    color: var(--hero-text);
    opacity: .58;
    margin: 0;
    white-space: nowrap;
}

/* ---------- Simple pages: Default.aspx / NotFound.aspx ---------- */

body.simple-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.simple-shell {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 1.5rem;
}

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

.simple-card .eyebrow {
    text-align: center;
}

.simple-card .field-value {
    color: var(--muted);
}

/* ---------- Responsive ---------- */
/* Two tiers for the wide (1320px/48px) desktop layout: a ~900px tablet tier
   that drops the 3-column grids to 2 columns, and a ~640px tier that pulls
   every wrap-like container's side padding in to 24px and collapses every
   multi-column grid (About-the-Firm cards, Advocates, Acts, Practice Areas,
   Documents checklist, footer columns) down to a single column. The existing
   480px tier below layers a few finer phone-width adjustments on top. */

@media (max-width: 900px) {
    .practice-grid,
    .advocates-grid,
    .acts-list,
    .acts-teaser-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .page-shell {
        padding: 2.25rem 24px 3.5rem;
    }

    .site-nav-inner {
        flex-wrap: wrap;
        height: auto;
        padding: .85rem 24px;
        row-gap: .65rem;
    }

    .site-nav-links {
        width: 100%;
        gap: 1.1rem;
    }

    .hero-band {
        padding: 3.25rem 24px 3.75rem;
    }

    .hero-band--compact {
        padding: 2rem 24px 2.25rem;
    }

    .about-firm {
        grid-template-columns: 1fr;
    }

    .practice-grid,
    .advocates-grid,
    .acts-list,
    .acts-teaser-list,
    .checklist-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        padding: 2.5rem 24px 1.5rem;
        gap: 1.75rem;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem 24px 1.5rem;
    }
}

@media (max-width: 480px) {
    .page-shell {
        padding: 2rem 1.15rem 3rem;
    }

    .site-nav-inner {
        padding: .75rem 1.15rem;
        gap: 1.15rem;
    }

    .hero-band {
        padding: 3rem 1.15rem 3.25rem;
    }

    .hero-band--compact {
        padding: 1.75rem 1.15rem 2rem;
    }

    .hero-art {
        width: 44px;
    }

    .hero-tagline {
        font-size: .95rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: 1.5rem;
    }

    .hero-btn {
        justify-content: center;
    }

    .panel {
        padding: 1.25rem 1.25rem;
    }

    .contact-row {
        gap: .65rem;
    }

    .practice-grid {
        grid-template-columns: 1fr;
    }

    .disclaimer-box {
        padding: 1.5rem 1.4rem 1.25rem;
    }

    .simple-shell {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   assets/images/hero-courthouse.jpg licensing note

   Source: Openverse (openverse.org) -> Wikimedia/rawpixel, title "County
   courthouse". Licensed CC0 1.0 (public domain dedication) -
   https://creativecommons.org/publicdomain/zero/1.0/ - no attribution
   required, free for commercial use and modification. Downloaded once and
   self-hosted in this project rather than hotlinked, so this hero never
   depends on a third-party host staying up.
   ========================================================================== */