/* ============================================
   SC Lexys — Design tokens
   ============================================ */
:root{
  --ink: #101010;
  --ink-soft: #3a3a3a;
  --ink-mute: #6f6f6c;
  --paper: #F7F6F2;
  --paper-raised: #FFFFFF;
  --line: #DDDBD3;
  --line-strong: #101010;
  --accent: #101010;

  --font-display: 'Space Grotesk', 'Nexa Bold', 'Lemon Milk', sans-serif;
  --font-body: 'Source Serif 4', 'Georgia', serif;

  --radius: 2px;
  --wrap: 1180px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --ink: #F5F4F0;
  --ink-soft: #D6D4CC;
  --ink-mute: #9A988F;
  --paper: #0B0B0A;
  --paper-raised: #151513;
  --line: #2A2A26;
  --line-strong: #F5F4F0;
  --accent: #F5F4F0;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--transition), color var(--transition);
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1{ font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2{ font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
a{ color: inherit; }

.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section{ padding: 88px 0; }
.eyebrow{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .75rem;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.text-link{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 2px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:200; font-family:var(--font-display);
}
.skip-link:focus{ left: 16px; top: 16px; }

/* Buttons */
.btn{
  display:inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  text-decoration:none;
  padding: 14px 26px;
  border-radius: var(--radius);
  border: 2px solid var(--line-strong);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn--primary{ background: var(--ink); color: var(--paper); }
.btn--primary:hover{ transform: translateY(-2px); }
.btn--outline{ background: transparent; color: var(--ink); }
.btn--outline:hover{ background: var(--ink); color: var(--paper); }
.btn--ghost{ border-color: transparent; padding: 8px 4px; }
.btn:focus-visible, a:focus-visible, button:focus-visible{
  outline: 3px solid var(--ink); outline-offset: 3px;
}

/* ============================================
/* ============================================
   About page cover (full-screen logo)
   ============================================ */
.about-cover{
  height: 100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: var(--paper); position:relative;
}
.about-cover-mark{ width: clamp(340px, 50vw, 860px); height:auto; }
.about-cover-mark--dark{ display:none; }
[data-theme="dark"] .about-cover-mark--light{ display:none; }
[data-theme="dark"] .about-cover-mark--dark{ display:block; }
.about-cover-scroll{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong);
  background:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.about-cover-scroll span{
  width:7px; height:7px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform: rotate(45deg); margin-top:-4px;
  animation: aboutCoverBounce 1.8s ease-in-out infinite;
}
@keyframes aboutCoverBounce{
  0%,100%{ margin-top:-4px; opacity:.6; }
  50%{ margin-top:0px; opacity:1; }
}

/* ============================================
   Header
   ============================================ */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.has-cover .site-header{ transform: translateY(-100%); opacity: 0; }
.has-cover .site-header.is-revealed{ transform: translateY(0); opacity: 1; }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 24px;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand-mark{ height: 40px; width:auto; display:block; }
.brand-mark--dark{ display:none; }
[data-theme="dark"] .brand-mark--light{ display:none; }
[data-theme="dark"] .brand-mark--dark{ display:block; }
.brand-word{ height: 22px; width:auto; display:block; }
.brand-word--dark{ display:none; }
[data-theme="dark"] .brand-word--light{ display:none; }
[data-theme="dark"] .brand-word--dark{ display:block; }

.main-nav{ display:flex; gap: 32px; }
.main-nav a{
  font-family: var(--font-display); font-weight: 500; font-size: .93rem;
  text-decoration:none; color: var(--ink-soft);
  transition: color var(--transition);
}
.main-nav a:hover{ color: var(--ink); }

.header-actions{ display:flex; align-items:center; gap:18px; }
.header-call{ font-size: .88rem; white-space:nowrap; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.theme-toggle__icon{
  width:16px; height:16px; border-radius:50%;
  background: var(--ink);
  box-shadow: inset -5px -2px 0 0 var(--paper);
  transition: box-shadow var(--transition);
}
[data-theme="dark"] .theme-toggle__icon{ box-shadow: inset 5px 2px 0 0 var(--paper); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; width:34px; height:28px;
  background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{ height:2px; background:var(--ink); display:block; }

/* ============================================
   Hero
   ============================================ */
.hero{
  position:relative; overflow:hidden;
  padding: 100px 0 90px;
  border-bottom: 1px solid var(--line);
}
.hero-inner{ max-width: 720px; }
.hero-sub{ font-size: 1.1rem; max-width: 560px; }
.hero-note{ font-size: .85rem; color: var(--ink-mute); font-family: var(--font-display); }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin: 28px 0 20px; }

/* ============================================
   Trust strip
   ============================================ */
.trust-strip{ border-bottom: 1px solid var(--line); background: var(--paper-raised); }
.trust-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 28px;
  padding: 40px 24px;
}
.trust-grid strong{
  display:block; font-family: var(--font-display); font-size: .95rem; margin-bottom:4px;
}
.trust-grid span{ font-size: .88rem; color: var(--ink-mute); }
@media (max-width: 800px){ .trust-grid{ grid-template-columns: 1fr 1fr; } }

/* ============================================
   About teaser
   ============================================ */
.split{ display:grid; grid-template-columns: 260px 1fr; gap: 64px; align-items:center; }
.split--reverse{ grid-template-columns: 1fr 260px; }
.split--reverse .split-content{ order: 1; }
.split--reverse .split-media{ order: 2; }
.split-media{ display:flex; align-items:center; justify-content:center; }
.split-mark{ width: 180px; }
.split-mark--dark{ display:none; }
[data-theme="dark"] .split-mark--light{ display:none; }
[data-theme="dark"] .split-mark--dark{ display:block; }
.split-content p{ max-width: 560px; }
.split-single .split-content p{ max-width: 720px; }
@media (max-width: 800px){ .split{ grid-template-columns: 1fr; } .split-media{ order:-1; } }

/* ============================================
   Practice area cards
   ============================================ */
.card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 36px 0; }
.practice-tpd-note{ font-size: .92rem; color: var(--ink-mute); margin-top: -8px; }
.pa-card{
  display:block; text-decoration:none; padding: 32px 26px;
  border: 1px solid var(--line); background: var(--paper-raised);
  transition: border-color var(--transition), transform var(--transition);
}
.pa-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.pa-card__index{
  font-family: var(--font-display); font-weight:700; color: var(--ink-mute); font-size:.85rem;
}
.pa-card h3{ margin: 14px 0 10px; }
.pa-card p{ font-size: .95rem; }
@media (max-width: 860px){ .card-grid{ grid-template-columns: 1fr; } }

/* ============================================
   Process
   ============================================ */
.process-list{ list-style:none; margin: 36px 0 0; padding:0; display:grid; gap:0; }
.process-list li{
  display:grid; grid-template-columns: 70px 1fr; gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.process-list li:last-child{ border-bottom: 1px solid var(--line); }
.process-num{ font-family: var(--font-display); font-weight:700; font-size:1.1rem; color: var(--ink-mute); }
.process-list h3{ margin-bottom: 6px; }
.process-list p{ margin:0; font-size:.96rem; }

/* ============================================
   FAQ teaser
   ============================================ */
.mini-faq{ margin: 30px 0 34px; border-top: 1px solid var(--line); }
.mini-faq details{ border-bottom: 1px solid var(--line); padding: 18px 0; }
.mini-faq summary{
  font-family: var(--font-display); font-weight:500; cursor:pointer; font-size:1.02rem;
  list-style:none; position:relative; padding-right: 30px;
}
.mini-faq summary::-webkit-details-marker{ display:none; }
.mini-faq summary::after{
  content:'+'; position:absolute; right:0; top:0; font-size:1.3rem;
  font-family: var(--font-display);
}
.mini-faq details[open] summary::after{ content:'\2212'; }
.mini-faq p{ margin: 12px 0 0; font-size: .96rem; max-width: 640px; }

/* ============================================
   Blog teaser
   ============================================ */
.card-grid--blog{ grid-template-columns: repeat(3,1fr); }
.blog-card{
  display:block; text-decoration:none; padding: 26px; border: 1px solid var(--line);
  background: var(--paper-raised); transition: border-color var(--transition), transform var(--transition);
}
.blog-card:hover{ border-color: var(--line-strong); transform: translateY(-4px); }
.blog-card__tag{
  font-family: var(--font-display); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.1em; color: var(--ink-mute);
}
.blog-card h3{ margin: 10px 0 8px; font-size: 1.05rem; }
.blog-card p{ font-size:.92rem; margin:0; }
@media (max-width: 860px){ .card-grid--blog{ grid-template-columns: 1fr; } }

/* ============================================
   Final CTA
   ============================================ */
.final-cta{ background: var(--ink); color: var(--paper); text-align:center; }
.final-cta h2, .final-cta p{ color: var(--paper); }
.final-cta-inner{ max-width: 640px; margin:0 auto; }
.final-cta .btn--primary{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.final-cta .btn--outline{ border-color: var(--paper); color: var(--paper); }
.final-cta .btn--outline:hover{ background: var(--paper); color: var(--ink); }
.final-cta .hero-actions{ justify-content:center; }

/* ============================================
   Footer
   ============================================ */
.site-footer{ background: var(--ink); color: var(--paper); padding: 64px 0 24px; }
.footer-simple{
  display:flex; align-items:center; gap: 20px; flex-wrap:wrap;
}
.footer-mark{ width: 44px; flex-shrink:0; }
.footer-simple p{ color:#9A988F; font-size:.88rem; margin:0; }
.footer-bottom{ border-top: 1px solid #2A2A26; margin-top: 32px; padding-top: 20px; }
.footer-bottom p{ color: #8C8A80; font-size: .8rem; margin:0; }

/* ============================================
   Claim-check form page
   ============================================ */
.claim-check{ padding-top: 60px; }
.claim-check-inner{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items:start; }
.claim-logo-mark{ width: clamp(160px, 16vw, 220px); height:auto; margin-bottom: 28px; }
.claim-logo-mark--dark{ display:none; }
[data-theme="dark"] .claim-logo-mark--light{ display:none; }
[data-theme="dark"] .claim-logo-mark--dark{ display:block; }
.claim-check-intro p{ max-width: 420px; }
.claim-check-points{ list-style:none; padding:0; margin: 22px 0 0; display:grid; gap:10px; }
.claim-check-points li{
  font-family: var(--font-display); font-size:.88rem; color: var(--ink-soft);
  padding-left: 22px; position:relative;
}
.claim-check-points li::before{
  content:''; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%;
  background: var(--ink);
}

.claim-form{
  background: var(--paper-raised); border: 1px solid var(--line); padding: 36px;
}
.hidden-field{ position:absolute; left:-9999px; }
.field{ margin-bottom: 20px; display:flex; flex-direction:column; gap:8px; }
.field label{ font-family: var(--font-display); font-size:.86rem; font-weight:500; }
.field-optional{ font-weight:400; color: var(--ink-mute); text-transform:none; letter-spacing:0; font-family: var(--font-body); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size: 1rem; padding: 12px 14px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid var(--ink); outline-offset: 1px;
}
.claim-submit{ width:100%; text-align:center; border:none; cursor:pointer; margin-top: 6px; }
.form-fineprint{ font-size: .78rem; color: var(--ink-mute); margin: 14px 0 0; }

@media (max-width: 860px){
  .claim-check-inner{ grid-template-columns: 1fr; }
}

/* ============================================
   Inner page hero (About / Practice Areas / FAQ / Blog)
   ============================================ */
.about-hero{ padding-bottom: 40px; }
.about-hero .hero-sub{ max-width: 640px; }

/* Practice area detail rows */
.practice-detail{ border-top: 1px solid var(--line); padding: 64px 0; }
.practice-detail-grid{ display:grid; grid-template-columns: 220px 1fr; gap: 48px; }
.practice-detail-grid h2{ margin-top: 10px; }
.practice-detail-grid p{ max-width: 640px; }
@media (max-width: 800px){ .practice-detail-grid{ grid-template-columns: 1fr; } }

/* Full FAQ list */
.mini-faq--full{ max-width: 760px; margin: 0; }

/* Blog */
.blog-filters{ display:flex; gap:10px; margin-top: 26px; }
.filter-chip{
  font-family: var(--font-display); font-size:.82rem; font-weight:500;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); cursor:pointer;
}
.filter-chip.is-active{ background: var(--ink); color: var(--paper); }
.blog-listing{ padding-top: 20px; }
.blog-note{ font-size: .85rem; color: var(--ink-mute); text-align:center; margin-top: 20px; }

/* Contact page */
.contact-details{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.contact-details h4{
  font-family: var(--font-display); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.1em; color: var(--ink-mute); margin: 0 0 6px;
}
.contact-details p{ margin:0; font-size:.95rem; }
@media (max-width: 500px){ .contact-details{ grid-template-columns: 1fr; } }

/* ============================================
   Thank-you page
   ============================================ */
.thank-you{ padding: 140px 0; text-align:center; }
.thank-you-inner{ max-width: 560px; margin: 0 auto; }
.thank-you .hero-actions{ justify-content:center; }

@media (max-width: 900px){
  .main-nav{
    position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw); height:100vh;
    background: var(--paper); flex-direction:column; padding: 100px 32px 32px;
    transform: translateX(100%); transition: transform var(--transition);
    border-left: 1px solid var(--line); gap: 26px;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .nav-toggle{ display:flex; }
  .header-call{ display:none; }
}