* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #f7f7f4; }
body { margin: 0; background: #f7f7f4; color: #0a0a0a; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.45; cursor: none; overflow-x: hidden; }
a { color: inherit; text-decoration: none; cursor: none; }
a:hover { color: inherit; }
::selection { background: #0a0a0a; color: #f7f7f4; }
.cursor { position: fixed; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #0a0a0a; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .2s ease, height .2s ease, background .2s ease; }
.cursor.is-hovering { width: 18px; height: 18px; background: #f7f7f4; mix-blend-mode: difference; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.button { display: inline-flex; align-items: center; gap: 18px; border-bottom: 1px solid currentColor; padding-bottom: 7px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; transition: gap .3s ease; background: none; border-left: 0; border-right: 0; border-top: 0; color: inherit; font-family: inherit; }
.button:hover { gap: 28px; }
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: rgba(247,247,244,.9); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(10,10,10,.12); }
.topbar-in { width: min(100%, 1440px); margin: 0 auto; padding: 14px clamp(20px, 3vw, 48px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; font-size: 13px; letter-spacing: -.01em; }
.lang { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.lang button { background: none; border: 0; padding: 0 2px; font: inherit; color: #9a9a96; cursor: none; }
.lang button[data-on="1"] { color: #0a0a0a; text-decoration: underline; text-underline-offset: 4px; }
.burger { display: none; width: 40px; height: 40px; border: 1px solid rgba(10,10,10,.24); border-radius: 50%; background: none; place-items: center; cursor: none; }
.burger span { display: block; width: 16px; height: 1px; background: #0a0a0a; box-shadow: 0 -4px 0 #0a0a0a, 0 4px 0 #0a0a0a; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px); background: #0a0a0a; color: #f7f7f4; z-index: 600; transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1); padding: 26px 26px 40px; display: flex; flex-direction: column; gap: 26px; }
.drawer[data-open="1"] { transform: translateX(0); }
.scrim { position: fixed; inset: 0; background: rgba(10,10,10,.5); opacity: 0; pointer-events: none; transition: opacity .4s ease; z-index: 550; }
.scrim[data-open="1"] { opacity: 1; pointer-events: auto; }
.svc-wrap { position: relative; perspective: 1100px; }
.svc-glow { position: absolute; inset: 6% -6% -12%; z-index: 0; opacity: 0; filter: blur(42px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); transform: translateY(6px) scale(.94); pointer-events: none; }
.svc-wrap:hover .svc-glow { opacity: 1; transform: translateY(18px) scale(1); }
.svc-card { position: relative; z-index: 1; height: 100%; overflow: hidden; border-radius: 18px; border: 1px solid rgba(10,10,10,.14); padding: clamp(26px, 2.6vw, 40px); background: #f2f2ee; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .35s ease; will-change: transform; }
.svc-wrap:hover .svc-card { box-shadow: 0 34px 70px -34px rgba(120,20,10,.55), 0 4px 14px -6px rgba(10,10,10,.25); border-color: rgba(10,10,10,.26); }
.track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 10px; }
.track::-webkit-scrollbar { display: none; }
.track > * { scroll-snap-align: start; flex: 0 0 clamp(260px, 30%, 380px); }
.car-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(10,10,10,.24); background: transparent; color: #0a0a0a; font-size: 15px; display: grid; place-items: center; cursor: none; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.car-btn:hover { background: #0a0a0a; color: #f7f7f4; border-color: #0a0a0a; }
.portrait { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(10,10,10,.14); aspect-ratio: 4 / 5; filter: grayscale(1) contrast(1.05); transition: filter .6s ease, transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s ease; }
.portrait:hover { filter: grayscale(0) saturate(1.12); transform: translateY(-6px); box-shadow: 0 34px 70px -34px rgba(120,20,10,.5); }
.modal-wrap { position: fixed; inset: 0; z-index: 750; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.modal-wrap[data-open="1"] { opacity: 1; pointer-events: auto; }
.modal-card { max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; background: #f7f7f4; border: 1px solid rgba(10,10,10,.14); border-radius: 18px; padding: clamp(28px, 4vw, 44px); transform: translateY(14px); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.modal-wrap[data-open="1"] .modal-card { transform: translateY(0); }
.wrap { width: min(100%, 1440px); margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 860px) {
  body { cursor: auto; }
  a, .car-btn, .burger, .lang button { cursor: pointer; }
  .cursor { display: none; }
  .topbar-in { grid-template-columns: 1fr auto; }
  .d-only { display: none !important; }
  .burger { display: grid; }
  .m-hero { padding-top: 12vh !important; }
  .m-h1 { font-size: clamp(48px, 13vw, 86px) !important; }
  .m-hero-bottom { grid-template-columns: 1fr !important; }
  .m-hero-bottom .button { justify-self: start !important; }
  .m-2col { grid-template-columns: 1fr !important; gap: 22px !important; }
  .m-cards { grid-template-columns: 1fr !important; }
  .m-cta-bottom { flex-direction: column !important; align-items: flex-start !important; }
  .m-footer { grid-template-columns: 1fr !important; gap: 16px !important; text-align: left !important; }
  .m-footer-links { justify-content: flex-start !important; }
  .m-footer-copy { text-align: left !important; }
  .track > * { flex: 0 0 84% !important; }
  .a-2col { grid-template-columns: 1fr !important; gap: 34px !important; }
  .a-h1 { font-size: clamp(44px, 13vw, 76px) !important; }
}