* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: #FAF8F3; color: #17140F; font-family: "Zen Kaku Gothic New", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #17140F; text-decoration: none; }
  a:hover { color: #A8402E; }
  input, textarea, button, select { font-family: inherit; }
  ::selection { background: #A8402E; color: #FAF8F3; }
  @keyframes vjpUp { from { opacity: 0; transform: translateY(115%); } to { opacity: 1; transform: translateY(0); } }
  @keyframes vjpFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes vjpScroll { 0% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(9px); opacity: 1; } 100% { transform: translateY(0); opacity: 0.2; } }
  .vjp-line { display: block; overflow: hidden; }
  .vjp-line > span { display: block; animation: vjpUp 0.95s cubic-bezier(.16,.84,.3,1) both; }

  /* interactive states (replacing DC style-hover / style-focus) */
  .btn-outline:hover { background:#17140F; color:#FAF8F3; }
  .btn-dark:hover { background:#A8402E; color:#FAF8F3; }
  .link-underline:hover { color:#A8402E; border-color:#A8402E !important; }
  .cta-band:hover { background:#963622 !important; }
  .form-submit:hover { background:#D8A38E; }
  .field-input:focus { border-color:#D8A38E !important; }
  .lang-btn { background:none; border:none; padding:2px 0; font-size:12px; font-weight:400; letter-spacing:1px; cursor:pointer; color:#A29B8C; }
  .lang-btn.active { font-weight:600; color:#17140F; border-bottom:1px solid #17140F; }

  /* responsive nav (replacing DC matchMedia) */
  .nav-desktop { display:flex; align-items:center; gap:clamp(18px,2.2vw,30px); }
  .nav-mobile { display:none; align-items:center; gap:14px; }
  #mobileMenu { display:none; }
  #mobileMenu.open { display:block; }
  @media (max-width: 860px) {
    .nav-desktop { display:none; }
    .nav-mobile { display:flex; }
  }

  /* ---- intro loader ---- */
  #vjp-intro { position:fixed; inset:0; z-index:200; background:#FAF8F3; display:flex; align-items:center; justify-content:center; animation:introOut .9s ease 1.6s forwards; pointer-events:none; }
  #vjp-intro .intro-mark { display:flex; align-items:center; gap:13px; opacity:0; transform:translateY(8px); animation:introIn 1s cubic-bezier(.16,.84,.3,1) .15s forwards; }
  #vjp-intro .intro-mark span { font-family:'Cormorant Garamond',serif; font-size:clamp(24px,4vw,32px); font-weight:600; letter-spacing:.5px; color:#17140F; }
  #vjp-intro .intro-line { position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,#E0A82E,#A8402E); animation:introBar 1.5s cubic-bezier(.6,0,.2,1) .1s forwards; }
  @keyframes introIn { to { opacity:1; transform:none; } }
  @keyframes introBar { to { width:100%; } }
  @keyframes introOut { to { opacity:0; visibility:hidden; } }

  /* ---- scroll progress ---- */
  #vjp-progress { position:fixed; top:0; left:0; height:2px; width:0; background:linear-gradient(90deg,#E0A82E,#A8402E); z-index:120; }

  /* ---- custom cursor (fine pointer only, enabled by JS) ---- */
  #vjp-cursor, #vjp-cursor-dot { position:fixed; top:0; left:0; pointer-events:none; z-index:130; border-radius:50%; mix-blend-mode:difference; opacity:0; }
  #vjp-cursor { width:34px; height:34px; border:1px solid #FAF8F3; transform:translate(-50%,-50%); transition:width .25s, height .25s, background .25s; }
  #vjp-cursor-dot { width:5px; height:5px; background:#FAF8F3; transform:translate(-50%,-50%); }
  #vjp-cursor.hover { width:58px; height:58px; background:rgba(250,248,243,.18); }
  body.vjp-cursor-on, body.vjp-cursor-on a, body.vjp-cursor-on button { cursor:none; }

  /* ---- hero ken burns slideshow ---- */
  .hero-slide { position:absolute; top:-8%; left:0; width:100%; height:116%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; will-change:transform,opacity; }
  .hero-slide.active { opacity:1; }
  .hero-slide.kb { animation:kenburns 9s ease-out both; }
  @keyframes kenburns { from { transform:scale(1.08); } to { transform:scale(1); } }

  /* ---- char reveal headings ---- */
  .reveal-chars .ch { display:inline-block; opacity:0; transform:translateY(.55em); transition:opacity .55s cubic-bezier(.16,.84,.3,1), transform .55s cubic-bezier(.16,.84,.3,1); }
  .reveal-chars.in .ch { opacity:1; transform:none; }

  /* ---- card tilt ---- */
  .tilt-grid > div { transition:transform .35s cubic-bezier(.16,.84,.3,1); will-change:transform; }

  /* ---- exchange idle float ---- */
  @keyframes floaty { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
  .floaty { animation:floaty 6s ease-in-out infinite; }

  /* ---- arrow micro-motion ---- */
  .arrow { display:inline-block; transition:transform .25s; }
  a:hover .arrow, .cta-band:hover .arrow { transform:translateX(6px); }

  /* ---- mobile menu staggered ---- */
  #mobileMenu .menu-link { opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease; }
  #mobileMenu.open .menu-link { opacity:1; transform:none; }
  #mobileMenu.open .menu-link:nth-child(1){transition-delay:.05s}
  #mobileMenu.open .menu-link:nth-child(2){transition-delay:.1s}
  #mobileMenu.open .menu-link:nth-child(3){transition-delay:.15s}
  #mobileMenu.open .menu-link:nth-child(4){transition-delay:.2s}
  #mobileMenu.open .menu-link:nth-child(5){transition-delay:.25s}

  /* ---- mobile layout polish: clean single-column cards ---- */
  @media (max-width: 640px) {
    .tilt-grid { grid-template-columns:1fr !important; border-top:none !important; }
    .tilt-grid > div { border-right:none !important; padding-left:0 !important; padding-right:0 !important; }
    .tilt-grid > div + div { border-top:1px solid rgba(23,20,15,0.12); }
  }

  @media (prefers-reduced-motion: reduce) {
    .vjp-line > span { animation: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    #vjp-intro { display:none !important; }
    .hero-slide.kb { animation:none !important; }
    .floaty { animation:none !important; }
    .reveal-chars .ch { opacity:1 !important; transform:none !important; }
    #vjp-cursor, #vjp-cursor-dot { display:none !important; }
    #mobileMenu .menu-link { opacity:1 !important; transform:none !important; }
  }

/* ---- light-theme contact form (contact page) ---- */
.field-input-lt:focus { border-color:#A8402E !important; }
.form-submit-lt:hover { background:#A8402E; }
