/* Badayos & Badayos Law. Direction D2C + BG1, chosen 30 August 2026. Swiss register on a warm ground, with a photographic hero behind white text. Palette: brand-pack.md section 1 and the approved web palette at 1a. The scrim values below are load-bearing: contrast.py measures every hero against them and the release build fails if any drops under 4.5:1. */ @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap; src:url("fonts/IBMPlexSans-var.woff2") format("woff2-variations"), url("fonts/IBMPlexSans-var.woff") format("woff")} @font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:100 700;font-display:swap; src:url("fonts/IBMPlexSans-Italic-var.woff2") format("woff2-variations")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2"), url("fonts/IBMPlexMono-Regular.ttf") format("truetype")} :root{ /* Every value below is from brand-pack.md section 1 or the approved web palette at 1a. The warm tones this replaced (#FBFAF7, #F4F1EC, #8d857d) were never approved, and #8d857d put the mono terms at 3.48:1, failing WCAG AA for small text. */ --g:#FFFFFF; --g2:#F7F6F5; --ink:#1A1A1A; --soft:#4A4A4A; --faint:#4A4A4A; --hair:#E2E2E2; --rule:#1A1A1A; --ctl:#8A8A8A; --red:#C43443; /* The readable ink for anything painted ON the brand red. It inverts because the fill does: --red lightens to #EF8B96 in dark so that red TEXT clears AA on a dark ground, which moves a red FILL the wrong way. Measured on the rendered page on 27 September 2026: white on the dark theme's fill is 2.39:1 against the 4.5:1 it needs, and near-black on it is 7.30:1. Never set a literal white on a red fill. */ --on-red:#FFFFFF; --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --max:74rem; /* The header's own height, which the photographic pages use to pull the hero back up under it so the picture still reaches the top of the window. MEASURED, not derived, and only used above 56rem. The rendered bar is 91.45px at 900, 1200, and 1600px wide, read off the live page on 6 September 2026: stable, because the navigation sits on one row at every desktop width. Deriving it from the CSS gives the wrong answer, since the bar's height is the taller of the wordmark and the navigation and the navigation wins. Two guesses were both wrong before it was measured. Rounded up half a pixel on purpose: over-pulling hides the seam under the bar, under-pulling shows a hairline of page background above the photograph. Below 56rem this is not used at all. See the media query near the foot of the file. Re-measure if .head-in's padding, the wordmark height, or the nav type ever change. */ --bar-h:92px; /* The dark ground the footer sits on, and now the frozen header too. [Partner] 6 September 2026 asked for the two to be the same color, so they share one token rather than two values that happen to match today. It is a token of its own and NOT var(--ink), which is what the footer used before. --ink is a text color and it inverts with the scheme: in dark mode it becomes #F2F2F2, which gave the footer a near-white ground carrying #b9b3ad text, measured at rgb(242,242,242) on 6 September 2026. That is light grey on white and close to unreadable, and copying it onto the header would also have put the reversed wordmark's white letterforms on white. This token stays dark in both schemes, lifting to #242424 in dark mode so the band still separates from the page rather than merging into it. */ --ground:#1A1A1A; /* ---- type scale, settled 1 September 2026 ------------------------------------- Six steps and nothing between them. The practice page had accumulated ten sizes chosen one at a time (.66, .7, .85, .88, .9, .93, .94, 1, 1.02, 1.22, 1.34rem), which is not a system: it is ten separate decisions that happen to be close. Every element below names a step, and there are five. There was a sixth, --t-sub at 1.05rem, sitting between body and head for questions and ledes. The Partner read the page and found everything on it too large in turn: the FAQ questions, then the practice question in the rail. Each was one step above body for a reason that sounded good and did not survive being looked at. **A question in a list is a row, not a subheading**, and the number, the rule, and the chevron already mark it. With its last user gone the step was removed rather than left unused, because an unused step in a scale that exists to stop arbitrary sizes is an invitation to one. Hierarchy on this page is carried by colour, weight, position, and the mono labels. Size is reserved for the two things that genuinely differ in kind: the page headline and the section headings. */ --t-display:clamp(2.1rem,4.4vw,3.4rem); /* the page h1, hero only */ --t-head:1.35rem; /* section headings */ --t-body:0.95rem; /* running text */ --t-small:0.875rem; /* secondary and supporting text */ --t-label:0.68rem; /* every mono label, without exception */ /* Three steps added 27 September 2026. None is a new size: each names a size the stylesheet was already using, so naming it changes nothing on the page. The five steps above described the practice pages and governed nothing else. Measured before the change: 27 distinct literal sizes across 82 declarations, against 36 declarations naming a step. Sizes within 0.05rem of a step were then collapsed onto it, which is at most 0.8px at the default root size. Measured after: 4 distinct literal sizes across 7 declarations, against 111 naming a step. The 7 that then remained were settled the same day rather than left: 1.15, 1.1 and 1.06rem were three separate decisions inside one tier and all three took --t-subhead, and .75rem in the footer got a step of its own, because legal fine print is a tier and is neither a control nor a mono label. No literal rem font-size is left in this file. The fluid sizes were then found to carry the same drift: four distinct clamp() values, of which --t-display was declared and never used, two rules repeating its literal instead. They are now three steps: --t-display, --t-title and --t-band. */ --t-subhead:1rem; /* h3 and the card headings under a section heading */ --t-control:0.82rem; /* the label inside a button */ --t-micro:0.62rem; /* counters and the smallest mono labels */ --t-fine:0.75rem; /* footer fine print: address, disclaimer, copyright */ --t-title:clamp(1.7rem,3.2vw,2.5rem); /* the h1 of an article */ --t-band:clamp(1.6rem,2.7vw,2.25rem); /* the h2 of a full-width band, and an article's own h2 */ /* ---- spacing scale, settled 27 September 2026, revised the same day --------------- There was no scale before this. A census of every rem length in a spacing property found 52 distinct values across 315 declarations, the commonest accounting for 7 percent: not a system with outliers, but 52 separate decisions. The first cut was a nine-step 4px grid. It was then tested against the distribution rather than assumed, by fitting step placements to the data and comparing drift. The result argued for keeping the grid: at 7, 8, 9 and 10 steps every data-fitted placement drifted MORE than the grid did, and the two that beat it needed 11 and 12 steps at values like 0.19, 0.73 and 1.93rem, which is not a scale anyone can hold in their head. What the test did show is that the grid was missing two steps. Adding 2.5 and 6rem, both still on the 4px grid, cuts mean drift from 1.78px to 1.42px, halves the worst case from 16px to 8px, and cuts the declarations that would move more than 4px from 29 to 10. The 16px worst case was a single 6rem declaration with no step near it. NOTHING IS REPOINTED ONTO THEM WHOLESALE. It is done block by block with the Partner looking, because it moves the vertical rhythm. The footer is the first block. */ --space-1:0.25rem; /* a hair: the gap under a role line */ --space-2:0.5rem; /* inside a control, and between a label and its field */ --space-3:0.75rem; /* a row's padding in a list of terms */ --space-4:1rem; /* the default gap between elements in a block */ --space-5:1.5rem; /* the default gap between blocks */ --space-6:2rem; /* the page gutter */ --space-7:2.5rem; /* a wide gap between columns */ --space-8:3rem; /* between a section and the next */ --space-9:4rem; /* a wide column gap */ --space-10:5rem; /* the vertical padding of a full section band */ --space-11:6rem; /* the tallest band */ } :root:not([data-theme="light"]){@media (prefers-color-scheme:dark){ --g:#1A1A1A; --g2:#242424; --ink:#F2F2F2; --soft:#C3C3C3; --faint:#C3C3C3; --hair:#343434; --rule:#F2F2F2; --ctl:#8A8A8A; --red:#EF8B96; --ground:#242424; --on-red:#1A1A1A; }} :root[data-theme="dark"]{ --g:#1A1A1A; --g2:#242424; --ink:#F2F2F2; --soft:#C3C3C3; --faint:#C3C3C3; --hair:#343434; --rule:#F2F2F2; --ctl:#8A8A8A; --red:#EF8B96; --ground:#242424; --on-red:#1A1A1A; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--g);color:var(--ink);font-family:var(--sans); font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* The base rule strips color AND underline, which is right for a component link, where the card, the nav item, or the button is itself the affordance. It is wrong for a link inside a sentence: with neither signal there is no way to tell it is a link at all, which fails WCAG 2.2 SC 1.4.1 by not even reaching the point of relying on color. Found 30 August 2026 on the footer disclaimer and then on two more places when the site was swept for it. Underline carries identification, so the rule holds for a reader who cannot separate the red. */ .disclaimer a,.reach a,.field.consent a,.art-body a,.prose a, .art-note a,.pc-m a,.contact-grid p a,address a{color:var(--red);text-decoration:underline; text-underline-offset:.16em;text-decoration-thickness:from-font} .disclaimer a:hover,.reach a:hover,.field.consent a:hover, .art-body a:hover,.prose a:hover,.art-note a:hover,.pc-m a:hover, .contact-grid p a:hover,address a:hover{color:var(--ink)} .lbl a{text-decoration:underline;text-underline-offset:.16em; text-decoration-thickness:from-font} .lbl a:hover{color:var(--red)} .lbl .sep{margin:0 .6em;color:var(--red)} a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--red);outline-offset:3px} .wrap{width:min(var(--max),100% - 4rem);margin-inline:auto} .skip{position:absolute;left:-9999px} .skip:focus{left:1rem;top:1rem;z-index:99;background:var(--red);color:var(--on-red);padding:.6rem 1rem} /* ---- photographic hero. White text over a measured scrim. ---- */ .stage{position:relative;display:flex;flex-direction:column; min-height:100vh;min-height:100svh; background-size:cover;background-position:center 40%;background-color:#1a1a1a} .stage::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,10,9,.68) 0%,rgba(12,10,9,.58) 34%,rgba(12,10,9,.93) 100%)} .stage>*{position:relative;z-index:1} /* The header has to outrank its siblings, not merely tie with them. Every direct child of .stage got z-index:1, so the header and .hbody tied and the later one in the DOM won, which trapped the dropdown behind the headline block. Only the menu items that cleared .hbody's top edge stayed hoverable: two of six under Practice Areas and one of three under People. Found 30 August 2026 from the symptom, confirmed by hit testing each item with elementFromPoint. */ /* .head-in is no longer a child of .stage; the header carries its own stacking above. */ .site-head{position:relative;z-index:10} /* No filter. The reversed artwork already carries white letterforms and the red ampersand; brightness(0) invert(1) would flatten the ampersand to white. */ /* These are scoped to the header, not to .stage. The header used to be a child of .stage and these read `.stage .nav a` and so on. When it moved out on 6 September 2026 every one of them silently stopped matching, and the navigation went back to var(--ink): dark text on the dark bar, invisible. Nothing errored and the build stayed clean. It was caught by scrolling the rendered page in a real browser and looking at it. */ .site-head.over-stage .brand img{height:13px;width:auto} .site-head.over-stage .nav a{color:#fff} .site-head.over-stage .nav a:hover{border-bottom-color:#fff} .hbody{margin-top:auto;padding-bottom:clamp(3.2rem,13vh,9rem); display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem} .hbody h1{grid-column:1/10;font-weight:375;font-size:var(--t-display);line-height:1.08; letter-spacing:-.021em;margin:0;color:#fff;text-wrap:balance} .hbody .lede{grid-column:1/8;color:#efece8;font-size:var(--t-body);margin:1.4rem 0 0;max-width:46ch} .hbody .meta{grid-column:10/13;font-family:var(--mono);font-size:var(--t-label);color:#e2ddd7; line-height:1.95;padding-top:.5rem} .hbody .actions{grid-column:1/8;margin-top:1.9rem} .stage .btn{background:var(--red);border-color:var(--red);color:var(--on-red)} .stage .btn:hover{background:#fff;color:var(--ground);border-color:#fff} .stage .btn:focus-visible{outline:2px solid #fff;outline-offset:3px} /* ---- the header, which stays put ----------------------------------------------- [Partner] 6 September 2026 asked for a header that freezes on scroll, on every page. position:sticky, not fixed. Sticky keeps its place in the flow, so the pages with no photograph need no compensating padding and cannot end up with their first heading hidden under the bar. The pages that do have a photograph pull the hero back up under the bar with a negative margin, so the picture still runs to the top of the window exactly as it did before. It could not stay inside .stage, which is where the markup used to put it: a sticky element sticks only within its own parent's box, so it would have come unstuck the moment the hero scrolled past. build.py now emits it as a sibling. */ .site-head{position:sticky;top:0;z-index:50;background:var(--g); border-bottom:1px solid var(--rule); transition:background-color .18s ease,border-color .18s ease} /* Over a photograph the bar starts invisible, so the hero reads as it always has. */ .site-head.over-stage{background:transparent;border-bottom-color:transparent; margin-bottom:calc(-1 * var(--bar-h))} /* Once the page has moved, the bar needs a ground of its own. On a photographic page it takes the same near-black the hero uses, because the wordmark up there is the reversed artwork with white letterforms and a red ampersand: on the page's own white it would vanish. It takes --ground, the same token the footer uses, so the two bands that top and tail every page are one color rather than two that nearly match. Before this they did nearly match: the header was #1a1815 and the footer #1A1A1A, a warm near-black against a neutral one. */ .site-head.over-stage.stuck{background:var(--ground);border-bottom-color:rgba(255,255,255,.14)} .head-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 0} .brand img{height:13px;width:auto} .nav{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0} .nav a{font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase; padding-bottom:2px;border-bottom:1px solid transparent} .nav a:hover{border-bottom-color:var(--red)} /* ---- plain hero ---- */ /* The grid belongs on the wrap, not on the section. It was on the section, whose only child is .wrap, so .wrap was being placed in one of twelve columns and every page using this hero rendered its content in a twelfth of the page. Found 30 August 2026 on the lawyers, contact, and privacy pages. */ .hero{padding:5rem 0 3rem} .hero>.wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem} .hero .lbl{grid-column:1/13;padding:0 0 1rem} .hero h1{grid-column:1/10;font-weight:375;font-size:var(--t-display);line-height:1.08; letter-spacing:-.021em;margin:0;text-wrap:balance} .hero .lede{grid-column:1/8;color:var(--soft);font-size:var(--t-body);margin:1.5rem 0 0;max-width:46ch} .hero .meta{grid-column:10/13;font-family:var(--mono);font-size:var(--t-label);color:var(--soft); line-height:1.95;padding-top:.5rem} section{padding:0 0 4rem} h2{font-weight:400;font-size:var(--t-head);letter-spacing:-.008em;margin:0 0 1.2rem} h3{font-weight:500;font-size:var(--t-subhead);margin:0 0 .3rem} p{margin:0 0 1.1em;max-width:46ch} /* max-width:none because the global `p` rule caps every paragraph at 46ch, which is a READING measure and has no business on a label. In a 704px column it squeezed the article kicker into 309px and wrapped "FAMILY AND ESTATE" onto a second line with nearly 400px of the column standing empty beside it. */ .lbl{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase; color:var(--soft);padding:3.5rem 0 1rem;margin:0;max-width:none} /* The path may break BETWEEN its parts, never inside one: "FAMILY AND / ESTATE" reads as two things rather than one practice area. */ .lbl a,.lbl .sep,.lbl .nb{white-space:nowrap}/* ---- register rows ---- */ .row{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem; border-bottom:1px solid var(--hair);padding:1.15rem 0} .row .n{grid-column:1/2;font-family:var(--mono);font-size:var(--t-label);color:var(--red); letter-spacing:.1em;padding-top:.25rem;font-variant-numeric:tabular-nums} /* ---- buttons ---- */ .actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem} /* ---- calls to action ------------------------------------------------------- Three variants and one rule: a button must be obviously a button at rest, not only once the pointer finds it. Every one carries a filled or a full-weight border at rest, every one inverts on hover so the change is unmistakable, and every one has a focus ring, because a hover state a keyboard user never sees is not a state. Primary is the Firm's red filled. Secondary is outlined at full ink weight. --hair was tried as the outline and is 1.30:1 on white, under the 3:1 that WCAG 2.2 SC 1.4.11 requires of a control boundary, so it is not used here. */ .btn{display:inline-block;font-size:var(--t-control);letter-spacing:.06em;text-transform:uppercase; font-weight:500;padding:.7rem 1.4rem;border:1px solid var(--red); background:var(--red);color:var(--on-red); transition:background .16s ease,border-color .16s ease,color .16s ease} .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--g)} .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)} .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--g)} .btn-ghost:focus-visible{outline:2px solid var(--red);outline-offset:3px} /* section head: the eyebrow on one side, the action on the other */ .sec-head{display:flex;align-items:center;justify-content:space-between; gap:1.5rem 2rem;flex-wrap:wrap} .sec-head .eyebrow{margin-bottom:0} .sec-head .actions{margin:0} .band .sec-head{margin-bottom:2.2rem} .pb-below .rl .actions{margin-top:1.8rem} @media(max-width:56rem){.sec-head{gap:1.2rem}} /* ---- lists, people, prose, form ---- */ .checks{list-style:none;margin:1rem 0 0;padding:0;max-width:46ch} .checks li{position:relative;padding-left:1.2rem;margin-bottom:.7rem;color:var(--soft);font-size:var(--t-body)} .checks li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--red)} .people{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-top:2rem} .person{border-top:1px solid var(--hair);padding-top:1rem} .person h3{font-weight:500;font-size:var(--t-subhead);margin:0 0 .1rem} .role{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase; color:var(--faint);margin:0 0 .7rem} .person p{font-size:var(--t-body);color:var(--soft);max-width:none} .reach{font-size:var(--t-small);margin-top:.8rem} .reach a{color:var(--red)} .portrait{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-bottom:.9rem;background:var(--g2)} /* [Partner] 1 September 2026: on a phone the form comes first, so it is first in the document and the prose is placed back into column one for the wide layout. Document order rather than CSS `order`, for the reason in section 3o. auto-fit had to go with it. Its collapse point is implicit, so there was no breakpoint to hang the ordering on, and a media query guessed near it would have left a band of widths showing two columns in the wrong order. The explicit rule collapses where auto-fit did: measured at 591px, two columns at and above it and one below. */ .contact-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:1.5rem} /* The ROW is named as well as the column, and leaving it out is what broke this once. Auto-placement is sparse: the form comes first in the document and is pinned to column 2, so it took row 1 and the cursor moved past column 1. The prose, pinned to column 1, cannot go backwards, so it started a second row and the whole left column dropped below the form. A column alone is not a position. */ .c-say{grid-column:1;grid-row:1} .c-form{grid-column:2;grid-row:1} @media(max-width:36.875rem){ .contact-grid{grid-template-columns:1fr} .c-say,.c-form{grid-column:auto;grid-row:auto} } address{font-style:normal;line-height:1.85;font-size:var(--t-body);color:var(--soft)} address a{color:var(--red)} .prose{max-width:44rem} .prose h2{margin-top:2.4rem;font-size:var(--t-subhead);font-weight:500} .prose h2:first-child{margin-top:0} /* The section's own rule spans the column, so the fields do too. At 30rem they stopped 92px short of it, which read as a misaligned block rather than a narrower measure. */ .inquiry{max-width:none} .req{margin:0 0 1.3rem;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em; text-transform:uppercase;color:var(--faint);max-width:none} .field{margin:0 0 1.15rem;max-width:none} .field label{display:block;font-weight:500;font-size:var(--t-small);margin-bottom:.35rem} .field input[type=text],.field input[type=email],.field input[type=tel],.field textarea{ width:100%;font:inherit;font-size:var(--t-body);color:var(--ink);background:var(--g); border:1px solid var(--hair);padding:.55rem .65rem}.field .hint{display:block;font-size:var(--t-control);color:var(--faint);margin-top:.35rem} /* ---- the widened inquiry form. [Partner] 9 September 2026 ---- */ /* The three name boxes sit on one row on a desktop and stack on a phone. Three separate .field paragraphs rather than one, so each keeps its own label and its own error state. */ .f-names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1rem} .f-names .field{margin-bottom:1.15rem} /* Salutation is a short control and a full-width select reads as a mistake. Nationality and gender take half, because their option text is long enough to need it. */ /* Salutation and gender share a row. [Partner] 9 September 2026. Salutation takes only the width its longest option needs; gender takes the rest, because its options are sentences. align-items:start so the hint under gender lengthens its own cell and does not drag the salutation control down with it. */ .f-pair{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:0 1rem; align-items:start;max-width:36rem} .f-half{max-width:24rem} .field .opt{font-weight:400;font-size:var(--t-control);color:var(--faint);letter-spacing:0; text-transform:none;margin-left:.4rem} /* A native select cannot be styled to match the text inputs, so the arrow is drawn and the browser's own is removed. appearance:none needs the -webkit- prefix to reach Safari, which is most of this site's traffic. */ .sel{position:relative;display:block} /* A select and a text input do not compute the same height from the same padding, and the 4px difference shows the moment they sit in one row, as the dial code and the number do. The height is stated once here so the two agree by construction rather than by luck. */ .sel select{appearance:none;-webkit-appearance:none;width:100%;font:inherit;font-size:var(--t-body); color:var(--ink);background:var(--g);border:1px solid var(--hair); padding:.55rem 2rem .55rem .65rem;border-radius:0;cursor:pointer;line-height:1.35; height:44px} .sel select:hover{border-color:var(--ctl)} .sel select:focus-visible{outline:2px solid var(--red);outline-offset:1px} /* Drawn with a border rather than an SVG so it inherits the text color and needs no asset. pointer-events:none so a click on the arrow still opens the select underneath it. */ .sel .caret{position:absolute;right:.75rem;top:50%;margin-top:-3px;width:.42rem;height:.42rem; border-right:1.5px solid var(--soft);border-bottom:1.5px solid var(--soft); transform:rotate(45deg);pointer-events:none} /* The dial code and the number are one field to a reader, so they share a row and the number takes the space the code does not need. */ .tel-row{display:flex;gap:.5rem;align-items:stretch} .sel-dial{flex:0 0 13rem} /* The option text carries the country name and the code, which will not fit; the closed control shows what fits and the open list shows all of it, which is the native behavior. */ .sel-dial select{text-overflow:ellipsis} .tel-row input[type=tel]{flex:1 1 auto;min-width:0} @media(max-width:40rem){ .f-names,.f-pair{grid-template-columns:1fr;gap:0} .f-half,.f-pair{max-width:none} .sel-dial{flex:0 0 8.5rem} } .field.consent{display:flex;gap:.6rem;align-items:flex-start} .field.consent input{margin-top:.35rem;width:.95rem;height:.95rem;flex:0 0 auto;accent-color:var(--red)} .field.consent label{font-weight:400;font-size:var(--t-small);margin:0;color:var(--soft)} .field.consent a{color:var(--red)} /* The same fine black line, doing the same job: it separates the act of sending from the fields being filled, so the button reads as a decision rather than one more row. */ .submit{margin:1.8rem 0 0;padding-top:1.5rem;border-top:1px solid var(--rule); max-width:none} /* The prose measure caps a paragraph at 414px, which is right in a full-width band and wrong here: each section's own rule spans 572px, so its copy stopped 158px short of the line drawn over it and read as a misaligned block. The column IS the measure. */ .contact-grid > div > p{max-width:none} .hp{position:absolute;left:-9999px} /* Footer type is fine print and has to read as fine print. At .8rem against a 15px body it sat 2px below body text, which is not a hierarchy, and 1.62 leading is body leading. The height came mostly from whitespace: 3rem of margin plus 6rem of padding was 144px before a single line of text. Measured 30 August 2026, at 777px tall. The legal line is NOT shrunk below 12px to buy height. The Firm's own rule is that a disclaimer sits where the reader will actually see it, and setting it in 11px to save space is burying it by other means. The height comes out of leading, padding, and putting the address on two lines instead of five. */ /* The footer takes the OPPOSITE ground from the section above it, so there is always a division. On the homepage the black Insights band runs to the bottom, so the footer is light. On practice areas the cards are white, so the footer is dark. Set per page in build.py via shell(foot=...), because it depends on what the page ends with. Measured against #1A1A1A: #b9b3ad is 8.38:1 and white is 17.40:1. The brand red is 3.25:1, so on the dark footer the inline link is white with an underline, not red. */ footer.site-foot{border-top:1px solid var(--rule);margin-top:0;padding:var(--space-7) 0 var(--space-8); font-size:var(--t-fine);line-height:1.55;color:var(--soft)} footer.site-foot.dark{background:var(--ground);border-top-color:rgba(255,255,255,.22); color:#b9b3ad} .site-foot.dark strong{color:#fff} .site-foot.dark .foot-legal{border-top-color:rgba(255,255,255,.16)} .site-foot.dark .disclaimer,.site-foot.dark .foot-copy{color:#b9b3ad} .site-foot.dark address{color:#b9b3ad} .site-foot.dark .cols a{color:#efece8} .site-foot.dark .cols a:hover{color:#fff} .site-foot.dark .disclaimer a{color:#fff} .site-foot.dark .disclaimer a:hover{color:#efece8} /* The footer's contact column is three links with nothing around them, so nothing but their own appearance says they are links. They were the footer text color with no underline: undifferentiated from the address block beside them. Underlined, because on the dark ground color alone would be the only cue, which is what the rule above forbids. This is the one place the inline-link guard cannot see: it looks at blocks of running text, and these are a bare list. */ .site-foot .cols a{text-decoration:underline;text-underline-offset:.16em; text-decoration-thickness:from-font} .site-foot .cols{display:flex;gap:var(--space-5) var(--space-7);flex-wrap:wrap;justify-content:space-between} .site-foot address{font-size:var(--t-fine);line-height:1.55;max-width:54ch;color:var(--soft)} .site-foot .cols a{color:var(--soft)} .site-foot .cols a:hover{color:var(--red)} /* The rule spans the full measure. The disclaimer text does not, because 12px legal text set across 1200px is roughly 170 characters a line and unreadable. It sits in columns 1 to 8 with the copyright opposite, so the width is used deliberately rather than looking truncated, which is how it read before. */ .foot-legal{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-5); margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--hair);align-items:start} .disclaimer{grid-column:1/9;font-size:var(--t-fine);max-width:none;line-height:1.55; color:var(--faint);margin:0} .foot-copy{grid-column:10/13;font-size:var(--t-fine);color:var(--faint);margin:0;max-width:none; text-align:right} @media(max-width:56rem){ .disclaimer,.foot-copy{grid-column:1/13} .foot-copy{text-align:left;margin-top:var(--space-4)} } @media(max-width:56rem){ .hbody,.hero>.wrap,.row{grid-template-columns:1fr!important} /* .hero .lbl and .hbody .lbl belong in this list and were missing from it. The wrap collapses to one column above, but a child still asking for grid-column:1/13 makes the grid create the other eleven tracks implicitly, so the label stretched to 450px inside a 340px wrap and the privacy page scrolled sideways. Every other child was reset; the label was the one that was not. */ .hbody h1,.hbody .lede,.hbody .meta,.hbody .actions,.hbody .lbl, .hero h1,.hero .lede,.hero .meta,.hero .lbl, .row .n{grid-column:auto!important} .head-in{flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.6rem 0} /* Below this width the bar does NOT overlap the hero. It sits above it. The reason is that the navigation wraps down here, so the bar's height is a function of the viewport width rather than a constant: measured at 106px when 500px wide and 148px when 404px wide. No single pull-up value can be right across that range, and the wrong one leaves a band of page background above the photograph, which is what a hardcoded 107px did at 404px. Rather than compute it in script and accept a jump on first paint, the overlap is simply dropped on small screens. It keeps the hero's own near-black rather than the page ground, because the wordmark on these pages is the reversed artwork with white letterforms. On a light bar it would disappear. */ .site-head.over-stage{margin-bottom:0;background:var(--ground); border-bottom-color:rgba(255,255,255,.14)} /* No overlap down here, so the band behind the bar would appear as a loose strip of photograph beneath it. It has no content of its own, so it collapses again. */ .stage-head{min-height:0} /* [Partner] 1 September 2026: Home comes out of the navigation on a phone. The wordmark is already a link to the homepage and already carries the accessible name "Badayos and Badayos Law, home", so nothing is lost by hiding the word, and the row of items that was wrapping to two lines gets one item shorter. Hidden at the width the header itself changes shape, so one breakpoint governs both. display:none takes it out of the tab order too, which is right: two links to the same page in one header is a duplicate stop, and the one that stays is the one that is always there. */ .nav-home{display:none} /* This row holds one line down to 393px and no further. Below that the collapsed navigation at the end of this file takes over, and flex-wrap stops applying. */ .nav{flex-wrap:wrap;gap:1.1rem} .stage{min-height:78svh;padding-bottom:0} .hbody{padding-bottom:2.4rem;margin-top:auto} .wrap{width:calc(100% - 2.2rem)} .hero{padding:3rem 0 2rem} } @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* ---- lower page: bands, split layout, method, partner cards ---- */ .band{padding:4.5rem 0} .band.alt{background:var(--g2)} .band .lbl{padding:0 0 1.6rem} /* method */ .m{display:grid;grid-template-columns:2.6rem 1fr;gap:1.2rem;padding:1.4rem 0; border-top:1px solid var(--hair)} .m:first-child{border-top:1px solid var(--rule)}.m h3,.m p{grid-column:2} .m h3{font-weight:500;font-size:var(--t-subhead);margin:0 0 .3rem} .m p{margin:0;color:var(--soft);font-size:var(--t-body);max-width:52ch} @media(max-width:56rem){ .band{padding:3rem 0} } /* ---- hero dateline and page index ---- */ .hbody .dateline{grid-column:1/12;max-width:none;font-family:var(--mono);font-size:var(--t-label); letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.8;margin:0 0 1.3rem} .signpost{border-top:1px solid rgba(255,255,255,.28);padding:1.1rem 0 1.8rem; display:flex;gap:2.6rem;flex-wrap:wrap} .signpost a{display:flex;align-items:baseline;gap:.6rem;color:#fff;opacity:.9; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase} .signpost a:hover{opacity:1} /* One red on the page. This was the dark-mode --red hardcoded onto a surface that is dark in both themes, which left the homepage carrying two reds while the People and Contact bands used var(--red). The numerals are aria-hidden in the markup, because --red tops out near 3.8:1 against black and can never reach 4.5:1 there: they are a visual index and the label beside them carries the meaning. Measured 30 August 2026. */ .signpost .ix-n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--red)} @media(max-width:56rem){ .hbody .dateline{grid-column:auto} .signpost{gap:.9rem 1.5rem;padding:.9rem 0 1.2rem} .signpost a{font-size:var(--t-label);letter-spacing:.06em} } /* dateline marks: drawn, not emoji, so they take the type's color and size */ .hbody .dateline{display:flex;flex-wrap:wrap;gap:.45rem 1.9rem;align-items:center} .pt{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap} .gl{width:.82em;height:.82em;flex:0 0 auto;fill:none;stroke:currentColor; stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke} .gl .f{fill:currentColor;stroke:none} /* The marks are red on every surface. On a photograph they read by hue rather than by lightness, so they are an accent and never a signal: they are aria-hidden and the label beside them carries the meaning. Measured 30 August 2026. The three W4 Cebu-emphasis rules that used to sit here are gone, 31 August 2026. They made the first mark larger and dimmed the second to 60 percent, for a homepage hero whose eyebrow read "Cebu City / Acting across the Philippines". That eyebrow was removed when the H1 absorbed both facts, so the rules were emphasising nothing on the page they were written for while quietly dimming the second mark on the seven pages that still carry a dateline. A rule whose purpose is deleted has to be deleted with it. */ .dateline .gl,.hbody .dateline .gl{stroke:var(--red)} .dateline .gl .f,.hbody .dateline .gl .f{fill:var(--red)} /* ---- practice areas, PS1: two columns, mark inline with the name ---- */ .pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 4rem} /* ---- practice areas index ---------------------------------------------------- */ .pa{display:block;border-top:1px solid var(--hair);padding:1.5rem 0 1.7rem} .pa:nth-child(-n+2){border-top:1px solid var(--rule)} /* The card heading is h3 on the homepage, where the section already has an h2, and h2 on the practice-areas index, where it is a top-level listing under the h1. The styling has to follow the card, not the heading level, or the mark renders at its natural SVG size: a black square the width of the column. */ .pa h3,.pa h2{display:flex;align-items:center;gap:.7rem;font-weight:500;font-size:var(--t-subhead);margin:0 0 .35rem} /* .mk is a component, not a descendant of one container. Scoping it to .pa meant the same SVG rendered as a black square the width of the column the moment it was used anywhere else, which happened twice in one sitting: once on the practice-areas index and again on its rewritten rows. Style the thing, not its neighbourhood. */ .mk{width:1.1rem;height:1.1rem;flex:0 0 auto;color:var(--red);fill:none;stroke:currentColor; stroke-width:1.15;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke} .mk .f{fill:currentColor;stroke:none} .pa p{margin:0 0 .8rem;color:var(--soft);font-size:var(--t-body);max-width:none} /* .terms is a component, not a descendant of .pa. Scoped to a container it reverted to a bulleted list the moment it was used anywhere else, which is the same defect .mk had twice. Style the thing, not its neighbourhood. */ .terms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1rem} .terms li{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;color:var(--faint)} .pa:hover h3 span,.pa:hover h2 span{color:var(--red)} @media(max-width:56rem){.pa-grid{grid-template-columns:1fr} .pa:nth-child(2){border-top:1px solid var(--hair)}} /* ---- People band ------------------------------------------------------------ The same materials as the hero, arranged differently: full-bleed photograph under a measured scrim, white text on the twelve-column grid, mono eyebrow with the red symbols, hairline rule, red numeral keyed to the hero signpost. It is a band rather than a stage, so it never reads as a second hero. The scrim is checked by contrast.py, not chosen by eye. ------------------- */ .pb{position:relative;background-size:cover;background-position:center 58%; background-color:#1a1a1a;display:flex;flex-direction:column;justify-content:center; min-height:clamp(20rem,42vh,27rem);padding:3.4rem 0} .pb::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(12,10,9,.74) 0%,rgba(12,10,9,.66) 38%,rgba(12,10,9,.86) 100%)} .pb>*{position:relative;z-index:1} .pb .eyebrow{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase; color:#efece8;margin:0 0 2.2rem;max-width:none;display:flex;align-items:center;flex-wrap:wrap} .pb h2,.pb h1{grid-column:1/8;font-weight:375;color:#fff;letter-spacing:-.016em;line-height:1.14; margin:0;font-size:var(--t-band);text-wrap:balance} /* The prose sits below the band, on white, where it is easiest to read. */ .pb-below{padding:3.4rem 0 3.6rem} .pb-below .tx{grid-column:1/7} .pb-below .rl{grid-column:8/13;border-top:1px solid var(--ink);padding-top:1rem} .pb-below .rl p{font-size:var(--t-small);max-width:30ch;margin:0} .pb-below p{color:var(--soft);font-size:var(--t-body);line-height:1.62;max-width:52ch;margin:0 0 1.05em} .pb-below .actions{margin-top:2rem} .g12{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem} @media(max-width:56rem){ .pb h2,.pb-below .tx,.pb-below .rl{grid-column:1/13} .pb-below .rl{margin-top:1.8rem} }@media(max-width:56rem){} @media(max-width:56rem){} /* ---- article listing and article page -------------------------------------- One template for both sections. Adding an article is a content change, never a template change, which is what content-plan.md recorded as missing. ------ */ .art{padding:var(--space-9) 0 var(--space-4)} .art h1{font-weight:375;font-size:var(--t-title);line-height:1.14; letter-spacing:-.018em;margin:var(--space-2) 0 var(--space-4);max-width:24ch;text-wrap:balance} .art .lbl{padding:0} .art .lbl a{color:var(--soft)} .art .lbl a:hover{color:var(--red)} .lbl .sep{margin:0 .6em;color:var(--red)} .art .art-sf{font-size:var(--t-subhead);max-width:56ch;margin:0 0 var(--space-5);color:var(--soft)} .art-by{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.05em;color:var(--soft); margin:0 0 var(--space-7);padding-bottom:var(--space-5);border-bottom:1px solid var(--rule);max-width:none} .art-by .sep{margin:0 .6em;color:var(--red)} .art-body{max-width:62ch} /* The item's photograph at the head of the article, at the column's width, 16:9. It sits between the byline and the body and never carries text. */ .art-fig{margin:0 0 var(--space-6);aspect-ratio:16/9;overflow:hidden;background:var(--hair)} .art-fig img{display:block;width:100%;height:100%;object-fit:cover} .art-body p{font-size:var(--t-subhead);line-height:1.72;margin:0 0 1.3em;max-width:none} .art-note{margin:var(--space-8) 0 0;padding-top:var(--space-4);border-top:1px solid var(--hair); font-size:var(--t-control);line-height:1.7;color:var(--faint);max-width:62ch} /* ---- header dropdown ------------------------------------------------------- Opens on :hover and on :focus-within, so it works from the keyboard with no script. The trigger is a real link to a real page, never a dead label. ---- */ .nav .has-menu{position:relative} .nav .has-menu>a{display:inline-flex;align-items:center;gap:.4em} .caret{width:.5em;height:.32em;flex:0 0 auto;transition:transform .18s ease} .nav .has-menu:hover .caret,.nav .has-menu:focus-within .caret{transform:rotate(180deg)} .menu{position:absolute;top:100%;left:0;z-index:20;margin:0;padding:.5rem 0 0; list-style:none;min-width:11rem;opacity:0;visibility:hidden; transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease} .nav .has-menu:hover .menu,.nav .has-menu:focus-within .menu{ opacity:1;visibility:visible;transform:translateY(0)} .menu li{background:var(--g);border:1px solid var(--hair);border-bottom:0} .menu li:last-child{border-bottom:1px solid var(--hair)} .menu a{display:block;padding:.62rem .9rem;border-bottom:0;white-space:nowrap; font-size:var(--t-label);letter-spacing:.11em} .menu a:hover{background:var(--g2);color:var(--red);border-bottom:0} /* The closed dropdown still occupies layout. `visibility:hidden` hides it from view and from the accessibility tree but leaves its box in the scrollable area, so an 11rem menu anchored left:0 under a nav item sitting near the right edge pushed the document 81px wider than the viewport. Every page on the site scrolled sideways on a phone because of it, and nothing on screen showed why. Anchoring it right means it opens leftward from its own parent, which is inside the viewport by definition. display:none would also fix the width and would cost the open/close transition. */ @media(max-width:48rem){.menu{left:auto;right:0}} /* On the photographic hero the header sits on the image, so the panel needs its own opaque ground rather than inheriting the dark one. */ .site-head.over-stage .menu li{background:var(--ground);border-color:rgba(255,255,255,.22)} .site-head.over-stage .menu a:hover{background:#242424;color:#fff} /* ---- insights listings ---- */ /* The fine black line divides WITHIN a section, where the red rule opens one. Here it separates the hours from the address above them: the same class of information, and a reader looking for one should not have to read the other to find where it starts. */ .hours{margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule); font-size:var(--t-body);line-height:1.6;color:var(--ink)} .hours-c{color:var(--soft);font-size:var(--t-small)} /* The map sits beside the contact details rather than under them, at roughly a third of its old width. Below the breakpoint it stacks, map first, because on a phone the map is the thing worth seeing before a wall of address lines. */ .reach-grid{display:grid;grid-template-columns:16rem minmax(0,1fr);gap:1.6rem; align-items:start;margin-top:1.1rem} .reach-grid .map{margin:0} .reach-grid address{margin:0} @media(max-width:44rem){.reach-grid{grid-template-columns:1fr;gap:1.2rem}} /* ---- practice-area switcher ------------------------------------------------ Sits at the top of the white section and carries all six, the current one marked. It is a switcher, not a footnote: a reader who clicked the wrong area should be able to correct it without going back. ------------------------- */ .pa-switch{border-bottom:1px solid var(--hair);padding:1.5rem 0} .pa-switch ul{display:flex;flex-wrap:wrap;gap:.9rem 2rem;list-style:none;margin:0;padding:0; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase} .pa-switch a{color:var(--soft);border-bottom:0} .pa-switch a:hover{color:var(--red)} .pa-switch .on{color:var(--ink);position:relative;display:inline-block} .pa-switch .on::after{content:"";position:absolute;left:0;right:0;bottom:-.5rem;height:1px; background:var(--red)} /* ---- practice page: the vertical split ------------------------------------ [Partner] 31 August 2026, chosen from six rendered mockups, revised 1 September. The left column carries who the page is for, what the Firm has written on it, and the ask, and follows the reader down so the ask is never off screen. The right column carries the work. The writing sits ABOVE the ask: a reader who has just read what the Firm publishes on their problem is the likeliest to write. **The left column sits on its own tinted ground.** The page was one flat white run from the hero to the footer. Tinting the rail makes the vertical division legible as division rather than as space, and it gives the column a shape so it reads as deliberate when it is shorter than the work beside it. --------- */ /* [Partner] 1 September 2026: on a phone "What we have written" belongs BELOW the questions, not above "What we do". It used to sit inside .vs-l, and a child cannot be reordered past its parent's sibling, so it is now a third grid item placed back into column one on the desktop layout. Document order is left panel, work, writing, which is the order a phone stacks them in, and CSS `order` is not used for the reason recorded in section 3o: it moves what is seen without moving what is focused. The row gap is 0 so .vs-l and .vs-w touch and read as one tinted panel; the 4rem is the column gap only. .vs-r spans both rows. */ .vsplit{display:grid;grid-template-columns:21rem minmax(0,1fr); /* Row 1 to content, row 2 takes the rest. .vs-r spans both, and a spanning item's height is distributed across auto rows, which stretched row 1 to half the article and pushed the writing 366px down the page. `1fr` on row 2 gives that excess somewhere to go. */ grid-template-rows:auto 1fr; gap:0 4rem;align-items:start;padding:3.4rem 0 4.2rem} .vs-l{grid-column:1;grid-row:1} .vs-w{grid-column:1;grid-row:2} .vs-r{grid-column:2;grid-row:1/3} /* Not sticky: the rail now carries up to ten articles and fills its own height, which is what the Partner asked it to accommodate. A sticky column that is taller than the viewport stops behaving like one. */ .vs-l{background:var(--g2);padding:1.6rem 1.5rem 0;border-top:2px solid var(--red)} .vs-l .lbl{padding:0 0 .6rem} .vs-q{font-weight:400;font-size:var(--t-body);line-height:1.45;letter-spacing:0; margin:0 0 .7rem} .vs-a{font-size:var(--t-small);line-height:1.62;color:var(--soft);margin:0} /* Two mono labels at one size, and until 1 September 2026 they differed by color with no rule behind it: the rail said EMPLOYMENT in gray and WHAT WE HAVE WRITTEN in red, side by side, meaning nothing by the difference. **Red names an item of work. Gray names a place or a block.** So the run-in labels on the What we do cells are red, because each one names a thing the Firm does, and every label that heads a block is gray, because it names a region of the page. That also cut the red on this page from eleven elements to five, which matters: the brand rule is that red is an accent, and eleven accents is a color scheme. */ .rk{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em; text-transform:uppercase;color:var(--red);margin:0 0 .5rem;font-weight:400;max-width:none} /* The tint and the side padding move onto .vs-w now that it is its own box, and the hairline moves onto an inner element so it stays inset from the panel edge instead of running edge to edge. The numbers are the old ones: 1.5rem of space above the rule was the old margin-top, 1.2rem below it the old padding-top, 1.8rem at the foot the bottom padding .vs-l used to provide. */ .vs-w{background:var(--g2);padding:1.5rem 1.5rem 1.8rem} .vs-w-in{border-top:1px solid var(--hair);padding-top:1.2rem} /* The ask, built 27 September 2026 against section 3j of the design brief, which specified it on 31 August and which nothing had implemented. It closes the panel rather than opening one, so it takes the same inset hairline the writing takes above it. Spacing is on the scale; the label is the gray one, which names a region. */ .vs-ask{border-top:1px solid var(--hair);margin-top:var(--space-5);padding-top:var(--space-4)} .vs-ask .lbl{padding:0 0 var(--space-2)} .vs-ask-line{font-size:var(--t-small);line-height:1.62;color:var(--soft);margin:0 0 var(--space-4); max-width:none} .vs-ask .actions{margin:0} .pw-f{display:block;border-bottom:0;margin:0 0 .5rem} .pw-t{display:block;font-size:var(--t-body);line-height:1.4;color:var(--ink)} .pw-f:hover .pw-t{color:var(--red)} .pw-s{display:block;font-size:var(--t-small);line-height:1.55;color:var(--soft);margin-top:.3rem} .pw-list{border-top:1px solid var(--hair);margin-top:.9rem} /* Title and date on one row, the date right-aligned, so ten of them scan down two edges rather than one ragged column. */ .pw-p{display:flex;justify-content:space-between;gap:.9rem;align-items:baseline; border-bottom:1px solid var(--hair);padding:.7rem 0;font-size:var(--t-small); line-height:1.4;color:var(--ink)} .pw-pt{flex:1 1 auto} .pw-pd,.pw-fd{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em; text-transform:uppercase;color:var(--faint);white-space:nowrap;flex:0 0 auto} .pw-fd{display:block;margin-top:.4rem} .pw-p:hover{color:var(--red)} .pw-all{display:inline-block;margin-top:.9rem;font-family:var(--mono);font-size:var(--t-label); letter-spacing:.11em;text-transform:uppercase;color:var(--ink); text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:from-font} .pw-all:hover{color:var(--red)} .pw-none{font-size:var(--t-small);line-height:1.62;color:var(--soft);margin:0;max-width:none} .duo{display:grid;grid-template-columns:1fr 1fr;gap:1.7rem 2.8rem;align-content:start} /* These are blocks inside a column, not page sections, so they do not take the global section padding. It was adding 64px under the last card before the questions' own margin started, which read as a hole between two related sections. */ section.vs-blk,section.faqband{padding:0} .duo .cell{border-top:1px solid var(--hair);padding-top:.85rem} .duo .cell p:last-child{font-size:var(--t-body);line-height:1.6;margin:0;max-width:none} /* ---- the questions band ---------------------------------------------------- Full width and on ink, which is the page's one strong break: the run from the hero to the footer was otherwise unbroken white. The answers stay closed until asked for, which is what keeps nine questions scannable, and
gives that from the keyboard with no script. Red on ink fails AA for small text, so the marks here use the dark-mode tint. -------------------------------- */ /* [Partner] 1 September 2026: aligned to the What we do column rather than spanning the page, so the rail runs down beside it and has room for ten articles. */ /* [Partner] 1 September 2026: white ground. A red rule tops each section instead, which is what now separates them. */ .faqband{margin-top:2.6rem} /* [Partner] 1 September 2026: .grp joins this rule rather than resembling it. "Lawyers" and "Paralegals" name what follows, exactly as "What we do" and "Questions we are asked" do, so they are the same thing and are now set as one. They had been gray mono under a fine black rule, which is the gesture this site uses for a label inside a block, not for the head of a section. */ .vs-h,.faq-h,.grp{font-weight:400;font-size:var(--t-head);letter-spacing:-.01em; margin:0 0 1.3rem;padding-top:1.1rem;border-top:2px solid var(--red);color:var(--ink)} .qalist{border-top:1px solid var(--hair)} details.qa{border-bottom:1px solid var(--hair)} details.qa summary{list-style:none;cursor:pointer;display:grid; grid-template-columns:3rem minmax(0,1fr) 1.6rem;gap:0 1rem;align-items:start; padding:1.05rem 0;font-size:var(--t-body);line-height:1.45;color:var(--ink)} details.qa summary::-webkit-details-marker{display:none} details.qa .n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em; color:var(--red);padding-top:.34rem} details.qa .chev{justify-self:end;width:.6rem;height:.6rem;margin-top:.44rem; border-right:1.5px solid var(--red);border-bottom:1.5px solid var(--red); transform:rotate(45deg);transition:transform .18s ease} details.qa[open] .chev{transform:rotate(-135deg);margin-top:.62rem} details.qa summary:hover{color:var(--red)} /* The answer starts under the question, not under the number, and runs to the section's right edge. max-width:none because the column already sets the measure; capping it again left the answer short of the edge with nothing beside it. */ details.qa p{margin:0 0 0 4rem;padding:0 0 1.4rem;font-size:var(--t-body);line-height:1.72; color:var(--soft);max-width:none} @media(max-width:62rem){ details.qa p{margin-left:0} .vsplit{grid-template-columns:1fr;gap:2.4rem;padding-top:2.4rem} /* Placement off, so the three flow in document order: panel, work and questions, then the writing. The panel keeps its own foot back, since nothing sits under it here. */ .vsplit{grid-template-rows:none} .vs-l,.vs-w,.vs-r{grid-column:auto;grid-row:auto} .vs-l{position:static;padding-bottom:1.8rem} .duo{grid-template-columns:1fr} } /* ---- practice-area switcher ------------------------------------------------ Sits at the top of the white section and carries all six, the current one marked. It is a switcher, not a footnote: a reader who clicked the wrong area should be able to correct it without going back. ------------------------- */ .pa-switch{border-bottom:1px solid var(--hair);padding:1.5rem 0} .pa-switch ul{display:flex;flex-wrap:wrap;gap:.9rem 2rem;list-style:none;margin:0;padding:0; font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em;text-transform:uppercase} .pa-switch a{color:var(--soft);border-bottom:0} .pa-switch a:hover{color:var(--red)} .pa-switch .on{color:var(--ink);position:relative;display:inline-block} .pa-switch .on::after{content:"";position:absolute;left:0;right:0;bottom:-.5rem;height:1px; background:var(--red)} /* ---- office map ------------------------------------------------------------ A static image that opens Google Maps, not an embed. The whole block is one link, so the target is the map and the words under it rather than a hairline of text, which is easier to hit and easier to see focus on. ---------------- */ .map{display:block;margin:2rem 0 0;border-bottom:0} .map-fig{display:block;border:1px solid var(--hair)} .map-fig svg{display:block;width:100%;height:auto} /* The map is inline SVG so it follows the reader's theme. Its own tokens, because a map needs a different relationship between ground and mark than body copy does: the roads have to read as roads against the ground, not as text against a page. */ :root{--map-ground:#FFFFFF;--map-build:#F5F4F2;--map-road:#8F8C87;--map-here:#1A1A1A; /* The map palette below is NOT a brand palette extension and must not be read as one. These values color a rendering of a third-party map: a road, a building footprint, a label, the attribution line. They answer to legibility on that rendering rather than to the firm's identity, and folding them into the brand palette would put six greys into it that the brand itself never uses. Scoped 27 September 2026; the brand palette is brand-pack.md sections 1a and 14a. */ --map-here-t:#1A1A1A;--map-label:#6B6B6B;--map-attr:#8A8A8A} :root:not([data-theme="light"]){@media (prefers-color-scheme:dark){ --map-ground:#141414;--map-build:#202020;--map-road:#8F8C87;--map-here:#F2F2F2; --map-here-t:#F2F2F2;--map-label:#9A9A9A;--map-attr:#8A8A8A}} :root[data-theme="dark"]{--map-ground:#141414;--map-build:#202020;--map-road:#8F8C87; --map-here:#F2F2F2;--map-here-t:#F2F2F2;--map-label:#9A9A9A;--map-attr:#8A8A8A} .map-cta{display:inline-block;margin-top:.7rem;color:var(--red); text-decoration:underline;text-underline-offset:.16em; text-decoration-thickness:from-font;font-size:var(--t-small)} .map:hover .map-cta{color:var(--ink)} .map:hover .map-fig{border-color:var(--ctl)} /* ---- articles reader: the list on the left, one article in full on the right ------ The same markup on the section page and on every article, so the rail does not move under a reader clicking through it. The rail is sticky, so the list stays reachable from the foot of a long article without scrolling back. ---------------------------- */ .reader{padding:3.5rem 0 1rem} /* The columns are sized to what is actually in them, not stretched to fill the wrap. A `1fr` article column measured 824px against a 558px reading measure, leaving 266px of dead space that the byline rule then drew a line across. Both columns are capped and the leftover is a trailing margin rather than a void inside the column. */ /* [Partner] 31 August 2026: the rail holds its width, the gutter closes, and the article takes everything to the wrap's right edge. `space-between` had anchored both edges by opening a 160px gutter instead, which put the space between the columns rather than inside either. A fixed rail against a 1fr article anchors the same two edges with the gutter set deliberately. The measure this yields is ~78 characters, above the usual 45 to 75, which is the cost of the wider column and was accepted. */ .rd-grid{display:grid;grid-template-columns:24rem minmax(0,1fr); gap:6rem;align-items:start} /* The document puts the article first and the rail second, so a phone stacks them that way round. The desktop layout is restored by PLACEMENT, not by `order`: both are named into row 1, the rail into column 1 and the article into column 2. Placement and order look the same here and are not, because the single-column layout below 62rem resets these to `auto` and the two simply flow in document order, which is the order that is wanted there. */ .rd-rail{grid-column:1;grid-row:1} .rd-main{grid-column:2;grid-row:1} /* The same panel the practice pages use: tinted ground under a red rule, so the two rails on this site are one device rather than two that resemble each other. */ .rd-rail{position:sticky;top:calc(var(--bar-h) + 2rem); max-height:calc(100vh - var(--bar-h) - 4rem);overflow-y:auto; background:var(--g2);border-top:2px solid var(--red);padding:0 0 1.5rem} /* The heading, the standfirst, and the filter stay at the top of the rail while the list runs under them. [Partner] 6 September 2026 asked for this: on a long list the reader lost both the name of the section and the control that narrows it. top:0 rather than the bar height, because this sticks inside the rail's own scroll box and not inside the viewport. It needs the rail's own ground behind it or the list shows through as it passes underneath. The rail's top padding moved onto this block. Left on the rail, that padding scrolled away with the content and opened a 1.4rem gap above the sticky block, through which the first list item's date and practice tag were visible. Carried here, the padding travels with the block and its ground covers the gap. */ .rd-top{position:sticky;top:0;z-index:2;background:var(--g2);padding:1.4rem 0 .35rem} .rd-rail .lbl{color:var(--red)} /* The rail reserves a .9rem gutter so the marker on the article being read hangs in it. A negative margin cannot be used here: `overflow-y:auto` on the rail computes overflow-x to auto as well, and anything outside the padding box is clipped rather than drawn. */ .rd-rail .lbl{padding:0 0 1rem 1.4rem;color:var(--red)} /* On an item page the rail names its own section and says what it is, because the page above the rail carries the article's headline, not the section's. On a section page the headline and lede already say this a few hundred pixels higher, so it is not repeated. */ .rd-h{font-weight:400;font-size:var(--t-body);line-height:1.45;margin:0 0 .45rem; padding-left:1.4rem;color:var(--ink)} .rd-h a{border-bottom:0} .rd-h a:hover{color:var(--red)} .rd-blurb{font-size:var(--t-small);line-height:1.55;color:var(--soft);max-width:none; margin:0 0 1.2rem;padding:0 1.4rem 1.2rem;border-bottom:1px solid var(--hair)} .rd-filter{margin:0 0 1.5rem;padding:0 1.4rem} /* max-width:none for the same reason .lbl needed it: 26ch is a reading measure and this is a one-line instruction, so the cap wrapped it with the rail half empty beside it. */ .rd-filter label{display:block;font-size:var(--t-control);line-height:1.5;color:var(--soft); margin-bottom:.5rem;max-width:none;white-space:nowrap} .rd-sel{position:relative;max-width:20rem} .rd-sel select{appearance:none;-webkit-appearance:none;width:100%;font:inherit; font-size:var(--t-small);color:var(--ink);background:var(--g);border:1px solid var(--ctl); padding:.55rem 2rem .55rem .65rem;border-radius:0;cursor:pointer} .rd-sel select:hover{border-color:var(--red)} .rd-sel .caret{position:absolute;right:.7rem;top:50%;margin-top:-3px;width:.62rem; height:.38rem;color:var(--soft);pointer-events:none} .rd-count{margin:.55rem 0 0;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em; text-transform:uppercase;color:var(--faint);max-width:none} /* The latest item is set like the practice pages' writing block: label, title, standfirst, date. The rest stay as rows, because ten standfirsts is not a list, it is a page. */ .rd-f{display:block;border-bottom:0;padding:0 1.4rem 1.2rem;margin:0 0 .2rem} /* `display:block` on a class outranks the UA stylesheet's [hidden]{display:none}, so the filter set the attribute and the block went on rendering anyway. The list rows never showed this because they set no display of their own. */ .rd-f[hidden]{display:none} .rd-f .rd-ft{display:block;font-size:var(--t-body);line-height:1.4;color:var(--ink)} .rd-f:hover .rd-ft{color:var(--red)} .rd-f .rd-fd{display:block;font-family:var(--mono);font-size:var(--t-label); letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:.5rem} .rd-f.on{border-left:2px solid var(--red);padding-left:calc(1.4rem - 2px)} .rd-f.on .rd-ft{color:var(--red)} /* A hairline under the featured item, the way the Insights hub separates its lead from the list below it. Same device, same weight. */ .rd-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)} .rd-i{border-bottom:1px solid var(--hair);padding-left:1.4rem;padding-right:1.4rem} .rd-l{display:block;padding:.95rem 0 .9rem;border-bottom:0} .rd-t{display:block;font-size:var(--t-small);line-height:1.42;color:var(--ink)} .rd-l:hover .rd-t{color:var(--red)} .rd-m{display:block;margin-top:.4rem;font-family:var(--mono);font-size:var(--t-micro); letter-spacing:.09em;text-transform:uppercase;color:var(--faint)} .rd-facet{margin-left:.75em;color:var(--red)} /* The article being read is marked by a rule as well as by color, because color alone would carry the state (WCAG 2.2 SC 1.4.1). */ .rd-i.on{border-left:2px solid var(--red);padding-left:calc(1.4rem - 2px)} .rd-i.on .rd-t{color:var(--red)} /* The article column opens under the same red rule as the rail, on the same line, so the two columns read as one device. The 1.4rem below it is the rail's own top padding, so the crumb and the rail label sit on one baseline rather than nearly on one. */ .rd-main .art{padding:var(--space-5) 0 var(--space-4);border-top:2px solid var(--red)} /* One measure for the whole article, so no rule, border, or heading extends past the text it belongs to. The article block itself is the bound; nothing inside sets its own. */ .rd-main .art-body,.rd-main .art-sf,.rd-main .art-note,.rd-main .art h1, .rd-main .art h2{max-width:none} .rd-main .art h1{text-wrap:auto} /* No max-width and no balance: this rule sits AFTER the one that sets max-width:none, so the 24ch cap it used to carry silently won and held the title to 507px in a 704px column. Balance then evened the remaining lines down to 423. Both removed, for the same reason they were removed on the Insights hub: a title above a body that spans should span too. */ .rd-main .art h2{font-weight:375;font-size:var(--t-band);line-height:1.16; letter-spacing:-.018em;margin:var(--space-2) 0 var(--space-4)} /* Between the stacking breakpoint and a full-width desktop the rail would hold its 24rem maximum while the article absorbed every pixel lost, collapsing the measure to 51ch at 1000px. The rail gives way first, because a list of titles reads fine narrower and a line of body text does not. */ @media(max-width:75rem){ .rd-grid{grid-template-columns:18rem minmax(0,1fr);gap:4rem} } @media(max-width:62rem){ .rd-grid{grid-template-columns:1fr;gap:2.6rem} /* Back to document order: article, then rail. */ .rd-rail,.rd-main{grid-column:auto;grid-row:auto} .rd-rail{position:static;max-height:none;overflow:visible} /* The rail stops scrolling on its own down here, so the block above has no scroll box to stick inside. Left sticky it would latch onto the viewport instead and come to rest under the header bar. It stands still with the rest of the rail. */ .rd-top{position:static;padding-top:1.4rem} .rd-list{max-height:24rem;overflow-y:auto} }/* ---- one eyebrow, one mark system ------------------------------------------ The filled mark carries the name, the ringed mark carries the frame, and they always appear as a pair. Red on every surface, sized against the type rather than fixed, so the pair holds together at any breakpoint. -------------- */ .eyebrow{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;text-transform:uppercase; margin:0 0 2.2rem;max-width:none;display:flex;align-items:center;flex-wrap:wrap; gap:.4rem 2.1rem;color:var(--soft)} .eyebrow .gl{stroke:var(--red)} .eyebrow .gl .f{fill:var(--red)}.pb .eyebrow,.ins-band .eyebrow{color:#efece8} @media(max-width:56rem){.eyebrow{gap:.4rem 1.4rem}} /* ---- Insights carousels ----------------------------------------------------- Two carousels on their own band. No photograph on the card: the Firm has none, stock is barred on a published surface, and a generic image on a legal article cheapens it. The title names the reader's problem and the standfirst says whether it is answered, which is what actually earns the click. Every slide ships in the markup; the script hides all but the current one. With no JavaScript the reader still gets the newest item and a working link, and the controls stay hidden because they would do nothing. -------------------- */ .ins-band{padding:5rem 0 5.5rem;border-top:1px solid var(--hair)} /* minmax(0,1fr), not 1fr. `1fr` is minmax(auto,1fr), and `auto` floors a track at its content's min-content width. The carousel's track is a flex row of slides each at min-width:100%, so its min-content resolves large and the column refused to shrink: at a 375px viewport a 340px grid held a 653px column and the homepage scrolled sideways. min-width:0 on the item itself is the same instruction from the other direction, and both are needed because either alone leaves one of the two floors in place. */ .car-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem 3rem} .car{min-width:0} .car-view{min-width:0} @media(max-width:56rem){.car-grid{grid-template-columns:minmax(0,1fr);gap:3rem}} .car-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem; border-top:1px solid var(--ink);padding-top:.9rem;margin-bottom:1.4rem} .car-title{margin:0;font-weight:500;font-size:var(--t-subhead)} .car-title a{border-bottom:1px solid transparent} .car-title a:hover{border-bottom-color:var(--red);color:var(--red)} /* controls are hidden until the script says they work */ .car-ctl{display:none;align-items:center;gap:.35rem} .car-ready .car-ctl{display:flex} .car-ctl button{background:none;border:1px solid var(--hair);color:var(--soft); cursor:pointer;padding:0;font:inherit;display:inline-flex;align-items:center; justify-content:center;transition:border-color .15s ease,color .15s ease} .car-ctl button:hover{border-color:var(--ink);color:var(--ink)} .car-ctl button:focus-visible{outline:2px solid var(--red);outline-offset:2px} .car-prev,.car-next{width:1.75rem;height:1.75rem} .car-prev svg,.car-next svg{width:.7rem;height:.7rem} .car-view{overflow:hidden} .car-track{display:flex;list-style:none;margin:0;padding:0; transition:transform .45s cubic-bezier(.4,0,.2,1)} .car-slide{flex:0 0 100%;min-width:100%} .car-ready .car-slide:not(.on){visibility:hidden} .car-slide a{display:block;position:relative;padding:0 2.2rem .2rem 0;min-height:9.5rem} /* The card's photograph: 16:9, cropped by the build to assets/img/cards/, never scaled from the source. aspect-ratio holds the box before the lazy image arrives, so the slide does not jump as it loads. The arrow sits against the title, so its top offset is measured from the photograph's foot rather than from the card's top. */ .car-pic{display:block;aspect-ratio:16/9;overflow:hidden;margin:0 0 1.1rem;background:#242424} .car-pic img{display:block;width:100%;height:100%;object-fit:cover} /* With a photograph, the card runs to the full width of its column: no right gutter, the title and the standfirst measure the same as the photograph, and the arrow drops to its own line beneath the text instead of sitting in a gutter the text no longer leaves. [Partner] 22 September 2026. */ .car-slide a:has(.car-pic){padding-right:0} .car-slide a:has(.car-pic) .car-sf{max-width:none} .car-slide a:has(.car-pic) h4{text-wrap:auto} .car-slide a:has(.car-pic) .car-go{position:static;display:block;text-align:right;margin-top:.7rem} .car-meta{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.09em;text-transform:uppercase; color:var(--faint);margin:0 0 .7rem;max-width:none;display:flex;gap:1rem;flex-wrap:wrap} .car-sf{color:var(--soft);font-size:var(--t-small);line-height:1.6;margin:0;max-width:44ch} .car-go{position:absolute;right:.2rem;top:2.1rem;color:var(--red);font-size:var(--t-subhead); transition:transform .18s ease} .car-slide a:hover .car-go{transform:translateX(4px)} .car-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4); margin-top:var(--space-5);min-height:1rem} /* wrap, because the row is one dot per slide and at 375px it ran 29px past the viewport and nothing clipped it: the only horizontal scroll on the site, and on the homepage. Found 27 September 2026 by measuring the rendered page. */ .car-dots{display:none;gap:.45rem;flex-wrap:wrap} .car-ready .car-dots{display:flex} .car-dot{position:relative;width:1.6rem;height:2px;padding:0;border:0; background:var(--hair);cursor:pointer} /* The bar reads as 2px, which is the design, and 2px was also the whole touch target: the smallest control on the site. The target is now the invisible box around it, 24px of height for a finger to land in, and the dot itself is unchanged. */ .car-dot::after{content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px} .car-dot.on{background:var(--red)} .car-dot:focus-visible{outline:2px solid var(--red);outline-offset:3px} .car-status{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em; text-transform:uppercase;color:var(--faint);margin:0;max-width:none} .ins-band .actions{margin-top:3rem} @media(prefers-reduced-motion:reduce){ .car-track{transition:none} .car-go{transition:none} } /* ---- Insights band on the dark ground -------------------------------------- Black, so the page runs dark, white, dark, white, dark and closes on the same ground it opens on. Every rule below only restates a color: the structure is unchanged from the light version above. ------------------------------- */ .ins-band{background:var(--ink);border-top:0} .ins-band .car-head{border-top-color:rgba(255,255,255,.32)} .ins-band .car-title a{color:#fff} .ins-band .car-title a:hover{color:var(--red);border-bottom-color:var(--red)} .ins-band .car-meta{color:#b9b3ad} .ins-band .car-sf{color:#efece8} .ins-band .car-ctl button{border-color:rgba(255,255,255,.32);color:#efece8} .ins-band .car-ctl button:hover{border-color:#fff;color:#fff} .ins-band .car-dot{background:rgba(255,255,255,.32)} .ins-band .car-dot.on{background:var(--red)} .ins-band .car-status{color:#b9b3ad} .ins-band .actions{margin-top:1.9rem} .ins-band .btn-quiet{border-color:#fff;color:#fff;background:transparent} .ins-band .btn-quiet:hover{background:#fff;border-color:#fff;color:var(--ground)} .ins-band .btn-quiet:focus-visible{outline:2px solid #fff;outline-offset:3px} /* ---- practice areas index -------------------------------------------------- Deeper than the homepage cards or the page should not exist: each area carries how the problem arises and when it is worth calling{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem; border-top:1px solid var(--rule);padding:2.6rem 0 3rem}@media(max-width:56rem){ .pa-row h2,.pa-row-b{grid-column:1/13} .pa-row-b{margin-top:1.2rem} } /* A heading that exists for structure and for assistive technology, not for the eye. The sections are labeled visually by their eyebrow, which is a

, so without these the document ran h1 straight to h3 and the outline had a hole in it. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .car-slide h4{font-weight:400;font-size:var(--t-subhead);line-height:1.32;letter-spacing:-.01em; margin:0 0 .6rem;text-wrap:balance} .ins-band .car-slide h4{color:#fff} .car-slide a:hover h4{color:var(--red)} /* ---- practice page body ----------------------------------------------------- Label left, list right, on the same twelve-column grid as everything else. It was a 46ch list stranded in the left third of the page{padding:0 0 2.6rem}@media(max-width:56rem){ .pr-h,.pr-list{grid-column:1/13} .pr-list{border-top:0;padding-top:.8rem} .pr-h{margin-bottom:.4rem} } /* The question line inside a practice card on the index. The homepage cards do not carry one{font-size:var(--t-subhead);line-height:1.45;color:var(--ink);margin:0 0 .5rem; max-width:38ch;text-wrap:balance}.pb .lede{grid-column:1/7;color:#efece8;font-size:var(--t-subhead);line-height:1.62; margin:1.5rem 0 0;max-width:52ch} @media(max-width:56rem){.pb .lede{grid-column:1/13}} /* A stage that is not the full viewport: the photograph still runs to the top of the page with the header on it, but the page starts scrolling sooner. */ .stage-short{min-height:clamp(32rem,62vh,40rem)} /* An article's own page carries a shallower band than a section page: it holds only the eyebrow and the title, and the article body has to stay near the fold because this is the page search traffic lands on. The full band put the first line about 500px below it. */ /* [Partner] 31 August 2026. An article page keeps the photograph behind the logo and the navigation and nothing else, so the page still reads as part of this site while the article itself starts on white immediately. The band that carried the title was worse on both counts: the same photograph fronted all twelve pieces, and it put 378px between the reader and the first word on the page search traffic actually lands on. */ /* The band on an article or person page carries the logo and navigation and nothing else, so it used to be min-height:0 and took its height from the header inside it. When the header moved out on 6 September 2026 the band had no content left, collapsed to nothing, and the reversed wordmark's white letterforms ended up on the page's white: only the red ampersand stayed visible, on all 25 of these pages. It now takes the header's own height, so the photograph sits behind the bar exactly as it did before. */ .stage-head{min-height:var(--bar-h)} /* .hbody carries padding-bottom:clamp(3.2rem,13vh,9rem), which is right under a full viewport hero and wrong here: at 117px on a 538px band it consumed every pixel of slack, so margin-top:auto had nothing left to push with and the text began 0px below the header while 117px of empty photograph sat under it. Measured 31 August 2026. Cutting the padding hands that space back to the top, where it is wanted. */ .stage-short .hbody{padding-bottom:2.5rem} /* The header overlaps the stage by -var(--bar-h), so on a short stage the hero content has to reserve that height or it slides under the bar. Measured 6 September 2026 on the People page: at 1280px and wider the dateline's top sat at 90px against a header bottom of 91px, a 2px collision, and the eyebrow rendered across the wordmark. Below 1100px the gap was positive, which is why it looked fine at the widths first checked. box-sizing is border-box here, so this reserves space inside the existing min-height rather than making the band taller. */ .stage-short{padding-top:calc(var(--bar-h) + 1.6rem)} /* ---- practice areas index: full-width rows --------------------------------- Area on the left, the question and its insight in the middle, the terms in a column of their own. The two-column card had the terms wrapping under the prose and the question competing with the area name inside a box. ------------- */ .lr{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:start; position:relative;border-top:1px solid var(--hair);padding:1.9rem 2.2rem 2.1rem 0} .lr:first-child{border-top:1px solid var(--rule)} .lr-a{grid-column:1/4;display:flex;align-items:center;gap:.7rem; font-weight:500;font-size:var(--t-subhead);margin:0} .lr-b{grid-column:4/10} .lr-q{font-size:var(--t-subhead);line-height:1.4;margin:0 0 .45rem;max-width:42ch;color:var(--ink)} .lr-i{color:var(--soft);font-size:var(--t-small);line-height:1.55;margin:0;max-width:52ch} .lr-c{grid-column:10/13;margin:.15rem 0 0;gap:.3rem .9rem} .lr-go{position:absolute;right:.2rem;top:2rem;color:var(--red);font-size:var(--t-subhead); transition:transform .18s ease} .lr:hover .lr-a{color:var(--red)} .lr:hover .lr-go{transform:translateX(4px)} @media(max-width:56rem){ .lr-a,.lr-b,.lr-c{grid-column:1/13} .lr-b{margin-top:.6rem} .lr-c{margin-top:1rem} } /* ---- People page: person cards -------------------------------------------- Portrait, name, role, email, then the credentials as plain lines, no markers. The grid is flex and centered, not a fixed column count. With two partners in a three-column grid the pair sat left with an empty third column, which reads as a missing person rather than as a design. Centering makes any count look deliberate. Three type sizes in a card and nothing between them: .95rem for the name, .82rem for the credentials, .66rem mono for the role and the address, which are the same class of information and are now the same size. The section label sits at .7rem mono, one step above the card's mono so the heading reads as a level up. It was five near-identical values before, which is not a scale. letter-spacing puts its space AFTER the last character, so a centered line sits left of true center by that amount. Every letter-spaced centered line here carries a matching text-indent to put it back. Reported 31 August 2026; it was visible on PARTNER and PARALEGAL sitting left of the name above them. ------------- */ /* Centered flex, replaced 1 September 2026. It had two faults that the full-width red rule above the group made visible rather than caused. The cards started 136px inside the rule naming them, so the section's line and the section's content did not share a left edge, which they do on every other page. And a row that does not fill centers what is left: at 1180px both groups orphaned one card in the middle of an empty row, aligned to nothing. A grid puts every card in a column, whether the row is full or not. */ .pc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:2.6rem 2.4rem} .pc{max-width:none;text-align:center} .pc img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; background:var(--g2)} .pc-noimg{display:block;width:100%;aspect-ratio:4/5;background:var(--g2)} .pc h3{margin:1rem 0 0;font-weight:500;font-size:var(--t-body);line-height:1.3} .pc .role{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.11em; text-indent:.11em;text-transform:uppercase;color:var(--soft);margin:.4rem 0 0} .pc-m{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.02em;text-indent:.02em; margin:.45rem 0 0;max-width:none;word-break:break-word;line-height:1.5} .pc-m a{color:var(--red)} .pc-m a:hover{color:var(--ink)} .pc-d{margin-top:.9rem} .pc-d p{margin:0 0 .55rem;font-size:var(--t-control);line-height:1.45;color:var(--soft);max-width:none} .pc-cr span{display:block} .pc-d p:last-child{margin-bottom:0} .pc-none{color:var(--faint);font-style:italic} /* The answer block. Set larger than body copy and on the tinted ground, because it is the one paragraph a reader in a hurry should be able to find without reading. It is also what an AI answer engine lifts, which is the same job done for a different reader. */ .art-answer{font-size:var(--t-subhead);line-height:1.62;color:var(--ink);max-width:none; margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);background:var(--g2);border-left:2px solid var(--red)} .art-body a{color:var(--red);text-decoration:underline;text-underline-offset:.16em; text-decoration-thickness:from-font} .art-body a:hover{color:var(--ink)} /* Article furniture that only a legal article needs: a subheading, a quoted provision, and a footnote. The block quotation carries a red rule on its leading edge because it is the one place on the site where the words are NOT the Firm's, and that distinction is the one the whole house style turns on. */ /* Scoped through .rd-main because `.rd-main .art h2` styles an ARTICLE TITLE on a section page, and it outranks a bare `.art-body h2`. Body subheadings were rendering at 25.6px against a 27.2px headline: nearly the same size, so the hierarchy read as two titles. [Partner] 1 September 2026. The fourth instance of a longer selector quietly winning. */ .rd-main .art .art-body h2{font-weight:500;font-size:var(--t-head);line-height:1.3; letter-spacing:-.008em;margin:var(--space-7) 0 var(--space-3);max-width:none;color:var(--ink)} .rd-main .art .art-body h2:first-child{margin-top:0} .art-body blockquote{margin:var(--space-5) 0;padding:var(--space-1) 0 var(--space-1) var(--space-5); border-left:2px solid var(--red)} .art-body blockquote p{font-size:var(--t-subhead);line-height:1.66;color:var(--soft);margin:0;max-width:none} /* Consecutive quoted strings are one quotation, one paragraph each, so an enumerated provision reads as a list instead of a run-on. See build.py _article_html. */ .art-body blockquote p + p{margin-top:var(--space-2)} /* A table in an article body: the instrument's own table, not prose. See build.py. */ .art-tw{overflow-x:auto;margin:var(--space-5) 0} .art-t{border-collapse:collapse;width:100%;font-size:var(--t-body);line-height:1.5} .art-t th,.art-t td{text-align:left;padding:var(--space-2) var(--space-4) var(--space-2) 0;border-bottom:1px solid var(--rule);vertical-align:top} .art-t th{font-weight:600;color:var(--ink);white-space:nowrap} .art-t td{color:var(--soft)} /* A checklist in the Firm's own voice, not a quotation. See build.py _article_body. */ .art-body ul.art-list{margin:var(--space-5) 0;padding:0 0 0 var(--space-5);max-width:none} .art-body ul.art-list li{font-size:var(--t-subhead);line-height:1.6;color:var(--soft);margin:0 0 var(--space-2); padding-left:var(--space-1)} .art-body ul.art-list li::marker{color:var(--red)} .art-body ul.art-list li:last-child{margin-bottom:0} /* A note cited more than once carries one arrow per citation, lettered, so the reader returns to the citation they actually left. The letter rides the arrow rather than sitting beside it, so the run of them reads as one control each. */ .fn-bl{font-size:.75em;line-height:0;padding-left:.08em} /* A run of six arrows inherits the .3em that separates one arrow from the note text, which left 4.2px between boxes 20px wide: centers 24.7px apart, which is the target spacing exception passed by a fraction. Adjacent arrows get their own wider gap, so a note cited six times reads as six controls rather than one smear of red. */ .fn-i a.fn-back + a.fn-back{margin-left:.55em} .fn-ref{font-size:.7em;line-height:0} .fn-ref a{color:var(--red);border-bottom:0;padding:0 .1em} .fn-ref a:hover{border-bottom:1px solid var(--red)} .fn{margin:var(--space-8) 0 0;padding-top:var(--space-4);border-top:1px solid var(--rule)} .rd-main .art .fn-h{font-weight:400;font-size:var(--t-body);letter-spacing:0;margin:0 0 var(--space-3); padding-top:0;border-top:0;color:var(--ink)} .fn-list{margin:0;padding-left:var(--space-4);max-width:none} .fn-i{font-size:var(--t-small);line-height:1.62;color:var(--soft);margin:0 0 var(--space-2); max-width:none} /* The back-arrow is underlined like any other inline link. unstyled_inline_links() is right to flag it: it sits inside a list item of running text, and a reader who cannot see it is a link cannot use it. An arrow is not self-evidently clickable. */ .fn-i a{color:var(--red);margin-left:.3em;text-decoration:underline; text-underline-offset:.16em;text-decoration-thickness:from-font} .art-role{color:var(--faint)} .art-by a{color:var(--red);text-decoration:underline;text-underline-offset:.16em; text-decoration-thickness:from-font} .art-by a:hover{color:var(--ink)} /* ---- individual person pages ------------------------------------------------ The card on the People page is ONE link around the portrait, the name, and the role. Two adjacent anchors to the same destination is a duplicate stop for anyone tabbing through, so the portrait sits inside the anchor rather than beside it. The email stays outside: a mailto nested in a link is not valid, and reading about someone and writing to them are different acts. */ .pc-lnk{display:block;border-bottom:0;color:inherit} .pc-lnk:hover h3{color:var(--red)} .pc-lnk:hover img{opacity:.88} .pc-lnk img{transition:opacity .18s ease} .pc-lnk:focus-visible{outline:2px solid var(--red);outline-offset:4px} /* The rail groups its people the way the page does. The label is the site's mono label, red, under the same hairline the list rows carry. */ /* [Partner] 1 September 2026: the rail holds three things that must never move, the heading, the blurb, and each group's label, and two that scroll, the two lists. The whole rail scrolling took the labels with it, so a reader part way down could not tell whether they were looking at lawyers or paralegals. Flex, not sticky. A sticky label inside one scroller still sits over its own list and overlaps the row beneath it; two independent scrollers put each label outside the box that moves. min-height:0 on both is what lets a flex child actually scroll rather than growing to fit its content and pushing the rail past the viewport. overflow-y:auto computes overflow-x to auto with it, so anything outside the padding box is clipped. That is why the marker on the person being read is a border INSIDE the row, paid for out of its own padding, rather than a negative margin. */ /* [Partner] 6 September 2026: the people rail does not scroll and shows every name. It is the one rail on the site whose list has a known, small, and slowly changing length, so the machinery the Insights rail needs is cost without benefit here. That machinery has to come off in one piece rather than by removing the scrollbar alone. The inherited .rd-rail is sticky with a max-height of the viewport and its own overflow; take away only overflow-y and the max-height silently clips the last names instead of scrolling to them, which is worse than the scrollbar it replaced. So this overrides position, max-height, and overflow together, and the rail then takes its natural height and moves with the page. Flex goes with it. Two scrolling children needed min-height:0 and a shrink factor to divide a fixed box between them; nothing is dividing anything now, so both lists are plain blocks at their own height. */ .pp-rail{position:static;max-height:none;overflow:visible;padding-bottom:0} .pp-g{padding:1.3rem 1.4rem .5rem;border-bottom:1px solid var(--hair)} .pp-g span{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em; text-transform:uppercase;color:var(--red)} /* The stacked layout caps every .rd-list at 24rem with its own scrollbar, which is right for a list of articles and wrong here: it would put the scroll back below 62rem after it had been taken out above it. Two classes outrank the one in that media query. */ .pp-grp .rd-list{border-top:0;max-height:none;overflow:visible} /* The portrait floats and everything after it runs past. A two-column grid put the portrait beside a three-line credentials block and left the rest of that row empty, so the profile opened on a 200px band of nothing before its first sentence. The float sits in the article itself, not in a wrapper. Wrapping it and clearing the wrapper contains the float, which is the whole point of a clearfix and was exactly what stopped the prose reaching the space beside it. Only .pp-blk clears, so the practice areas start on a clean line. overflow:hidden on the facts block makes it a formatting context, so the credentials sit as a tidy block beside the portrait rather than wrapping under it mid-list. */ .pp-shot{float:left;width:15rem;height:auto;aspect-ratio:4/5;object-fit:cover; background:var(--g2);margin:0 2.2rem 1.4rem 0} .pp-facts{overflow:hidden;margin-bottom:1.6rem} .pp-facts .pc-cr{text-align:left;font-size:var(--t-small);line-height:1.5; color:var(--soft);margin:0 0 .7rem;max-width:none} .pp-facts .pc-cr span{display:block} /* The same red rule that opens every other section on this site, at the size the block deserves: this one heads a column inside a page, not the page. Scoped through .rd-main because `.rd-main .art h2` is two classes and a tag and outranks a bare `.pp-h`. It rendered at 2.2rem beside 15px credentials, which is the third time on this site a rule lost to a longer selector and looked like a decision rather than a collision. */ .rd-main .art .pp-h{font-weight:400;font-size:var(--t-body);letter-spacing:0;margin:0 0 var(--space-4); padding-top:var(--space-4);border-top:2px solid var(--red);color:var(--ink)} .pp-by{margin:0 0 1.8rem;padding-bottom:1.4rem;border-bottom:1px solid var(--rule)} .pp-by .pc-m{text-align:left;margin:0;font-size:var(--t-label)} .pp-lede{font-size:var(--t-subhead);line-height:1.65;color:var(--ink);max-width:none; margin:0 0 1.5rem} .pp-blk{padding:0;margin-top:2.6rem;clear:both} .rd-main .art .pp-blk .vs-h{font-size:var(--t-body);letter-spacing:0} /* One line, comma separated, in the mono face. [Partner] 6 September 2026. It was a stacked list of five one-word links, which read as a second menu beside the real navigation. Mono at the label size makes it read as a note rather than a nav. */ /* max-width:none because the global `p` rule caps every paragraph at 46ch, which is 420px here and forced this onto two lines the moment it stopped being a `ul`. */ /* max-width:none because the global `p` rule caps every paragraph at 46ch, which is 420px here and forced this onto two lines the moment it stopped being a `ul`. --t-label rather than a size picked to fit. At --t-body the longest of these lines, six areas plus the label at 99 characters, needs 903px in a 704px column, and the size that just fits is about 11.5px. That is not a step in the scale, and the scale exists precisely to stop sizes being chosen one at a time to solve one problem. The label step is the mono size this site already uses for metadata lines, it fits with room to spare, and it is what this line is. Below about 700px of column the line wraps, which is every phone, and that is correct rather than a failure. */ .pp-focus{margin:0;padding:0;max-width:none;font-family:var(--mono);font-size:var(--t-label); letter-spacing:.04em;line-height:1.7;color:var(--ink)} .pp-focus a{font-family:var(--mono);font-size:inherit;letter-spacing:0; color:var(--ink);border-bottom:0} .pp-focus .pp-focus-l{font-family:var(--mono);font-size:inherit;color:var(--soft)} .pp-focus a:hover{color:var(--red)} /* A 15rem portrait floated inside a 340px column leaves a 5rem gutter for text, which is not a column. Below this width it stops floating and stacks. */ @media(max-width:56rem){.pp-shot{float:none;width:100%;max-width:15rem;margin:0 0 1.4rem}} /* The gap belongs ABOVE the rule, not below it. The old heading bought its separation with 3rem of padding under a border, which pushed the words away from the line naming them. Moving it up cost the FIRST group its air: it inherited margin:0 from the shared rule and its red line landed flush on the hero's bottom edge, 0px, where every other page on the site opens between 24 and 38px below the photograph. */ .grp{margin-top:2rem} section + section .grp{margin-top:3.4rem} @media(max-width:56rem){.pc-grid{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}} /* ---- Insights hub: two columns, latest emphasized -------------------------- Articles left, Firm News right. The latest item is set large with a longer preview; the earlier ones give title left and date right, which makes a second vertical edge so titles scan down one side and dates down the other. ---- */ .ic-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.2rem;margin-top:2.4rem} .ic-h{margin:0 0 1.3rem;font-weight:400;font-size:var(--t-head);letter-spacing:-.01em; padding-top:1.1rem;border-top:2px solid var(--red)} .ic-h a:hover{color:var(--red)} .ic-lbl{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-indent:.13em; text-transform:uppercase;color:var(--red);margin:0 0 .7rem;max-width:none} .ic-f{display:block;padding:.85rem 0 1.9rem;border-top:1px solid var(--hair);border-bottom:0} /* The latest item's photograph, 16:9 at the column's width, above the title. Both columns carry one, so the fixed heights below still keep EARLIER level. */ .ic-pic{display:block;aspect-ratio:16/9;overflow:hidden;margin:0 0 1rem;background:var(--hair)} .ic-pic img{display:block;width:100%;height:100%;object-fit:cover} /* The title is fixed at two lines for the same reason the preview is fixed at four: without it a one-line title on one side and a two-line title on the other pushes everything below out of step, and EARLIER lands at different heights. Measured 31 August 2026 at 27px apart before this. */ /* No text-wrap:balance here. Balance evens the line lengths, which is right for a display headline standing alone and wrong for a title sitting above a preview that runs the full column: it held the longest line to 367px inside 566px, so the title read as inset while everything under it spanned. Balance stays on the page headlines, where nothing sits beside them to be out of step with. */ .ic-f h3{font-weight:400;font-size:var(--t-head);line-height:1.28;letter-spacing:-.012em; margin:0; display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;min-height:calc(2 * 1.28 * 1.3rem)} /* Fixed at three lines so the two columns align: EARLIER and the list beneath it start at the same height on both sides regardless of how long either preview runs. min-height reserves the space when the text is short, line-clamp cuts it when it is long. It was four lines while the preview was capped at 46ch; removing that cap on 1 September 2026 widened the measure, so the same text now runs shorter and the reserved height came down with it. The character limit in build.py is tuned so the clamp is a backstop rather than the usual case, because a clamp ends mid-sentence and the sentence-boundary cut does not. Keep PREVIEW_LINES in build.py and this rule in step. */ .ic-sf{color:var(--soft);font-size:var(--t-small);line-height:1.62;margin:.7rem 0 0;max-width:none; display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;min-height:calc(3 * 1.62 * .9rem)} .ic-fd{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.09em;text-indent:.09em; text-transform:uppercase;color:var(--faint);margin:.9rem 0 0;max-width:none} .ic-f:hover h3{color:var(--red)} /* The same label, rule, content order the featured item uses above it, so both blocks in the column are built the same way rather than one having a rule and one not. */ .ic-list{display:grid;gap:1rem;border-top:1px solid var(--hair);padding-top:.85rem} .ic-p{display:grid;grid-template-columns:1fr auto;gap:1.2rem;align-items:baseline} .ic-pt{font-size:var(--t-body);line-height:1.4;color:var(--ink)} .ic-pd{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase; color:var(--faint);white-space:nowrap} .ic-p:hover .ic-pt{color:var(--red)} @media(max-width:56rem){.ic-grid{grid-template-columns:1fr;gap:2.6rem}} /* Contact page section headings, matching the Insights column headings so the two pages share one treatment for "this is a block of related content". */ /* [Partner] 1 September 2026: the contact page joins the site's one device. It had been underlining its heads with a fine black rule, which is the opposite gesture from every other section on the site: a practice page, the reader rail, and the article column all OPEN under a 2px red rule. Four sections, four red rules, and the two columns start on one line because both open with one. */ .c-h{margin:0 0 1.3rem;font-weight:500;font-size:var(--t-subhead);padding-top:1.1rem; border-top:2px solid var(--red)} .contact-grid h2.c-h + p{margin-top:0} .contact-grid > div > .c-h:not(:first-child){margin-top:2.9rem} /* ------------------------------------------------------------------ privacy dialog The privacy notice opened over the page. [Partner] 7 September 2026. The markup is built by assets/privacy.js and the notice text is fetched from /privacy/, so nothing here has a counterpart in the HTML the build writes.

rather than a div with role="dialog", because showModal() gives the focus trap, the inert background, and the Escape handling natively. Escape is refused in script while the gate is closed; everything else is the browser's own. */ /* A closed is hidden by the UA sheet, and an author rule beats the UA sheet whatever the specificity says, so `display:flex` on .pv un-hid it and the whole notice rendered inline at the end of the body, under the footer. The display belongs on the open state only. The same trap as .rd-f[hidden] a few hundred lines above: an author rule quietly overriding a default that was doing real work. */ .pv:not([open]){display:none} /* No rule on the box. [Partner] 7 September 2026. It carried the red top border the rails and article columns use, which reads as a section marker on a page and as decoration on a panel floating over one. The shadow and the backdrop already separate it from the page. */ .pv{width:min(38rem,calc(100vw - 2.5rem));max-height:min(34rem,calc(100vh - 4rem)); padding:0;border:0;background:var(--g);color:var(--ink); box-shadow:0 2rem 5rem rgba(0,0,0,.34);overflow:hidden} .pv[open]{display:flex;flex-direction:column} .pv::backdrop{background:rgba(14,14,14,.72)} /* The panel scrolls, not the dialog. The footer has to stay put: it carries the control the reader is scrolling to earn, and a footer that scrolled away with the text would hide the button at the exact moment it appeared. */ /* The dialog is deliberately smaller than a reading column and set smaller than the page. [Partner] 7 September 2026. It interrupts somebody who came for something else, so it asks for as little of the screen as it can while staying legible. Every size below is stated here rather than inherited, because .prose is set for a full page column. */ .pv-panel{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1.4rem 1.6rem 1.1rem; overscroll-behavior:contain;font-size:var(--t-control);line-height:1.62} .pv-panel:focus{outline:0} .pv-panel:focus-visible{outline:2px solid var(--red);outline-offset:-4px} .pv h2{font-weight:400;font-size:var(--t-head);line-height:1.2;letter-spacing:-.012em; margin:.35rem 0 .8rem;max-width:none} .pv .pv-lede{font-size:var(--t-small);line-height:1.6;color:var(--soft);margin:0 0 1.2rem; max-width:none} .pv .prose h2{font-size:var(--t-body);font-weight:500;letter-spacing:0;margin:1.4rem 0 .5rem} .pv-body p,.pv-body li,.pv-body address{font-size:inherit;line-height:inherit} .pv-body li{margin-bottom:.55rem} .pv .lbl{font-size:var(--t-micro)} .pv-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end; padding:var(--space-3) var(--space-5);border-top:1px solid var(--hair);background:var(--g2)} .pv-close{flex:0 0 auto;font-size:var(--t-micro);padding:.6rem 1.1rem} /* The notice is set for a full page column, where 34rem is the reading measure and the column is the width of the text. Inside the dialog the panel is the measure, so the caps inherited from .prose held the body to about half the panel and left the rest empty. */ .pv-body,.pv-body p,.pv-body ul,.pv-body ol,.pv-body li,.pv-body h2, .pv-body address{max-width:none} /* showModal() stops the background scrolling in most engines and not in all of them, and on iOS the page behind a modal still rubber-bands. One class on the root settles it everywhere. */ .pv-lock,.pv-lock body{overflow:hidden} @media(max-width:40rem){ .pv{width:100vw;max-width:100vw;max-height:100vh;height:100vh;border-radius:0} .pv-panel{padding:1.3rem 1.2rem 1rem} .pv-foot{padding:var(--space-3) var(--space-4)} .pv-close{width:100%} } /* The dialog animates in, unless the reader has asked the system not to animate. */ @media(prefers-reduced-motion:no-preference){ .pv[open]{animation:pv-in .22s ease-out} @keyframes pv-in{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}} } /* ---- collapsed navigation on a narrow phone ---- */ /* [Partner] 1 September 2026 took Home out of the row and tightened the gap, and that decision holds from 393px up: measured on the rendered page 27 September 2026 by walking the widths with the collapse forced off, one row at 393px and above, two at 390px and below. The breakpoint is 24.5rem, which is 392px, so it takes over exactly where the row stops fitting and nowhere earlier: 393px is an iPhone 15 and it keeps the visible row. Below that it cannot hold at any gap, the four labels alone being 302px against a wrap of 340px at 375px and 285px at 320px, and the header grew from 106px to 148px when the row became two. A first attempt put this at 25rem and collapsed three widths that did not need it, which is why the threshold is measured here rather than assumed. Appended at the end of the file deliberately: these rules have to win over the base .nav and over the 56rem block, and doing that by order rather than by piling on selectors is what keeps the specificity honest. Nothing a phone can reach changes. The dropdowns were always hover and focus-within, so a tap on Practice Areas has always gone to the hub page rather than opening a menu. */ .nav-toggle{display:none} @media(max-width:24.5rem){ .head-in{position:relative} .nav-toggle{display:inline-flex;align-items:center;justify-content:center; position:absolute;right:0;top:1.15rem;width:44px;height:44px; padding:0;border:0;background:none;color:inherit;cursor:pointer} .nav-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px} .nav-bars{position:relative;display:block;width:18px;height:1px;background:currentColor} .nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0;width:18px; height:1px;background:currentColor;transition:transform .18s ease} .nav-bars::before{top:-5px} .nav-bars::after{top:5px} .site-head.nav-open .nav-bars{background:transparent} .site-head.nav-open .nav-bars::before{transform:translateY(5px) rotate(45deg)} .site-head.nav-open .nav-bars::after{transform:translateY(-5px) rotate(-45deg)} .nav{display:none} .site-head.nav-open .nav{display:flex;flex-direction:column;gap:0;width:100%; padding-bottom:.5rem} .site-head.nav-open .nav>li>a{display:block;padding:.68rem 0;border-bottom:0} .site-head.nav-open .menu{display:none} /* The caret promises an expansion that never happens here. The dropdowns are hover and focus-within, so on touch these four have always been plain destinations, and stacked in a panel the mark reads as an invitation rather than the decoration it was in a row. It stays on desktop, where hover makes it true. */ .site-head.nav-open .nav .caret{display:none} } /* ---- the wordmark on a header that inverts with the theme ---- */ /* A page without a photographic header takes `var(--g)`, which is #FFFFFF in light and #1A1A1A in dark, and it carries BB_Wordmark_2Color.svg, whose letterforms are a hard-coded fill="#000000". That is 21.00:1 in light and 1.21:1 in dark, measured 27 September 2026 with contrast.py's own linearization. In dark the Firm's name read as a floating red ampersand, the #C43443 being the only part with any contrast at 3.25:1, while the navigation beside it sat at 15.55:1. It affected /privacy, /404, and /contact/thank-you; the other 36 pages were never wrong, because a photographic header always takes --ground, which is dark in both themes, and already selects the reversed artwork. The color is baked into the SVG, so theme_contrast cannot see it: that check resolves painted pairs in these theme blocks and this is a file. It is what wordmark_on_dark in build.py now measures. Both triggers, not just the media query. Nothing sets data-theme today, so the four rules keyed to it are a hook nothing pulls, but leaving it out would mean the swap silently failed on the day something did. */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .site-head:not(.over-stage) .brand img{ content:url("img/BB_Wordmark_Reversed-2Color.svg")} } :root[data-theme="dark"] .site-head:not(.over-stage) .brand img{ content:url("img/BB_Wordmark_Reversed-2Color.svg")}