/* Layout: Direction A, Refined Heritage. Navy-and-pale-blue law firm site; one light look by design, matching the approved mockup. */
:root {
  --navy: #1A2740; --navy-deep: #121C30; --slate: #3A4A6B; --sky: #E6F0FF; --paper: #F7F9FC; --white: #FFFFFF;
  --ink: #0D141A; --body: #1F2A37; --rule: #C9D6EA; --rule-soft: #DCE3EE; --muted-on-navy: #DCE5F5; --label-on-navy: #B9C8E3; --line-on-navy: #3A4A6B;
  --focus: #2F6FD6; --warn-bg: #FFF4DB; --warn-ink: #5A4100;
  --display: "EB Garamond", "Junge", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
html { font-size: clamp(16px, 0.5vw + 11.8px, 23px); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; }
a { color: var(--navy); }
@media (hover: hover) { a:hover { color: var(--slate); } }   /* touch screens would keep this color on the last link tapped */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--navy); text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { max-width: 75rem; margin: 0 auto; padding-inline: clamp(1.125rem, 4vw, 4rem); }
@media (max-width: 600px) { .wrap { padding-inline: 1.125rem; } }
.eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.75rem; border-radius: 0.25rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--slate); color: var(--white); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-light { background: var(--white); color: var(--navy); }
.btn-light:hover { background: var(--sky); color: var(--navy); }
.btn-ghost-light { border-color: #8FA6C9; color: var(--white); background: transparent; }
.btn-ghost-light:hover { color: var(--white); background: var(--slate); }
.link-btn { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 0.5rem; font-weight: 600; text-underline-offset: 0.3125rem; }
.btn-sm { min-height: 2.75rem; padding: 0 1.125rem; font-size: 0.9375rem; }
.btn-phone { flex-direction: column; gap: 1px; line-height: 1.15; padding-block: 0.3125rem; }
.btn-phone .vanity { font-size: 0.72em; font-weight: 600; letter-spacing: 0.08em; opacity: 0.85; }
.contact-lines .vanity-line { color: var(--white); font-size: 1rem; font-weight: inherit; letter-spacing: 0; }
.dial { display: inline-flex; gap: 0.5rem; margin: 0.25rem 0 0.5rem; }
.dial a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.125rem; border: 1px solid #8FA6C9; border-radius: 4px; color: var(--white); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.dial a:hover { background: var(--slate); color: var(--white); }

/* preview banner */
.preview-bar { background: var(--warn-bg); color: var(--warn-ink); font-size: 0.8125rem; }
.preview-bar .wrap { padding-block: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; justify-content: space-between; align-items: center; }
.preview-bar strong { font-weight: 600; }
@media (max-width: 699px) { .preview-bar .wrap { flex-wrap: nowrap; padding-block: 0.375rem; } .preview-bar .fx-toggle button { min-height: 1.625rem; padding: 0.125rem 0.625rem; } }

/* header */
.site-header { background: var(--white); border-bottom: 1px solid var(--rule-soft); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.site-header .wrap { padding-block: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.logo { flex: 0 0 auto; display: block; line-height: 0; }
.logo img { height: 2.5rem; width: auto; aspect-ratio: 435 / 99; max-width: none; flex-shrink: 0; object-fit: contain; display: block; }
.nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.9375rem; font-weight: 500; }
.nav > a, .nav-drop > button { text-decoration: none; color: var(--navy); background: none; border: 0; font: inherit; cursor: pointer; padding: 0.625rem 0; display: inline-flex; align-items: center; gap: 0.375rem; }
.nav a[aria-current="page"], .nav-drop > button.is-current { text-decoration: underline; text-underline-offset: 0.375rem; }
.nav-drop { position: relative; }
.drop-panel { position: absolute; top: calc(100% + 0.75rem); left: -1.25rem; width: 20rem; background: var(--white); border: 1px solid var(--rule-soft); border-radius: 0.375rem; box-shadow: 0 1.125rem 2.5rem rgba(26,39,64,0.12); padding: 0.625rem; display: grid; gap: 2px; }
.drop-panel a { display: block; padding: 0.625rem 0.75rem; border-radius: 0.25rem; text-decoration: none; color: var(--ink); font-weight: 500; }
.drop-panel a:hover, .drop-panel a[aria-current="page"] { background: var(--sky); color: var(--navy); }
.drop-panel a[aria-current="page"] { text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.menu-toggle { display: none; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.875rem; border: 1px solid var(--navy); border-radius: 0.25rem; background: var(--white); color: var(--navy); font: inherit; font-weight: 600; cursor: pointer; }
.mobile-menu { border-top: 1px solid var(--rule-soft); background: var(--white); }
.mobile-menu .wrap { padding-block: 0.75rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; align-items: stretch; gap: 0.25rem; }
.mobile-menu a { display: block; padding: 0.75rem 0; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--rule-soft); }
.mobile-menu .sub { padding-left: 1rem; font-weight: 400; font-size: 0.9375rem; }
.mobile-menu a.btn { display: flex; justify-content: center; align-items: center; min-height: 3.25rem; padding: 0 1.25rem; margin-top: 0.75rem; border: 1px solid var(--navy); border-radius: 0.25rem; font-weight: 600; text-align: center; }
.mobile-menu a.btn + a.btn { margin-top: 0.5rem; }
.mobile-menu a.btn-primary { color: var(--white); }
@media (max-width: 1199px) {
  .nav, .header-actions .hide-sm { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; }
}

/* sections */
section { scroll-margin-top: 5.625rem; }
.band-sky { background: var(--sky); }
.band-white { background: var(--white); border-block: 1px solid var(--rule-soft); }
.band-navy { background: var(--navy); color: var(--white); }
.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--white); }
.pad-xl { padding-block: clamp(3.25rem, 9vw, 7rem); }
.pad-l { padding-block: clamp(2.75rem, 7vw, 6rem); }
.h1 { font-size: clamp(2.375rem, 5vw, 3.875rem); line-height: 1.08; }
.h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.12; }
.h3 { font-size: 1.625rem; line-height: 1.2; }
.lead { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--body); max-width: 38em; }
.stack { display: flex; flex-direction: column; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* hero */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(28.75rem, 100%), 1fr)); gap: 4rem; align-items: center; }
.paths { background: var(--white); border: 1px solid var(--rule); border-radius: 0.375rem; }
.paths > div { padding: 1.75rem 2rem; border-bottom: 1px solid var(--rule-soft); }
.paths > div:last-child { border-bottom: 0; padding-block: 1.125rem; font-size: 0.875rem; color: var(--slate); }
.paths .h3 { font-size: 1.5rem; margin-top: 0.25rem; }
.paths p.body { margin-top: 0.5rem; color: var(--body); }
@media (max-width: 600px) { .paths > div { padding: 1.375rem; } }

/* practice grid */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 2.5rem; }
.section-head p { max-width: 30em; color: var(--body); }
.p-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20.625rem, 100%), 1fr)); gap: 1px; padding: 1px; }
.p-card { display: flex; flex-direction: column; gap: 0.625rem; padding: 2rem; background: var(--white); box-shadow: 0 0 0 1px var(--rule); text-decoration: none; color: var(--ink); transition: background 0.15s; }
.p-card:hover { background: var(--sky); color: var(--ink); }
.p-card .num { font-size: 0.8125rem; letter-spacing: 0.12em; color: var(--slate); }
.p-card .name { font-family: var(--display); font-size: 1.625rem; line-height: 1.2; color: var(--navy); }
.p-card.featured { background: var(--navy); color: var(--white); }
.p-card.featured:hover { background: var(--slate); }
.p-card.featured .num { color: var(--label-on-navy); }
.p-card.featured .name { color: var(--white); }
.p-card.featured .desc { color: var(--muted-on-navy); }
@media (max-width: 600px) { .p-card { padding: 1.5rem; } }

/* steps */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26.25rem, 100%), 1fr)); gap: 3.5rem 4rem; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.steps .n { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--slate); }
.steps strong { display: block; font-size: 1.125rem; color: var(--navy); }

/* scope builder */
.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(28.75rem, 100%), 1fr)); gap: 2.5rem; padding: clamp(1.25rem, 4vw, 3rem); background: var(--sky); border-radius: 0.375rem; }
.scope-list { display: flex; flex-direction: column; gap: 0.5rem; }
.scope-row { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 4rem; padding: 0.75rem 1.125rem; background: rgba(255,255,255,0.6); border: 1px solid var(--rule); border-radius: 0.25rem; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.scope-row[aria-pressed="true"] { background: var(--white); border-color: var(--navy); }
.scope-row .box { flex-shrink: 0; width: 1.375rem; height: 1.375rem; border: 1px solid #8FA6C9; border-radius: 3px; background: var(--white); display: flex; align-items: center; justify-content: center; }
.scope-row[aria-pressed="true"] .box { background: var(--navy); border-color: var(--navy); }
.scope-row .box svg { display: none; }
.scope-row[aria-pressed="true"] .box svg { display: block; }
.scope-row .t { display: flex; flex-direction: column; gap: 2px; }
.scope-row .t b { font-weight: 600; color: var(--navy); }
.scope-row .t span { font-size: 0.875rem; color: var(--slate); }
.letter { align-self: start; display: flex; flex-direction: column; gap: 1.125rem; padding: clamp(1.5rem, 3.5vw, 2.5rem); background: var(--white); border: 1px solid var(--rule); border-radius: 0.25rem; box-shadow: 0 1.125rem 2.5rem rgba(26,39,64,0.10); }
.letter-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule-soft); }
.letter-head img { height: 1.625rem; width: auto; }
.letter ol { margin: 0; padding-left: 1.375rem; display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--display); font-size: 1.125rem; }
.letter .terms { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); font-size: 0.875rem; color: var(--body); }
.letter .terms b { color: var(--navy); }
.fine { font-size: 0.75rem; color: var(--slate); }

/* founder */
.founder { display: flex; flex-wrap: wrap; gap: 4.5rem; align-items: center; }
.founder .text { flex: 1 1 32.5rem; min-width: 0; display: flex; flex-direction: column; gap: 1.875rem; }
.founder .beats { display: flex; flex-direction: column; gap: 0.375rem; padding-left: 1.75rem; border-left: 1px solid var(--line-on-navy); font-family: var(--display); font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.35; color: var(--label-on-navy); }
.founder .kicker { padding-top: 1.75rem; border-top: 1px solid var(--line-on-navy); font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; color: var(--white); text-wrap: balance; }
.founder img { flex: 0 1 23.75rem; width: 100%; max-width: 23.75rem; min-width: 0; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 0.25rem; display: block; }
.founder .sig { font-weight: 600; }

