/* WKP Homepage — styles
   Design tokens, resets, keyframes, responsive reflow, and interactive states.
   Layout/spacing lives as inline styles in index.html (kept 1:1 with the design source). */
:root{
    --ink:#17130f; --ink-soft:#211c17; --ink-2:#2b241d;
    --paper:#f4f0e9; --paper-2:#ebe5db; --paper-3:#e1d9cc;
    --line:#d9d1c3; --line-2:#cabfad; --line-dark:rgba(255,255,255,.12);
    --ink-70:#4c463d; --muted:#847b6f; --muted-2:#9b9184;
    --sage:#7d9e8a; --sage-mid:#6a8b77; --sage-deep:#4f6d5b; --sage-light:#a9c4b3;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Hanken Grotesk',system-ui,sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  img{ display:block; }
  a{ color:inherit; text-decoration:none; }
  @keyframes kenburns{ 0%{ transform:scale(1.05) translate3d(0,0,0);} 100%{ transform:scale(1.16) translate3d(0,-1.5%,0);} }
  @keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
  @keyframes livepulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(169,196,179,.55);} 50%{ box-shadow:0 0 0 7px rgba(169,196,179,0);} }
  @keyframes dashmove{ to{ stroke-dashoffset:-200; } }
  @keyframes scan{ 0%{ top:-2%; opacity:0;} 9%{ opacity:.55;} 88%{ opacity:.55;} 100%{ top:102%; opacity:0;} }
  @keyframes riseIn{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none;} }
  @keyframes wipeIn{ from{ clip-path:inset(0 100% 0 0);} to{ clip-path:inset(0 0 0 0);} }
  @keyframes drawin{ 0%{ stroke-dashoffset:1600;} 46%{ stroke-dashoffset:0;} 100%{ stroke-dashoffset:0;} }
  @keyframes chipin{ 0%{ opacity:0; transform:translateY(8px);} 100%{ opacity:1; transform:none;} }
  @keyframes cfspin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; }
    html{ scroll-behavior:auto; }
  }

  /* ── Responsive reflow (inline styles can't carry media queries; these hooks reflow fixed grids on smaller screens while preserving the desktop language) ── */
  @media (max-width:768px){
    [data-nav-link]{ display:none !important; }
  }
  @media (max-width:560px){
    [data-nav-ink] span{ display:none !important; }
  }
  @media (max-width:820px){
    #tech [style*="position: sticky"]{ position:static !important; top:auto !important; margin-bottom:clamp(28px,5vw,44px) !important; }
    #tech a[style*="2fr 3fr"]{ grid-template-columns:1fr !important; gap:0 !important; }
    #tech a[style*="2fr 3fr"] > div:first-child{ min-height:210px !important; }
    #tech a[style*="2fr 3fr"] > div:last-child{ padding:22px !important; }
  }
  @media (max-width:640px){
    [data-projtabs]{ grid-template-columns:1fr 1fr !important; }
  }
  @media (max-width:720px){
    #firm div[style*="repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }
    #firm div[style*="repeat(3, 1fr)"] > div{ border-left:0 !important; border-top:1px solid rgba(255,255,255,.12); padding-top:26px !important; padding-bottom:6px !important; }
    #firm div[style*="repeat(3, 1fr)"] > div:first-child{ border-top:0 !important; padding-top:6px !important; }
  }
  @media (max-width:760px){
    footer div[style*="1.3fr repeat(3, 1fr)"]{ grid-template-columns:1fr 1fr !important; }
  }
  @media (max-width:460px){
    footer div[style*="1.3fr repeat(3, 1fr)"]{ grid-template-columns:1fr !important; }
  }

/* ── Hover states (were inline style-hover in the source) ── */
[data-hx="1"]:hover{ background:var(--sage-mid) !important; }
[data-hx="2"]:hover{ background:var(--sage-mid) !important; transform:translateY(-2px) !important; }
[data-hx="3"]:hover{ border-color:var(--sage) !important; box-shadow:0 24px 60px rgba(23,19,15,.09) !important; transform:translateY(-3px) !important; }
[data-hx="4"]:hover{ background:var(--sage-deep) !important; border-color:var(--sage) !important; }
[data-hx="5"]:hover{ border-color:var(--sage) !important; box-shadow:0 26px 64px rgba(23,19,15,.1) !important; transform:translateY(-4px) !important; }
[data-hx="6"]:hover{ color:var(--sage-deep) !important; }
[data-hx="7"]:hover{ background:var(--sage-light) !important; transform:translateY(-2px) !important; }
[data-hx="8"]:hover{ color:#fff !important; }
[data-hx="9"]:hover{ background:var(--paper-3) !important; color:var(--ink) !important; border-color:var(--line-2) !important; }
[data-hx="10"]:hover{ background:var(--sage-deep) !important; transform:translateY(-2px) !important; }

/* ── Focus states (were inline style-focus in the source) ── */
[data-fx="1"]:focus{ border-bottom-color:var(--sage-deep) !important; }
[data-fx="2"]:focus{ border-color:var(--sage-deep) !important; }