/* ═══════════════════════════════════════════════════ DEEPCHAIN PLLC — Design System · Production Build Institutional Minimalism · Serif Authority Navy + Gold · MRPC Compliant · WCAG 2.1 AA selectcounsel.com ═══════════════════════════════════════════════════ */ /* ── 1 Design Tokens ─────────────────────────────── */ :root{ --bg:#0a1f2e; --bg-elevated:#0e2837; --bg-deep:#071825; --fg:#f2f5f7; --fg-secondary:#c5d2dc; --fg-tertiary:#93a6b4; --fg-faint:#6d8494; --navy:#8fc0dd; --accent:#a9d3ea; --accent-light:rgba(143,192,221,.07); --gold:#d4ab74; --gold-glow:rgba(212,171,116,.10); --amber:#e0b478; --amber-light:rgba(212,171,116,.14); --amber-border:rgba(212,171,116,.42); --hl:rgba(255,255,255,.085); --hl-strong:rgba(255,255,255,.17); --sh-sm:0 1px 3px rgba(0,0,0,.30),0 2px 8px rgba(0,0,0,.22); --sh-md:0 4px 16px rgba(0,0,0,.38),0 1px 4px rgba(0,0,0,.26); --sh-lg:0 16px 48px rgba(0,0,0,.50),0 4px 12px rgba(0,0,0,.30); --sh-xl:0 32px 80px rgba(0,0,0,.62),0 8px 24px rgba(0,0,0,.38); --serif:'Playfair Display',Georgia,serif; --serif-body:'Cormorant Garamond',Georgia,serif; --sans:'Albert Sans',system-ui,sans-serif; --body:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace; --page-max:1140px; --section-v:clamp(80px,10vw,140px); --section-h:clamp(24px,5vw,72px); --form-focus:0 0 0 3px rgba(212,171,116,.16),0 0 0 1px var(--gold); --success:#5ec99a; --success-bg:rgba(94,201,154,.10); --success-bdr:rgba(94,201,154,.26); --error:#f08a8a; --hero-blue:#8fc0dd; --on-gold:#0a1f2e; --spring:cubic-bezier(.22,1,.36,1); /* Entrance vocabulary: seal resolves, rules draw, type settles */ --ease-seal:cubic-bezier(.16,.84,.28,1); --ease-draw:cubic-bezier(.62,.02,.24,1); --ease-rise:cubic-bezier(.20,.90,.30,1); /* Entrance rhythm — two phases. Phase A (seal): one object, internal overlap is intentional. Phase B (type): strict 130ms cadence, each element on the shared vertical axis lands before the next begins. */ --sealA:0ms; --sealB:240ms; --sealC:440ms; --typeA:800ms; --typeB:1080ms; --typeC:1210ms; --typeD:1340ms; --typeE:1470ms; --typeF:1600ms; --ease-expo:cubic-bezier(.16,1,.3,1)} /* ── 2 Reset & Base ──────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.68;transition:background .32s ease,color .32s ease;overflow-x:hidden} a{color:inherit;text-decoration:none} img,svg{max-width:100%;display:block} ::selection{background:var(--gold);color:var(--on-gold)} /* Composited ground wash — replaces background-attachment:fixed */ body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0c2434 0%,var(--bg) 38%,var(--bg) 100%)} @supports(scrollbar-width:thin){html{scrollbar-width:thin;scrollbar-color:var(--hl-strong) transparent}} h1,h2,h3,h4{text-wrap:balance;font-variant-ligatures:common-ligatures;font-feature-settings:"liga" 1,"kern" 1,"calt" 1} p{text-wrap:pretty} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} section[id],[id]{scroll-margin-top:72px} :focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:1px} /* ── 3 Accessibility ─────────────────────────────── */ .skip-link{position:absolute;top:-100%;left:16px;background:var(--gold);color:var(--on-gold);padding:10px 18px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;z-index:600;transition:top .2s} .skip-link:focus{top:0} /* ── 4 Scroll Progress ───────────────────────────── */ .scroll-progress{position:fixed;top:0;left:0;z-index:600;height:1.5px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--navy),var(--gold));pointer-events:none;will-change:transform;opacity:0;transition:opacity .25s} .scroll-progress.active{opacity:1} /* ── 5 Theme Toggle ──────────────────────────────── */ /* ── 6 Sticky Navigation ─────────────────────────── */ .site-nav{position:fixed;top:0;left:0;right:0;z-index:400;padding:0 var(--section-h);background:rgba(10,31,46,.88);border-bottom:1px solid var(--hl);transform:translateY(-100%);opacity:0;transition:transform .38s var(--spring),opacity .32s ease;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .site-nav.visible{transform:translateY(0);opacity:1;box-shadow:0 1px 0 rgba(212,171,116,.14),0 6px 24px rgba(0,0,0,.34);border-image:linear-gradient(90deg,transparent 5%,var(--navy) 20%,rgba(212,171,116,0.438) 55%,var(--navy) 80%,transparent 95%) 1;border-image-slice:0 0 1 0} .site-nav.visible~ .site-nav-inner{max-width:var(--page-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px} .nav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;transition:opacity .25s} .nav-brand:hover{opacity:.88} .nav-dc{font-family:var(--serif);font-weight:900;font-size:16px;color:var(--fg);letter-spacing:-.02em;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--hl-strong);flex-shrink:0;line-height:1;transition:border-color .2s,box-shadow .2s} .nav-brand:hover .nav-dc{border-color:rgba(212,171,116,0.562);box-shadow:0 0 0 1px rgba(212,171,116,0.125)} .nav-firm{font-family:var(--sans);font-weight:600;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--fg-tertiary)} .nav-link{font-family:var(--sans);font-weight:500;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--fg-tertiary);transition:color .22s;padding:4px 0;position:relative} .nav-link::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1.5px;background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:1px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--spring)} .nav-link:hover{color:var(--fg)} .nav-link:hover::after,.nav-link--active::after{transform:scaleX(1)} .nav-link--active{color:var(--fg)} .nav-cta{font-family:var(--sans);font-weight:700;font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--on-gold);background:var(--gold);padding:10px 20px;border:none;cursor:pointer;transition:background .22s,box-shadow .22s,transform .18s;box-shadow:0 2px 10px rgba(0,0,0,.35);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;position:relative;overflow:hidden} .nav-cta::before{content:'';position:absolute;top:0;left:0;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-200%) skewX(-18deg);transition:transform .6s ease;pointer-events:none} .nav-cta:hover::before{transform:translateX(292%) skewX(-18deg)} .nav-cta:hover{background:#e2bd8b;box-shadow:0 4px 14px rgba(0,0,0,.42);transform:translateY(-1px)} .nav-cta:active{transform:translateY(1px)!important;box-shadow:0 1px 4px rgba(0,0,0,.30)!important;transition-duration:.08s} .nav-cta svg{width:12px;height:12px;flex-shrink:0;transition:transform .2s} .nav-cta:hover svg{transform:translateX(2px)} /* ── 7 Reveal Animations ─────────────────────────── */ .reveal{opacity:0;transform:translateY(12px);will-change:transform,opacity;transition:opacity .8s var(--spring),transform .8s var(--spring)} .reveal.visible{opacity:1;transform:translateY(0);will-change:auto} .reveal-d1{transition-delay:.10s}.reveal-d2{transition-delay:.20s} .reveal-d3{transition-delay:.30s} /* Section label gold bar animation on reveal */ .reveal.visible .section-label::before{animation:goldBarReveal .7s .18s var(--spring) both} @keyframes goldBarReveal{from{width:0;opacity:0}to{width:24px;opacity:.65}} /* ── 8 Hero ──────────────────────────────────────── */ .hero{min-height:92vh;min-height:92dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--section-h);position:relative;overflow:hidden} .hero::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 58% 46% at 50% 44%,rgba(143,192,221,.10) 0%,rgba(212,171,116,.045) 38%,transparent 74%);pointer-events:none} .hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:76px 76px;opacity:.5;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 20%,black 80%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 20%,black 80%)} .hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0;perspective:900px;perspective-origin:50% 42%} .hero-inner .monogram{margin-bottom:clamp(18px,2.4vw,28px)} .hero-inner .hero-meta{margin-bottom:clamp(14px,1.8vw,20px)} .hero-inner .hero-tagline{margin-bottom:clamp(16px,2vw,24px)} .hero-meta{display:flex;flex-direction:column;align-items:center;gap:0} .hero-firm-lines{display:flex;align-items:center;gap:18px} .hero-firm-line{width:clamp(28px,4.4vw,52px);height:1px;background:linear-gradient(90deg,transparent,var(--hl-strong));transform:translateY(.5px)} .hero-firm{font-family:var(--serif);font-weight:800;font-size:clamp(16px,2.4vw,25px);letter-spacing:.24em;text-transform:uppercase;color:var(--fg);line-height:1} .hero-pllc{font-weight:400;font-size:.68em;letter-spacing:.32em;color:var(--fg-faint);margin-left:.2em} .hero-tagline{font-family:var(--serif-body);font-weight:400;font-size:clamp(15px,1.8vw,20px);font-style:italic;letter-spacing:.08em;color:var(--fg-tertiary);text-align:center;line-height:1.5;position:relative;padding:0 16px} .hero-tagline::after{content:'';display:block;width:clamp(48px,7vw,72px);height:1px;margin:clamp(12px,1.6vw,18px) auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.40} .hero-location{font-family:var(--mono);font-size:clamp(8.5px,1vw,10px);letter-spacing:.20em;text-transform:uppercase;color:var(--fg-faint);display:flex;align-items:center;gap:10px} .hero-location::before,.hero-location::after{content:'';display:block;width:clamp(16px,2.5vw,28px);height:1px;background:linear-gradient(90deg,transparent,var(--hl-strong))} .hero-location::after{transform:scaleX(-1)} .hero-scroll{position:absolute;bottom:clamp(22px,3.5vh,36px);left:50%;transform:translateX(-50%);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:opacity .25s} .hero-scroll:hover{opacity:.5} .hero-scroll__chevron{color:var(--fg-faint);width:14px;height:14px;animation:chevronBob 2.6s var(--spring) infinite} .hero-scroll__line{width:1px;height:28px;background:linear-gradient(to bottom,var(--fg-faint),transparent);animation:linePulse 2.4s ease-in-out infinite} @keyframes chevronBob{0%,100%{transform:translateY(0);opacity:.28}50%{transform:translateY(3px);opacity:.50}} @keyframes linePulse{0%,100%{opacity:.2;transform:scaleY(1)}50%{opacity:.65;transform:scaleY(1.12)}} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} /* ── 9 Monogram ──────────────────────────────────── */ .monogram{width:clamp(72px,14vw,108px);aspect-ratio:1;display:grid;place-items:center;border:none;background:linear-gradient(var(--grid) .5px,transparent .5px),linear-gradient(90deg,var(--grid) .5px,transparent .5px),radial-gradient(ellipse 32% 25% at 18% 14%,var(--fill-warm) 0%,transparent 55%),radial-gradient(ellipse 62% 52% at 36% 28%,var(--fill-hot) 0%,transparent 62%),radial-gradient(ellipse 40% 35% at 70% 72%,var(--fill-cool) 0%,transparent 50%),linear-gradient(155deg,var(--fill-a) 0%,var(--fill-b) 28%,var(--fill-c) 58%,var(--fill-d) 100%);background-size:25% 25%,25% 25%,100% 100%,100% 100%,100% 100%,100% 100%;box-shadow:0 0 0 1px var(--bezel),0 0 0 2px var(--bezel-edge),0 1px 2px var(--sh1),0 2px 4px var(--sh2),0 4px 10px var(--sh3),0 8px 20px var(--sh4),inset 0 0 0 1px var(--mat0-fill),inset 0 0 0 2px var(--mat0-bdr),inset 0 0 0 3px var(--mat1-fill),inset 0 0 0 4px var(--mat1-bdr),inset 0 1px 0 4px var(--mat1-hi),inset 0 0 0 6px var(--mat2-fill),inset 0 0 0 7px var(--mat2-bdr),inset 0 0 0 9px var(--mat3-fill),inset 0 0 0 10px var(--mat3-bdr),inset 0 2px 4px var(--in-sh-t),inset 0 -1px 3px var(--in-sh-b),inset 2px 0 3px var(--in-sh-l),inset -1px 0 2px var(--in-sh-r),inset 0 1px 0 var(--hi-t),inset 1px 0 0 var(--hi-l),inset 0 -1px 0 var(--lo-b),inset -1px 0 0 var(--lo-r);position:relative;border-radius:1px;transition:box-shadow .6s ease;cursor:default;--grid:rgba(255,255,255,.014);--cross:rgba(212,171,116,.22);--tick:rgba(212,171,116,.20);--cx:52.5%;--cy:49%;--fill-a:#123044;--fill-b:#0f2a3c;--fill-c:#0c2434;--fill-d:#091d2b;--fill-hot:rgba(255,255,255,.055);--fill-cool:rgba(0,0,0,.16);--fill-warm:rgba(212,171,116,.045);--bezel:rgba(20,48,66,.92);--bezel-edge:rgba(212,171,116,.20);--bezel2:rgba(255,255,255,.04);--sh1:rgba(0,0,0,.30);--sh2:rgba(0,0,0,.28);--sh3:rgba(0,0,0,.34);--sh4:rgba(0,0,0,.40);--sh5:rgba(0,0,0,.46);--mat0-fill:rgba(18,48,68,.99);--mat0-bdr:rgba(255,255,255,.05);--mat1-fill:rgba(15,42,60,.97);--mat1-bdr:rgba(255,255,255,.07);--mat1-hi:rgba(255,255,255,.05);--mat2-fill:rgba(12,36,52,.95);--mat2-bdr:rgba(255,255,255,.055);--mat3-fill:rgba(9,29,43,.92);--mat3-bdr:rgba(255,255,255,.045);--in-sh-t:rgba(0,0,0,.40);--in-sh-b:rgba(0,0,0,.20);--in-sh-l:rgba(0,0,0,.20);--in-sh-r:rgba(0,0,0,.12);--hi-t:rgba(255,255,255,.07);--hi-l:rgba(255,255,255,.035);--lo-b:rgba(0,0,0,.50);--lo-r:rgba(0,0,0,.30);--vig-core:rgba(12,36,52,.86);--vig-mid:rgba(12,36,52,.50)} .monogram:hover{box-shadow:0 0 0 1px var(--bezel),0 0 0 2px var(--bezel-edge),0 1px 2px var(--sh1),0 2px 4px var(--sh2),0 4px 10px var(--sh3),0 8px 20px var(--sh4),0 0 40px var(--gold-glow),inset 0 0 0 1px var(--mat0-fill),inset 0 0 0 2px var(--mat0-bdr),inset 0 0 0 3px var(--mat1-fill),inset 0 0 0 4px var(--mat1-bdr),inset 0 1px 0 4px var(--mat1-hi),inset 0 0 0 6px var(--mat2-fill),inset 0 0 0 7px var(--mat2-bdr),inset 0 0 0 9px var(--mat3-fill),inset 0 0 0 10px var(--mat3-bdr),inset 0 2px 4px var(--in-sh-t),inset 0 -1px 3px var(--in-sh-b),inset 2px 0 3px var(--in-sh-l),inset -1px 0 2px var(--in-sh-r),inset 0 1px 0 var(--hi-t),inset 1px 0 0 var(--hi-l),inset 0 -1px 0 var(--lo-b),inset -1px 0 0 var(--lo-r)} .monogram-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 50% 38% at var(--cx) var(--cy),var(--vig-core) 0%,var(--vig-core) 22%,transparent 100%),radial-gradient(ellipse 76% 60% at var(--cx) var(--cy),var(--vig-mid) 0%,transparent 100%)} .monogram::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(132deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.032) 24%,transparent 44%,transparent 60%,rgba(0,0,0,.14) 80%,rgba(0,0,0,.22) 100%)} .monogram::after{content:'';position:absolute;left:0;right:0;top:var(--cy);height:1px;background:linear-gradient(90deg,transparent 3%,var(--cross) 12%,var(--cross) 88%,transparent 97%);pointer-events:none;z-index:2} .monogram-vline{position:absolute;top:0;bottom:0;left:var(--cx);width:1px;background:linear-gradient(180deg,transparent 2%,var(--cross) 11%,var(--cross) 89%,transparent 98%);pointer-events:none;z-index:2} .monogram-ticks{position:absolute;top:var(--cy);left:var(--cx);width:0;height:0;z-index:3;pointer-events:none} .monogram-ticks::before,.monogram-ticks::after{content:'';position:absolute;background:var(--tick)} .monogram-ticks::before{width:8px;height:1px;top:0;left:-4px} .monogram-ticks::after{width:1px;height:8px;top:-4px;left:0} .monogram-corners{position:absolute;inset:8px;pointer-events:none;z-index:3} .monogram-corners span{position:absolute} .monogram-corners span::before,.monogram-corners span::after{content:'';position:absolute;background:rgba(150,132,104,.20)} .monogram-corners span::before{width:clamp(6px,13%,12px);height:1px} .monogram-corners span::after{width:1px;height:clamp(6px,13%,12px)} .corner-tl{top:0;left:0}.corner-tl::before{top:0;left:0}.corner-tl::after{top:0;left:0} .corner-tr{top:0;right:0}.corner-tr::before{top:0;right:0}.corner-tr::after{top:0;right:0} .corner-bl{bottom:0;left:0}.corner-bl::before{bottom:0;left:0}.corner-bl::after{bottom:0;left:0} .corner-br{bottom:0;right:0}.corner-br::before{bottom:0;right:0}.corner-br::after{bottom:0;right:0} .monogram-glyph{display:inline-flex;align-items:baseline;font-family:var(--serif);letter-spacing:-.02em;line-height:1;transform:translateY(2%);position:relative;z-index:4;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased} .monogram-d,.monogram-c{font-size:clamp(28px,5.5vw,52px);background:linear-gradient(158deg,#ffffff 0%,#cfe2ee 26%,#f0f4f7 52%,#dce8f0 78%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;paint-order:stroke fill;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));line-height:1} .monogram-d{font-weight:900}.monogram-c{font-weight:800;margin-left:-.13em} .monogram--animating::before,.monogram--animating::after{opacity:0!important;transition:none!important} /* ── 10 Sections ─────────────────────────────────── */ .section{padding:var(--section-v) var(--section-h);max-width:var(--page-max);margin:0 auto} .section-label{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:4.5px;text-transform:uppercase;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:10px} .section-label::before{content:'';display:block;width:28px;height:1.5px;background:linear-gradient(90deg,var(--gold),rgba(212,171,116,0.375),transparent);opacity:.75;flex-shrink:0} .section-heading{font-family:var(--serif);text-wrap:balance;font-feature-settings:"liga" 1,"kern" 1,"onum" 0;font-weight:700;font-size:clamp(28px,3.8vw,44px);letter-spacing:.01em;line-height:1.15;color:var(--fg);margin-bottom:20px;text-wrap:balance} .section-rule{width:48px;height:1.5px;background:linear-gradient(90deg,var(--navy) 0%,rgba(212,171,116,0.688) 60%,transparent 100%);margin-bottom:40px;border-radius:1px} /* ── 11 Identity ─────────────────────────────────── */ .identity{border-top:1px solid var(--hl)} .identity-grid{display:grid;grid-template-columns:9fr 11fr;gap:clamp(44px,6.5vw,88px);align-items:start} .identity-statement{font-family:var(--serif-body);font-weight:400;font-size:clamp(20px,2.6vw,29px);line-height:1.52;color:var(--fg);letter-spacing:.01em;position:relative;padding:22px;text-wrap:balance;background:linear-gradient(135deg,var(--gold-glow) 0%,transparent 50%);border-radius:1px} .identity-statement::before{content:'';position:absolute;top:4px;left:0;bottom:4px;width:2px;border-radius:1px;background:linear-gradient(180deg,var(--navy) 0%,rgba(212,171,116,0.562) 60%,transparent 100%)} .identity-body{font-family:var(--body);font-size:15px;line-height:1.85;max-width:62ch;color:var(--fg-secondary);text-wrap:pretty} .identity-body p+p{margin-top:22px} @media(max-width:768px){.identity-grid{grid-template-columns:1fr;gap:32px}.identity-statement{padding-left:18px}} /* ── 12 Practices ────────────────────────────────── */ .practices{background:var(--bg-elevated);background-image:linear-gradient(180deg,rgba(255,255,255,.022) 0%,transparent 40%);border-top:1px solid var(--hl);border-bottom:1px solid var(--hl);position:relative} .practices::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:linear-gradient(90deg,transparent 0%,var(--navy) 15%,rgba(212,171,116,0.438) 55%,var(--navy) 80%,transparent 100%);opacity:.38} .practices::after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.015'/%3E%3C/svg%3E");opacity:.35;z-index:0} .practices-inner{max-width:var(--page-max);margin:0 auto;padding:var(--section-v) var(--section-h);position:relative;z-index:1} .practices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(212,171,116,.10);margin-top:32px} .practice-card{background:var(--bg);background-image:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 100%);padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;gap:14px;transition:box-shadow .42s ease,transform .42s ease,opacity .36s ease,background .36s ease;position:relative;overflow:hidden} .practice-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--navy) 0%,var(--gold) 50%,rgba(212,171,116,0.15) 100%);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--spring)} .practice-card:hover::before{transform:scaleY(1)} .practice-card:hover{background-image:linear-gradient(180deg,rgba(255,255,255,.030) 0%,rgba(255,255,255,.008) 100%);box-shadow:var(--sh-md),0 0 28px var(--gold-glow);transform:translateY(-2px)} .practice-card:active{transform:translateY(0);transition-duration:.1s} .practices-grid:has(.practice-card:hover) .practice-card:not(:hover){opacity:.65;transform:translateY(0)!important;box-shadow:none!important} .practice-card__num{font-family:var(--mono);font-size:10px;color:var(--fg-faint);letter-spacing:.16em;font-variant-numeric:tabular-nums lining-nums;font-variant-numeric:tabular-nums;transition:color .3s;display:flex;align-items:center;gap:10px} .practice-card__num::after{content:'';flex:0 0 32px;height:1px;background:linear-gradient(90deg,var(--hl-strong),transparent);transition:flex-basis .3s,opacity .3s;opacity:.7} .practice-card:hover .practice-card__num{color:var(--gold)} .practice-card:hover .practice-card__num::after{flex-basis:48px;opacity:1} .practice-card__title{font-family:var(--serif);text-wrap:balance;font-weight:700;font-size:clamp(20px,2.3vw,25px);color:var(--fg);line-height:1.18} .practice-card__desc{font-family:var(--body);font-size:14px;line-height:1.76;color:var(--fg-tertiary);flex:1;text-wrap:pretty} .practice-card__rule{width:44px;height:1.5px;background:var(--navy);margin-top:auto;border-radius:1px;opacity:.55;transform-origin:left center;transform:scaleX(calc(20/44));transition:transform .4s var(--spring),background .35s ease,opacity .35s ease} .practice-card:hover .practice-card__rule{transform:scaleX(1);background:var(--gold);opacity:1} @media(max-width:768px){.practices-grid{grid-template-columns:1fr}.practice-card{min-height:180px}} /* ── 13 Approach ─────────────────────────────────── */ .approach-grid{display:grid;grid-template-columns:1fr;max-width:820px} .approach-bio{font-family:var(--body);font-size:15px;line-height:1.84;max-width:64ch;color:var(--fg-secondary);text-wrap:pretty} .approach-bio p+p{margin-top:22px} .approach-bio p:first-child{color:var(--fg);font-size:15.5px;line-height:1.82;font-weight:400} /* ── 14 Contact & Engage Panel ───────────────────── */ .contact{background:var(--bg-elevated);background-image:linear-gradient(180deg,rgba(255,255,255,.022) 0%,transparent 40%);border-top:1px solid var(--hl)} .contact-inner{max-width:var(--page-max);margin:0 auto;padding:var(--section-v) var(--section-h)} .section-rule--contact{margin-bottom:28px} .engage-panel{display:grid;grid-template-columns:5fr 7fr;max-width:860px;margin:0 auto;border:none;overflow:hidden;box-shadow:0 0 0 1px var(--hl-strong),var(--sh-lg),0 0 56px rgba(212,171,116,.055);transition:box-shadow .5s var(--spring)} .engage-panel:hover{box-shadow:0 0 0 1px var(--hl-strong),var(--sh-xl),0 0 72px rgba(212,171,116,.085)} /* Left panel — attorney profile */ .ep{background:linear-gradient(175deg,#061520 0%,#04111a 45%,#030d15 100%);padding:clamp(36px,4.5vw,52px) clamp(28px,3.5vw,44px);display:flex;flex-direction:column;position:relative} .ep::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold) 0%,rgba(212,171,116,0.312) 55%,transparent 100%)} .ep::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 40% at 20% 10%,rgba(212,171,116,0.037) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 80% 90%,rgba(0,0,0,.38) 0%,transparent 50%)} .ep-badge{font-family:var(--mono);font-size:8px;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-bottom:16px;position:relative;z-index:1} .ep-name{font-family:var(--serif);font-size:clamp(16px,1.8vw,19px);font-weight:700;color:rgba(255,255,255,.92);letter-spacing:.01em;margin-bottom:3px;position:relative;z-index:1} .ep-title{font-family:var(--sans);font-size:8.5px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.32);margin-bottom:5px;position:relative;z-index:1} .ep-bar{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.22);line-height:1.6;margin-bottom:22px;position:relative;z-index:1} .ep-rule{width:32px;height:1.5px;background:linear-gradient(90deg,var(--gold) 0%,rgba(212,171,116,0.25) 100%);margin-bottom:22px;flex-shrink:0;border-radius:1px;position:relative;z-index:1} .ep-contacts{display:flex;flex-direction:column;gap:9px;flex:1;position:relative;z-index:1} .ep-contact{display:flex;align-items:center;gap:11px;font-family:var(--body);font-size:13px;color:rgba(255,255,255,.66);text-decoration:none;transition:color .22s,transform .22s;line-height:1.2} a.ep-contact:hover{color:rgba(255,255,255,.90);transform:translateX(3px)} a.ep-contact:hover .ep-contact-icon{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(255,255,255,.6)} .ep-contact--static{color:rgba(255,255,255,.42)} .ep-contact-icon{width:28px;height:28px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);display:grid;place-items:center;flex-shrink:0;color:rgba(255,255,255,.36);transition:border-color .2s,background .2s,color .2s} .ep-contact-icon svg{width:13px;height:13px} .ep-footer{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.07);font-family:var(--body);font-size:10px;color:rgba(255,255,255,.18);line-height:1.58;position:relative;z-index:1} /* Right panel — CTA */ .ecc{background:linear-gradient(175deg,var(--bg-elevated) 0%,var(--bg) 100%);padding:clamp(36px,4.5vw,52px) clamp(28px,3.5vw,44px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative} .ecc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--navy) 0%,var(--accent) 50%,transparent 100%)} .ecc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;pointer-events:none;background:linear-gradient(to top,var(--gold-glow),transparent);opacity:.5} .ecc-eyebrow{font-family:var(--sans);font-size:8.5px;font-weight:700;letter-spacing:.30em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:13px;display:flex;align-items:center;gap:9px;position:relative;z-index:1} .ecc-eyebrow::before{content:'';display:block;width:28px;height:1.5px;background:linear-gradient(90deg,var(--gold),rgba(212,171,116,0.375),transparent);opacity:.75;flex-shrink:0} .ecc-heading{font-family:var(--serif);font-size:clamp(24px,2.8vw,32px);font-weight:700;color:var(--fg);letter-spacing:.01em;line-height:1.15;margin-bottom:12px;text-wrap:balance;position:relative;z-index:1} .ecc-desc{font-family:var(--serif-body);font-style:italic;font-size:16.5px;color:var(--fg-tertiary);line-height:1.62;margin-bottom:28px;text-wrap:pretty;position:relative;z-index:1} .ecc-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 32px;background:var(--gold);color:var(--on-gold);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:none;cursor:pointer;position:relative;overflow:hidden;transition:background .25s,box-shadow .25s,transform .2s;box-shadow:0 2px 14px rgba(0,0,0,.38);margin-bottom:22px;width:auto;align-self:flex-start;z-index:1} .ecc-btn::after{content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-200%) skewX(-18deg);transition:transform .52s ease;pointer-events:none} .ecc-btn:hover::after{transform:translateX(270%) skewX(-18deg)} .ecc-btn:hover{background:#e2bd8b;box-shadow:0 5px 24px rgba(0,0,0,.46);transform:translateY(-1px)} .ecc-btn:active{transform:translateY(1px)!important;box-shadow:0 1px 6px rgba(0,0,0,.30)!important;transition-duration:.08s} .ecc-btn svg{width:14px;height:14px;flex-shrink:0;transition:transform .2s} .ecc-btn:hover svg{transform:translateX(3px)} .ecc-trust{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1} .ecc-trust-item{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9.5px;color:var(--fg-faint);letter-spacing:.04em} .ecc-trust-item svg{width:11px;height:11px;opacity:.62;color:var(--gold)} .ecc-trust-sep{width:3px;height:3px;border-radius:50%;background:var(--hl-strong);flex-shrink:0} @media(max-width:700px){.engage-panel{grid-template-columns:1fr}.ep{padding:32px 28px}.ecc{padding:32px 28px}.ecc-btn{width:100%;justify-content:center;align-self:auto}} /* ── 15 Footer ───────────────────────────────────── */ a.footer-brand{display:flex;align-items:center;gap:14px;text-decoration:none;transition:opacity .22s} a.footer-brand:hover{opacity:.82} a.footer-brand:hover a.footer-url{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:1.5px;color:var(--navy);border-bottom:1px solid transparent;text-decoration:none;transition:border-color .2s,color .2s} a.footer-url:hover{border-bottom-color:var(--navy)} /* Footer legal links row */ /* Success state meta line */ .success-meta{margin-top:6px;display:block;font-family:var(--mono);font-size:9px;letter-spacing:.05em;color:var(--fg-faint)} /* Stage 3 TLS indicator */ .mf-tls{font-family:var(--mono);font-size:9px;color:var(--fg-faint);letter-spacing:.05em;display:inline-flex;align-items:center;gap:6px} .mf-tls::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success);opacity:.65;flex-shrink:0} @media(max-width:600px){} /* ── 16 Modal — imported from companion ──────────── */ /* Modal CSS included in deepchain.css to keep single stylesheet */ .modal-backdrop{position:fixed;inset:0;z-index:900;background:rgba(4,9,16,.74);backdrop-filter:blur(8px) saturate(.85) brightness(.97);-webkit-backdrop-filter:blur(8px) saturate(.85) brightness(.97);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity 280ms var(--spring)} .modal-backdrop.open{opacity:1;pointer-events:all} .modal-shell{position:relative;width:100%;max-width:1040px;height:min(740px,92dvh);background:var(--bg);display:flex;overflow:hidden;border:1px solid var(--hl-strong);transform:translateY(22px) scale(.976);opacity:0;transition:transform 400ms var(--spring),opacity 320ms var(--spring);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 4px 18px rgba(0,0,0,.42),0 18px 52px rgba(0,0,0,.52),0 52px 110px rgba(0,0,0,.60)} .modal-backdrop.open .modal-shell{transform:translateY(0) scale(1);opacity:1;transition:transform 440ms var(--spring),opacity 360ms var(--spring)} .modal-close{position:absolute;top:10px;right:10px;z-index:30;width:44px;height:44px;border:1px solid var(--hl-strong);background:var(--bg);display:grid;place-items:center;cursor:pointer;color:var(--fg-faint);transition:background .18s,color .18s,border-color .18s;border-radius:2px} .modal-close:hover{background:var(--bg-elevated);color:var(--fg)} .modal-close svg{width:13px;height:13px;transition:transform .2s var(--spring)} .modal-close:hover svg{transform:rotate(90deg)} /* Sidebar */ .modal-sidebar{width:268px;flex-shrink:0;background:#0b2132;color:white;display:flex;flex-direction:column;padding:28px 22px;overflow-y:auto;position:relative} .modal-sidebar::after{content:'';position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07) 15%,rgba(255,255,255,.07) 85%,transparent)} .msb-mark{display:flex;align-items:center;gap:12px;margin-bottom:24px} .msb-glyph{font-family:var(--serif);font-weight:900;font-size:22px;color:white;letter-spacing:-.02em;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);flex-shrink:0;line-height:1;transition:border-color .25s,box-shadow .25s} .msb-mark:hover .msb-glyph{border-color:rgba(212,171,116,0.312);box-shadow:0 0 12px rgba(212,171,116,0.1)} .msb-text{display:flex;flex-direction:column;line-height:1.25} .msb-firm{font-family:var(--serif);font-size:12px;font-weight:700;color:rgba(255,255,255,.90);letter-spacing:.01em} .msb-sub{font-family:var(--sans);font-size:7.5px;font-weight:600;text-transform:uppercase;letter-spacing:.26em;color:rgba(255,255,255,.28);margin-top:2px} .msb-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);margin-bottom:24px;font-family:var(--sans);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.36)} .msb-tag-dot{width:4px;height:4px;background:var(--gold);border-radius:50%;animation:tagpulse 2.8s ease-in-out infinite;flex-shrink:0} @keyframes tagpulse{0%,100%{opacity:1}50%{opacity:.2}} .msb-progress-hdr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px} .msb-progress-lbl{font-family:var(--sans);font-size:7.5px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.22)} .msb-progress-pct{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.38)} .msb-track{height:3px;background:rgba(255,255,255,.06);margin-bottom:24px;overflow:hidden;border-radius:2px} .msb-fill{height:100%;background:linear-gradient(90deg,rgba(212,171,116,0.625) 0%,var(--gold) 60%,rgba(220,185,140,.9) 100%);transition:width .7s var(--spring);border-radius:2px} .msb-nav{list-style:none;flex:1} .msb-nav-item{display:flex;align-items:flex-start;gap:11px;padding:7px 0;position:relative} .msb-nav-item:not(:last-child)::after{content:'';position:absolute;left:8.5px;top:26px;width:1px;height:calc(100% - 8px);background:rgba(255,255,255,.07);transition:background .4s} .msb-nav-item[data-status="complete"]::after{background:rgba(212,171,116,0.275)} .msb-num{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;font-weight:500;flex-shrink:0;margin-top:3px;transition:all .3s var(--spring)} .msb-nav-item[data-status="pending"] .msb-num{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.22)} .msb-nav-item[data-status="active"] .msb-num{background:var(--gold);border:1px solid transparent;color:#0b2132;font-weight:700;box-shadow:0 0 0 3px rgba(212,171,116,0.225)} .msb-nav-item[data-status="complete"] .msb-num{background:rgba(212,171,116,0.175);border:1px solid rgba(212,171,116,0.312);color:var(--gold)} .msb-nav-title{font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.25;padding-top:1px;transition:color .2s} .msb-nav-item[data-status="pending"] .msb-nav-title{color:rgba(255,255,255,.24)} .msb-nav-item[data-status="active"] .msb-nav-title{color:rgba(255,255,255,.94)} .msb-nav-item[data-status="complete"] .msb-nav-title{color:rgba(255,255,255,.48)} .msb-nav-desc{font-family:var(--body);font-size:10px;color:rgba(255,255,255,.22);line-height:1.35;margin-top:1px} .msb-nav-item[data-status="active"] .msb-nav-desc{color:rgba(255,255,255,.38)} .msb-footer{padding-top:20px;border-top:1px solid rgba(255,255,255,.07);margin-top:16px} .msb-atty-lbl{font-family:var(--sans);font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:rgba(255,255,255,.20);margin-bottom:5px} .msb-atty-name{font-family:var(--serif-body);font-size:12px;font-weight:500;color:rgba(255,255,255,.64);margin-bottom:2px} .msb-atty-bar{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.26);margin-bottom:12px} .msb-legal{font-family:var(--body);font-size:9px;color:rgba(255,255,255,.18);line-height:1.62} /* Modal body */ .modal-body{flex:1;overflow-y:auto;overflow-x:hidden;background:var(--bg-elevated);display:flex;flex-direction:column;min-width:0;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--hl-strong) transparent} .modal-topbar{position:sticky;top:0;z-index:10;flex-shrink:0;background:rgba(248,248,249,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hl);padding:13px 40px 13px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px} .modal-topbar-title{font-family:var(--serif);font-size:13px;font-weight:700;color:var(--fg);letter-spacing:.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .modal-topbar-step{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--fg-faint);white-space:nowrap;flex-shrink:0;display:none} @media(max-width:820px){.modal-topbar-step{display:block}.modal-topbar-secure{display:none}} .modal-topbar-secure{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.10em;color:var(--success);padding:4px 9px;background:var(--success-bg);border:1px solid var(--success-bdr);flex-shrink:0} .modal-topbar-secure svg{width:10px;height:10px} .modal-content{padding:32px 36px 56px;min-width:0} /* Form stages with slide transitions */ .mf-stages{flex:1;min-width:0} .mf-stage{display:none} .mf-stage.active{display:block} .mf-stage.exiting{display:block!important;pointer-events:none} .mf-stages[data-dir="forward"] .mf-stage.exiting{animation:stageExitFwd 150ms ease-in forwards} .mf-stages[data-dir="back"] .mf-stage.exiting{animation:stageExitBck 150ms ease-in forwards} .mf-stages[data-dir="forward"] .mf-stage.active{animation:slideInForward .36s var(--spring) both} .mf-stages[data-dir="back"] .mf-stage.active{animation:slideInBack .36s var(--spring) both} @keyframes stageExitFwd{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-12px)}} @keyframes stageExitBck{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(12px)}} @keyframes slideInForward{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:translateX(0)}} @keyframes slideInBack{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}} /* Form elements */ .mf-hdr{margin-bottom:24px} .mf-eyebrow{font-family:var(--sans);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.26em;color:var(--fg-faint);margin-bottom:8px;display:flex;align-items:center;gap:9px} .mf-eyebrow::before{content:'';width:22px;height:1.5px;background:linear-gradient(90deg,var(--navy),rgba(212,171,116,0.5),transparent);display:block;flex-shrink:0} .mf-heading{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.4vw,24px);color:var(--fg);letter-spacing:.01em;line-height:1.18;margin-bottom:6px;text-wrap:balance} .mf-desc{font-family:var(--serif-body);font-size:15px;font-style:italic;color:var(--fg-tertiary);line-height:1.58;text-wrap:pretty} .mf-notice{display:flex;gap:12px;padding:13px 16px;margin-bottom:18px;border-left:2.5px solid var(--amber-border);background:var(--amber-light)} .mf-notice svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:var(--amber);opacity:.9} .mf-notice-title{font-family:var(--sans);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--amber);margin-bottom:3px} .mf-notice p{font-family:var(--body);font-size:11.5px;line-height:1.62;color:var(--fg-secondary)} .mf-notice strong{color:var(--fg);font-weight:600} .mf-info{display:flex;gap:11px;padding:12px 14px;margin-top:14px;border-left:2px solid var(--accent);background:var(--accent-light)} .mf-info svg{width:13px;height:13px;flex-shrink:0;margin-top:2px;color:var(--accent);opacity:.8} .mf-info-title{font-family:var(--sans);font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--accent);margin-bottom:3px} .mf-info p{font-family:var(--body);font-size:11px;line-height:1.55;color:var(--fg-secondary)} .mf-card{background:var(--bg);border:1px solid var(--hl);padding:24px;margin-bottom:16px;position:relative} .mf-card--accent::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--navy) 0%,var(--accent) 50%,rgba(212,171,116,0.5) 100%)} .mf-card-lbl{font-family:var(--sans);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.26em;color:var(--navy);margin-bottom:4px;display:flex;align-items:center;gap:6px} .mf-card-lbl svg{width:11px;height:11px;opacity:.75} .mf-card-title{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--fg);margin-bottom:3px} .mf-card-desc{font-family:var(--body);font-size:12px;color:var(--fg-faint);line-height:1.52;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--hl)} .mf-grid{display:grid;gap:14px} .mf-grid-2{grid-template-columns:1fr 1fr} .mf-full{grid-column:1/-1} .mf-field{display:flex;flex-direction:column;gap:0} .mf-label{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-secondary);margin-bottom:6px;display:flex;align-items:center;gap:4px} .mf-req{color:var(--error);font-size:12px;line-height:1;margin-left:1px} .mf-opt{font-size:9px;font-weight:500;color:var(--fg-faint);margin-left:auto;text-transform:none;letter-spacing:0} .mf-input,.mf-select,.mf-textarea{width:100%;padding:10px 12px;font-family:var(--body);font-size:13px;color:var(--fg);background:var(--bg-deep);border:1px solid var(--hl-strong);border-radius:0;box-shadow:inset 0 1px 3px rgba(0,0,0,.32);transition:border-color .18s,box-shadow .18s,background .18s;-webkit-appearance:none;appearance:none;color-scheme:dark} @media(max-width:820px){.mf-input,.mf-select,.mf-textarea{font-size:16px}} .mf-input:hover,.mf-select:hover,.mf-textarea:hover{border-color:var(--fg-tertiary)} .mf-input:focus,.mf-select:focus,.mf-textarea:focus{outline:none;border-color:var(--gold);background:var(--bg);box-shadow:var(--form-focus),inset 0 1px 2px rgba(0,0,0,.18)} .mf-input::placeholder,.mf-textarea::placeholder{color:var(--fg-faint);font-style:italic} .mf-input.err,.mf-textarea.err{border-color:var(--error);box-shadow:0 0 0 3px rgba(185,28,28,.07),-2px 0 0 var(--error)} .mf-input.valid,.mf-select.valid{border-color:rgba(10,92,58,.35);box-shadow:-2px 0 0 var(--success)} .mf-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e7078' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer} .mf-textarea{resize:vertical;min-height:96px;line-height:1.6} .mf-textarea--tall{min-height:120px} .mf-char{text-align:right;font-family:var(--mono);font-size:9px;color:var(--fg-faint);margin-top:4px;transition:color .2s} .mf-char.warn{color:var(--amber)} .mf-char.limit{color:var(--error)} .mf-err{font-family:var(--body);font-size:11px;color:var(--error);margin-top:5px;display:none;align-items:center;gap:4px;animation:errShake .32s var(--spring)} .mf-err.show{display:flex} @keyframes errShake{0%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(2px)}100%{transform:translateX(0)}} /* Radio cards */ .mf-radio-group{display:grid;gap:8px} .mf-radio-card{display:flex;align-items:flex-start;gap:11px;padding:13px 16px;border:1px solid var(--hl);background:var(--bg-elevated);cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s;position:relative} .mf-radio-card:hover{border-color:var(--hl-strong);background:var(--bg-elevated);transform:translateX(2px)} .mf-radio-card.selected{border-color:var(--navy);background:var(--accent-light);box-shadow:inset 2.5px 0 0 var(--navy),0 0 20px var(--gold-glow)} .mf-radio-card input{position:absolute;opacity:0;pointer-events:none} .mf-radio-pip{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--hl-strong);flex-shrink:0;margin-top:2px;display:grid;place-items:center;transition:all .18s var(--spring)} .mf-radio-card.selected .mf-radio-pip{border-color:var(--navy);background:var(--navy)} .mf-radio-pip::after{content:'';width:5px;height:5px;border-radius:50%;background:white;opacity:0;transform:scale(0);transition:opacity .15s,transform .18s var(--spring)} .mf-radio-card.selected .mf-radio-pip::after{opacity:1;transform:scale(1)} .mf-radio-title{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--fg);margin-bottom:2px} .mf-radio-sub{font-family:var(--body);font-size:11px;color:var(--fg-faint);line-height:1.46} /* Disclosures */ .disc-block{background:var(--bg);border:1px solid var(--hl);margin-bottom:10px;overflow:hidden;transition:border-color .25s,box-shadow .25s} .disc-block:has(.ack-cb:checked){border-color:var(--success-bdr);box-shadow:0 0 0 1px var(--success-bdr)} .disc-head{display:flex;align-items:flex-start;gap:11px;padding:15px 18px 12px;border-bottom:1px solid var(--hl)} .disc-icon{width:26px;height:26px;border:1px solid var(--hl-strong);display:grid;place-items:center;flex-shrink:0;color:var(--navy)} .disc-icon svg{width:12px;height:12px;opacity:.8} .disc-title{font-family:var(--serif);font-weight:700;font-size:13.5px;color:var(--fg);letter-spacing:.01em;margin-bottom:2px} .disc-rule{font-family:var(--mono);font-size:9px;font-weight:300;color:var(--fg-faint);letter-spacing:.06em} .disc-body{padding:13px 18px;font-family:var(--body);font-size:12px;line-height:1.72;color:var(--fg-secondary);border-bottom:1px solid var(--hl)} .disc-body p+p{margin-top:10px} .disc-body strong{color:var(--fg);font-weight:600} .ack-row{display:flex;align-items:flex-start;gap:12px;padding:13px 18px;cursor:pointer;transition:background .22s,box-shadow .22s,transform .18s} .ack-row:hover{background:var(--bg-elevated);transform:translateX(2px)} .ack-row.acked{background:var(--success-bg);box-shadow:inset 3px 0 0 rgba(10,92,58,.28)} .ack-cb{-webkit-appearance:none;appearance:none;width:17px;height:17px;flex-shrink:0;margin-top:2px;border:1.5px solid var(--hl-strong);background:var(--bg);cursor:pointer;display:grid;place-items:center;transition:background .2s var(--spring),border-color .2s,box-shadow .2s} .ack-cb:checked{background:var(--success);border-color:var(--success)} .ack-cb:checked::after{content:'';display:block;width:10px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6.5 5 9.5 10 3.5'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;animation:checkPop .22s var(--spring)} @keyframes checkPop{from{transform:scale(0)}to{transform:scale(1)}} .ack-cb:focus-visible{outline:none;box-shadow:var(--form-focus)} .ack-text{font-family:var(--body);font-size:12.5px;color:var(--fg-secondary);line-height:1.62;flex:1;cursor:pointer} .ack-text strong{color:var(--fg);font-weight:600} /* Attorney block */ .atty-block{border:1px solid var(--hl);padding:16px 18px;background:var(--bg);display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px} .atty-lbl{font-family:var(--sans);font-size:7.5px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--fg-faint);margin-bottom:4px} .atty-name{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--fg);margin-bottom:2px} .atty-title{font-family:var(--sans);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--navy);margin-bottom:5px} .atty-bar{font-family:var(--mono);font-size:9.5px;color:var(--fg-faint)} .atty-contact{text-align:right} .atty-contact-row{font-family:var(--body);font-size:11.5px;color:var(--fg-tertiary);line-height:1.72} .atty-contact-row a{color:var(--accent)} /* Submit */ .submit-area{margin-top:20px;text-align:center;padding:32px 24px;background:var(--bg);border:1px solid var(--hl)} .submit-desc{font-family:var(--serif-body);font-style:italic;font-size:15.5px;color:var(--fg-tertiary);line-height:1.62;margin-bottom:22px;max-width:420px;margin-left:auto;margin-right:auto} .submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 28px;width:100%;background:var(--gold);color:var(--on-gold);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border:none;cursor:pointer;transition:background .25s,box-shadow .25s,transform .2s;box-shadow:0 2px 12px rgba(0,0,0,.36);position:relative;overflow:hidden} .submit-btn::after{content:'';position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-200%) skewX(-18deg);transition:transform .5s ease;pointer-events:none} .submit-btn:hover:not(:disabled)::after{transform:translateX(270%) skewX(-18deg)} .submit-btn:hover:not(:disabled){background:#e2bd8b;box-shadow:0 4px 18px rgba(0,0,0,.44);transform:translateY(-1px)} .submit-btn:active:not(:disabled){transform:translateY(1px)!important;box-shadow:0 1px 4px rgba(0,0,0,.30)!important;transition-duration:.08s} .submit-btn:disabled{background:var(--fg-faint);box-shadow:none;cursor:not-allowed;transform:none} .submit-btn svg{width:14px;height:14px;flex-shrink:0} .spinner{animation:spin .7s linear infinite} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .submit-note{font-family:var(--body);font-size:11px;color:var(--fg-faint);margin-top:14px;line-height:1.5;transition:color .25s} .submit-note.ready{color:var(--success)} .submit-atty{font-family:var(--mono);font-size:9px;color:var(--fg-faint);margin-top:12px;letter-spacing:.04em} /* Nav row */ .mf-nav{display:flex;align-items:center;justify-content:space-between;padding-top:24px;margin-top:0;border-top:1px solid var(--hl)} .mf-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border:none;cursor:pointer;transition:all .2s ease} .mf-btn svg{width:13px;height:13px;flex-shrink:0} .mf-btn--primary{background:var(--gold);color:var(--on-gold);box-shadow:0 2px 10px rgba(0,0,0,.32)} .mf-btn--primary:hover{background:#e2bd8b;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.44)} .mf-btn--primary:active{transform:translateY(1px)!important;box-shadow:0 1px 4px rgba(0,0,0,.30)!important;transition-duration:.08s} .mf-btn--ghost{background:transparent;color:var(--fg-tertiary);border:1px solid var(--hl-strong)} .mf-btn--ghost:hover{background:var(--bg-deep);color:var(--fg-secondary)} /* Success state */ .modal-success{display:none;padding:clamp(40px,6vw,64px) clamp(24px,4vw,48px);text-align:center} .modal-success.active{display:block} .modal-success.active .success-mark{animation:fadeUp .5s .00s var(--spring) both,successPulse 2.2s 1.0s ease-in-out 1} .modal-success.active .success-heading{animation:fadeUp .5s .08s var(--spring) both} .modal-success.active .success-sub{animation:fadeUp .5s .16s var(--spring) both} .modal-success.active .success-divider{animation:fadeUp .5s .22s var(--spring) both} .modal-success.active .success-msg{animation:fadeUp .5s .28s var(--spring) both} .modal-success.active .success-ref{animation:fadeUp .5s .36s var(--spring) both} .modal-success.active .success-footer{animation:fadeUp .5s .44s var(--spring) both} @keyframes successPulse{0%,100%{opacity:.08;transform:scale(1)}50%{opacity:.14;transform:scale(1.04)}} .success-mark{font-family:var(--serif);font-weight:900;font-size:48px;color:var(--navy);opacity:.08;letter-spacing:-.02em;margin-bottom:18px} .success-heading{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--fg);letter-spacing:.01em;margin-bottom:6px} .success-sub{font-family:var(--serif-body);font-style:italic;font-size:17px;color:var(--navy);margin-bottom:18px} .success-divider{width:40px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 22px;border-radius:1px} .success-msg{font-family:var(--body);font-size:13px;color:var(--fg-secondary);line-height:1.76;max-width:400px;margin:0 auto 20px} .success-ref{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--fg-faint);padding:9px 20px;border:1px solid var(--hl-strong);border-top:2px solid var(--gold);background:var(--bg-elevated);letter-spacing:.10em;margin-bottom:24px} .success-footer{font-family:var(--body);font-size:11.5px;color:var(--fg-faint);line-height:1.64} .success-footer a{color:var(--accent)} /* ── 17 Mobile ───────────────────────────────────── */ @media(max-width:820px){.modal-shell{height:100%;max-height:100dvh;border-radius:16px 16px 0 0;border-left:none;border-right:none;border-bottom:none}.modal-shell::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:var(--hl-strong);z-index:30}.modal-backdrop{padding:0;align-items:flex-end}.modal-backdrop:not(.open) .modal-shell{transform:translateY(48px) scale(1)}.modal-sidebar{display:none}.modal-content{padding:24px 20px 48px}} @media(max-width:540px){.mf-grid-2{grid-template-columns:1fr}.mf-nav{flex-direction:column;gap:8px}.mf-btn{width:100%;justify-content:center}.atty-block{flex-direction:column;gap:8px}.atty-contact{text-align:left}} /* ── 18 Reduced Motion ───────────────────────────── */ @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.monogram{transform:none!important}.reveal{opacity:1;transform:none;transition:none}.hero-scroll__line,.hero-scroll__chevron{animation:none}.practice-card,.ecc-btn,.nav-cta,.submit-btn{transition:none}.mf-stages[data-dir] .mf-stage.active,.mf-stage.exiting{animation:none}.modal-backdrop,.modal-shell{transition:none}.site-nav{transition:none}.reveal.visible .section-label::before{animation:none}} /* ── 19 Print ────────────────────────────────────── */ @media print{.hero{min-height:auto;padding:40px}.monogram{box-shadow:none}} .mf-input::placeholder,.mf-textarea::placeholder{color:var(--fg-faint);opacity:1} @supports not (backdrop-filter:blur(1px)){.site-nav{background:rgba(10,31,46,.97)}.legal-nav{background:rgba(10,31,46,.97)}.modal-backdrop{background:rgba(3,12,20,.90)}} @media(max-width:768px){html{scroll-padding-top:60px}section[id],[id]{scroll-margin-top:60px}} /* ═══════════════════════════════════════════════════════════════ ENTRANCE — "The Impression" An engraved plate resolves into focus; type is set; rules draw. Three motions, each matched to what the element is: seal — focus-pull (blur+scale, no translate) draw — scaleX from a meaningful origin rise — a restrained 5-6px settle Total 1.86s. Nothing overlaps by accident. ═══════════════════════════════════════════════════════════════ */ /* Hold the stage until fonts resolve, so the sequence never plays against fallback metrics and then jumps. */ html.is-loading .hero-inner, html.is-loading .hero-scroll, html.is-loading .site-nav{visibility:hidden} /* Hold the clock too. Without this the sequence runs while hidden and the reveal jump-cuts into whatever beat the font load happened to land on. Pausing means the cascade always starts from zero. */ html.is-loading .hero .monogram, html.is-loading .hero .monogram-glyph, html.is-loading .hero .monogram-corners, html.is-loading .hero .monogram-ticks, html.is-loading .hero .monogram-vline, html.is-loading .hero .hero-firm, html.is-loading .hero .hero-firm-line, html.is-loading .hero .hero-tagline, html.is-loading .hero .hero-tagline::after, html.is-loading .hero .hero-location, html.is-loading .hero-scroll{animation-play-state:paused!important} /* ── Beat 1 · the seal resolves ─────────────────────────────── */ @keyframes sealResolve{ from{opacity:0;transform:scale(.972);filter:blur(5px)} 55% {opacity:1} to {opacity:1;transform:scale(1);filter:blur(0)} } .hero .monogram{ animation:sealResolve 660ms var(--sealA) var(--ease-seal) both; } /* ── Beat 2 · the glyph strikes ─────────────────────────────── */ @keyframes glyphStrike{ from{opacity:0;transform:translateY(2%) translateZ(9px) scale(1.018)} to {opacity:1;transform:translateY(2%) translateZ(9px) scale(1)} } .hero .monogram-glyph{ animation:glyphStrike 520ms var(--sealB) var(--ease-seal) both; } /* Plate furniture settles a beat behind the glyph */ @keyframes furnitureFade{from{opacity:0}to{opacity:1}} .hero .monogram-corners, .hero .monogram-ticks, .hero .monogram-vline{ animation:furnitureFade 440ms var(--sealC) ease-out both; } /* ── Beat 3 · the name settles ──────────────────────────────── */ @keyframes typeRise{ from{opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)} } .hero .hero-firm{ animation:typeRise 430ms var(--typeA) var(--ease-rise) both; } /* ── Beat 4 · flanking rules draw outward from the name ─────── */ @keyframes ruleDrawL{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes ruleDrawR{from{transform:scaleX(0)}to{transform:scaleX(1)}} .hero .hero-firm-line{transform-origin:100% 50%} .hero .hero-firm-line:first-child{ transform-origin:100% 50%; animation:ruleDrawL 390ms var(--typeB) var(--ease-draw) both; } .hero .hero-firm-line:last-child{background:linear-gradient(90deg,var(--hl-strong),transparent); transform-origin:0 50%; animation:ruleDrawR 390ms var(--typeB) var(--ease-draw) both; } /* ── Beat 5 · the tagline settles ───────────────────────────── */ .hero .hero-tagline{ animation:typeRise 410ms var(--typeC) var(--ease-rise) both; } /* ── Beat 6 · the gold rule draws from centre ───────────────── */ @keyframes centreDraw{ from{transform:scaleX(0);opacity:0} to {transform:scaleX(1);opacity:.40} } .hero .hero-tagline::after{ transform-origin:50% 50%; animation:centreDraw 370ms var(--typeD) var(--ease-draw) both; } /* ── Beat 7 · ancillary metadata: light only, no movement ───── */ @keyframes lightOnly{from{opacity:0}to{opacity:1}} .hero .hero-location{ animation:lightOnly 350ms var(--typeE) ease-out both; } /* ── Beat 8 · the invitation ────────────────────────────────── */ .hero-scroll{ animation:lightOnly 330ms var(--typeF) ease-out both; } /* ── Reduced motion: one quiet fade, no transforms, no blur ─── */ @media(prefers-reduced-motion:reduce){ .hero .monogram,.hero .monogram-glyph,.hero .monogram-corners, .hero .monogram-ticks,.hero .monogram-vline,.hero .hero-firm, .hero .hero-firm-line,.hero .hero-tagline,.hero .hero-tagline::after, .hero .hero-location,.hero-scroll{ animation:lightOnly 400ms ease-out both!important; transform:none!important;filter:none!important; } } /* ═══════════════════════════════════════════════════════════════ VISUAL REFINEMENT — engraved detail ═══════════════════════════════════════════════════════════════ */ /* Section labels gain a hairline that runs to the measure edge, the way a printed sidehead sits against its rule. */ .section-label{position:relative} .section-label::after{ content:'';position:absolute;left:calc(100% + 14px);top:50%; width:min(220px,22vw);height:1px; background:linear-gradient(90deg,rgba(212,171,116,.28),transparent); pointer-events:none; } @media(max-width:768px){.section-label::after{display:none}} /* Practice cards: a hairline crest catches the implied light source at the section's top edge. */ .practice-card::after{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); opacity:0;transition:opacity .42s var(--ease-rise);pointer-events:none; } .practice-card:hover::after{opacity:1} /* Attorney panel: a fine inner keyline reads as a plate edge. */ .ep{box-shadow:inset 0 0 0 1px rgba(212,171,116,.07)} /* Gold rule under the tagline gets a faint bloom so it reads as struck rather than drawn. */ .hero-tagline::after{box-shadow:0 0 12px rgba(212,171,116,.14)} /* Contact rows: the gold indicator resolves rather than jumps. */ .ep-contact-icon{transition:border-color .3s var(--ease-rise), background .3s var(--ease-rise), color .3s var(--ease-rise)} /* Focus ring picks up the gold so keyboard traversal reads as deliberate rather than as a browser default. */ :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px} /* Selection carries a hairline, matching the engraved vocabulary. */ ::selection{background:var(--gold);color:var(--on-gold);text-shadow:none} /* Nav brand mark: the gold keyline warms on approach. */ .nav-dc{transition:border-color .28s var(--ease-rise), box-shadow .28s var(--ease-rise), color .28s var(--ease-rise)} /* Footer seats on a hairline rather than a hard border. */ /* Modal: the shell edge catches light at its top, like a lifted card. */ .modal-shell::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:40; background:linear-gradient(90deg,transparent,rgba(212,171,116,.30),transparent); pointer-events:none; } /* Submit button: gold plate gains an engraved top edge. */ .submit-btn,.ecc-btn,.nav-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 12px rgba(0,0,0,.36)} .submit-btn:hover:not(:disabled),.ecc-btn:hover,.nav-cta:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 4px 18px rgba(0,0,0,.46); } /* Disabled submit should read as inert metal, not faded ink. */ .submit-btn:disabled{filter:saturate(.35);opacity:.5;box-shadow:none} /* ═══════════════════════════════════════════════════════════════ PRIVACY NOTICE BAR A disclosure, not a consent request. The site sets no cookies, so ePrivacy Art. 5(3) consent is not engaged. Presented as a non-blocking bar because nothing is being asked of the visitor. ═══════════════════════════════════════════════════════════════ */ .privacy-notice{ position:fixed;left:0;right:0;bottom:0;z-index:700; background:var(--bg-deep); padding:0 var(--section-h); transform:translateY(101%); transition:transform 560ms var(--ease-seal); box-shadow:0 -12px 40px rgba(0,0,0,.42); } .privacy-notice::before{ content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,rgba(212,171,116,.42) 22%, rgba(212,171,116,.42) 78%,transparent); pointer-events:none; } .privacy-notice.is-open{transform:translateY(0)} .pn-inner{ max-width:var(--page-max);margin:0 auto; padding:clamp(16px,2vw,20px) 0 calc(clamp(16px,2vw,20px) + env(safe-area-inset-bottom,0px)); display:flex;align-items:center;gap:clamp(16px,3vw,36px); } .pn-mark{ flex-shrink:0;width:34px;height:34px;display:grid;place-items:center; border:1px solid rgba(212,171,116,.28);color:var(--gold); } .pn-mark svg{width:15px;height:15px} .pn-body{flex:1;min-width:0} .pn-title{ font-family:var(--sans);font-size:8.5px;font-weight:700; letter-spacing:.22em;text-transform:uppercase; color:var(--gold);margin-bottom:5px; } .pn-text{ font-family:var(--body);font-size:12.5px;line-height:1.65; color:var(--fg-secondary);max-width:78ch;text-wrap:pretty; } .pn-text a{ color:var(--fg);border-bottom:1px solid rgba(212,171,116,.42); transition:border-color .22s,color .22s; } .pn-text a:hover{color:var(--gold);border-bottom-color:var(--gold)} .pn-actions{display:flex;align-items:center;gap:10px;flex-shrink:0} .pn-btn{ font-family:var(--sans);font-size:9.5px;font-weight:700; letter-spacing:.16em;text-transform:uppercase; padding:11px 22px;border:1px solid transparent;cursor:pointer; transition:background .22s,color .22s,border-color .22s,transform .18s; white-space:nowrap;min-height:44px; } .pn-btn--primary{ background:var(--gold);color:var(--on-gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.22); } .pn-btn--primary:hover{background:#e2bd8b;transform:translateY(-1px)} .pn-btn--primary:active{transform:translateY(1px);transition-duration:.08s} .pn-btn--ghost{ background:transparent;color:var(--fg-tertiary); border-color:var(--hl-strong); } .pn-btn--ghost:hover{color:var(--fg);border-color:var(--gold)} /* Expandable detail — the substance behind the summary */ .pn-detail{ max-width:var(--page-max);margin:0 auto; overflow:hidden;max-height:0; transition:max-height 420ms var(--ease-seal); } .privacy-notice.is-expanded .pn-detail{max-height:420px} .pn-detail-inner{ padding:0 0 20px;border-top:1px solid var(--hl);margin-top:4px; display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px); padding-top:18px; } .pn-item-label{ font-family:var(--mono);font-size:8.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--fg-faint);margin-bottom:6px; } .pn-item-text{ font-family:var(--body);font-size:11.5px;line-height:1.68; color:var(--fg-tertiary);text-wrap:pretty; } .pn-item-text code{ font-family:var(--mono);font-size:10.5px;color:var(--gold); } @media(max-width:860px){ .pn-inner{flex-wrap:wrap;gap:14px} .pn-mark{display:none} .pn-actions{width:100%} .pn-btn{flex:1;text-align:center;justify-content:center} .pn-detail-inner{grid-template-columns:1fr;gap:16px} .privacy-notice.is-expanded .pn-detail{max-height:600px} } @media(prefers-reduced-motion:reduce){ .privacy-notice{transition:none} .pn-detail{transition:none} } @media print{.privacy-notice{display:none}} .submit-note.err{color:var(--error);font-weight:500} /* ═══════════════════════════════════════════════════════════════ MONOGRAM — dimensional layering Without preserve-3d the children are flattened into the plate and a tilt reads as a card turning. Separating them on Z gives real parallax between the glyph, the furniture and the ground. ═══════════════════════════════════════════════════════════════ */ .monogram{transform-style:preserve-3d} html.is-loading .monogram{pointer-events:none} /* Ground plane */ .monogram-vignette{transform:translateZ(1px)} /* Registration marks sit just above the ground */ .monogram-vline{transform:translateZ(3px)} .monogram-ticks{transform:translateZ(4px)} .monogram::after{transform:translateZ(3px)} .monogram-corners{transform:translateZ(4px)} /* The glyph floats highest — this is where the parallax is legible */ .monogram-glyph{transform:translateY(2%) translateZ(9px)} /* Sheen tracks the tilt. JS writes --sheen-x/--sheen-y during hover; the fallback keeps a fixed highlight at rest. */ .monogram::before{ background: radial-gradient(ellipse 62% 52% at var(--sheen-x,38%) var(--sheen-y,30%), rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 34%, transparent 62%), linear-gradient(132deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.032) 24%, transparent 44%, transparent 60%, rgba(0,0,0,.14) 80%, rgba(0,0,0,.22) 100%); transform:translateZ(10px); } @media(prefers-reduced-motion:reduce){ .monogram{transform-style:flat} .monogram-glyph,.monogram-vline,.monogram-ticks, .monogram-corners,.monogram-vignette{transform:none} .monogram-glyph{transform:translateY(2%)} } /* ═══════════════════════════════════════════════════════════════ FOOTER — three bands 1 masthead identity | contact | responsible attorney 2 notices disclosures as labelled statements, not a wall 3 baseline copyright | legal navigation ═══════════════════════════════════════════════════════════════ */ .ft{background:var(--bg-deep);position:relative;margin-top:0} .ft::before{content:'';position:absolute;top:0;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--hl-strong) 18%, rgba(212,171,116,.30) 50%,var(--hl-strong) 82%,transparent)} /* ── Band 1 ── */ .ft-masthead{ max-width:var(--page-max);margin:0 auto; padding:clamp(40px,5vw,60px) var(--section-h) clamp(32px,4vw,44px); display:grid;grid-template-columns:1.5fr 1fr 1.25fr; gap:clamp(28px,5vw,64px);align-items:start; } .ft-brand{display:flex;align-items:flex-start;gap:13px;text-decoration:none; transition:opacity .24s} .ft-brand:hover{opacity:.85} .ft-mark{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center; font-family:var(--serif);font-weight:900;font-size:15px;letter-spacing:-.02em; color:var(--fg-secondary);border:1px solid var(--hl-strong); transition:border-color .24s,color .24s} .ft-brand:hover .ft-mark{border-color:rgba(212,171,116,.42);color:var(--gold)} .ft-brand-text{display:grid;gap:4px;min-width:0} .ft-name{font-family:var(--serif);font-weight:700;font-size:15px; letter-spacing:.06em;color:var(--fg-secondary);line-height:1.2} .ft-tagline{font-family:var(--serif-body);font-style:italic;font-size:13px; letter-spacing:.02em;color:var(--fg-faint);line-height:1.4} .ft-col-label{ font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint); margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--hl); line-height:1.5; } .ft-list{list-style:none;margin:0;padding:0;display:grid;gap:7px} .ft-list li{font-family:var(--body);font-size:12.5px;line-height:1.5;color:var(--fg-tertiary)} .ft-list a{color:var(--fg-tertiary);border-bottom:1px solid transparent; transition:color .22s,border-color .22s} .ft-list a:hover{color:var(--gold);border-bottom-color:rgba(212,171,116,.5)} .ft-strong{color:var(--fg-secondary);font-family:var(--serif);font-weight:700; font-size:13.5px;letter-spacing:.02em} .ft-mono{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--fg-faint)} .ft-muted{color:var(--fg-faint)} /* ── Band 2 ── */ .ft-notices{ max-width:var(--page-max);margin:0 auto; padding:clamp(26px,3.5vw,34px) var(--section-h) clamp(26px,3.5vw,34px); border-top:1px solid var(--hl); } .ft-notices-h{ font-family:var(--mono);font-size:8.5px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint); margin:0 0 16px; } .ft-notice-grid{display:grid;grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,22px) clamp(28px,5vw,56px)} .ft-notice{margin:0;font-family:var(--body);font-size:11.5px;line-height:1.72; color:var(--fg-tertiary);text-wrap:pretty} .ft-notice-t{display:block;font-family:var(--sans);font-weight:700;font-size:9.5px; letter-spacing:.10em;text-transform:uppercase;color:var(--fg-secondary);margin-bottom:3px} .ft-entity{margin:clamp(16px,2.4vw,22px) 0 0;padding-top:14px; border-top:1px solid var(--hl); font-family:var(--body);font-size:11px;line-height:1.7;color:var(--fg-faint)} /* ── Band 3 ── */ .ft-baseline{ max-width:var(--page-max);margin:0 auto; padding:20px var(--section-h) calc(28px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--hl); display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:14px; } .ft-copy{margin:0;font-family:var(--body);font-size:11px;color:var(--fg-faint)} .ft-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,24px);flex-wrap:wrap} .ft-nav a{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:1.4px; text-transform:uppercase;color:var(--fg-faint); border-bottom:1px solid transparent;padding-bottom:2px; transition:color .22s,border-color .22s} .ft-nav a:hover{color:var(--gold);border-bottom-color:rgba(212,171,116,.5)} .ft-nav a[aria-current="page"]{color:var(--fg-tertiary);border-bottom-color:var(--hl-strong)} /* ── Responsive ── */ @media(max-width:900px){ .ft-masthead{grid-template-columns:1fr 1fr;gap:30px 40px} .ft-col--identity{grid-column:1 / -1} } @media(max-width:620px){ .ft-masthead{grid-template-columns:1fr;gap:26px} .ft-notice-grid{grid-template-columns:1fr;gap:14px} .ft-baseline{flex-direction:column;text-align:center} .ft-nav{justify-content:center} } @media print{ .ft{background:none} .ft-nav,.ft-mark{display:none} } /* ═══════════════════════════════════════════════════════════════ HEADER — three-zone frame brand | primary navigation | actions Below 860px the primary list is replaced by a disclosure menu rather than simply hidden, so small screens keep navigation. ═══════════════════════════════════════════════════════════════ */ .site-nav-inner{ max-width:var(--page-max);margin:0 auto; display:grid;grid-template-columns:auto 1fr auto; align-items:center;gap:clamp(12px,3vw,28px); height:60px; } /* ── Primary list ── */ .nav-primary{justify-self:center;min-width:0} .nav-links{ display:flex;align-items:center;justify-content:center; gap:clamp(14px,2.6vw,30px); list-style:none;margin:0;padding:0; } .nav-links li{display:block} /* ── Actions cluster ── */ .nav-actions{display:flex;align-items:center;gap:9px;justify-self:end} .nav-cta-short{display:none} /* ── Menu button: two rules that become a cross ── */ .nav-menu-btn{ display:none;width:44px;height:44px;flex-shrink:0; align-items:center;justify-content:center; background:transparent;border:1px solid var(--hl-strong); cursor:pointer;color:var(--fg-tertiary); transition:border-color .22s,color .22s,background .22s; } .nav-menu-btn:hover{color:var(--fg);border-color:var(--gold);background:var(--bg-elevated)} .nav-menu-bars{position:relative;display:block;width:17px;height:11px} .nav-menu-bars span{ position:absolute;left:0;right:0;height:1.5px;background:currentColor; transition:transform .3s var(--spring),opacity .2s; } .nav-menu-bars span:first-child{top:0} .nav-menu-bars span:last-child{bottom:0} .nav-menu-btn[aria-expanded="true"] .nav-menu-bars span:first-child{ transform:translateY(4.75px) rotate(45deg); } .nav-menu-btn[aria-expanded="true"] .nav-menu-bars span:last-child{ transform:translateY(-4.75px) rotate(-45deg); } /* ── Disclosure panel ── */ .nav-menu{ display:none; border-top:1px solid var(--hl); background:rgba(7,24,37,.97); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); padding:0 var(--section-h) calc(14px + env(safe-area-inset-bottom,0px)); max-height:calc(100dvh - 60px);overflow-y:auto;overscroll-behavior:contain; } .nav-menu[hidden]{display:none} .nav-menu.is-open{display:block;animation:navMenuIn .26s var(--ease-rise) both} @keyframes navMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .nav-menu-list{list-style:none;margin:0;padding:6px 0 0} .nav-menu-link{ display:flex;align-items:center;min-height:52px; font-family:var(--sans);font-size:12px;font-weight:600; letter-spacing:1.6px;text-transform:uppercase; color:var(--fg-secondary);border-bottom:1px solid var(--hl); transition:color .2s,padding-left .24s var(--ease-rise); } .nav-menu-list li:last-child .nav-menu-link{border-bottom:none} .nav-menu-link:hover,.nav-menu-link:focus-visible{color:var(--gold);padding-left:6px} .nav-menu-foot{ display:flex;flex-direction:column;gap:9px; padding-top:14px;margin-top:10px;border-top:1px solid var(--hl); } .nav-menu-contact{ font-family:var(--body);font-size:12.5px;color:var(--fg-faint); min-height:34px;display:flex;align-items:center;transition:color .2s; } .nav-menu-contact:hover{color:var(--gold)} /* ── Breakpoints ── */ @media(max-width:860px){ .site-nav-inner{grid-template-columns:auto 1fr auto} .nav-primary{display:none} .nav-menu-btn{display:inline-flex} } @media(max-width:520px){ .site-nav-inner{height:56px;gap:10px} .nav-firm{display:none} .nav-cta-full{display:none} .nav-cta-short{display:inline} .nav-cta{padding:10px 14px;min-height:40px;letter-spacing:1.4px} .nav-menu{max-height:calc(100dvh - 56px)} } @media(max-width:360px){ .nav-cta svg{display:none} .nav-cta{gap:0} } @media(hover:none){ .nav-menu-link:hover{padding-left:0} } @media print{.site-nav{display:none}}