/* attorneys */
.a-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); gap: 2rem; align-items: stretch; }
.a-card { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: stretch; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--white); border: 1px solid var(--rule-soft); border-radius: 0.375rem; }
.a-card img { width: 10rem; height: 12.5rem; object-fit: cover; object-position: center top; border-radius: 0.25rem; display: block; }
.a-card .t { flex: 1 1 13.75rem; min-width: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.a-card .nm { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; color: var(--navy); }
@supports (font-size: 1cqi) { .a-card .t { container-type: inline-size; } .a-card .nm { font-size: max(1.0625rem, min(1.5rem, calc(100cqi / 13.2))); } }
.a-card .role { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.a-card .t > a { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; text-underline-offset: 0.3125rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26.25rem, 100%), 1fr)); gap: 3.5rem 4rem; }
.contact-grid .muted { color: var(--muted-on-navy); }
.outline-note { padding: 1rem 1.25rem; border: 1px solid var(--line-on-navy); border-radius: 0.25rem; color: var(--muted-on-navy); font-size: 0.9375rem; }
.outline-note b { color: var(--white); }
.contact-lines { display: flex; flex-direction: column; gap: 0.25rem; }
.contact-lines .big { font-size: 1rem; font-weight: inherit; color: var(--white); }
.contact-lines a { color: var(--white); }
.contact-lines span { color: var(--muted-on-navy); }
form.cf { display: flex; flex-direction: column; gap: 1rem; }
form.cf label { display: flex; flex-direction: column; gap: 0.375rem; font-weight: 600; font-size: 0.875rem; }
form.cf input[type=text], form.cf input[type=email], form.cf input[type=tel], form.cf textarea, form.cf select { min-height: 3rem; padding: 0.625rem 0.875rem; border: 1px solid #8FA6C9; border-radius: 0.25rem; background: var(--white); color: var(--ink); font: inherit; font-weight: 400; }
form.cf .check { flex-direction: row; align-items: flex-start; gap: 0.625rem; font-weight: 400; color: var(--muted-on-navy); }
form.cf .check input { width: 1.25rem; height: 1.25rem; margin: 2px 0 0; flex-shrink: 0; }
form.cf .check a { color: var(--white); }
.form-msg { padding: 0.875rem 1.125rem; border-radius: 0.25rem; background: var(--warn-bg); color: var(--warn-ink); font-size: 0.875rem; }

/* practice page */
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; color: var(--slate); }
.crumbs a { color: var(--slate); }
.handle { flex: 1 1 35rem; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.handle ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.handle li { padding: 1.125rem 0; border-bottom: 1px solid var(--rule); }
.handle h3.sub { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); margin-top: 0.5rem; }
.split { display: flex; flex-wrap: wrap; gap: 3rem; align-items: flex-start; }
.aside { flex: 1 1 20rem; max-width: 26.25rem; display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; background: var(--white); border: 1px solid var(--rule-soft); border-radius: 0.375rem; }
.aside .opt { display: flex; flex-direction: column; gap: 0.25rem; }
.aside .opt + .opt, .aside .people { padding-top: 1.25rem; border-top: 1px solid var(--rule-soft); }
.aside .opt b { font-family: var(--display); font-weight: 400; font-size: 1.375rem; color: var(--navy); }
.people { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--slate); }
.people img { width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; object-position: center top; display: block; border: 2px solid var(--white); }
.people img + img { margin-left: -1rem; }
.faq { max-width: 55rem; margin: 0; display: flex; flex-direction: column; gap: 1.75rem; }
.faq-list { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 4rem; padding: 1rem 0; cursor: pointer; font-weight: 600; font-size: 1.125rem; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex-shrink: 0; font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--slate); transition: transform 0.2s; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.5rem; max-width: 44em; color: var(--body); }
.cta-band .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
.cta-band .copy { flex: 1 1 32.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.cta-band .copy p { color: var(--muted-on-navy); font-size: 1.125rem; }

/* profile */
.profile { display: flex; flex-wrap: wrap; gap: 3.5rem; align-items: flex-start; }
.profile img { flex: 0 1 22.5rem; width: 100%; max-width: 22.5rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; border-radius: 0.25rem; }
.profile .t { flex: 1 1 28.75rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.625rem 1.5rem; padding: 1.5rem; background: var(--white); border: 1px solid var(--rule-soft); border-radius: 0.375rem; font-size: 0.9375rem; }
.facts dt { font-weight: 600; color: var(--slate); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* footer */
footer { background: var(--navy-deep); color: #C9D3E3; font-size: 0.8125rem; }
footer strong { color: var(--white); }
footer a { color: #C9D3E3; }
footer a:hover { color: var(--white); }
.legal-page { max-width: 47.5rem; }
.pp-date { font-size: 0.875rem; color: var(--slate); letter-spacing: 0.02em; }
.pp-note { padding: 1rem 1.25rem; border-left: 3px solid var(--navy); background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-soft); border-radius: 0.25rem; }
.pp-toc ol { columns: 2; column-gap: 2rem; padding-left: 1.25rem; margin: 0; }
.pp-toc li { padding-block: 0.1875rem; break-inside: avoid; }
.pp h2 { margin-top: 1rem; scroll-margin-top: calc(var(--hdr, 5rem) + 1rem); }
.pp ul { padding-left: 1.25rem; display: grid; gap: 0.5rem; margin: 0; }
.pp code { font-size: 0.9em; background: var(--rule-soft); padding: 0 0.25rem; border-radius: 0.1875rem; }
@media (max-width: 699px) { .pp-toc ol { columns: 1; } }

/* ---------- Effects edition (toggle in the preview bar) ---------- */
.fx-toggle { display: inline-flex; align-items: center; gap: 0.5rem; }
.fx-toggle .seg { display: inline-flex; border: 1px solid var(--warn-ink); border-radius: 62.4375rem; overflow: hidden; }
.fx-toggle button { font: inherit; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; min-height: 1.75rem; border: 0; background: transparent; color: var(--warn-ink); cursor: pointer; }
.fx-toggle button[aria-pressed="true"] { background: var(--warn-ink); color: var(--warn-bg); }
.logo .logo-w { display: none; }

/* fixed backdrop: stays still while the page slides over it */
.m-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #172338; pointer-events: none; }
.fx main, .fx footer { position: relative; z-index: 1; }
.m-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #1C2B49 0%, #1A2740 50%, #131E33 100%); }
.m-ridge { position: absolute; left: -6%; width: 112%; height: 46vh; min-height: 16.25rem; will-change: transform; }
.m-ridge.r3 { bottom: 14vh; }
.m-ridge.r2 { bottom: 5vh; }
.m-ridge.r1 { bottom: -4vh; }
.m-glint { position: absolute; width: 35rem; height: 35rem; right: 6%; top: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(157,184,232,0.15), rgba(157,184,232,0) 65%); will-change: transform; }
.m-stars { position: absolute; inset: 0 0 28% 0; will-change: transform; }
.m-stars .tw { animation: m-tw 4.5s ease-in-out infinite; }
@keyframes m-tw { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.m-spot { position: absolute; left: 0; top: 0; width: 51.25rem; height: 51.25rem; margin: -25.625rem 0 0 -25.625rem; border-radius: 50%; background: radial-gradient(circle, rgba(178,201,242,0.20) 0%, rgba(157,184,232,0.09) 32%, rgba(157,184,232,0) 64%); mix-blend-mode: screen; will-change: transform; transform: translate3d(62vw, 30vh, 0); }
@media (max-width: 700px) { .m-spot { width: 32.5rem; height: 32.5rem; margin: -16.25rem 0 0 -16.25rem; } }
@media (hover: none) { .m-spot { animation: m-drift 26s ease-in-out infinite alternate; } }
@keyframes m-drift { 0% { transform: translate3d(22vw, 16vh, 0); } 35% { transform: translate3d(78vw, 26vh, 0); } 70% { transform: translate3d(40vw, 40vh, 0); } 100% { transform: translate3d(70vw, 12vh, 0); } }
@media (prefers-reduced-motion: reduce) { .m-stars .tw, .m-spot { animation: none; } }

/* sections over the backdrop */
.fx main > section:not(.m-clear):not(.band-white):not(.band-navy):not(.band-sky) { background-color: var(--paper); }
.fx main > section.m-sheet { box-shadow: 0 -2.5rem 5rem rgba(5, 10, 22, 0.35); }
.fx main > section.m-clear { background: transparent; border: 0; }
.fx main > section.m-tint { background: rgba(16, 25, 43, 0.78); }
.m-dark, .m-dark h1, .m-dark h2 { color: var(--white); }
.m-dark .eyebrow { color: var(--label-on-navy); }
.m-dark .lead, .m-dark p { color: var(--muted-on-navy); }
.m-dark .crumbs, .m-dark .crumbs a { color: var(--label-on-navy); }
.m-dark .link-btn { color: var(--white); }
.m-dark .btn-primary { background: var(--white); color: var(--navy); }
.m-dark .btn-primary:hover { background: var(--sky); color: var(--navy); }
.m-dark .paths, .m-dark .paths p { color: var(--ink); }
.m-dark .paths .eyebrow { color: var(--slate); }
.m-dark .paths p.body { color: var(--body); }
.m-dark .paths > div:last-child { color: var(--slate); }
.m-dark .paths { background: rgba(255,255,255,0.97); border-color: transparent; box-shadow: 0 1.875rem 4.375rem rgba(5,10,20,0.35); }

/* home hero */
.m-hero { position: relative; min-height: calc(100svh - var(--pbar, 0px)); display: flex; flex-direction: column; justify-content: center; }
.m-hero > .wrap { width: 100%; }
.m-hero-in { position: relative; padding-block: clamp(6rem, 12vw, 10rem) clamp(8.125rem, 15vw, 13.125rem); will-change: transform, opacity; }
.m-hero h1 { font-size: clamp(2.125rem, 4.3vw, 3.4rem); line-height: 1.06; }
@media (min-width: 1000px) { .hero-grid.m-hero-in, .hero-home { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.rot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.12em; }
.rot > span { grid-area: 1 / 1; color: #9DB8E8; transform: translateY(130%); opacity: 0; transition: transform 0.7s cubic-bezier(.2,.75,.2,1), opacity 0.5s; }
.rot > span.on { transform: translateY(0); opacity: 1; }
.rot > span.out { transform: translateY(-130%); opacity: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-line { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.m-line > span { display: inline-block; animation: m-rise 1s cubic-bezier(.2,.75,.2,1) both; }
.m-line:nth-child(2) > span { animation-delay: .12s; }
.m-line:nth-child(3) > span { animation-delay: .22s; }
.m-line:nth-child(4) > span { animation-delay: .3s; }
@keyframes m-rise { from { transform: translateY(125%); } to { transform: translateY(0); } }
.m-fade { animation: m-fade 1.1s .35s cubic-bezier(.2,.75,.2,1) both; }
@keyframes m-fade { from { opacity: 0; transform: translateY(1.125rem); } to { opacity: 1; transform: none; } }
.m-cue { position: absolute; left: 50%; bottom: 1.75rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--label-on-navy); }
.m-cue i { display: block; width: 1px; height: 2.25rem; background: linear-gradient(var(--label-on-navy), transparent); animation: m-cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes m-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* window band: the backdrop shows through between sections */
.m-window { position: relative; }
.m-window .wrap { min-height: clamp(23.75rem, 52vh, 35rem); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.375rem; padding-block: 6rem; }
.m-window .big { font-family: var(--display); font-size: clamp(2rem, 4.4vw, 3.625rem); line-height: 1.15; color: var(--white); max-width: 18em; text-wrap: balance; }
.m-window .big em { font-style: normal; color: #9DB8E8; }
.m-window .rule { width: 4.5rem; height: 1px; background: var(--label-on-navy); transform-origin: center; }

/* header: clear over the backdrop, solid once scrolling */
.fx .site-header { transition: background-color .35s, border-color .35s, box-shadow .35s; }
.fx .site-header.scrolled { box-shadow: 0 0.625rem 1.875rem rgba(26,39,64,0.10); }
.fx .site-header.over { background: transparent; border-bottom-color: rgba(255,255,255,0.12); }
.fx .site-header.over .logo .logo-d { display: none; }
.fx .site-header.over .logo .logo-w { display: block; }
.fx .site-header.over .nav > a, .fx .site-header.over .nav-drop > button { color: var(--white); }
.fx .site-header.over .btn-outline { border-color: rgba(255,255,255,0.6); color: var(--white); }
.fx .site-header.over .btn-primary { background: var(--white); color: var(--navy); }
.fx .site-header.over .menu-toggle { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.fx main { margin-top: calc(-1 * var(--hdr, 4.5625rem)); }
.fx main > section:first-child { padding-top: calc(var(--hdr, 4.5625rem) + clamp(3rem, 6vw, 5.5rem)); }
.fx main > section.m-hero:first-child { padding-top: 0; }
.fx .m-hero-in { padding-top: calc(var(--hdr, 4.5625rem) + clamp(1.5rem, 6vh, 4.5rem)); padding-bottom: clamp(5rem, 11vh, 7.5rem); }
.m-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.m-progress i { display: block; height: 100%; width: 100%; background: #9DB8E8; transform: scaleX(0); transform-origin: left; }

/* reveals (only below-the-fold elements start hidden) */
.fx [data-rv] { transition: opacity 1s cubic-bezier(.2,.75,.2,1), transform 1s cubic-bezier(.2,.75,.2,1), clip-path 1.1s cubic-bezier(.2,.75,.2,1); transition-delay: var(--d, 0s); }
.fx [data-rv].pre { opacity: 0; transform: translateY(2.125rem); }
.fx h2[data-rv].pre { clip-path: inset(0 0 100% 0); transform: translateY(1.75rem); opacity: 1; }
.fx h2[data-rv] { clip-path: inset(0 0 -10% 0); }
/* word-by-word rise for headings */
.fx .wsplit[data-rv], .fx .wsplit[data-rv].pre { clip-path: none; opacity: 1; transform: none; }
.fx .wsplit .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.fx .wsplit .w > span { display: inline-block; transition: transform 0.95s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--i) * 45ms + var(--d, 0s)); }
.fx .wsplit.pre .w > span { transform: translateY(108%); }
/* statements that light up word by word as you scroll */
.fx .litup .lw { opacity: 0.24; transition: opacity 0.45s ease; }
.fx .litup .lw.on { opacity: 1; }
/* eyebrows and pane numerals track in */
.fx .eyebrow[data-rv], .fx .pane .k[data-rv], .fx .i-meta[data-rv] { transition: opacity .9s cubic-bezier(.2,.75,.2,1), transform .9s cubic-bezier(.2,.75,.2,1); transition-delay: var(--d, 0s); }
.fx .eyebrow[data-rv].pre, .fx .pane .k[data-rv].pre, .fx .i-meta[data-rv].pre { opacity: 0; transform: translateX(-0.75rem); }
/* section rules draw in */
.fx .faq-list[data-rv], .fx .handle ul[data-rv], .fx .steps[data-rv] { transition: clip-path 1.2s cubic-bezier(.2,.75,.2,1), opacity .8s; }
.fx .faq-list[data-rv].pre, .fx .handle ul[data-rv].pre, .fx .steps[data-rv].pre { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.fx .m-unveil { transition: clip-path 1.5s cubic-bezier(.2,.75,.2,1); clip-path: inset(0 0 0 0 round 0.25rem); }
.fx .m-unveil.pre { clip-path: inset(14% 14% 14% 14% round 0.25rem); }
.fx .m-window .rule.pre { transform: scaleX(0); }
.fx .m-window .rule { transition: transform 1.2s .2s cubic-bezier(.2,.75,.2,1); }
.fx main.enter { animation: m-page .5s cubic-bezier(.2,.75,.2,1) both; }
.fx main.leave { animation: m-leave .19s ease-in both; pointer-events: none; }
@keyframes m-leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-0.25rem); } }
@keyframes m-page { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* card hover: navy rises from the bottom, arrow slides in */
.fx .p-card { position: relative; overflow: hidden; isolation: isolate; transition: color .35s; }
.fx .p-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.2,.75,.2,1); }
.fx .p-card:hover { background: var(--white); }
.fx .p-card:hover::before { transform: scaleY(1); }
.fx .p-card:hover .name, .fx .p-card:hover .desc { color: var(--white); }
.fx .p-card:hover .num { color: var(--label-on-navy); }
.fx .p-card.featured::before { background: var(--slate); }
.fx .p-card.featured:hover { background: var(--navy); }
.fx .p-card .arr { position: absolute; right: 1.75rem; bottom: 1.625rem; font-size: 1.375rem; color: var(--white); opacity: 0; transform: translateX(-0.625rem); transition: opacity .35s, transform .35s; }
.fx .p-card:hover .arr { opacity: 1; transform: none; }
.fx .p-card .name, .fx .p-card .desc, .fx .p-card .num { transition: color .35s; }

/* founder over the backdrop; its three lines light up in turn */
.fx .founder .beats span { transition: color .6s, transform .6s; transform: translateX(-0.375rem); }
.fx .founder .beats span.lit { color: var(--white); transform: none; }

/* soft light that follows the cursor on dark sections */
.fx .band-navy, .fx .m-tint { background-image: radial-gradient(32.5rem circle at var(--lx, 70%) var(--ly, 30%), rgba(157,184,232,0.10), transparent 60%); }

/* sticky side panels on practice pages */
@media (min-width: 900px) { .fx .split .aside { position: sticky; top: calc(var(--hdr, 4.5625rem) + 1.75rem); } .fx .two-col > :first-child { position: sticky; top: calc(var(--hdr, 4.5625rem) + 1.75rem); align-self: start; } }

.fx .btn { transition: background-color .25s, color .25s, transform .25s, box-shadow .25s; }
.fx .btn:hover { box-shadow: 0 0.625rem 1.5rem rgba(5,10,20,0.18); } /* no movement on hover: a moving button can flicker under the cursor */
.fx [data-par] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .rot > span, .m-line > span, .m-fade, .m-cue i, .fx main.enter, .fx main.leave { animation: none !important; transition: none !important; }
  .fx [data-rv].pre, .fx .m-unveil.pre { opacity: 1; transform: none; clip-path: none; }
}
.linklike { font: inherit; color: #C9D3E3; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.linklike:hover { color: var(--white); }
.ck { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; background: rgba(10,16,28,0.45); }
.ck-panel { width: min(35rem, 100%); background: var(--white); color: var(--ink); border-radius: 0.5rem; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.875rem; box-shadow: 0 1.5rem 3.75rem rgba(5,10,20,0.35); }
.ck-panel h2 { font-size: 1.625rem; }
.ck-panel p { color: var(--body); font-size: 0.9375rem; }
.ck-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ===== Compact edition ===== */
/* mega-menu */
.drop-panel.mega { width: min(53.75rem, calc(100vw - 4rem)); left: -2.5rem; padding: 0; display: grid; grid-template-columns: 17.5rem 1fr; gap: 0; overflow: hidden; }
.mega .mega-feature { display: flex; flex-direction: column; gap: 0.625rem; padding: 1.75rem; background: var(--navy); color: var(--white); text-decoration: none; border-radius: 0; }
.mega .mega-feature:hover { background: var(--slate); color: var(--white); }
.mega .mega-feature .k { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-on-navy); }
.mega .mega-feature .n { font-family: var(--display); font-size: 1.625rem; line-height: 1.15; }
.mega .mega-feature .d { font-size: 0.875rem; color: var(--muted-on-navy); font-weight: 400; }
/* on the Outside General Counsel page the feature looks exactly as it does everywhere else */
.mega .mega-feature[aria-current="page"] { background: var(--navy); color: var(--white); }
.mega .mega-feature[aria-current="page"]:hover { background: var(--slate); color: var(--white); }
.mega .mega-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 0.875rem; align-content: start; }
.mega .mega-list .k { grid-column: 1 / -1; padding: 0.5rem 0.75rem 0.375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.mega .mega-list a { display: flex; flex-direction: column; gap: 2px; padding: 0.625rem 0.75rem; }
.mega .mega-list a b { font-weight: 600; color: var(--navy); }
.mega .mega-list a span { font-size: 0.8125rem; font-weight: 400; color: var(--slate); line-height: 1.4; }
.mega .mega-all { grid-column: 1 / -1; margin-top: 0.25rem; font-weight: 600; text-underline-offset: 0.25rem; text-decoration: underline !important; }

/* hero matter finder */
.finder { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.375rem, 3vw, 2rem); background: rgba(255,255,255,0.97); border-radius: 0.375rem; box-shadow: 0 1.875rem 4.375rem rgba(5,10,20,0.35); color: var(--ink); }
.finder .eyebrow { color: var(--slate); }
.finder .q { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; color: var(--navy); }
.finder label.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.finder input { width: 100%; min-height: 3.375rem; padding: 0.75rem 1rem; border: 1px solid #8FA6C9; border-radius: 0.25rem; font: inherit; font-size: 1.0625rem; color: var(--ink); background: var(--white); }
.finder .sub { font-size: 0.875rem; font-weight: 600; color: var(--slate); margin-bottom: -0.375rem; }
.aud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.aud-b { display: flex; align-items: center; min-height: 3rem; padding: 0.5rem 0.875rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font: inherit; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; text-align: left; color: var(--navy); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.aud-b:hover { border-color: var(--navy); }
.aud-b[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip { min-height: 2.25rem; padding: 0.375rem 0.875rem; border: 1px solid var(--rule); border-radius: 62.4375rem; background: var(--paper); font: inherit; font-size: 0.875rem; color: var(--navy); cursor: pointer; }
.chip:hover, .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }
.finder-results { display: flex; flex-direction: column; border-top: 1px solid var(--rule-soft); }
.finder-results a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--navy); }
.finder-results a b { font-weight: 600; }
.finder-results a span { display: block; font-size: 0.875rem; color: var(--slate); }
.finder-results a:hover { background: var(--sky); }
.finder-results .arr { font-size: 1.25rem; flex-shrink: 0; }
.finder-results p { padding: 0.875rem 0.25rem; color: var(--body); font-size: 0.9375rem; }

/* the window: four panes */
.panes-sec .statement { font-family: var(--display); font-size: clamp(1.625rem, 3vw, 2.5rem); line-height: 1.25; color: var(--white); max-width: 26em; text-wrap: balance; }
.window { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid rgba(185,200,227,0.30); border-radius: 0.5rem; box-shadow: 0 2.5rem 5.625rem rgba(5,10,22,0.35); }
.pane { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; min-height: clamp(14.375rem, 32vh, 20rem); padding: clamp(1.5rem, 3vw, 2.5rem); background: rgba(16,25,43,0.66); box-shadow: inset 0 0 0 1px rgba(185,200,227,0.22); -webkit-backdrop-filter: blur(0.625rem) saturate(1.15); backdrop-filter: blur(0.625rem) saturate(1.15); color: var(--white); text-decoration: none; transition: background-color .5s, backdrop-filter .5s, -webkit-backdrop-filter .5s; }
.window .pane:first-child { border-top-left-radius: 0.375rem; } .window .pane:nth-child(2) { border-top-right-radius: 0.375rem; }
.window .pane:nth-child(3) { border-bottom-left-radius: 0.375rem; } .window .pane:last-child { border-bottom-right-radius: 0.375rem; }
.pane::after { content: ""; position: absolute; inset: -40%; z-index: -1; background: linear-gradient(115deg, transparent 42%, rgba(220,232,255,0.10) 50%, transparent 58%); transform: translateX(-60%); transition: transform 1.1s cubic-bezier(.2,.75,.2,1); pointer-events: none; }
.pane:hover { color: var(--white); background: rgba(16,25,43,0.18); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
.pane:hover::after { transform: translateX(60%); }
.pane .k { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-on-navy); }
.pane .t { font-family: var(--display); font-size: clamp(1.75rem, 2.8vw, 2.375rem); line-height: 1.12; color: var(--white); }
.pane .d { margin-top: 0.625rem; color: var(--muted-on-navy); max-width: 30em; }
.pane .body { display: block; }
.pane .go { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 600; color: var(--white); white-space: nowrap; flex-shrink: 0; }
.pane .go i { font-style: normal; display: inline-block; transition: transform .35s; }
.pane:hover .go i { transform: translateX(0.375rem); }
.pane .mini { display: block; columns: 2; column-gap: 1.5rem; margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.45; color: var(--label-on-navy); }
.pane .mini > span { display: block; break-inside: avoid; padding-block: 0.1875rem; }
.pane .faces { display: flex; margin-top: 1.25rem; }
.pane .faces img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid rgba(255,255,255,0.85); display: block; }
.pane .faces img + img { margin-left: -0.875rem; }
@media (max-width: 760px) { .window { grid-template-columns: minmax(0, 1fr); } .window .pane { border-radius: 0 !important; } .window .pane:first-child { border-radius: 0.375rem 0.375rem 0 0 !important; } .window .pane:last-child { border-radius: 0 0 0.375rem 0.375rem !important; } .pane { min-height: 0; } }
.band-navy .pane { background: rgba(255,255,255,0.05); }
.band-navy .pane:hover { background: rgba(255,255,255,0.10); }

/* insights */
.i-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 1.5rem; }
@media (min-width: 700px) { .i-grid.i-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .i-grid.i-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .i-grid.i-four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 700px) { .i-grid.i-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.i-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; background: var(--white); border: 1px solid var(--rule-soft); border-radius: 0.375rem; text-decoration: none; color: var(--ink); transition: border-color .25s, box-shadow .25s, transform .25s; }
.i-card:hover { color: var(--ink); border-color: var(--rule); box-shadow: 0 1.125rem 2.5rem rgba(26,39,64,0.10); }
.i-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.i-meta .dot { color: var(--rule); }
.i-card .t { font-family: var(--display); font-size: 1.5625rem; line-height: 1.2; color: var(--navy); }
.i-card .d { color: var(--body); font-size: 0.9375rem; }
.i-card .go { margin-top: auto; padding-top: 0.5rem; font-weight: 600; color: var(--navy); }
.i-card.feature { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(23.75rem, 100%), 1fr)); gap: 1rem 3rem; padding: clamp(1.75rem, 4vw, 2.75rem); background: var(--navy); border-color: var(--navy); color: var(--white); }
.i-card.feature:hover { color: var(--white); }
.i-card.feature .i-meta { color: var(--label-on-navy); }
.i-card.feature .t { font-size: clamp(1.75rem, 3vw, 2.375rem); color: var(--white); }
.i-card.feature .d { color: var(--muted-on-navy); font-size: 1.0625rem; align-self: end; }
.i-card.feature .go { color: var(--white); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filters .f-l { min-width: 5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.i-count { font-size: 0.875rem; color: var(--slate); }
.i-year { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.i-year + .i-year { margin-top: 2rem; }
.i-year .y { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.soon { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--white); color: var(--body); }
.draft-note { padding: 0.75rem 1rem; border: 1px dashed #C9A54A; border-radius: 0.25rem; background: var(--warn-bg); color: var(--warn-ink); font-size: 0.875rem; }
.art-grid { display: grid; grid-template-columns: minmax(0, 47.5rem) minmax(0, 20rem); justify-content: space-between; gap: 3rem 4rem; align-items: start; }
@media (max-width: 1000px) { .art-grid { grid-template-columns: minmax(0, 1fr); } }
.art-aside { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.75rem; background: var(--white); border: 1px solid var(--rule-soft); border-radius: 6px; }
.art-aside > div { display: flex; flex-direction: column; gap: 0.625rem; align-items: flex-start; }
.art-aside > div + div { padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); }
.art-aside .btn { align-self: stretch; padding: 0 1rem; white-space: nowrap; }
.legal-note { color: var(--slate); }
.m-dark .legal-note { color: var(--muted-on-navy); }
#main { min-height: calc(100svh - 13rem); }
.aside-link { font-family: var(--display); font-size: 1.375rem; line-height: 1.25; color: var(--navy); text-decoration: none; }
.aside-link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1001px) { .fx .art-aside { position: sticky; top: calc(var(--hdr, 4.5625rem) + 1.75rem); } }
.article { max-width: 47.5rem; display: flex; flex-direction: column; gap: 1.75rem; }
.article h2 { font-size: 1.875rem; }
.article p, .article li { font-size: 1.0625rem; color: var(--body); }
.article ul { margin: 0; padding-left: 1.375rem; display: flex; flex-direction: column; gap: 0.625rem; }
.article .sources { padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.article .sources li { font-size: 0.875rem; }
.article .disc { font-size: 0.875rem; color: var(--slate); }

/* newsletter */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr)); gap: 2rem 3.5rem; align-items: start; }
.news .t { font-family: var(--display); font-size: clamp(1.875rem, 3.2vw, 2.625rem); line-height: 1.12; color: var(--white); }
.news p { color: var(--muted-on-navy); }
form.nl { display: flex; flex-direction: column; gap: 0.875rem; }
form.nl .row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
form.nl input[type=email] { flex: 1 1 15rem; min-height: 3.25rem; padding: 0.625rem 0.875rem; border: 1px solid #8FA6C9; border-radius: 0.25rem; font: inherit; color: var(--ink); background: var(--white); }
form.nl fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
form.nl legend { padding: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label-on-navy); }
form.nl .pick { position: relative; }
form.nl .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
form.nl .pick span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.375rem 0.875rem; border: 1px solid var(--line-on-navy); border-radius: 62.4375rem; font-size: 0.875rem; color: var(--muted-on-navy); cursor: pointer; }
form.nl .pick input:checked + span { background: var(--white); border-color: var(--white); color: var(--navy); }
form.nl .pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
form.nl .check { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.875rem; color: var(--muted-on-navy); }
form.nl .check input { width: 1.25rem; height: 1.25rem; margin: 2px 0 0; flex-shrink: 0; }
form.nl .check a { color: var(--white); }
.foot-news { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem 1.5rem; padding-bottom: 1.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid #26334D; }
.foot-news b { font-family: var(--display); font-weight: 400; font-size: 1.375rem; color: var(--white); }
.foot-news a.btn { min-height: 2.75rem; }
.pane .k, .pane .t, .pane .d { display: block; }
.nav-drop { position: static; }
.site-header .wrap { position: relative; }
.drop-panel.mega { top: calc(100% - 0.375rem); left: 2rem; right: 2rem; width: auto; max-width: 71rem; margin: 0 auto; }
@media (max-width: 1439px) { .hide-md { display: none !important; } }
.nav { gap: 1.5rem; } .nav > a, .nav-drop > button { white-space: nowrap; } .header-actions .btn { white-space: nowrap; }
/* header row: logo on the content's left edge, the consultation button on its right edge, the tabs centred between them
   with equal space either side; sized so the row fits the content width at every desktop size (nothing runs past the edge) */
@media (min-width: 1200px) {
  .site-header .wrap { gap: 0; }
  .site-header .logo, .header-actions { flex: 0 0 auto; }
  .nav { flex: 0 1 auto; gap: 1.25rem; font-size: 0.875rem; margin-inline: auto; }
  .header-actions { gap: 0.625rem; }
  .header-actions .btn-sm { padding-inline: 1rem; font-size: 0.875rem; }
  .drop-panel.mega { left: clamp(1.125rem, 4vw, 4rem); right: clamp(1.125rem, 4vw, 4rem); max-width: none; }
}
.i-meta { flex-direction: column; gap: 0.25rem; }
.i-meta span + span { font-weight: 500; letter-spacing: 0.04em; text-transform: none; font-size: 0.875rem; }

/* ===== round 3: mobile-first compact layout + new effects ===== */
.sm-only { display: none; }
@media (max-width: 699px) { .lg-only { display: none; } .sm-only { display: inline; } }
.finder-sec { display: none; }
@media (max-width: 999px) {
  .m-hero { min-height: 0 !important; justify-content: flex-start; }
  .fx .m-hero-in { padding-bottom: 0.75rem !important; }
  /* phones: the cue stays just under the buttons (always on the first screen), but points down like the desktop one */
  .m-cue { position: static; transform: none; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.5rem clamp(1.125rem, 4vw, 4rem) 1.25rem; }
  .m-cue i { width: 1px; height: 2rem; }
  .finder-sec { display: block; padding-block: 0.25rem 2.75rem; }
  .m-hero .finder, .hero-home .finder { display: none; }
}
@media (max-width: 699px) {
  .m-hero h1 { font-size: clamp(2rem, 8.8vw, 2.5rem); }
  .m-hero .stack { gap: 1rem !important; }
  .hero-ctas { gap: 0 1rem; }
  .fx .m-hero-in { padding-top: calc(var(--hdr, 4.5625rem) + 1rem); }
  .finder { padding: 1.25rem; gap: 0.875rem; }
  .finder .q { font-size: 1.5rem; }
  .aud-b { min-height: 2.75rem; font-size: 0.875rem; padding: 0.5rem 0.75rem; }
  .panes-sec .statement { font-size: 1.5rem; }
  .panes-sec .wrap { gap: 1.75rem !important; }
  .window { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .window .pane { border-radius: 0 !important; min-height: 9.5rem; padding: 1.125rem; gap: 1rem; }
  .window .pane:first-child { border-top-left-radius: 6px !important; } .window .pane:nth-child(2) { border-top-right-radius: 6px !important; }
  .window .pane:nth-child(3) { border-bottom-left-radius: 6px !important; } .window .pane:last-child { border-bottom-right-radius: 6px !important; }
  .pane .d, .pane .mini, .pane .faces, .pane .go .lbl { display: none !important; }
  .pane .k { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .pane .t { font-size: 1.3rem; margin-top: 0.25rem; }
  .pane .go { align-self: flex-end; width: 2.25rem; height: 2.25rem; justify-content: center; border: 1px solid rgba(185,200,227,0.45); border-radius: 50%; }
  .section-head { gap: 0.5rem 1rem; }
  .cta-band .copy p { font-size: 1rem; }
  .cta-band .wrap { gap: 1.25rem; }
}
/* swipeable briefings on phones */
@media (max-width: 760px) {
  .i-grid.swipe { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; gap: 0.875rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: -1.125rem; padding: 0.25rem 1.125rem 0.75rem; scroll-padding-inline: 1.125rem; scrollbar-width: none; }
  .i-grid.swipe::-webkit-scrollbar { display: none; }
  .i-grid.swipe > .i-card { scroll-snap-align: none start; padding: 1.25rem; }   /* snap sideways only: a vertical snap point here made iPhone pull the whole page back down to the bottom */
  .i-grid.swipe .t { font-size: 1.25rem; }
  .i-grid.swipe .d { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .swipe-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: -1.25rem; }
  .swipe-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rule); transition: background .3s, width .3s; }
  .swipe-dots i.on { width: 1.375rem; border-radius: 999px; background: var(--navy); }
}
@media (min-width: 761px) { .swipe-dots { display: none; } }
/* mobile menu accordion */
.mobile-menu .m-acc { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0.75rem 0; border: 0; border-bottom: 1px solid var(--rule-soft); background: none; font: inherit; font-weight: 500; color: var(--navy); cursor: pointer; text-align: left; }
.mobile-menu .m-acc svg { transition: transform .3s; }
.mobile-menu .m-acc[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu .m-acc-p { display: grid; gap: 0; }
.mobile-menu .m-acc-p:not([hidden]) { animation: m-acc .35s cubic-bezier(.2,.75,.2,1); }
@keyframes m-acc { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }
.mobile-menu .sub.all { font-weight: 600; }
/* phone action bar */
.m-bar { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); z-index: 30; display: none; grid-template-columns: auto 1fr; gap: 0.5rem; padding: 0.5rem; background: rgba(18,28,48,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(185,200,227,0.25); border-radius: 0.75rem; box-shadow: 0 1.25rem 2.5rem rgba(5,10,20,0.35); transform: translateY(calc(100% + 2rem + env(safe-area-inset-bottom, 0px))); visibility: hidden; transition: transform .45s cubic-bezier(.2,.75,.2,1), visibility 0s .45s; }
.m-bar a { display: flex; align-items: center; justify-content: center; min-height: 2.875rem; padding: 0 1rem; border-radius: 0.5rem; font-weight: 600; text-decoration: none; }
.m-bar .call { color: var(--white); border: 1px solid rgba(185,200,227,0.45); }
.m-bar .go { background: var(--white); color: var(--navy); }
.m-bar.show { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.2,.75,.2,1), visibility 0s; }
@media (max-width: 760px) { .m-bar { display: grid; } }
/* chapter rail on the home page */
.m-rail { position: fixed; right: 1.5rem; top: 50%; z-index: 15; display: none; flex-direction: column; gap: 0.875rem; transform: translateY(-50%); padding: 0.875rem 0.625rem; border-radius: 999px; background: rgba(18,28,48,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.m-rail a { position: relative; display: block; width: 0.625rem; height: 0.625rem; border-radius: 50%; border: 1px solid rgba(220,232,255,0.7); }
.m-rail a.on { background: #DCE8FF; box-shadow: 0 0 0.75rem rgba(220,232,255,0.8); }
.m-rail a span { position: absolute; right: 1.5rem; top: 50%; transform: translate(0.5rem, -50%); white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 4px; background: var(--navy); color: var(--white); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.m-rail a:hover span, .m-rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1480px) { .fx .m-rail.live { display: flex; } }
/* pane tilt + glare (pointer devices) */


.pane .glare { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(28rem circle at var(--gx, 50%) var(--gy, 50%), rgba(220,232,255,0.16), transparent 55%); }
.pane:hover .glare { opacity: 1; }
/* shooting stars + constellation */
.m-shoot { position: absolute; width: 9rem; height: 1px; background: linear-gradient(90deg, rgba(238,243,255,0), rgba(238,243,255,0.95)); border-radius: 1px; opacity: 0; transform-origin: right center; pointer-events: none; }
.m-shoot.go { animation: m-shoot 1.1s cubic-bezier(.3,.1,.3,1) forwards; }
@keyframes m-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(var(--ang)) scaleX(0.2); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--ang)) scaleX(1); } }
.m-const { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.m-const path { fill: none; stroke: rgba(205,220,250,0.42); stroke-width: 1; transition: opacity .5s; }
.m-const circle { fill: #F4F7FF; }
/* page curtain */
.m-curtain { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--navy-deep); transform: translateY(100%); pointer-events: none; }
.m-curtain img { width: 10rem; height: auto; opacity: 0; transition: opacity .25s; }
.m-curtain.in { transform: none; transition: transform .42s cubic-bezier(.7,0,.25,1); }
.m-curtain.in img { opacity: 1; transition-delay: .2s; }
.m-curtain.out { transform: translateY(-100%); transition: transform .5s cubic-bezier(.7,0,.25,1); }
@media (prefers-reduced-motion: reduce) { .m-curtain, .m-shoot, .m-const { display: none !important; } .m-bar { transition: none; } }
/* ===== time-of-day sky (variables set by skyClock in the script) ===== */
:root { --sky-top: #1C2B49; --sky-mid: #1A2740; --sky-bot: #131E33; --ridge-3: #24365A; --ridge-2: #1E2E4D; --ridge-1: #152038; --glow: rgba(157,184,232,0.15); --star-op: 1; --sun-op: 0; --sun-x: 50%; --sun-y: 60%; --cloud-op: 0; --cta-1: #2A4FE0; --cta-2: #3D63F5; --cta-glow: rgba(90,125,255,0.45); }
.m-sky { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bot) 100%) !important; transition: background 1.5s; }
.m-stars { opacity: var(--star-op); transition: opacity 1.5s; }
.m-glint { background: radial-gradient(circle, var(--glow), rgba(157,184,232,0) 65%) !important; }
.m-ridge.r3 path { fill: var(--ridge-3); } .m-ridge.r2 path { fill: var(--ridge-2); } .m-ridge.r1 path { fill: var(--ridge-1); }
.m-ridge path { transition: fill 1.5s; }
.m-sun { position: absolute; left: var(--sun-x); top: var(--sun-y); width: 34rem; height: 34rem; margin: -17rem 0 0 -17rem; border-radius: 50%; opacity: var(--sun-op); pointer-events: none; transition: opacity 1.5s;
  background: radial-gradient(circle, rgba(255,251,235,1) 0 6%, rgba(255,240,200,0.85) 8.5%, rgba(255,226,170,0.35) 18%, rgba(255,220,170,0.12) 34%, rgba(255,220,170,0) 60%); }
