/* privatecounsel site.css — dispatch 013 (/advisors + rebuilt /domestication + the MOBILE SYSTEM). FULL REPLACEMENT of the live file: §1-§18 carried verbatim from the served 2026-09-02 state (V1-V7 punchlist included), §19-§21 added this round. Base provenance: dispatch 012 (concept 08 base, seven ruled modifications + the cyan accent ruling). FULL REPLACEMENT of the live site.css: supersedes the 2026-08-28 file and the 2026-08-29 interim v2 (§9v-§15v) in their entirety. Contract §2.3: selectors compose ONLY body hooks (site-privatecounsel, page-type-*, page-*), component root hooks (c-*), variant-* modifiers, and bare element types. No framework-internal classnames. No @import. Framework is @layer framework; these unlayered rules win (ENG-221). ACCENT (RULED 2026-09-01, supersedes dispatch 012 finding 5): illustration cyan #00D4FF, register-native. Discipline held here: exactly FOUR instances per page, all non-text — (1) the eyebrow rule above the hero / split-hero eyebrow, (2) the press-band label tick, (3) the portrait name-chip top edge, (4) the CTA-band headline rule. The services directory deliberately carries NO accent: its illustrations already hold the cyan. Asset URLs are relative ("assets/…") for the handoff previews; cps-port.py substitutes the content-hashed /storage/ paths at import (precedent: SLATE_TEXTURE_HASH, 2026-08-28). */ /* ── §1 Ruled heading weight and spacing; font family follows site tokens (ENG-313) ── */ .site-privatecounsel h1, .site-privatecounsel h2, .site-privatecounsel h3 { letter-spacing: 0; font-weight: 700; } /* ── §2 Warm parchment site ground (F29, now part of the ruled 08 base) ── */ .site-privatecounsel { background: oklch(0.985 0.005 95.3); } /* ── §3 Left-aligned hero (carried) ── */ .site-privatecounsel .c-hero { text-align: left; } .site-privatecounsel .c-hero h1, .site-privatecounsel .c-hero p { margin-left: 0; } .site-privatecounsel .c-hero div { justify-content: flex-start; } /* ── §4 Slate texture: /plans/general-counsel only (home leaves the dark hero with the 08 base) ── */ .site-privatecounsel.page-plans-general-counsel .c-hero { background-color: var(--dark-hero); background-image: linear-gradient(100deg, rgba(17, 42, 75, 0.96) 0%, rgba(17, 42, 75, 0.84) 50%, rgba(17, 42, 75, 0.55) 100%), url("/storage/sites/privatecounsel/assets/52981226517ae020.png"); background-size: cover; background-position: center; } /* ── §5 Uppercase letterspaced nav labels (carried; F19 still asks the framework to own this) ── */ .site-privatecounsel .c-header-nav nav > a, .site-privatecounsel .c-header-nav nav > div > span, .site-privatecounsel .c-header-nav div > div > a:only-child { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; border-top: 2px solid transparent; padding-top: 1px; /* optical centering, measured 2026-08-29 */ } /* ── §5b PRE-HEADER BAND (app PR #745: the generic preHeader prop on header-nav). A darkened parchment strip above the header, warm hairline below, sitting on the same plane as the chrome. Structure is generic (start/end item lists) so the appearance is decided entirely here; items are addressed by their data-item name, never by index. NO CYAN HERE: the accent ruling allots four non-text instances per page and all four are already spent (§8 eyebrow, §9 press tick, §12 chip edge, §16 CTA rule). A fifth would break the discipline the ruling exists to hold. ── */ .site-privatecounsel .c-pre-header { background: oklch(0.965 0.007 95); border-bottom: 1px solid oklch(0.92 0.01 95); font-size: 0.78rem; line-height: 1; } .site-privatecounsel .c-pre-header > div { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 2.25rem; } .site-privatecounsel .c-pre-header > div > div { display: flex; align-items: center; gap: 1.25rem; min-width: 0; } .site-privatecounsel .c-pre-header span { color: var(--muted-foreground); letter-spacing: 0.01em; } .site-privatecounsel .c-pre-header a { color: var(--foreground); text-decoration: none; font-weight: 600; letter-spacing: 0.02em; } .site-privatecounsel .c-pre-header a:hover { color: #112A4B; text-decoration: underline; text-underline-offset: 3px; } .site-privatecounsel .c-pre-header a:focus-visible { outline: 2px solid #112A4B; outline-offset: 2px; } /* V8 (2026-09-02, Jeramie): a telephone glyph before the number. Inline data-URI SVG on the existing data-item hook, currentColor-matched to the link (navy at 1.6 stroke, the §14 icon pattern); sized to the band's type so it reads as a mark, not an image. */ .site-privatecounsel .c-pre-header a[data-item="phone"]::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.4em; vertical-align: -0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain; } /* V9 (2026-09-02, Jeramie): Contact and Sign in take icons matching the phone's. Same construction as V8 — an inline data-URI SVG on the item's own data-item hook, drawn at the same 24-viewBox with the same navy and the same stroke weight, sized to the band's type. The set is one family: handset, envelope, door-with-arrow. Addressed by NAME, never by index, so re-ordering the band (as this ruling just did — phone, contact, sign in) moves the icons with their items instead of stranding them. */ .site-privatecounsel .c-pre-header a[data-item="contact"]::before, .site-privatecounsel .c-pre-header a[data-item="sign-in"]::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.4em; vertical-align: -0.1em; background-repeat: no-repeat; background-position: center; background-size: contain; } .site-privatecounsel .c-pre-header a[data-item="contact"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } .site-privatecounsel .c-pre-header a[data-item="sign-in"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112A4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E"); } /* The phone is the reason the band exists: it stays, and it stays tappable, at every width. Below 900px the qualifier goes and the number centres, so the band never wraps to two lines or shrinks the tap target. 44px is the platform minimum for a touch target. */ @media (max-width: 900px) { .site-privatecounsel .c-pre-header > div { justify-content: center; } .site-privatecounsel .c-pre-header > div > div:first-child:not(:last-child) { display: none; } .site-privatecounsel .c-pre-header a[data-item="phone"] { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; } } /* ── §6 LIGHT CHROME HEADER (mod 1/2; replaces the navy §10v family in full). The 2026-08-29 incident rule: every state derived, none inherited blind. Ground = site ground; hairline is the parchment's own hue darkened (F35-class derived tint, not a palette addition). Logo swaps to the published 1a lockup in _site.json (asset ref). ── */ .site-privatecounsel .c-header-nav { background: oklch(0.985 0.005 95.3); border-bottom: 1px solid oklch(0.92 0.01 95); /* Active-page underline: the framework resolves border-bottom-color: var(--primary) on the active link. Token --primary = #112A4B, which READS on parchment — the navy-header-era override (--primary: #96BAE9) is REMOVED, and the value is restated here so the underline colour is declared, not inherited by accident. */ --primary: #112A4B; } /* base label state */ .site-privatecounsel .c-header-nav nav > a, .site-privatecounsel .c-header-nav nav > div > span { color: var(--foreground); } /* hover + dropdown-open label: navy ink on a darkened-parchment chip */ .site-privatecounsel .c-header-nav nav > a:hover, .site-privatecounsel .c-header-nav nav > div:hover > span, .site-privatecounsel .c-header-nav nav > div:focus-within > span { background: oklch(0.955 0.008 95); color: #112A4B; } /* focus-visible: navy ring (the framework's --accent-brand ring is too pale on parchment) */ .site-privatecounsel .c-header-nav a:focus-visible { outline: 2px solid #112A4B; outline-offset: 2px; } /* dropdown panel (mod 1: the rich pattern stays — bold label + description + tinted hover row). States restated explicitly so the 2026-08-29 white-on-white defect class stays impossible. */ .site-privatecounsel .c-header-nav nav > div a { color: var(--foreground); } .site-privatecounsel .c-header-nav nav > div a b { color: var(--foreground); } .site-privatecounsel .c-header-nav nav > div a small { color: var(--muted-foreground); } .site-privatecounsel .c-header-nav nav > div a:hover { background: var(--muted); } .site-privatecounsel .c-header-nav nav > div a:hover b { color: #112A4B; } /* sign-in (outlined, ENG-256): navy outline on parchment; filled navy on hover; pressed = held. V1 (2026-09-02, Jeramie): the framework ships this link with border-width 2px 0 (the nav underline mechanism), so the "outline" was two invisible edges and it read as plain text. The full box is declared here, matched to the site's own outlined button register measured on the hero CTA: 1px solid navy, 0.55rem/1.15rem padding, square, uppercase letterspaced. ENG-281 AC-L4 (2026-09-07, Product AI): preserve that footprint while compensating the trailing letter-space and font-leading asymmetry at this owning, unlayered site rule. The locked probe measured the declarations below at dx=0.000/dy=0.000 with the real font and DOM. */ .site-privatecounsel .c-header-nav div > div > a:only-child { border: 1px solid #112A4B; padding: calc(0.55rem + 0.8125px) 1.15rem calc(0.55rem - 0.8125px); padding-inline-start: calc(1.15rem + 0.08em); line-height: 1.3; color: #112A4B; } .site-privatecounsel .c-header-nav div > div > a:only-child:hover { background: #112A4B; color: #fff; } .site-privatecounsel .c-header-nav div > div > a:only-child:active { background: #0C1F38; border-color: #0C1F38; color: #fff; } /* V6 (2026-09-08, Jeramie: "buttons that appear in the body are not properly spaced compared to the For Professionals button at the top. There isn't enough padding/margin between the button text and the button outline"). MEASURED before rewriting, per the V1 generalisation directly above. Both controls declare the SAME box (0.55rem/1.15rem, 1px border) and rendered 7.4px apart. The framework sets `text-box: cap alphabetic` on its button class; nothing sets it on the header control, which this file styles through a structural selector that never picks the class up. The trim collapses the line box to the cap height, so the body button measured 9.2 + 17.6 + 2 = 28.8px against the header control's 16.64 + 17.6 + 2 = 36.24px. Same declaration, two boxes, and only ~4px of optical space above the cap where the header control has ~13.5px. This is the V1 failure exactly: the declaration was right and the inherited geometry was eating it. The register is ONE button, so the body control takes the header control's recipe: trim released, 1.3 line-height, and the same ENG-281 AC-L4 optical split (0.8125px moved from the bottom pad to the top, compensating the font's leading asymmetry). Probed on the live render before writing: both compute to 36.23px, delta 0.00. Scoped to this SITE, not the framework, and deliberately: `text-box: cap alphabetic` is the framework's default for every CPS implementation, and lexomatic.com has not asked for 36px buttons. Reached the way every other control in this file is reached, from a promoted c- root by structure, because the framework's own classnames are not a contract (ENG-188 D2/D4). If the trim's interaction with a 0.55rem pad is later judged wrong for every site, that is a presentation-lane change and this rule retires with it. */ .site-privatecounsel .c-hero div > a, .site-privatecounsel .c-cta div > div > a { text-box: normal; line-height: 1.3; padding: calc(0.55rem + 0.8125px) 1.15rem calc(0.55rem - 0.8125px); padding-inline-start: calc(1.15rem + 0.08em); } /* ── §7 Form embed: square card + stable hero floor (carried; F18 still open) ── */ .site-privatecounsel .c-form-embed div { border-radius: 0; } .site-privatecounsel .c-form-embed { min-height: 48rem; } /* V3 (2026-09-02, Jeramie): the split hero's two columns both start at the band's top edge, so the form card floated level with the EYEBROW and left a void beneath it. The form column is pushed down to start level with the H1 instead. 3.94rem is the measured distance from the eyebrow's top to the H1's top on the live render (63px: the 2px accent rule + its 1.1rem margin + the eyebrow line + its 1.25rem margin), stable across the four landing pages because every eyebrow is one line at desktop widths. Released below 900px in §18, where the columns stack and the same offset would only add dead space above the form. Applied to /contact too, though he named the landing pages: it is the same component with the same eyebrow-height defect (measured -43px there before this rule), and fixing one instance of a shared defect while leaving its sibling is how a site drifts out of alignment. */ .site-privatecounsel.page-type-landing .c-form-embed > div > div > div:nth-child(2) { padding-top: 3.94rem; } /* /contact carries no cyan eyebrow rule (that device is landing-only), so its eyebrow block is 2.69rem tall, not 3.94rem. Measured on the live render rather than assumed shared: the first pass shipped the landing value here and left the card 20px low. */ .site-privatecounsel.page-type-contact .c-form-embed > div > div > div:nth-child(2) { padding-top: 2.69rem; } /* V5 (2026-09-02, Jeramie): the form's own step controls carry the site's button register, FILLED navy at rest (his mid-review ruling): this is the action the page exists for, so it takes the weight. The filled treatment is the sign-in button's hover state promoted to a resting state here; sign in keeps filled-on-hover, so the two never read as the same rank. How it is reached matters. The island is app markup and its stylesheet sets background, colour and border with `!important` — a site.css declaration cannot win, and trying would be a fight this file loses at the next island change. But those `!important` rules resolve `var(--button-color)` / `var(--button-foreground)`, which are UNSET for this site (verified on the live render: the empty value is why the button rendered as bare text). Those two variables are the intended theming seam, so the register is expressed by defining them, not by overriding. Hover comes free — the app applies brightness(0.9) to the filled ground. Only the typographic properties the app leaves alone are declared directly. Finding for the presentation lane, NOT fixed here: the island hardcodes a blue focus ring (rgb(59,130,246)) on every input with `!important`, which is off-register on a navy site and is not reachable through a variable. It needs a token or a hook. */ /* V5 token bridge retired after BUG-416; controls inherit site/account branding. */ .site-privatecounsel .c-form-embed form > div > button { font-family: inherit; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } /* V7 (2026-09-02, Jeramie): the card holds its tallest step's height so the page does not reflow as the visitor moves through the form. Measured on the live render at the split-hero width: step 1 569px, step 2 461px, step 3 623px; the success state is shorter still. The floor is the step-3 height plus a little air. Above the 900px breakpoint only: on the stacked mobile layout the card sits alone and a floor would be dead space. Reached structurally (the card is the second column's child), the same way the /contact rule above reaches the column. */ @media (min-width: 901px) { .site-privatecounsel .c-form-embed > div > div > div:nth-child(2) > div:first-child { min-height: 40rem; } } /* V6 (2026-09-02, Jeramie): on the first page the forward action is the only control, and it runs the full card width so the eye lands on it. Later pages keep the back/forward split below, so :only-child is the page-1 test, no step state needed. */ .site-privatecounsel .c-form-embed form > div > button:only-child { width: 100%; } /* The last control is the forward action and keeps the filled ground; anything before it is the back action and goes quiet through the same variables, the primary/secondary split the hero uses (taste-store failure #5). */ .site-privatecounsel .c-form-embed form > div > button:not(:last-child) { --button-color: transparent; --button-foreground: var(--muted-foreground); } /* ── §8 HOME HERO (08 base): parchment ground, copy left, B&W photograph right. The hero media slot exists in the schema; the framework renders the img centered above the copy, so the grid below re-places it (position-explicit, order-independent — F41-class gap: a real split placement is the framework ask). ── */ .site-privatecounsel.page-home .c-hero { background: transparent; color: var(--foreground); padding: 5.5rem 0 6.5rem; } .site-privatecounsel.page-home .c-hero > div { display: grid; grid-template-columns: 1.1fr 0.9fr; column-gap: 5rem; align-items: center; } .site-privatecounsel.page-home .c-hero > div > * { grid-column: 1; } .site-privatecounsel.page-home .c-hero > div > img { grid-column: 2; grid-row: 1 / span 4; justify-self: end; width: 100%; max-width: 22rem; margin: 0; /* Interim (ruled): the studio portrait serves the hero until the shoot. The hero takes a TIGHTER 3:4 crop (sides trimmed, framing higher) so the same source reads differently from the bio band's full frame below. The 480x545 source caps how far this can go — a true head-and-shoulders re-crop would upscale >1.3x; this is the honest maximum (F47). */ aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; /* V4 (2026-09-02, Jeramie): every portrait gets a ground and an offset. The navy block is drawn as a hard box-shadow rather than an extra element, because the content JSON gives the hero a bare with nothing to wrap. Offset up-and-right, which leaves the lower-left corner clear for the name chip on the bio band and keeps the two treatments one family. COLOUR at his ask (variance from the 2026-09-01 B&W register, staged for his ruling, not assumed): the desaturation is kept light so the studio grey settles against the parchment, and light for a second reason — CSS filter applies to the box-shadow too, so a heavy value would grey the navy block along with the photograph. */ filter: saturate(0.9) contrast(1.03); box-shadow: 1.25rem -1.25rem 0 0 #112A4B, 0 18px 42px rgba(17, 42, 75, 0.16); } /* V9 (2026-09-02, Jeramie): the founder name chip moves onto the HERO portrait, because the home bio band below it is gone (he is already at the top of the page). The hero image is a bare , which cannot carry a pseudo-element, so the chip is drawn on the hero's grid container as a grid item in the portrait's cell: right-aligned to the image's right edge, then translated left by (image width - chip width) so it sits on the photo's lower-left, the same corner the §12 chip used. Same plate, same accent edge (accent budget unchanged: the §12 chip it replaces is off this page). */ .site-privatecounsel.page-home .c-hero > div::after { content: "Jeramie J. Fortenberry \A Founder"; white-space: pre; grid-column: 2; grid-row: 1 / span 4; justify-self: end; align-self: end; transform: translateX(calc(-22rem + 100%)); background: #fff; border-top: 2px solid #00D4FF; padding: 0.65rem 1rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.7; color: #112A4B; box-shadow: 0 8px 20px rgba(17, 42, 75, 0.12); } /* the portrait and the chip share the cell's bottom edge, so the chip sits ON the photo's lower-left rather than hanging below it (the cell is taller than the portrait) */ .site-privatecounsel.page-home .c-hero > div > img { align-self: end; } @media (max-width: 900px) { .site-privatecounsel.page-home .c-hero > div::after { display: none; } } .site-privatecounsel.page-home .c-hero h1 { font-size: clamp(2.4rem, 3.5vw, 3.4rem); line-height: 1.14; max-width: 36rem; } .site-privatecounsel.page-home .c-hero > div > p { max-width: 33rem; } /* ACCENT 1 of 4 — eyebrow rule */ .site-privatecounsel.page-home .c-hero > div > p:first-of-type::before { content: ""; display: block; width: 2.5rem; height: 2px; background: #00D4FF; margin-bottom: 1.1rem; } /* primary/secondary CTA split (taste-store failure #5): second button goes quiet */ .site-privatecounsel.page-home .c-hero div > a + a { border-color: transparent; padding-left: 0; padding-right: 0; color: var(--muted-foreground); } .site-privatecounsel.page-home .c-hero div > a + a:hover { background: transparent; color: #112A4B; } /* ── §9 PRESS BAND (mod 3: "As Seen In" everywhere) — white strip, hairline seams, marks on one plane. Home: directly under the hero (Carta trust-band position). Landing: after the founder band, as before. Label text comes from page JSON; the tick below is ACCENT 2 of 4. ── */ .site-privatecounsel.page-home .c-hero + .c-prose-section, .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section { background: #fff; padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .site-privatecounsel.page-home .c-hero + .c-prose-section > div > div, .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section > div > div { max-width: none; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:first-of-type, .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:first-of-type { text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 1.6rem; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:first-of-type::before, .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:first-of-type::before { content: ""; display: inline-block; width: 7px; height: 7px; background: #00D4FF; margin-right: 0.6rem; vertical-align: 1px; /* the verification-mark tick grammar, reused */ } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type, .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin: 0; min-width: 0; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img, .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img { width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.66; border-radius: 0; box-shadow: none; } /* per-mark optical heights (interim pending F25 2x re-exports); order: WaPo, ABA, T&E, WM, SCORE. vw coefficients LOWERED ~15% from the live file's values, which overflowed the container at ~900-1000px viewports (dispatch 012 verification; supersedes the live coefficients at port). */ .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(1), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(1) { height: min(30px, 2.2vw); } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(2), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(2) { height: min(48px, 3.6vw); } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(3), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(3) { height: min(26px, 2vw); } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(4), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(4) { height: min(32px, 2.4vw); } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(5), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(5) { height: min(44px, 3.3vw); } /* ASSET-LANE CONSTRAINT (established at the 2026-09-01 port, recorded so it is never rediscovered): SiteAssetStore::ALLOWED_EXTENSIONS refuses .svg on purpose — an SVG served as a navigable file on our own origin is a stored-XSS vector. The isometrics therefore ride as INLINE data:image/svg+xml background URIs, the pattern §14's advisor icon already uses: loaded as an image, never a visitable URL, so the risk the exclusion exists for does not arise. Vector is kept (retina-exact at any size) and it is 35KB inline against 151KB of raster. Raster is the fallback only if a future asset genuinely needs the asset lane. */ /* ── §10 SERVICES DIRECTORY (mod 4): 2x2, NO card containers, hairline above each cell, isometric left, heading + body + arrow right. NO accent here — the illustrations carry the cyan. Illustration-per-item is a schema gap (F41): interim nth-child backgrounds below are ORDER-COUPLED to the four tiles in home.json. ── */ .site-privatecounsel.page-home .c-feature-grid { padding: 6.5rem 0 6rem; } .site-privatecounsel.page-home .c-feature-grid h2 { text-align: left; font-size: 2.1rem; margin: 0 0 0.9rem; max-width: 44rem; } .site-privatecounsel.page-home .c-feature-grid > div > p { text-align: left; margin: 0; max-width: 42rem; } .site-privatecounsel.page-home .c-feature-grid > div > div, .site-privatecounsel.page-services .c-feature-grid > div > div { gap: 0 5rem; margin-top: 3.25rem; } .site-privatecounsel.page-home .c-feature-grid a, .site-privatecounsel.page-services .c-feature-grid a { display: grid; grid-template-columns: 9rem 1fr; gap: 0.15rem 2.25rem; align-items: start; background: transparent; border: 0; border-top: 1px solid oklch(0.92 0.01 95); border-radius: 0; padding: 2.25rem 0 2.75rem; transition: none; } .site-privatecounsel.page-home .c-feature-grid a::before, .site-privatecounsel.page-services .c-feature-grid a::before { content: ""; grid-column: 1; grid-row: 1 / span 3; width: 9rem; aspect-ratio: 4 / 3; background: center / contain no-repeat; mix-blend-mode: multiply; } .site-privatecounsel.page-home .c-feature-grid > div > div > a:nth-child(1)::before, .site-privatecounsel.page-services .c-feature-grid > div > div > a:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: an entity block and the taller successor block it becomes, connected by an arrow'%3E %3Crect width='480' height='360' fill='%23FFFFFF'%3E%3C/rect%3E %3Ccircle cx='240.0' cy='140.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='150.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='150.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='300.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Cpolygon points='114.0,220.0 163.5,247.5 163.5,212.5 114.0,185.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='213.0,220.0 163.5,247.5 163.5,212.5 213.0,185.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='163.5,157.5 213.0,185.0 163.5,212.5 114.0,185.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='258.0,220.0 312.0,250.0 312.0,180.0 258.0,150.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='366.0,220.0 312.0,250.0 312.0,180.0 366.0,150.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='312.0,120.0 366.0,150.0 312.0,180.0 258.0,150.0' fill='%2300D4FF' fill-opacity='0.3' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cline x1='193.2' y1='236.0' x2='276.0' y2='232.0' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round'%3E%3C/line%3E%3Cpolygon points='275.0,237.6 284.1,231.5 274.4,226.3' fill='%23112A4B'%3E%3C/polygon%3E %3C/svg%3E"); } .site-privatecounsel.page-home .c-feature-grid > div > div > a:nth-child(2)::before, .site-privatecounsel.page-services .c-feature-grid > div > div > a:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: a stack of share layers with one qualifying layer highlighted'%3E %3Crect width='480' height='360' fill='%23FFFFFF'%3E%3C/rect%3E %3Ccircle cx='240.0' cy='150.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='300.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='300.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='310.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Cpolygon points='150.0,230.0 240.0,280.0 240.0,266.0 150.0,216.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='330.0,230.0 240.0,280.0 240.0,266.0 330.0,216.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,166.0 330.0,216.0 240.0,266.0 150.0,216.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='164.4,212.0 240.0,254.0 240.0,240.0 164.4,198.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='315.6,212.0 240.0,254.0 240.0,240.0 315.6,198.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,156.0 315.6,198.0 240.0,240.0 164.4,198.0' fill='%2300D4FF' fill-opacity='0.3' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='178.8,194.0 240.0,228.0 240.0,214.0 178.8,180.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='301.2,194.0 240.0,228.0 240.0,214.0 301.2,180.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,146.0 301.2,180.0 240.0,214.0 178.8,180.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,155.0 246.5,164.0 240.0,173.0 233.5,164.0' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round'%3E%3C/polygon%3E %3C/svg%3E"); } .site-privatecounsel.page-home .c-feature-grid > div > div > a:nth-child(3)::before, .site-privatecounsel.page-services .c-feature-grid > div > div > a:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: two entity blocks joined by a structured connection'%3E %3Crect width='480' height='360' fill='%23FFFFFF'%3E%3C/rect%3E %3Ccircle cx='240.0' cy='140.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='150.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='150.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='300.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Cpolygon points='114.0,215.0 163.5,242.5 163.5,202.5 114.0,175.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='213.0,215.0 163.5,242.5 163.5,202.5 213.0,175.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='163.5,147.5 213.0,175.0 163.5,202.5 114.0,175.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='271.5,222.5 321.0,250.0 321.0,210.0 271.5,182.5' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='370.5,222.5 321.0,250.0 321.0,210.0 370.5,182.5' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='321.0,155.0 370.5,182.5 321.0,210.0 271.5,182.5' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cline x1='193.2' y1='206.0' x2='286.8' y2='194.0' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='5 5'%3E%3C/line%3E%3Cline x1='187.8' y1='189.0' x2='294.0' y2='174.0' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round'%3E%3C/line%3E%3Cpolygon points='240.9,173.5 246.7,181.5 240.9,189.5 235.1,181.5' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round'%3E%3C/polygon%3E %3C/svg%3E"); } .site-privatecounsel.page-home .c-feature-grid > div > div > a:nth-child(4)::before, .site-privatecounsel.page-services .c-feature-grid > div > div > a:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: an entity block moved from one state plate to another, its dashed outline left behind'%3E %3Crect width='480' height='360' fill='%23FFFFFF'%3E%3C/rect%3E %3Ccircle cx='240.0' cy='118.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='128.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='138.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='78.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='128.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='138.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='138.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='278.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='278.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='288.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='402.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='278.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='288.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='298.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E %3Cpolygon points='84,217 150,254 150,266 84,229' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='216,217 150,254 150,266 216,229' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='150,180 216,217 150,254 84,217' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='264,217 330,254 330,266 264,229' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='396,217 330,254 330,266 396,229' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='330,180 396,217 330,254 264,217' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='114,220 150,240 150,188 114,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'%3E%3C/polygon%3E %3Cpolygon points='186,220 150,240 150,188 186,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'%3E%3C/polygon%3E %3Cpolygon points='150,148 186,168 150,188 114,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'%3E%3C/polygon%3E %3Cpolygon points='294,220 330,240 330,180 294,160' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='366,220 330,240 330,180 366,160' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='330,140 366,160 330,180 294,160' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round' fill-opacity='0.3'%3E%3C/polygon%3E %3Cline x1='192.0' y1='242.0' x2='264.0' y2='238.0' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round'%3E%3C/line%3E %3Cpolygon points='263.0,243.6 272.1,237.5 262.4,232.3' fill='%23112A4B'%3E%3C/polygon%3E %3C/svg%3E"); } .site-privatecounsel.page-home .c-feature-grid a h3, .site-privatecounsel.page-services .c-feature-grid a h3 { grid-column: 2; font-size: 1.35rem; margin: 0 0 0.55rem; } .site-privatecounsel.page-home .c-feature-grid a p, .site-privatecounsel.page-services .c-feature-grid a p { grid-column: 2; max-width: 32rem; margin: 0; } .site-privatecounsel.page-home .c-feature-grid a span, .site-privatecounsel.page-services .c-feature-grid a span { grid-column: 2; margin-top: 1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #112A4B; } /* PORT FIX 2026-09-01: the framework already emits the arrow glyph on the card link affordance; §10's own ::after doubled it on the live render ("PLAN THE RESTRUCTURE -> ->"). Removed rather than re-styled - one arrow, the framework's. */ .site-privatecounsel.page-home .c-feature-grid a:hover, .site-privatecounsel.page-services .c-feature-grid a:hover { border-color: oklch(0.92 0.01 95); border-top-color: #112A4B; } .site-privatecounsel.page-home .c-feature-grid a:hover span, .site-privatecounsel.page-services .c-feature-grid a:hover span { color: var(--accent-brand-hover); } /* ── §11 PRACTICE BAND (home, second grid): white functional band, tighter air ── */ .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 4.5rem 0 5rem; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid h2 { font-size: 1.6rem; } /* ── §12 FOUNDER / BIO BAND (08 portrait moments, light version — replaces navy §13v). Home bio: the prose after the second grid. Landing founder: the prose followed by the press strip. Text left, framed B&W portrait right, name chip on the photo. Roomiest band per 08. ── */ .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) { background: transparent; padding: 5.5rem 0; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section { padding: 7rem 0; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section > div > div, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) > div > div { max-width: none; display: grid; grid-template-columns: 1fr minmax(280px, 340px); column-gap: 5.5rem; align-items: center; align-content: center; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section h2, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) h2 { grid-column: 1; font-size: 2rem; margin: 0 0 1.25rem; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section p, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p { grid-column: 1; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.65; max-width: 40rem; margin: 0 0 1.1rem; } /* the image paragraph (markdown image leads the body) becomes the right column */ .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section p:first-of-type, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type { grid-column: 2; grid-row: 1 / span 6; align-self: center; position: relative; margin: 0; max-width: none; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section p:first-of-type img, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type img { display: block; width: 100%; height: auto; /* V4 (2026-09-02) — same ground-and-offset treatment as the hero portrait (§8); the two are one family and the values are deliberately identical. The block goes up-and-right so the name chip below-left sits on open photograph. */ filter: saturate(0.9) contrast(1.03); box-shadow: 1.25rem -1.25rem 0 0 #112A4B, 0 18px 42px rgba(17, 42, 75, 0.16); border-radius: 0; } /* name chip, white plate on the photo's lower-left; ACCENT 3 of 4 is its top edge */ .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section p:first-of-type::after, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type::after { content: "Jeramie J. Fortenberry \A Founder"; white-space: pre; position: absolute; left: 0; bottom: 0; background: #fff; border-top: 2px solid #00D4FF; padding: 0.65rem 1rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.7; color: #112A4B; } /* ── §13 NUMBERED STEPS (landing): white band, cards dissolved into open columns, numerals as quiet serif ordinals (no pill, no borders) ── */ .site-privatecounsel.page-type-landing .c-feature-grid { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5rem 0 5.5rem; } .site-privatecounsel.page-type-landing .c-feature-grid h2 { text-align: left; font-size: 1.9rem; margin: 0 0 0.5rem; } .site-privatecounsel.page-type-landing .c-feature-grid > div > div > div { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .site-privatecounsel.page-type-landing .c-feature-grid > div > div { gap: 4rem; margin-top: 2.75rem; } .site-privatecounsel.page-type-landing .c-feature-grid > div > div > div > div:first-child { width: auto; height: auto; background: transparent; border-radius: 0; display: block; color: #C9D2DE; font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-size: 2.6rem; line-height: 1; font-weight: 400; margin-bottom: 1rem; } /* ── §14 ADVISOR CALLOUT v2 (mod 5; replaces §9i): icon, heading on its own line (a question, so the owner reads it as conditional and the advisor self-selects; Jeramie 2026-09-02), body beneath. Rendered from bullet 4 until the F42 schema lands; the ruled heading string is supplied here so the JSON carries only the body copy (written 2026-09-02, SIT-014 Step 11). Tolerates ~140 characters / 2 lines at the 34rem width; hard ceiling ~180 before the card outgrows its column. NO cyan here — the callout earns weight from ground and shadow. ── */ .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4) { display: block; position: relative; margin-top: 2.25rem; /* V2 (2026-09-02, Jeramie): the icon moves onto the heading's line. The left padding opens a gutter the icon sits in absolutely, so heading and body share one text column and the icon hangs beside the heading rather than stacking above it. */ padding: 1.5rem 1.6rem 1.6rem 4.35rem; background: var(--card, #fff); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(17, 42, 75, 0.06), 0 12px 30px rgba(17, 42, 75, 0.08); max-width: 34rem; list-style: none; font-size: 0.95rem; color: var(--muted-foreground); } .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4) > svg { display: none; } .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4)::before { content: ""; display: block; position: absolute; left: 1.6rem; top: 1.5rem; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2'/%3E%3Ccircle cx='17.5' cy='8.5' r='2.5'/%3E%3Cpath d='M19 21v-1.5a4.5 4.5 0 0 0-3-4.24'/%3E%3C/svg%3E") center / contain no-repeat; } .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4) span { display: block; } .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4) span::before { content: "Are you an attorney or advisor?"; display: block; font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-weight: 700; font-size: 1.05rem; color: var(--foreground); /* the 26px line box is what puts the heading on the icon's horizontal line: both start at the card's 1.5rem padding-top, and both are 26px tall, so their centres coincide by construction rather than by a hand-tuned nudge. */ line-height: 26px; margin-bottom: 0.55rem; } /* split-hero eyebrow — ACCENT 1 of 4 on landing pages */ .site-privatecounsel.page-type-landing .c-form-embed > div > div > div:first-child > p:first-of-type::before { content: ""; display: block; width: 2.5rem; height: 2px; background: #00D4FF; margin-bottom: 1.1rem; } /* ── §15 FAQ: left-aligned heading (one alignment logic) ── */ .site-privatecounsel .c-faq h2 { text-align: left; max-width: var(--container-prose); margin-left: auto; margin-right: auto; } /* ── §16 CTA BAND: navy (the page's ONE dark moment — band-dark's ink default recreated taste-store failure #8 against the dark footer; the footer is now light, §17), left-aligned, ACCENT 4 of 4 as the headline rule. ── */ .site-privatecounsel .c-cta { background: var(--dark-hero); text-align: left; padding: 6.5rem 0; } .site-privatecounsel .c-cta h2 { margin-left: 0; max-width: 40rem; } .site-privatecounsel .c-cta h2::before { content: ""; display: block; width: 2.5rem; height: 2px; background: #00D4FF; margin-bottom: 1.4rem; } .site-privatecounsel .c-cta p { margin-left: 0; max-width: 40rem; } .site-privatecounsel .c-cta div { justify-content: flex-start; } /* ── §16a THE ADVISOR CHOOSER, on navy (Jeramie 2026-09-08: "I'd put that on blue background (perhaps with the image for texture) and get rid of the Bring the Structure to Your Client's Deal section"). The closing CTA band is gone from /advisors, so this grid is the page's terminal block AND its one dark moment — §16's role, inherited here rather than duplicated: same --dark-hero ground, same 6.5rem rhythm, same cyan rule on the heading (ACCENT 4 of 4 for this page, and the CTA band that used to spend it no longer exists). Keyed to the page JSON's own `anchor: "analyses"` (rendered as #analyses), not to a framework classname — the mechanism ruled for the advisor callout on 2026-09-08 (site.css §33): the site governs the anchor value, so the treatment follows content this repo owns. Scoped to page-advisors as well, so a future `analyses` anchor elsewhere does not inherit a dark band by accident. Texture: slate-texture.png, the same sheet §4 lays under the /plans/owners-counsel hero, blended over the navy. It sits on the SECTION as a second background layer under the flat colour, so the cards keep a clean ground and the texture never runs under body text at full strength. The reference is the content-hashed publish path, not the logical `assets/slate-texture.png` name: cps-publish mints /storage/sites/{site}/assets/{sha256[:16]}.{ext} and its site.css guard only validates references already in that shape, so a logical name ships silently and 404s. Compositing is §4's idiom (a navy scrim OVER the sheet), not a blend mode. The sheet is dark and already navy-family (mean rgb 30 50 76 against the band's 17 42 75), so `soft-light` multiplied it down to roughly rgb 7 20 42 and the band read near-black — the merged dark mass §17 was written to prevent. A flat 0.84 scrim holds the composite at rgb 19 43 75, indistinguishable from the hero navy, and leaves the grain as a value-preserving mottle rather than a value change. Lightened one step on 2026-09-08 ("lightened just a little so that the pattern is more noticeable", against the §4 hero as the reference): scrim 0.84 -> 0.78, and the tile up from 640px to 1100px. The tile was doing more of the damage than the alpha — the sheet is 1200px wide, so 640px shrank every feature to half scale and read as noise rather than as the hero's material. At 1100px it is the same grain the hero shows. Composite mean holds at rgb 20 44 75 against the hero's 19 43 75; only the swing widens. ── */ .site-privatecounsel.page-advisors #analyses { background-color: var(--dark-hero); background-image: linear-gradient(rgba(17, 42, 75, 0.78), rgba(17, 42, 75, 0.78)), url("/storage/sites/privatecounsel/assets/52981226517ae020.png"); background-size: auto, 1100px auto; background-repeat: repeat, repeat; padding: 6.5rem 0; } .site-privatecounsel.page-advisors #analyses h2 { color: #fff; } .site-privatecounsel.page-advisors #analyses h2::before { content: ""; display: block; width: 2.5rem; height: 2px; background: #00D4FF; margin-bottom: 1.4rem; } /* Cards on navy: the parchment card would read as a hole punched in the band, so they take a translucent lift off the ground with a hairline in the same family. Hover raises the lift rather than changing hue, which keeps the four reading as one set. */ .site-privatecounsel.page-advisors #analyses a { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .site-privatecounsel.page-advisors #analyses a:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.32); } .site-privatecounsel.page-advisors #analyses a h3 { color: #fff; } .site-privatecounsel.page-advisors #analyses a p { color: rgba(255, 255, 255, 0.78); } .site-privatecounsel.page-advisors #analyses a span { color: #00D4FF; } /* ── §17 FOOTER (mod 6): full structure restored in _site.json; ground goes LIGHT — the live near-black under a navy CTA re-created the merged dark mass (taste failure #8), and light chrome wants a light close (reasoning in findings F43). Wordmark = the published 1a lockup. ── */ .site-privatecounsel .c-footer { background: oklch(0.985 0.005 95.3); color: var(--foreground); border-top: 1px solid oklch(0.92 0.01 95); padding: 3.5rem 0 2rem; } .site-privatecounsel .c-footer h4 { color: var(--muted-foreground); } .site-privatecounsel .c-footer p { color: var(--muted-foreground); } .site-privatecounsel .c-footer a { color: var(--foreground); opacity: 0.85; } .site-privatecounsel .c-footer a:hover { opacity: 1; color: #112A4B; } .site-privatecounsel .c-footer > div > div > div:first-child > a { display: block; width: 200px; height: 22px; background: url("/storage/sites/privatecounsel/assets/306bf0611e669308.png") left center / contain no-repeat; } .site-privatecounsel .c-footer > div > div > div:first-child > a b { display: none; } .site-privatecounsel .c-footer > div > div:last-child { border-top-color: var(--border); color: var(--muted-foreground); } .site-privatecounsel .c-footer > div > div:last-child a { color: var(--muted-foreground); } .site-privatecounsel .c-footer > div > div:last-child a:hover { color: #112A4B; } /* ── §18 Narrow viewports ── */ @media (max-width: 900px) { /* V3 release (2026-09-02): below this width the framework stacks the split hero to one column, so the desktop alignment offset would only push dead space between the copy and the form. */ .site-privatecounsel.page-type-landing .c-form-embed > div > div > div:nth-child(2), .site-privatecounsel.page-type-contact .c-form-embed > div > div > div:nth-child(2) { padding-top: 0; } /* V2 at narrow widths: the icon gutter tightens with the card's own padding. */ .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4) { padding: 1.35rem 1.25rem 1.4rem 3.85rem; } .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4)::before { left: 1.25rem; top: 1.35rem; } /* V1 follow-through (2026-09-02): with the mobile disclosure menu now in the header, the row at 375px is logo + toggle + sign-in. The sign-in button must never wrap its label inside its own box, and the logo yields the width that makes that possible. Measured: logo 221 + toggle 44 + sign-in 73 = 338 in a 343 content box, which is what forced "SIGN IN" onto two lines. */ .site-privatecounsel .c-header-nav div > div > a:only-child { white-space: nowrap; /* 2026-09-10 (Jeramie: "Fix it"; SIT-014 finding 21): the label is now FOR PROFESSIONALS, 182px at the §5 size — with the 170px logo and the 44px toggle that is 418px in a 375px viewport, and every page scrolled sideways. The button steps down one size at phone width and the logo yields a little more: 150 + 44 + ~132 fits the 343px content box with room. */ padding: 0.45rem 0.65rem; font-size: 0.68rem; letter-spacing: 0.06em; } .site-privatecounsel .c-header-nav > div > a:first-child img { max-width: 150px; } /* V4 at narrow widths: the ground block tightens so it never reaches the viewport edge. */ .site-privatecounsel.page-home .c-hero > div > img, .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section p:first-of-type img, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type img { box-shadow: 0.85rem -0.85rem 0 0 #112A4B, 0 14px 32px rgba(17, 42, 75, 0.16); } .site-privatecounsel.page-home .c-hero > div { grid-template-columns: 1fr; row-gap: 3rem; } .site-privatecounsel.page-home .c-hero > div > img { grid-column: 1; grid-row: auto; justify-self: start; max-width: 20rem; } .site-privatecounsel.page-home .c-feature-grid a, .site-privatecounsel.page-services .c-feature-grid a { grid-template-columns: 1fr; padding: 2rem 0 2.25rem; } .site-privatecounsel.page-home .c-feature-grid a::before, .site-privatecounsel.page-services .c-feature-grid a::before { grid-row: auto; width: 7.5rem; margin-bottom: 0.75rem; } .site-privatecounsel.page-home .c-feature-grid a h3, .site-privatecounsel.page-home .c-feature-grid a p, .site-privatecounsel.page-home .c-feature-grid a span, .site-privatecounsel.page-services .c-feature-grid a h3, .site-privatecounsel.page-services .c-feature-grid a p, .site-privatecounsel.page-services .c-feature-grid a span { grid-column: 1; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section > div > div, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) > div > div { grid-template-columns: 1fr; row-gap: 3rem; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section p:first-of-type, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type { grid-column: 1; grid-row: auto; max-width: 340px; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type, .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type { flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.75rem; } /* below the wrap breakpoint the vw clamp releases — wrapped marks render at full height */ .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(1), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(1) { height: 30px; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(2), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(2) { height: 48px; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(3), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(3) { height: 26px; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(4), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(4) { height: 32px; } .site-privatecounsel.page-home .c-hero + .c-prose-section p:last-of-type img:nth-of-type(5), .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(5) { height: 44px; } } /* ── §19 /ADVISORS (dispatch 013) — the referral page, designed in full. The page is read by an attorney, CPA, wealth advisor or banker deciding whether to hand over a client; the register's acceptance test is that a referral source is proud to be associated with it. Four taste-store failures on the live page are closed here: the empty hero right half (the founder portrait fills it, V4 ground-and-offset, COLOUR register), centred headings over left-aligned content (every heading left), the prose band with no scale contrast (editorial two-column split, lead paragraph scaled), and the deviceless three-column grid (hairline-top cells on a white band, the directory grammar without its illustrations). ACCENT on this page: three of the allotted four — hero eyebrow rule, press tick, CTA rule. No chip on the hero portrait: the chip needs an element to attach to and the hero media is a bare (F42-class gap); the eyebrow already names the audience. ── */ .site-privatecounsel.page-advisors .c-hero { background: transparent; color: var(--foreground); padding: 5rem 0 6rem; } .site-privatecounsel.page-advisors .c-hero > div { display: grid; grid-template-columns: 1.1fr 0.9fr; column-gap: 5rem; align-items: center; } .site-privatecounsel.page-advisors .c-hero > div > * { grid-column: 1; } .site-privatecounsel.page-advisors .c-hero > div > img { grid-column: 2; grid-row: 1 / span 4; justify-self: end; width: 100%; max-width: 21rem; margin: 0; /* Fuller 4:5 frame than the home hero's tight 3:4 — the two pages carry the same portrait until the shoot (F49), so the crops differ deliberately. */ aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 10%; /* COLOUR register (ruled 2026-09-02) + V4 ground-and-offset, values identical to §8/§12. */ filter: saturate(0.9) contrast(1.03); box-shadow: 1.25rem -1.25rem 0 0 #112A4B, 0 18px 42px rgba(17, 42, 75, 0.16); } .site-privatecounsel.page-advisors .c-hero h1 { font-size: clamp(2.2rem, 3.2vw, 3.1rem); line-height: 1.16; max-width: 34rem; } .site-privatecounsel.page-advisors .c-hero > div > p { max-width: 33rem; } /* ACCENT 1 of 3 — eyebrow rule (the landing/home grammar) */ .site-privatecounsel.page-advisors .c-hero > div > p:first-of-type::before { content: ""; display: block; width: 2.5rem; height: 2px; background: #00D4FF; margin-bottom: 1.1rem; } /* Press band under the hero (Carta trust-band position, the home §9 grammar restated for this page scope; ACCENT 2 of 3 is the label tick). The referral audience is exactly who the marks are for. */ .site-privatecounsel.page-advisors .c-hero + .c-prose-section { background: #fff; padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .site-privatecounsel.page-advisors .c-hero + .c-prose-section > div > div { max-width: none; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:first-of-type { text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 1.6rem; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:first-of-type::before { content: ""; display: inline-block; width: 7px; height: 7px; background: #00D4FF; margin-right: 0.6rem; vertical-align: 1px; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin: 0; min-width: 0; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img { width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.66; border-radius: 0; box-shadow: none; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(1) { height: min(30px, 2.2vw); } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(2) { height: min(48px, 3.6vw); } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(3) { height: min(26px, 2vw); } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(4) { height: min(32px, 2.4vw); } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(5) { height: min(44px, 3.3vw); } /* "Why the Practice Is Built Around Your Team" — editorial two-column split: heading holds the left column, body the right, the lead paragraph scaled up in ink. The scale contrast the live band lacked comes from asymmetry, not decoration. */ .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section { background: transparent; padding: 6.5rem 0 7rem; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section > div > div { max-width: none; display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; column-gap: 5.5rem; align-items: start; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section h2 { grid-column: 1; /* Spans every row rather than sitting in row 1. Pinned to row 1 it SHARED that row with the first paragraph, so row 1 sized to the taller of the two: a 3-line heading over a 2-line lead left about 61px of dead space under the lead that read as a stray line break (his report, 2026-09-08). Spanning makes each paragraph's row size to itself. align-items:start on the grid keeps the heading at the top; the max-width:900px block below resets this to grid-row:auto, where the layout is a single column and a spanning heading would overlap the body. `span 30`, not `1 / -1`: this grid declares no explicit rows, and -1 resolves against the EXPLICIT grid, so `1 / -1` silently collapses to a single row and changes nothing (verified on staging — the rule applied, the dead space stayed). The span creates implicit rows instead; the surplus ones are empty and row-gap here is 0, so they cost nothing. */ grid-row: 1 / span 30; font-size: 2rem; line-height: 1.28; margin: 0; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section p { grid-column: 2; max-width: 38rem; margin: 0 0 1.1rem; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section p:first-of-type { font-size: 1.2rem; line-height: 1.6; color: var(--foreground); } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section p:last-of-type { margin-bottom: 0; } /* "What You Can Count On" — white band, hairline-top cells (the directory grammar without illustrations: these three are commitments, not services, and get type, not pictures). */ .site-privatecounsel.page-advisors .c-feature-grid { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5.5rem 0 6rem; } .site-privatecounsel.page-advisors .c-feature-grid h2 { text-align: left; font-size: 1.9rem; margin: 0 0 0.5rem; max-width: 44rem; } .site-privatecounsel.page-advisors .c-feature-grid > div > div { gap: 4rem; margin-top: 3rem; } .site-privatecounsel.page-advisors .c-feature-grid > div > div > div { border-top: 1px solid var(--border); padding-top: 1.4rem; } .site-privatecounsel.page-advisors .c-feature-grid > div > div > div h3 { font-size: 1.2rem; margin-bottom: 0.55rem; } .site-privatecounsel.page-advisors .c-feature-grid > div > div > div p { font-size: 0.98rem; color: var(--muted-foreground); } /* ACCENT 3 of 3 rides §16's CTA-band headline rule, unchanged. */ /* ── §20 /DOMESTICATION BELOW THE HERO (dispatch 013) — the copy session's content, composed. Three stacked feature-grids read as a list of lists; the sequence now alternates grounds and gives each grid its own grammar: the ANALYSIS CONTENTS as a table of contents (white band, hairline cells, 01-06 ordinals — it is literally the contents of the document being bought), the PITFALLS as three open columns split by vertical hairlines on parchment (no band, no cells: cautionary, quiet), and the STEPS on the standing §13 white-band serif-ordinal grammar. Page rhythm: parchment hero → white contents → parchment pitfalls → white steps → parchment founder → white press → parchment FAQ → navy CTA. SCOPING IS ADJACENCY-COUPLED (finding F52): reordering domestication.json's grids reassigns these treatments, the same coupling class as §10's nth-child illustrations. */ /* Landing grids: subhead joins the left alignment logic (taste failure #4 — the live pitfalls subhead centred itself over left-aligned columns). Site-wide for the landing type. */ .site-privatecounsel.page-type-landing .c-feature-grid > div > p { text-align: left; margin: 0; max-width: 44rem; } /* 20a — analysis contents: TOC treatment */ .site-privatecounsel.page-type-landing .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid):not(:has(> div > div > div > div)) > div > div { counter-reset: toc; gap: 3.25rem 4rem; margin-top: 3rem; } .site-privatecounsel.page-type-landing .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid):not(:has(> div > div > div > div)) > div > div > div { counter-increment: toc; border-top: 1px solid var(--border); padding-top: 1.25rem; } .site-privatecounsel.page-type-landing .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid):not(:has(> div > div > div > div)) > div > div > div::before { content: counter(toc, decimal-leading-zero); display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; color: var(--muted-foreground); font-variant-numeric: tabular-nums; margin-bottom: 0.6rem; } .site-privatecounsel.page-type-landing .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid):not(:has(> div > div > div > div)) > div > div > div h3 { font-size: 1.15rem; margin-bottom: 0.45rem; } .site-privatecounsel.page-type-landing .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid):not(:has(> div > div > div > div)) > div > div > div p { font-size: 0.95rem; } /* 20b — pitfalls: open parchment, vertical hairlines (also matches the steps grid; 20c re-derives every declaration it changes — none inherited blind) */ .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) { background: transparent; border-top: 0; border-bottom: 0; padding: 6rem 0 6.5rem; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div { gap: 0 3.5rem; margin-top: 3rem; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div { border-top: 0; padding-top: 0; counter-increment: none; border-left: 1px solid oklch(0.92 0.01 95); padding-left: 1.75rem; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div::before { content: none; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div:first-child { border-left: 0; padding-left: 0; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div h3 { font-size: 1.2rem; margin-bottom: 0.55rem; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div p { font-size: 0.95rem; } /* 20c — steps: restore the §13 white band + serif-ordinal grammar over 20b's cascade */ .site-privatecounsel.page-type-landing .c-cta + .c-feature-grid { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 5rem 0 5.5rem; } .site-privatecounsel.page-type-landing .c-cta + .c-feature-grid > div > div { gap: 4rem; margin-top: 2.75rem; } .site-privatecounsel.page-type-landing .c-cta + .c-feature-grid > div > div > div { border-left: 0; padding-left: 0; } /* ── §21 MOBILE SYSTEM (dispatch 013) — the first designed pass at phone widths, site-wide through the shared systems. Two blocks: the disclosure menu at <=900px (where the framework swaps nav.primary for the toggle), and the 375px composition + rhythm at <=600px. HOOK GAP (finding F48): the disclosure classes (navmenu, navmenu-panel, navmenu-link, navmenu-group, navtoggle-icon) are NOT published vocabulary, so every menu rule below reaches the markup structurally through the c-header-nav root. Fragile by admission; F48 states the hooks to promote. ── */ @media (max-width: 900px) { /* toggle: borderless 44px control — the sign-in button stays the row's ONLY boxed control, so the header never carries two outlined boxes at the same rank (V5 logic, applied to chrome). Open state = the nav hover chip, the one the desktop labels already use. */ .site-privatecounsel .c-header-nav details > summary { border: 0; background: transparent; min-width: 44px; min-height: 44px; justify-content: center; color: #112A4B; } .site-privatecounsel .c-header-nav details[open] > summary { background: oklch(0.955 0.008 95); } .site-privatecounsel .c-header-nav details > summary:focus-visible { outline: 2px solid #112A4B; outline-offset: 2px; } /* panel: the chrome's own parchment (a white sheet under a parchment header reads as a seam), warm hairline close, soft navy shade so it sits OVER the page */ .site-privatecounsel .c-header-nav details > div { background: oklch(0.985 0.005 95.3); border-bottom: 1px solid oklch(0.92 0.01 95); box-shadow: 0 18px 32px rgba(17, 42, 75, 0.10); padding: 0.5rem var(--page-padding-x) 1.5rem; } /* group label (SERVICES): the desktop panel's information-surface register, quiet */ .site-privatecounsel .c-header-nav details > div > div { margin: 1.1rem 0 0.2rem; color: var(--muted-foreground); } /* rows: 48px tap targets, warm hairline separators, ink labels. One uniform row register — the framework indents service children itself; richer differentiation (the desktop dropdown's bold-label + description pattern) needs framework markup, stated in F48. */ .site-privatecounsel .c-header-nav details > div > a { min-height: 48px; padding: 0 0.25rem; border-bottom: 1px solid oklch(0.94 0.008 95); font-size: 0.95rem; font-weight: 500; color: var(--foreground); } .site-privatecounsel .c-header-nav details > div > a:last-child { border-bottom: 0; } .site-privatecounsel .c-header-nav details > div > a:hover { background: oklch(0.955 0.008 95); } /* /advisors at tablet widths: hero and editorial split stack (same release point as the home hero and the split hero) */ .site-privatecounsel.page-advisors .c-hero > div { grid-template-columns: 1fr; row-gap: 3rem; } .site-privatecounsel.page-advisors .c-hero > div > img { grid-column: 1; grid-row: auto; order: 10; /* the message leads; the portrait follows the CTAs */ justify-self: start; max-width: 20rem; box-shadow: 0.85rem -0.85rem 0 0 #112A4B, 0 14px 32px rgba(17, 42, 75, 0.16); } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section > div > div { grid-template-columns: 1fr; row-gap: 1.5rem; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section h2 { grid-column: 1; grid-row: auto; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section p { grid-column: 1; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type { flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.75rem; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(1) { height: 30px; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(2) { height: 48px; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(3) { height: 26px; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(4) { height: 32px; } .site-privatecounsel.page-advisors .c-hero + .c-prose-section p:last-of-type img:nth-of-type(5) { height: 44px; } } /* 21b — the 375px composition. The desktop round's uneven rhythm was the fix for dead space; at 375px the 7.5rem token alone is a 240px void between every band (finding F50 restates the per-instance paddingY ask with this evidence). Mobile rhythm ruled here: 4.5rem section floor, hero and CTA bands tighter still, band heads step down to one mobile scale (1.55rem) so no band shouts past the H1. */ @media (max-width: 600px) { .site-privatecounsel { --section-padding-y: 4.5rem; } /* home hero: copy first, portrait after the CTAs — the current reflow spends the whole first screen on the photograph before a single word (MOBILE-home-01 evidence) */ .site-privatecounsel.page-home .c-hero { padding: 3.25rem 0 4.25rem; } .site-privatecounsel.page-home .c-hero > div { row-gap: 2.75rem; } .site-privatecounsel.page-home .c-hero > div > img { order: 10; max-width: 17.5rem; } .site-privatecounsel.page-home .c-hero h1 { font-size: 2.15rem; } /* split hero: tighter frame; the V3 offset is already released at 900px */ .site-privatecounsel .c-form-embed { padding: 3rem 0 4rem; } .site-privatecounsel.page-type-landing .c-form-embed li:nth-child(4) { margin-top: 1.75rem; } /* one mobile band-head scale */ .site-privatecounsel.page-home .c-feature-grid h2, .site-privatecounsel.page-type-landing .c-feature-grid h2, .site-privatecounsel.page-advisors .c-feature-grid h2, .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section h2, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) h2, .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section h2, .site-privatecounsel .c-faq h2, .site-privatecounsel .c-cta h2 { font-size: 1.55rem; } /* directory: tighter tiles, smaller plates */ .site-privatecounsel.page-home .c-feature-grid, .site-privatecounsel.page-services .c-feature-grid { padding: 4.25rem 0 4rem; } .site-privatecounsel.page-home .c-feature-grid > div > div, .site-privatecounsel.page-services .c-feature-grid > div > div { margin-top: 2.25rem; } .site-privatecounsel.page-home .c-feature-grid a::before, .site-privatecounsel.page-services .c-feature-grid a::before { width: 6.5rem; } /* founder/bio bands */ .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section { padding: 4.5rem 0; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid + .c-prose-section p:first-of-type, .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type { max-width: 300px; /* image + 0.85rem block offset always clear the 1rem page padding */ } /* landing grids: stacked columns tighten; the pitfalls' vertical hairlines rotate to horizontal separators between stacked items */ .site-privatecounsel.page-type-landing .c-feature-grid { padding: 4rem 0 4.5rem; } .site-privatecounsel.page-type-landing .c-feature-grid > div > div { gap: 2.5rem; margin-top: 2.25rem; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div { gap: 2.5rem; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div { border-left: 0; padding-left: 0; border-top: 1px solid oklch(0.92 0.01 95); padding-top: 1.5rem; } .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div:first-child { border-top: 0; padding-top: 0; } .site-privatecounsel.page-type-landing .c-cta + .c-feature-grid > div > div > div { border-top: 0; padding-top: 0; } /* steps ordinal steps down with the head scale */ .site-privatecounsel.page-type-landing .c-feature-grid > div > div > div > div:first-child { font-size: 2.1rem; margin-bottom: 0.75rem; } /* advisors bands */ .site-privatecounsel.page-advisors .c-hero { padding: 3.25rem 0 4.25rem; } .site-privatecounsel.page-advisors .c-hero > div { row-gap: 2.75rem; } .site-privatecounsel.page-advisors .c-hero h1 { font-size: 2.05rem; } .site-privatecounsel.page-advisors .c-hero > div > img { max-width: 17.5rem; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section { padding: 4.25rem 0 4.5rem; } .site-privatecounsel.page-advisors .c-prose-section + .c-prose-section p:first-of-type { font-size: 1.1rem; } .site-privatecounsel.page-advisors .c-feature-grid { padding: 4rem 0 4.5rem; } .site-privatecounsel.page-advisors .c-feature-grid > div > div { gap: 2.25rem; margin-top: 2.25rem; } /* CTA band */ .site-privatecounsel .c-cta { padding: 4.5rem 0; } /* footer: brand blurb full width, the two link columns share the row, legal bar stacks */ .site-privatecounsel .c-footer { padding: 3rem 0 1.75rem; } .site-privatecounsel .c-footer > div > div:first-child { gap: 2rem 1.5rem; } .site-privatecounsel .c-footer > div > div:first-child > div:first-child { grid-column: 1 / -1; } .site-privatecounsel .c-footer > div > div:last-child { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .site-privatecounsel .c-footer > div > div:last-child a { margin-left: 0; margin-right: 1.25rem; } } /* ── §22 /DOMESTICATION, dispatch 109 (seat-dispatch, lex-macbook) — the four items the late update left open on §20's pass. Read with 109's own list: the 01-06 contents treatment is ACCEPTED and untouched here; what follows fixes its heading wrap, gives the pitfalls their marks, decides the ground rhythm, and designs the closing recap that was moved to the bottom of the page after 013 was briefed. ── */ /* 22a — the contents heading wrapped "Legal / Standing" onto a second line. The framework caps .fg h2 at 46rem and §13 left-aligns it, so a seven-word serif heading breaks one word early. Released for the landing type: the container (72rem) is the real measure, and every other landing heading is short enough that nothing else moves. */ .site-privatecounsel.page-type-landing .c-feature-grid > div > h2 { max-width: none; } /* 22b — the pitfalls carry a MARK, the way the old page rendered them. Read from WordPress page 52 (`/move-an-llc/`, "Common LLC Relocation Pitfalls") through the site's own connection: each item there is a bordered card whose first line is a bold ✴ glyph in a custom green, above the title, above a short body. What carries over is the GLYPH and its position; what does not is the card, the 10px radius and the green — this register is square, borderless here (§20b), and its accent budget is spent four times over on this page already (hero eyebrow, press tick, chip edge, CTA rule). So the mark is navy ink: the old page's grammar, this site's palette. §20b set `content: none` on this pseudo-element; this replaces that declaration. */ .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) > div > div > div::before { content: "\2734"; display: block; font-size: 1.25rem; line-height: 1; color: #112A4B; margin-bottom: 0.9rem; } /* The steps grid matches the pitfalls selector too (three siblings satisfy the two-sibling adjacency), so it must reset the mark explicitly — the same re-derivation §20c already does for the borders. Its numerals are the framework's own .num divs and are untouched. */ .site-privatecounsel.page-type-landing .c-cta + .c-feature-grid > div > div > div::before { content: none; } /* 22c — ground rhythm, decided. §20 alternated white contents / parchment pitfalls / white steps, but the parchment ground is oklch(0.985) and the white band is #fff: a 1.5% step that reads as one continuous block, which is the complaint. The pitfalls band drops to the pre-header's darkened parchment — a plane the eye actually registers — so the sequence reads white / warm / white down the page. */ .site-privatecounsel.page-type-landing .c-feature-grid + .c-feature-grid:not(:has(> div > div > div > div)) { background: oklch(0.965 0.007 95); border-top: 1px solid oklch(0.92 0.01 95); border-bottom: 1px solid oklch(0.92 0.01 95); } .site-privatecounsel.page-type-landing .c-cta + .c-feature-grid { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* 22d — "What Your Free Analysis Gives You": the recap of the offer, moved to sit directly above the closing band. Its job is to lead into the button, so it is built to hand off rather than to close: the four bullets take the SAME hairline-cell grammar as the 01-06 contents band at the top of the page, so the page opens and closes on one device, and the band's bottom padding collapses so it butts into the navy CTA instead of floating above it. Scoped by adjacency to the FAQ, the same coupling class F52 names for §20. */ .site-privatecounsel.page-type-landing .c-faq + .c-prose-section { background: oklch(0.965 0.007 95); border-top: 1px solid oklch(0.92 0.01 95); padding: 5rem 0 3.25rem; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section > div > div { max-width: none; display: grid; grid-template-columns: 1fr 1.35fr; /* min-content on the first row keeps the heading and its intro line together: the bullet list spans both rows, and an auto first row would let the list's tall first row push the intro paragraph down the page away from the heading it belongs to. */ grid-template-rows: min-content auto; column-gap: 5rem; align-items: start; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section h2 { grid-column: 1; font-size: 1.9rem; margin: 0; max-width: 20rem; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section p { grid-column: 1; color: var(--muted-foreground); font-size: 1rem; margin: 1rem 0 0; max-width: 26rem; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section ul { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 3rem; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section li { border-top: 1px solid oklch(0.90 0.012 95); padding-top: 1rem; margin: 0; font-size: 0.95rem; color: var(--muted-foreground); line-height: 1.6; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section li strong { display: block; color: var(--foreground); font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-size: 1.02rem; font-weight: 700; margin-bottom: 0.35rem; } /* 22e — the page took a SECOND navy band while this pass was in flight (a mid-page CTA after the pitfalls, pushed by the copy session). Two consequences, both handled here rather than left to be discovered: (1) The accent budget. The ruling allots four non-text cyan instances per page and this page already spends them on the hero eyebrow, the press tick, the chip edge and the CTA rule. A second CTA rule is a fifth. The MID-PAGE band drops its rule and keeps its weight from the ground alone; the closing band keeps the accent, because the accent belongs on the ask the page is built to reach. (2) Adjacency. The steps grid was `.c-feature-grid + .c-feature-grid + .c-feature-grid`; with a CTA now between the pitfalls and the steps, that chain no longer matches and the steps fall back to §13's white band and serif ordinals — which is what §20c was restoring anyway, so the break is benign. Restated explicitly so the next reader does not have to re-derive it: this is finding F52's coupling, observed live. */ .site-privatecounsel.page-type-landing .c-feature-grid + .c-cta h2::before { content: none; } /* the closing band follows immediately: no seam between the recap and the ask */ .site-privatecounsel.page-type-landing .c-faq + .c-prose-section + .c-cta { border-top: 0; } /* ── §23 /DOMESTICATION FOUNDER BAND, dispatch 110 — the band's height must follow a one-paragraph body, not a portrait sized for a much longer one. Three moves, in the order 110 puts them: (1) the portrait is re-proportioned and top-aligned, so the text sets the band's height; (2) the "As Seen In" strip folds onto the SAME plane — same ground, no seam, no white strip — so the band reads as one section (portrait, paragraph, press marks) and the page loses one of the seams it has too many of; (3) "More about me." stays a quiet text link in the site's register; the page keeps exactly one button and it asks for the analysis. Kept, per 110: portrait-on-navy with the chip, press marks as personal quote attributions. ── */ .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) { padding: 4.5rem 0 3rem; } .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) > div > div { grid-template-columns: 1fr minmax(240px, 292px); column-gap: 4.5rem; align-items: start; } .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) h2 { font-size: 1.9rem; max-width: 32rem; } .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type { align-self: start; grid-row: 1 / span 4; } /* 4:5 instead of the full frame: the band closes around one paragraph, and the crop stays inside what the 480x545 source honestly supports (F49's shoot replaces it). */ .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p:first-of-type img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; } /* the press strip, folded onto the founder band's plane */ .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section { background: transparent; border-top: 0; border-bottom: 1px solid oklch(0.92 0.01 95); padding: 0 0 3.25rem; } /* the quiet link: the register's text link, never a second button */ .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p a { color: var(--muted-foreground); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .site-privatecounsel.page-type-landing .c-prose-section:has(+ .c-prose-section) p a:hover { color: #112A4B; } @media (max-width: 900px) { /* the recap stacks; the hairline cells become one column and keep their grammar */ .site-privatecounsel.page-type-landing .c-faq + .c-prose-section > div > div { grid-template-columns: 1fr; row-gap: 2.5rem; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section ul { grid-column: 1; grid-row: auto; grid-template-columns: 1fr; gap: 1.5rem; } .site-privatecounsel.page-type-landing .c-faq + .c-prose-section h2, .site-privatecounsel.page-type-landing .c-faq + .c-prose-section p { max-width: none; } /* the folded press strip keeps its own air once the columns stack */ .site-privatecounsel.page-type-landing .c-prose-section + .c-prose-section { padding: 0 0 2.5rem; } } /* ── §24 HOME "WHAT MAKES THIS PRACTICE DIFFERENT" (2026-09-02, Jeramie): the four cards take the domestication pitfalls' grammar (§20b/§22c): darkened-parchment band with hairlines top and bottom, vertical hairlines between the cells, no card boxes. Scoped by adjacency: the second feature-grid on the home page. */ .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid { background: oklch(0.965 0.007 95); border-top: 1px solid oklch(0.92 0.01 95); border-bottom: 1px solid oklch(0.92 0.01 95); padding: 6rem 0 6.5rem; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid > div > div { gap: 0 3rem; margin-top: 3rem; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid > div > div > div { border-left: 1px solid oklch(0.9 0.012 95); padding-left: 1.5rem; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid > div > div > div:first-child { border-left: 0; padding-left: 0; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid > div > div > div h3 { font-size: 1.15rem; margin-bottom: 0.55rem; } .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid > div > div > div p { font-size: 0.95rem; } @media (max-width: 900px) { .site-privatecounsel.page-home .c-feature-grid + .c-feature-grid > div > div > div { border-left: 0; padding-left: 0; } } /* ── §25 FOOTER COLUMN ROW (2026-09-06, Jeramie): the ruled footer carries FOUR link columns (Services, Plans, Tools, Firm) and the framework grid is `2fr 1fr 1fr 1fr` — the brand block eats the first track, so the fourth column wrapped onto a row of its own with three empty tracks beside it. His ruling: move the wordmark and blurb into a full-width row of their own and give the four columns the row underneath. The mobile block already did exactly this at <=900px; this is the same move at desktop, so the two breakpoints now share one shape instead of disagreeing. Generalising: a fixed track count plus a wide first cell is a wrap waiting for the site that adds one more column — the framework default is filed for the presentation lane. ── */ /* SUPERSEDED 2026-09-10 (dispatch 015, HANDBACK §1.1; taste store ACCEPTED 2026-09-10): "The footer that you're using on these pages is better than the current one. So I accept that as a replacement." Same person, later ruling. The brand block and the FOUR link columns now share ONE row — 4fr 2fr 2fr 2fr 2fr, the F1 proportions — at desktop; the brand-on-its-own-row shape this section introduced survives only below 900px, where the framework and §21b already stack it. §25's number is kept so references resolve; do not restore the two-row desktop shape. */ .site-privatecounsel .c-footer > div > div:first-child { grid-template-columns: 4fr 2fr 2fr 2fr 2fr; gap: 3rem; } .site-privatecounsel .c-footer > div > div:first-child > div:first-child { grid-column: auto; } .site-privatecounsel .c-footer > div > div:first-child > div:first-child > p { font-size: 0.88rem; max-width: 20rem; margin-top: 1.1rem; } .site-privatecounsel .c-footer h4 { font-size: 0.72rem; letter-spacing: 0.12em; margin-bottom: 1.1rem; } .site-privatecounsel .c-footer li { margin-bottom: 0.6rem; } .site-privatecounsel .c-footer > div > div:last-child { margin-top: 3rem; padding-top: 1.4rem; font-size: 0.8rem; } @media (max-width: 900px) { .site-privatecounsel .c-footer > div > div:first-child { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; /* §21b's mobile rhythm, restated here because the 3rem desktop gap above is later in the cascade */ } .site-privatecounsel .c-footer > div > div:first-child > div:first-child { grid-column: 1 / -1; } } /* ── §26 TOOL PAGES (2026-09-06, Jeramie): a tool page is NOT a landing page. It is the head, the form, and the footer; anything that sells the tool belongs on the form's own first screen. The hero survives only to carry the H1 (the form-embed card layout renders no heading of its own), so it is compressed to a title band: no CTA, no subhead, and the bottom padding released so the form sits under its title rather than a screen below it. Filed for the presentation lane: form-embed's card layout hard-codes `max-width:34rem` as an INLINE style, which no stylesheet can widen, so "full-width form" needs the framework change, not a !important fight this file would lose at the next island edit. ── */ .site-privatecounsel.page-type-tool .c-hero { padding-top: 3.5rem; padding-bottom: 0; } .site-privatecounsel.page-type-tool .c-form-embed { min-height: 0; padding-top: 1.5rem; } /* ══ DISPATCH 014 — §27-§32. The §20/§22/§23 spine was re-keyed this round from page-services-domestication to page-type-landing + structural anchors (see site-css-edits.md): contents = the page's FIRST feature-grid (:not(.c-feature-grid ~ .c-feature-grid)), pitfalls = a grid directly after a grid, steps = the grid after the mid-page CTA (.c-cta + .c-feature-grid), and numbered grids are excluded structurally with :not(:has(> div > div > div > div)) — the .num div exists only in the numbered variant's markup, so the discrimination is variant-driven without needing a variant-* class the framework does not emit (finding F55). Domestication renders from the same declarations under broader keys: pixel-stable by construction. ACCENT BUDGETS this round: service split-hero pages 4 (eyebrow, press tick, chip edge, closing CTA rule; mid-page CTA rule dropped by the §22e rule, now page-type); plan pages 3 (eyebrow, price-plate edge, closing CTA rule); /services 1 (eyebrow; the illustrations carry the cyan); /plans 1 (eyebrow); legal 0. ══ */ /* ── §27 SPLIT HERO (page-type) — hero variant="split" with a media portrait has never been styled on this site: the framework centres the img above the copy at 220px and leaves the right half empty (dispatch 014 problem A). The treatment is the home/advisors grammar at the page-type level: copy left, portrait right on the navy ground block, offset up-and-right, COLOUR register (ruled 2026-09-02). Scoped by :has(> div > img) so heroes without media (index, plan, legal) never match. /advisors is page-type-about and keeps its own §19 crop. No chip here: the founder band below carries the chip (§12), and a second chip would double both the device and the accent. ── */ .site-privatecounsel.page-type-landing .c-hero:has(> div > img) { background: transparent; color: var(--foreground); padding: 5rem 0 6rem; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div { display: grid; grid-template-columns: 1.1fr 0.9fr; column-gap: 5rem; align-items: center; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div > * { grid-column: 1; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div > img { grid-column: 2; grid-row: 1 / span 4; justify-self: end; align-self: center; width: 100%; max-width: 21rem; margin: 0; /* tight 3:4, framing high — the same interim source as home; the founder band below shows the fuller frame, so the two read as different photographs (F47/F49) */ aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 10%; /* V4 ground-and-offset, values identical to §8/§12/§19 — one family */ filter: saturate(0.9) contrast(1.03); box-shadow: 1.25rem -1.25rem 0 0 #112A4B, 0 18px 42px rgba(17, 42, 75, 0.16); } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) h1 { font-size: clamp(2.2rem, 3.2vw, 3.1rem); line-height: 1.16; max-width: 34rem; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div > p { max-width: 33rem; } /* Landing hero eyebrow rule — ACCENT 1 on every landing page (the grammar §8 gives the home hero and §14 gives the form-embed hero, stated once for the c-hero openers: split, index, and plan dark heroes alike). */ .site-privatecounsel.page-type-landing .c-hero > div > p:first-of-type::before { content: ""; display: block; width: 2.5rem; height: 2px; background: #00D4FF; margin-bottom: 1.1rem; } /* ── §28 PLAN PAGES: THE PRICE IS A DESIGNED ELEMENT (dispatch 014 problem C). The dark hero's right half held nothing; the price was the third sentence of a body paragraph. The price moves out of the subhead (page JSON, disclosed in findings) onto a white PRICE PLATE in the hero's right half: value in the display serif, terms beneath in the quiet register, cyan top edge (the chip grammar, ACCENT 2 of 3 on these pages). Drawn as the container's two pseudo-elements (the §8 V9 chip mechanism — the vocabulary has no price slot, F56): ::before is the plate's value half, bottom-anchored to the H1's row; ::after is the terms half, top-anchored to the next row; row-gap 0 makes them contiguous by construction at every copy length, so the composition survives the parallel copy rework. By-application (General Counsel) takes the SAME plate with "By application" in the value position: deliberately different, never missing data. ── */ .site-privatecounsel.page-plans-general-counsel .c-hero, .site-privatecounsel.page-plans-contract-counsel .c-hero, .site-privatecounsel.page-plans-compliance-counsel .c-hero { padding: 5.5rem 0 6rem; } .site-privatecounsel.page-plans-general-counsel .c-hero > div, .site-privatecounsel.page-plans-contract-counsel .c-hero > div, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div { display: grid; grid-template-columns: 1.15fr 0.85fr; column-gap: 5rem; row-gap: 0; } .site-privatecounsel.page-plans-general-counsel .c-hero > div > *, .site-privatecounsel.page-plans-contract-counsel .c-hero > div > *, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div > * { grid-column: 1; } .site-privatecounsel.page-plans-general-counsel .c-hero h1, .site-privatecounsel.page-plans-contract-counsel .c-hero h1, .site-privatecounsel.page-plans-compliance-counsel .c-hero h1 { font-size: clamp(2.2rem, 3.4vw, 3.15rem); line-height: 1.16; max-width: 36rem; } .site-privatecounsel.page-plans-general-counsel .c-hero > div > p, .site-privatecounsel.page-plans-contract-counsel .c-hero > div > p, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div > p { max-width: 33rem; } /* the plate: value half */ .site-privatecounsel.page-plans-general-counsel .c-hero > div::before, .site-privatecounsel.page-plans-contract-counsel .c-hero > div::before, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div::before { grid-column: 2; grid-row: 2; justify-self: end; align-self: end; width: 19rem; background: #fff; border-top: 2px solid #00D4FF; padding: 1.9rem 2.1rem 0.35rem; font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-weight: 700; font-size: 2.05rem; line-height: 1.2; color: #112A4B; } /* the plate: terms half */ .site-privatecounsel.page-plans-general-counsel .c-hero > div::after, .site-privatecounsel.page-plans-contract-counsel .c-hero > div::after, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div::after { grid-column: 2; grid-row: 3 / span 2; justify-self: end; align-self: start; width: 19rem; background: #fff; padding: 0.3rem 2.1rem 1.8rem; font-size: 0.85rem; line-height: 1.55; color: var(--muted-foreground); white-space: pre-line; } /* PORT-TIME SUBSTITUTION, dispatch 014. Design delivered the ruled figures ($500/$5,000, $150/$1,500) here. The parallel copy session removed every price figure from these pages the same day and replaced it with "shown at sign-up" (sites 115b173/1127d4b), so the plates now carry each page's OWN current wording rather than overriding a live copy decision. Relocated, never authored. Whether figures return to the pages is Jeramie's call, and it also needs the brand-definition Part 2 amendment Design flagged ("No pricing anywhere; figures never"). */ .site-privatecounsel.page-plans-general-counsel .c-hero > div::before { content: "By application"; } .site-privatecounsel.page-plans-general-counsel .c-hero > div::after { content: "Quoted flat, in writing.\ALimited availability."; } .site-privatecounsel.page-plans-contract-counsel .c-hero > div::before { content: "One flat price"; } .site-privatecounsel.page-plans-contract-counsel .c-hero > div::after { content: "Monthly or annual,\Ashown at sign-up."; } .site-privatecounsel.page-plans-compliance-counsel .c-hero > div::before { content: "One flat price"; } .site-privatecounsel.page-plans-compliance-counsel .c-hero > div::after { content: "Monthly or annual,\Ashown at sign-up."; } /* ── §29 /PLANS INDEX (problem B) — three plans, three prices, no SaaS table. The homepage directory grammar without illustrations: hairline-top cells on the parchment, no card boxes, plan name in the serif, THE PRICE as the second line in the display serif (the designed element the index was missing), terms quiet beneath, body, arrow. Values ride ::before/::after per cell (F56), order-coupled to plans.json tile order (the §10/F52 coupling class, restated in findings). ── */ .site-privatecounsel.page-plans .c-hero, .site-privatecounsel.page-services .c-hero { background: transparent; color: var(--foreground); /* 2026-09-08 (Jeramie, /plans walk): "it pushes the actual plans down below the fold". Measured on the 2026-09-07 staging capture at 1440: the first plan hairline sat at 706px, the plan name at 760 and the price at 826, against a ~740px fold on a 1440x900 laptop. 208px of stacked padding (72 hero-top + 64 hero-bottom + 72 grid-top) separated the header from the first plan. That is taste-store failure #2 ("dead space is not composition") on a page whose whole job is the three cells below. Air here, not compression elsewhere. */ padding: 3rem 0 2rem; } .site-privatecounsel.page-plans .c-hero h1, .site-privatecounsel.page-services .c-hero h1 { font-size: clamp(2.2rem, 3.2vw, 2.9rem); line-height: 1.16; max-width: 40rem; } .site-privatecounsel.page-plans .c-hero > div > p, .site-privatecounsel.page-services .c-hero > div > p { max-width: 38rem; } .site-privatecounsel.page-plans .c-feature-grid { background: transparent; border-top: 0; border-bottom: 0; padding: 2.5rem 0 6.5rem; } .site-privatecounsel.page-plans .c-feature-grid > div > div { gap: 0 4rem; margin-top: 0; } .site-privatecounsel.page-plans .c-feature-grid a { display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; background: transparent; border: 0; border-top: 1px solid oklch(0.92 0.01 95); border-radius: 0; padding: 2.25rem 0 2.5rem; transition: none; } .site-privatecounsel.page-plans .c-feature-grid a h3 { grid-row: 1; font-size: 1.35rem; margin: 0 0 1rem; } .site-privatecounsel.page-plans .c-feature-grid a::before { grid-row: 2; font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: #112A4B; margin: 0 0 0.2rem; } .site-privatecounsel.page-plans .c-feature-grid a::after { grid-row: 3; font-size: 0.82rem; color: var(--muted-foreground); margin: 0 0 1.1rem; } .site-privatecounsel.page-plans .c-feature-grid a p { grid-row: 4; font-size: 0.95rem; color: var(--muted-foreground); max-width: 22rem; margin: 0; } .site-privatecounsel.page-plans .c-feature-grid a span { grid-row: 5; margin-top: 1.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #112A4B; } .site-privatecounsel.page-plans .c-feature-grid a:hover { border-top-color: #112A4B; } .site-privatecounsel.page-plans .c-feature-grid a:hover span { color: var(--accent-brand-hover); } /* Keyed to each tile's own href, not its position. Design delivered these as nth-child(1|2|3) and disclosed the coupling (findings delta item 1); on a page that quotes money, a tile reorder in plans.json would have silently swapped the prices. Port-time correction, dispatch 014. */ .site-privatecounsel.page-plans .c-feature-grid a[href="/plans/general-counsel"]::before { content: "By application"; } .site-privatecounsel.page-plans .c-feature-grid a[href="/plans/general-counsel"]::after { content: "Quoted flat. Limited availability."; } .site-privatecounsel.page-plans .c-feature-grid a[href="/plans/contract-counsel"]::before { content: "One flat price"; } .site-privatecounsel.page-plans .c-feature-grid a[href="/plans/contract-counsel"]::after { content: "Monthly or annual, shown at sign-up."; } .site-privatecounsel.page-plans .c-feature-grid a[href="/plans/compliance-counsel"]::before { content: "One flat price"; } .site-privatecounsel.page-plans .c-feature-grid a[href="/plans/compliance-counsel"]::after { content: "Monthly or annual, shown at sign-up."; } /* ── §30 /SERVICES INDEX (problem B) — the ruled homepage directory carried over whole: the §10 grammar and its four inline isometrics now ride comma-extended selectors (site-css-edits.md E1-E18), and /services lists the same four services in the same order, so the nth-child illustration mapping holds 1:1 (F Reorg, QSBS, Exit Tax Planning on the deal-structure drawing, Domestication). Here the band drops §13's white ground back to the parchment: the index IS the directory, not a band inside a page. NO accent — the illustrations carry the cyan. ── */ .site-privatecounsel.page-services .c-feature-grid { background: transparent; border-top: 0; border-bottom: 0; padding: 2.5rem 0 6rem; } .site-privatecounsel.page-services .c-feature-grid > div > div { margin-top: 0; } /* ── §31 LEGAL PAGES (problem D) — page-type-legal had ZERO rules; the 2026-09-07 ruling ("no page ships on a framework default") is the reason this round exists. One treatment for /privacy, /terms, /disclaimer, sized for a reader looking for one answer: title band with the H1; "Last updated" as a designed meta line (the date is the second ruled copy exception); an anchored ON THIS PAGE contents block (the anchor prop, already in the shipped vocabulary, carries the links); a 44rem reading measure; hairline-ruled section heads; quiet list rhythm. The least decorated page type on the site: ZERO cyan, no plates, no illustration. Page JSON restructure (this round): the single 3,700-word prose-section is split into one prose-section per ## section, heading as the component's heading prop, anchor per section — every word carried verbatim. ── */ .site-privatecounsel.page-type-legal { --section-padding-y: 0rem; } .site-privatecounsel.page-type-legal .c-hero { background: transparent; color: var(--foreground); padding: 3.75rem 0 2.25rem; border-bottom: 1px solid oklch(0.92 0.01 95); } .site-privatecounsel.page-type-legal .c-hero h1 { font-size: clamp(2rem, 2.8vw, 2.6rem); margin-bottom: 0; } .site-privatecounsel.page-type-legal .c-hero > div > p:first-of-type { color: var(--muted-foreground); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; margin-bottom: 1rem; } /* the reading measure: 44rem ≈ 67 characters at this size */ .site-privatecounsel.page-type-legal .c-prose-section > div > div { max-width: 44rem; } .site-privatecounsel.page-type-legal .c-prose-section { scroll-margin-top: 7rem; } /* section heads: hairline-ruled, stepped down from the marketing scale */ .site-privatecounsel.page-type-legal .c-prose-section h2 { font-size: 1.45rem; border-top: 1px solid oklch(0.92 0.01 95); padding-top: 1.6rem; margin: 3rem 0 0.9rem; } .site-privatecounsel.page-type-legal .c-prose-section h3 { font-size: 1.08rem; margin: 1.9rem 0 0.55rem; } .site-privatecounsel.page-type-legal .c-prose-section p { font-size: 0.98rem; line-height: 1.7; margin-bottom: 0.9rem; } .site-privatecounsel.page-type-legal .c-prose-section ul { font-size: 0.95rem; line-height: 1.65; margin: 0 0 1.1rem 1.1rem; } .site-privatecounsel.page-type-legal .c-prose-section li { margin-bottom: 0.3rem; } .site-privatecounsel.page-type-legal .c-prose-section li::marker { color: var(--accent-brand); } .site-privatecounsel.page-type-legal main > section:last-child { padding-bottom: 5.5rem; } /* /privacy: the repeated short-item use lists compress into columns — the page was 12,360px tall at 1440 with every list a single column (F57 carries the evidence). Scoped to the slug: the eleven-item repeats are this document's own shape. */ .site-privatecounsel.page-privacy .c-prose-section ul { column-width: 14rem; column-gap: 2.75rem; } .site-privatecounsel.page-privacy .c-prose-section li { break-inside: avoid; } /* intro block: "Last updated" as the designed meta line, then the preamble */ .site-privatecounsel.page-type-legal .c-hero + .c-prose-section { padding-top: 2.25rem; } .site-privatecounsel.page-type-legal .c-hero + .c-prose-section p:first-of-type { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--muted-foreground); margin-bottom: 1.9rem; } .site-privatecounsel.page-type-legal .c-hero + .c-prose-section p:first-of-type strong { font-weight: 600; color: var(--muted-foreground); } /* contents block ("On This Page"): label + anchored links in columns */ .site-privatecounsel.page-type-legal .c-hero + .c-prose-section + .c-prose-section { padding: 0.75rem 0 0; } .site-privatecounsel.page-type-legal .c-hero + .c-prose-section + .c-prose-section h2 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); border-top: 1px solid oklch(0.92 0.01 95); padding-top: 1.5rem; margin: 0 0 1rem; } .site-privatecounsel.page-type-legal .c-hero + .c-prose-section + .c-prose-section ul { list-style: none; margin: 0; padding: 0 0 1.5rem; column-width: 13rem; column-gap: 2.75rem; } .site-privatecounsel.page-type-legal .c-hero + .c-prose-section + .c-prose-section li { margin: 0 0 0.5rem; font-size: 0.92rem; break-inside: avoid; } .site-privatecounsel.page-type-legal .c-hero + .c-prose-section + .c-prose-section a { color: var(--foreground); text-decoration: none; } .site-privatecounsel.page-type-legal .c-hero + .c-prose-section + .c-prose-section a:hover { color: #112A4B; text-decoration: underline; text-underline-offset: 3px; } /* ── §32 MOBILE (dispatch 014 surfaces; extends §21/§21b) ── */ @media (max-width: 900px) { /* split hero stacks: message first, portrait after the CTAs (the §21 order) */ .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div { grid-template-columns: 1fr; row-gap: 3rem; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div > img { grid-column: 1; grid-row: auto; order: 10; justify-self: start; max-width: 20rem; box-shadow: 0.85rem -0.85rem 0 0 #112A4B, 0 14px 32px rgba(17, 42, 75, 0.16); } /* plan hero: the plate follows the CTAs as a stacked block, both halves full width */ .site-privatecounsel.page-plans-general-counsel .c-hero > div, .site-privatecounsel.page-plans-contract-counsel .c-hero > div, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div { grid-template-columns: 1fr; } .site-privatecounsel.page-plans-general-counsel .c-hero > div::before, .site-privatecounsel.page-plans-contract-counsel .c-hero > div::before, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div::before { grid-column: 1; grid-row: 5; justify-self: start; align-self: start; margin-top: 2.5rem; width: 100%; max-width: 19rem; /* 2026-09-10 (SIT-014): the plate is content-box, so width:100% PLUS its 2.1rem side padding overflowed the 375px viewport by 12px (measured 387) and every plan page scrolled sideways. Border-box keeps the plate inside the column it was given. */ box-sizing: border-box; } .site-privatecounsel.page-plans-general-counsel .c-hero > div::after, .site-privatecounsel.page-plans-contract-counsel .c-hero > div::after, .site-privatecounsel.page-plans-compliance-counsel .c-hero > div::after { grid-column: 1; grid-row: 6; justify-self: start; width: 100%; max-width: 19rem; box-sizing: border-box; } } @media (max-width: 600px) { .site-privatecounsel.page-type-landing .c-hero:has(> div > img) { padding: 3.25rem 0 4.25rem; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div { row-gap: 2.75rem; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) h1 { font-size: 2.05rem; } .site-privatecounsel.page-type-landing .c-hero:has(> div > img) > div > img { max-width: 17.5rem; } .site-privatecounsel.page-plans-general-counsel .c-hero, .site-privatecounsel.page-plans-contract-counsel .c-hero, .site-privatecounsel.page-plans-compliance-counsel .c-hero { padding: 3.5rem 0 4.5rem; } .site-privatecounsel.page-plans-general-counsel .c-hero h1, .site-privatecounsel.page-plans-contract-counsel .c-hero h1, .site-privatecounsel.page-plans-compliance-counsel .c-hero h1 { font-size: 2.05rem; } .site-privatecounsel.page-plans .c-hero, .site-privatecounsel.page-services .c-hero { padding: 3rem 0 2.75rem; } .site-privatecounsel.page-plans .c-hero h1, .site-privatecounsel.page-services .c-hero h1 { font-size: 2rem; } .site-privatecounsel.page-plans .c-feature-grid, .site-privatecounsel.page-services .c-feature-grid { padding: 3.5rem 0 4.5rem; } .site-privatecounsel.page-plans .c-feature-grid a { padding: 1.9rem 0 2.1rem; } .site-privatecounsel.page-type-legal .c-hero { padding: 2.75rem 0 1.75rem; } .site-privatecounsel.page-type-legal .c-hero h1 { font-size: 1.8rem; } .site-privatecounsel.page-type-legal .c-prose-section h2 { font-size: 1.3rem; margin-top: 2.5rem; } .site-privatecounsel.page-privacy .c-prose-section ul { column-width: 11rem; column-gap: 2rem; } } /* ── §33 ADVISOR CALLOUT ON A SPLIT-HERO LANDING PAGE (2026-09-08, Jeramie: "See the attorney/advisor callout here: /services/domestication. We need something like that, but tailored to the service.") WHY THIS SECTION EXISTS AT ALL. Dispatch 014 re-keyed the domestication spine off the page slug onto page-type-landing plus structural anchors, and it re-keyed the contents grid, the pitfalls grid and the steps grid. It did NOT re-key the advisor callout, which §14 still draws from `.c-form-embed li:nth-child(4)`. A page that opens with hero variant="split" has no form-embed and therefore no bullet 4, so /services/qsbs and /services/exit-tax-planning had no callout at all — the same "anchored on the form" defect the round was briefed to remove, surviving in the one component the round did not touch. Found on the walk. THE MECHANISM. The callout is expressed as a prose-section carrying anchor="advisors", which renders as id="advisors" on the section root, and is styled here into the §14 card. That keys the treatment to CONTENT THE SITE GOVERNS (its own anchor value) rather than to the opener, so any future landing page gets the callout by adding the same block, whether it opens with a form or a split hero. The heading string stays in CSS exactly as §14 keeps it, so the JSON carries only the body copy; the string is the one ruled 2026-09-02 (a question, so the owner reads it as conditional and the advisor self-selects). NO cyan: the card earns weight from ground and shadow, matching §14. COUPLING, DISCLOSED. `> div > div` reaches the prose container and the prose block by depth, the same structural class the round's `:has()` tests accept. F42 (the advisor-callout schema) is the framework ask that would retire both this and §14; until it lands there are two mechanisms for one object, which is the cost of the vocabulary gap, not a design choice. ── */ .site-privatecounsel.page-type-landing .c-prose-section#advisors { padding: 0 0 3rem; background: transparent; } .site-privatecounsel.page-type-landing .c-prose-section#advisors > div > div { position: relative; max-width: 34rem; margin: 0; padding: 1.5rem 1.6rem 1.6rem 4.35rem; background: var(--card, #fff); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(17, 42, 75, 0.06), 0 12px 30px rgba(17, 42, 75, 0.08); font-size: 0.95rem; color: var(--muted-foreground); } .site-privatecounsel.page-type-landing .c-prose-section#advisors > div > div::before { content: ""; display: block; position: absolute; left: 1.6rem; top: 1.5rem; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2'/%3E%3Ccircle cx='17.5' cy='8.5' r='2.5'/%3E%3Cpath d='M19 21v-1.5a4.5 4.5 0 0 0-3-4.24'/%3E%3C/svg%3E") center / contain no-repeat; } /* the 26px line box puts the heading on the icon's horizontal line by construction, not by a hand-tuned nudge: both start at the card's 1.5rem padding-top and both are 26px tall. */ .site-privatecounsel.page-type-landing .c-prose-section#advisors > div > div > p:first-of-type::before { content: "Are you an attorney or advisor?"; display: block; font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-weight: 700; font-size: 1.05rem; color: var(--foreground); line-height: 26px; margin-bottom: 0.55rem; } .site-privatecounsel.page-type-landing .c-prose-section#advisors > div > div > p { margin: 0; } .site-privatecounsel.page-type-landing .c-prose-section#advisors a { color: #112A4B; text-decoration: underline; text-underline-offset: 3px; } /* ══ DISPATCH 015 — §34. Page-scoped port of the elements Jeramie ACCEPTED from the dispatch-015 alternates (HANDBACK §1; taste store ACCEPTED 2026-09-10; TM-2308). His guardrail binds this block: only the named elements change, and every rule is scoped to the page being built (page-services-domestication, composed with page-type-landing so the page rule outranks the §13/§20/§22 page-type rules it replaces) until he accepts the page, after which the accepted rules promote to page-type-* and roll to the sibling pages. 2026-09-10, later the same day: domestication passed his walk (three corrections, all landed), QSBS and the tool page followed, and on "Move forward with all of those" the rules PROMOTED to the SERVICE-LANDING SET — :is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) — the anchors re-keyed off structure the four pages share (the page's FIRST grid; the grid whose items carry the numbered variant's .num div; the #about-jeramie anchor). NOT page-type-landing: the three plan pages carry that hook too and are a different family (§28), not "similar pages". §34b (pitfalls) stays domestication-only: no other page has a pitfalls band. §35 (type-L opener) serves the two no-form pages, QSBS and exit-tax-planning; §36 (tool shell) serves page-type-tool. NOT ported from the same renders, by his instruction (SIT-014 2026-09-10 (second) keep-list): the founder chip, portrait side and folded press strip stay as §12/§23 render them; no cyan rule over the founder heading (accent budget is spent: eyebrow, press tick, chip edge, closing CTA rule); no invented labels. Copy is untouched — every string comes from domestication.json. ══ */ /* ── §34a POINT LIST (HANDBACK §1.8, from F2 "Make the Move Without Losing Your Legal Standing"; on QSBS "Build the Exclusion In From Day One"): the page's first grid renders in the framework's sticky-side layout (app PR #801, D1: page JSON `layout: sticky-side`, `marker: glyph`, `headCta`), which pins the head beside hairline rows and gives each row a marker column. The rows are unnumbered — the points are not a sequence — so the marker is the pale-blue rotated square the founder list carries (§34d): one marker language per page (Jeramie 2026-09-10, on the first build: "needs some type of decoration to replace the numbers"). The head link takes the site's arrow-link register (§35). Ground: parchment, no band — F2 sets the pattern on the open page ground. The anchor repeats §20a's own :not(.c-feature-grid ~ .c-feature-grid) qualifier so this block outranks it by construction. ── */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) { background: transparent; border-top: 0; border-bottom: 0; padding: 6rem 0 6.5rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div { column-gap: 5rem; } /* the head: the framework pins it; the site sets the type */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > div { margin-top: 0; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > div > h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 0; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > div > p { margin: 0.9rem 0 0; max-width: none; /* the intro may be two sentences as two paragraphs (Jeramie 2026-09-10); the framework escapes the prop, so the JSON carries a blank line and pre-line renders it */ white-space: pre-line; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > div > a { color: #112A4B; border-bottom-color: #112A4B; font-size: 1rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > div > a::after { content: " \2192"; } /* the rows */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > ol > li { border-top-color: oklch(0.92 0.01 95); } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > ol > li > span { width: 0.55rem; height: 0.55rem; margin: 0.3rem 0 0 0.15rem; background: #96BAE9; transform: rotate(45deg); } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > ol > li h3 { font-size: 1.02rem; margin-bottom: 0.4rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > ol > li p { font-size: 0.93rem; } /* ── §34b PITFALLS, illustrated narrative (HANDBACK §1.4, F1): iso-domestication on the left, heading + subhead + the three pitfalls stacked and hairline-separated on the right, on the darkened parchment band. The illustration is the container's ::before, grid-placed, carried as an INLINE data:image/svg+xml URI — the asset lane refuses .svg by design (the constraint recorded above §10), so it rides the way §10's four directory isometrics already do, minus the asset's white backdrop rect: on the darkened band the drawing sits on the ground, as F1 draws it. The §22b ✴ mark was part of the treatment F1 replaces and is retired with it. ── */ .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid { background: oklch(0.965 0.007 95); border-top: 1px solid oklch(0.92 0.01 95); border-bottom: 1px solid oklch(0.92 0.01 95); padding: 5.5rem 0; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div { display: grid; grid-template-columns: 5fr 7fr; column-gap: 4.5rem; align-items: center; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div::before { content: ""; grid-column: 1; grid-row: 1 / span 3; align-self: center; justify-self: center; width: 100%; max-width: 17rem; aspect-ratio: 4 / 3; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: an entity block moved from one state plate to another, its dashed outline left behind'%3E %3Ccircle cx='240.0' cy='118.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='128.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='138.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='78.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='128.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='138.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='138.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='148.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='158.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='168.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='178.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='188.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='278.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='198.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='278.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='288.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='402.0' cy='208.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='218.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='228.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='238.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='248.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='258.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='268.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='278.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='288.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='298.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E %3Cpolygon points='84,217 150,254 150,266 84,229' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='216,217 150,254 150,266 216,229' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='150,180 216,217 150,254 84,217' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='264,217 330,254 330,266 264,229' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='396,217 330,254 330,266 396,229' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='330,180 396,217 330,254 264,217' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='114,220 150,240 150,188 114,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'%3E%3C/polygon%3E %3Cpolygon points='186,220 150,240 150,188 186,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'%3E%3C/polygon%3E %3Cpolygon points='150,148 186,168 150,188 114,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'%3E%3C/polygon%3E %3Cpolygon points='294,220 330,240 330,180 294,160' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='366,220 330,240 330,180 366,160' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E %3Cpolygon points='330,140 366,160 330,180 294,160' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round' fill-opacity='0.3'%3E%3C/polygon%3E %3Cline x1='192.0' y1='242.0' x2='264.0' y2='238.0' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round'%3E%3C/line%3E %3Cpolygon points='263.0,243.6 272.1,237.5 262.4,232.3' fill='%23112A4B'%3E%3C/polygon%3E %3C/svg%3E") center / contain no-repeat; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > h2 { grid-column: 2; font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 0; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > p { grid-column: 2; margin: 0.7rem 0 1.9rem; max-width: none; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div { grid-column: 2; grid-template-columns: 1fr; gap: 0; margin-top: 0; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div > div { border-left: 0; padding-left: 0; border-top: 1px solid oklch(0.9 0.012 95); padding: 1.4rem 0; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div > div:first-child { border-top: 0; padding-top: 0; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div > div::before { content: none; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div > div h3 { font-size: 1.05rem; margin-bottom: 0.35rem; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div > div p { font-size: 0.95rem; } /* ── §34c STEP LINE (HANDBACK §1.3, F1 "How the Move Works"): the numbered grid — anchored by its variant (only numbered items carry the .num div, finding F55) — has its ordinal become a square outlined numeral — 2.4rem, 1px navy, serif bold, white plate — and a hairline runs from each numeral to the next step; three across, stacking at 900px with the line dropped. White band, hairlines top and bottom, as §13 already grounds it. ── */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 0 0 3rem; } /* the guarantee line is the band's subheading on domestication (Jeramie 2026-09-10: moved out of step 3's body); it tucks under the heading and carries the 3rem down to the step line. A band with no subheading (QSBS) keeps the heading's own 3rem. */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > p { margin: -2.5rem 0 3rem; max-width: 44rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div { gap: 3rem; margin-top: 0; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div { position: relative; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div::after { content: ""; position: absolute; top: 1.2rem; left: 3.5rem; right: -2.2rem; height: 1px; background: oklch(0.92 0.01 95); } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div:last-child::after { content: none; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div > div:first-child { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid #112A4B; background: #fff; color: #112A4B; font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-size: 1rem; font-weight: 700; line-height: 1; margin-bottom: 1.1rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div h3 { font-size: 1.02rem; margin-bottom: 0.35rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div p { font-size: 0.93rem; } /* ── §34d FOUNDER BULLETS (HANDBACK §1.2, F1 founder band; every page once accepted): the four "how I work" points take the styled list — small rotated pale-blue squares as markers, ink text, no bare discs. Only the list changes; the band, chip, portrait and folded press strip are the §12/§23 composition and stay. The list is pinned to the text column: it was auto-placed, which at 375px dropped it into the portrait column and ran the page to 509px (SIT-014 finding 21) — pinning it is the mechanical consequence of styling it. ── */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-prose-section#about-jeramie > div > div > ul { grid-column: 1; list-style: none; /* Jeramie 2026-09-10: "too much space before, not enough after" — the paragraph above already carries 1.1rem, so the list adds a quarter; the link below gets the 1.4rem. */ margin: 0.25rem 0 1.4rem; padding: 0; display: grid; gap: 0.8rem; font-size: 0.95rem; color: var(--foreground); } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-prose-section#about-jeramie > div > div > ul > li { position: relative; padding-left: 1.6rem; margin: 0; line-height: 1.6; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-prose-section#about-jeramie > div > div > ul > li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem; background: #96BAE9; transform: rotate(45deg); } /* §34 narrow viewports: the two-column compositions stack (F1/F2 both release at 900px), the step line drops its joining hairline, the mobile head scale of §21b holds. The founder band stacks here too: it never had a stacking rule (§21 gave it only a portrait cap), so at 375px it kept two columns and set the text in a 181px track beside an empty one — the second half of SIT-014 finding 21, now visible once the list stopped overflowing. Message first, portrait after, the §21 order. */ @media (max-width: 900px) { .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div { row-gap: 2.25rem; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div { margin-top: 2.25rem; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div::before { margin-bottom: 2rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-prose-section#about-jeramie > div > div { grid-template-columns: 1fr; row-gap: 0; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-prose-section#about-jeramie > div > div > p:first-of-type { grid-column: 1; grid-row: auto; order: 10; margin-top: 2.5rem; max-width: 300px; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div, .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > h2, .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > p { grid-column: 1; grid-row: auto; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div::before { grid-column: 1; grid-row: 1; max-width: 14rem; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > p { margin: 0.7rem 0 0; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div > div:first-child { border-top: 0; padding-top: 0; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div { gap: 2rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div::after { content: none; } } @media (max-width: 600px) { .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) { padding: 4rem 0 4.5rem; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid { padding: 4rem 0 4.5rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > div > h2, .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > h2, .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > h2 { font-size: 1.55rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > h2 { margin-bottom: 2.25rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > p { margin: -1.75rem 0 2.25rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:not(.c-feature-grid ~ .c-feature-grid) > div > ol > li { padding: 1.4rem 0; } .site-privatecounsel.page-type-landing.page-services-domestication .c-feature-grid + .c-feature-grid > div > div > div { padding: 1.25rem 0; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-feature-grid:has(> div > div > div > div) > div > div > div > div:first-child { font-size: 1rem; margin-bottom: 0.9rem; } } /* ── §35 /SERVICES/QSBS — the type-L opener (HANDBACK §1.7; L1-card-hero): the split hero gives up the portrait (page JSON: media removed — "the portrait is not a default hero image", RULED 2026-09-10; it keeps its one appearance on the founder band) and its button (L1's lintel carries none: the band directly beneath is the call to action). What is left is the compact lintel — accent rule, eyebrow, H1, lead — and under it the WIDE ANALYSIS BAND: the page's mid-page `cta` moved up to sit after the hero (page JSON) and restyled here by adjacency: Brand Accent ground #E9EDF2, hairline border, iso-qsbs left (~5 cols), serif heading + underlined arrow link right (~7 cols). Its supporting line is an unwritten copy slot (HANDBACK §4) and is omitted rather than invented. The band's any-placement hook (a variant-* class on cta) is the lane item; until it lands the band exists only here, hero-adjacent. Accent budget on this page: eyebrow rule, press tick, chip edge, closing CTA rule — the band carries NO cyan of its own (the illustration holds it). ── */ .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero { padding: 3.25rem 0 2.75rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); max-width: 46rem; margin: 0.7rem 0 1.1rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero > div > p:not(:first-of-type) { max-width: 32rem; font-size: 1.08rem; color: var(--muted-foreground); } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta { background: transparent; color: var(--foreground); padding: 0 0 2.75rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div { display: grid; grid-template-columns: 5fr 7fr; align-items: center; column-gap: clamp(1.5rem, 4vw, 4rem); background: #E9EDF2; border: 1px solid #D9DDE3; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem); } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div::before { content: ""; grid-column: 1; grid-row: 1 / span 3; justify-self: center; width: 100%; max-width: 23rem; aspect-ratio: 4 / 3; background-position: center; background-size: contain; background-repeat: no-repeat; } /* the illustration is the page's own: QSBS its share stack, exit-tax the analysis sheet (iso-analysis-report, drawn this round, HANDBACK §5) */ .site-privatecounsel.page-type-landing.page-services-qsbs .c-hero + .c-cta > div::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: a stack of share layers with one qualifying layer highlighted'%3E %3Ccircle cx='240.0' cy='150.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='160.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='170.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='180.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='190.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='200.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='210.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='220.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222.0' cy='300.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384.0' cy='230.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366.0' cy='240.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348.0' cy='250.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330.0' cy='260.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312.0' cy='270.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294.0' cy='280.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276.0' cy='290.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258.0' cy='300.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240.0' cy='310.0' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Cpolygon points='150.0,230.0 240.0,280.0 240.0,266.0 150.0,216.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='330.0,230.0 240.0,280.0 240.0,266.0 330.0,216.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,166.0 330.0,216.0 240.0,266.0 150.0,216.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='164.4,212.0 240.0,254.0 240.0,240.0 164.4,198.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='315.6,212.0 240.0,254.0 240.0,240.0 315.6,198.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,156.0 315.6,198.0 240.0,240.0 164.4,198.0' fill='%2300D4FF' fill-opacity='0.3' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='178.8,194.0 240.0,228.0 240.0,214.0 178.8,180.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='301.2,194.0 240.0,228.0 240.0,214.0 301.2,180.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,146.0 301.2,180.0 240.0,214.0 178.8,180.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,155.0 246.5,164.0 240.0,173.0 233.5,164.0' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round'%3E%3C/polygon%3E %3C/svg%3E"); } .site-privatecounsel.page-type-landing.page-services-exit-tax-planning .c-hero + .c-cta > div::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: a written analysis as a sheet carrying three structures compared side by side, the lowest tax highlighted'%3E %3Ccircle cx='240' cy='90' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='100' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='110' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='120' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168' cy='130' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150' cy='140' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132' cy='150' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='78' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='60' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='100' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='110' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='120' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='130' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='140' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168' cy='150' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='78' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='110' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='120' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='130' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='140' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='150' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='96' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='120' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='130' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='140' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='150' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='114' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312' cy='130' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='140' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='150' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='132' cy='230' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330' cy='140' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312' cy='150' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168' cy='230' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='150' cy='240' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348' cy='150' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='230' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='240' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='168' cy='250' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366' cy='160' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='230' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='240' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='250' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='186' cy='260' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384' cy='170' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='230' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='240' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='250' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='260' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='204' cy='270' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='402' cy='180' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312' cy='230' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='240' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='250' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='260' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='270' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='222' cy='280' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='420' cy='190' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='402' cy='200' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='384' cy='210' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='366' cy='220' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='348' cy='230' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='330' cy='240' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='312' cy='250' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='294' cy='260' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='276' cy='270' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='258' cy='280' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Ccircle cx='240' cy='290' r='1.4' fill='%23C9D2DE'%3E%3C/circle%3E%3Cpolygon points='117.6,240.0 240.0,308.0 240.0,313.0 117.6,245.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='362.4,240.0 240.0,308.0 240.0,313.0 362.4,245.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='240.0,172.0 362.4,240.0 240.0,308.0 117.6,240.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='193.2,164.0 220.2,179.0 220.2,233.0 193.2,218.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='247.2,164.0 220.2,179.0 220.2,233.0 247.2,218.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='220.2,149.0 247.2,164.0 220.2,179.0 193.2,164.0' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='222.9,205.5 249.9,220.5 249.9,258.5 222.9,243.5' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='276.9,205.5 249.9,220.5 249.9,258.5 276.9,243.5' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='249.9,190.5 276.9,205.5 249.9,220.5 222.9,205.5' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='252.6,250.0 279.6,265.0 279.6,284.0 252.6,269.0' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='306.6,250.0 279.6,265.0 279.6,284.0 306.6,269.0' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='279.6,235.0 306.6,250.0 279.6,265.0 252.6,250.0' fill='%2300D4FF' fill-opacity='0.3' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'%3E%3C/polygon%3E%3Cpolygon points='245.4,279.0 263.4,289.0 245.4,299.0 227.4,289.0' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round'%3E%3C/polygon%3E %3C/svg%3E"); } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta h2 { grid-column: 2; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; max-width: 22ch; margin: 0 0 1.2rem; } /* no cyan rule on the band: §16's ACCENT 4 belongs to the closing band, and this one already carries the illustration's cyan */ .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta h2::before { content: none; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div > div { grid-column: 2; } /* the button becomes L1's arrow link: navy text, hairline underline, arrow that steps right */ .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div > div > a { display: inline-flex; gap: 0.55rem; align-items: baseline; border: 0; border-bottom: 1px solid #112A4B; background: transparent; color: #112A4B; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1rem; padding: 0 0 0.3rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div > div > a::after { content: "\2192"; display: inline-block; transition: transform 0.15s; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div > div > a:hover { background: transparent; color: #112A4B; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div > div > a:hover::after { transform: translateX(3px); } /* the point list follows the callout here, not the form: its top air restated */ .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-prose-section#advisors { padding-bottom: 0; } @media (max-width: 900px) { .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div { grid-template-columns: 1fr; row-gap: 1.5rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div::before { grid-column: 1; grid-row: 1; max-width: 15rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta h2, .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero + .c-cta > div > div { grid-column: 1; } } @media (max-width: 600px) { .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero { padding: 2.5rem 0 2rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-hero h1 { font-size: 1.85rem; } } /* ── §36 /TOOLS/EXIT-TAX-ANALYSIS — the T1 application shell, the half the vocabulary can express (HANDBACK §1.6). The page H1 is RETIRED (page JSON: the hero component is gone; the form's own heading carries the title, ENG-281 D4) and the eyebrow becomes T1's title bar: the tool's name in the serif, on a hairline. Page ground parchment; white is reserved for the form sheet, which takes T1's shadow in place of the framework's border and 10px radius. The shell is the site's 72rem container (the handback's "82rem" is a value the render declares inside a 72rem wrap, so it never binds — Jeramie caught the rail sitting left of the header on the first pass), rail 12rem, aside 13rem, the form taking the rest — "the form gets the room, it isn't equal thirds". The 13rem right-hand aside and the rail's rows arrived with app PR #801 (the aside slot; a locked step's marker is its number) and are styled below. ── */ .site-privatecounsel.page-type-tool .c-form-embed { background: transparent; padding: 0 0 5rem; } .site-privatecounsel.page-type-tool .c-form-embed > div > p:first-child { display: flex; justify-content: space-between; align-items: baseline; padding: 1.6rem 0 1.1rem; margin: 0 0 2.25rem; border-bottom: 1px solid oklch(0.92 0.01 95); font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--foreground); } .site-privatecounsel.page-type-tool .c-form-embed > div > div { max-width: none; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div { grid-template-columns: 12rem minmax(0, 1fr) 13rem; gap: clamp(2rem, 3.5vw, 3.25rem); } /* the aside (app PR #801, D3: page JSON `aside` — the tool's own illustration and, where the page carries one, its line about what arrives) */ .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:last-child { font-size: 0.85rem; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:last-child img { border-color: oklch(0.92 0.01 95); } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:last-child p { border-top-color: oklch(0.92 0.01 95); } /* the rail (D5): T1's quiet numbered rows. Reached structurally — the rail is island markup with no promoted hooks. The summary keeps "Progress" and the count; the percent and the bar go (T1 carries the count in its title bar, nothing else). Rows: hairline-separated, a 1.55rem outlined square numeral, the current row's numeral filled navy; upcoming rows plain. */ .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > div > div > span:last-child, .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > div > div + div { display: none; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > div > div > span:first-child { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > div > p { margin-top: 0.35rem; color: var(--muted-foreground); } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > div { margin-bottom: 1rem; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li { border-top: 1px solid oklch(0.92 0.01 95); } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li:first-child { border-top: 0; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li > button { padding: 0.6rem 0; gap: 0.75rem; background: transparent; color: var(--muted-foreground); font-size: 0.9rem; opacity: 1; border-radius: 0; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li > button:hover:not(:disabled) { background: transparent; color: #112A4B; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li > button[data-state="current"] { color: var(--foreground); font-weight: 600; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li > button > span:first-child { width: 1.55rem; height: 1.55rem; flex-basis: 1.55rem; border: 1px solid #D9DDE3; border-radius: 0; background: transparent; color: inherit; font-size: 0.7rem; font-weight: 600; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li > button[data-state="current"] > span:first-child { background: #112A4B; border-color: #112A4B; color: #fff; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > aside:first-child > nav > ol > li > button[data-state="completed"] > span:first-child { background: transparent; border-color: #112A4B; color: #112A4B; } .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > div:last-child { border: 0; box-shadow: 0 18px 42px rgba(17, 42, 75, 0.10); padding: 2.6rem clamp(2rem, 3vw, 3rem) 2.75rem; } @media (max-width: 900px) { .site-privatecounsel.page-type-tool .c-form-embed > div > div > div { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .site-privatecounsel.page-type-tool .c-form-embed > div > div > div > div:last-child { padding: 1.6rem 1.4rem 1.8rem; } } /* ── §37 THE CLOSES WITH THE CARD (HANDBACK §1.5 F1 and §1.9 L5; app PR #801, D11): the page's "What Your Free Analysis Gives You" recap is now the closing band's `aside` (page JSON: the guidance prose-section folded into the cta), so the close is two columns — statement + call to action left, the recap as a white card right. Two grounds by page type: the form pages (domestication, F reorganizations) close on NAVY with the outlined button, per F1; the no-form pages (QSBS, exit-tax planning) close on the darkened parchment with the arrow link, per L5, carried on the cta's band-accent variant. §22d's recap grammar retires with the section it styled; the closing band's accent rule (§16, ACCENT 4) stays on the F pages' navy close. ── */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.variant-band-dark.has-aside > div, .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.variant-band-accent.has-aside > div { grid-template-columns: 6fr 5fr; gap: 3rem 5rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.has-aside h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); } /* the card: white, hairline, T1/L5 padding; bullets as hairline rows with the bold lead in ink */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.has-aside > div > aside { background: #fff; border: 1px solid oklch(0.92 0.01 95); padding: 2.25rem; color: var(--foreground); } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.has-aside > div > aside h3 { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--foreground); } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.has-aside > div > aside p { color: var(--muted-foreground); font-size: 0.92rem; margin: 0 0 1.1rem; max-width: none; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.has-aside > div > aside li { border-top-color: oklch(0.90 0.012 95); color: var(--muted-foreground); } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta.has-aside > div > aside li strong { display: block; color: var(--foreground); font-family: var(--font-family-heading, Merriweather, ui-serif, Georgia, serif); font-size: 1.02rem; font-weight: 700; margin-bottom: 0.35rem; } /* L5's close: darkened parchment, no accent rule (the band-accent variant's own ground), the arrow link in place of the button */ .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-cta.variant-band-accent { background: oklch(0.965 0.007 95); border-top: 1px solid oklch(0.92 0.01 95); color: var(--foreground); padding: 5.5rem 0 6rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-cta.variant-band-accent h2 { color: var(--foreground); } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-cta.variant-band-accent h2::before { content: none; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-cta.variant-band-accent > div > div > a { display: inline-flex; gap: 0.55rem; align-items: baseline; border: 0; border-bottom: 1px solid #112A4B; background: transparent; color: #112A4B; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 1rem; padding: 0 0 0.3rem; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-cta.variant-band-accent > div > div > a::after { content: "\2192"; display: inline-block; transition: transform 0.15s; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-cta.variant-band-accent > div > div > a:hover { background: transparent; color: #112A4B; } .site-privatecounsel.page-type-landing:is(.page-services-qsbs, .page-services-exit-tax-planning) .c-cta.variant-band-accent > div > div > a:hover::after { transform: translateX(3px); } /* the FAQ now runs straight into the close: the seam §22d removed between recap and band is restated between FAQ and band */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-faq + .c-cta { border-top: 0; } @media (max-width: 900px) { /* the variant class is repeated so this outranks the desktop rule above (same class count) */ .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta:is(.variant-band-dark, .variant-band-accent).has-aside > div { grid-template-columns: 1fr; grid-template-rows: none; gap: 1.5rem; } .site-privatecounsel.page-type-landing:is(.page-services-domestication, .page-services-qsbs, .page-services-f-reorganizations, .page-services-exit-tax-planning) .c-cta:is(.variant-band-dark, .variant-band-accent).has-aside > div > aside { grid-column: 1; grid-row: auto; margin-top: 1.5rem; } } /* site-css-additions.css - dispatch 017, /about as a light bio page (SIT-014), COMPOSITION A. Append after site.css s37. Hooks only (contract s2.3): body hooks site-privatecounsel + page-about, component roots c-hero / c-prose-section / c-feature-grid, element structure below them. Nothing here reaches any other page; header, footer and CTA band are untouched (s5b, s6, s16, s17). Accent budget on the page, 4 of 4: hero eyebrow rule, name-chip edge, press tick, CTA rule (s16). s38c and s38d RESTATE the home press band (s9) and services directory (s10) for this page, values unchanged; the four isometrics are s10's own drawings, re-encoded smaller (same geometry: the dot grid's shared fill moved onto a , trailing .0 dropped). A port may instead comma-extend the s9/s10 selector lists with page-about and drop s38c/s38d; see findings.md s3. */ /* -- s38a FOUNDER HERO: name left, portrait right, once per page. The s8 home treatment: COLOUR portrait, V4 navy ground block offset up-right, V9 name chip on the photo's lower-left. The portrait column is fixed at the portrait's own width so the chip sits on the image's left edge by construction (no s8 translate arithmetic), and the 1fr rows above and below centre the short copy block against the tall portrait instead of spreading it. No button (SPEC s4). -- */ .site-privatecounsel.page-about .c-hero { background: transparent; color: var(--foreground); padding: 5.5rem 0 6rem; } .site-privatecounsel.page-about .c-hero > div { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; grid-template-rows: 1fr auto auto auto 1fr; column-gap: 5rem; } .site-privatecounsel.page-about .c-hero > div > * { grid-column: 1; } .site-privatecounsel.page-about .c-hero > div > p:first-of-type { grid-row: 2; margin: 0 0 1.1rem; } .site-privatecounsel.page-about .c-hero > div > h1 { grid-row: 3; font-size: clamp(2.5rem, 4vw, 3.6rem); line-height: 1.1; max-width: 36rem; margin: 0 0 1.4rem; text-wrap: balance; } .site-privatecounsel.page-about .c-hero > div > p:last-of-type { grid-row: 4; max-width: 34rem; font-size: 1.15rem; line-height: 1.6; color: var(--muted-foreground); margin: 0; } /* ACCENT 1 of 4 - eyebrow rule (the home/landing grammar) */ .site-privatecounsel.page-about .c-hero > div > p:first-of-type::before { content: ""; display: block; width: 2.5rem; height: 2px; background: #00D4FF; margin-bottom: 1.1rem; } .site-privatecounsel.page-about .c-hero > div > img { grid-column: 2; grid-row: 1 / -1; justify-self: start; align-self: end; width: 100%; max-width: 22rem; margin: 0; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 12%; border-radius: 0; filter: saturate(0.9) contrast(1.03); box-shadow: 1.25rem -1.25rem 0 0 #112A4B, 0 18px 42px rgba(17, 42, 75, 0.16); } /* name chip - ACCENT 2 of 4 is its top edge; drawn on the grid container because the hero image is a bare (the s8 V9 mechanism) */ .site-privatecounsel.page-about .c-hero > div::after { z-index: 1; content: "Jeramie J. Fortenberry \A Founder"; white-space: pre; grid-column: 2; grid-row: 1 / -1; justify-self: start; align-self: end; background: #fff; border-top: 2px solid #00D4FF; padding: 0.65rem 1rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.7; color: #112A4B; box-shadow: 0 8px 20px rgba(17, 42, 75, 0.12); } /* -- s38b BIO WITH CREDENTIALS IN THE MARGIN: the bio reads in the wide column (lead paragraph at reading scale in ink, the rest in the muted body), the five facts sit beside it as a navy-topped hairline list. The list is the prose body's markdown list: label in , value after it; a list item with no label is a second value under the label above it (Education). -- */ .site-privatecounsel.page-about .c-hero + .c-prose-section { background: transparent; border-top: 1px solid var(--border); padding: 5.5rem 0 6rem; } .site-privatecounsel.page-about .c-hero + .c-prose-section > div > div { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 6rem; align-items: start; } .site-privatecounsel.page-about .c-hero + .c-prose-section p { grid-column: 1; max-width: 41rem; margin: 0 0 1.25rem; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.7; } .site-privatecounsel.page-about .c-hero + .c-prose-section p:first-of-type { color: var(--foreground); font-size: 1.28rem; line-height: 1.55; margin-bottom: 1.6rem; } .site-privatecounsel.page-about .c-hero + .c-prose-section p:last-of-type { margin-bottom: 0; } .site-privatecounsel.page-about .c-hero + .c-prose-section ul { grid-column: 2; grid-row: 1 / span 4; list-style: none; margin: 0; padding: 0; border-top: 2px solid #112A4B; border-bottom: 1px solid var(--border); } .site-privatecounsel.page-about .c-hero + .c-prose-section li { margin: 0; padding: 1rem 0 1.05rem; border-top: 1px solid var(--border); font-size: 0.95rem; line-height: 1.5; color: var(--foreground); } .site-privatecounsel.page-about .c-hero + .c-prose-section li::before, .site-privatecounsel.page-about .c-hero + .c-prose-section li::marker { content: none; } .site-privatecounsel.page-about .c-hero + .c-prose-section li strong { display: block; margin-bottom: 0.3rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); } .site-privatecounsel.page-about .c-hero + .c-prose-section li:first-child { border-top: 0; } .site-privatecounsel.page-about .c-hero + .c-prose-section li:not(:has(> strong)) { border-top: 0; padding-top: 0; margin-top: -0.8rem; } /* -- s38c PRESS BAND, the s9 home values restated for this page (ACCENT 3 of 4 is the tick) -- */ .site-privatecounsel.page-about .c-prose-section + .c-prose-section { background: #fff; padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .site-privatecounsel.page-about .c-prose-section + .c-prose-section > div > div { max-width: none; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:first-of-type { text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 1.6rem; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:first-of-type::before { content: ""; display: inline-block; width: 7px; height: 7px; background: #00D4FF; margin-right: 0.6rem; vertical-align: 1px; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 1.5rem; margin: 0; min-width: 0; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img { width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: 0.66; border-radius: 0; box-shadow: none; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(1) { height: min(30px, 2.2vw); } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(2) { height: min(48px, 3.6vw); } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(3) { height: min(26px, 2vw); } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(4) { height: min(32px, 2.4vw); } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(5) { height: min(44px, 3.3vw); } /* -- s38d SERVICES DIRECTORY, the s10 home values restated (anchor #situations, home.json copy). Interim nth-child illustrations are ORDER-COUPLED to the four tiles, as on home (F41/F52). -- */ .site-privatecounsel.page-about .c-feature-grid { padding: 6.5rem 0 6rem; } .site-privatecounsel.page-about .c-feature-grid h2 { text-align: left; font-size: 2.1rem; margin: 0 0 0.9rem; max-width: 44rem; } .site-privatecounsel.page-about .c-feature-grid > div > p { text-align: left; margin: 0; max-width: 42rem; } .site-privatecounsel.page-about .c-feature-grid > div > div { gap: 0 5rem; margin-top: 3.25rem; } .site-privatecounsel.page-about .c-feature-grid a { display: grid; grid-template-columns: 9rem 1fr; gap: 0.15rem 2.25rem; align-items: start; background: transparent; border: 0; border-top: 1px solid oklch(0.92 0.01 95); border-radius: 0; padding: 2.25rem 0 2.75rem; transition: none; } .site-privatecounsel.page-about .c-feature-grid a::before { content: ""; grid-column: 1; grid-row: 1 / span 3; width: 9rem; aspect-ratio: 4 / 3; background: center / contain no-repeat; mix-blend-mode: multiply; } .site-privatecounsel.page-about .c-feature-grid > div > div > a:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: an entity block and the taller successor block it becomes, connected by an arrow'%3E%3Crect width='480' height='360' fill='%23FFFFFF'/%3E%3Cg fill='%23C9D2DE'%3E%3Ccircle cx='240' cy='140' r='1.4'/%3E%3Ccircle cx='222' cy='150' r='1.4'/%3E%3Ccircle cx='204' cy='160' r='1.4'/%3E%3Ccircle cx='186' cy='170' r='1.4'/%3E%3Ccircle cx='168' cy='180' r='1.4'/%3E%3Ccircle cx='150' cy='190' r='1.4'/%3E%3Ccircle cx='132' cy='200' r='1.4'/%3E%3Ccircle cx='114' cy='210' r='1.4'/%3E%3Ccircle cx='96' cy='220' r='1.4'/%3E%3Ccircle cx='258' cy='150' r='1.4'/%3E%3Ccircle cx='240' cy='160' r='1.4'/%3E%3Ccircle cx='222' cy='170' r='1.4'/%3E%3Ccircle cx='204' cy='180' r='1.4'/%3E%3Ccircle cx='186' cy='190' r='1.4'/%3E%3Ccircle cx='168' cy='200' r='1.4'/%3E%3Ccircle cx='150' cy='210' r='1.4'/%3E%3Ccircle cx='132' cy='220' r='1.4'/%3E%3Ccircle cx='114' cy='230' r='1.4'/%3E%3Ccircle cx='276' cy='160' r='1.4'/%3E%3Ccircle cx='258' cy='170' r='1.4'/%3E%3Ccircle cx='240' cy='180' r='1.4'/%3E%3Ccircle cx='222' cy='190' r='1.4'/%3E%3Ccircle cx='204' cy='200' r='1.4'/%3E%3Ccircle cx='186' cy='210' r='1.4'/%3E%3Ccircle cx='168' cy='220' r='1.4'/%3E%3Ccircle cx='150' cy='230' r='1.4'/%3E%3Ccircle cx='132' cy='240' r='1.4'/%3E%3Ccircle cx='294' cy='170' r='1.4'/%3E%3Ccircle cx='276' cy='180' r='1.4'/%3E%3Ccircle cx='258' cy='190' r='1.4'/%3E%3Ccircle cx='240' cy='200' r='1.4'/%3E%3Ccircle cx='222' cy='210' r='1.4'/%3E%3Ccircle cx='204' cy='220' r='1.4'/%3E%3Ccircle cx='186' cy='230' r='1.4'/%3E%3Ccircle cx='168' cy='240' r='1.4'/%3E%3Ccircle cx='150' cy='250' r='1.4'/%3E%3Ccircle cx='312' cy='180' r='1.4'/%3E%3Ccircle cx='294' cy='190' r='1.4'/%3E%3Ccircle cx='276' cy='200' r='1.4'/%3E%3Ccircle cx='258' cy='210' r='1.4'/%3E%3Ccircle cx='240' cy='220' r='1.4'/%3E%3Ccircle cx='222' cy='230' r='1.4'/%3E%3Ccircle cx='204' cy='240' r='1.4'/%3E%3Ccircle cx='186' cy='250' r='1.4'/%3E%3Ccircle cx='168' cy='260' r='1.4'/%3E%3Ccircle cx='330' cy='190' r='1.4'/%3E%3Ccircle cx='312' cy='200' r='1.4'/%3E%3Ccircle cx='294' cy='210' r='1.4'/%3E%3Ccircle cx='276' cy='220' r='1.4'/%3E%3Ccircle cx='258' cy='230' r='1.4'/%3E%3Ccircle cx='240' cy='240' r='1.4'/%3E%3Ccircle cx='222' cy='250' r='1.4'/%3E%3Ccircle cx='204' cy='260' r='1.4'/%3E%3Ccircle cx='186' cy='270' r='1.4'/%3E%3Ccircle cx='348' cy='200' r='1.4'/%3E%3Ccircle cx='330' cy='210' r='1.4'/%3E%3Ccircle cx='312' cy='220' r='1.4'/%3E%3Ccircle cx='294' cy='230' r='1.4'/%3E%3Ccircle cx='276' cy='240' r='1.4'/%3E%3Ccircle cx='258' cy='250' r='1.4'/%3E%3Ccircle cx='240' cy='260' r='1.4'/%3E%3Ccircle cx='222' cy='270' r='1.4'/%3E%3Ccircle cx='204' cy='280' r='1.4'/%3E%3Ccircle cx='366' cy='210' r='1.4'/%3E%3Ccircle cx='348' cy='220' r='1.4'/%3E%3Ccircle cx='330' cy='230' r='1.4'/%3E%3Ccircle cx='312' cy='240' r='1.4'/%3E%3Ccircle cx='294' cy='250' r='1.4'/%3E%3Ccircle cx='276' cy='260' r='1.4'/%3E%3Ccircle cx='258' cy='270' r='1.4'/%3E%3Ccircle cx='240' cy='280' r='1.4'/%3E%3Ccircle cx='222' cy='290' r='1.4'/%3E%3Ccircle cx='384' cy='220' r='1.4'/%3E%3Ccircle cx='366' cy='230' r='1.4'/%3E%3Ccircle cx='348' cy='240' r='1.4'/%3E%3Ccircle cx='330' cy='250' r='1.4'/%3E%3Ccircle cx='312' cy='260' r='1.4'/%3E%3Ccircle cx='294' cy='270' r='1.4'/%3E%3Ccircle cx='276' cy='280' r='1.4'/%3E%3Ccircle cx='258' cy='290' r='1.4'/%3E%3Ccircle cx='240' cy='300' r='1.4'/%3E%3C/g%3E%3Cpolygon points='114,220 163.5,247.5 163.5,212.5 114,185' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='213,220 163.5,247.5 163.5,212.5 213,185' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='163.5,157.5 213,185 163.5,212.5 114,185' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='258,220 312,250 312,180 258,150' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='366,220 312,250 312,180 366,150' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='312,120 366,150 312,180 258,150' fill='%2300D4FF' fill-opacity='0.3' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cline x1='193.2' y1='236' x2='276' y2='232' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpolygon points='275,237.6 284.1,231.5 274.4,226.3' fill='%23112A4B'/%3E%3C/svg%3E"); } .site-privatecounsel.page-about .c-feature-grid > div > div > a:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: a stack of share layers with one qualifying layer highlighted'%3E%3Crect width='480' height='360' fill='%23FFFFFF'/%3E%3Cg fill='%23C9D2DE'%3E%3Ccircle cx='240' cy='150' r='1.4'/%3E%3Ccircle cx='222' cy='160' r='1.4'/%3E%3Ccircle cx='204' cy='170' r='1.4'/%3E%3Ccircle cx='186' cy='180' r='1.4'/%3E%3Ccircle cx='168' cy='190' r='1.4'/%3E%3Ccircle cx='150' cy='200' r='1.4'/%3E%3Ccircle cx='132' cy='210' r='1.4'/%3E%3Ccircle cx='114' cy='220' r='1.4'/%3E%3Ccircle cx='96' cy='230' r='1.4'/%3E%3Ccircle cx='258' cy='160' r='1.4'/%3E%3Ccircle cx='240' cy='170' r='1.4'/%3E%3Ccircle cx='222' cy='180' r='1.4'/%3E%3Ccircle cx='204' cy='190' r='1.4'/%3E%3Ccircle cx='186' cy='200' r='1.4'/%3E%3Ccircle cx='168' cy='210' r='1.4'/%3E%3Ccircle cx='150' cy='220' r='1.4'/%3E%3Ccircle cx='132' cy='230' r='1.4'/%3E%3Ccircle cx='114' cy='240' r='1.4'/%3E%3Ccircle cx='276' cy='170' r='1.4'/%3E%3Ccircle cx='258' cy='180' r='1.4'/%3E%3Ccircle cx='240' cy='190' r='1.4'/%3E%3Ccircle cx='222' cy='200' r='1.4'/%3E%3Ccircle cx='204' cy='210' r='1.4'/%3E%3Ccircle cx='186' cy='220' r='1.4'/%3E%3Ccircle cx='168' cy='230' r='1.4'/%3E%3Ccircle cx='150' cy='240' r='1.4'/%3E%3Ccircle cx='132' cy='250' r='1.4'/%3E%3Ccircle cx='294' cy='180' r='1.4'/%3E%3Ccircle cx='276' cy='190' r='1.4'/%3E%3Ccircle cx='258' cy='200' r='1.4'/%3E%3Ccircle cx='240' cy='210' r='1.4'/%3E%3Ccircle cx='222' cy='220' r='1.4'/%3E%3Ccircle cx='204' cy='230' r='1.4'/%3E%3Ccircle cx='186' cy='240' r='1.4'/%3E%3Ccircle cx='168' cy='250' r='1.4'/%3E%3Ccircle cx='150' cy='260' r='1.4'/%3E%3Ccircle cx='312' cy='190' r='1.4'/%3E%3Ccircle cx='294' cy='200' r='1.4'/%3E%3Ccircle cx='276' cy='210' r='1.4'/%3E%3Ccircle cx='258' cy='220' r='1.4'/%3E%3Ccircle cx='240' cy='230' r='1.4'/%3E%3Ccircle cx='222' cy='240' r='1.4'/%3E%3Ccircle cx='204' cy='250' r='1.4'/%3E%3Ccircle cx='186' cy='260' r='1.4'/%3E%3Ccircle cx='168' cy='270' r='1.4'/%3E%3Ccircle cx='330' cy='200' r='1.4'/%3E%3Ccircle cx='312' cy='210' r='1.4'/%3E%3Ccircle cx='294' cy='220' r='1.4'/%3E%3Ccircle cx='276' cy='230' r='1.4'/%3E%3Ccircle cx='258' cy='240' r='1.4'/%3E%3Ccircle cx='240' cy='250' r='1.4'/%3E%3Ccircle cx='222' cy='260' r='1.4'/%3E%3Ccircle cx='204' cy='270' r='1.4'/%3E%3Ccircle cx='186' cy='280' r='1.4'/%3E%3Ccircle cx='348' cy='210' r='1.4'/%3E%3Ccircle cx='330' cy='220' r='1.4'/%3E%3Ccircle cx='312' cy='230' r='1.4'/%3E%3Ccircle cx='294' cy='240' r='1.4'/%3E%3Ccircle cx='276' cy='250' r='1.4'/%3E%3Ccircle cx='258' cy='260' r='1.4'/%3E%3Ccircle cx='240' cy='270' r='1.4'/%3E%3Ccircle cx='222' cy='280' r='1.4'/%3E%3Ccircle cx='204' cy='290' r='1.4'/%3E%3Ccircle cx='366' cy='220' r='1.4'/%3E%3Ccircle cx='348' cy='230' r='1.4'/%3E%3Ccircle cx='330' cy='240' r='1.4'/%3E%3Ccircle cx='312' cy='250' r='1.4'/%3E%3Ccircle cx='294' cy='260' r='1.4'/%3E%3Ccircle cx='276' cy='270' r='1.4'/%3E%3Ccircle cx='258' cy='280' r='1.4'/%3E%3Ccircle cx='240' cy='290' r='1.4'/%3E%3Ccircle cx='222' cy='300' r='1.4'/%3E%3Ccircle cx='384' cy='230' r='1.4'/%3E%3Ccircle cx='366' cy='240' r='1.4'/%3E%3Ccircle cx='348' cy='250' r='1.4'/%3E%3Ccircle cx='330' cy='260' r='1.4'/%3E%3Ccircle cx='312' cy='270' r='1.4'/%3E%3Ccircle cx='294' cy='280' r='1.4'/%3E%3Ccircle cx='276' cy='290' r='1.4'/%3E%3Ccircle cx='258' cy='300' r='1.4'/%3E%3Ccircle cx='240' cy='310' r='1.4'/%3E%3C/g%3E%3Cpolygon points='150,230 240,280 240,266 150,216' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='330,230 240,280 240,266 330,216' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='240,166 330,216 240,266 150,216' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='164.4,212 240,254 240,240 164.4,198' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='315.6,212 240,254 240,240 315.6,198' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='240,156 315.6,198 240,240 164.4,198' fill='%2300D4FF' fill-opacity='0.3' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='178.8,194 240,228 240,214 178.8,180' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='301.2,194 240,228 240,214 301.2,180' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='240,146 301.2,180 240,214 178.8,180' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='240,155 246.5,164 240,173 233.5,164' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); } .site-privatecounsel.page-about .c-feature-grid > div > div > a:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: two entity blocks joined by a structured connection'%3E%3Crect width='480' height='360' fill='%23FFFFFF'/%3E%3Cg fill='%23C9D2DE'%3E%3Ccircle cx='240' cy='140' r='1.4'/%3E%3Ccircle cx='222' cy='150' r='1.4'/%3E%3Ccircle cx='204' cy='160' r='1.4'/%3E%3Ccircle cx='186' cy='170' r='1.4'/%3E%3Ccircle cx='168' cy='180' r='1.4'/%3E%3Ccircle cx='150' cy='190' r='1.4'/%3E%3Ccircle cx='132' cy='200' r='1.4'/%3E%3Ccircle cx='114' cy='210' r='1.4'/%3E%3Ccircle cx='96' cy='220' r='1.4'/%3E%3Ccircle cx='258' cy='150' r='1.4'/%3E%3Ccircle cx='240' cy='160' r='1.4'/%3E%3Ccircle cx='222' cy='170' r='1.4'/%3E%3Ccircle cx='204' cy='180' r='1.4'/%3E%3Ccircle cx='186' cy='190' r='1.4'/%3E%3Ccircle cx='168' cy='200' r='1.4'/%3E%3Ccircle cx='150' cy='210' r='1.4'/%3E%3Ccircle cx='132' cy='220' r='1.4'/%3E%3Ccircle cx='114' cy='230' r='1.4'/%3E%3Ccircle cx='276' cy='160' r='1.4'/%3E%3Ccircle cx='258' cy='170' r='1.4'/%3E%3Ccircle cx='240' cy='180' r='1.4'/%3E%3Ccircle cx='222' cy='190' r='1.4'/%3E%3Ccircle cx='204' cy='200' r='1.4'/%3E%3Ccircle cx='186' cy='210' r='1.4'/%3E%3Ccircle cx='168' cy='220' r='1.4'/%3E%3Ccircle cx='150' cy='230' r='1.4'/%3E%3Ccircle cx='132' cy='240' r='1.4'/%3E%3Ccircle cx='294' cy='170' r='1.4'/%3E%3Ccircle cx='276' cy='180' r='1.4'/%3E%3Ccircle cx='258' cy='190' r='1.4'/%3E%3Ccircle cx='240' cy='200' r='1.4'/%3E%3Ccircle cx='222' cy='210' r='1.4'/%3E%3Ccircle cx='204' cy='220' r='1.4'/%3E%3Ccircle cx='186' cy='230' r='1.4'/%3E%3Ccircle cx='168' cy='240' r='1.4'/%3E%3Ccircle cx='150' cy='250' r='1.4'/%3E%3Ccircle cx='312' cy='180' r='1.4'/%3E%3Ccircle cx='294' cy='190' r='1.4'/%3E%3Ccircle cx='276' cy='200' r='1.4'/%3E%3Ccircle cx='258' cy='210' r='1.4'/%3E%3Ccircle cx='240' cy='220' r='1.4'/%3E%3Ccircle cx='222' cy='230' r='1.4'/%3E%3Ccircle cx='204' cy='240' r='1.4'/%3E%3Ccircle cx='186' cy='250' r='1.4'/%3E%3Ccircle cx='168' cy='260' r='1.4'/%3E%3Ccircle cx='330' cy='190' r='1.4'/%3E%3Ccircle cx='312' cy='200' r='1.4'/%3E%3Ccircle cx='294' cy='210' r='1.4'/%3E%3Ccircle cx='276' cy='220' r='1.4'/%3E%3Ccircle cx='258' cy='230' r='1.4'/%3E%3Ccircle cx='240' cy='240' r='1.4'/%3E%3Ccircle cx='222' cy='250' r='1.4'/%3E%3Ccircle cx='204' cy='260' r='1.4'/%3E%3Ccircle cx='186' cy='270' r='1.4'/%3E%3Ccircle cx='348' cy='200' r='1.4'/%3E%3Ccircle cx='330' cy='210' r='1.4'/%3E%3Ccircle cx='312' cy='220' r='1.4'/%3E%3Ccircle cx='294' cy='230' r='1.4'/%3E%3Ccircle cx='276' cy='240' r='1.4'/%3E%3Ccircle cx='258' cy='250' r='1.4'/%3E%3Ccircle cx='240' cy='260' r='1.4'/%3E%3Ccircle cx='222' cy='270' r='1.4'/%3E%3Ccircle cx='204' cy='280' r='1.4'/%3E%3Ccircle cx='366' cy='210' r='1.4'/%3E%3Ccircle cx='348' cy='220' r='1.4'/%3E%3Ccircle cx='330' cy='230' r='1.4'/%3E%3Ccircle cx='312' cy='240' r='1.4'/%3E%3Ccircle cx='294' cy='250' r='1.4'/%3E%3Ccircle cx='276' cy='260' r='1.4'/%3E%3Ccircle cx='258' cy='270' r='1.4'/%3E%3Ccircle cx='240' cy='280' r='1.4'/%3E%3Ccircle cx='222' cy='290' r='1.4'/%3E%3Ccircle cx='384' cy='220' r='1.4'/%3E%3Ccircle cx='366' cy='230' r='1.4'/%3E%3Ccircle cx='348' cy='240' r='1.4'/%3E%3Ccircle cx='330' cy='250' r='1.4'/%3E%3Ccircle cx='312' cy='260' r='1.4'/%3E%3Ccircle cx='294' cy='270' r='1.4'/%3E%3Ccircle cx='276' cy='280' r='1.4'/%3E%3Ccircle cx='258' cy='290' r='1.4'/%3E%3Ccircle cx='240' cy='300' r='1.4'/%3E%3C/g%3E%3Cpolygon points='114,215 163.5,242.5 163.5,202.5 114,175' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='213,215 163.5,242.5 163.5,202.5 213,175' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='163.5,147.5 213,175 163.5,202.5 114,175' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='271.5,222.5 321,250 321,210 271.5,182.5' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='370.5,222.5 321,250 321,210 370.5,182.5' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='321,155 370.5,182.5 321,210 271.5,182.5' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cline x1='193.2' y1='206' x2='286.8' y2='194' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round' stroke-dasharray='5 5'/%3E%3Cline x1='187.8' y1='189' x2='294' y2='174' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpolygon points='240.9,173.5 246.7,181.5 240.9,189.5 235.1,181.5' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E"); } .site-privatecounsel.page-about .c-feature-grid > div > div > a:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='360' viewBox='0 0 480 360' role='img' aria-label='Isometric line illustration: an entity block moved from one state plate to another, its dashed outline left behind'%3E%3Crect width='480' height='360' fill='%23FFFFFF'/%3E%3Cg fill='%23C9D2DE'%3E%3Ccircle cx='240' cy='118' r='1.4'/%3E%3Ccircle cx='222' cy='128' r='1.4'/%3E%3Ccircle cx='204' cy='138' r='1.4'/%3E%3Ccircle cx='186' cy='148' r='1.4'/%3E%3Ccircle cx='168' cy='158' r='1.4'/%3E%3Ccircle cx='150' cy='168' r='1.4'/%3E%3Ccircle cx='132' cy='178' r='1.4'/%3E%3Ccircle cx='114' cy='188' r='1.4'/%3E%3Ccircle cx='96' cy='198' r='1.4'/%3E%3Ccircle cx='78' cy='208' r='1.4'/%3E%3Ccircle cx='258' cy='128' r='1.4'/%3E%3Ccircle cx='240' cy='138' r='1.4'/%3E%3Ccircle cx='222' cy='148' r='1.4'/%3E%3Ccircle cx='204' cy='158' r='1.4'/%3E%3Ccircle cx='186' cy='168' r='1.4'/%3E%3Ccircle cx='168' cy='178' r='1.4'/%3E%3Ccircle cx='150' cy='188' r='1.4'/%3E%3Ccircle cx='132' cy='198' r='1.4'/%3E%3Ccircle cx='114' cy='208' r='1.4'/%3E%3Ccircle cx='96' cy='218' r='1.4'/%3E%3Ccircle cx='276' cy='138' r='1.4'/%3E%3Ccircle cx='258' cy='148' r='1.4'/%3E%3Ccircle cx='240' cy='158' r='1.4'/%3E%3Ccircle cx='222' cy='168' r='1.4'/%3E%3Ccircle cx='204' cy='178' r='1.4'/%3E%3Ccircle cx='186' cy='188' r='1.4'/%3E%3Ccircle cx='168' cy='198' r='1.4'/%3E%3Ccircle cx='150' cy='208' r='1.4'/%3E%3Ccircle cx='132' cy='218' r='1.4'/%3E%3Ccircle cx='114' cy='228' r='1.4'/%3E%3Ccircle cx='294' cy='148' r='1.4'/%3E%3Ccircle cx='276' cy='158' r='1.4'/%3E%3Ccircle cx='258' cy='168' r='1.4'/%3E%3Ccircle cx='240' cy='178' r='1.4'/%3E%3Ccircle cx='222' cy='188' r='1.4'/%3E%3Ccircle cx='204' cy='198' r='1.4'/%3E%3Ccircle cx='186' cy='208' r='1.4'/%3E%3Ccircle cx='168' cy='218' r='1.4'/%3E%3Ccircle cx='150' cy='228' r='1.4'/%3E%3Ccircle cx='132' cy='238' r='1.4'/%3E%3Ccircle cx='312' cy='158' r='1.4'/%3E%3Ccircle cx='294' cy='168' r='1.4'/%3E%3Ccircle cx='276' cy='178' r='1.4'/%3E%3Ccircle cx='258' cy='188' r='1.4'/%3E%3Ccircle cx='240' cy='198' r='1.4'/%3E%3Ccircle cx='222' cy='208' r='1.4'/%3E%3Ccircle cx='204' cy='218' r='1.4'/%3E%3Ccircle cx='186' cy='228' r='1.4'/%3E%3Ccircle cx='168' cy='238' r='1.4'/%3E%3Ccircle cx='150' cy='248' r='1.4'/%3E%3Ccircle cx='330' cy='168' r='1.4'/%3E%3Ccircle cx='312' cy='178' r='1.4'/%3E%3Ccircle cx='294' cy='188' r='1.4'/%3E%3Ccircle cx='276' cy='198' r='1.4'/%3E%3Ccircle cx='258' cy='208' r='1.4'/%3E%3Ccircle cx='240' cy='218' r='1.4'/%3E%3Ccircle cx='222' cy='228' r='1.4'/%3E%3Ccircle cx='204' cy='238' r='1.4'/%3E%3Ccircle cx='186' cy='248' r='1.4'/%3E%3Ccircle cx='168' cy='258' r='1.4'/%3E%3Ccircle cx='348' cy='178' r='1.4'/%3E%3Ccircle cx='330' cy='188' r='1.4'/%3E%3Ccircle cx='312' cy='198' r='1.4'/%3E%3Ccircle cx='294' cy='208' r='1.4'/%3E%3Ccircle cx='276' cy='218' r='1.4'/%3E%3Ccircle cx='258' cy='228' r='1.4'/%3E%3Ccircle cx='240' cy='238' r='1.4'/%3E%3Ccircle cx='222' cy='248' r='1.4'/%3E%3Ccircle cx='204' cy='258' r='1.4'/%3E%3Ccircle cx='186' cy='268' r='1.4'/%3E%3Ccircle cx='366' cy='188' r='1.4'/%3E%3Ccircle cx='348' cy='198' r='1.4'/%3E%3Ccircle cx='330' cy='208' r='1.4'/%3E%3Ccircle cx='312' cy='218' r='1.4'/%3E%3Ccircle cx='294' cy='228' r='1.4'/%3E%3Ccircle cx='276' cy='238' r='1.4'/%3E%3Ccircle cx='258' cy='248' r='1.4'/%3E%3Ccircle cx='240' cy='258' r='1.4'/%3E%3Ccircle cx='222' cy='268' r='1.4'/%3E%3Ccircle cx='204' cy='278' r='1.4'/%3E%3Ccircle cx='384' cy='198' r='1.4'/%3E%3Ccircle cx='366' cy='208' r='1.4'/%3E%3Ccircle cx='348' cy='218' r='1.4'/%3E%3Ccircle cx='330' cy='228' r='1.4'/%3E%3Ccircle cx='312' cy='238' r='1.4'/%3E%3Ccircle cx='294' cy='248' r='1.4'/%3E%3Ccircle cx='276' cy='258' r='1.4'/%3E%3Ccircle cx='258' cy='268' r='1.4'/%3E%3Ccircle cx='240' cy='278' r='1.4'/%3E%3Ccircle cx='222' cy='288' r='1.4'/%3E%3Ccircle cx='402' cy='208' r='1.4'/%3E%3Ccircle cx='384' cy='218' r='1.4'/%3E%3Ccircle cx='366' cy='228' r='1.4'/%3E%3Ccircle cx='348' cy='238' r='1.4'/%3E%3Ccircle cx='330' cy='248' r='1.4'/%3E%3Ccircle cx='312' cy='258' r='1.4'/%3E%3Ccircle cx='294' cy='268' r='1.4'/%3E%3Ccircle cx='276' cy='278' r='1.4'/%3E%3Ccircle cx='258' cy='288' r='1.4'/%3E%3Ccircle cx='240' cy='298' r='1.4'/%3E%3C/g%3E%3Cpolygon points='84,217 150,254 150,266 84,229' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='216,217 150,254 150,266 216,229' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='150,180 216,217 150,254 84,217' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='264,217 330,254 330,266 264,229' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='396,217 330,254 330,266 396,229' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='330,180 396,217 330,254 264,217' fill='%23FFFFFF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='114,220 150,240 150,188 114,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'/%3E%3Cpolygon points='186,220 150,240 150,188 186,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'/%3E%3Cpolygon points='150,148 186,168 150,188 114,168' fill='none' stroke='%23112A4B' stroke-width='1.3' stroke-linejoin='round' stroke-dasharray='5 4'/%3E%3Cpolygon points='294,220 330,240 330,180 294,160' fill='%23F1F2EB' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='366,220 330,240 330,180 366,160' fill='%23E9EDF2' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='330,140 366,160 330,180 294,160' fill='%2300D4FF' stroke='%23112A4B' stroke-width='1.6' stroke-linejoin='round' fill-opacity='0.3'/%3E%3Cline x1='192' y1='242' x2='264' y2='238' stroke='%23112A4B' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpolygon points='263,243.6 272.1,237.5 262.4,232.3' fill='%23112A4B'/%3E%3C/svg%3E"); } .site-privatecounsel.page-about .c-feature-grid a h3 { grid-column: 2; font-size: 1.35rem; margin: 0 0 0.55rem; } .site-privatecounsel.page-about .c-feature-grid a p { grid-column: 2; max-width: 32rem; margin: 0; } .site-privatecounsel.page-about .c-feature-grid a span { grid-column: 2; margin-top: 1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: #112A4B; } .site-privatecounsel.page-about .c-feature-grid a:hover { border-color: oklch(0.92 0.01 95); border-top-color: #112A4B; } .site-privatecounsel.page-about .c-feature-grid a:hover span { color: var(--accent-brand-hover); } /* -- s38e NARROW VIEWPORTS. The hero stacks copy first, portrait after (the s21b order), so the name and role line own the first phone viewport. The chip stays on the photo here (home hides it below 900px only because its translate needs the desktop width; this one needs none). -- */ @media (max-width: 900px) { .site-privatecounsel.page-about .c-hero { padding: 3.5rem 0 4.5rem; } .site-privatecounsel.page-about .c-hero > div { grid-template-columns: 1fr; grid-template-rows: none; } .site-privatecounsel.page-about .c-hero > div > p:first-of-type { grid-row: 1; } .site-privatecounsel.page-about .c-hero > div > h1 { grid-row: 2; } .site-privatecounsel.page-about .c-hero > div > p:last-of-type { grid-row: 3; } .site-privatecounsel.page-about .c-hero > div > img, .site-privatecounsel.page-about .c-hero > div::after { grid-column: 1; grid-row: 4; justify-self: start; align-self: end; } .site-privatecounsel.page-about .c-hero > div > img { max-width: 17.5rem; margin-top: 3rem; box-shadow: 0.85rem -0.85rem 0 0 #112A4B, 0 14px 32px rgba(17, 42, 75, 0.16); } .site-privatecounsel.page-about .c-hero + .c-prose-section { padding: 4.5rem 0 5rem; } .site-privatecounsel.page-about .c-hero + .c-prose-section > div > div { grid-template-columns: 1fr; } .site-privatecounsel.page-about .c-hero + .c-prose-section ul { grid-column: 1; grid-row: auto; margin-top: 2.25rem; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type { flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.75rem; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(1) { height: 30px; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(2) { height: 48px; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(3) { height: 26px; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(4) { height: 32px; } .site-privatecounsel.page-about .c-prose-section + .c-prose-section p:last-of-type img:nth-of-type(5) { height: 44px; } .site-privatecounsel.page-about .c-feature-grid a { grid-template-columns: 1fr; padding: 2rem 0 2.25rem; } .site-privatecounsel.page-about .c-feature-grid a::before { grid-row: auto; width: 7.5rem; margin-bottom: 0.75rem; } .site-privatecounsel.page-about .c-feature-grid a h3, .site-privatecounsel.page-about .c-feature-grid a p, .site-privatecounsel.page-about .c-feature-grid a span { grid-column: 1; } } @media (max-width: 600px) { .site-privatecounsel.page-about .c-hero { padding: 2.75rem 0 4rem; } .site-privatecounsel.page-about .c-hero > div > h1 { font-size: 2.3rem; } .site-privatecounsel.page-about .c-hero > div > p:last-of-type { font-size: 1.05rem; } .site-privatecounsel.page-about .c-hero + .c-prose-section { padding: 4rem 0 4.5rem; } .site-privatecounsel.page-about .c-hero + .c-prose-section p:first-of-type { font-size: 1.15rem; } .site-privatecounsel.page-about .c-feature-grid { padding: 4.25rem 0 4rem; } .site-privatecounsel.page-about .c-feature-grid h2 { font-size: 1.55rem; } .site-privatecounsel.page-about .c-feature-grid > div > div { margin-top: 2.25rem; } .site-privatecounsel.page-about .c-feature-grid a::before { width: 6.5rem; } }