/* ============================================================
   Dr. Julian Voss — Rechtsanwalt
   Warm taupe / near-black editorial, reference-matched
   ============================================================ */

:root {
  --bg:        #eeece8;
  --bg-2:      #e7e4df;
  --ink:       #26221d;
  --ink-2:     #4c463e;
  --ink-soft:  #6d675e;
  --taupe:     #9d8a68;
  --taupe-lt:  #b7a684;
  --taupe-dk:  #8a7857;
  --taupe-x:   #7d6c4d;
  --cream:     #f3eee4;
  --dark:      #2a2621;
  --dark-2:    #1f1c18;
  --line:      rgba(38,34,29,.12);
  --radius:    22px;
  --radius-s:  16px;
  --shadow:    0 30px 60px -30px rgba(38,34,29,.35);
  --ff-disp:   'Archivo Expanded','Archivo',system-ui,sans-serif;
  --ff:        'Archivo',system-ui,sans-serif;
  --ff-body:   'Inter',system-ui,sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--ff-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.eyebrow {
  font-family:var(--ff-body);
  font-size:.8rem; color:var(--ink-soft);
  letter-spacing:.02em; margin-bottom:.9rem;
}
.eyebrow.light { color:rgba(243,238,228,.75); }

.section-title {
  font-family:var(--ff);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.6vw,2.9rem);
  line-height:1.05; color:var(--ink);
}

/* ---------- layout shell ---------- */
.hero, .about, .services, .approach, .why, .contact {
  max-width:1180px; margin:0 auto; padding:0 24px;
}

/* ============ HERO ============ */
.hero { padding-top:26px; padding-bottom:8px; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:34px;
}
.brand { font-family:var(--ff); font-weight:600; font-size:1.02rem; }
.nav-pills { display:flex; gap:12px; }
.pill {
  font-family:var(--ff); font-weight:600;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; border:1.5px solid var(--ink); border-radius:999px;
  transition:.22s ease;
}
.pill:hover { background:var(--ink); color:var(--bg); }
.menu-toggle { display:none; flex-direction:column; gap:5px; padding:8px; }
.menu-toggle span { width:24px; height:2px; background:var(--ink); border-radius:2px; }

.hero-name {
  font-family:var(--ff-disp);
  font-weight:900; letter-spacing:-.03em;
  font-size:clamp(2.7rem,10.5vw,7.6rem);
  line-height:.9; text-transform:uppercase;
  margin-bottom:26px;
}

.hero-figure {
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/8.4; background:var(--dark-2); box-shadow:var(--shadow);
}
.hero-figure img {
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
  filter:brightness(.74) contrast(1.06) saturate(.9) sepia(.14);
}
.hero-figure::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(24,20,15,.62) 0%, rgba(24,20,15,.12) 38%, rgba(20,17,12,.82) 100%),
    radial-gradient(120% 90% at 50% 35%, rgba(0,0,0,0) 40%, rgba(20,17,12,.55) 100%);
}
.hero-figure .hero-stats { z-index:2; }
.hero-stats {
  position:absolute; right:20px; bottom:20px;
  display:flex; align-items:center; gap:22px;
  padding:20px 30px; border-radius:18px;
  background:rgba(20,18,15,.55); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
}
.stat { text-align:center; color:var(--cream); line-height:1.1; }
.stat b { font-family:var(--ff); font-weight:800; font-size:1.45rem; display:block; }
.stat span { font-size:.7rem; opacity:.72; }
.stat-div { width:1px; height:34px; background:rgba(255,255,255,.18); }