.m-clouds { position: absolute; inset: 0 0 40% 0; opacity: var(--cloud-op); pointer-events: none; transition: opacity 1.5s; }
.m-clouds svg { position: absolute; width: 38rem; height: auto; fill: #FFFFFF; filter: blur(0.375rem); animation: m-drift-c 160s linear infinite alternate; }
.m-clouds svg:nth-child(1) { top: 8%; left: -6%; opacity: 0.7; }
.m-clouds svg:nth-child(2) { top: 22%; left: 48%; width: 30rem; opacity: 0.55; animation-duration: 210s; animation-direction: alternate-reverse; }
.m-clouds svg:nth-child(3) { top: 4%; left: 70%; width: 24rem; opacity: 0.45; animation-duration: 240s; }
@keyframes m-drift-c { from { transform: translateX(-4rem); } to { transform: translateX(6rem); } }
@media (prefers-reduced-motion: reduce) { .m-clouds svg { animation: none; } }
/* daylight: dark ink over the bright sky */
html.sky-light .m-clear.m-dark, html.sky-light .m-clear.m-dark h1, html.sky-light .m-clear.m-dark h2, html.sky-light .m-clear .statement, html.sky-light .m-clear .big { color: var(--navy); }
html.sky-light .m-clear.m-dark .eyebrow:not(.finder .eyebrow) { color: var(--slate); }
html.sky-light .m-clear.m-dark .lead, html.sky-light .m-clear.m-dark > .wrap p:not(.finder p):not(.eyebrow) { color: var(--body); }
html.sky-light .m-clear.m-dark .crumbs, html.sky-light .m-clear.m-dark .crumbs a { color: var(--slate); }
html.sky-light .m-clear.m-dark .link-btn { color: var(--navy); }
html.sky-light .rot > span, html.sky-light .m-window .big em { color: #2557B5; }
html.sky-light .m-clear h1, html.sky-light .m-clear .statement, html.sky-light .m-clear .big, html.sky-light .m-clear .lead { text-shadow: 0 1px 1.25rem rgba(255,255,255,0.35); }
html.sky-light .m-cue { color: var(--slate); }
html.fx.sky-light main > section.m-tint { background-color: #131D32; box-shadow: 0 -1px 0 rgba(255,255,255,0.06) inset, 0 1px 0 rgba(255,255,255,0.06) inset; }
html.sky-light .m-clear .eyebrow[style] { color: var(--slate) !important; }
html.sky-light .m-cue i { background: linear-gradient(var(--slate), transparent); }
html.sky-light .m-window .rule { background: var(--slate); }
html.sky-light .pane { background: rgba(255,255,255,0.6); color: var(--navy); box-shadow: inset 0 0 0 1px rgba(26,39,64,0.12); }
html.sky-light .pane:hover { background: rgba(255,255,255,0.4); color: var(--navy); }
html.sky-light .pane .t, html.sky-light .pane .go { color: var(--navy); }
html.sky-light .pane .d { color: var(--body); }
html.sky-light .pane .k, html.sky-light .pane .mini { color: var(--slate); }
html.sky-light .window { border-color: rgba(26,39,64,0.15); }
html.sky-light .pane .glare { background: radial-gradient(28rem circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.45), transparent 55%); }
@media (max-width: 699px) { html.sky-light .pane .go { border-color: rgba(26,39,64,0.35); } }
html.fx.sky-light:not(.hero-tint) .site-header.over { border-bottom-color: rgba(26,39,64,0.12); }
html.fx.sky-light:not(.hero-tint) .site-header.over .logo .logo-d { display: block; }
html.fx.sky-light:not(.hero-tint) .site-header.over .logo .logo-w { display: none; }
html.fx.sky-light:not(.hero-tint) .site-header.over .nav > a, html.fx.sky-light:not(.hero-tint) .site-header.over .nav-drop > button { color: var(--navy); }
html.fx.sky-light:not(.hero-tint) .site-header.over .btn-outline { border-color: var(--navy); color: var(--navy); }
html.fx.sky-light:not(.hero-tint) .site-header.over .menu-toggle { color: var(--navy); border-color: var(--navy); }
/* the call to action: a vivid blue that follows the sky (night electric, dusk violet, day azure) */
.btn:is([href="#contact"], [href="/contact/"]), .m-bar a.go { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--cta-1), var(--cta-2)) !important; color: #FFFFFF !important; border-color: transparent !important; box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cta-2) 22%, transparent), 0 0.5rem 1.75rem var(--cta-glow); transition: box-shadow .3s, background 1.5s; }
.btn:is([href="#contact"], [href="/contact/"])::before, .m-bar a.go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 48%, transparent 66%); transform: translateX(-120%); transition: transform 0.8s cubic-bezier(.2,.75,.2,1); }
.btn:is([href="#contact"], [href="/contact/"]):hover::before, .btn:is([href="#contact"], [href="/contact/"]):focus-visible::before { transform: translateX(120%); }
.btn:is([href="#contact"], [href="/contact/"]):hover { color: #FFFFFF !important; box-shadow: 0 0 0 0.3125rem color-mix(in srgb, var(--cta-2) 30%, transparent), 0 0.75rem 2.25rem var(--cta-glow); }
.btn:is([href="#contact"], [href="/contact/"]):focus-visible { outline-color: var(--cta-2); }
/* preview-only sky control */
@media (max-width: 699px) { .preview-bar .wrap { gap: 0.5rem; font-size: 0.75rem; } .preview-bar .fx-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sky-pick select { min-height: 1.625rem; padding: 0.125rem 0.375rem; font-size: 0.6875rem; max-width: 7.5rem; } .preview-bar .wrap > span:first-child { flex: 1 1 auto; min-width: 0; } }
.sky-pick { display: inline-flex; align-items: center; gap: 0.5rem; }
.sky-pick select { font: inherit; font-size: 0.75rem; font-weight: 600; min-height: 1.75rem; padding: 0.125rem 0.5rem; border: 1px solid var(--warn-ink); border-radius: 62rem; background: transparent; color: var(--warn-ink); }
/* contact: office details beside a click-to-load Google map */
.office { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .office { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); } }
.map-box { position: relative; aspect-ratio: 16 / 10; border-radius: 0.25rem; overflow: hidden; background: var(--navy); box-shadow: 0 1.25rem 3rem rgba(5, 10, 22, 0.18); }
@media (max-width: 699px) { .map-box { aspect-ratio: 4 / 3.4; } }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; padding: 1.25rem; text-align: center;
  background: linear-gradient(118deg, transparent 46.4%, rgba(185,200,227,0.20) 46.4% 47.6%, transparent 47.6%), linear-gradient(28deg, transparent 61%, rgba(185,200,227,0.14) 61% 61.8%, transparent 61.8%),
    repeating-linear-gradient(90deg, rgba(185,200,227,0.08) 0 1px, transparent 1px 3.5rem), repeating-linear-gradient(0deg, rgba(185,200,227,0.08) 0 1px, transparent 1px 3.5rem),
    radial-gradient(ellipse at 50% 42%, #26395E 0%, var(--navy) 58%, var(--navy-deep) 100%); }
.map-face .map-pin { filter: drop-shadow(0 0.375rem 0.75rem rgba(0,0,0,0.35)); }
.map-face .map-addr { font-family: var(--display); font-size: 1.25rem; color: var(--white); margin: 0; }
.map-face .map-note { font-size: 0.8125rem; line-height: 1.5; max-width: 26rem; margin: 0; color: var(--label-on-navy); }

/* Motion off (or the visitor's reduced-motion setting): the home hero keeps a dark ground, so its white type stays legible */
html:not(.fx) .m-hero.m-dark { background: radial-gradient(ellipse 85% 75% at 22% 30%, #26395E 0%, var(--navy) 55%, var(--navy-deep) 100%); }
html:not(.fx) .m-hero.m-dark .m-cue { color: var(--label-on-navy); }

/* the opening screen is the hero alone (motion on or off); on phones and tablets the Scroll cue sits near its bottom edge */
/* phones and tablets with motion on: the opening screen is the hero alone, with the Scroll cue near its bottom edge */
html:not(.fx) .m-hero.m-dark { min-height: calc(100svh - var(--hdr, 4.5625rem)) !important; }
@media (min-width: 1000px) { html:not(.fx) .m-hero-in { padding-block: clamp(3rem, 9vh, 6rem) clamp(5.5rem, 11vh, 7.5rem); } }
@media (max-width: 999px) {
  html.fx .m-hero { min-height: 100svh !important; }
  .m-hero .m-cue { margin-top: auto; padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* Motion off (or reduced motion): the backdrop stays as a still frame; nothing moves */
html.still .rot > span, html.still .m-line > span, html.still .m-fade, html.still .m-cue i, html.still main.enter, html.still main.leave { animation: none !important; transition: none !important; }
html.still [data-rv].pre, html.still .m-unveil.pre { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.still .m-cue i { transform: none; opacity: 0.8; }
html.still .ph, html.still .ph-ext { transition: none !important; }

/* phone/tablet menu: a full-height sheet under the header with its own scrolling; the page behind is locked */
@media (max-width: 1199px) {
  .mobile-menu:not([hidden]) { position: fixed; left: 0; right: 0; top: var(--menu-top, 4.5rem); bottom: 0; z-index: 19; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--white); box-shadow: 0 1.5rem 3rem rgba(5,10,22,0.25); }
  .mobile-menu .wrap { padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); }
  html.menu-open { overflow: hidden; }   /* on the root only: hiding overflow on <body> would unstick the header */
  .mobile-menu a[aria-current="page"] { color: var(--navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--cta-2, #2F6BFF); padding-left: 0.75rem; }
  .mobile-menu .sub[aria-current="page"] { padding-left: 1rem; }
}

/* ===== device pass (Oct 12) ===== */
/* touch screens: phone, email and profile links get a finger-sized hit area (WCAG 2.5.8), and the consent box is 24 px */
@media (pointer: coarse) {
  .contact-lines a, .facts dd a, .profile .t a:not(.btn), .foot-phone > a, .people a { display: inline-block; padding-block: 0.375rem; }
  .contact-lines { gap: 0; }
  form.cf .check input, form.nl .check input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
}
/* the smallest phones: the profile facts stack (label above value) so an email address never breaks mid-word */
@media (max-width: 400px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 1.25rem; }
  .facts dt { margin-top: 0.75rem; } .facts dt:first-child { margin-top: 0; }
  .facts dd { overflow-wrap: normal; word-break: normal; }
}
/* small uppercase labels: never below 12 px on phones */
@media (max-width: 699px) { .pane .k { font-size: 0.75rem; letter-spacing: 0.1em; } }
.m-cue { font-size: 0.75rem; }
/* the narrowest phones: the floating call / consultation bar stays on one line */
@media (max-width: 359px) { .m-bar a { padding: 0 0.75rem; font-size: 0.875rem; white-space: nowrap; } .m-bar { left: 0.5rem; right: 0.5rem; gap: 0.375rem; padding: 0.375rem; } }
/* phones turned sideways: the whole opening message, including the button, fits the first screen */
@media (orientation: landscape) and (max-height: 500px) {
  .m-hero h1 { font-size: clamp(1.625rem, 7.2vh, 2.125rem) !important; line-height: 1.08; }
  .m-hero .stack { gap: 0.75rem !important; }
  .m-hero .lead { font-size: 0.9375rem; line-height: 1.5; }
  .fx .m-hero-in { padding-top: calc(var(--hdr, 4.5625rem) + 0.75rem) !important; padding-bottom: 0.5rem !important; }
  html:not(.fx) .m-hero-in { padding-block: 1rem 0.5rem; }
  .m-hero .btn { min-height: 2.75rem; }
}

/* footer site links (all nine practice areas + the firm's pages) */
/* footer. Three bands on the page's content edges:
   1. logo left, the main number centred with the second number under it, Call/Text right;
   2. the links in one grid of five equal columns: practice areas in two rows, the firm's pages in a third (set apart by a
      hairline), so every column lines up;
   3. the notice, then the copyright and address left and the policy links right. */
.ft .wrap { padding-block: 1.5rem 1.125rem; }
.ft-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem 2rem; padding-bottom: 0.875rem; }
.ft-logo { justify-self: start; line-height: 0; }
.ft-logo img { height: 2rem; width: auto; aspect-ratio: 435 / 99; display: block; }
.ft-call { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-call a { color: var(--white); text-decoration: none; }
.ft-call a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.ft-num { font-family: var(--display); font-size: 1.625rem; line-height: 1.15; letter-spacing: 0.01em; }
.ft-alt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; color: var(--label-on-navy) !important; }
.ft-dial { justify-self: end; margin: 0; }
.ft-dial a { min-height: 2.25rem; padding: 0 1.125rem; font-size: 0.8125rem; }
.ft-nav { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; column-gap: 2rem; row-gap: 0.625rem; padding-block: 0 0.875rem; border-bottom: 1px solid rgba(185,200,227,0.16); }
/* groups share the same five columns (subgrid), so every column lines up. Each group's small heading sits at the start of
   a hairline: the headings separate the groups without adding rows of their own. */
.ft-g { display: grid; grid-template-columns: subgrid; align-content: start; }
.ft-g-pa { grid-column: 1 / -1; }
.ft-g-att { grid-column: 1 / span 3; }
.ft-g-ins { grid-column: 4; }
.ft-g-con { grid-column: 5; }
.ft-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.25rem; font-family: inherit; font-size: 0.6875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label-on-navy); }
.ft-h::after { content: ""; flex: 1; height: 1px; background: rgba(185,200,227,0.18); }
@media (max-width: 1023px) { .ft-h { font-size: 0.75rem; } }
.ft-nav ul { display: contents; list-style: none; }
.ft-nav li { min-width: 0; }
.ft-nav a { display: inline-block; padding-block: 0.1875rem; font-size: 0.8125rem; line-height: 1.35; white-space: nowrap; text-decoration: none; }
.ft-nav a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
.ft-base { padding-top: 0.75rem; display: flex; flex-direction: column; gap: 0.3125rem; font-size: 0.75rem; color: #AEBBD0; }
.ft-legal { max-width: none; text-align: center; text-wrap: balance; }
.ft-meta { max-width: none; margin-top: 0.9375rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; }
.ft-meta .motion-sw, .ft-co { white-space: nowrap; }
.ft-base a, .ft-base .linklike { color: #C9D3E3; }
/* each column is as wide as its longest name and the five are spread edge to edge; on tablets three columns */
@media (max-width: 899px) {
  .ft-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; column-gap: 1.25rem; }
  .ft-nav .ft-all { display: none; }
  .ft-g-ins { grid-column: 1; } .ft-g-con { grid-column: 2 / span 2; }
}
@media (max-width: 699px) {
  .ft .wrap { padding-block: 1.5rem 1.125rem; }
  .ft-top { grid-template-columns: 1fr; justify-items: center; gap: 0.625rem; }
  .ft-logo, .ft-dial { justify-self: center; }
  .ft-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .ft-nav .ft-all { display: list-item; }
  .ft-g-att { grid-column: 1 / -1; } .ft-g-ins { grid-column: 1; } .ft-g-con { grid-column: 2; }
  .ft-nav a { white-space: normal; }
  .ft-meta { flex-direction: column; align-items: center; text-align: center; }
  .ft-co { white-space: normal; }
}
@media (pointer: coarse) { .ft-nav a { padding-block: 0.375rem; } .ft-alt { padding-block: 0.25rem; } }
.related-areas .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 1.5rem; }
.people a { color: inherit; }

/* attorney profiles: biography + credentials box */
.profile .bio { margin: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--body); max-width: 40rem; }
.facts.creds { align-items: start; }
.facts .edu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.facts .edu .deg { display: block; }
.facts .edu ul { list-style: none; margin: 0.25rem 0 0; padding: 0 0 0 0.875rem; border-left: 2px solid var(--rule-soft); font-size: 0.875rem; color: var(--slate); display: grid; gap: 0.125rem; }
.facts dt.sep, .facts dd.sep { padding-top: 0.875rem; border-top: 1px solid var(--rule-soft); }
@media (max-width: 400px) { .facts dt.sep { padding-top: 0.875rem; } .facts dd.sep { padding-top: 0; border-top: 0; } }

/* attorney name on one line at every width: the heading scales to the text column (falls back to normal wrapping where unsupported) */
@supports (font-size: 1cqi) {
  .profile .t { container-type: inline-size; }
  .profile .t > h1 { font-size: min(clamp(2.25rem, 4.4vw, 3.375rem), calc(100cqi / 13)) !important; white-space: nowrap; }
}

/* ===== v2: continuous time-of-day backdrop + one palette top to bottom ===== */
:root { --scrim: 12,18,36; --sheet: #F5F7FB; --veil: 0.4; --night: 0; --star-op: 1; }
.m-backdrop { background: rgb(var(--scrim)); }
/* rendered landscape */
.rn { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* photo keyframes, stacked; two are visible at a time and crossfade as the sun moves */
.ph { position: absolute; inset: 0; will-change: transform; transition: transform 2s ease, filter 2s ease; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ph-pos, 50% 40%); opacity: 0; transition: opacity 1.2s linear; }
@media (max-aspect-ratio: 3/4) { .ph img { object-position: var(--ph-pos-m, var(--ph-pos, 50% 40%)); } }
.pv { position: absolute; inset: 0; z-index: 5; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.pv-c { position: absolute; inset: 0; transition: opacity 5s linear, filter 5s linear; }
.pv.scrub .pv-c, .pv.scrub video { transition: none !important; }
.pv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ph-pos, 50% 40%); opacity: 0; transition: opacity 1.1s linear; }
@media (max-aspect-ratio: 3/4) { .pv video { object-position: var(--ph-pos-m, var(--ph-pos, 50% 40%)); } }
.ph-night { position: absolute; inset: 0; background: linear-gradient(180deg, #1C2B49 0%, #16223D 60%, #101A30 100%); mix-blend-mode: screen; opacity: var(--night); pointer-events: none; }
/* legibility veil: heavier on the left where the type sits, and at the top under the header */
.m-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--scrim), calc(var(--veil) * 1.25)) 0%, rgba(var(--scrim), calc(var(--veil) * 1.05)) 30%, rgba(var(--scrim), calc(var(--veil) * 0.35)) 55%, rgba(var(--scrim), 0) 78%),
              linear-gradient(180deg, rgba(var(--scrim), 0.32) 0%, rgba(var(--scrim), 0) 16%); }
