…
*/ .pullquote { padding: 40px 0; border-top: 1px solid var(--hairline); } .pullquote:last-of-type { border-bottom: 1px solid var(--hairline); } .pullquote p { font-family: var(--font-display); font-style: italic; font-size: 26px; line-height: 1.4; color: var(--ink); margin-bottom: 16px; } .pullquote cite, .pullquote footer { font-family: var(--font-sans); font-style: normal; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } /* a single standalone positioning line, centred */ .pullquote--single { text-align: center; border: 0; padding: 24px 0 0; } /* 12. Portrait & contact block --------------------------------------------- */ .portrait { width: 220px; height: 220px; object-fit: cover; object-position: 65% 30%; border-radius: 50%; border: 1px solid var(--hairline); margin: 0 auto 40px; } .contact-block { font-size: 20px; line-height: 1.7; text-align: center; } .contact-block a { color: var(--ink); text-underline-offset: 3px; } .contact-block a:hover { color: var(--clay); } /* 13. Buttons & CTA row ---------------------------------------------------- */ .btn, .btn-outline { display: inline-block; font-family: var(--font-sans); font-weight: 400; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; border-radius: 2px; text-decoration: none; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; } .btn { /* filled */ color: var(--sheet); background: var(--clay); border: 1px solid var(--clay); padding: 17px 40px; } .btn:hover { background: #8F4830; border-color: #8F4830; } .btn-outline { /* outline, used in the topbar */ color: var(--clay); background: transparent; border: 1px solid var(--clay); padding: 9px 20px; } .btn-outline:hover { color: var(--sheet); background: var(--clay); } /* topbar variant keeps the nav's smaller type */ .topnav .btn-outline { font-size: 14px; color: var(--clay); } .topnav .btn-outline:hover { color: var(--sheet); } .cta-row { text-align: center; margin-top: 56px; } .cta-note { font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); margin-top: 14px; } .cta-note a { color: var(--ink-soft); text-decoration: none; } .cta-note a:hover { color: var(--clay); } /* 14. Forms ---------------------------------------------------------------- */ .form { margin-top: 40px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .field { margin-bottom: 24px; } .field label { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; } .field input, .field textarea { width: 100%; font-family: var(--font-body); font-size: 19px; line-height: 1.5; color: var(--ink); background: var(--sheet); border: 1px solid var(--hairline); border-radius: 2px; padding: 12px 14px; } .field textarea { min-height: 160px; resize: vertical; } .field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--clay); outline-offset: 0; border-color: var(--clay); } .form .btn { margin-top: 4px; } /* 15. Small notes ---------------------------------------------------------- */ .note { /* calm reassurance line */ font-style: italic; color: var(--ink-soft); margin-top: 28px; } .note-small { /* legal / compliance line */ font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hairline); } /* 16. Footer --------------------------------------------------------------- */ .footer { border-top: 1px solid var(--hairline); padding: 44px 48px 40px; text-align: center; font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); line-height: 1.9; } .footer a { color: var(--ink-soft); text-decoration: none; } .footer a:hover { color: var(--clay); } .fnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px; margin-bottom: 10px; list-style: none; } .fnav a { letter-spacing: 0.1em; text-transform: uppercase; font-size: 12.5px; } .footer .legal { margin-top: 16px; font-size: 12.5px; max-width: 640px; margin-left: auto; margin-right: auto; } .footer .legal-links { margin-top: 4px; font-size: 12.5px; } .footer .legal-links a { margin: 0 8px; } /* 17. Responsive ----------------------------------------------------------- */ /* Below ~1040px the letter-spaced wordmark and four nav items no longer fit on one line, so the topbar becomes a centred letterhead: wordmark above, nav below. The "Start a Conversation" button stays in the nav throughout. */ @media (max-width: 1040px) { .topbar { flex-direction: column; justify-content: center; padding: 26px 32px 24px; } .topnav { gap: 28px; } } @media (max-width: 760px) { body { font-size: 19px; } .topbar { padding: 22px 20px 20px; gap: 18px; } .wordmark { font-size: 19px; letter-spacing: 0.18em; } .topnav { flex-wrap: wrap; justify-content: center; gap: 14px 24px; } .band--masthead { height: 200px; } .band--inset { height: 200px; margin-top: 48px; } .page { padding: 56px 22px 56px; } .eyebrow { margin-bottom: 20px; } h1 { font-size: 36px; } .subline { font-size: 20px; margin-bottom: 40px; } .rule { margin-bottom: 40px; } h2 { font-size: 27px; } .section { margin-top: 48px; } .labelled { margin-top: 44px; } .numbered > li { grid-template-columns: 40px 1fr; column-gap: 16px; padding: 28px 0; } .numbered .num { font-size: 32px; } .numbered h2, .numbered h3 { font-size: 25px; } .pullquote { padding: 32px 0; } .pullquote p { font-size: 23px; } .portrait { width: 180px; height: 180px; } .footer { padding: 36px 20px 32px; } } @media (max-width: 480px) { h1 { font-size: 32px; } .signature-block { gap: 20px; } .signature-block img { width: 88px; height: 88px; flex-basis: 88px; } .sig-script { font-size: 36px; } .labelled-list--cols { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .btn { padding: 15px 28px; width: 100%; max-width: 360px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* 18. Second-pass additions (about / services / clients / contact) -------- */ /* Small rules the inner pages needed that the first pass had no occasion to write. Nothing above is altered. */ /* contact.html: the active-nav colour would otherwise outrank the outline button and turn "Start a Conversation" ink on its own page. */ .topnav .btn-outline[aria-current="page"] { color: var(--clay); } .topnav .btn-outline[aria-current="page"]:hover { color: var(--sheet); } /* contact.html: is italic by browser default. */ address.contact-block { font-style: normal; } /* clients.html: the compliance line sits directly under the last quote, which already closes with a hairline — don't draw a second one. */ .pullquote:last-of-type + .note-small { border-top: 0; padding-top: 0; } /* 19. Third-pass additions (sheet, graphic bands, clients mosaic) --------- */ /* Appended for the 2026-09-02 revision. Everything above is untouched. */ /* index.html: the arcade photograph is level (measured +0.3°); only its horizontal framing is off. The corridor's vanishing point sits at x=876 of 1800 — 24px left of centre — so pull the crop 1.3% left to put it on axis. Scoped to the arcade so it never leaks onto the graphic bands. */ .band--arcade img { object-position: 48.7% 60%; } /* Graphic masthead bands (SVG illustration, not photographs). No grading filter and no ivory wash — the artwork is transparent-backed and sits straight on the ivory. Both SVGs are drawn on a 3000-unit-wide canvas and shown with object-fit: cover, so any band up to ~3000px wide shows the artwork at full band height and the same composition; only the empty margin changes. The oak is anchored bottom-right (its trunk always enters from the right edge), the chorus bottom-centre (its core is always centred; outliers appear as the band widens). */ .band--oak, .band--chorus { background: var(--ivory); } .band--oak img, .band--chorus img { filter: none; object-fit: cover; } .band--oak img { object-position: 100% 100%; } .band--chorus img { object-position: 50% 100%; } .band--oak::after, .band--chorus::after { content: none; } .band--oak { height: 260px; } .band--chorus { height: 200px; } /* index.html / clients.html: a sheet of paper lying on the ivory ground. The sheet is 792px wide so that, inside its 56px side padding, the text measure is the same 680px as every other page; the page wrapper adds its own 32px padding either side, hence 856. */ .page--sheet { max-width: 856px; /* 680 measure + 2×56 sheet + 2×32 page */ padding-top: 56px; /* the sheet carries its own 72px above the eyebrow */ } .sheet { background: var(--sheet); padding: 72px 56px; border: 1px solid var(--hairline); border-radius: 2px; box-shadow: 0 1px 2px rgba(38, 36, 31, .05), 0 10px 24px -10px rgba(38, 36, 31, .12), 0 30px 60px -30px rgba(38, 36, 31, .14); } /* clients.html: one featured quote on the ivory, larger and centred, directly after the rule. */ .pullquote.pullquote--featured { text-align: center; border: 0; padding: 0; margin-bottom: 64px; } .pullquote--featured p { font-size: 33px; line-height: 1.35; max-width: var(--measure); margin: 0 auto 22px; } /* clients.html: the remaining quotes as paper cards in a two-column mosaic. CSS columns with break-inside: avoid gives a natural masonry without any script; the cards take the same paper treatment as .sheet. */ .quote-mosaic { columns: 2; column-gap: 24px; } .quote-card { position: relative; break-inside: avoid; page-break-inside: avoid; /* older engines */ margin: 0 0 24px; padding: 58px 30px 30px; background: var(--sheet); border: 1px solid var(--hairline); border-radius: 2px; box-shadow: 0 1px 2px rgba(38, 36, 31, .05), 0 10px 24px -10px rgba(38, 36, 31, .12), 0 30px 60px -30px rgba(38, 36, 31, .14); } .quote-card::before { /* the large gold Cormorant closing quote */ content: "\201D"; position: absolute; top: 12px; left: 26px; font-family: var(--font-display); font-weight: 500; font-size: 80px; line-height: 1; color: var(--gold); pointer-events: none; } .quote-card p { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.42; color: var(--ink); margin-bottom: 16px; } .quote-card cite, .quote-card footer { /* same attribution styling as .pullquote */ font-family: var(--font-sans); font-style: normal; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } /* clients.html: the compliance line now follows the mosaic rather than a .pullquote, so the earlier `.pullquote:last-of-type + .note-small` rule no longer matches (it is left in place, harmless). The cards carry no closing hairline, so the note keeps its own rule and sits tight under them. */ .quote-mosaic + .note-small { margin-top: 8px; } @media (max-width: 760px) { .band--oak { height: 180px; } .band--chorus { height: 140px; } .page--sheet { padding-top: 40px; } .sheet { padding: 40px 24px; box-shadow: 0 1px 2px rgba(38, 36, 31, .05), 0 8px 18px -10px rgba(38, 36, 31, .10); } .pullquote.pullquote--featured { margin-bottom: 44px; } .pullquote--featured p { font-size: 27px; } .quote-mosaic { columns: 1; } .quote-card { padding: 52px 24px 26px; box-shadow: 0 1px 2px rgba(38, 36, 31, .05), 0 8px 18px -10px rgba(38, 36, 31, .10); } .quote-card::before { left: 20px; font-size: 72px; } .quote-card p { font-size: 21px; } } @media (max-width: 480px) { /* narrower page gutters so the sheet and cards keep a usable measure */ .page--sheet { padding-left: 12px; padding-right: 12px; } } /* 20. Fourth-pass additions (green buttons, linked list, placeholders, ---- photographic inner-page bands, printable handout) */ /* Appended for the 2026-09-02 round-three brief. Everything above is untouched; where a rule below changes an earlier one it does so by overriding it here, not by editing it there. */ /* Two new tokens. Green is the questionnaire's tile green. It appears on the filled .btn only; nothing else on the site goes green. */ :root { --green: #5F7A61; --green-deep: #4E6650; } /* Filled buttons go green. The text is pure white, not --sheet: white on #5F7A61 measures 4.73:1, --sheet on it only 4.50:1, exactly on the AA line. The outline button in the topbar, links, eyebrows, rules, the numerals, .link-onward and the quote glyphs all stay clay and gold. */ .btn { color: #FFFFFF; background: var(--green); border-color: var(--green); } .btn:hover { color: #FFFFFF; background: var(--green-deep); border-color: var(--green-deep); } /* services.html: the five numbered entries carry ids so the home page can deep-link to them. A little scroll margin keeps the entry's top hairline and heading clear of the viewport edge when the hash is followed. */ .numbered > li[id] { scroll-margin-top: 32px; } /* index.html: the "What I handle" rows link into Services but must not read as hyperlinks: ink, no underline, no clay. The anchor fills the row so the whole row is the click target, and it bleeds 8px either side so the hover tint and the focus ring sit clear of the text without shifting it. Hover: a faint sheet tint on the row and the row's hairline darkens. Focus-visible: the site's clay ring, drawn at the edge of the bleed, so keyboard users can see exactly which row is active. */ .labelled-list--links li { padding: 0; } .labelled-list--links a { display: block; margin: 0 -8px; padding: 10px 8px; color: inherit; text-decoration: none; cursor: pointer; border-radius: 2px; transition: background-color 120ms ease; } .labelled-list--links a:hover { background: var(--sheet); } .labelled-list--links li:hover { border-bottom-color: #CDBFA3; } .labelled-list--links a:focus-visible { outline: 2px solid var(--clay); outline-offset: 0; } /* index.html / services.html: one transplanted testimonial with its compliance line beneath it. The quote is the only blockquote among its siblings, so :last-of-type closes it with a hairline and the section-18 `.pullquote:last-of-type + .note-small` rule stops the note drawing a second one directly under it. */ .testimonial { margin-top: 56px; } /* Where the testimonial directly follows a list that already closes with a hairline (the numbered documents on Services, the credentials on the handout) the list's closing rule stands in for the quote's opening one, so the two are not drawn 56px apart as an empty ruled band. */ .numbered + .testimonial .pullquote, .handout .labelled + .testimonial .pullquote { border-top: 0; } /* services.html / about.html: photographic masthead bands for the inner pages at 260px (180px on small screens), taking the standard photographic treatment from section 5 (grading filter + ivory wash). The foliage shot is high-key with bright sky gaps, so it is graded down a touch and washed harder than the arcade so the gaps settle onto the ivory instead of punching white holes in the page. The cloister is a portrait frame; the crop sits on the inner arches and the palms beyond. */ .band--foliage, .band--cloister { height: 260px; } /* The canopy shot is already high-key; the earlier grade (saturate .70 + a 0.30 wash) bleached it into a faded print. Let the greens hold and deepen the midtones instead, so it reads as foliage rather than as a printing fault. */ .band--foliage img { object-position: center 55%; filter: saturate(0.88) sepia(0.06) brightness(0.94) contrast(1.06); } .band--foliage::after { opacity: 0.12; } .band--cloister img { object-position: center 45%; } /* Placeholder for copy the firm has not yet supplied. It has to read as unfinished at a glance (dashed border, a clay COPY NEEDED label, italic body) so that nobody can mistake it for approved copy. An inside the body is draft wording offered for approval: it flips back to roman, in ink, so it stands apart from the instruction around it. */ /* Must read as unmistakably unfinished at a glance. A hairline dash was too quiet against the sheet, so the dash carries clay at low opacity. */ .placeholder { background: var(--sheet); border: 1px dashed rgba(169, 87, 59, 0.45); border-radius: 2px; padding: 22px 26px 24px; } .placeholder .placeholder-label { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); margin-bottom: 10px; } .placeholder p { font-style: italic; font-size: 18px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 14px; } .placeholder p:last-child { margin-bottom: 0; } .placeholder em { font-style: normal; color: var(--ink); } /* four-questions.html: a printable one-page handout. On screen it is the home letter's sheet. The contact line lives inside the sheet so it prints with the rest; the disclaimer that the footer carries on screen is repeated inside the sheet as .print-only, hidden on screen and shown in print, so the printed page still carries it. */ .handout-contact { font-family: var(--font-sans); font-size: 14px; line-height: 1.7; text-align: center; color: var(--ink-soft); margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); } .handout-contact a { color: var(--ink-soft); text-decoration: none; } .handout-contact a:hover { color: var(--clay); } .print-only { display: none; } @media (max-width: 760px) { .band--foliage, .band--cloister { height: 180px; } .placeholder { padding: 18px 20px 20px; } .placeholder p { font-size: 17px; } } /* Print: the handout only. Drops the topbar, footer, nav and every button, opens the sheet to the full printable width with no shadow, and sets the type so the whole page fits one Letter sheet inside half-inch margins. */ @media print { @page { size: Letter; margin: 0.45in; } /* the print actions are screen furniture */ body.handout .handout-actions { display: none !important; } /* the closing checklist sits tight in print */ body.handout .next-steps li { padding: 3px 0; font-size: 10pt; } body.handout .next-steps .box { width: 11px; height: 11px; margin-top: 3px; font-size: 8pt; } /* the ivory canvas would otherwise show beneath the content in browsers that print backgrounds; :has() is ignored where unsupported, harmlessly */ html:has(body.handout) { background: #FFFFFF; } body.handout { display: block; min-height: 0; background: #FFFFFF; color: #000000; font-size: 10.2pt; line-height: 1.4; } .handout .topbar, .handout .footer, .handout .skip-link, .handout nav, .handout .btn, .handout .btn-outline, .handout .cta-row { display: none !important; } .handout .print-only { display: block; } .handout .page--sheet { max-width: none; padding: 0; } .handout .sheet { background: #FFFFFF; padding: 0; border: 0; box-shadow: none; } .handout .eyebrow { font-size: 8pt; margin-bottom: 8pt; } .handout h1 { font-size: 24pt; line-height: 1.15; margin-bottom: 8pt; } .handout .rule { margin-bottom: 14pt; } .handout .letter p { margin-bottom: 8pt; } .handout .numbered { margin-top: 4pt; } .handout .numbered > li { grid-template-columns: 28pt 1fr; column-gap: 8pt; padding: 10pt 0; } .handout .numbered .num { font-size: 18pt; padding-top: 1pt; } .handout .numbered h2 { font-size: 13pt; margin-bottom: 2pt; } .handout .note { margin-top: 10pt; } .handout .testimonial { margin-top: 10pt; } .handout .labelled { margin-top: 12pt; padding-top: 9pt; } .handout .label { font-size: 8pt; margin-bottom: 4pt; } .handout .labelled-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24pt; font-size: 10pt; } .handout .labelled-list li { padding: 4pt 0; } .handout .pullquote { padding: 12pt 0; } .handout .pullquote p { font-size: 12.5pt; line-height: 1.35; margin-bottom: 6pt; } .handout .pullquote cite, .handout .pullquote footer { font-size: 8pt; } .handout .note-small { font-size: 8pt; margin-top: 8pt; padding-top: 0; } .handout .handout-contact { font-size: 9pt; margin-top: 12pt; padding-top: 8pt; } .handout .print-only { font-size: 8pt; margin-top: 6pt; border-top: 0; padding-top: 0; } } /* 21. Fifth-pass additions (six-item nav, green outline button, -------------- Californian oak and garden-table bands, What to Expect page, referral field, footer nav state) */ /* Appended for the 2026-09-02 round-four brief. Everything above is untouched apart from the section-20 comment that named the printable page, which now carries its new filename (four-questions.html). Where a rule below changes an earlier one it overrides it here. */ /* Both "Start a Conversation" buttons are green. The topbar outline button cannot use --green: #5F7A61 on ivory is 4.42:1 and fails AA at the nav's 14px. --green-deep #4E6650 on ivory is 5.9:1, so text and border take that; hover fills with --green-deep and the text goes pure white (6.5:1). The section-18 contact-page aria-current override is repeated so the button stays green on its own page. Focus rings stay clay, site-wide; nothing else changes colour. */ .btn-outline { color: var(--green-deep); border-color: var(--green-deep); } .btn-outline:hover { color: #FFFFFF; background: var(--green-deep); border-color: var(--green-deep); } .topnav .btn-outline { color: var(--green-deep); } .topnav .btn-outline:hover { color: #FFFFFF; } .topnav .btn-outline[aria-current="page"] { color: var(--green-deep); } .topnav .btn-outline[aria-current="page"]:hover { color: #FFFFFF; } /* Footer nav: the current page reads in ink, as it does in the topbar. */ .fnav a[aria-current="page"] { color: var(--ink); } /* Six nav items. The section-17 stack at 1040px was tuned for four; with Home and What to Expect added the one-line topbar (wordmark + nav + gutters) measures 1257px with the web fonts loaded, so anything between 1040px and ~1260px overflowed and 1280px had 23px to spare. The letterhead stack now begins below 1300px, so 1280px gets the stacked layout cleanly. Between 1300px and 760px the nav is a single centred row; below ~880px it may wrap onto a second centred line, which flex-wrap now permits at every width. */ @media (max-width: 1300px) { .topbar { flex-direction: column; justify-content: center; padding: 26px 32px 24px; } .topnav { flex-wrap: wrap; justify-content: center; gap: 16px 28px; } } /* services.html: the oak canopy is replaced by a backlit valley oak on golden grass (band-ca-oak.jpg). The image is warm and high-contrast with a sun flare just right of the trunk, so the grade goes the other way from the canopy's: brightness and contrast are eased below 1 to keep the flare from blowing out, the sepia is dropped to almost nothing because the grass already carries the warmth, and saturation is held at 0.82 so the gold stays gold. The wash is lightened from 0.12 to 0.08 so the band does not turn milky. Crop at 60%: trunk, horizon, flare near the top edge, grass filling the lower half. */ .band--foliage img { object-position: center 60%; filter: saturate(0.82) sepia(0.04) brightness(0.96) contrast(0.98); } .band--foliage::after { opacity: 0.08; } /* clients.html: a garden table and chairs in dappled light replaces the quotation-mark graphic, at the same 260/180px as the other inner-page photographs. The frame is dark overall (deep shade behind the table), so it takes the section-5 grade with the brightness lifted a little and the contrast eased, and a slightly lighter wash than the arcade so the dappled highlights on the table stay legible. The crop sits low, on the table and chair backs, not the trees above. */ .band--table { height: 260px; } .band--table img { object-position: center 72%; filter: saturate(0.84) sepia(0.08) brightness(1.01) contrast(0.97); } .band--table::after { opacity: 0.15; } /* what-to-expect.html: the page opens straight onto a .section, so the rule's own 56px bottom margin stands in for the section's top margin; and the onward link that follows the last placeholder needs a little more room than the 22px it has under the home letter's P.S. */ .page > .rule + .section { margin-top: 0; } .section + .link-onward { margin-top: 32px; } /* four-questions.html: two .note lines in a row sit close together rather than 28px apart. */ .note + .note { margin-top: 10px; } /* contact.html: the referral field carries placeholder text. Browser default placeholder grey fails AA on the sheet; ink-soft at full opacity, italic, so it reads as a hint and not as a filled value. */ .field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 1; font-style: italic; } @media (max-width: 760px) { .band--table { height: 180px; } } /* 22. Sixth-pass additions (Contact nav item, referral consent, closing band) -- ========================================================================== */ /* The referral consent question. Telling a referrer that someone contacted the firm reveals that they sought legal advice, so this is opt-in and unchecked by default — the privacy-protective direction. */ .field--consent { margin-bottom: 24px; } .consent-question { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px; } /* .field label sets uppercase sans for input labels; a checkbox label is a sentence, so unset those here. */ .field .checkbox { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--font-body); font-weight: 400; font-size: 18px; letter-spacing: normal; text-transform: none; line-height: 1.5; color: var(--ink); margin-bottom: 0; } .field .checkbox input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 5px; accent-color: var(--green); cursor: pointer; } /* A full-bleed band closing a page, mirroring the mastheads. Lives outsideso it can break the 680px measure. */ .band--closing { height: 260px; margin-top: 72px; border-top: 1px solid var(--hairline); } /* Crop low, so the band carries the rooflines and palm trunks rather than empty sky. Repeating verticals survive a 9.8:1 crop; a close-up subject would not. */ .band--palms img { object-position: center 88%; filter: saturate(0.80) sepia(0.10) brightness(1.02) contrast(0.96); } .band--palms::after { opacity: 0.16; } @media (max-width: 760px) { .band--closing { height: 180px; margin-top: 48px; } } /* 23. Seventh-pass additions (experience line) ------------------------------ */ .experience { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin: -32px 0 48px; } /* At generous widths the home page becomes two columns: the letter keeps its 792px sheet, and "What I handle" moves out beside it as a sticky index. Everything else stays under the letter, still on the sheet's column, so the reading order is unchanged. */ @media (min-width: 1400px) { .page--sheet { max-width: 1180px; display: grid; grid-template-columns: 792px minmax(240px, 1fr); column-gap: 60px; align-items: start; } .page--sheet > .sheet { grid-column: 1; grid-row: 1; } .page--sheet > .side { grid-column: 2; grid-row: 1; position: sticky; top: 40px; } .page--sheet > .side .labelled { max-width: none; margin: 0; padding-top: 0; border-top: 0; } .page--sheet > .side .handout-card { max-width: none; margin: 28px 0 0; } /* single column in the narrower sidebar */ .page--sheet > .side .labelled-list--cols { grid-template-columns: 1fr; } /* the onward link orphans its arrow at sidebar width */ .page--sheet > .side .link-onward { font-size: 13px; letter-spacing: 0.06em; } /* everything after the letter stays in the letter's column */ .page--sheet > *:not(.sheet):not(.side) { grid-column: 1; } } /* 24. Eighth-pass additions (handout invite, row link) ---------------------- */ /* The handout invitation: a sentence in the page's own voice, with the action underneath in the small uppercase style the other onward links use. */ .handout-link { display: block; text-decoration: none; color: inherit; margin-top: 22px; } .handout-link__lead { display: block; font-family: var(--font-body); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 6px; } .handout-link__cta { display: inline-block; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); border-bottom: 1px solid transparent; } .handout-link:hover .handout-link__cta { border-bottom-color: var(--clay); } .handout-link:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; } /* On Clients it sits after the mosaic, centred, with room around it. */ .handout-invite { max-width: var(--measure); margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--hairline); text-align: center; } .handout-invite .handout-link__lead { font-size: 21px; } /* A list row that is entirely clickable but is not styled as a link. The small arrow box on the right is the only affordance, so the row still reads as one of the plain entries around it. */ .row-link a { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: inherit; text-decoration: none; margin: -10px -8px; padding: 10px 8px; border-radius: 2px; } .row-link a:hover { background: var(--sheet); } .row-link a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; } .row-link__mark { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 2px; } .row-link a:hover .row-link__mark { color: var(--clay); border-color: var(--clay); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* 25. Ninth-pass additions (handout print actions) -------------------------- */ /* The print action leads rather than trails: above the sheet on narrow screens, and out in the right margin, sticky, once there is room for it. */ .handout-actions { max-width: var(--measure); margin: 0 auto 32px; text-align: right; } .handout-actions .cta-note { margin-top: 10px; } @media (max-width: 760px) { .handout-actions { text-align: center; } .handout-actions .btn { width: 100%; max-width: 360px; } } @media (min-width: 1400px) { body.handout .page--sheet > .handout-actions { grid-column: 2; grid-row: 1; max-width: none; margin: 0; text-align: left; position: sticky; top: 40px; } body.handout .page--sheet > .sheet { grid-column: 1; grid-row: 1; } } /* 26. Tenth-pass additions (handout card, next-steps checklist) ------------- */ /* The handout invitation is now a narrow card carrying the green PDF tile, so it can sit in a right margin instead of running the full measure. */ .handout-card { display: block; max-width: 288px; margin: 40px 0 0 auto; /* sits right within its container */ padding: 24px 24px 22px; background: var(--sheet); border: 1px solid var(--hairline); border-radius: 2px; text-decoration: none; color: inherit; transition: border-color 120ms ease, box-shadow 120ms ease; } .handout-card:hover { border-color: var(--green); box-shadow: 0 6px 18px -10px rgba(38, 36, 31, 0.25); } .handout-card:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } .handout-card__icon { width: 56px; height: 56px; margin-bottom: 16px; } .handout-card__lead { display: block; font-family: var(--font-body); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink); margin-bottom: 12px; } .handout-card__cta { display: inline-block; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep); border-bottom: 1px solid transparent; } .handout-card:hover .handout-card__cta { border-bottom-color: var(--green-deep); } /* Clients: it had been centred under the mosaic; now it sits right, still set off by the hairline. */ .handout-invite { text-align: left; } .handout-invite .handout-card { margin-top: 0; } @media (max-width: 760px) { .handout-card { max-width: none; margin-left: 0; } } /* The handout's closing next steps: one thing done, one thing left. */ .next-steps { list-style: none; margin-top: 8px; } .next-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; font-size: 18px; line-height: 1.5; } .next-steps .box { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 5px; border: 1px solid var(--ink-soft); border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; } .next-steps .done .box { background: var(--green); border-color: var(--green); color: #FFFFFF; } .next-steps .done span:last-child { text-decoration: line-through; color: var(--ink-soft); } /* 27. Home sidebar below the two-column breakpoint -------------------------- */ /* .side is transparent structurally; the section inside keeps the rules and spacing it had when it sat directly in the flow. */ .side { max-width: var(--measure); margin-left: auto; margin-right: auto; } .side .labelled { max-width: none; } .side .handout-card { margin-right: 0; } @media (min-width: 1400px) { .side { max-width: none; margin: 0; } } /* 28. Draft B additions ------------------------------------------------------ Everything above is Draft A's stylesheet, untouched. Draft B changes nothing in the copy; it refines the experience, the looks in small ways, and the technical/SEO layer. Where a rule below changes an earlier one it overrides it here, so the diff against Draft A is this one section. ========================================================================== */ /* --- Tokens --------------------------------------------------------------- */ /* The eyebrow's gold (#B08D57) measured 2.9:1 on ivory and failed WCAG AA at 13px. Draft B keeps the decorative 64px rule in that gold and sets the text in a deeper gold from the same family: #846434 is 5.1:1 on ivory and 5.2:1 on the sheet, so it passes AA for body-size text with room to spare. */ :root { --gold-text: #846434; } .eyebrow { color: var(--gold-text); } /* --- Base refinements ---------------------------------------------------- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img { height: auto; } /* width/height attrs reserve space; CSS sizes */ picture { display: block; } a { text-underline-offset: 3px; text-decoration-thickness: 1px; } ::selection { background: rgba(169, 87, 59, 0.18); } /* Headlines wrap into even lines; paragraphs avoid a one-word last line. Both are progressive enhancements ignored by older engines. */ h1, h2, h3, .pullquote--featured p { text-wrap: balance; } p, li { text-wrap: pretty; } /* --- Photo bands as with srcset ---------------------------------- */ /* The photographs now ship as pre-cropped 1800x1200 windows (plus 900px for phones) in WebP with JPEG fallback. The portrait frames were cropped around the row Draft A's object-position pointed at, so the crop the visitor sees is unchanged; only the percentage has to be restated for the new frame. */ .band picture { display: block; height: 100%; } .band--arcade img { object-position: 48.7% 50%; } .band--cloister img { object-position: center 50%; } .band--palms img { object-position: center 73%; } /* The headshot is delivered as a square already framed on Emily, so the circle no longer needs an offset. */ .portrait, .signature-block img { object-position: center; } .signature-block picture { flex: 0 0 108px; } .portrait-wrap { margin: 0 auto 40px; width: 220px; } .portrait-wrap .portrait { margin: 0; } @media (max-width: 760px) { .portrait-wrap { width: 180px; } } @media (max-width: 480px) { .signature-block picture { flex-basis: 88px; } } /* --- Topbar: comfortable tap targets, and a real menu on phones ------------ */ .topnav a { padding: 6px 0; } .topnav .btn-outline { padding: 9px 20px; } .nav-toggle { display: none; } /* Below 760px, with JavaScript available, the seven-item nav folds behind a Menu button. Draft A wrapped the links into three centred lines under the wordmark on every page, which pushed the masthead and headline roughly 130px down the screen. Without JavaScript the html element never gains .js, so the nav simply stays open as before. */ @media (max-width: 760px) { .js .topbar { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0; padding: 16px 20px; } .js .wordmark { font-size: 15px; letter-spacing: 0.14em; } .js .nav-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 12px; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--hairline); border-radius: 2px; cursor: pointer; } .js .nav-toggle:hover { border-color: var(--ink-soft); } .js .nav-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; transition: background-color 120ms ease; } .js .nav-toggle__bars::before, .js .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform 160ms ease, top 160ms ease; } .js .nav-toggle__bars::before { top: -6px; } .js .nav-toggle__bars::after { top: 6px; } .js .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .js .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); } .js .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); } .js .topnav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--hairline); } .js .topnav.is-open { display: flex; } .js .topnav a { padding: 13px 4px; font-size: 14px; border-bottom: 1px solid var(--hairline); } .js .topnav a[aria-current="page"]::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-radius: 50%; background: var(--gold-text); vertical-align: middle; } .js .topnav .btn-outline { margin-top: 14px; padding: 14px 20px; text-align: center; border: 1px solid var(--green-deep); } .js .topnav .btn-outline::after { content: none; } } /* --- Contact: required fields, notice before the button ------------------- */ .field .req { color: var(--clay); margin-left: 3px; letter-spacing: 0; } /* The attorney-client notice now sits directly above the submit button, so it is read before the message is sent rather than after. It keeps its hairline and takes the same gap below as a field. */ .form .note-small + .btn { margin-top: 24px; } .form .note-small { margin-top: 4px; } /* Footer address and the map link. Plain address text stays as it was; the link inherits the footer's quiet link styling. */ .footer address { font-style: normal; } /* --- Print: hide the menu button on the handout as well -------------------- */ @media print { .handout .nav-toggle { display: none !important; } } /* 29. Draft B, second pass (sidebar on inner pages, Contact redesign) -------- Third pass: the handout card returned to Home (sidebar) and Contact (end of page) only, so no page carries .page--aside any more. The rules are kept dormant for a Draft C that wants a right column on an inner page. ========================================================================== */ /* --- Inner pages: the handout card sits to the right, not at the end -------- */ /* From 1100px the inner pages take the home page's two-column shape: the text keeps its measure in column one, and the handout card (plus, on Contact, nothing else) sits in a sticky right-hand column. Below that width the aside falls back under the text, right-aligned within the measure as in Draft A. --main-col is the width of the text column: 680px everywhere except Clients, whose mosaic runs 792px. */ .page--aside { --main-col: 680px; } .page--aside.page--sheet { --main-col: 792px; } @media (min-width: 1100px) { .page--aside { max-width: calc(var(--main-col) + 48px + 288px + 64px); display: grid; grid-template-columns: minmax(0, var(--main-col)) 288px; column-gap: 48px; align-items: start; } .page--aside > .page__main { grid-column: 1; min-width: 0; } .page--aside > .page__side { grid-column: 2; position: sticky; top: 40px; } /* the sidebar's first card aligns with the top of the eyebrow */ .page--aside > .page__side .handout-card { margin-top: 0; max-width: none; } .page--aside > .page__side .handout-card + .handout-card { margin-top: 24px; } } /* section-21 spacing rule, restated for the wrapper */ .page__main > .rule + .section { margin-top: 0; } /* Clients: the card used to sit under the mosaic behind a hairline; in the sidebar it needs neither, and below 1100px it is a plain card at the end. */ .page__side .handout-invite { margin: 40px 0 0; padding: 0; border: 0; } /* --- Contact ----------------------------------------------------------------- */ /* Three ways to reach the firm, as a strip under the rule: a small label over a value, side by side from 560px, stacked below. The values are ink, not clay, so the strip reads as information rather than as three buttons; the hover and focus states carry the link affordance. */ .ways { list-style: none; font-style: normal; /* is italic by default */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "call visit" "email visit"; gap: 24px 32px; margin-top: 8px; padding: 28px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .ways li { min-width: 0; } .ways li:nth-child(1) { grid-area: call; } .ways li:nth-child(2) { grid-area: email; } .ways li:nth-child(3) { grid-area: visit; } .ways .label { margin-bottom: 6px; } .ways a, .ways .ways__value { display: block; font-size: 19px; line-height: 1.45; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; } .ways .ways__mail { font-size: 17px; } .ways a:hover { color: var(--clay); } .ways a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; } .ways .ways__tel { font-family: var(--font-display); font-size: 25px; font-weight: 500; line-height: 1.2; white-space: nowrap; } .ways .ways__hint { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-soft); } @media (max-width: 560px) { .ways { grid-template-columns: 1fr; grid-template-areas: "call" "email" "visit"; gap: 20px; } } /* The form heading and the legal notice inside the form. */ .form .label { margin: 40px 0 18px; } .form .cta-note { max-width: 520px; } /* Contact has no "Start a Conversation" button in the topbar (it would link to itself), so the nav ends on its last text link; give the row's end the gap the button used to carry. */ .topbar--no-cta .topnav a:last-child { padding-right: 0; } /* 30. Draft B, third pass ("Is now the time?" on What to Expect) -------------- The moments list uses the hairline-ruled rows of .labelled-list, at body size rather than the list's 18px, with the intro and the closing note in the page's usual prose and note styles. */ .moments { font-size: 19px; margin-top: 4px; } .moments li { padding: 12px 0; } .moments li:first-child { border-top: 1px solid var(--hairline); } .section .prose + .moments { margin-top: 20px; } /* 31. Draft D additions (moments closer, form field hint) -------------------- Appended for the 2026-09-08 round. Nothing above is edited. */ /* what-to-expect.html: the closing nudge now sits under the moments list, which ends on a hairline row. The list's own rows are 12px apart, so the paragraph needs its own air to read as a close rather than an eighth moment. */ .prose--after-moments { margin-top: 26px; } /* contact.html: the referral note moved out of the page body and under the "How did you hear about us?" label, where it explains why the field is being asked. Italic ink-soft, matching .note, but sized and spaced for the inside of a form: it sits between the uppercase sans label and the input, so it must not inherit the label's casing or tracking. */ .field-hint { font-family: var(--font-body); font-style: italic; font-size: 17px; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--ink-soft); margin: -2px 0 10px; max-width: 52ch; } /* four-questions.html in print: the handout is a one-sheet piece, and the Draft D copy is longer than Draft C's — "Porter Estate Planning PC" in the eyebrow, and the McDermott line now wraps to two rows in its half-width credentials column. That pushed the closing disclaimer onto a second page. These trims buy the lines back out of vertical padding only; no type size changes, so nothing reads smaller than it did. */ @media print { /* The sheet fills the page and the closing block is pushed to the foot of it, so the contact line and the disclaimer sit at the bottom margin instead of ending wherever the content happens to stop. One margin-top: auto takes all the free space; the disclaimer keeps its own 6pt gap from section 20 and travels with it. */ .handout .sheet { display: flex; flex-direction: column; min-height: calc(100vh - 0.8in); } .handout .sheet > .handout-contact:not(.print-only) { margin-top: auto; } /* With the page filled, the space freed goes back into the document as air rather than into a gap at the foot. These override the tighter section-20 print values in the same properties. */ @page { size: Letter; margin: 0.4in; } .handout .eyebrow { margin-bottom: 11pt; } .handout h1 { font-size: 25pt; margin-bottom: 10pt; } .handout .rule { margin-bottom: 17pt; } .handout .letter p { margin-bottom: 8pt; } .handout .numbered > li { padding: 9pt 0; } .handout .numbered h2 { margin-bottom: 3pt; } .handout .note { margin-top: 10pt; } .handout .next-steps li { padding: 3pt 0; } .handout .labelled { margin-top: 11pt; padding-top: 8pt; } .handout .pullquote { padding: 8pt 0; } } /* four-questions.html: the eyebrow is a letterhead line rather than a centred caption — firm to the left margin, place to the right, the space between them left open above the heading. */ .eyebrow--split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; } /* what-to-expect.html: the moments each get a short clay rule in a hanging gutter, and the text indents past it. A round bullet would be the one piece of default list furniture on a site that has none; a leading dash would be misread as punctuation, since two of the moments already carry em dashes inside the sentence. A 12px rule is the same mark as the .rule divider under the page headings, at list scale. Wrapped lines align under the first line rather than back under the mark. */ .moments li { position: relative; padding-left: 28px; } .moments li::before { content: ""; position: absolute; left: 0; top: 25px; width: 12px; height: 1px; background: var(--clay); } /* 32. Cognito contact form type (contact.html, Seamless embed) -------------- The "Website Contact" form renders in the page DOM with Cognito's theme ("Website Contact (site tokens)") supplying the colours. Cognito's theme editor offers a fixed font list without EB Garamond or Source Sans 3, so the type is set here. Cognito applies its theme through CSS variables declared on the form element (.cog-8) at low specificity, so the block below overrides those; if an update renames one, that property falls back to the theme rather than breaking. Everything else inside the form is reset by Cognito to "inherit" from :root:root:root .cog-cognito--protect-css (specificity 0,5,0, no !important). Uppercase, letter-spacing, italic, and the help and disclaimer type have no variables, so those few declarations carry !important rather than an escalating :root chain. Borders are darker than --hairline so field edges meet the 3:1 non-text contrast minimum (#8F8573 is 3.5:1 on the input fill, 3.4:1 on ivory). */ .form .cog-cognito { --font-family: var(--font-body); --font-size: 19px; --color: var(--ink); --heading__font-family: var(--font-body); --label__font-family: var(--font-sans); --label__font-size: 13px; --label__font-weight: 600; --label__color: var(--ink-soft); --small-text: 17px; --input__font-size: 19px; --input__color: var(--ink); --input__background-color: var(--sheet); --input__border-color: #8F8573; --input__padding-v: 12px; --input__padding-h: 14px; --checkable__border-color: #8F8573; --button-primary__font-family: var(--font-sans); --button-primary__font-size: 13px; --button-primary__font-weight: 600; } /* Short labels in the site's uppercase style. The two question labels (Cognito field numbers 6 and 7: "How did you hear about us?" and the referral question) stay in sentence case, which reads more easily at this length. If Cognito renumbers them, they fall back to uppercase. */ .form .cog-cognito .cog-label { text-transform: uppercase !important; letter-spacing: 0.14em !important; } .form .cog-cognito .cog-field--6, .form .cog-cognito .cog-field--7 { --label__font-size: 15px; } .form .cog-cognito .cog-field--6 .cog-label, .form .cog-cognito .cog-field--7 .cog-label { text-transform: none !important; letter-spacing: normal !important; } .form .cog-cognito .cog-helptext { font-style: italic !important; line-height: 1.5 !important; color: var(--ink-soft) !important; } /* The disclaimer content block, set like the page's old .note-small. */ .form .cog-cognito .cog-content { font-family: var(--font-sans) !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--ink-soft) !important; } .form .cog-cognito .cog-button--primary { text-transform: uppercase !important; letter-spacing: 0.14em !important; padding: 17px 40px !important; height: auto !important; }