.hero-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  margin-top:20px; margin-bottom:90px;
}
.hero-card {
  position:relative; aspect-ratio:3/2.05; border-radius:var(--radius);
  background:linear-gradient(150deg,var(--taupe-lt),var(--taupe-dk));
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:26px 28px; color:var(--cream);
  font-family:var(--ff); font-weight:700; font-size:1.15rem;
  letter-spacing:.06em; text-transform:uppercase;
  transition:.28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.hero-card:nth-child(1){ background:linear-gradient(150deg,#9d8a68,#7d6c4d); }
.hero-card:nth-child(2){ background:linear-gradient(150deg,#b0a17e,#8a7857); }
.hero-card:nth-child(3){ background:linear-gradient(150deg,#c2b494,#9d8a68); }
.hero-card i { font-style:normal; font-size:1.4rem; transition:.28s; }
.hero-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.hero-card:hover i { transform:translate(6px,-6px); }

/* ============ ABOUT ============ */
.about { padding-top:40px; padding-bottom:90px; }
.about .eyebrow { margin-bottom:.4rem; }
.about .section-title { margin-bottom:40px; }

.about-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:52px; align-items:start; }
.about-photo { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.about-photo img { width:100%; aspect-ratio:3/3.7; object-fit:cover; }

.about-hi {
  font-family:var(--ff); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.15rem,2.1vw,1.6rem); letter-spacing:-.01em;
  line-height:1.12; margin-bottom:20px;
}
.about-lead { color:var(--ink-2); font-size:1.02rem; max-width:52ch; }

.chips { display:flex; flex-wrap:wrap; gap:12px; margin:26px 0; }
.chip {
  background:var(--bg-2); border:1px solid var(--line);
  padding:12px 20px; border-radius:12px;
  font-size:.86rem; font-weight:500; color:var(--ink-2);
}

.about-points { list-style:none; border-top:1px solid var(--line); }
.about-points li {
  padding:20px 0; border-bottom:1px solid var(--line);
  color:var(--ink-2); font-size:.98rem; max-width:60ch;
}

.btn-dark {
  display:block; text-align:center; margin-top:30px;
  background:var(--dark); color:var(--cream);
  font-family:var(--ff); font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; font-size:.82rem;
  padding:22px; border-radius:14px; transition:.25s;
}
.btn-dark:hover { background:var(--dark-2); transform:translateY(-2px); }

/* ============ SERVICES / FLIP ============ */
.services { padding-bottom:90px; }
.services-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:36px;
}
.services-hint {
  background:var(--taupe-lt); color:var(--cream);
  border-radius:var(--radius-s); padding:22px 26px;
  font-size:.92rem; line-height:1.35; max-width:320px;
  display:flex; align-items:center; gap:18px;
}
.services-hint i { font-style:normal; margin-left:auto; opacity:.7; font-size:1.3rem; }

.flip-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

.flip {
  position:relative; aspect-ratio:1/1.28; perspective:1200px; text-align:left; padding:0;
}
.flip-inner {
  position:absolute; inset:0;
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.flip:hover .flip-inner, .flip.is-flipped .flip-inner { transform:rotateY(180deg); }
.flip-face {
  position:absolute; inset:0; backface-visibility:hidden;
  border-radius:var(--radius-s); padding:24px;
  display:flex; flex-direction:column;
}
.flip-front {
  background:linear-gradient(155deg,#a4926f,#867453);
  color:var(--cream);
}
.flip-front em {
  font-style:normal; font-size:.76rem; opacity:.7; margin-bottom:auto;
}
.flip-front strong {
  font-family:var(--ff); font-weight:600; font-size:1.28rem;
  line-height:1.14; letter-spacing:-.01em; margin-top:12px;
}
.flip-mark {
  position:absolute; right:20px; bottom:20px;
  width:34px; height:34px; border-radius:9px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22);
  display:grid; place-items:center; font-style:normal; font-size:1rem;
}
.flip-back {
  background:var(--dark); color:var(--cream);
  transform:rotateY(180deg);
  justify-content:center; font-size:.96rem; line-height:1.42;
}

.flip-photo {
  border-radius:var(--radius-s); background-size:cover; background-position:center;
  position:relative; aspect-ratio:1/1.28;
}
.flip-photo::after {
  content:""; position:absolute; inset:0; border-radius:var(--radius-s);
  background:linear-gradient(180deg,rgba(125,108,77,.35),rgba(42,38,33,.55));
  mix-blend-mode:multiply;
}

/* ============ APPROACH / CASES ============ */
.approach {
  padding-bottom:90px;
  display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch;
}
.approach-panel {
  background:linear-gradient(160deg,var(--taupe-lt),var(--taupe-dk));
  border-radius:var(--radius); padding:38px;
  display:flex; flex-direction:column; gap:18px;
}
.approach-title {
  font-family:var(--ff); font-weight:700; color:var(--cream);
  font-size:clamp(1.3rem,2.3vw,1.85rem); line-height:1.15;
  letter-spacing:-.01em; margin-bottom:8px;
}
.case {
  background:var(--cream); border-radius:16px; padding:24px 26px;
}
.case-tag {
  display:inline-block; font-family:var(--ff); font-weight:600;
  font-size:.9rem; color:var(--taupe-x); margin-bottom:12px;
}
.case p { color:var(--ink-2); font-size:.94rem; line-height:1.5; }

.approach-photo {
  position:relative; border-radius:var(--radius); overflow:hidden;
  min-height:420px; box-shadow:var(--shadow);
}
.approach-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.approach-photo::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,18,15,.15) 30%,rgba(20,18,15,.9));
}
.approach-photo .eyebrow, .approach-photo .approach-quote {
  position:relative; z-index:2; padding:0 32px;
}
.approach-photo .eyebrow { position:absolute; top:28px; left:0; }
.approach-photo .approach-quote {
  position:absolute; bottom:32px; left:0; right:0;
  color:var(--cream); font-family:var(--ff); font-weight:500;
  font-size:1.15rem; line-height:1.32;
}

/* ============ WHY / STEPS ============ */
.why { padding-bottom:90px; }
.why .eyebrow { margin-bottom:.4rem; }

.why-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:36px;
}
.steps-btns { display:flex; gap:12px; flex-shrink:0; }
.step-arrow {
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid var(--ink); font-size:1.2rem; color:var(--ink);
  display:grid; place-items:center; transition:.22s ease;
}
.step-arrow:hover:not(:disabled) { background:var(--ink); color:var(--bg); transform:translateY(-2px); }
.step-arrow:disabled { opacity:.25; cursor:default; }

.steps {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(288px,340px);
  gap:20px; overflow-x:auto; padding-bottom:4px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  scroll-behavior:smooth; cursor:grab; user-select:none;
}
.steps.dragging { cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.steps::-webkit-scrollbar { display:none; }
.step {
  scroll-snap-align:start;
  background:linear-gradient(160deg,var(--taupe-lt),var(--taupe-dk));
  border-radius:var(--radius); padding:32px; min-height:392px;
  display:flex; flex-direction:column; color:var(--cream);
  transition:transform .3s ease, box-shadow .3s ease;
}
.step:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.step * { pointer-events:none; }

.steps-track {
  margin-top:26px; height:3px; border-radius:3px;
  background:rgba(38,34,29,.12); overflow:hidden;
  max-width:340px;
}
.steps-bar {
  display:block; height:100%; width:20%; border-radius:3px;
  background:var(--taupe-dk); transition:width .15s ease;
}
.step-no {
  font-family:var(--ff); font-weight:600; font-size:.85rem;
  opacity:.6; margin-bottom:auto;
}
.step h3 {
  font-family:var(--ff); font-weight:600; font-size:1.45rem;
  letter-spacing:-.01em; margin:20px 0 14px;
}
.step p { font-size:.94rem; line-height:1.5; opacity:.9; }

/* ============ CONTACT ============ */
.contact {
  padding-bottom:70px;
  display:grid; grid-template-columns:1fr 1.05fr; gap:22px; align-items:stretch;
}
.contact-photo {
  position:relative; border-radius:var(--radius); overflow:hidden;
  min-height:520px; box-shadow:var(--shadow);
}
.contact-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.messengers {
  position:absolute; left:20px; right:20px; bottom:20px; z-index:2;
  display:flex; gap:12px; flex-wrap:wrap;
}
.msg {
  background:var(--taupe-lt); color:var(--cream);
  padding:14px 20px; border-radius:12px; font-weight:600; font-size:.9rem;
  display:inline-flex; align-items:center; gap:10px; transition:.2s;
}
.msg i { font-style:normal; opacity:.8; }
.msg:hover { background:var(--taupe-dk); transform:translateY(-2px); }

.contact-form {
  background:linear-gradient(160deg,var(--taupe-lt),var(--taupe-dk));
  border-radius:var(--radius); padding:44px 42px;
  display:flex; flex-direction:column;
}
.contact-form h2 {
  font-family:var(--ff); font-weight:700; color:var(--cream);
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.1;
  letter-spacing:-.01em; margin-bottom:16px;
}
.contact-lead { color:rgba(243,238,228,.82); font-size:.95rem; margin-bottom:26px; max-width:46ch; }
.contact-form input, .contact-form textarea {
  background:var(--cream); border:1.5px solid transparent; border-radius:999px;
  padding:18px 24px; font-family:var(--ff-body); font-size:.96rem; color:var(--ink);
  margin-bottom:14px; transition:.2s; resize:none;
}
.contact-form textarea { border-radius:20px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color:var(--ink-soft); }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--dark); }
.btn-submit {
  background:var(--dark); color:var(--cream); border-radius:999px;
  padding:19px; font-family:var(--ff); font-weight:600; font-size:.98rem;
  margin-top:4px; transition:.22s;
}
.btn-submit:hover { background:var(--dark-2); transform:translateY(-2px); }
.consent {
  display:flex; gap:12px; align-items:flex-start; margin-top:18px;
  font-size:.78rem; color:rgba(243,238,228,.8); line-height:1.4;
}
.consent input { margin-top:2px; accent-color:var(--dark); flex-shrink:0; }

/* ============ FOOTER ============ */
.footer {
  max-width:1180px; margin:0 auto; padding:30px 24px 50px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 30px; align-items:center;
  font-size:.8rem; color:var(--ink-soft);
}
.footer a:hover { color:var(--ink); }
.footer span:last-child { margin-left:auto; }

/* ============ REVEAL ============ */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;} *{scroll-behavior:auto;}
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .nav-pills { display:none; }
  .menu-toggle { display:flex; }
  .nav-pills.open {
    display:flex; position:absolute; top:74px; right:24px; left:24px;
    flex-direction:column; background:var(--bg-2); padding:16px;
    border-radius:16px; box-shadow:var(--shadow); z-index:40;
  }
  .hero-figure { aspect-ratio:4/4.4; }
  .hero-figure img { object-position:center 20%; }
  .hero-stats { left:16px; right:16px; justify-content:space-between; padding:16px; gap:8px; }
  .hero-stats .stat b { font-size:1.15rem; }
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .flip-grid { grid-template-columns:repeat(2,1fr); }
  .approach, .contact { grid-template-columns:1fr; }
  .approach-photo { min-height:360px; }
  .why-head { flex-direction:column; align-items:flex-start; gap:22px; }
  .steps-btns { align-self:flex-end; }
}
@media (max-width:560px){
  .hero-cards { grid-template-columns:1fr; gap:14px; }
  .hero-card { aspect-ratio:auto; padding:22px; }
  .flip-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .flip-photo:nth-of-type(1){ display:none; }
  .services-head { flex-direction:column; }
  .contact-form { padding:32px 24px; }
  .footer span:last-child { margin-left:0; }
}