/* ============================================================ McCullough Law — Brand Refresh Palette: Pantone Black → Navy · Pantone 465 Gold · Sand · Cream Aesthetic: Cartier · Rolex · Porsche · Hermès ============================================================ */ /* The Google Fonts request lives in each page's , behind a preconnect. An @import here would repeat it one round-trip later — the browser cannot start it until this stylesheet has downloaded and parsed — which delays first paint for no benefit. */ /* ── Variables ───────────────────────────────────────────── */ :root { /* Backgrounds — unified warm surface */ --bg: #F8F6F2; /* warm parchment — the one surface */ --bg-alt: #F3EFE9; /* barely-there cream, inset use only */ --bg-dark: #0A1628; /* luxury navy — hero + footer */ --bg-lift: rgba(10, 22, 40, 0.03); /* Text */ --white: #FFFFFF; --navy: #0A1628; /* primary dark text + dark bgs */ --text: #3D3D3D; /* McCullough Dark Gray (body) */ --text-mid: #808080; /* McCullough Gray */ --muted: rgba(61, 61, 61, 0.42); /* Brand Gold — Pantone 465 */ --gold: #AB8144; --gold-hover: #C4952A; --gold-dim: rgba(171, 129, 68, 0.07); --gold-rule: rgba(171, 129, 68, 0.2); /* Grays */ --light-gray: #E6E6E6; /* McCullough Light Gray */ /* Fonts — Cormorant Garamond (headers) · Montserrat (body) */ --display: 'Cormorant Garamond', Garamond, Georgia, serif; --serif: 'Cormorant Garamond', Garamond, Georgia, serif; --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; --max-w: 1380px; --nav-h: 72px; --gap: 120px; } /* ── Reset ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Smooth scrolling is a comfort for most people and a trigger for some, so it is opt-out via the OS setting rather than unconditional. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Anything an in-page link can land on clears the fixed nav bar instead of hiding underneath it. Individual rules with an id selector still win. */ [id] { scroll-margin-top: calc(var(--nav-h) + 32px); } /* ── Keyboard focus ──────────────────────────────────────── */ /* :focus-visible only, so a mouse click never paints a ring — the page looks exactly as it did, and someone tabbing through can see where they are. Several inputs below set `outline: none` on :focus; these restore a ring for keyboard use without bringing back the browser's default on click. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .articles-search input:focus-visible, .articles-sort select:focus-visible, .lux-field input:focus-visible, .lux-field textarea:focus-visible, .newsletter-form input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ── Skip link ───────────────────────────────────────────── */ /* Parked off-screen and only reachable by keyboard, so it never appears for a visitor using a pointer. Without it, tabbing into any page means walking the whole nav — including the Services submenu — before reaching the content. */ .skip-link { position: absolute; top: -80px; left: 12px; z-index: 2000; padding: 12px 22px; background: var(--navy); color: var(--white); font-family: var(--sans); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--gold); transition: top 0.2s ease; } .skip-link:focus { top: 12px; } /* The landing target takes focus programmatically; it must not draw a ring. */ #main-content:focus { outline: none; } /* ── Reduced motion ──────────────────────────────────────── */ /* Honour the OS setting across the whole site rather than in the few places that thought to ask. Durations collapse instead of being removed, so animations that end in the visible state still land there — the scroll reveals in particular, which start at opacity 0. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .fade-in { opacity: 1 !important; transform: none !important; } } body { font-family: var(--sans); font-weight: 300; background: var(--bg); color: var(--text); line-height: 1.9; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; image-rendering: auto; } /* `a` alone beats the UA's visited colour (author origin wins), and avoids `a:visited` — at 0-1-1 that outranks single-class selectors like .btn-ghost. */ a { color: inherit; text-decoration: none; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: var(--sans); } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } /* ── Typography ─────────────────────────────────────────── */ h1 { font-family: var(--display); color: var(--navy); font-weight: 400; line-height: 1.05; } h2, h3, h4, h5 { font-family: var(--serif); color: var(--navy); font-weight: 400; line-height: 1.1; } /* Dark-section overrides — hero, footer */ .hero h1, .hero h2, .hero h3, .hero-page h1, .hero-page h2, .footer h1, .footer h2, .footer h3, .footer h4, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); } .eyebrow { display: block; font-family: var(--sans); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.75rem; } /* ── Layout ─────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 52px; } section { padding: var(--gap) 0; } /* bg-alt sections: same warm parchment, no colour jump — flow is created by hairline gold rules and generous whitespace only */ .bg-alt { background: var(--bg); border-top: 1px solid rgba(171,129,68,0.1); } /* ── Gold rule ──────────────────────────────────────────── */ .gold-rule-h { display: block; width: 48px; height: 1px; background: var(--gold); margin: 36px 0; } .gold-rule-h.center { margin: 36px auto; } /* ── Fade-in ────────────────────────────────────────────── */ .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in.delay-1 { transition-delay: 0.12s; } .fade-in.delay-2 { transition-delay: 0.24s; } .fade-in.delay-3 { transition-delay: 0.36s; } .fade-in.delay-4 { transition-delay: 0.48s; } .fade-in.delay-5 { transition-delay: 0.60s; } /* ── Navigation ─────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); transition: background 0.6s ease, border-color 0.6s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(10, 22, 40, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(171, 129, 68, 0.22); } .nav.scrolled .nav-links a { color: rgba(255, 255, 255, 0.72); } .nav.scrolled .nav-links a:hover, .nav.scrolled .nav-links a.active { color: var(--white); } .nav.scrolled .nav-logo img { filter: brightness(0) invert(1); } .nav.scrolled .nav-logo-text { color: var(--white); } .nav.scrolled .nav-toggle span { background: var(--white); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } /* The lockup is a vector cropped tight to the artwork (no baked-in padding), so the height here is the height of the letterforms themselves. */ .nav-logo img { height: 30px; width: auto; max-width: 62vw; filter: brightness(0) invert(1); } .nav-logo-text { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--white); letter-spacing: 0.07em; } .nav-links { display: flex; align-items: center; gap: 48px; } .nav-links a { font-size: 0.65rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); position: relative; transition: color 0.35s; } .nav-links a::after { content: ''; position: absolute; bottom: -8px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .nav-links a:hover, .nav-links a.active { color: var(--white); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* "Start a Conversation" CTA box in nav */ .nav-cta { border: 1px solid rgba(255, 255, 255, 0.38) !important; padding: 9px 22px !important; margin-left: 8px; transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease !important; } .nav-cta:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.72) !important; } .nav-cta::after { display: none !important; } .nav.scrolled .nav-cta { border-color: rgba(255,255,255,0.38) !important; color: var(--white) !important; } .nav.scrolled .nav-cta:hover { background: rgba(255,255,255,0.09) !important; border-color: rgba(255,255,255,0.72) !important; color: var(--white) !important; } /* Solid nav for pages with no dark hero behind the bar (e.g. Contact). Mirrors .scrolled, but applies from the top of the page. Declared before the .menu-open rule so the mobile panel can still clear the backdrop-filter. */ .nav.nav--solid { background: rgba(10, 22, 40, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(171, 129, 68, 0.22); } .nav.nav--solid .nav-links a { color: rgba(255, 255, 255, 0.72); } .nav.nav--solid .nav-links a:hover, .nav.nav--solid .nav-links a.active { color: var(--white); } .nav.nav--solid .nav-logo img { filter: brightness(0) invert(1); } .nav.nav--solid .nav-logo-text { color: var(--white); } .nav.nav--solid .nav-toggle span { background: var(--white); } .nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; z-index: 1100; } .nav-toggle span { display: block; width: 22px; height: 1px; background: var(--white); transition: transform 0.4s ease, opacity 0.4s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ── Hero — Home ────────────────────────────────────────── */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; padding-top: var(--nav-h); } /* Dark overlay for legibility — fades out toward the bottom so the image blends into the page background without a cool-gray band */ .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 22, 40, 0.45) 0%, rgba(10, 22, 40, 0.45) 42%, rgba(10, 22, 40, 0) 72%); z-index: 1; } .hero > .container { position: relative; z-index: 2; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(171, 129, 68, 0.08) 0%, transparent 58%), linear-gradient(180deg, #0D2040 0%, #0A1628 55%, #071220 100%); } .hero-content { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; } /* Ombre fade from hero into page */ .hero-bottom-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 340px; background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%); z-index: 3; pointer-events: none; } .hero-headline { font-family: var(--display); font-size: clamp(2.8rem, 5.5vw, 5.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: #FFFFFF; margin-bottom: 0; } /* Hero logo lockup (home) — images/mccullough-law-logo.svg is true vector, so it renders sharp at any size and on any pixel density. It is cropped tight to the artwork, so the width below is the width of the mark itself with nothing to spare; `max-width` keeps a comfortable margin on narrow phones. */ .hero-logo-wrap { display: flex; justify-content: center; margin-bottom: 0; } .hero-logo { width: clamp(300px, 46vw, 620px); max-width: 86vw; height: auto; filter: brightness(0) invert(1); } .hero-logo-fallback { font-family: var(--display); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 600; color: #fff; } .hero-body { max-width: 560px; margin: 28px auto 0; font-size: 0.95rem; line-height: 2; color: rgba(255, 255, 255, 0.82); font-weight: 300; } .hero-cta { /* Tucked up under the lockup — a 52px gap left the hero looking split in two. */ margin-top: clamp(20px, 2.6vw, 32px); display: flex; align-items: center; justify-content: center; gap: 24px; } /* ── Hero cinematic entrance ────────────────────────────── */ @keyframes hero-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } .hero-w1, .hero-w2, .hero-w3 { display: inline-block; opacity: 0; animation: hero-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) forwards; } .hero-w4, .hero-w5 { opacity: 0; animation: hero-fade-up 0.6s cubic-bezier(0.16,1,0.3,1) forwards; } .hero-w1 { animation-delay: 0.05s; } .hero-w2 { animation-delay: 0.15s; } .hero-w3 { animation-delay: 0.25s; } .hero-w4 { animation-delay: 0.15s; } .hero-w5 { animation-delay: 0.25s; } /* ── Photo Placeholder System ───────────────────────────── */ .photo-placeholder { position: relative; overflow: hidden; background: #D6D1CB; } .photo-placeholder img { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; object-fit: cover; object-position: center; display: block; } /* Centered, clearly visible placeholder label */ .photo-placeholder[data-label]::after { content: attr(data-label); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(10, 22, 40, 0.45); text-align: center; white-space: nowrap; border: 1px dashed rgba(10, 22, 40, 0.2); padding: 14px 24px; pointer-events: none; z-index: 2; line-height: 1; } .photo--hero { position: absolute; inset: 0; z-index: 0; } .photo--band { height: 52vh; min-height: 340px; } .photo--half { height: 100%; min-height: 580px; } .photo--portrait { aspect-ratio: 3/4; } .photo--wide { aspect-ratio: 16/9; } /* ── Photo Band — full-bleed ────────────────────────────── */ .photo-band { padding: 0; overflow: hidden; } /* ── Photo Split — 50/50 ────────────────────────────────── */ .photo-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 680px; padding: 0; } .photo-split-photo { position: relative; overflow: hidden; } .photo-split-text { padding: 120px 80px; background: var(--bg); display: flex; flex-direction: column; justify-content: center; } /* Reversed split — text left, photo right */ .photo-split--reverse .photo-split-photo { order: 2; } .photo-split--reverse .photo-split-text { order: 1; } /* Team mosaic — stands in for a group photo using the real portraits. The portraits are 600×850 and cropped tight to the head, so the mosaic box has to hold that ratio at every width or object-fit: cover starts shaving the tops of heads off. Three tiles across, two down, gives 1800/1700 — the section drops its fixed min-height and takes its height from that instead, which keeps the framing identical in the 50/50 split and stacked layouts. */ .photo-split--mosaic { min-height: 0; } .photo-split-photo--mosaic { aspect-ratio: 18 / 17; } .team-mosaic { position: absolute; inset: 0; display: grid; /* minmax(0,…) — otherwise the portraits' intrinsic height blows out the rows */ grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--navy); } .team-mosaic img { width: 100%; height: 100%; object-fit: cover; /* images/mosaic/* are pre-cropped to a matched head size, so centre is right */ object-position: center; filter: grayscale(100%) contrast(1.02); transition: filter 0.9s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .photo-split:hover .team-mosaic img { filter: grayscale(55%); } @media (prefers-reduced-motion: reduce) { .team-mosaic img { transition: none; } } /* ── Serve Headline (inside photo-split) ───────────────── */ .serve-headline { font-family: var(--display); font-size: clamp(1.55rem, 2.4vw, 2.1rem); font-weight: 400; color: var(--navy); line-height: 1.35; letter-spacing: -0.01em; max-width: 620px; } /* ── Serve Stack (inside photo-split) ──────────────────── */ .serve-stack { display: flex; flex-direction: column; margin-top: 40px; } .serve-item { border-top: 1px solid var(--gold-rule); padding: 28px 0; } .serve-item:last-child { border-bottom: 1px solid var(--gold-rule); } .serve-item h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--navy); margin-bottom: 0.5rem; line-height: 1.3; } .serve-item p { font-size: 0.85rem; line-height: 1.9; color: var(--text); margin: 0; } /* ── Hero — Interior ────────────────────────────────────── */ .hero-page { padding: 200px 0 120px; position: relative; overflow: hidden; text-align: left; } .hero-page-photo { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; object-fit: cover; object-position: center; display: block; } .hero-page .hero-bg { background: radial-gradient(ellipse at 30% 50%, rgba(171,129,68,0.06) 0%, transparent 55%), linear-gradient(160deg, rgba(10,22,40,0.72) 0%, rgba(7,18,32,0.86) 100%); } .hero-page h1 { font-family: var(--display); font-size: clamp(3.2rem, 7vw, 6.5rem); margin-bottom: 1.5rem; letter-spacing: -0.025em; line-height: 1.0; } .hero-page .lead { max-width: 640px; font-size: 1.05rem; line-height: 2; color: rgba(242, 236, 227, 0.8); font-weight: 300; } /* ── Buttons ────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 40px; font-family: var(--sans); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; } /* CTAs on dark imagery — white hairline outline over a transparent fill, inverting to a solid white plate with near-black type on hover. The fill has to come in with the dark text, or black type would sit unreadable against the photograph behind it. */ .btn-gold, .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.70); color: var(--white); /* the hero fog runs almost white behind these, so pure white type alone can read as grey — a soft scrim keeps it legible without a fill */ text-shadow: 0 1px 14px rgba(10, 22, 40, 0.55); } .btn-gold:hover, .btn-ghost:hover, .btn-gold:focus-visible, .btn-ghost:focus-visible { background: var(--white); border-color: var(--white); color: var(--navy); text-shadow: none; gap: 18px; } /* Hard pin for the two hero CTAs at 0-2-1 / 0-3-1, above anything an `a` selector elsewhere could impose. Both labels are white at rest whether or not their destination has been visited, and invert only on hover/focus. */ .hero-cta a.btn-gold, .hero-cta a.btn-ghost { color: var(--white); } .hero-cta a.btn-gold:hover, .hero-cta a.btn-ghost:hover, .hero-cta a.btn-gold:focus-visible, .hero-cta a.btn-ghost:focus-visible { color: var(--navy); } .btn-outline { background: transparent; border: 1px solid rgba(171,129,68,0.60); color: var(--navy); } .btn-outline:hover { background: var(--gold); border-color: var(--gold); color: #ffffff; gap: 18px; } /* ── Statement / Distinction ─────────────────────────────── */ .distinction { display: grid; grid-template-columns: 1fr 1fr; gap: 120px; /* the left column carries headline + image, so centre the copy against it rather than leaving a well of white space beneath */ align-items: center; } /* …except where the right column runs long (the credo), which leaves the headline stranded mid-column. Top-align the two instead so the headline sits level with the first line of copy. */ .distinction--top { align-items: start; } .distinction-left h2 { font-family: var(--display); font-size: clamp(2.4rem, 4.5vw, 4.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; } .distinction-right p { font-size: 0.95rem; line-height: 2.05; margin-bottom: 1.5rem; font-weight: 300; color: var(--text); } /* opening paragraph carries slightly more weight — an editorial entry point so the section doesn't read as two identical blocks of text */ .distinction-right .distinction-lead { font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.65; font-weight: 400; color: var(--navy); margin-bottom: 1.9rem; } .distinction-photo { margin-top: 8px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); } .distinction-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); } .distinction-photo:hover img { transform: scale(1.03); } @media (max-width: 1024px) { .distinction-photo { aspect-ratio: 16 / 9; margin-bottom: 8px; } } /* ── Pull Quote — elegant inset, no background block ────── */ .pull-quote { text-align: center; padding: calc(var(--gap) * 0.85) 0; border-top: 1px solid rgba(171,129,68,0.1); } .pull-quote blockquote { font-family: var(--display); font-size: clamp(1.4rem, 2.8vw, 2.5rem); font-weight: 400; font-style: italic; color: var(--navy); line-height: 1.65; max-width: 860px; margin: 0 auto; letter-spacing: 0.005em; } .pull-quote blockquote::before { content: '\2014'; /* em dash, more refined than open-quote */ display: block; color: var(--gold); font-size: 1.25rem; font-style: normal; letter-spacing: 0; margin-bottom: 1.75rem; opacity: 0.7; } /* ── Services List (Editorial) ──────────────────────────── */ /* Layered "What We Do" band. The ridge photograph scrolls slower than the copy over it, giving the list a plane to sit on instead of flat cream. js/main.js drives .services-backdrop img. */ .services-section { position: relative; overflow: hidden; } .services-section > .container { position: relative; z-index: 1; } /* A horizon band pinned to the foot of the section rather than a full-height wash: stretching one landscape frame over a 2,000px section crops it to a featureless slice, and nothing that has no detail can read as moving. */ .services-backdrop { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(560px, 78vh, 880px); z-index: 0; pointer-events: none; overflow: hidden; } /* Taller than the frame so the parallax translate has headroom at both ends. */ .services-backdrop img { position: absolute; top: -18%; left: 0; width: 100%; height: 136%; object-fit: cover; object-position: center 78%; filter: saturate(0.62); will-change: transform; } /* Parchment veil — the ridges read as depth behind the type, never as texture competing with it. Feathered at the top so the band has no seam. */ .services-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, rgba(248, 246, 242, 0.93) 16%, rgba(248, 246, 242, 0.79) 48%, rgba(248, 246, 242, 0.86) 82%, var(--bg) 100%); } /* Shared by the full Services page, which lists each offering with its description. The home page uses .service-tiles below instead. */ .services-list { border-top: 1px solid var(--gold-rule); } .service-row { display: grid; grid-template-columns: 1fr; align-items: center; gap: 52px; padding: 44px 0; border-bottom: 1px solid var(--gold-rule); color: inherit; position: relative; overflow: hidden; } .service-row::before { content: ''; position: absolute; inset: 0; background: var(--gold-dim); opacity: 0; transition: opacity 0.5s; pointer-events: none; } a.service-row:hover::before { opacity: 1; } .service-row-body { position: relative; z-index: 1; } .service-row-body h3 { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 400; color: var(--navy); margin-bottom: 6px; transition: color 0.35s; } a.service-row:hover .service-row-body h3 { color: var(--gold); } .service-row-body p { font-size: 0.875rem; line-height: 1.75; color: var(--text-mid); margin: 0; } /* ── Service Tiles (home "What We Do") ──────────────────── */ /* Names only, three across and two down. No rules of any kind — the grid is held together by spacing alone, so the names read as a directory rather than a table. The descriptions live on the Services page. */ .service-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 40px; } .service-tile { display: block; position: relative; /* Centred in its column. The section header carries .center and the closing button is centred too, so the heading, the two rows of names and the CTA all sit on one axis rather than the names hanging off a left margin. */ padding: 14px 8px; text-align: center; color: inherit; } .service-tile-name { font-family: var(--serif); /* Sized to read as a second-level heading under the section title rather than as caption text. */ font-size: clamp(1.35rem, 2.1vw, 1.95rem); font-weight: 400; line-height: 1.25; letter-spacing: 0.005em; color: var(--navy); transition: color 0.35s ease; } /* With the rules gone, the gold name is the only hover affordance. */ a.service-tile:hover .service-tile-name, a.service-tile:focus-visible .service-tile-name { color: var(--gold); } /* ── Three Columns (no borders) ─────────────────────────── */ .three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; } .col-item-label { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 1.25rem; } .col-item h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 400; margin-bottom: 1.1rem; line-height: 1.25; color: var(--navy); } .col-item p { font-size: 0.875rem; line-height: 1.95; color: var(--text); } /* ── Feature Grid (doc cards, advanced items) ────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gold-rule); border: 1px solid var(--gold-rule); } .feature-item { background: var(--bg-alt); padding: 56px 52px; transition: background 0.4s; } .feature-item:hover { background: #EDE7DD; } .feature-item h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--gold); margin-bottom: 1rem; } .feature-item p { font-size: 0.875rem; line-height: 1.95; color: var(--text); } /* ── Explainer ───────────────────────────────────────────── */ .explainer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gold-rule); border: 1px solid var(--gold-rule); margin-bottom: 96px; } .explainer-col { background: var(--bg-alt); padding: 56px 48px; } .explainer-col h4 { font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .explainer-col p { font-size: 0.875rem; line-height: 1.95; } /* ── Callout ─────────────────────────────────────────────── */ .callout { border-left: 2px solid var(--gold); padding: 40px 56px; margin: 72px 0; background: var(--bg-alt); } .callout h4 { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--navy); margin-bottom: 0.75rem; } .callout p { font-size: 0.9rem; line-height: 1.95; color: var(--text); } /* ── Trust List ──────────────────────────────────────────── */ .trust-list { border-top: 1px solid var(--gold-rule); } .trust-item { display: grid; grid-template-columns: 260px 1fr; gap: 80px; padding: 52px 0; border-bottom: 1px solid var(--gold-rule); transition: background 0.4s; } .trust-item:hover { background: var(--bg-lift); } .trust-item-title { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--navy); line-height: 1.4; } .trust-item-desc { font-size: 0.875rem; line-height: 1.95; color: var(--text); } /* ── Two-col text (probate) ─────────────────────────────── */ .two-col-text { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; } .two-col-text h2 { font-size: clamp(1.75rem, 3vw, 2.75rem); font-weight: 400; margin-bottom: 2rem; color: var(--navy); } .two-col-text p { font-size: 0.9rem; line-height: 1.95; margin-bottom: 1.25rem; color: var(--text); } .two-col-text strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--gold); display: block; margin: 2rem 0 0.6rem; } /* ── Section header ──────────────────────────────────────── */ .section-header { margin-bottom: 56px; } .section-header.center { text-align: center; } .section-header.center p { max-width: 600px; margin-left: auto; margin-right: auto; } .section-header p { max-width: 580px; margin-top: 1.75rem; font-size: 0.9375rem; line-height: 1.95; color: var(--text); } /* ── Team ────────────────────────────────────────────────── */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .team-card { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); /* Promote to own layer before hover to prevent GPU-compositing blur */ will-change: transform; } .team-card:hover { transform: translateY(-5px); } .team-card-photo { aspect-ratio: 3/4; background: linear-gradient(165deg, var(--bg-alt) 0%, #E8E2D8 100%); position: relative; overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(171,129,68,0.1); /* No ::after gradient — it peaks at 50% 20% (hair area) and causes colour cast */ } .team-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 3.75rem; font-weight: 300; color: rgba(10, 22, 40, 0.12); z-index: 1; } .team-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 2; image-rendering: high-quality; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .team-card-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--navy); margin-bottom: 4px; } .team-card-role { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .team-card-bio { font-size: 0.82rem; line-height: 1.88; color: var(--text-mid); } /* ── Bio Modal ───────────────────────────────────────────── */ .team-card.has-bio { cursor: pointer; } .team-card.has-bio .team-card-photo::before { content: 'View Bio'; position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: rgba(10, 22, 40, 0.72); color: rgba(242, 236, 227, 0.9); font-family: var(--sans); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; opacity: 0; transform: translateY(100%); transition: opacity 0.4s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); z-index: 3; } .team-card.has-bio:hover .team-card-photo::before { opacity: 1; transform: translateY(0); } .bio-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 22, 40, 0); opacity: 0; pointer-events: none; transition: background 0.35s, opacity 0.35s; } .bio-modal.open { background: rgba(10, 22, 40, 0.72); opacity: 1; pointer-events: auto; } .bio-modal-inner { position: relative; background: var(--bg); max-width: 540px; width: 100%; padding: 64px 56px; transform: translateY(24px); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .bio-modal.open .bio-modal-inner { transform: translateY(0); } .bio-modal-close { position: absolute; top: 24px; right: 28px; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; transition: color 0.3s; background: none; border: none; } .bio-modal-close:hover { color: var(--navy); } .bio-modal-portrait { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; margin-bottom: 20px; background: linear-gradient(165deg, var(--bg-alt) 0%, #E8E2D8 100%); border: 1px solid rgba(171,129,68,0.15); position: relative; display: none; } .bio-modal-portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .bio-modal-inner.has-photo .bio-modal-portrait { display: block; } .bio-modal-inner.has-photo .bio-modal-initials { display: none; } .bio-modal-initials { font-family: var(--serif); font-size: 2.75rem; font-weight: 300; color: rgba(10, 22, 40, 0.1); margin-bottom: 24px; line-height: 1; } .bio-modal-name { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 400; color: var(--navy); margin-bottom: 6px; line-height: 1.2; } .bio-modal-role { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .bio-modal-divider { height: 1px; background: var(--gold-rule); margin: 28px 0; } .bio-modal-bio { font-size: 0.9rem; line-height: 2; color: var(--text); margin: 0; } /* ── Filter Bar ──────────────────────────────────────────── */ .filter-bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--gold-rule); margin-bottom: 44px; } .filter-group { display: flex; gap: 0; } .filter-btn { padding: 18px 28px; font-family: var(--sans); font-size: 0.65rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; background: transparent; white-space: nowrap; transition: color 0.3s, border-color 0.3s; } /* Navy, not white — this bar sits on the parchment page, where a white hover state all but erased the label being hovered. */ .filter-btn:hover { color: var(--navy); } .filter-btn.active { color: var(--gold); border-bottom-color: var(--gold); } .sort-btn { padding: 10px 18px; font-family: var(--sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--gold-rule); border-radius: 2px; background: transparent; white-space: nowrap; cursor: pointer; transition: color 0.3s, border-color 0.3s; } .sort-btn:hover { color: var(--text); border-color: rgba(171,129,68,0.4); } .sort-btn.active { color: var(--gold); border-color: var(--gold); } /* ── Contact Page ────────────────────────────────────────── */ .contact-form-title { font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 400; color: var(--navy); line-height: 1.1; letter-spacing: -0.01em; } .contact-form-title + .gold-rule-h { margin: 28px 0 46px; } @media (max-width: 768px) { .contact-form-title + .gold-rule-h { margin: 24px 0 36px; } } .contact-wrap { display: grid; grid-template-columns: 1fr 380px; gap: 120px; align-items: start; } /* Luxury underline form */ .lux-form { display: flex; flex-direction: column; } .lux-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .lux-field { position: relative; margin-bottom: 44px; } .lux-field label { display: block; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; transition: color 0.3s; } .lux-field input, .lux-field select, .lux-field textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(10, 22, 40, 0.15); color: var(--navy); padding: 10px 0 14px; font-family: var(--serif); font-size: 1.05rem; font-weight: 300; line-height: 1.5; outline: none; transition: border-color 0.4s; -webkit-appearance: none; appearance: none; border-radius: 0; } .lux-field input::placeholder, .lux-field textarea::placeholder { color: rgba(10, 22, 40, 0.25); font-style: italic; } .lux-field select { color: rgba(10, 22, 40, 0.35); cursor: pointer; } .lux-field select.has-value, .lux-field select:focus { color: var(--navy); } .lux-field select option { background: var(--white); color: var(--navy); } .lux-field textarea { resize: none; min-height: 100px; display: block; } /* Animated gold underline on focus */ .lux-field::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .lux-field:focus-within::after { width: 100%; } .lux-field:focus-within label { color: rgba(196, 149, 42, 0.85); } .lux-submit { display: inline-flex; align-items: center; margin-top: 16px; padding: 18px 48px; font-family: var(--sans); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--white); border: none; background: var(--navy); cursor: pointer; transition: background 0.35s ease; } .lux-submit:hover { background: #0d1e36; } /* min-width holds the button steady when the label swaps to "Sending…" */ .lux-submit { justify-content: center; min-width: 258px; } .lux-submit:disabled { cursor: default; opacity: 0.55; } .lux-submit-spinner { display: none; width: 13px; height: 13px; border: 1.5px solid rgba(255, 255, 255, 0.3); border-top-color: var(--white); border-radius: 50%; animation: lux-spin 0.7s linear infinite; } .lux-submit.is-submitting .lux-submit-spinner { display: block; margin-right: 14px; } @keyframes lux-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .lux-submit-spinner { animation-duration: 2.4s; } } /* Filled message textarea (overrides the underline style for the textarea only) */ .lux-field--message::after { display: none; } .lux-field--message textarea { background: rgba(10, 22, 40, 0.03); border: 1px solid rgba(10, 22, 40, 0.15); border-radius: 3px; padding: 16px 18px; min-height: 150px; transition: border-color 0.3s, background 0.3s; } .lux-field--message textarea:focus { border-color: rgba(196, 149, 42, 0.6); background: rgba(10, 22, 40, 0.045); } .form-success { display: none; padding: 40px 0; } .form-success.visible { display: block; } .form-success-title { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 300; font-style: italic; color: var(--navy); margin-bottom: 1rem; } /* Excluding the title matters: `.form-success p` is a class plus a type, which outranks the single class on `.form-success-title` — so the font-size below was overriding the title's clamp() and rendering "Thank you." at body size. The copy itself is in the display serif so the whole message reads as one voice rather than a serif line followed by a sans one. */ .form-success p:not(.form-success-title) { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; color: var(--navy); } /* inline validation / send failure notice */ .form-error { margin-top: 24px; padding: 14px 18px; border-left: 2px solid #b3261e; background: rgba(179, 38, 30, 0.05); font-size: 0.85rem; line-height: 1.7; color: #8c1d18; } .lux-optional { color: var(--muted); letter-spacing: 0.08em; text-transform: none; } /* honeypot — off-screen rather than display:none so bots still fill it */ .lux-hp, .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Contact sidebar */ .contact-aside {} .contact-aside-section { margin-bottom: 44px; } .contact-aside-section:last-child { margin-bottom: 0; } .contact-aside-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 16px; } .contact-aside-value { font-family: var(--serif); font-size: 1.15rem; font-weight: 300; color: var(--navy); line-height: 1.55; } .contact-aside-value a { color: var(--navy); transition: color 0.3s; display: block; } .contact-aside-value a:hover { color: var(--gold); } /* ── Privacy Policy Page ─────────────────────────────────── */ .policy-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 120px; align-items: start; } .policy-body { max-width: 740px; } .policy-updated { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-bottom: 56px; } .policy-section { padding-bottom: 56px; margin-bottom: 56px; border-bottom: 1px solid var(--gold-rule); } .policy-section:last-child { border-bottom: none; } .policy-section h2 { font-size: clamp(1.1rem, 2vw, 1.55rem); font-weight: 400; margin-bottom: 20px; } .policy-section .gold-rule-h { margin-bottom: 28px; } .policy-section p { font-size: 0.9rem; line-height: 2; color: var(--text); } .policy-list { list-style: none; padding: 0; margin: 20px 0 0; } .policy-list li { font-size: 0.9rem; line-height: 1.9; color: var(--text); padding-left: 20px; position: relative; } .policy-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-size: 0.75rem; } .policy-aside { position: sticky; top: calc(var(--nav-h) + 40px); } .policy-aside-inner { padding: 52px 44px; border: 1px solid var(--gold-rule); background: var(--bg-alt); color: var(--navy); } .policy-nav { display: flex; flex-direction: column; gap: 0; margin-bottom: 52px; } .policy-nav a { font-size: 0.78rem; color: var(--text); padding: 12px 0; border-bottom: 1px solid rgba(196, 149, 42, 0.1); transition: color 0.3s, padding-left 0.3s; cursor: default; } .policy-nav a:hover { color: var(--gold); padding-left: 6px; } .policy-aside-contact { padding-top: 40px; border-top: 1px solid var(--gold-rule); } /* Legacy contact cards (kept for other uses) */ .contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--gold-rule); max-width: 920px; } .contact-card { display: flex; flex-direction: column; gap: 14px; padding: 60px 52px; background: var(--bg); color: inherit; transition: background 0.4s; } .contact-card:not(.contact-card--static):hover { background: var(--bg-lift); } .contact-card-label { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); } .contact-card-value { font-family: var(--serif); font-size: 1.2rem; color: var(--white); line-height: 1.4; } .contact-card-action { font-size: 0.78rem; color: var(--muted); margin-top: auto; } .contact-card:not(.contact-card--static):hover .contact-card-action { color: var(--gold); } /* ── Careers ─────────────────────────────────────────────── */ .careers-body { max-width: 660px; } .careers-body p { font-size: 1rem; line-height: 2.0; margin-bottom: 1.5rem; color: var(--text); } .careers-body a:not(.btn) { color: var(--gold); transition: color 0.3s; } .careers-body a:not(.btn):hover { color: var(--gold-hover); } /* ── Footer — seamless continuation of the dark closing zone */ .footer { background: var(--bg-dark); border-top: 1px solid rgba(171,129,68,0.08); } .footer-main { padding: 72px 0 52px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; } .footer-logo-img { height: 24px; width: auto; max-width: 80vw; display: block; filter: brightness(0) invert(1); opacity: 0.78; } .footer-contact-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; font-family: var(--sans); font-size: 0.78rem; color: rgba(242,236,227,0.38); line-height: 1.6; } .footer-contact-row a { color: rgba(242,236,227,0.38); text-decoration: none; transition: color 0.3s; } .footer-contact-row a:hover { color: rgba(242,236,227,0.78); } .footer-dot { color: rgba(242,236,227,0.18); margin: 0 2px; } .footer-nav-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; } .footer-nav-row a { font-family: var(--sans); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.04em; color: rgba(242,236,227,0.52); text-decoration: none; transition: color 0.3s; } .footer-nav-row a:hover { color: rgba(242,236,227,0.92); } .footer-social { display: inline-flex; align-items: center; color: rgba(242,236,227,0.52); transition: color 0.3s; } .footer-social:hover { color: rgba(242,236,227,0.92); } .footer-social svg { width: 17px; height: 17px; fill: currentColor; display: block; } .footer-divider { height: 1px; background: rgba(171,129,68,0.14); margin-bottom: 36px; } .footer-disclaimer { font-size: 0.74rem; color: rgba(242,236,227,0.38); line-height: 1.85; max-width: 900px; margin-bottom: 32px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .footer-bottom p { font-size: 0.74rem; color: rgba(242,236,227,0.28); margin: 0; } .footer-bottom a { color: rgba(242,236,227,0.28); transition: color 0.3s; } .footer-bottom a:hover { color: var(--gold); } /* ── Hours (contact page) ────────────────────────────────── */ .hours-list { margin-top: 4px; } .hours-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(171, 129, 68, 0.08); /* wraps the time onto its own line rather than breaking it mid-string when the column is too narrow for both halves */ flex-wrap: wrap; gap: 2px 16px; } .hours-row:last-of-type { border-bottom: none; } /* Same face and size as .contact-aside-value, so the hours read as part of the same list as Email / Phone / Fax / Office rather than a separate footnote. */ .hours-day, .hours-time { font-family: var(--serif); font-size: 1.15rem; font-weight: 300; color: var(--navy); line-height: 1.55; } .hours-time { white-space: nowrap; } .hours-timezone { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-top: 14px; display: block; opacity: 0.75; } /* ── Newsletter Section ──────────────────────────────────── */ .newsletter-section { background: var(--navy); padding: 100px 0; text-align: center; } .newsletter-section h2 { font-family: var(--display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 400; color: var(--white); margin-bottom: 1rem; } .newsletter-section p { font-size: 0.9rem; color: rgba(242, 236, 227, 0.72); max-width: 440px; margin: 0 auto; line-height: 1.9; } .newsletter-form { display: flex; max-width: 500px; margin: 48px auto 0; border: 1px solid rgba(196, 149, 42, 0.3); } .newsletter-form input[type="email"] { flex: 1; background: transparent; border: none; padding: 18px 28px; color: var(--white); font-family: var(--sans); font-size: 0.85rem; outline: none; min-width: 0; } .newsletter-form input[type="email"]::placeholder { color: rgba(242, 236, 227, 0.3); } .newsletter-form button { background: transparent; border: none; border-left: 1px solid rgba(196, 149, 42, 0.3); padding: 18px 32px; color: var(--gold); font-family: var(--sans); font-size: 0.62rem; font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.35s, color 0.35s; } .newsletter-form button:hover { background: var(--gold); color: var(--bg); } .newsletter-form button:disabled { cursor: default; opacity: 0.6; } /* Reply line under the subscribe field. Nothing renders until the form has something to report, so the section's resting layout is unchanged. */ .newsletter-status { margin: 18px auto 0; max-width: 500px; font-size: 0.8rem; line-height: 1.7; color: rgba(242, 236, 227, 0.72); } .newsletter-status.is-error { color: rgba(233, 186, 186, 0.9); } /* ── Insights Grid ───────────────────────────────────────── */ .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; } .insight-card a { display: flex; flex-direction: column; color: inherit; } .insight-card-photo { aspect-ratio: 4/3; margin-bottom: 24px; transition: opacity 0.4s; } .insight-card:hover .insight-card-photo { opacity: 0.85; } .insight-tag { display: block; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .insight-card h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--navy); line-height: 1.35; margin-bottom: 12px; transition: color 0.3s; } .insight-card:hover h3 { color: var(--gold); } .insight-excerpt { font-size: 0.85rem; line-height: 1.85; color: var(--text); margin-bottom: 16px; flex: 1; } .insight-card a { height: 100%; } .insight-card-body { display: flex; flex-direction: column; flex: 1; } .insight-date { font-size: 0.65rem; letter-spacing: 0.15em; color: var(--muted); display: block; } /* Place the date directly under the title so it clearly belongs to this card */ .insight-card-body .insight-tag { order: 1; } .insight-card-body h3 { order: 2; } .insight-card-body .insight-date { order: 3; margin-top: 10px; } .insight-card-body .insight-excerpt { order: 4; margin-top: 14px; } /* ── Articles Toolbar (Learn index) ─────────────────────── */ .articles-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; padding-bottom: 24px; border-bottom: 1px solid var(--gold-rule); } .articles-search { position: relative; display: flex; align-items: center; flex: 1 1 280px; max-width: 420px; } .articles-search svg { position: absolute; left: 2px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; } .articles-search input { width: 100%; border: none; background: transparent; border-bottom: 1px solid var(--gold-rule); padding: 10px 8px 10px 30px; font-family: var(--sans); font-size: 0.9rem; font-weight: 300; color: var(--text); transition: border-color 0.3s; } .articles-search input::placeholder { color: var(--muted); } .articles-search input:focus { outline: none; border-bottom-color: var(--gold); } .articles-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .articles-controls { display: flex; align-items: center; gap: 28px; } .articles-sort { display: flex; align-items: center; gap: 12px; } .articles-sort span { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .articles-sort select { font-family: var(--sans); font-size: 0.85rem; color: var(--navy); background: transparent; border: none; border-bottom: 1px solid var(--gold-rule); padding: 8px 26px 8px 4px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23AB8144' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 11px; transition: border-color 0.3s; } .articles-sort select:focus { outline: none; border-bottom-color: var(--gold); } .articles-view { display: flex; gap: 4px; } .view-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--muted); border: 1px solid transparent; transition: color 0.3s, border-color 0.3s; } .view-btn svg { width: 15px; height: 15px; } .view-btn:hover { color: var(--navy); } .view-btn.is-active { color: var(--gold); border-color: var(--gold-rule); } .articles-empty { text-align: center; color: var(--muted); font-size: 0.95rem; padding: 64px 0; } /* List view */ .insights-grid.is-list { grid-template-columns: 1fr; gap: 0; } .insights-grid.is-list .insight-card { border-top: 1px solid var(--gold-rule); padding: 32px 0; } .insights-grid.is-list .insight-card:last-child { border-bottom: 1px solid var(--gold-rule); } .insights-grid.is-list .insight-card a { flex-direction: row; align-items: center; gap: 36px; } .insights-grid.is-list .insight-card-photo { width: 240px; flex: none; margin-bottom: 0; } .insights-grid.is-list .insight-card-body { justify-content: center; } .insights-grid.is-list .insight-card h3 { font-size: 1.3rem; } .insights-grid.is-list .insight-excerpt { max-width: 640px; } @media (max-width: 640px) { .insights-grid.is-list .insight-card a { flex-direction: column; align-items: stretch; gap: 16px; } .insights-grid.is-list .insight-card-photo { width: 100%; } } .insights-cta { text-align: center; margin-top: 72px; } /* ── Dark navy sections ─────────────────────────────────── */ .bg-navy { background: var(--navy); } .bg-navy .section-header h2, .bg-navy .eyebrow + h2 { color: var(--white); } .bg-navy .service-card-grid { border-top-color: rgba(255,255,255,0.07); border-left-color: rgba(255,255,255,0.07); } .bg-navy .service-card { background: transparent; border-right-color: rgba(255,255,255,0.07); border-bottom-color: rgba(255,255,255,0.07); } .bg-navy .service-card:hover { background: rgba(255,255,255,0.05); } .bg-navy .service-card h3 { color: rgba(255,255,255,0.93); } .bg-navy .service-card p { color: rgba(255,255,255,0.52); } .bg-navy .service-card-arrow { color: var(--gold); } /* ── Quote Image (full-bleed image + overlaid quote) ─────── */ .quote-image { position: relative; height: 62vh; min-height: 400px; overflow: hidden; } .quote-image-photo { position: absolute; inset: 0; width: 100%; height: 150%; top: -25%; object-fit: cover; object-position: center; display: block; } .quote-image-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10,22,40,0.62) 0%, rgba(7,18,32,0.75) 100%); display: flex; align-items: center; z-index: 1; } .quote-image-overlay blockquote { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.8rem); font-weight: 400; font-style: italic; color: rgba(255,255,255,0.92); max-width: 840px; line-height: 1.5; margin: 0; letter-spacing: 0.005em; } /* ── Service Card Grid (Home) ───────────────────────────── */ .service-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(171,129,68,0.18); border-left: 1px solid rgba(171,129,68,0.18); margin-top: 80px; } .service-card { border-right: 1px solid rgba(171,129,68,0.18); border-bottom: 1px solid rgba(171,129,68,0.18); padding: 48px 40px; display: flex; flex-direction: column; text-decoration: none; background: var(--white); transition: background 0.3s ease; color: inherit; } .service-card:hover { background: var(--bg); } .service-card h3 { color: var(--navy); } .service-card p { color: var(--text); } .service-card-num { font-family: var(--serif); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 20px; display: block; } .service-card h3 { font-size: 1.1rem; font-weight: 500; color: var(--navy); margin-bottom: 14px; line-height: 1.25; } .service-card p { font-size: 0.875rem; line-height: 1.8; color: var(--text); flex: 1; } .service-card-arrow { margin-top: 28px; color: var(--gold); font-size: 1rem; transition: transform 0.3s ease; } .service-card:hover .service-card-arrow { transform: translateX(4px); } .service-card-cta { border-right: 1px solid rgba(171,129,68,0.18); border-bottom: 1px solid rgba(171,129,68,0.18); padding: 48px 40px; background: var(--navy); display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: background 0.3s ease; } .service-card-cta:hover { background: #0d1e36; } .service-card-cta h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--white); line-height: 1.3; } .service-card-cta .cta-arrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-top: 40px; transition: gap 0.3s ease; } .service-card-cta:hover .cta-arrow { gap: 16px; } /* ── Pillars ────────────────────────────────────────────── */ .pillar-grid { display: grid; /* columns hold a comfortable 45–70 character measure, then reflow on their own rather than waiting for a breakpoint */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: clamp(40px, 5vw, 72px); row-gap: clamp(48px, 6vw, 72px); margin-top: 72px; } .pillar { border-top: 2px solid var(--gold); padding-top: 28px; max-width: 46ch; } .pillar-num { font-family: var(--serif); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 20px; display: block; } .pillar h3 { font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 500; color: var(--navy); margin-bottom: 14px; line-height: 1.25; letter-spacing: -0.005em; } .pillar p { font-size: 0.95rem; line-height: 1.8; color: var(--text); text-wrap: pretty; } @media (max-width: 640px) { .pillar-grid { margin-top: 48px; row-gap: 44px; } .pillar { max-width: none; padding-top: 24px; } } /* ── Testimonials ───────────────────────────────────────── */ .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 72px; } .testimonial-card { background: var(--white); border: 1px solid rgba(171,129,68,0.15); padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between; } .testimonial-quote { font-family: var(--serif); font-size: 1.05rem; line-height: 1.75; color: var(--navy); font-style: italic; margin-bottom: 32px; } .testimonial-author { font-family: var(--sans); font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ── Credo ──────────────────────────────────────────────── */ .credo-wrap { max-width: 800px; columns: 1; } .credo-wrap p { font-size: 1.0rem; line-height: 2; color: var(--text); margin-bottom: 1.75rem; } .credo-wrap p:last-child { margin-bottom: 0; } .credo-wrap p strong { color: var(--navy); font-weight: 600; } /* ── Our Story ──────────────────────────────────────────── */ .our-story { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; margin-bottom: 100px; padding-bottom: 100px; border-bottom: 1px solid var(--gold-rule); } .our-story-left h2 { line-height: 1.15; } .our-story-right p { font-size: 0.95rem; line-height: 1.9; color: var(--text); margin-bottom: 1.4rem; } .our-story-right p:last-child { margin-bottom: 0; } /* ── Key Area Tags (Services) ───────────────────────────── */ .key-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .key-area-tag { font-family: var(--sans); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); background: rgba(171,129,68,0.07); border: 1px solid rgba(171,129,68,0.2); padding: 6px 14px; } /* ── Books Grid (Learn) ─────────────────────────────────── */ .books-toolbar { display: flex; justify-content: flex-end; margin-top: 28px; } .books-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; } .book-cover { aspect-ratio: 2/3; background: var(--navy); overflow: hidden; position: relative; } .book-cover a { display: block; width: 100%; height: 100%; } .book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .book-cover:hover img { transform: scale(1.04); } /* ── Learn Category Sections ────────────────────────────── */ .learn-category { margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid rgba(171,129,68,0.1); } .learn-category:last-child { border-bottom: none; } .learn-category-header { display: flex; align-items: baseline; gap: 24px; margin-bottom: 40px; } .learn-category-header h2 { font-size: 1.6rem; font-weight: 400; color: var(--navy); } /* ── Miscellaneous ───────────────────────────────────────── */ .text-gold { color: var(--gold); } .text-center { text-align: center; } /* ── Responsive ─────────────────────────────────────────── */ /* .nav-collapse-added — collapse nav to hamburger before desktop items overlap */ @media (max-width: 980px) { /* The panel is position:fixed, but `backdrop-filter` on .nav.scrolled turns .nav into the containing block for fixed descendants — which clipped the panel to the 72px nav bar and let the Services dropdown items spill out over the hero. `.menu-open` drops the filter while the panel is open so inset:0 resolves against the viewport again. */ .nav.menu-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .nav.menu-open .nav-logo { position: relative; z-index: 1100; } .nav-links { position: fixed; inset: 0; background: #07080E; /* fully opaque — page text must not read through */ flex-direction: column; justify-content: center; align-items: center; gap: 32px; transform: translateX(100%); /* tall menus (Services + its sub-links) scroll inside the panel rather than overflowing it */ padding: calc(var(--nav-h) + 28px) 24px 48px; overflow-y: auto; overscroll-behavior: contain; transition: transform 0.4s ease; z-index: 999; } .nav-links.open { transform: translateX(0); } .nav-links > li { flex: 0 0 auto; text-align: center; } .nav-links a { font-size: 1rem; letter-spacing: 0.16em; } .nav-toggle { display: flex; } } @media (max-width: 1280px) { :root { --gap: 112px; } .container { padding: 0 40px; } .team-grid { grid-template-columns: repeat(3, 1fr); } .insights-grid { grid-template-columns: repeat(2, 1fr); } .books-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1024px) { :root { --gap: 100px; } .distinction { grid-template-columns: 1fr; gap: 56px; } .three-col { grid-template-columns: 1fr 1fr; gap: 52px; } .trust-item { grid-template-columns: 1fr; gap: 16px; } .two-col-text { grid-template-columns: 1fr; gap: 64px; } .footer-top { grid-template-columns: 1fr 1fr; } .footer-top > .footer-brand { grid-column: 1 / -1; } .contact-cards { grid-template-columns: 1fr; max-width: 100%; } .explainer-grid { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: 1fr; } .service-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 32px; } .contact-wrap { grid-template-columns: 1fr; gap: 72px; } .policy-wrap { grid-template-columns: 1fr; gap: 64px; } .policy-aside { position: static; } .photo-split { grid-template-columns: 1fr; } .photo-split-photo { min-height: 420px; } .photo-split-photo--mosaic { min-height: 0; } .photo-split-text { padding: 80px 52px; } /* .pillar-grid reflows on its own via auto-fit — no breakpoint needed */ .testimonial-grid { grid-template-columns: 1fr; gap: 28px; } .our-story { grid-template-columns: 1fr; gap: 48px; } .service-card-grid { grid-template-columns: repeat(2, 1fr); } .books-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { :root { --nav-h: 60px; --gap: 80px; } .container { padding: 0 24px; } /* mobile nav panel is defined once, in the 980px block above */ .hero-headline { font-size: clamp(2.2rem, 11vw, 4rem); line-height: 1.1; } .hero-cta { flex-direction: column; align-items: center; } .hero-page { padding: 140px 0 80px; } .newsletter-form { flex-direction: column; } .newsletter-form input[type="email"] { border-bottom: 1px solid rgba(196,149,42,0.2); } .newsletter-form button { border-left: none; border-top: 1px solid rgba(196,149,42,0.2); } .insights-grid { grid-template-columns: 1fr; gap: 56px; } .service-tiles { grid-template-columns: 1fr; gap: 40px; } .nav-logo img { height: 20px; } .lux-row { grid-template-columns: 1fr; gap: 0; } .three-col { grid-template-columns: 1fr; gap: 52px; } .team-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .footer-top { grid-template-columns: 1fr; gap: 36px; } .filter-bar { overflow-x: auto; flex-wrap: nowrap; } .photo-split { grid-template-columns: 1fr; } .photo-split-photo { min-height: 360px; } .photo-split-photo--mosaic { min-height: 0; } .photo-split-text { padding: 64px 24px; } .photo--band { height: 42vh; } .service-card-grid { grid-template-columns: 1fr; } .testimonial-grid { grid-template-columns: 1fr; } .books-grid { grid-template-columns: repeat(2, 1fr); } .our-story { margin-bottom: 64px; padding-bottom: 64px; } .quote-image { height: 50vh; min-height: 340px; } .footer-contact-row { flex-direction: column; align-items: flex-start; gap: 6px; } .footer-dot { display: none; } } @media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; } .hero-headline { font-size: clamp(3rem, 14vw, 4rem); line-height: 0.88; } .hero-sub { margin-top: 36px; } } /* ── Service landing pages: article-style body ── */ .service-article { max-width: 760px; margin: 0 auto; padding: 104px 0; } .service-article > p:first-child { font-size: 1.2rem; line-height: 1.9; } .service-article h2 { font-family: var(--display); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -0.01em; color: var(--navy); margin: 1.9em 0 0.5em; } .service-article > h2:first-child { margin-top: 0; } .service-article h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 500; color: var(--navy); margin: 1.7em 0 0.35em; } .service-article p { font-size: 1.05rem; line-height: 1.95; color: var(--text); margin-bottom: 1.25em; } .service-article strong { color: var(--navy); } @media (max-width: 768px) { .service-article { padding: 72px 0; } } .credo-photo { margin-top: 44px; width: 100%; aspect-ratio: 2/3; border-radius: 2px; } /* ── Services nav dropdown ─────────────────────────────────── */ .nav-item-dropdown { position: relative; } .nav-item-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px; } /* Anchored to the left edge of "Services" so it drops straight down from the word. Centring it hung a 335px panel off a 76px label — 130px of it reaching back under "Team", which read as the menu sliding out sideways rather than opening beneath its trigger. */ .nav-dropdown { list-style: none; position: absolute; top: 100%; left: 0; transform: translateY(8px); margin-top: 21px; min-width: 232px; background: rgba(9, 19, 35, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-top: none; border-radius: 0; padding: 10px 0; box-shadow: 0 24px 52px rgba(0,0,0,0.28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.16,1,0.3,1), visibility 0.34s; z-index: 1200; } .nav-item-dropdown:hover .nav-dropdown, .nav-item-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-dropdown li { margin: 0; } .nav-dropdown a { display: block; padding: 11px 26px; font-family: var(--sans); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72) !important; white-space: nowrap; transition: color 0.25s ease, background 0.25s ease; } .nav-dropdown a::after { display: none; } .nav-dropdown a:hover { color: #fff !important; background: rgba(255,255,255,0.06); } #tax-planning, #business-planning, #trust-administration, #informal-probate { scroll-margin-top: 110px; } @media (max-width: 980px) { .nav-item-dropdown::after { display: none; } .nav-dropdown { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; margin-top: 14px; min-width: 0; padding: 0; background: transparent; border: none; box-shadow: none; } /* Collapsed until "Services" is tapped, mirroring the desktop behaviour where the submenu only appears on hover. JS adds .submenu-open on the first tap and lets a second tap follow the link through to the Services page. */ .nav-item-dropdown > .nav-dropdown { display: none; } .nav-item-dropdown.submenu-open > .nav-dropdown { display: block; } /* The desktop dropdown sets white-space: nowrap so its items sit on one line under the bar. In the mobile panel that made "Probate and Trust Administration" wider than the screen, and a centred item that cannot wrap spills off both edges — which is why the submenu appeared to run sideways out of the panel. */ .nav-dropdown a { padding: 8px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: none; color: rgba(255,255,255,0.55) !important; white-space: normal; max-width: 100%; text-align: center; line-height: 1.5; } .nav-dropdown li { max-width: 100%; } .nav-dropdown a:hover { background: transparent; } }