/* ============================================================ Cleared by RepSpert — one-page site Three visual directions, switched via [data-direction] on : chambers — law-firm classic, light, generous whitespace brief — editorial legal-document, ruled & numbered counsel — quiet-luxury dark, high contrast ============================================================ */ /* ---------- Brand constants (do not vary) ---------- */ :root{ --mint:#38E0B8; --mint-600:#1FC9A0; /* deeper mint for text/icons on light */ --mint-700:#12A988; --navy:#202838; --navy-900:#161B26; --navy-800:#1B2230; --navy-700:#2A3346; --navy-grad-a:#222B40; --navy-grad-b:#374765; --maxw:1180px; --gut:clamp(20px,5vw,72px); --f-head:"Libre Franklin",system-ui,sans-serif; --f-body:"Source Sans 3",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace; --r-sm:6px; --r-md:12px; --r-lg:20px; --accent:var(--mint); /* tweakable */ } /* ---------- Themed tokens per direction ---------- */ :root[data-direction="chambers"]{ --bg:#F4F6F5; --surface:#FFFFFF; --surface-2:#F9FBFA; --ink:#1C2331; --body:#454D5E; --muted:#737B8B; --rule:#E3E8E7; --rule-strong:#D2D9D8; --accent-on-light:var(--mint-600); --footer-bg:var(--navy); } :root[data-direction="brief"]{ --bg:#F1F2EE; --surface:#FBFBF8; --surface-2:#F5F6F1; --ink:#1B2230; --body:#3F4757; --muted:#6E7687; --rule:#DCDED6; --rule-strong:#C7CABE; --accent-on-light:var(--mint-700); --footer-bg:var(--navy-900); } :root[data-direction="counsel"]{ --bg:#1A212E; --surface:#222B3C; --surface-2:#1E2634; --ink:#FFFFFF; --body:#C2C9D6; --muted:#8C95A8; --rule:rgba(255,255,255,.10); --rule-strong:rgba(255,255,255,.18); --accent-on-light:var(--mint); --footer-bg:var(--navy-900); } /* ---------- Reset ---------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg);color:var(--body); font-family:var(--f-body);font-size:18px;line-height:1.65; font-weight:400;letter-spacing:.002em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:background .4s ease,color .4s ease; } :root[data-direction="counsel"] body{ background: radial-gradient(120% 90% at 80% -10%, #2C3950 0%, transparent 55%), radial-gradient(100% 80% at -10% 0%, #243049 0%, transparent 50%), linear-gradient(180deg,#1B2230 0%, #161C28 100%); background-attachment:fixed; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--mint);color:var(--navy)} h1,h2,h3,h4{font-family:var(--f-head);color:var(--ink);line-height:1.08; font-weight:700;letter-spacing:-.02em;text-wrap:balance} p{text-wrap:pretty} /* ---------- Layout helpers ---------- */ .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)} .section{padding-block:clamp(64px,9vw,128px);position:relative} .section + .section{border-top:1px solid transparent} :root[data-direction="brief"] .section{border-top:1px solid var(--rule)} .lede{font-size:clamp(19px,2.1vw,23px);line-height:1.6;color:var(--body);max-width:62ch} /* first content section sits closer to the hero */ .hero + .section{padding-top:clamp(32px,4vw,56px)} /* eyebrow / section label */ .eyebrow{ font-family:var(--f-mono);font-size:13px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent-on-light);font-weight:500; display:inline-flex;align-items:center;gap:10px;margin-bottom:22px; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent-on-light);display:inline-block} :root[data-direction="brief"] .eyebrow::before{display:none} :root[data-direction="brief"] .eyebrow{ color:var(--muted); display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--rule); padding-bottom:12px;margin-bottom:32px; } :root[data-direction="brief"] .eyebrow .num{color:var(--accent-on-light);font-weight:600} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--rule); transition:background .4s ease,border-color .4s ease; } :root[data-direction="counsel"] .site-header{ background:color-mix(in srgb,#1A212E 78%, transparent); } .header-row{display:flex;align-items:center;justify-content:space-between; height:74px;gap:20px} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand-seal{width:42px;height:42px;border-radius:50%; border:1.5px solid var(--accent-on-light);display:flex;align-items:center; justify-content:center;flex-shrink:0;transition:border-color .4s ease} .brand-rmk{height:26px;width:auto;display:block} .brand-rmk.light{display:none} .brand-text{display:flex;flex-direction:column;line-height:1.02} .brand-name{font-family:var(--f-head);font-weight:700;font-size:20px; letter-spacing:-.025em;color:var(--ink)} .brand-by{font-size:11.5px;color:var(--muted);display:flex;align-items:center; gap:5px;margin-top:3px;letter-spacing:.01em} .brand-rep{height:12px;width:auto} .brand-rep.light{display:none} :root[data-direction="counsel"] .brand-rmk.dark{display:none} :root[data-direction="counsel"] .brand-rmk.light{display:block} :root[data-direction="counsel"] .brand-rep.dark{display:none} :root[data-direction="counsel"] .brand-rep.light{display:block} .header-nav{display:flex;align-items:center;gap:30px} .header-links{display:flex;gap:28px} .header-links a{font-size:15px;color:var(--muted);font-weight:500; transition:color .2s} .header-links a:hover{color:var(--ink)} @media(max-width:760px){.header-links{display:none}} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-family:var(--f-head);font-weight:600;font-size:16px;letter-spacing:-.01em; padding:15px 26px;border-radius:var(--r-sm);border:1px solid transparent; cursor:pointer;transition:transform .18s cubic-bezier(.2,.7,.3,1), background .2s,box-shadow .25s,color .2s;white-space:nowrap; } .btn .arr{transition:transform .25s cubic-bezier(.2,.7,.3,1)} .btn:hover .arr{transform:translateX(4px)} .btn-sm{padding:11px 18px;font-size:14.5px} /* primary varies by direction */ :root[data-direction="chambers"] .btn-primary{ background:var(--navy);color:#fff;box-shadow:0 1px 2px rgba(28,35,49,.18)} :root[data-direction="chambers"] .btn-primary:hover{ background:#161D2A;transform:translateY(-1px); box-shadow:0 10px 26px -10px rgba(28,35,49,.55)} :root[data-direction="brief"] .btn-primary, :root[data-direction="counsel"] .btn-primary{ background:var(--mint);color:var(--navy)} :root[data-direction="brief"] .btn-primary:hover, :root[data-direction="counsel"] .btn-primary:hover{ background:#54E9C4;transform:translateY(-1px); box-shadow:0 12px 30px -12px rgba(56,224,184,.7)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)} .btn-ghost:hover{border-color:var(--ink);transform:translateY(-1px)} /* ---------- Sticky CTA (corner) ---------- */ .sticky-cta{ position:fixed;right:24px;bottom:24px;z-index:45; opacity:0;transform:translateY(14px) scale(.97);pointer-events:none; transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.3,1); box-shadow:0 18px 40px -14px rgba(20,26,40,.5); } .sticky-cta.show{opacity:1;transform:none;pointer-events:auto} @media(max-width:560px){.sticky-cta{right:14px;bottom:14px} .sticky-cta .btn{padding:13px 18px;font-size:14px}} /* ============================================================ HERO ============================================================ */ .hero{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(40px,5vw,72px); position:relative;overflow:hidden} .hero-inner{max-width:880px} :root[data-direction="chambers"] .hero-inner{margin-inline:auto;text-align:center} :root[data-direction="chambers"] .hero .eyebrow{justify-content:center} .hero h1{ font-size:clamp(38px,6.4vw,76px);line-height:1.02;letter-spacing:-.032em; color:var(--ink);margin-bottom:26px;font-weight:700; } .hero h1 em{font-style:normal;color:var(--accent-on-light)} .hero .sub{font-size:clamp(18px,2.1vw,22px);line-height:1.55;color:var(--body); max-width:60ch;margin-bottom:38px} :root[data-direction="chambers"] .hero .sub{margin-inline:auto} .hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap} :root[data-direction="chambers"] .hero-cta{justify-content:center} .trust-line{font-size:14.5px;color:var(--muted);margin-top:18px; display:flex;align-items:center;gap:9px} :root[data-direction="chambers"] .trust-line{justify-content:center} .trust-line .dot{width:4px;height:4px;border-radius:50%;background:var(--accent-on-light)} /* "No removal, no fee" promise pill. Light directions: white badge (distinct from the navy CTA), navy check. Counsel (dark): navy badge with mint check. */ .promise{display:inline-flex;align-items:center;gap:9px; font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:-.01em; color:var(--ink); background:var(--surface); border:1px solid var(--rule-strong); padding:10px 18px;border-radius:999px; box-shadow:0 10px 26px -18px rgba(20,26,40,.45)} .promise img{height:16px;width:auto} .promise b{color:var(--accent-on-light);font-weight:700} .promise .pcheck-mint{display:none} :root[data-direction="counsel"] .promise{background:var(--navy);color:#fff; border-color:color-mix(in srgb,var(--mint) 32%, var(--navy)); box-shadow:0 8px 24px -14px rgba(0,0,0,.6)} :root[data-direction="counsel"] .promise b{color:var(--mint)} :root[data-direction="counsel"] .promise .pcheck-navy{display:none} :root[data-direction="counsel"] .promise .pcheck-mint{display:inline} .hero-promise{margin-top:24px} :root[data-direction="chambers"] .hero .hero-promise{display:flex;justify-content:center} /* faint vertical rule / watermark flourish for brief & counsel */ .hero-mark{position:absolute;inset:0;pointer-events:none;opacity:.5} :root[data-direction="brief"] .hero{border-bottom:1px solid var(--rule)} /* ============================================================ PROBLEM / STAKES — prose blocks ============================================================ */ .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,6vw,90px);align-items:start} @media(max-width:840px){.split{grid-template-columns:1fr;gap:28px}} .split h2{font-size:clamp(28px,3.6vw,44px);letter-spacing:-.025em} .split .body-lg{font-size:clamp(18px,1.6vw,20px);line-height:1.7;color:var(--body)} .split .body-lg p + p{margin-top:18px} .pull{font-family:var(--f-head);font-weight:600;color:var(--ink); font-size:clamp(20px,2vw,24px);line-height:1.4;letter-spacing:-.015em} /* brief direction: numbered, sticky heading column */ :root[data-direction="brief"] .split h2{position:sticky;top:104px} /* ============================================================ WHAT WE DO — 3 cards ============================================================ */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px} @media(max-width:860px){.cards{grid-template-columns:1fr}} .card{ background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md); padding:34px 30px 32px;transition:transform .25s,box-shadow .3s,border-color .3s; position:relative;overflow:hidden; } :root[data-direction="counsel"] .card{background:var(--surface); box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .card:hover{transform:translateY(-3px);border-color:var(--rule-strong); box-shadow:0 18px 40px -22px rgba(20,26,40,.4)} :root[data-direction="counsel"] .card:hover{ box-shadow:0 22px 50px -24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)} .card .k{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.16em; color:var(--accent-on-light);text-transform:uppercase;margin-bottom:20px; display:flex;align-items:center;gap:8px;font-weight:500} .card h3{font-size:21px;margin-bottom:12px;letter-spacing:-.02em} .card p{font-size:16.5px;line-height:1.6;color:var(--body)} /* brief: no card chrome, ruled rows instead */ :root[data-direction="brief"] .cards{grid-template-columns:1fr;gap:0;margin-top:40px} :root[data-direction="brief"] .card{background:transparent;border:none; border-top:1px solid var(--rule);border-radius:0;padding:30px 0; display:grid;grid-template-columns:200px 1fr;gap:30px} :root[data-direction="brief"] .card:hover{transform:none;box-shadow:none} :root[data-direction="brief"] .card:last-child{border-bottom:1px solid var(--rule)} @media(max-width:680px){:root[data-direction="brief"] .card{grid-template-columns:1fr;gap:10px}} /* ============================================================ HOW IT WORKS — numbered steps ============================================================ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:54px} @media(max-width:760px){.steps{grid-template-columns:1fr}} .step{padding:30px 26px 30px 0;border-top:2px solid var(--ink);position:relative} :root[data-direction="counsel"] .step{border-top-color:var(--mint)} :root[data-direction="chambers"] .step{border-top-color:var(--navy)} .step .n{font-family:var(--f-mono);font-size:13px;color:var(--accent-on-light); font-weight:600;letter-spacing:.1em;margin-bottom:18px;display:block} .step h3{font-size:19px;margin-bottom:10px;letter-spacing:-.02em} .step p{font-size:15.5px;line-height:1.55;color:var(--body)} /* ============================================================ WHY REPSPERT — banded section ============================================================ */ .band{background:var(--surface-2);border-block:1px solid var(--rule)} :root[data-direction="counsel"] .band{ background:linear-gradient(180deg,rgba(34,43,60,.6),rgba(30,38,52,.3))} .why-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,6vw,80px); align-items:center} @media(max-width:840px){.why-grid{grid-template-columns:1fr;gap:34px}} .why-grid h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:22px} .trust-list{display:flex;flex-direction:column;gap:2px; border-top:1px solid var(--rule)} .trust-item{display:flex;gap:16px;align-items:flex-start;padding:20px 0; border-bottom:1px solid var(--rule)} .trust-item img{height:20px;margin-top:3px;flex-shrink:0} .trust-item .t{font-family:var(--f-head);font-weight:600;color:var(--ink); font-size:17px;letter-spacing:-.01em;margin-bottom:3px} .trust-item .d{font-size:15.5px;color:var(--body);line-height:1.5} /* ============================================================ FAQ ============================================================ */ .faq-list{margin-top:46px;border-top:1px solid var(--rule)} .faq{border-bottom:1px solid var(--rule)} .faq summary{list-style:none;cursor:pointer;padding:26px 0; display:flex;justify-content:space-between;gap:24px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.02em;font-weight:600} .faq .sign{width:22px;height:22px;flex-shrink:0;position:relative;margin-top:4px} .faq .sign::before,.faq .sign::after{content:"";position:absolute;background:var(--accent-on-light); transition:transform .3s cubic-bezier(.2,.7,.3,1)} .faq .sign::before{left:0;right:0;top:10px;height:2px} .faq .sign::after{top:0;bottom:0;left:10px;width:2px} .faq[open] .sign::after{transform:scaleY(0)} .faq .ans{overflow:hidden;max-height:0;transition:max-height .35s ease} .faq[open] .ans{max-height:320px} .faq .ans p{padding-bottom:26px;font-size:17px;line-height:1.6;color:var(--body); max-width:70ch} /* ============================================================ FINAL CTA + FORM ============================================================ */ .final{position:relative} :root[data-direction="counsel"] .final{background:transparent} .final-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px); align-items:start} @media(max-width:840px){.final-grid{grid-template-columns:1fr;gap:40px}} .final h2{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.03em;margin-bottom:20px} .final .sub{font-size:clamp(18px,2vw,21px);color:var(--body);max-width:46ch} .form-card{background:var(--surface);border:1px solid var(--rule); border-radius:var(--r-lg);padding:clamp(26px,3vw,40px); box-shadow:0 26px 60px -34px rgba(20,26,40,.42)} :root[data-direction="brief"] .form-card{border-radius:var(--r-sm)} .field{margin-bottom:20px} .field label{display:block;font-family:var(--f-head);font-weight:600; font-size:14px;color:var(--ink);margin-bottom:8px;letter-spacing:-.005em} .field input,.field textarea{ width:100%;font-family:var(--f-body);font-size:16px;color:var(--ink); background:var(--surface-2);border:1px solid var(--rule-strong); border-radius:var(--r-sm);padding:13px 15px;transition:border-color .2s,box-shadow .2s; } .field textarea{resize:vertical;min-height:104px;line-height:1.5} .field input::placeholder,.field textarea::placeholder{color:var(--muted)} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-on-light); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-on-light) 22%,transparent)} .form-card .btn-primary{width:100%;justify-content:center;margin-top:6px} .form-privacy{font-size:13.5px;color:var(--muted);margin-top:16px;line-height:1.5; display:flex;gap:9px;align-items:flex-start} .form-privacy img{height:15px;margin-top:2px;flex-shrink:0;opacity:.9} .form-sent{display:none;text-align:center;padding:30px 10px} .form-sent.show{display:block} .form-sent img{height:40px;margin:0 auto 18px} .form-sent h3{font-size:24px;margin-bottom:10px} .form-sent p{color:var(--body);font-size:16.5px;max-width:36ch;margin-inline:auto} .form-card.is-sent form{display:none} /* email CTA (replaces form) */ .email-cta{text-align:left} .email-cta .email-check{height:38px;margin-bottom:20px} .email-cta h3{font-size:clamp(22px,2.4vw,27px);letter-spacing:-.02em;margin-bottom:12px} .email-cta > p{font-size:16.5px;line-height:1.6;color:var(--body);margin-bottom:26px;max-width:42ch} .email-cta .btn-primary{width:100%;justify-content:center} .email-cta .form-privacy{margin-top:18px} /* ============================================================ FOOTER ============================================================ */ .site-footer{background:var(--footer-bg);color:#C2C9D6; padding-block:clamp(48px,6vw,72px) 40px} .footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap; align-items:flex-start;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)} .footer-brand .brand-name{color:#fff;font-size:20px} .footer-brand .brand-by{color:#9AA3B4} .footer-brand .brand-seal{border-color:var(--mint)} .footer-brand .lede{color:#9AA3B4;font-size:16px;max-width:38ch;margin-top:18px} .footer-rep{display:flex;align-items:center;gap:10px;margin-top:22px} .footer-rep span{font-size:13px;color:#8C95A8} .footer-rep img{height:17px} .footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; padding-top:26px;font-size:13.5px;color:#7E8798;line-height:1.6} .footer-bottom p{max-width:64ch} .disclaimer{font-size:12.5px;color:#6B7488;line-height:1.6;max-width:none; margin-top:6px} /* ---------- Reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* tweaks mount sits above everything */ #tweaks-root{position:relative;z-index:100}