html.v-rendered .m-veil { opacity: 0.55; }
html.v-rendered.sky-light .m-veil { opacity: 0; }
@media (max-width: 699px) { .m-veil { background: linear-gradient(180deg, rgba(var(--scrim), 0.5) 0%, rgba(var(--scrim), calc(var(--veil) * 0.9)) 30%, rgba(var(--scrim), calc(var(--veil) * 0.75)) 70%, rgba(var(--scrim), calc(var(--veil) * 0.9)) 100%); } }
.m-stars { opacity: var(--star-op); transition: opacity 1.5s; }
html.v-photo .m-stars { inset: 0 0 var(--stars-bot, 40%) 0; }
.m-spot { opacity: 0.55; }
html.v-photo .m-spot { opacity: 0.35; }

/* one surface for reading, softly tinted by the hour */
.fx main > section:not(.m-clear):not(.m-tint):not(.cta-band) { background-color: var(--sheet) !important; border-block: 0 !important; transition: background-color 2s; }
.fx .band-white .faq details, .fx .faq details { border-color: color-mix(in srgb, var(--rule) 80%, transparent); }
/* the dark bands become windows onto the same sky: tinted glass rather than solid navy */
.fx main > section.m-tint, .fx main > section.cta-band { background: linear-gradient(180deg, rgba(var(--scrim), 0.5), rgba(var(--scrim), 0.7)) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: none; }
.fx main > section.cta-band { background: linear-gradient(180deg, rgba(var(--scrim), 0.38) 0%, rgba(var(--scrim), 0.62) 100%) !important; }
.fx main > section.cta-band .copy p { color: rgba(255,255,255,0.86); }
.fx main > section.cta-band h2 { color: #FFFFFF; text-shadow: 0 1px 1.5rem rgba(var(--scrim), 0.5); }
.fx footer { background: linear-gradient(180deg, rgba(var(--scrim), 0.7), rgba(var(--scrim), 0.9)); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); color: rgba(255,255,255,0.8); border-top: 1px solid rgba(255,255,255,0.08); transition: background 2s; }
.fx footer a { color: rgba(255,255,255,0.84); }
html.fx.sky-light main > section.m-tint { background: linear-gradient(180deg, rgba(var(--scrim), 0.62), rgba(var(--scrim), 0.8)) !important; }
html.fx:not(.sky-light) .pane { background: rgba(var(--scrim), 0.4); }
html.fx:not(.sky-light) .pane:hover { background: rgba(var(--scrim), 0.22); }
html.v-photo .m-window { background: radial-gradient(70% 90% at 50% 50%, rgba(var(--scrim), 0.55), rgba(var(--scrim), 0.25)); }
html.v-photo .m-window .big em { color: #D6E4FF; }
html.v-rendered:not(.sky-light) .m-window { background: rgba(var(--scrim), 0.3); }
/* photos: keep white type everywhere the sky shows */
html.v-photo .rot > span { color: #5CB1FF; text-shadow: 0 0 1.25rem rgba(40, 132, 255, 0.5), 0 1px 1.25rem rgba(var(--scrim), 0.55); }
html.v-photo .m-clear h1, html.v-photo .m-clear .statement, html.v-photo .m-clear .big, html.v-photo .m-clear .lead { text-shadow: 0 1px 1.5rem rgba(var(--scrim), 0.55); }
/* preview-only time scrubber */
.sky-pick { display: inline-flex; align-items: center; gap: 0.5rem; }
.sky-pick input[type=range] { width: 11rem; accent-color: var(--warn-ink); }
.sky-pick output { font-size: 0.75rem; font-weight: 600; min-width: 7.5rem; font-variant-numeric: tabular-nums; }
.sky-pick button { font: inherit; font-size: 0.75rem; font-weight: 600; min-height: 1.75rem; padding: 0.125rem 0.625rem; border: 1px solid var(--warn-ink); border-radius: 62rem; background: transparent; color: var(--warn-ink); cursor: pointer; }
.sky-pick button { white-space: nowrap; }
.preview-bar strong { white-space: nowrap; }
.sky-pick #sky-play[aria-pressed="true"] { background: var(--warn-ink); color: var(--warn-bg); }
@media (max-width: 699px) { .sky-pick input[type=range] { width: 5.5rem; } .sky-pick output { min-width: 0; font-size: 0.6875rem; } .sky-pick #sky-now { display: none; } }
@media (prefers-reduced-motion: reduce) { .ph, .ph img { transition: none; } }

/* footage-only scenes */
html.pure .ph img { transition: opacity 5s linear; }
@media (max-aspect-ratio: 3/4) {
  /* phones: the sharp footage (and the sharp still beneath it) fills the lower part of the screen at a wider crop,
     over a soft, blurred extension of the same frame */
  html.pure .ph-ext { display: block; position: absolute; inset: 0; z-index: 0; background-size: cover; background-repeat: no-repeat; filter: blur(22px) saturate(1.12); transform: scale(1.18); transform-origin: 50% 0%; transition: background-image 4s linear; }
  html.pure .ph img, html.pure .pv { top: auto; height: 62svh; bottom: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%); mask-image: linear-gradient(to bottom, transparent 0, #000 24%); }
  html.pure .ph img { transform: none !important; object-position: var(--pos-m, 50% 50%); }
  html.pure .pv-c { transform: none !important; }
  html.pure .pv video { object-position: var(--pos-m, 50% 50%); }
  html.pure .m-veil { background: linear-gradient(180deg, rgba(var(--scrim), 0.62) 0%, rgba(var(--scrim), 0.38) 34%, rgba(var(--scrim), 0.06) 58%, rgba(var(--scrim), 0) 70%); }
  html.pure.fx .m-hero { min-height: 100svh !important; }
}
.ph-ext { display: none; }

@media (min-width: 1000px) {
  /* desktop: the copy sits in the open sky, the observatory and skyline below it */
  html.pure .m-hero { justify-content: flex-start !important; }
  html.pure.fx .m-hero-in { padding-top: calc(var(--hdr, 4.5625rem) + clamp(1rem, 4.5vh, 3rem)); padding-bottom: 2rem; }
  html.pure .m-hero .stack { gap: 1.25rem !important; }
  html.pure .m-veil { background: radial-gradient(ellipse 66% 78% at 16% 42%, rgba(var(--scrim), calc(var(--veil) * 1.22)) 0%, rgba(var(--scrim), calc(var(--veil) * 0.98)) 44%, rgba(var(--scrim), calc(var(--veil) * 0.3)) 68%, rgba(var(--scrim), 0) 82%), linear-gradient(180deg, rgba(var(--scrim), 0.3) 0%, rgba(var(--scrim), 0) 14%) !important; }
  html.pure .m-hero .lead, html.pure .m-hero .link-btn { text-shadow: 0 1px 0.75rem rgba(var(--scrim), 0.7), 0 0 2rem rgba(var(--scrim), 0.45); }
  html.pure .m-cue { bottom: 1.5rem; }
}
html.v-photo .m-clear .i-meta { color: #DCE5F5; text-shadow: 0 1px 1rem rgba(var(--scrim), 0.6); }
html.v-photo .pane .mini { color: rgba(255,255,255,0.86); }
/* inner-page headers over footage: a soft local shade behind the title block */
@media (min-width: 700px) { html.pure main > section.m-clear.m-dark:first-child:not(.m-hero) { background: linear-gradient(90deg, rgba(var(--scrim), 0.64) 0%, rgba(var(--scrim), 0.62) 60%, rgba(var(--scrim), 0.5) 85%, rgba(var(--scrim), 0.34) 100%) !important; } }
@media (max-width: 699px) { html.pure main > section.m-clear.m-dark:first-child:not(.m-hero) { background: linear-gradient(180deg, rgba(var(--scrim), 0.5), rgba(var(--scrim), 0.62)) !important; } }
html.pure main > section.m-clear:first-child:not(.m-hero) .lead, html.pure main > section.m-clear:first-child:not(.m-hero) p { text-shadow: 0 1px 0.75rem rgba(var(--scrim), 0.6); }
/* phones: no rubber-band past the top or bottom of the page (the fixed backdrop and glass footer shook during the bounce),
   and no live blur behind the footer and bands, which iOS redraws on every scroll frame */
html, body { overscroll-behavior-y: none; }
@media (max-width: 699px) {
  .fx footer, .fx main > section.m-tint, .fx main > section.cta-band { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .fx footer { background: linear-gradient(180deg, rgba(var(--scrim), 0.82), rgba(var(--scrim), 0.94)); }
}
/* smoothness: no live blur over the moving footage (a backdrop blur is recomputed on every video frame and every scroll step);
   the glass surfaces become slightly deeper tints instead */
.pane, .pane:hover, .fx footer, .fx main > section.m-tint, .fx main > section.cta-band, .m-bar, .m-rail { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.fx footer { background: linear-gradient(180deg, rgba(var(--scrim), 0.82), rgba(var(--scrim), 0.94)); }
html.fx:not(.sky-light) .pane { background: rgba(var(--scrim), 0.46); }
html.fx:not(.sky-light) .pane:hover { background: rgba(var(--scrim), 0.3); }
.m-rail { background: rgba(18,28,48,0.72); }
.ph.vid-cover img { visibility: hidden; }

/* Sample F layout */

@media (max-aspect-ratio: 3/4) { #ph { transform: none !important; } }
@media (min-width: 1000px) { .m-hero .finder { display: none !important; } .finder-sec { display: block !important; padding-block: 0.5rem 4rem; } .finder-sec .finder { max-width: 50rem; } }
html.v-photo .m-veil { background: linear-gradient(90deg, rgba(var(--scrim), calc(var(--veil) * 1.3)) 0%, rgba(var(--scrim), calc(var(--veil) * 1.0)) 28%, rgba(var(--scrim), calc(var(--veil) * 0.25)) 48%, rgba(var(--scrim), 0) 62%), linear-gradient(180deg, rgba(var(--scrim), 0.32) 0%, rgba(var(--scrim), 0) 16%); }
@media (max-width: 699px) { html.v-photo .m-veil { background: linear-gradient(180deg, rgba(var(--scrim), 0.5) 0%, rgba(var(--scrim), calc(var(--veil) * 0.95)) 30%, rgba(var(--scrim), calc(var(--veil) * 0.7)) 70%, rgba(var(--scrim), calc(var(--veil) * 0.9)) 100%); } }

/* WordPress build */
/* skip link */
.skip { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 100; padding: 0.625rem 1rem; background: var(--white); color: var(--navy); font-weight: 600; border-radius: 0.25rem; transform: translateY(-200%); visibility: hidden; }
.skip:focus { transform: none; visibility: visible; box-shadow: 0 0.5rem 1.5rem rgba(5,10,20,0.25); }   /* the shadow only exists while the link is shown, so it never peeks into view */
main h1[tabindex="-1"]:focus { outline: none; }
/* contact form */
.cf-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg.ok { background: #E6F4EA; color: #14532D; }
.form-msg.err { background: #FDECEC; color: #7F1D1D; }
.cf button[disabled] { opacity: 0.6; cursor: progress; }
/* footer motion switch */
.motion-sw { white-space: nowrap; }
.motion-sw .linklike[aria-pressed="true"] { color: var(--white); text-decoration: none; font-weight: 600; }
/* cookie prompt. First visit: a slim bar along the bottom of the window, lined up with the page's content edges, that
   doesn't block the page. From "Cookie preferences": a small centred dialog. Both choices look the same (no nudging). */
.ck { align-items: center; }
.ck-panel { width: min(30rem, 100%); padding: 1.5rem; gap: 0.75rem; }
.ck-panel h2 { font-size: 1.25rem; }
.ck-panel p { font-size: 0.875rem; line-height: 1.55; }
.ck-row { gap: 0.625rem; }
.ck-row .btn { min-height: 2.5rem; padding: 0 1.25rem; font-size: 0.875rem; background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: none; }
.ck-row .btn:hover { background: var(--navy); color: var(--white); }
.ck.first { inset: auto 0 0 0; padding: 0; background: none; pointer-events: none; }
.ck.first .ck-panel { pointer-events: auto; width: 100%; max-width: none; border-radius: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 2rem;
  padding: 0.875rem max(clamp(1.125rem, 4vw, 4rem), calc((100vw - 75rem) / 2 + clamp(1.125rem, 4vw, 4rem))) calc(0.875rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule-soft); box-shadow: 0 -0.5rem 2rem rgba(5,10,20,0.18); }
.ck.first .ck-panel h2 { grid-column: 1; font-family: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: var(--navy); }
.ck.first .ck-panel > p { grid-column: 1; font-size: 0.8125rem; line-height: 1.5; max-width: 62rem; }
.ck.first .ck-row { grid-column: 2; grid-row: 1 / span 2; flex-wrap: nowrap; }
.ck.first .ck-row .btn { min-height: 2.25rem; padding: 0 1rem; font-size: 0.8125rem; white-space: nowrap; }
.ck.first #ck-msg { grid-column: 1 / -1; }
body:has(.ck.first:not([hidden])) .m-bar { visibility: hidden; }   /* the phone action bar waits until the choice is made */
@media (max-width: 699px) {
  .ck.first .ck-panel { grid-template-columns: minmax(0, 1fr); gap: 0.375rem; padding-top: 0.75rem; }
  .ck.first .ck-row { grid-column: 1; grid-row: auto; margin-top: 0.25rem; }
  .ck.first .ck-row .btn { flex: 1 1 0; }
}
/* page not found */
.nf-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }

/* briefings: publication date (and last update) */
.pub-line { margin: 0; font-size: 0.875rem; color: var(--slate); }
.m-dark .pub-line, .m-clear .pub-line { color: var(--muted-on-navy); }
/* page loading: shows only if the next page takes more than a moment to arrive */
html.nav-wait, html.nav-wait a { cursor: progress; }
html.nav-wait body::after { content: ""; position: fixed; z-index: 200; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #3d6fe0, #5CB1FF); transform-origin: left; animation: nav-wait 6s cubic-bezier(.1,.7,.2,1) both; box-shadow: 0 0 0.5rem rgba(92,177,255,0.6); pointer-events: none; }
@keyframes nav-wait { from { transform: scaleX(0.04); } 20% { transform: scaleX(0.45); } to { transform: scaleX(0.92); } }
@media (prefers-reduced-motion: reduce) { html.nav-wait body::after { animation: none; transform: scaleX(0.6); } }

/* ===== glass pages (Laurence, Oct 13: carry the home page's see-through look onto every page, then onto home's
   "Latest briefings" too) =====
   On every page, the light "sheet" sections become transparent so the backdrop shows, and each section's
   content sits on a dark glass panel like the home page's panes (same tint, hairline border and shadow), with light text.
   Cards inside become lighter glass; the scope letter and the contact form stay white, as the home page keeps its
   "Start here" card white. To switch the whole treatment off, delete this block. */
.fx main > section:not(.m-clear):not(.m-tint):not(.band-navy) {
  --ink: #F3F6FB; --body: #D9E1EF; --slate: #C6D3EA; --navy: #FFFFFF; --focus: #BFD4FF; --sky: rgba(255,255,255,0.10); --paper: rgba(255,255,255,0.06);
  --rule: rgba(185,200,227,0.30); --rule-soft: rgba(185,200,227,0.18);
  background: transparent !important; box-shadow: none !important; color: var(--ink);
  padding-block: clamp(0.75rem, 1.6vw, 1.375rem);
}
.fx main > section:not(.m-clear):not(.m-tint):not(.band-navy):last-child { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.fx main > section:not(.m-clear):not(.m-tint):not(.band-navy) > .wrap {
  --g: clamp(1.125rem, 4vw, 4rem); --gp: min(var(--g), 2.5rem);
  position: relative; isolation: isolate; padding-block: clamp(1.75rem, 3.5vw, 3rem);
}
@media (max-width: 600px) { .fx main > section:not(.m-clear):not(.m-tint):not(.band-navy) > .wrap { --g: 1.125rem; } }
.fx main > section:not(.m-clear):not(.m-tint):not(.band-navy) > .wrap::before {
  content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--g) - var(--gp)); pointer-events: none;
  background: rgba(16,25,43,0.76); border: 1px solid rgba(185,200,227,0.26); border-radius: 0.5rem; box-shadow: 0 2rem 4.5rem rgba(5,10,22,0.32);
}
@media (max-width: 600px) { .fx main > section:not(.m-clear):not(.m-tint):not(.band-navy) > .wrap::before { border-radius: 0; border-inline: 0; } }
/* cards and boxes inside the glass */
.fx main > section :is(.p-card, .a-card, .i-card:not(.feature), .aside, .facts, .art-aside, .pp-note, .paths, .soon) {
  background: rgba(255,255,255,0.05); border-color: rgba(185,200,227,0.22); box-shadow: 0 0 0 1px rgba(185,200,227,0.22);
}
.fx main > section :is(.a-card, .aside, .facts, .art-aside, .pp-note, .soon) { box-shadow: none; }
.fx main > section .pp-note { border-left-color: #9DB8E8; }
.fx main > section .p-card:hover, .fx main > section .i-card:not(.feature):hover { background: rgba(255,255,255,0.10); }
.fx main > section .p-card::before { background: rgba(255,255,255,0.10); }
.fx main > section .p-card:hover .name, .fx main > section .p-card:hover .desc { color: var(--white); }
.fx main > section .i-card.feature { --navy: #1A2740; background: rgba(255,255,255,0.08); box-shadow: 0 0 0 1px rgba(185,200,227,0.26); }
.fx main > section .scope { background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(185,200,227,0.18); }
.fx main > section .scope-row { background: rgba(255,255,255,0.04); }
.fx main > section .scope-row[aria-pressed="true"] { background: rgba(255,255,255,0.12); border-color: #FFFFFF; }
.fx main > section .scope-row .box { background: transparent; border-color: rgba(185,200,227,0.6); }
.fx main > section .scope-row[aria-pressed="true"] .box { background: #FFFFFF; border-color: #FFFFFF; color: #1A2740; }
/* buttons and pressed chips: the same inversion the dark sections use (white button, navy text) */
.fx main > section :is(.btn-primary:not([href="/contact/"]):not(:is([href="#contact"], [href="/contact/"])), .chip[aria-pressed="true"], .chip:hover) { background: #FFFFFF; border-color: #FFFFFF; color: #1A2740; }
.fx main > section .chip { color: #F3F6FB; border-color: rgba(185,200,227,0.4); }
/* white islands: the scope-of-engagement letter keeps its paper look and dark ink */
.fx main > section .letter { --focus: #2F6FD6; --ink: #0D141A; --body: #1F2A37; --slate: #3A4A6B; --navy: #1A2740; --sky: #E6F0FF; --paper: #F7F9FC; --rule: #C9D6EA; --rule-soft: #DCE3EE; color: var(--ink); }
.fx main > section .map-box { --navy: #1A2740; --white: #FFFFFF; --focus: #2F6FD6; }

/* phones and tablets: let the page bounce at its ends again. The backdrop engine turns the bounce off
   (overscroll-behavior-y: none on html/body); on iPhone that makes the first swipe back up from the very bottom of a
   page stick for a moment. The bounce is harmless now that nothing over the footage uses a live blur. */
@media (pointer: coarse) { html, body { overscroll-behavior-y: auto; } }
/* phones: the full-width glass panels skip their large drop shadow (less to repaint while scrolling over the footage) */
@media (max-width: 600px) { .fx main > section:not(.m-clear):not(.m-tint):not(.band-navy) > .wrap::before { box-shadow: none; } }

/* Practice Areas menu (desktop): same width as before; it hangs from the header's bottom line (the line that shows once
   the header turns white) and is drawn above the page. JS in the router stretches it to cover the hero's button row. */
@media (min-width: 1200px) {
  .drop-panel.mega { top: calc(100% + 1px); z-index: 5; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: 0 1.5rem 3rem rgba(5,10,22,0.28); }
  .drop-panel.mega .mega-list { padding-bottom: 1.375rem; }
  .drop-panel.mega .mega-feature { padding-bottom: 2.25rem; }
}

/* home: the "Latest briefings" panel takes the same outer edges as the window panes above it, like the equal-width panels
   on the other pages; its content sits inside the panel */
.fx main > #latest > .wrap { padding-inline: calc(var(--g) + var(--gp)); }
.fx main > #latest > .wrap::before { inset: 0 var(--g); border-radius: 0.5rem; border-inline: 1px solid rgba(185,200,227,0.26); }
/* phones: the narrower panel puts "All Insights" under the heading; line its text up with the heading */
@media (max-width: 600px) { .fx main > #latest .section-head > .link-btn { margin-inline: -0.5rem; } }

/* while the Practice Areas menu covers a button, the button's glow is off (it would show past the menu's side edge) */
main .under-menu { box-shadow: none !important; transition: none !important; }

/* phones: the fixed background keeps one size while the browser's toolbar slides away and back. With inset: 0 its height
   followed the toolbar, so the photo and footage (sized to cover it) zoomed while scrolling; the large-viewport height never changes */
.m-backdrop { bottom: auto; height: 100vh; height: 100lvh; }

/* phones (portrait): frame the footage much like desktop, nearly the whole width of the view (observatory and skyline),
   in a band at the foot of the screen sized from the screen's width (was 62% of the screen height, a tight crop) */
@media (max-aspect-ratio: 3/4) {
  html.pure .ph img, html.pure .pv { height: calc(100vw / 1.3); }
  /* browsers that resize the page with their toolbars (Arc): the band keeps its size and stays where it was when the page
     opened (its foot at the bottom of the opening view); the add-on's script supplies --bd-t = 38% of that view's height */
  html.bd-lock.pure #ph img, html.bd-lock.pure #pv { top: calc(var(--bd-t) / 0.38 - 100vw / 1.3); bottom: auto; height: calc(100vw / 1.3); }
  /* Safari, Chrome and other phone browsers: the band's foot sits at the bottom of the visible screen as the page opens
     (100svh: the view with the toolbars showing; it never changes while scrolling), so the skyline isn't hidden under the toolbar */
  html.pure:not(.bd-lock) #ph img, html.pure:not(.bd-lock) #pv { top: calc(100vh - 100vw / 1.3); top: calc(100svh - 100vw / 1.3); bottom: auto; height: calc(100vw / 1.3); }
}

/* Safari 26+ (floating address bar): the fixed background runs down to the screen's edge, under the bar (router sets --bd-safari) */
html.bd-tall .m-backdrop { height: var(--bd-safari); }
/* Safari 26+: the Start Here card waits for the first scroll, so the glass address bar shows only background when the page opens */
html.bd-tall:not(.pg-moved) #start .finder { opacity: 0 !important; }
html.bd-tall #start .finder { transition: opacity .35s ease; }

/* firm profile links as small chips (footer + contact page), Oct 15 */
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.25rem 0 0.625rem; }
.socials.socials-l { justify-content: flex-start; margin: 0.25rem 0 0; }
.socials a { display: inline-flex; align-items: center; gap: 0.4375rem; min-height: 2rem; padding: 0 0.875rem; border: 1px solid rgba(185, 200, 227, 0.45); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: #C9D3E3; text-decoration: none; }
.socials a:hover { color: var(--white); border-color: var(--white); }
.socials svg { width: 0.9375rem; height: 0.9375rem; flex: none; }
@media (pointer: coarse) { .socials a { min-height: 2.5rem; } }

/* briefings: "Reviewed by" link in the date line */
.pub-line a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }